home: add marquee, finished statusline

templates/partials/header.html

@@ -20,5 +20,21 @@
   <pink-statusbar>
     <status-dot></status-dot>
     <username>Online</username>
+    <current-date></current-date>
   </pink-statusbar>
-</navbar>
+</navbar>
+
+<script>
+  const dateEl = document.querySelector('current-date');
+  if (dateEl) {
+    const update = () => {
+      const now = new Date();
+      const h = String(now.getHours()).padStart(2, '0');
+      const m = String(now.getMinutes()).padStart(2, '0');
+      const s = String(now.getSeconds()).padStart(2, '0');
+      dateEl.textContent = `${h}:${m}:${s}`;
+    };
+    update();
+    setInterval(update, 1000);
+  }
+</script>

templates/partials/home.html

@@ -1,7 +1,11 @@
 <home-content>
   <welcome>
     <img src="/static/assets/images/welcome.webp" width="400px" alt="A welcome text in pink" />
-    <p>Welcome to my little corner of the Web!</p>
+    <marquee>
+      {% for _ in 0..12 %}
+      &nbsp;彡★Welcome to my little corner of the Web★彡&nbsp;
+      {% endfor %}
+    </marquee>
   </welcome>
   <boxes>
     <box id="bigbox">