feat: h5 desktop shell with sidebar and dark mode

- tokens.css/app.css: Miuix dual-color tokens + HyperOS 4 soft-glass rail - bridge.js/router.js: Promise bridge wrapper + 5-page router with top clock - index.html: sidebar + 5 page containers - native wallpaper transparency: Theme.Hearth (showWallpaper + transparent window) + WebView transparent background
2026-08-16 16:15:58 +08:00
parent dcb712731d
commit bd56d89cf3
8 changed files with 174 additions and 6 deletions
@@ -1,12 +1,46 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hearth</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Hearth</title>
+<link rel="stylesheet" href="css/tokens.css">
+<link rel="stylesheet" href="css/app.css">
 </head>
 <body>
-    <h1>Hearth Launcher</h1>
-    <p>占位页面，后续由 WebView 加载。</p>
+<div class="app">
+  <aside class="rail" id="rail">
+    <div class="rail-clock" id="rail-clock">14:30</div>
+    <nav id="rail-nav"></nav>
+  </aside>
+  <main class="content">
+    <section data-page="home" class="page active"></section>
+    <section data-page="immersive" class="page"></section>
+    <section data-page="webapplist" class="page"></section>
+    <section data-page="applist" class="page"></section>
+    <section data-page="settings" class="page"></section>
+  </main>
+</div>
+<script src="js/bridge.js"></script>
+<script src="js/router.js"></script>
+<script>
+  // 渲染侧边栏导航项 / render sidebar nav items
+  const nav = document.getElementById('rail-nav');
+  PAGES.forEach(p => {
+    const b = document.createElement('button');
+    b.className = 'rail-item';
+    b.innerHTML = `<span class="ico">${p.icon}</span><span class="lbl">${p.label}</span>`;
+    b.onclick = () => router.navigate(p.id);
+    nav.appendChild(b);
+  });
+  // 侧边栏顶部时间刷新 / refresh sidebar top clock
+  setInterval(() => {
+    const now = new Date();
+    const hh = String(now.getHours()).padStart(2, '0');
+    const mm = String(now.getMinutes()).padStart(2, '0');
+    document.getElementById('rail-clock').textContent = `${hh}:${mm}`;
+  }, 10000);
+  router.navigate('home');
+</script>
 </body>
 </html>