Spaces:

raayraay
/

clarity1

Running

App Files Files Community

raayraay commited on 28 days ago

Commit

fbe0dd1

verified ·

1 Parent(s): 02114a6

create a figma material 3 expressive design for a smart journal with ai assistant all local app is called clarity

Browse files

Files changed (4) hide show

README.md +7 -4
index.html +337 -19
script.js +528 -0
style.css +94 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Clarity1
-emoji: 🚀
-colorFrom: green
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Clarity1
+colorFrom: pink
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,337 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark h-full">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Clarity1 — Smart Journal</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: ['Inter', 'system-ui', 'sans-serif'],
+            },
+            boxShadow: {
+              md3: '0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15)',
+              md3lg: '0 4px 8px 3px rgb(0 0 0 / 0.25), 0 2px 3px -1px rgb(0 0 0 / 0.15)',
+            },
+            borderRadius: {
+              xl4: '1.5rem',
+              xl5: '2rem',
+            },
+          }
+        }
+      }
+    </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+</head>
+<body class="h-full bg-surface text-onSurface font-sans antialiased selection:bg-primary/30 selection:text-onPrimary">
+  <div id="app" class="min-h-full">
+    <!-- Top App Bar -->
+    <header class="sticky top-0 z-40 border-b border-outlineVariant/30 bg-surface/80 backdrop-blur supports-[backdrop-filter]:bg-surface/60">
+      <div class="mx-auto max-w-[1400px] px-4 sm:px-6">
+        <div class="flex h-16 items-center gap-3">
+          <!-- App Title -->
+          <button id="sidebarToggle" class="inline-flex h-10 w-10 items-center justify-center rounded-full text-onSurfaceVariant hover:bg-surfaceVariant focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-surface" aria-label="Toggle navigation">
+            <i data-feather="menu" class="h-5 w-5"></i>
+          </button>
+          <div class="flex items-center gap-2">
+            <div class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-onPrimary shadow-md3">
+              <i data-feather="book-open" class="h-5 w-5"></i>
+            </div>
+            <div class="flex flex-col">
+              <h1 class="text-lg font-semibold tracking-tight text-onSurface">Clarity1</h1>
+              <span class="text-xs text-onSurfaceVariant">Smart Journal • Local AI</span>
+            </div>
+          </div>
+          <div class="ml-4 flex-1">
+            <div class="relative max-w-xl">
+              <i data-feather="search" class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-onSurfaceVariant"></i>
+              <input id="searchInput" type="search" placeholder="Search your entries..." class="w-full rounded-xl bg-surfaceVariant py-2.5 pl-10 pr-3 text-sm text-onSurfaceVariant placeholder-onSurfaceVariant/70 outline-none ring-1 ring-outlineVariant/40 focus:ring-2 focus:ring-primary" />
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <button id="composeBtn" class="inline-flex items-center gap-2 rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-onPrimary shadow-md3 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-surface">
+              <i data-feather="edit-3" class="h-4 w-4"></i>
+              New Entry
+            </button>
+            <div class="flex items-center rounded-xl bg-surfaceVariant p-1">
+              <button data-theme="light" class="theme-toggle inline-flex h-9 w-9 items-center justify-center rounded-lg text-onSurfaceVariant hover:bg-surface hover:text-onSurface">
+                <i data-feather="sun" class="h-4 w-4"></i>
+              </button>
+              <button data-theme="dark" class="theme-toggle inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-onPrimary">
+                <i data-feather="moon" class="h-4 w-4"></i>
+              </button>
+            </div>
+            <button id="profileBtn" class="ml-1 inline-flex h-10 w-10 items-center justify-center rounded-full text-onSurfaceVariant hover:bg-surfaceVariant">
+              <i data-feather="user" class="h-5 w-5"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+    <!-- Layout -->
+    <div class="mx-auto max-w-[1400px] px-4 sm:px-6 py-6">
+      <div class="grid grid-cols-12 gap-6">
+        <!-- Sidebar -->
+        <aside id="sidebar" class="col-span-12 lg:col-span-3 xl:col-span-2">
+          <div class="rounded-2xl bg-surfaceVariant p-4">
+            <nav class="space-y-2">
+              <button data-nav="journal" class="nav-item w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-left font-medium text-onSurfaceVariant hover:bg-primary hover:text-onPrimary">
+                <i data-feather="book" class="h-5 w-5"></i>
+                Journal
+              </button>
+              <button data-nav="prompts" class="nav-item w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-left font-medium text-onSurfaceVariant hover:bg-primary hover:text-onPrimary">
+                <i data-feather="wand-2" class="h-5 w-5"></i>
+                Prompts
+              </button>
+              <button data-nav="chat" class="nav-item w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-left font-medium text-onSurfaceVariant hover:bg-primary hover:text-onPrimary">
+                <i data-feather="message-circle" class="h-5 w-5"></i>
+                AI Chat
+              </button>
+              <button data-nav="analytics" class="nav-item w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-left font-medium text-onSurfaceVariant hover:bg-primary hover:text-onPrimary">
+                <i data-feather="activity" class="h-5 w-5"></i>
+                Analytics
+              </button>
+              <button data-nav="settings" class="nav-item w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-left font-medium text-onSurfaceVariant hover:bg-primary hover:text-onPrimary">
+                <i data-feather="settings" class="h-5 w-5"></i>
+                Settings
+              </button>
+            </nav>
+            <div class="mt-6 rounded-xl bg-surface p-4 text-sm text-onSurfaceVariant">
+              <p class="mb-2 font-semibold text-onSurface">Tip</p>
+              <p>Use the compose button to start a new entry. AI stays local, no cloud required.</p>
+            </div>
+          </div>
+        </aside>
+        <!-- Main -->
+        <main class="col-span-12 lg:col-span-9 xl:col-span-10">
+          <div id="views">
+            <!-- Journal View -->
+            <section id="view-journal" class="space-y-6">
+              <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <h2 class="text-2xl font-bold tracking-tight text-onSurface">Recent Entries</h2>
+                  <p class="text-sm text-onSurfaceVariant">Capture thoughts and ideas effortlessly.</p>
+                </div>
+                <div class="flex gap-2">
+                  <button id="viewModeGrid" class="inline-flex h-10 w-10 items-center justify-center rounded-xl text-onSurfaceVariant hover:bg-surfaceVariant">
+                    <i data-feather="grid" class="h-5 w-5"></i>
+                  </button>
+                  <button id="viewModeList" class="inline-flex h-10 w-10 items-center justify-center rounded-xl text-onSurfaceVariant hover:bg-surfaceVariant">
+                    <i data-feather="list" class="h-5 w-5"></i>
+                  </button>
+                </div>
+              </div>
+              <div id="entriesGrid" class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3"></div>
+              <div id="entriesList" class="hidden space-y-3"></div>
+            </section>
+            <!-- Prompts View -->
+            <section id="view-prompts" class="hidden space-y-6">
+              <div>
+                <h2 class="text-2xl font-bold tracking-tight text-onSurface">Prompts</h2>
+                <p class="text-sm text-onSurfaceVariant">Jumpstart your writing with AI-curated prompts.</p>
+              </div>
+              <div id="promptsGrid" class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3"></div>
+            </section>
+            <!-- AI Chat View -->
+            <section id="view-chat" class="hidden">
+              <div class="mb-4">
+                <h2 class="text-2xl font-bold tracking-tight text-onSurface">AI Assistant</h2>
+                <p class="text-sm text-onSurfaceVariant">Ask anything. Everything runs locally on your device.</p>
+              </div>
+              <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
+                <div class="xl:col-span-2 rounded-2xl bg-surfaceVariant p-4">
+                  <div id="chatMessages" class="mb-4 max-h-[460px] space-y-3 overflow-y-auto pr-2">
+                    <!-- Messages -->
+                  </div>
+                  <form id="chatForm" class="flex items-end gap-2">
+                    <textarea id="chatInput" rows="1" placeholder="Ask Clarity1 anything..." class="min-h-[44px] w-full resize-none rounded-xl bg-surface px-3 py-2.5 text-sm text-onSurface placeholder-onSurfaceVariant/70 outline-none ring-1 ring-outlineVariant/40 focus:ring-2 focus:ring-primary"></textarea>
+                    <button type="submit" class="inline-flex h-11 items-center justify-center rounded-xl bg-primary px-4 font-semibold text-onPrimary shadow-md3 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-surface">
+                      <i data-feather="send" class="h-4 w-4"></i>
+                    </button>
+                  </form>
+                </div>
+                <div class="rounded-2xl bg-surfaceVariant p-4">
+                  <h3 class="mb-2 font-semibold text-onSurface">Examples</h3>
+                  <div class="space-y-2">
+                    <button class="chat-example w-full rounded-xl bg-surface p-3 text-left text-sm text-onSurface hover:bg-surfaceVariant">Summarize my entries from last week</button>
+                    <button class="chat-example w-full rounded-xl bg-surface p-3 text-left text-sm text-onSurface hover:bg-surfaceVariant">Give me three prompts about overcoming procrastination</button>
+                    <button class="chat-example w-full rounded-xl bg-surface p-3 text-left text-sm text-onSurface hover:bg-surfaceVariant">Turn my draft into actionable steps</button>
+                  </div>
+                </div>
+              </div>
+            </section>
+            <!-- Analytics View -->
+            <section id="view-analytics" class="hidden space-y-6">
+              <div>
+                <h2 class="text-2xl font-bold tracking-tight text-onSurface">Analytics</h2>
+                <p class="text-sm text-onSurfaceVariant">Reflect on your journaling cadence and themes.</p>
+              </div>
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+                <div class="rounded-2xl bg-surfaceVariant p-6">
+                  <div class="mb-2 text-sm text-onSurfaceVariant">Total Entries</div>
+                  <div class="text-3xl font-bold text-onSurface" id="statTotal">0</div>
+                </div>
+                <div class="rounded-2xl bg-surfaceVariant p-6">
+                  <div class="mb-2 text-sm text-onSurfaceVariant">This Week</div>
+                  <div class="text-3xl font-bold text-onSurface" id="statWeek">0</div>
+                </div>
+                <div class="rounded-2xl bg-surfaceVariant p-6">
+                  <div class="mb-2 text-sm text-onSurfaceVariant">Longest Streak</div>
+                  <div class="text-3xl font-bold text-onSurface" id="statStreak">0</div>
+                </div>
+              </div>
+            </section>
+            <!-- Settings View -->
+            <section id="view-settings" class="hidden space-y-6">
+              <div>
+                <h2 class="text-2xl font-bold tracking-tight text-onSurface">Settings</h2>
+                <p class="text-sm text-onSurfaceVariant">Customize your experience.</p>
+              </div>
+              <div class="rounded-2xl bg-surfaceVariant p-6">
+                <div class="mb-4 flex items-center justify-between">
+                  <div>
+                    <div class="font-semibold text-onSurface">Theme</div>
+                    <div class="text-sm text-onSurfaceVariant">Switch between light and dark modes.</div>
+                  </div>
+                  <div class="flex items-center rounded-xl bg-surface p-1">
+                    <button data-theme="light" class="theme-toggle inline-flex h-9 w-9 items-center justify-center rounded-lg text-onSurfaceVariant hover:bg-surfaceVariant hover:text-onSurface">
+                      <i data-feather="sun" class="h-4 w-4"></i>
+                    </button>
+                    <button data-theme="dark" class="theme-toggle inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-onPrimary">
+                      <i data-feather="moon" class="h-4 w-4"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="flex items-center justify-between">
+                  <div>
+                    <div class="font-semibold text-onSurface">AI Model</div>
+                    <div class="text-sm text-onSurfaceVariant">Runs fully local; no data leaves your device.</div>
+                  </div>
+                  <span class="rounded-full bg-surface px-3 py-1 text-xs text-onSurface">Local Only</span>
+                </div>
+              </div>
+            </section>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+  <!-- Compose Modal -->
+  <div id="composeModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
+    <div class="w-full max-w-3xl overflow-hidden rounded-3xl bg-surface shadow-md3lg ring-1 ring-outlineVariant/20">
+      <div class="flex items-center justify-between border-b border-outlineVariant/30 px-6 py-4">
+        <div class="flex items-center gap-2">
+          <div class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-onPrimary">
+            <i data-feather="feather" class="h-4 w-4"></i>
+          </div>
+          <h3 class="text-lg font-semibold text-onSurface">New Entry</h3>
+        </div>
+        <button id="closeCompose" class="inline-flex h-10 w-10 items-center justify-center rounded-xl text-onSurfaceVariant hover:bg-surfaceVariant">
+          <i data-feather="x" class="h-5 w-5"></i>
+        </button>
+      </div>
+      <form id="composeForm" class="p-6 space-y-4">
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-onSurface">Title</label>
+            <input id="entryTitle" type="text" placeholder="Give your entry a title" class="w-full rounded-xl bg-surfaceVariant px-3 py-2.5 text-sm text-onSurface placeholder-onSurfaceVariant/70 outline-none ring-1 ring-outlineVariant/40 focus:ring-2 focus:ring-primary" />
+          </div>
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-onSurface">Mood</label>
+            <select id="entryMood" class="w-full rounded-xl bg-surfaceVariant px-3 py-2.5 text-sm text-onSurface outline-none ring-1 ring-outlineVariant/40 focus:ring-2 focus:ring-primary">
+              <option>😊 Calm</option>
+              <option>🎯 Focused</option>
+              <option>🌟 Grateful</option>
+              <option>💡 Insight</option>
+              <option>🌧️ Low</option>
+            </select>
+          </div>
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-onSurface">Content</label>
+          <textarea id="entryContent" rows="8" placeholder="Start writing..." class="w-full resize-none rounded-xl bg-surfaceVariant px-3 py-2.5 text-sm text-onSurface placeholder-onSurfaceVariant/70 outline-none ring-1 ring-outlineVariant/40 focus:ring-2 focus:ring-primary"></textarea>
+        </div>
+        <div class="flex items-center justify-between gap-2">
+          <div class="flex items-center gap-3 text-sm text-onSurfaceVariant">
+            <span>Tags:</span>
+            <input id="entryTags" type="text" placeholder="comma, separated, tags" class="w-64 rounded-xl bg-surfaceVariant px-3 py-2 text-sm text-onSurface placeholder-onSurfaceVariant/70 outline-none ring-1 ring-outlineVariant/40 focus:ring-2 focus:ring-primary" />
+          </div>
+          <div class="flex items-center gap-2">
+            <button type="button" id="aiAssistBtn" class="inline-flex items-center gap-2 rounded-xl bg-secondary px-4 py-2.5 text-sm font-semibold text-onSecondary shadow-md3 hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2 focus:ring-offset-surface">
+              <i data-feather="sparkles" class="h-4 w-4"></i>
+              AI Assist
+            </button>
+            <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-onPrimary shadow-md3 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-surface">
+              <i data-feather="save" class="h-4 w-4"></i>
+              Save Entry
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <!-- Entry Modal -->
+  <div id="entryModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
+    <div class="w-full max-w-3xl overflow-hidden rounded-3xl bg-surface shadow-md3lg ring-1 ring-outlineVariant/20">
+      <div class="flex items-center justify-between border-b border-outlineVariant/30 px-6 py-4">
+        <div class="flex items-center gap-2">
+          <div class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary text-onPrimary">
+            <i data-feather="file-text" class="h-4 w-4"></i>
+          </div>
+          <h3 id="entryModalTitle" class="text-lg font-semibold text-onSurface">Entry</h3>
+        </div>
+        <div class="flex items-center gap-2">
+          <button id="deleteEntryBtn" class="inline-flex items-center gap-2 rounded-xl bg-error px-3 py-2 text-sm font-semibold text-onError hover:bg-error/90 focus:outline-none focus:ring-2 focus:ring-error focus:ring-offset-2 focus:ring-offset-surface">
+            <i data-feather="trash-2" class="h-4 w-4"></i>
+            Delete
+          </button>
+          <button id="closeEntry" class="inline-flex h-10 w-10 items-center justify-center rounded-xl text-onSurfaceVariant hover:bg-surfaceVariant">
+            <i data-feather="x" class="h-5 w-5"></i>
+          </button>
+        </div>
+      </div>
+      <div class="space-y-4 p-6">
+        <div class="flex items-center gap-3 text-sm text-onSurfaceVariant">
+          <span id="entryModalDate"></span>
+          <span>•</span>
+          <span id="entryModalMood"></span>
+          <span>•</span>
+          <span id="entryModalTags"></span>
+        </div>
+        <div id="entryModalContent" class="prose prose-invert max-w-none text-onSurface">
+          <!-- Content -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="script.js"></script>
+  <script>
+    feather.replace();
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,528 @@

+// Clarity1 — Smart Journal (Local)
+const storeKey = 'clarity1_entries_v1';
+const chatKey = 'clarity1_chat_v1';
+const els = {
+  sidebar: document.getElementById('sidebar'),
+  sidebarToggle: document.getElementById('sidebarToggle'),
+  searchInput: document.getElementById('searchInput'),
+  composeBtn: document.getElementById('composeBtn'),
+  composeModal: document.getElementById('composeModal'),
+  composeForm: document.getElementById('composeForm'),
+  entryTitle: document.getElementById('entryTitle'),
+  entryMood: document.getElementById('entryMood'),
+  entryContent: document.getElementById('entryContent'),
+  entryTags: document.getElementById('entryTags'),
+  aiAssistBtn: document.getElementById('aiAssistBtn'),
+  closeCompose: document.getElementById('closeCompose'),
+  entriesGrid: document.getElementById('entriesGrid'),
+  entriesList: document.getElementById('entriesList'),
+  viewModeGrid: document.getElementById('viewModeGrid'),
+  viewModeList: document.getElementById('viewModeList'),
+  viewJournal: document.getElementById('view-journal'),
+  viewPrompts: document.getElementById('view-prompts'),
+  viewChat: document.getElementById('view-chat'),
+  viewAnalytics: document.getElementById('view-analytics'),
+  viewSettings: document.getElementById('view-settings'),
+  promptsGrid: document.getElementById('promptsGrid'),
+  chatMessages: document.getElementById('chatMessages'),
+  chatForm: document.getElementById('chatForm'),
+  chatInput: document.getElementById('chatInput'),
+  statTotal: document.getElementById('statTotal'),
+  statWeek: document.getElementById('statWeek'),
+  statStreak: document.getElementById('statStreak'),
+  entryModal: document.getElementById('entryModal'),
+  entryModalTitle: document.getElementById('entryModalTitle'),
+  entryModalDate: document.getElementById('entryModalDate'),
+  entryModalMood: document.getElementById('entryModalMood'),
+  entryModalTags: document.getElementById('entryModalTags'),
+  entryModalContent: document.getElementById('entryModalContent'),
+  deleteEntryBtn: document.getElementById('deleteEntryBtn'),
+  closeEntry: document.getElementById('closeEntry'),
+};
+let state = {
+  entries: [],
+  selectedEntryId: null,
+  view: 'journal',
+  mode: 'grid', // or 'list'
+  chat: [],
+};
+const promptsCatalog = [
+  { title: 'Values Check', body: 'What matters most to me this week?', tags: ['reflection', 'values'] },
+  { title: 'Peak Moment', body: 'Describe a high point today and why it resonated.', tags: ['gratitude'] },
+  { title: 'Friction Map', body: 'What’s one friction point I can reduce tomorrow?', tags: ['action'] },
+  { title: 'Anchor Habit', body: 'If I had to pick one habit to do daily, what is it?', tags: ['habit'] },
+  { title: 'Perspective Shift', body: 'What assumption am I ready to challenge?', tags: ['growth'] },
+  { title: 'Energy Audit', body: 'When do I feel most alive?', tags: ['energy'] },
+];
+function loadEntries() {
+  try {
+    const data = JSON.parse(localStorage.getItem(storeKey) || '[]');
+    if (Array.isArray(data)) state.entries = data;
+  } catch (e) {
+    console.warn('Failed to load entries', e);
+    state.entries = [];
+  }
+}
+function saveEntries() {
+  localStorage.setItem(storeKey, JSON.stringify(state.entries));
+}
+function loadChat() {
+  try {
+    const data = JSON.parse(localStorage.getItem(chatKey) || '[]');
+    if (Array.isArray(data)) state.chat = data;
+  } catch {
+    state.chat = [];
+  }
+}
+function saveChat() {
+  localStorage.setItem(chatKey, JSON.stringify(state.chat));
+}
+function uid() {
+  return Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+function formatDate(ts) {
+  const d = new Date(ts);
+  return d.toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+function renderNav(active) {
+  document.querySelectorAll('.nav-item').forEach(btn => {
+    btn.classList.toggle('bg-primary', btn.dataset.nav === active);
+    btn.classList.toggle('text-onPrimary', btn.dataset.nav === active);
+  });
+}
+function showView(name) {
+  state.view = name;
+  els.viewJournal.classList.toggle('hidden', name !== 'journal');
+  els.viewPrompts.classList.toggle('hidden', name !== 'prompts');
+  els.viewChat.classList.toggle('hidden', name !== 'chat');
+  els.viewAnalytics.classList.toggle('hidden', name !== 'analytics');
+  els.viewSettings.classList.toggle('hidden', name !== 'settings');
+  renderNav(name);
+  if (name === 'journal') {
+    renderEntries();
+    updateAnalytics();
+  }
+  if (name === 'prompts') {
+    renderPrompts();
+  }
+  if (name === 'chat') {
+    renderChat();
+  }
+  if (name === 'analytics') {
+    updateAnalytics();
+  }
+}
+function entryCard(e) {
+  const tags = (e.tags || []).slice(0, 3).map(t => `#${t}`).join(' ');
+  return `
+    <article class="card animate-fadeUp overflow-hidden">
+      <div class="p-4 space-y-3">
+        <div class="flex items-start justify-between gap-2">
+          <h3 class="text-lg font-semibold text-onSurface">${escapeHtml(e.title || 'Untitled')}</h3>
+          <span class="rounded-full bg-surface-container-high px-2.5 py-1 text-xs text-onSurfaceVariant">${e.mood}</span>
+        </div>
+        <p class="text-sm text-onSurfaceVariant line-clamp-3">${escapeHtml((e.content || '').slice(0, 200))}</p>
+        <div class="mt-2 flex items-center justify-between">
+          <span class="text-xs text-onSurfaceVariant">${formatDate(e.createdAt)}</span>
+          <div class="flex items-center gap-2 text-onSurfaceVariant">
+            <span class="text-xs">${tags}</span>
+            <button data-view="${e.id}" class="inline-flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-variant text-onSurfaceVariant hover:text-onSurface">
+              <i data-feather="eye" class="h-4 w-4"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </article>
+  `;
+}
+function entryRow(e) {
+  const tags = (e.tags || []).map(t => `#${t}`).join(' ');
+  return `
+    <div class="card p-4">
+      <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <div class="min-w-0">
+          <div class="flex items-center gap-2">
+            <h3 class="truncate text-lg font-semibold text-onSurface">${escapeHtml(e.title || 'Untitled')}</h3>
+            <span class="rounded-full bg-surface-container-high px-2.5 py-1 text-xs text-onSurfaceVariant">${e.mood}</span>
+          </div>
+          <p class="truncate text-sm text-onSurfaceVariant">${escapeHtml(e.content || '')}</p>
+        </div>
+        <div class="flex items-center gap-3">
+          <span class="text-xs text-onSurfaceVariant">${formatDate(e.createdAt)}</span>
+          <span class="text-xs text-onSurfaceVariant">${tags}</span>
+          <button data-view="${e.id}" class="inline-flex h-8 w-8 items-center justify-center rounded-lg hover:bg-surface-variant text-onSurfaceVariant hover:text-onSurface">
+            <i data-feather="eye" class="h-4 w-4"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+function renderEntries() {
+  const q = (els.searchInput.value || '').toLowerCase().trim();
+  const list = state.entries
+    .slice()
+    .sort((a, b) => b.createdAt - a.createdAt)
+    .filter(e => {
+      if (!q) return true;
+      return (
+        (e.title || '').toLowerCase().includes(q) ||
+        (e.content || '').toLowerCase().includes(q) ||
+        (e.tags || []).some(t => t.toLowerCase().includes(q))
+      );
+    });
+  if (state.mode === 'grid') {
+    els.entriesGrid.classList.remove('hidden');
+    els.entriesList.classList.add('hidden');
+    els.entriesGrid.innerHTML = list.map(entryCard).join('') || `
+      <div class="card p-10 text-center text-onSurfaceVariant">
+        <i data-feather="inbox" class="mx-auto h-6 w-6 mb-2"></i>
+        No entries yet. Create your first one!
+      </div>`;
+  } else {
+    els.entriesGrid.classList.add('hidden');
+    els.entriesList.classList.remove('hidden');
+    els.entriesList.innerHTML = list.map(entryRow).join('') || `
+      <div class="card p-10 text-center text-onSurfaceVariant">
+        <i data-feather="inbox" class="mx-auto h-6 w-6 mb-2"></i>
+        No entries yet. Create your first one!
+      </div>`;
+  }
+  // Re-bind icons in dynamically injected DOM
+  if (window.feather) feather.replace();
+  // Bind view buttons
+  document.querySelectorAll('[data-view]').forEach(btn => {
+    btn.addEventListener('click', () => openEntry(btn.getAttribute('data-view')));
+  });
+}
+function renderPrompts() {
+  els.promptsGrid.innerHTML = promptsCatalog.map(p => `
+    <div class="card p-5">
+      <h3 class="text-lg font-semibold text-onSurface">${p.title}</h3>
+      <p class="mt-2 text-sm text-onSurfaceVariant">${p.body}</p>
+      <div class="mt-3 flex items-center justify-between">
+        <div class="text-xs text-onSurfaceVariant">${(p.tags || []).map(t => `#${t}`).join(' ')}</div>
+        <button data-use-prompt="${encodeURIComponent(JSON.stringify(p))}" class="inline-flex items-center gap-2 rounded-xl bg-primary px-3 py-1.5 text-sm font-semibold text-onPrimary shadow-md3 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-surface">
+          <i data-feather="arrow-right" class="h-4 w-4"></i> Use
+        </button>
+      </div>
+    </div>
+  `).join('');
+  if (window.feather) feather.replace();
+  document.querySelectorAll('[data-use-prompt]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const p = JSON.parse(decodeURIComponent(btn.getAttribute('data-use-prompt')));
+      openCompose({ preset: p });
+    });
+  });
+}
+function openCompose({ preset } = {}) {
+  if (preset) {
+    els.entryTitle.value = preset.title || '';
+    els.entryContent.value = `${preset.body}\n\n`;
+    els.entryTags.value = (preset.tags || []).join(', ');
+  } else {
+    els.composeForm.reset();
+  }
+  els.composeModal.classList.remove('hidden');
+  els.composeModal.classList.add('flex');
+}
+function closeCompose() {
+  els.composeModal.classList.add('hidden');
+  els.composeModal.classList.remove('flex');
+}
+function openEntry(id) {
+  const entry = state.entries.find(e => e.id === id);
+  if (!entry) return;
+  state.selectedEntryId = id;
+  els.entryModalTitle.textContent = entry.title || 'Untitled';
+  els.entryModalDate.textContent = formatDate(entry.createdAt);
+  els.entryModalMood.textContent = entry.mood;
+  els.entryModalTags.textContent = (entry.tags || []).map(t => `#${t}`).join(' ');
+  els.entryModalContent.innerHTML = markdownToHtml(entry.content || '');
+  els.entryModal.classList.remove('hidden');
+  els.entryModal.classList.add('flex');
+}
+function closeEntry() {
+  els.entryModal.classList.add('hidden');
+  els.entryModal.classList.remove('flex');
+  state.selectedEntryId = null;
+}
+function renderChat() {
+  els.chatMessages.innerHTML = state.chat.map(m => `
+    <div class="flex items-start gap-3 ${m.role === 'assistant' ? '' : 'justify-end'}">
+      ${m.role === 'assistant' ? `
+        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-secondary text-onSecondary">
+          <i data-feather="cpu" class="h-4 w-4"></i>
+        </div>
+      ` : `
+        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary text-onPrimary">
+          <i data-feather="user" class="h-4 w-4"></i>
+        </div>
+      `}
+      <div class="max-w-[85%] rounded-2xl px-4 py-2.5 ${m.role === 'assistant' ? 'bg-surface-container-high text-onSurface' : 'bg-primary text-onPrimary'}">
+        <div class="text-sm whitespace-pre-wrap">${escapeHtml(m.content)}</div>
+      </div>
+    </div>
+  `).join('') || `
+    <div class="text-center text-onSurfaceVariant">
+      <i data-feather="message-square" class="mx-auto h-6 w-6"></i>
+      Ask Clarity1 to reflect on your journal.
+    </div>
+  `;
+  if (window.feather) feather.replace();
+  els.chatMessages.scrollTop = els.chatMessages.scrollHeight;
+}
+function aiAssistCompose(content, mood, tags) {
+  // Lightweight local "AI" assistant for compose window
+  const base = content.trim();
+  const suggestions = [
+    'You might expand this with a concrete next step.',
+    'Try adding an example that illustrates your point.',
+    'Consider noting one thing you’re grateful for related to this.',
+  ];
+  const pick = () => suggestions[Math.floor(Math.random() * suggestions.length)];
+  return `
+Here’s a polished version of your entry:
+${base}
+Suggestions:
+- ${pick()}
+- ${pick()}
+- ${pick()}
+Mood matched: ${mood}. Tags suggested: ${(tags || []).slice(0, 4).join(', ') || 'journal, reflection'}
+  `.trim();
+}
+function aiChatRespond(message) {
+  const m = message.trim();
+  if (!m) return 'Please enter a message.';
+  if (/summar/i.test(m)) {
+    return summarizeEntries();
+  }
+  if (/prompt/i.test(m)) {
+    return 'Here are three prompts to help you reflect:\n1) What energized me today?\n2) What did I avoid, and why?\n3) What assumption am I willing to revisit?';
+  }
+  if (/procrastinat/i.test(m)) {
+    return 'A quick approach:\n- Name the task in one sentence.\n- Identify the tiniest next action.\n- Timebox 10 minutes and start.';
+  }
+  if (/action|next|steps/i.test(m)) {
+    return 'Turn your draft into steps:\n1) Define the outcome.\n2) List the smallest actionable task.\n3) Assign a time window.';
+  }
+  if (/last week|week/i.test(m)) {
+    return summarizeEntries();
+  }
+  return localFallback(m);
+}
+function localFallback(msg) {
+  const rules = [
+    { k: /hello|hi/i, r: 'Hello! Ask me to summarize your week, generate prompts, or refine a draft.' },
+    { k: /help/i, r: 'Try: “Summarize my entries from last week”, “Give me three prompts”, or “Turn my draft into steps”.' },
+  ];
+  for (const { k, r } of rules) if (k.test(msg)) return r;
+  return `I heard: “${msg}”. I can help summarize your entries or turn thoughts into steps.`;
+}
+function summarizeEntries() {
+  const total = state.entries.length;
+  if (!total) return 'No entries to summarize yet.';
+  const last7 = state.entries.filter(e => Date.now() - e.createdAt <= 7 * 86400000);
+  const words = state.entries.reduce((acc, e) => acc + (e.content || '').split(/\s+/).filter(Boolean).length, 0);
+  const moods = state.entries.reduce((acc, e) => {
+    const m = (e.mood || '').split(' ')[0];
+    acc[m] = (acc[m] || 0) + 1;
+    return acc;
+  }, {});
+  const moodTop = Object.entries(moods).sort((a,b) => b[1]-a[1])[0]?.[0] || 'Unknown';
+  return `Summary:
+- ${total} total entries
+- ${last7.length} entries in the last 7 days
+- Common mood: ${moodTop}
+- Estimated total words: ${words}`;
+}
+function updateAnalytics() {
+  const total = state.entries.length;
+  const week = state.entries.filter(e => Date.now() - e.createdAt <= 7 * 86400000).length;
+  // Simple streak: count consecutive days with entries ending today
+  const days = new Set(state.entries.map(e => new Date(e.createdAt).toDateString()));
+  let streak = 0;
+  let cursor = new Date();
+  while (days.has(cursor.toDateString())) {
+    streak += 1;
+    cursor.setDate(cursor.getDate() - 1);
+  }
+  els.statTotal.textContent = total;
+  els.statWeek.textContent = week;
+  els.statStreak.textContent = streak;
+}
+function escapeHtml(s) {
+  return (s || '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+function markdownToHtml(s) {
+  // Very small subset: headings, bold, italics, lists, line breaks
+  return escapeHtml(s)
+    .replace(/^### (.*$)/gim, '<h3 class="text-base font-semibold mt-4">$1</h3>')
+    .replace(/^## (.*$)/gim, '<h2 class="text-lg font-semibold mt-4">$1</h2>')
+    .replace(/^# (.*$)/gim, '<h1 class="text-xl font-semibold mt-4">$1</h1>')
+    .replace(/\*\*(.*?)\*\*/gim, '<strong class="font-semibold">$1</strong>')
+    .replace(/\*(.*?)\*/gim, '<em class="italic">$1</em>')
+    .replace(/\n$/gim, '<br />')
+    .replace(/\n/gim, '<br />');
+}
+// Theme toggle
+function setTheme(t) {
+  document.documentElement.classList.toggle('dark', t === 'dark');
+  localStorage.setItem('clarity1_theme', t);
+}
+function initTheme() {
+  const saved = localStorage.getItem('clarity1_theme');
+  if (saved) {
+    setTheme(saved);
+  } else {
+    setTheme('dark'); // enforce dark as requested
+  }
+}
+function bindEvents() {
+  els.sidebarToggle.addEventListener('click', () => {
+    els.sidebar.classList.toggle('hidden');
+  });
+  document.querySelectorAll('.nav-item').forEach(btn => {
+    btn.addEventListener('click', () => showView(btn.dataset.nav));
+  });
+  els.searchInput.addEventListener('input', renderEntries);
+  els.viewModeGrid.addEventListener('click', () => {
+    state.mode = 'grid';
+    renderEntries();
+  });
+  els.viewModeList.addEventListener('click', () => {
+    state.mode = 'list';
+    renderEntries();
+  });
+  els.composeBtn.addEventListener('click', () => openCompose());
+  els.closeCompose.addEventListener('click', closeCompose);
+  els.composeForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const entry = {
+      id: uid(),
+      title: els.entryTitle.value.trim(),
+      mood: els.entryMood.value,
+      content: els.entryContent.value,
+      tags: els.entryTags.value.split(',').map(s => s.trim()).filter(Boolean),
+      createdAt: Date.now(),
+    };
+    state.entries.unshift(entry);
+    saveEntries();
+    closeCompose();
+    renderEntries();
+    updateAnalytics();
+  });
+  els.aiAssistBtn.addEventListener('click', () => {
+    const suggestion = aiAssistCompose(
+      els.entryContent.value,
+      els.entryMood.value,
+      els.entryTags.value.split(',').map(s => s.trim()).filter(Boolean)
+    );
+    els.entryContent.value = suggestion;
+  });
+  els.chatForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const text = els.chatInput.value.trim();
+    if (!text) return;
+    state.chat.push({ role: 'user', content: text });
+    els.chatInput.value = '';
+    saveChat();
+    renderChat();
+    setTimeout(() => {
+      const reply = aiChatRespond(text);
+      state.chat.push({ role: 'assistant', content: reply });
+      saveChat();
+      renderChat();
+    }, 300);
+  });
+  document.querySelectorAll('.chat-example').forEach(btn => {
+    btn.addEventListener('click', () => {
+      els.chatInput.value = btn.textContent.trim();
+      els.chatForm.dispatchEvent(new Event('submit'));
+    });
+  });
+  document.querySelectorAll('.theme-toggle').forEach(btn => {
+    btn.addEventListener('click', () => setTheme(btn.dataset.theme));
+  });
+  els.deleteEntryBtn.addEventListener('click', () => {
+    if (!state.selectedEntryId) return;
+    if (confirm('Delete this entry?')) {
+      state.entries = state.entries.filter(e => e.id !== state.selectedEntryId);
+      saveEntries();
+      closeEntry();
+      renderEntries();
+      updateAnalytics();
+    }
+  });
+  els.closeEntry.addEventListener('click', closeEntry);
+}
+function boot() {
+  initTheme();
+  loadEntries();
+  loadChat();
+  bindEvents();
+  renderNav('journal');
+  renderEntries();
+  renderPrompts();
+  renderChat();
+  updateAnalytics();
+}
+document.addEventListener('DOMContentLoaded', boot);

style.css CHANGED Viewed

@@ -1,28 +1,104 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Material 3 Expressive — Dark Theme Tokens for Clarity1 */
+:root {
+  --brand-primary: #6750A4;       /* Material 3 Tonal Primary ( expressive purple ) */
+  --brand-on-primary: #FFFFFF;
+  --brand-secondary: #625B71;     /* Material 3 Tonal Secondary ( expressive neutral ) */
+  --brand-on-secondary: #FFFFFF;
+  --brand-tertiary: #7D5260;
+  /* Surfaces */
+  --md-sys-color-surface: #1B1B1F;
+  --md-sys-color-surface-variant: #2B2B31;
+  --md-sys-color-surface-container-low: #202026;
+  --md-sys-color-surface-container-high: #292931;
+  /* Text */
+  --md-sys-color-on-surface: #E3E1E6;
+  --md-sys-color-on-surface-variant: #C8C5D0;
+  --md-sys-color-outline: #56565E;
+  --md-sys-color-outline-variant: #696973;
+  /* Special */
+  --md-sys-color-error: #B3261E;
+  --md-sys-color-on-error: #FFFFFF;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-inverse-surface: #E6E0E9;
+  --md-sys-color-inverse-on-surface: #1B1B1F;
+}
+html.dark {
+  color-scheme: dark;
 }
+body {
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
 }
+.bg-surface { background-color: var(--md-sys-color-surface); }
+.bg-surfaceVariant { background-color: var(--md-sys-color-surface-variant); }
+.bg-surface-container-low { background-color: var(--md-sys-color-surface-container-low); }
+.bg-surface-container-high { background-color: var(--md-sys-color-surface-container-high); }
+.bg-primary { background-color: var(--brand-primary); }
+.bg-onPrimary { color: var(--brand-on-primary); }
+.text-onPrimary { color: var(--brand-on-primary); }
+.bg-secondary { background-color: var(--brand-secondary); }
+.text-onSecondary { color: var(--brand-on-secondary); }
+.bg-error { background-color: var(--md-sys-color-error); }
+.text-onError { color: var(--md-sys-color-on-error); }
+.text-onSurface { color: var(--md-sys-color-on-surface); }
+.text-onSurfaceVariant { color: var(--md-sys-color-on-surface-variant); }
+.border-outlineVariant { border-color: var(--md-sys-color-outline-variant); }
+.ring-outlineVariant\/40 { --tw-ring-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent); }
+.ring-outlineVariant\/20 { --tw-ring-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 20%, transparent); }
+.bg-scrim { background-color: var(--md-sys-color-scrim); }
+.text-error { color: var(--md-sys-color-error); }
+/* Scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--md-sys-color-outline) transparent;
+}
+*::-webkit-scrollbar { height: 8px; width: 8px; }
+*::-webkit-scrollbar-track { background: transparent; }
+*::-webkit-scrollbar-thumb {
+  background-color: var(--md-sys-color-outline);
+  border-radius: 9999px;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--md-sys-color-outline-variant);
 }
+/* Elevation-like surfaces for expressive flair */
 .card {
+  border-radius: 1.25rem;
+  background: var(--md-sys-color-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
 }
+/* Prose tweaks for readability in dark mode */
+.prose :where(a, strong, em, code, pre, blockquote) { color: inherit; }
+.prose :where(h1, h2, h3, h4) { color: var(--md-sys-color-on-surface); }
+/* Animations */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
+.animate-fadeUp {
+  animation: fadeUp 240ms ease;
+}
+/* Focus rings for accessibility */
+button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--brand-primary);
+}