home: add marquee, finished statusline

static/style.css

@@ -133,6 +133,20 @@ table {
 
 /* Animations */
 
+@keyframes fadeInNOut {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 @keyframes woopwoop {
 
   0%,
@@ -146,6 +160,16 @@ table {
 }
 
 
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+
 @keyframes woopwoopmove {
   to {
     background-position: 200% center;
@@ -187,7 +211,8 @@ table {
 }
 
 ::selection {
-  text-shadow: 0px 0px 3px var(--darkerer-pink)
+  text-shadow: 0px 0px 3px var(--darkerer-pink);
+
 }
 
 body {
@@ -205,6 +230,17 @@ body {
   main {
     padding-top: 8rem;
   }
+
+  marquee {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  marquee inner {
+    display: inline-block;
+    animation: marquee 8s linear infinite;
+  }
 }
 
 /* CRT Effect */
@@ -368,12 +404,19 @@ navbar {
 
     status-dot {
       display: block;
+      animation: fadeInNOut 2s infinite;
       width: 8px;
       height: 8px;
       background-color: #00ff00;
       border: 1px solid #008000;
     }
 
+    current-date {
+      margin-left: auto;
+      padding-right: 0.5rem;
+    }
+
+
   }
 }
 
@@ -393,7 +436,7 @@ home-content {
   boxes {
     display: flex;
     flex-wrap: wrap;
-    width: min(90svw, 800px);
+    width: min(90svw, 850px);
     gap: 1rem;
 
     box {
@@ -418,7 +461,7 @@ home-content {
     padding: 0.15rem 0.55rem;
     border-radius: 9999px;
     background-color: var(--blue);
-    font-weight: 500;
+    font-weight: 600;
     font-size: 13px;
     color: white;
     white-space: nowrap;

templates/partials/header.html

@@ -20,5 +20,21 @@
   <pink-statusbar>
     <status-dot></status-dot>
     <username>Online</username>
+    <current-date></current-date>
   </pink-statusbar>
 </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">