+
+
+
+
+ {#if !onHome}
+
+
+
{active.label}
+
{active.title}
+
+ {/if}
-
-{#key currentPage}
-
-
-
-{/key}
-
-
- {#each pages as _, i}
-
- {/each}
+
+ {#key active.id}
+
+ {/key}
+
+
+
diff --git a/src/app.css b/src/app.css
index e609462..f48541a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,5 +1,22 @@
:root {
color-scheme: dark;
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ background: #020407;
+ color: #e8f3f8;
+ --bg: #020407;
+ --panel: rgba(7, 16, 23, 0.76);
+ --panel-soft: rgba(255, 255, 255, 0.045);
+ --panel-strong: rgba(255, 255, 255, 0.085);
+ --line: rgba(255, 255, 255, 0.105);
+ --line-bright: rgba(118, 218, 255, 0.35);
+ --text: #e8f3f8;
+ --muted: rgba(232, 243, 248, 0.58);
+ --faint: rgba(232, 243, 248, 0.32);
+ --accent: #65d9ff;
+ --accent-2: #9ee7ff;
+ --danger: #ff7d7d;
+ --ok: #8df0b4;
+ --warn: #ffe08b;
}
* {
@@ -8,25 +25,99 @@
box-sizing: border-box;
}
-*, *::before, *::after { cursor: none !important; }
+*, *::before, *::after {
+ cursor: none !important;
+}
-html, body {
+html,
+body,
+#app {
width: 100%;
height: 100%;
- background: #000;
- color: #e0e0e0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow: hidden;
- cursor: none;
}
-/* Stable-width numerals on all clock/time elements */
-.clock, .time, .date-time, [class*="clock"], [class*="time"] {
+body {
+ background:
+ radial-gradient(circle at 18% 20%, rgba(56, 185, 255, 0.13), transparent 34rem),
+ radial-gradient(circle at 80% 12%, rgba(131, 103, 255, 0.09), transparent 30rem),
+ linear-gradient(145deg, #020407 0%, #050b12 44%, #020407 100%);
+ color: var(--text);
font-variant-numeric: tabular-nums;
- font-feature-settings: "tnum";
}
-#app {
- width: 100%;
- height: 100%;
+button,
+input,
+textarea {
+ font: inherit;
+}
+
+.mirror-card {
+ background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.032));
+ border: 1px solid var(--line);
+ border-radius: 22px;
+ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
+}
+
+.mirror-card.subtle {
+ background: var(--panel-soft);
+ border-color: rgba(255, 255, 255, 0.08);
+}
+
+.kicker {
+ color: var(--accent);
+ font-size: clamp(0.68rem, 1.15vw, 0.82rem);
+ font-weight: 700;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.panel-title {
+ font-size: clamp(1.75rem, 4vw, 3.7rem);
+ font-weight: 250;
+ line-height: 0.96;
+ letter-spacing: -0.05em;
+}
+
+.muted {
+ color: var(--muted);
+}
+
+.empty-state {
+ color: var(--faint);
+ font-style: italic;
+}
+
+.event-chip {
+ display: grid;
+ gap: 0.18rem;
+ padding: 0.65rem 0.8rem;
+ border-left: 3px solid rgba(101, 217, 255, 0.55);
+ border-radius: 12px;
+ background: rgba(101, 217, 255, 0.075);
+ overflow: hidden;
+}
+
+.event-chip.routine {
+ border-left-color: rgba(141, 240, 180, 0.55);
+}
+
+.event-time {
+ color: var(--accent-2);
+ font-size: clamp(0.7rem, 1.2vw, 0.82rem);
+ font-weight: 650;
+}
+
+.event-name {
+ color: var(--text);
+ font-size: clamp(0.82rem, 1.55vw, 1rem);
+ line-height: 1.22;
+}
+
+.event-meta {
+ color: var(--faint);
+ font-size: clamp(0.68rem, 1.1vw, 0.78rem);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
diff --git a/src/components/DailySchedule.svelte b/src/components/DailySchedule.svelte
index b1c8f61..1ec059f 100644
--- a/src/components/DailySchedule.svelte
+++ b/src/components/DailySchedule.svelte
@@ -1,41 +1,44 @@
-
-
-
-
+
+
{#each hours as h}
-
{hrLabel(h)}
+
{hourLabel(h)}
{/each}
-
+
{/if}
{#each events as evt}
- {@const top = toPercent(evt.startH)}
- {@const height = heightPercent(evt.startH, evt.endH)}
- {@const past = evt.endH != null && curH > evt.endH}
+ {@const top = toPercent(evt.startH ?? HOUR_START)}
+ {@const height = heightPercent(evt.startH ?? HOUR_START, evt.endH)}
+ {@const past = evt.endH != null && curH > evt.endH}
{@const current = evt.endH != null && curH >= evt.startH && curH <= evt.endH}
-
- {evt.event}
- {#if height > 4}
- {fmtHour(evt.startH)}{evt.endH != null ? ' – ' + fmtHour(evt.endH) : ''}
- {#if evt.location}📍 {evt.location}{/if}
- {/if}
-
+ {fmtHour(evt.startH)}{evt.endH != null ? ` – ${fmtHour(evt.endH)}` : ''}
+ {evt.event}
+ {#if evt.location}{evt.location}{/if}
+
{/each}
+
+ {#if events.length === 0}
+ No events today
+ {/if}
-
+
- {#if $mirrorData.error}
⚠ {$mirrorData.error}
{/if}
+
diff --git a/src/components/Goals.svelte b/src/components/Goals.svelte
index 92755df..d8da4ba 100644
--- a/src/components/Goals.svelte
+++ b/src/components/Goals.svelte
@@ -1,162 +1,198 @@
-
-
-
-
-
- {#each ['Daily', 'Weekly', 'Monthly'] as horizon, i}
- {#if i > 0}
{/if}
-
-
{horizon}
- {#if grouped[horizon].length === 0}
-
No {horizon.toLowerCase()} goals
- {:else}
-
- {#each grouped[horizon] as goal}
- -
- {goal.priority || '—'}
- {goal.goal}
- {#if goal.category}
- {goal.category}
- {/if}
-
- {/each}
-
- {/if}
+
+
+ {#each horizons as horizon}
+
+
+
{horizon}
+
{grouped[horizon].length}
-
-
-
-
+ {#if grouped[horizon].length}
+
+ {:else}
+
Nothing here yet
+ {/if}
+
+ {/each}
- {#if error}
⚠ {error}
{/if}
+
diff --git a/src/components/Home.svelte b/src/components/Home.svelte
index c743966..84bf9db 100644
--- a/src/components/Home.svelte
+++ b/src/components/Home.svelte
@@ -1,11 +1,17 @@
-
-
- {#if weather}
-
-
{weatherIcon(weather.weathercode)}
-
{Math.round(weather.temperature)}°F
+
+
+ rasplient
+
+
+
+ {#if weather}
+
+ {weatherIcon(weather.weathercode)}
+ {Math.round(weather.temperature)}°F
+
+ {/if}
+
+ {#if quote}
+
“{quote.text}” — {quote.author}
+ {/if}
+
+
+