Merge pull request #69 from ok2/codex/refactor-event-box-labels-and-cronon-scale

script.js

@@ -701,6 +701,16 @@ function showEonstripDetail(index, startCob) {
         timeline.appendChild(block);
     }
 
+    let markerCob = manualMode ? manualCobiets : toCobiets(new Date());
+    const rel = (markerCob - startCob) / COBIE_UNITS.eonstrip;
+    if (rel >= 0 && rel <= 1) {
+        const line = document.createElement('div');
+        line.className = 'current-time-line';
+        line.style.top = (rel * 100) + '%';
+        line.textContent = formatCobieTimestamp(markerCob);
+        timeline.appendChild(line);
+    }
+
     if (Array.isArray(window.SPECIAL_EVENTS)) {
         const events = [];
         const start = startCob;
@@ -730,7 +740,13 @@ function showEonstripDetail(index, startCob) {
             while (occ < end && occ <= endCobEv) {
                 const relStart = (occ - start) / COBIE_UNITS.eonstrip;
                 const relEnd   = (occ + duration - start) / COBIE_UNITS.eonstrip;
-                events.push({ label: ev.label, start: relStart, end: relEnd });
+                events.push({
+                    label: ev.label,
+                    start: relStart,
+                    end: relEnd,
+                    cobStart: occ,
+                    cobEnd: occ + duration
+                });
                 occ += interval;
             }
         });
@@ -772,6 +788,25 @@ function showEonstripDetail(index, startCob) {
             } else {
                 elem.textContent = ev.label;
             }
+
+            const tooltip = document.createElement('div');
+            tooltip.className = 'tooltip';
+            const opts = {
+                timeZone: currentTimezone === 'TAI' ? 'UTC' : currentTimezone,
+                year: 'numeric', month: 'short', day: 'numeric',
+                hour: '2-digit', minute: '2-digit', second: '2-digit',
+                hour12: false
+            };
+            const startStr = formatCobieTimestamp(ev.cobStart);
+            const endStr   = formatCobieTimestamp(ev.cobEnd);
+            const startDate = fromCobiets(ev.cobStart).toLocaleString('en-US', opts);
+            const endDate   = fromCobiets(ev.cobEnd).toLocaleString('en-US', opts);
+            tooltip.innerHTML =
+                `<strong>${ev.label}</strong><br>` +
+                `Start: ${startStr}<br>` +
+                `End: ${endStr}<br>` +
+                `${startDate} – ${endDate}`;
+            elem.appendChild(tooltip);
             timeline.appendChild(elem);
         });
     }
@@ -840,6 +875,11 @@ function animateSwipe(direction, onDone) {
     const grid = document.getElementById('eonstripGrid');
     if (!grid) { onDone(); return; }
 
+    // Ensure a clean starting state when the grid was previously hidden
+    grid.style.transition = 'none';
+    grid.style.transform = 'translateX(0)';
+    void grid.offsetWidth; // force reflow
+
     // slide out
     grid.style.transition = 'transform 0.3s ease';
     grid.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;

style.css

@@ -401,32 +401,54 @@
 .detail-timeline {
   position: relative;
   height: 400px;
-  border-left: 2px solid #00ffff;
+  border-left: 3px solid #00ffff;
   margin-left: 40px;
-  overflow: hidden;
+  overflow-x: visible;
+  overflow-y: hidden;
 }
 
 .timeline-block {
   position: absolute;
   left: -40px;
   width: calc(100% + 40px);
-  border-top: 1px dashed rgba(255,255,255,0.2);
-  color: #aaa;
-  font-size: 0.8em;
+  text-align: right;
+  padding-right: 4px;
+  border-top: 1px dashed rgba(0,255,255,0.5);
+  color: #00ffff;
+  font-size: 0.9em;
+  font-weight: 600;
   padding-top: 2px;
+  text-shadow: 0 0 4px #00ffff;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.current-time-line {
+  position: absolute;
+  left: -40px;
+  width: calc(100% + 40px);
+  border-top: 2px solid #ff00ff;
+  color: #ff00ff;
+  font-size: 0.9em;
+  font-weight: 600;
+  padding-top: 2px;
+  text-shadow: 0 0 4px #ff00ff;
+  pointer-events: none;
+  z-index: 6;
 }
 
 .event-box, .event-line {
   position: absolute;
   left: 0;
-  background: rgba(255,0,255,0.3);
-  border: 1px solid rgba(0,255,255,0.5);
+  background: rgba(255,0,255,0.4);
+  border: 1px solid rgba(0,255,255,0.7);
   border-radius: 4px;
   padding: 2px 4px;
   color: #fff;
-  font-size: 0.7em;
-  overflow: hidden;
+  font-size: 0.75em;
+  overflow: visible;
   white-space: nowrap;
+  z-index: 3;
 }
 
 .event-line {
@@ -443,17 +465,25 @@
 .event-line .event-label,
 .event-box.small-event .event-label {
   position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 4px;
-  background: rgba(255,0,255,0.3);
-  border: 1px solid rgba(0,255,255,0.5);
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, -2px);
+  margin-bottom: 2px;
+  background: rgba(255,0,255,0.5);
+  border: 1px solid rgba(0,255,255,0.8);
   border-radius: 4px;
-  padding: 2px 4px;
+  padding: 2px 6px;
   white-space: nowrap;
   color: #fff;
-  font-size: 0.7em;
+  font-size: 0.75em;
+  font-weight: 600;
+  text-shadow: 0 0 4px #ff00ff;
+  z-index: 4;
+}
+
+.event-box:hover .tooltip,
+.event-line:hover .tooltip {
+  opacity: 1;
 }
 
 /* Layout combining current time and analog clock */
@@ -628,7 +658,7 @@ body.fullscreen-clock .calendar-view,
 body.fullscreen-clock .detail-view,
 body.fullscreen-clock .time-details,
 body.fullscreen-clock .explanations {
-  display: none;
+  display: none !important;
 }
 
 body.fullscreen-clock .time-display {