Matiss/Final-Year-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(webapp): redesign dashboard with shadcn-style UI shell

Browse Source
This commit is contained in:
Matiss Jurevics
2026-03-16 11:00:00 +00:00
parent c6919d8174
commit eb0fbf24f0
95 changed files with 5940 additions and 539 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
WebApp/src/routes/camera/+page.svelte
View File

@@ -38,9 +38,9 @@
</script>
<AppChrome pageKey="camera">
<section id="screen-home-camera" class="flex flex-col gap-6 max-w-7xl mx-auto h-full min-h-0">
<div class="flex-1 min-h-0 flex flex-col gap-6">
<Card class="glass-card relative flex min-h-[260px] flex-[3] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80">
<section id="screen-home-camera" class="mx-auto flex h-full min-h-0 max-w-7xl flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-4 lg:gap-6 xl:flex-1 xl:min-h-0">
<Card class="glass-card relative flex min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 sm:min-h-[260px] xl:flex-[3]">
<div id="cameraPreview" class="flex-1 bg-black relative flex items-center justify-center {$appState.isMotionActive ? 'bg-red-900/20' : ''}">
<video
id="cameraVideo"
@@ -90,16 +90,16 @@
</div>
</Card>
<div class="flex-[2] min-h-0 grid grid-cols-1 xl:grid-cols-[2fr_1fr] gap-6">
<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80">
<div class="grid grid-cols-1 gap-4 lg:gap-6 xl:min-h-0 xl:flex-[2] xl:grid-cols-[2fr_1fr]">
<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 xl:min-h-0">
<CardHeader class="pb-2">
<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Logs</CardTitle>
</CardHeader>
<CardContent class="flex-1">
<CardContent class="flex-1 xl:min-h-0">
<ScrollArea
id="cameraLogs"
class="min-h-[220px] rounded-xl border border-white/5 bg-black/40 p-4 text-xs font-mono text-gray-400"
>
id="cameraLogs"
class="h-[220px] rounded-xl border border-white/5 bg-black/40 p-4 text-xs font-mono text-gray-400 xl:h-full xl:min-h-[220px]"
>
{#if $appState.activityLog.length === 0}
<div class="text-gray-600 italic">Awaiting connection...</div>
{:else}
@@ -111,11 +111,11 @@
</CardContent>
</Card>
<Card class="glass-card min-h-[220px] rounded-3xl border-white/10 bg-[#16161d]/80">
<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 xl:min-h-0">
<CardHeader class="pb-2">
<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Actions / Options</CardTitle>
</CardHeader>
<CardContent class="space-y-4">
<CardContent class="space-y-4 xl:min-h-0 xl:overflow-y-auto">
<div class="space-y-2">
<div class="flex items-center justify-between gap-2">
<Label for="cameraInputSelect" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
@@ -150,8 +150,8 @@
</SelectContent>
</Select>
</div>
<div class="rounded-2xl border border-white/10 bg-black/30 p-4 space-y-4">
<div class="flex items-start justify-between gap-3">
<div class="space-y-3 rounded-2xl border border-white/10 bg-black/30 p-3 sm:p-4 sm:space-y-4">
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div class="space-y-1">
<p class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">Automatic Detection</p>
<p class="text-sm text-gray-200">
@@ -163,7 +163,7 @@
</div>
<Button
variant={$appState.motionDetection.enabled ? 'secondary' : 'outline'}
class="min-w-[112px] rounded-xl"
class="min-w-[112px] self-start rounded-xl sm:self-auto"
onclick={() => appController.setMotionDetectionEnabled(!$appState.motionDetection.enabled)}
>
{$appState.motionDetection.enabled ? 'Pause' : 'Arm'}
@@ -197,7 +197,7 @@
</Select>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
<p class="text-[10px] uppercase tracking-wider text-gray-500">Detector State</p>
<p class="mt-1 text-sm font-medium text-gray-200">{$appState.motionDetection.state}</p>