web: start: multiple pages

Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>

web/pages/dashboard/dashboard.css

@@ -0,0 +1,2 @@
+/* Styles scoped to the dashboard page.
+   Applied when the route is active, removed on navigation. */

web/pages/dashboard/dashboard.js

@@ -0,0 +1,8 @@
+// Dashboard page — called by the router each time this route is activated.
+// Export init(main) to run logic after the HTML fragment is injected.
+//
+// `main` is the <main> DOM element containing the injected HTML.
+
+export function init(main) {
+  // Page is ready — add event listeners, fetch data, etc.
+}

web/pages/dashboard/index.html

@@ -0,0 +1,33 @@
+<date-display></date-display>
+
+<!-- Dev test: open stacked panels -->
+<div style="display:flex;gap:8px;margin-top:8px;">
+  <button onclick="openTestPanel('Panel A', '400px')"
+    style="background:#313244;border:1px solid #45475a;border-radius:6px;
+           padding:7px 14px;color:#89b4fa;font-size:13px;cursor:pointer;">
+    Open panel A
+  </button>
+  <button onclick="openTestPanel('Panel B', '520px')"
+    style="background:#313244;border:1px solid #45475a;border-radius:6px;
+           padding:7px 14px;color:#a6e3a1;font-size:13px;cursor:pointer;">
+    Open panel B
+  </button>
+</div>
+
+
+<script type="module">
+    import { SidePanel } from '../components/side-panel/side-panel.js'
+
+    window.openTestPanel = (title, width) => {
+        SidePanel.open({
+            title,
+            width,
+            content: `<p style="color:#a6adc8;font-size:14px;line-height:1.6">
+            Contenu du panneau <strong style="color:#cdd6f4">${title}</strong>.<br>
+            Largeur : ${width}.<br><br>
+            Tu peux ouvrir plusieurs panneaux — ils s'empilent vers la gauche.
+            Ferme avec ✕, Échap, ou en cliquant le fond.
+            </p>`,
+        })
+    }
+</script>

web/pages/dashboard/manifest.json

@@ -0,0 +1,6 @@
+{
+  "route":   "dashboard",
+  "label":   "Dashboard",
+  "icon":    "dashboard",
+  "version": "0.1.0"
+}