From 69943d15ece6d75e5314ce82f3209ea9852b7721 Mon Sep 17 00:00:00 2001
From: KenwoodFox <kenwood364@gmail.com>
Date: Thu, 3 Jul 2025 15:25:15 -0400
Subject: [PATCH] Add shimmer

---
 www/data.json  |  2 +-
 www/index.html | 26 ++++++++++++++++++++++++--
 www/styles.css | 27 +++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/www/data.json b/www/data.json
index 3938b8b..379f714 100644
--- a/www/data.json
+++ b/www/data.json
@@ -22,7 +22,7 @@
     { "date": 1746126240, "text": "Added 1% Coyote Cum." },
     { "date": 1751396678, "text": "CV'd Zae~" },
     { "date": 1751407200, "text": "Zae added 41% Kan'vi Cum" },
-    { "date": 1751493600, "text": "Added 1% Coyote Cum." },
+    { "date": 1751547600, "text": "Added 1% Coyote Cum." },
     { "date": 1751569534, "text": "Dumped 40% into Ky-Li" }
   ]
 }
diff --git a/www/index.html b/www/index.html
index 6bd189e..da6e936 100644
--- a/www/index.html
+++ b/www/index.html
@@ -143,11 +143,33 @@
       const logList = document.getElementById("logList");
       logList.innerHTML = "";
       if (tankData.logs) {
+        const now = Date.now() / 1000;
         tankData.logs.forEach(log => {
           const li = document.createElement("li");
-          // If log.date is a string, try to parse as epoch seconds
           let epoch = typeof log.date === 'number' ? log.date : Date.parse(log.date) / 1000;
-          // timesago expects ms
+          const ageHours = (now - epoch) / 3600;
+
+          // Color interpolation: 0h = #fff, 8h = #888
+          let color;
+          if (ageHours <= 0) {
+            color = "#fff";
+          } else if (ageHours >= 8) {
+            color = "#888";
+          } else {
+            // Linear interpolation between #fff and #888
+            const t = ageHours / 8;
+            const r = Math.round(255 + (136 - 255) * t);
+            const g = Math.round(255 + (136 - 255) * t);
+            const b = Math.round(255 + (136 - 255) * t);
+            color = `rgb(${r},${g},${b})`;
+          }
+          li.style.color = color;
+
+          // Add shimmer class if less than 8 hours old
+          if (ageHours < 8) {
+            li.classList.add("log-shimmer");
+          }
+
           li.textContent = `${window.timesago ? timesago(epoch * 1000) : log.date} — ${log.text}`;
           logList.appendChild(li);
         });
diff --git a/www/styles.css b/www/styles.css
index 71190d0..8db344a 100644
--- a/www/styles.css
+++ b/www/styles.css
@@ -219,3 +219,30 @@ h1 {
   font-size: 0.95em;
   word-break: break-word;
 }
+
+.log-shimmer {
+  background: linear-gradient(
+    90deg,
+    #fff 0%,
+    #f8f8ff 20%,
+    #ffe 40%,
+    #fff 60%,
+    #e0e0e0 80%,
+    #fff 100%
+  );
+  background-size: 400% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 6s linear infinite;
+  font-weight: bold;
+  filter: drop-shadow(0 0 2px #fff8);
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 400% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}