Make hands movement smooth on analag clock.

Refactor JS into modules

.gitignore

@@ -0,0 +1,3 @@
+# Build artifacts
+CoBiEClock.wdgt
+build-widget/

README.md

@@ -54,15 +54,29 @@ An interactive web app that visualizes the **CosmoChron Binary Epoch (CoBiE)** t
 
 ```
 ├── index.html       # Main HTML markup
-├── analog.html     # Analog clock interface
 ├── clock.js        # Clock logic
-
+├── cobie.js        # CoBiE time system utilities
-├── style.css        # Separated styles
+├── utils.js        # Generic helper functions
-├── script.js        # JavaScript logic
+├── animate.js      # Shared animations
-├── README.md        # This documentation
+├── events.js       # Sample calendar events
-└── assets/          # (Optional) images or external CSS/JS
+├── style.css       # Separated styles
+├── script.js       # Page interactions
+├── README.md       # This documentation
+└── test/           # Unit tests
 ```
 
+## macOS Widget
+
+The repository provides a SwiftUI widget inside the Xcode project
+located at `CoBiE/CoBiE.xcodeproj`.
+
+1. Open the project in Xcode.
+2. Select the `CoBiE Analog Clock` scheme.
+3. Build and run to install the widget on macOS 13 or later.
+
+The widget displays the analog CoBiE clock directly on your desktop or
+in Notification Center.
+
 ## Contributing
 
 1. Fork the repository.

animate.js

@@ -0,0 +1,83 @@
+(function(){
+  const lastAngles = {
+    handXeno: 0,
+    handQuantic: 0,
+    handChronon: 0,
+    handEonstrip: 0,
+    handMegasequence: 0
+  };
+
+  function rotateHand(id, angle) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    const prev = lastAngles[id];
+
+    if (angle < prev) {
+      const target = angle + 360;
+      const handle = () => {
+        el.removeEventListener('transitionend', handle);
+        el.style.transition = 'none';
+        el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
+        void el.offsetWidth;
+        el.style.transition = '';
+      };
+      el.addEventListener('transitionend', handle, { once: true });
+      el.style.transform = `translateX(-50%) translateZ(0) rotate(${target}deg)`;
+    } else {
+      el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
+    }
+    lastAngles[id] = angle;
+  }
+
+  function animateSwipe(direction, onDone) {
+    const grid = document.getElementById('eonstripGrid');
+    if (!grid) { onDone(); return; }
+
+    grid.style.transition = 'none';
+    grid.style.transform = 'translateX(0)';
+    void grid.offsetWidth;
+
+    grid.style.transition = 'transform 0.3s ease';
+    grid.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
+
+    function afterOut() {
+      grid.removeEventListener('transitionend', afterOut);
+      grid.style.transition = 'none';
+      grid.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`;
+      onDone();
+      void grid.offsetWidth;
+      grid.style.transition = 'transform 0.3s ease';
+      grid.style.transform = 'translateX(0)';
+    }
+    grid.addEventListener('transitionend', afterOut);
+  }
+
+  function animateDetailSwipe(direction, onDone) {
+    const tl = document.getElementById('detailTimeline');
+    if (!tl) { onDone(); return; }
+
+    tl.style.transition = 'none';
+    tl.style.transform = 'translateX(0)';
+    void tl.offsetWidth;
+
+    tl.style.transition = 'transform 0.3s ease';
+    tl.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
+
+    function afterOut() {
+      tl.removeEventListener('transitionend', afterOut);
+      tl.style.transition = 'none';
+      tl.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`;
+      onDone();
+      void tl.offsetWidth;
+      tl.style.transition = 'transform 0.3s ease';
+      tl.style.transform = 'translateX(0)';
+    }
+    tl.addEventListener('transitionend', afterOut);
+  }
+
+  window.Animate = {
+    rotateHand,
+    animateSwipe,
+    animateDetailSwipe
+  };
+})();

clock.js

@@ -1,68 +1,53 @@
 // Minimal CoBiE analog clock logic wrapped in its own scope to
 // avoid clashes with variables from other scripts on the page.
 (function () {
-  const COBIE_EPOCH = 0;
+  const {
-  const COBIE_UNITS = {
+    COBIE_EPOCH,
-    second: 1,
+    COBIE_UNITS,
-    xenocycle: 0x10,
+    floorDiv,
-    quantic: 0x100,
+    getTAIOffsetAt,
-    chronon: 0x1000,
+    toCobiets
-    eonstrip: 0x10000,
+  } = window.Cobie;
-  };
 
-  function floorDiv(a, b) {
+  function getMarkerOffset(width) {
-    return Math.trunc(a / b);
+    const points = [
-  }
+      { width: 1024, value: 2 },
-
+      { width: 450, value: 1.3 },
-  function getTAIOffsetAt(date) {
+      { width: 200, value: 0.8 }
-    const taiEpoch = new Date('1958-01-01T00:00:00Z');
-    if (date < taiEpoch) return 0;
-    const leapSeconds = [
-      { date: '1972-01-01T00:00:00Z', offset: 10 },
-      { date: '1972-07-01T00:00:00Z', offset: 11 },
-      { date: '1973-01-01T00:00:00Z', offset: 12 },
-      { date: '1974-01-01T00:00:00Z', offset: 13 },
-      { date: '1975-01-01T00:00:00Z', offset: 14 },
-      { date: '1976-01-01T00:00:00Z', offset: 15 },
-      { date: '1977-01-01T00:00:00Z', offset: 16 },
-      { date: '1978-01-01T00:00:00Z', offset: 17 },
-      { date: '1979-01-01T00:00:00Z', offset: 18 },
-      { date: '1980-01-01T00:00:00Z', offset: 19 },
-      { date: '1981-07-01T00:00:00Z', offset: 20 },
-      { date: '1982-07-01T00:00:00Z', offset: 21 },
-      { date: '1983-07-01T00:00:00Z', offset: 22 },
-      { date: '1985-07-01T00:00:00Z', offset: 23 },
-      { date: '1988-01-01T00:00:00Z', offset: 24 },
-      { date: '1990-01-01T00:00:00Z', offset: 25 },
-      { date: '1991-01-01T00:00:00Z', offset: 26 },
-      { date: '1992-07-01T00:00:00Z', offset: 27 },
-      { date: '1993-07-01T00:00:00Z', offset: 28 },
-      { date: '1994-07-01T00:00:00Z', offset: 29 },
-      { date: '1996-01-01T00:00:00Z', offset: 30 },
-      { date: '1997-07-01T00:00:00Z', offset: 31 },
-      { date: '1999-01-01T00:00:00Z', offset: 32 },
-      { date: '2006-01-01T00:00:00Z', offset: 33 },
-      { date: '2009-01-01T00:00:00Z', offset: 34 },
-      { date: '2012-07-01T00:00:00Z', offset: 35 },
-      { date: '2015-07-01T00:00:00Z', offset: 36 },
-      { date: '2017-01-01T00:00:00Z', offset: 37 },
     ];
-    for (let i = 0; i < leapSeconds.length; i++) {
-      const d = new Date(leapSeconds[i].date);
-      if (date < d) return i === 0 ? 10 : leapSeconds[i - 1].offset;
-    }
-    return 37;
-  }
   
-  function toCobiets(date) {
+    // Sort points by width descending for easier handling
-    const utcSec = floorDiv(date.getTime(), 1000);
+    points.sort((a, b) => b.width - a.width);
-    const taiSec = utcSec + getTAIOffsetAt(date);
+  
-    return taiSec - COBIE_EPOCH;
+    for (let i = 0; i < points.length - 1; i++) {
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      if (width <= p1.width && width >= p2.width) {
+        // Linear interpolation
+        const t = (width - p2.width) / (p1.width - p2.width);
+        return p2.value + t * (p1.value - p2.value);
+      }
+    }
+  
+    // Extrapolation for width > max known
+    if (width > points[0].width) {
+      const p1 = points[0];
+      const p2 = points[1];
+      const slope = (p1.value - p2.value) / (p1.width - p2.width);
+      return p1.value + slope * (width - p1.width);
+    }
+  
+    // Extrapolation for width < min known
+    const p1 = points[points.length - 2];
+    const p2 = points[points.length - 1];
+    const slope = (p2.value - p1.value) / (p2.width - p1.width);
+    return p2.value + slope * (width - p2.width);
   }
 
   function placeMarkers() {
     const clock = document.getElementById('clock');
     let markers = clock.querySelectorAll('.marker');
+    let ticks = clock.querySelectorAll('.tick');
 
     // Create markers if they don't exist yet
     if (markers.length === 0) {
@@ -75,33 +60,95 @@
       markers = clock.querySelectorAll('.marker');
     }
 
-    // Position markers based on the current clock size
+    // Create tick marks once
-    const radius = clock.offsetWidth / 2 - 20;
+    if (ticks.length === 0) {
+      for (let i = 0; i < 256; i++) {
+        const t = document.createElement('div');
+        t.classList.add('tick');
+        if (i % 16 === 0) t.classList.add('big');
+        else if (i % 8 === 0) t.classList.add('mid');
+        // insert before markers so digits sit on top
+        clock.insertBefore(t, clock.firstChild);
+      }
+      ticks = clock.querySelectorAll('.tick');
+    }
+
+    // Unified radius based on the actual clock size
+    const baseRadius = clock.offsetWidth / 2;
+
+    // Tick lengths relative to the clock radius
+    const lenBig = baseRadius * 0.12;
+    const lenMid = baseRadius * 0.08;
+    const lenSmall = baseRadius * 0.05;
+
+    const outerR = baseRadius - 2; // just inside the border
+
+    // Distance from center so marker's outer edge sits just inside the big tick
+    const markerSize = markers[0] ? markers[0].offsetWidth : 0;
+    const inset = baseRadius * 0.001; // 0.1% of the radius
+    const markerRadius = outerR - lenBig - inset + markerSize / 2;
+
     markers.forEach((m, i) => {
       const angle = (i / 16) * 2 * Math.PI;
-      const x = radius * Math.sin(angle);
+      m.style.left = '50%';
-      const y = -radius * Math.cos(angle);
+      m.style.top = '50%';
-      m.style.left = `${clock.offsetWidth / 2 + x}px`;
+      m.style.transform =
-      m.style.top = `${clock.offsetHeight / 2 + y}px`;
+        `translate(-50%, -50%) rotate(${angle}rad) translate(0, -${markerRadius}px) rotate(${-angle}rad)`;
+    });
+
+    ticks.forEach((t, i) => {
+      let len = lenSmall;
+      if (t.classList.contains('big')) len = lenBig;
+      else if (t.classList.contains('mid')) len = lenMid;
+      const innerR = outerR - len;
+      const angle = ((i + 1) / 256) * 2 * Math.PI;
+      t.style.height = `${len}px`;
+      t.style.left = '50%';
+      t.style.top = '50%';
+      t.style.transform = `translate(-50%, 0) rotate(${angle}rad) translate(0, -${innerR}px)`;
+      if (clock.offsetWidth < 200 && !t.classList.contains('big') && !t.classList.contains('mid')) {
+        t.style.display = 'none';
+      } else {
+        t.style.display = '';
+      }
     });
   }
 
-  function updateClock() {
+
-    const now = new Date();
+  function renderClock(cob) {
-    const cob = toCobiets(now);
     // Use fractional progress within each unit so angles stay small
     const xf = (cob % COBIE_UNITS.quantic) / COBIE_UNITS.quantic;
     const qf = (cob % COBIE_UNITS.chronon) / COBIE_UNITS.chronon;
     const cf = (cob % COBIE_UNITS.eonstrip) / COBIE_UNITS.eonstrip;
-    document.getElementById('handXeno').style.transform = `rotate(${xf * 360}deg)`;
+    const ef = (cob % COBIE_UNITS.megasequence) / COBIE_UNITS.megasequence;
-    document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`;
+    const mf = (cob % COBIE_UNITS.cosmocycle) / COBIE_UNITS.cosmocycle;
-    document.getElementById('handChronon').style.transform = `rotate(${cf * 360}deg)`;
+    Animate.rotateHand('handXeno', xf * 360);
+    Animate.rotateHand('handQuantic', qf * 360);
+    Animate.rotateHand('handChronon', cf * 360);
+    Animate.rotateHand('handEonstrip', ef * 360);
+    Animate.rotateHand('handMegasequence', mf * 360);
+  }
+
+  function updateClock() {
+    renderClock(toCobiets(new Date()));
+  }
+
+  let intervalId = null;
+
+  function startClock() {
+    clearInterval(intervalId);
+    updateClock();
+    intervalId = setInterval(updateClock, 1000);
+  }
+
+  function showTime(cob) {
+    clearInterval(intervalId);
+    renderClock(cob);
   }
 
   function initClock() {
     placeMarkers();
-    updateClock();
+    startClock();
-    setInterval(updateClock, 1000);
     const clk = document.getElementById('clock');
     if (clk) {
       clk.addEventListener('click', () => {
@@ -111,6 +158,10 @@
       });
     }
     window.addEventListener('resize', placeMarkers);
+    window.CobieClock = {
+      start: startClock,
+      showTime
+    };
   }
 
   if (document.readyState === 'loading') {

cobie.js

@@ -19,6 +19,20 @@ const COBIE_UNITS = {
     astralmillennia: 0x1000000000000000
 };
 
+const EONSTRIP_NAMES = [
+    'Solprime', 'Lunex', 'Terros', 'Aquarion',
+    'Ventaso', 'Ignisar', 'Crystalos', 'Floraen',
+    'Faunor', 'Nebulus', 'Astraeus', 'Umbranox',
+    'Electros', 'Chronar', 'Radiantae', 'Etherion'
+];
+
+const MEGASEQUENCE_NAMES = [
+    'Azurean Tide', 'Sable Gleam', 'Verdanth Starfall', 'Crimson Dusk',
+    'Cobalt Frost', 'Amber Blaze', 'Viridian Bloom', 'Argent Veil',
+    'Helian Rise', 'Nocturne Shade', 'Celestine Aura', 'Pyralis Light',
+    'Zephyrine Whisper', 'Lustran Bounty', 'Umbral Echo', 'Mythran Epoch'
+];
+
 function floorDiv(a, b) {
     return Math.trunc(a / b);
 }
@@ -163,7 +177,7 @@ function formatCobieTimestamp(cobiets) {
     return sign + rawDateHex + '.' + paddedTimeHex;
 }
 
-module.exports = {
+const Cobie = {
     COBIE_EPOCH,
     COBIE_UNITS,
     floorDiv,
@@ -171,5 +185,17 @@ module.exports = {
     getTAIOffsetAt,
     toCobiets,
     fromCobiets,
-    formatCobieTimestamp
+    formatCobieTimestamp,
+    breakdownNonNeg,
+    EONSTRIP_NAMES,
+    MEGASEQUENCE_NAMES
 };
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = Cobie;
+}
+
+// Expose globally when loaded in a browser environment
+if (typeof window !== 'undefined') {
+    window.Cobie = Cobie;
+}

events.js

@@ -1,14 +1,27 @@
 // Configuration of periodic events in CoBiE time
-// Each event repeats every cosmocycle.
+// Each object describes when the event occurs and how often it repeats.
-// "cobie" is the timestamp within the cosmocycle when the event occurs.
+//
-// "tag" is a short label that will be displayed on the calendar.
+// Fields:
+//   start    - CoBiE timestamp when the first occurrence happens.
+//   end      - optional CoBiE timestamp after which the event stops.
+//   unit     - the unit of the recurrence ("second", "xenocycle", "quantic",
+//              "chronon", "eonstrip", "megasequence", "cosmocycle", ...).
+//   interval - how many units between occurrences (1 = every unit,
+//              2 = every second unit, ...).
+//   label    - short description displayed on the calendar.
+//   duration - optional length of the event in seconds.
+//   showMega - optional boolean, show label on the megasequence view (default true).
+//   showDetail - optional boolean, show event in the detail view (default true).
+//   color    - optional hex color for the event (used in detail view)
 
 window.SPECIAL_EVENTS = [
-  { cobie: '49f4.9332', label: 'Afina',        megasequence: 'Mythran Epoch', eonstrip: 'Ventaso' },
+  { cobie: '49f4.9332', label: 'Afina', color: '#e57373',        unit: 'cosmocycle', interval: 1 },
-  { cobie: '11e5.f552', label: 'Oleks',        megasequence: 'Umbral Echo',   eonstrip: 'Ignisar' },
+  { cobie: '11e5.f552', label: 'Oleks', color: '#64b5f6',        unit: 'cosmocycle', interval: 1 },
-  { cobie: '4d07.a2b2', label: 'Vincent',      megasequence: 'Azurean Tide',  eonstrip: 'Floraen' },
+  { cobie: '4d07.a2b2', label: 'Vincent', color: '#81c784',      unit: 'cosmocycle', interval: 1 },
-  { cobie: '3edc.d430', label: 'Hochzeitstag', megasequence: 'Lustran Bounty', eonstrip: 'Electros' },
+  { cobie: '3edc.d430', label: 'Hochzeitstag', color: '#ffb74d', unit: 'cosmocycle', interval: 1 },
-  { cobie: '330d.d4ae', label: 'Zusammentag',  megasequence: 'Azurean Tide',  eonstrip: 'Chronar' },
+  { cobie: '330d.d4ae', label: 'Zusammentag', color: '#ba68c8',  unit: 'cosmocycle', interval: 1 },
-  { cobie: '11de.0c52', label: 'Anna',         megasequence: 'Lustran Bounty', eonstrip: 'Radiantae' },
+  { cobie: '11de.0c52', label: 'Anna', color: '#4db6ac',         unit: 'cosmocycle', interval: 1 },
-  { cobie: '467f.ae61', label: 'Iris',         megasequence: 'Argent Veil',   eonstrip: 'Etherion' }
+  { cobie: '467f.ae61', label: 'Iris', color: '#7986cb',         unit: 'cosmocycle', interval: 1 },
+  { cobie: '6854.7a75', label: 'Sleep', color: '#546e7a', unit: 'second', interval: 86400, duration: 28800, showMega: false },
+  { cobie: '6854.9695', label: 'Night', color: '#212121', unit: 'second', interval: 86400, duration: 28800, showMega: false, shiftWithTimezone: true }
 ];

index.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="format-detection" content="telephone=no">
     <title>CoBiE Time System Calendar</title>
+    <!-- Orbitron provides a high-tech, futuristic look for the analog clock markers -->
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&family=Great+Vibes&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -24,9 +26,13 @@
 
         <div class="analog-clock-container">
             <div id="clock">
+                <div class="hand megasequence" id="handMegasequence"></div>
+                <div class="hand eonstrip" id="handEonstrip"></div>
                 <div class="hand chronon" id="handChronon"></div>
                 <div class="hand quantic" id="handQuantic"></div>
                 <div class="hand xeno" id="handXeno"></div>
+                <div class="clock-center"></div>
+                <div class="clock-label">CoBiE</div>
             </div>
         </div>
     </div>
@@ -55,11 +61,24 @@
         <button onclick="goToNow()">Now</button>
     </div>
 
-    <div class="calendar-view">
+    <div class="calendar-view" id="calendarView">
         <div class="calendar-header" id="calendarHeader">Loading...</div>
         <div class="eonstrip-grid" id="eonstripGrid"></div>
     </div>
 
+        <div id="eonstripDetailView" class="detail-view" style="display:none;">
+        <div class="detail-header">
+            <button id="backToCalendar" class="back-btn">Back</button>
+            <div class="detail-nav">
+                <button id="detailPrev" class="back-btn">←</button>
+                <button id="detailNow" class="back-btn">Now</button>
+                <button id="detailNext" class="back-btn">→</button>
+            </div>
+            <span id="detailTitle"></span>
+        </div>
+        <div class="detail-timeline" id="detailTimeline"></div>
+        </div>
+
     <div class="time-details">
         <h3 style="text-align: center; margin-bottom: 20px; color: #00ffff;">Time Breakdown</h3>
 
@@ -147,6 +166,9 @@
     </div>
     </div>
 
+    <script src="cobie.js"></script>
+    <script src="utils.js"></script>
+    <script src="animate.js"></script>
     <script src="events.js"></script>
     <script src="script.js"></script>
     <script src="clock.js"></script>

logo.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <radialGradient id="bg" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#101018"/>
+      <stop offset="100%" stop-color="#050508"/>
+    </radialGradient>
+    <linearGradient id="ring" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#00ffff"/>
+      <stop offset="100%" stop-color="#ff00ff"/>
+    </linearGradient>
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="url(#bg)" stroke="url(#ring)" stroke-width="4"/>
+  <path d="M55 30 H45 A20 20 0 0 0 45 70 H55" fill="none" stroke="#00ffff" stroke-width="6" stroke-linecap="round" filter="url(#glow)"/>
+  <path d="M65 30 H75 M70 30 V70" fill="none" stroke="#ff00ff" stroke-width="6" stroke-linecap="round" filter="url(#glow)"/>
+</svg>

style.css

@@ -72,7 +72,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        height: 40vmin;
+        height: var(--clock-size);
     }
 
     .current-time.manual::before {
@@ -360,6 +360,7 @@
       }
     }
 
+
 .eonstrip-grid {
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   transform: translateX(0);
@@ -367,8 +368,145 @@
   will-change: transform;
 }
 
+.detail-view {
+  margin-top: 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+  padding: 20px;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.detail-nav {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.back-btn {
+  background: linear-gradient(45deg, #00ffff, #0080ff);
+  border: none;
+  border-radius: 5px;
+  color: #fff;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 0.9em;
+}
+
+.detail-timeline {
+  position: relative;
+  --scale-width: 24px;
+  height: 400px;
+  border-left: 3px solid #00ffff;
+  margin-right: 40px;
+  margin-left: 0;
+  overflow: visible;
+}
+
+.timeline-block {
+  position: absolute;
+  left: 0;
+  width: calc(100% + 40px);
+  text-align: left;
+  padding-left: 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: var(--scale-width);
+  width: calc(100% + 40px - var(--scale-width));
+  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: 2;
+}
+
+.event-box, .event-line {
+  position: absolute;
+  left: var(--scale-width);
+  background: var(--bg-color, rgba(255,0,255,0.4));
+  border: 1px solid var(--border-color, rgba(0,255,255,0.7));
+  border-radius: 4px;
+  padding: 2px 4px;
+  color: var(--text-color, #fff);
+  font-size: 0.75em;
+  overflow: visible;
+  white-space: nowrap;
+  z-index: 3;
+  box-shadow: 0 0 4px var(--border-color, rgba(0,255,255,0.9));
+}
+.event-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.event-line {
+  height: 4px;
+  padding: 0;
+  overflow: visible;
+}
+
+.event-box.small-event {
+  overflow: visible;
+  padding: 0;
+}
+
+.event-line .event-label,
+.event-box.small-event .event-label {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, -2px);
+  margin-bottom: 2px;
+  background: var(--bg-color, rgba(255,0,255,0.5));
+  border: 1px solid var(--border-color, rgba(0,255,255,0.8));
+  border-radius: 4px;
+  padding: 2px 6px;
+  white-space: nowrap;
+  color: var(--text-color, #fff);
+  font-size: 0.75em;
+  font-weight: 600;
+  text-shadow: 0 0 4px var(--border-color, #ff00ff);
+  z-index: 4;
+  box-shadow: 0 0 4px var(--border-color, rgba(0,255,255,0.9));
+}
+
+.event-line .event-label.below,
+.event-box.small-event .event-label.below {
+  bottom: auto;
+  top: 100%;
+  transform: translate(-50%, 2px);
+  margin-bottom: 0;
+  margin-top: 2px;
+}
+
+.event-box:hover .tooltip,
+.event-line:hover .tooltip {
+  opacity: 1;
+}
+
 /* Layout combining current time and analog clock */
 .time-display {
+  --clock-size: 40vmin;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
@@ -376,9 +514,10 @@
   gap: 20px;
 }
 
+
 .analog-clock-container {
   flex: 0 0 auto;
-  width: 40vmin;
+  width: var(--clock-size);
   margin-left: auto;
   display: flex;
   justify-content: center;
@@ -387,71 +526,146 @@
 
 #clock {
   position: relative;
-  width: 40vmin;
+  width: var(--clock-size);
-  height: 40vmin;
+  height: var(--clock-size);
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   background: radial-gradient(circle at center, #0a0e27 0%, #1a1f3a 100%);
   box-shadow: 0 0 25px rgba(0, 255, 255, 0.2), inset 0 0 40px rgba(255, 0, 255, 0.2);
 }
 
-#clock::after {
+.clock-center {
-  content: '';
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 1.2em;
+  width: calc(var(--clock-size) * 0.13);
-  height: 1.2em;
+  height: calc(var(--clock-size) * 0.13);
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%) translateZ(0);
-  background: #ffffff;
+  background: url('logo.svg') center/contain no-repeat;
+  background-color: transparent;
   border-radius: 50%;
-  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+  /* box-shadow: 0 0 8px rgba(0, 255, 255, 0.8); */
   z-index: 2;
+  pointer-events: none;
+}
+
+@media screen and (min-width: 1200px) {
+  .clock-center {
+    width: calc(var(--clock-size) * 0.085);
+    height: calc(var(--clock-size) * 0.085);
+  }
+}
+
+.clock-label {
+  position: absolute;
+  bottom: 30%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: 'Great Vibes', cursive;
+  font-size: calc(var(--clock-size) * 0.06);
+  color: #ffaaff;
+  text-shadow: 0 0 6px rgba(255, 0, 255, 0.6);
+  pointer-events: none;
+  z-index: 0;
+}
+
+body.fullscreen-clock .clock-label {
+  font-size: calc(var(--clock-size) * 0.08);
 }
 
 .marker {
   position: absolute;
-  width: 2em;
+  width: calc(var(--clock-size) * 0.13);
-  height: 2em;
+  height: calc(var(--clock-size) * 0.13);
   text-align: center;
-  line-height: 2em;
+  line-height: calc(var(--clock-size) * 0.13);
-  font-family: 'Courier New', monospace;
+  /* Use a futuristic font for the clock markers */
-  font-size: 1.1em;
+  font-family: 'Orbitron', 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif;
-  color: #ffffff;
+  /* 1% of the clock radius */
-  text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+  font-size: calc(var(--clock-size) * 0.05);
-  transform: translate(-50%, -50%);
+  font-weight: 600;
+  color: #00ffff;
+  background: none;
+  border: none;
+  border-radius: 0;
+  text-shadow: 0 0 6px rgba(0, 255, 255, 0.9), 0 0 12px rgba(0, 255, 255, 0.7);
+  box-shadow: none;
+  transform-origin: center;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  pointer-events: none;
+  will-change: transform;
+  z-index: 1;
+}
+
+.tick {
+  position: absolute;
+  width: 2px;
+  background: #00ffff;
+  transform-origin: center top;
   z-index: 0;
 }
 
+.tick.mid {
+  background: #66ffff;
+}
+
+.tick.big {
+  background: #ffffff;
+}
+
 .hand {
   position: absolute;
   bottom: 50%;
   left: 50%;
-  transform-origin: bottom;
+  transform-origin: bottom center;
-  transition: transform 0.5s ease-in-out;
+  transform: translateX(-50%);
+  transition: transform 1s linear;
   border-radius: 2px;
   z-index: 1;
 }
 
+
 .hand.xeno {
-  width: 4px;
+  width: 2px;
-  height: 40%;
+  height: 44%;
-  background: #00ffff;
+  background: linear-gradient(to top, #66ccff, #0044ff);
-  box-shadow: 0 0 6px #00ffff;
+  box-shadow: 0 0 8px #66ccff;
 }
 
 .hand.quantic {
   width: 3px;
-  height: 35%;
+  height: 40%;
-  background: #ff00ff;
+  background: linear-gradient(to top, #ff66ff, #9900ff);
-  box-shadow: 0 0 6px #ff00ff;
+  box-shadow: 0 0 8px #ff66ff;
 }
 
 .hand.chronon {
-  width: 2px;
+  width: 4px;
+  height: 34%;
+  background: linear-gradient(to top, #ff4444, #880000);
+  box-shadow: 0 0 8px #ff4444;
+}
+
+.hand.eonstrip {
+  width: 5px;
   height: 30%;
-  background: #ffff00;
+  background: linear-gradient(to top, #33ff99, #006633);
-  box-shadow: 0 0 6px #ffff00;
+  box-shadow: 0 0 8px #33ff99;
+}
+
+
+.hand.megasequence {
+  width: 6px;
+  height: 26%;
+  background: linear-gradient(to top, #ffbb33, #aa5500);
+  box-shadow: 0 0 8px #ffbb33;
+}
+
+@media only screen and (max-height: 430px) and (orientation: landscape) {
+  .time-display {
+    --clock-size: 70vmin;
+  }
 }
 
 body.fullscreen-clock .header,
@@ -459,9 +673,10 @@ body.fullscreen-clock .current-time,
 body.fullscreen-clock .timezone-selector,
 body.fullscreen-clock .calendar-controls,
 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 {
@@ -473,11 +688,12 @@ body.fullscreen-clock .time-display {
 }
 
 body.fullscreen-clock .analog-clock-container {
-  width: 80vmin;
+  --clock-size: 80vmin;
+  width: var(--clock-size);
   margin-left: 0;
 }
 
 body.fullscreen-clock #clock {
-  width: 80vmin;
+  width: var(--clock-size);
-  height: 80vmin;
+  height: var(--clock-size);
 }

utils.js

@@ -0,0 +1,92 @@
+(function(){
+  function parseColor(hex) {
+    if (!hex) return [255, 255, 255];
+    let c = hex.replace('#', '');
+    if (c.length === 3) c = c.split('').map(x => x + x).join('');
+    const num = parseInt(c, 16);
+    return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
+  }
+
+  const toHex = v => v.toString(16).padStart(2, '0');
+
+  function hexToRgba(hex, a = 1) {
+    const [r, g, b] = parseColor(hex);
+    return `rgba(${r},${g},${b},${a})`;
+  }
+
+  function getContrastColor(hex) {
+    const [r, g, b] = parseColor(hex);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 128 ? '#000' : '#fff';
+  }
+
+  function lightenColor(hex, p) {
+    const [r, g, b] = parseColor(hex).map(v =>
+      Math.min(255, Math.round(v + (255 - v) * p))
+    );
+    return '#' + [r, g, b].map(toHex).join('');
+  }
+
+  function getHumanDiff(d1, d2) {
+    let start = d1 < d2 ? d1 : d2;
+    let end   = d1 < d2 ? d2 : d1;
+
+    let years  = end.getUTCFullYear()  - start.getUTCFullYear();
+    let months = end.getUTCMonth()     - start.getUTCMonth();
+    let days   = end.getUTCDate()      - start.getUTCDate();
+
+    if (days < 0) {
+      months--;
+      let prevMonthDays = new Date(Date.UTC(
+        end.getUTCFullYear(),
+        end.getUTCMonth(), 0
+      )).getUTCDate();
+      days += prevMonthDays;
+    }
+    if (months < 0) {
+      years--;
+      months += 12;
+    }
+
+    let aligned = new Date(Date.UTC(
+      start.getUTCFullYear() + years,
+      start.getUTCMonth()     + months,
+      start.getUTCDate()      + days,
+      start.getUTCHours(),
+      start.getUTCMinutes(),
+      start.getUTCSeconds()
+    ));
+    let diffMs = end.getTime() - aligned.getTime();
+
+    if (diffMs < 0) {
+      diffMs += 24 * 3600e3;
+      if (days > 0) {
+        days--;
+      } else {
+        months--;
+        if (months < 0) {
+          years--;
+          months += 12;
+        }
+        days = new Date(Date.UTC(
+          end.getUTCFullYear(),
+          end.getUTCMonth(), 0
+        )).getUTCDate();
+      }
+    }
+
+    let hours   = Math.floor(diffMs / 3600e3); diffMs -= hours * 3600e3;
+    let minutes = Math.floor(diffMs /   60e3); diffMs -= minutes *   60e3;
+    let seconds = Math.floor(diffMs /    1e3);
+
+    return { years, months, days, hours, minutes, seconds };
+  }
+
+  window.Utils = {
+    parseColor,
+    hexToRgba,
+    getContrastColor,
+    lightenColor,
+    getHumanDiff
+  };
+})();