v1

2026-06-09 23:48:27 -04:00
commit 6cf48a9a9e
12 changed files with 1256 additions and 0 deletions
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Spark Slop — Your ideas</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+    <nav class="nav">
+      <div class="container nav-inner">
+        <a href="/" class="logo">
+          <span class="spark">✨</span>
+          <span>Spark<span class="gradient-text">Slop</span></span>
+        </a>
+        <a href="/" class="btn btn-ghost btn-sm">← Home</a>
+      </div>
+    </nav>
+
+    <main class="app-main">
+      <div class="container">
+        <div class="app-header">
+          <div>
+            <h1>Your ideas</h1>
+            <p>Capture a spark, then grow it with timestamped notes.</p>
+          </div>
+        </div>
+
+        <div class="layout">
+          <!-- Left: new idea + list -->
+          <div>
+            <div class="panel" style="margin-bottom: 20px">
+              <h2>New idea</h2>
+              <form id="idea-form">
+                <div class="field">
+                  <label for="idea-title">Title</label>
+                  <input
+                    type="text"
+                    id="idea-title"
+                    placeholder="e.g. AI recipe planner"
+                    autocomplete="off"
+                    required
+                  />
+                </div>
+                <div class="field">
+                  <label for="idea-desc">Description (optional)</label>
+                  <textarea
+                    id="idea-desc"
+                    rows="3"
+                    placeholder="What's the idea?"
+                  ></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary" style="width: 100%">
+                  ✨ Add idea
+                </button>
+              </form>
+            </div>
+
+            <div class="panel">
+              <h2>All ideas (<span id="idea-count">0</span>)</h2>
+              <div class="ideas-list" id="ideas-list"></div>
+            </div>
+          </div>
+
+          <!-- Right: detail + notes -->
+          <div class="panel" id="detail-panel">
+            <div class="empty" id="detail-empty">
+              <span class="big">👈</span>
+              Select an idea to see its notes, or create one to get started.
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <div class="toast" id="toast"></div>
+
+    <script src="/app.js"></script>
+  </body>
+</html>