Add visual timeline with moving indicator, now marker, and time labels

MMM-CombinedMap.css

@@ -49,31 +49,111 @@
   border: none !important;
 }
 
-/* Radar timestamp display */
-.radar-timestamp {
+/* Radar timeline display */
+.radar-timeline {
   position: absolute;
-  bottom: 8px;
-  left: 8px;
-  background: rgba(0, 0, 0, 0.7);
-  color: #fff;
-  padding: 4px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: "Roboto Condensed", sans-serif;
+  bottom: 12px;
+  left: 12px;
+  right: 12px;
+  height: 24px;
   z-index: 1000;
   pointer-events: none;
 }
 
-.radar-timestamp.forecast {
-  background: rgba(0, 100, 180, 0.8);
+.timeline-track {
+  position: absolute;
+  top: 10px;
+  left: 30px;
+  right: 30px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
 }
 
-/* Forecast indicator - subtle arrow */
-.radar-timestamp.forecast::before {
-  content: "▶ ";
+.timeline-past {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 33%;  /* ~1h of 3h total */
+  height: 100%;
+  background: rgba(150, 150, 150, 0.5);
+}
+
+.timeline-future {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 67%;  /* ~2h of 3h total */
+  height: 100%;
+  background: rgba(0, 120, 200, 0.4);
+}
+
+.timeline-now {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  color: #fff;
   font-size: 8px;
-  opacity: 0.8;
-  vertical-align: middle;
+  text-align: center;
+  left: 33%;  /* Will be updated by JS */
+  margin-left: 30px;
+  width: calc(100% - 60px);
+  left: 0;
+}
+
+.timeline-now span {
+  position: absolute;
+  left: 33%;
+  transform: translateX(-50%);
+}
+
+.timeline-indicator {
+  position: absolute;
+  top: 6px;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border: 2px solid #0af;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 0 6px rgba(0, 170, 255, 0.8);
+  transition: left 0.2s ease-out;
+  /* Position is set by JS */
+}
+
+.timeline-time {
+  position: absolute;
+  top: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-family: "Roboto Condensed", sans-serif;
+  white-space: nowrap;
+}
+
+.timeline-time.forecast {
+  background: rgba(0, 100, 180, 0.9);
+}
+
+.timeline-label {
+  position: absolute;
+  top: 6px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 9px;
+  font-family: "Roboto Condensed", sans-serif;
+}
+
+.timeline-start {
+  left: 0;
+}
+
+.timeline-end {
+  right: 0;
 }
 
 /* Legend (optional, can be enabled) */