From 8adbee6e4ff416886a4f7a5d27492641c53d4928 Mon Sep 17 00:00:00 2001
From: jared <jnevans@gmail.com>
Date: Wed, 28 Jan 2026 18:04:39 +0000
Subject: [PATCH] Improve car mode UI and fix glow animation

- Add news counter showing "News 1 / 25" next to Car Mode indicator
- Replace truck icon with sedan-style car icon
- Refactor glow animations to use CSS custom properties
- Fix double-glow issue by using single animation with variable colors

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 news-app/src/main.js   | 14 +++++++-----
 news-app/src/style.css | 52 ++++++++++++------------------------------
 2 files changed, 22 insertions(+), 44 deletions(-)

diff --git a/news-app/src/main.js b/news-app/src/main.js
index d59a815..7e8ae42 100644
--- a/news-app/src/main.js
+++ b/news-app/src/main.js
@@ -220,8 +220,8 @@ function renderCarModeCard(group, index, total) {
   // Determine glow color based on position from end
   // Last 2 cards: red glow
   // 3 cards before the last 2 (3rd, 4th, 5th from end): orange glow
-  // Others: yellow glow (default)
-  let glowClass = 'glow-yellow'
+  // Others: yellow glow (default via CSS variables)
+  let glowClass = ''
   if (index >= total - 2) {
     glowClass = 'glow-red'
   } else if (index >= total - 5) {
@@ -301,10 +301,12 @@ function renderCarMode() {
       <!-- Car mode indicator -->
       <div class="absolute top-2 left-6 z-20 flex items-center gap-2 text-white/70 backdrop-blur-sm px-3 py-1.5 rounded-full bg-black/10">
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path>
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 17a2 2 0 11-4 0 2 2 0 014 0zM20 17a2 2 0 11-4 0 2 2 0 014 0z"></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 15V12a1 1 0 011-1h1l2-4h8l2 4h1a1 1 0 011 1v3M6 15h12"></path>
         </svg>
         <span class="text-sm font-medium">Car Mode</span>
+        <span class="text-white/50">|</span>
+        <span class="text-sm font-medium">News ${state.carModeIndex + 1} / ${state.groups.length}</span>
       </div>
 
       <!-- Card Container -->
@@ -411,8 +413,8 @@ function render() {
     </div>
     <button onclick="enterCarMode()" class="px-4 py-2.5 text-base font-semibold bg-indigo-600 text-white hover:bg-indigo-700 rounded-xl transition-colors flex items-center gap-2 shadow-lg hover:shadow-xl" title="Enter Car Mode - Auto-cycling news display">
     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path>
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path>
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 17a2 2 0 11-4 0 2 2 0 014 0zM20 17a2 2 0 11-4 0 2 2 0 014 0z"></path>
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 15V12a1 1 0 011-1h1l2-4h8l2 4h1a1 1 0 011 1v3M6 15h12"></path>
     </svg>
     Car Mode
     </button>
diff --git a/news-app/src/style.css b/news-app/src/style.css
index 21c8de2..7b8c6bd 100644
--- a/news-app/src/style.css
+++ b/news-app/src/style.css
@@ -95,11 +95,19 @@
 
 /* Car Mode Card Transitions */
 .car-mode-card {
-  animation: cardFadeIn 0.5s ease-out forwards;
+  --glow-color-start: rgba(253, 224, 71, 0.95);
+  --glow-color-mid: rgba(253, 224, 71, 0.8);
+  animation: cardFadeIn 0.5s ease-out forwards, cardGlow 4s ease-out forwards;
 }
 
-.car-mode-card.glow-yellow {
-  animation: cardFadeIn 0.5s ease-out forwards, cardGlow 4s ease-out forwards;
+.car-mode-card.glow-orange {
+  --glow-color-start: rgba(251, 146, 60, 0.95);
+  --glow-color-mid: rgba(251, 146, 60, 0.8);
+}
+
+.car-mode-card.glow-red {
+  --glow-color-start: rgba(239, 68, 68, 0.95);
+  --glow-color-mid: rgba(239, 68, 68, 0.8);
 }
 
 .car-mode-card.fading-out {
@@ -119,48 +127,16 @@
 
 @keyframes cardGlow {
   0% {
-    box-shadow: 0 0 80px 30px rgba(253, 224, 71, 0.95); /* Extremely bold start */
+    box-shadow: 0 0 80px 30px var(--glow-color-start);
   }
   10% {
-    box-shadow: 0 0 100px 40px rgba(253, 224, 71, 0.8); /* Max spread early on */
+    box-shadow: 0 0 100px 40px var(--glow-color-mid);
   }
   100% {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Settle to dark shadow */
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
   }
 }
 
-@keyframes cardGlowOrange {
-  0% {
-    box-shadow: 0 0 80px 30px rgba(251, 146, 60, 0.95); /* Orange bold start */
-  }
-  10% {
-    box-shadow: 0 0 100px 40px rgba(251, 146, 60, 0.8); /* Orange max spread */
-  }
-  100% {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Settle to dark shadow */
-  }
-}
-
-@keyframes cardGlowRed {
-  0% {
-    box-shadow: 0 0 80px 30px rgba(239, 68, 68, 0.95); /* Red bold start */
-  }
-  10% {
-    box-shadow: 0 0 100px 40px rgba(239, 68, 68, 0.8); /* Red max spread */
-  }
-  100% {
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Settle to dark shadow */
-  }
-}
-
-.car-mode-card.glow-orange {
-  animation: cardFadeIn 0.5s ease-out forwards, cardGlowOrange 4s ease-out forwards;
-}
-
-.car-mode-card.glow-red {
-  animation: cardFadeIn 0.5s ease-out forwards, cardGlowRed 4s ease-out forwards;
-}
-
 @keyframes cardFadeOut {
   from {
     opacity: 1;