Merge pull request #29 from ok2/codex/use-futuristic-font-for-clock-markers

Update clock markers with Orbitron font

clock.js

@@ -1,66 +1,15 @@
 // 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;
-    megasequence: 0x100000,
-    cosmocycle: 0x1000000,
-  };
 
-  function floorDiv(a, b) {
+  // CoBiE helpers pulled from cobie.js
-    return Math.trunc(a / b);
-  }
-
-  function getTAIOffsetAt(date) {
-    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) {
-    const utcSec = floorDiv(date.getTime(), 1000);
-    const taiSec = utcSec + getTAIOffsetAt(date);
-    return taiSec - COBIE_EPOCH;
-  }
 
   function placeMarkers() {
     const clock = document.getElementById('clock');
@@ -88,6 +37,40 @@
     });
   }
 
+  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) {
+      // When wrapping around (e.g. 15 → 0), animate to one full turn
+      // and then snap back to the new angle to avoid a jump.
+      const target = angle + 360;
+      const handle = () => {
+        el.removeEventListener('transitionend', handle);
+        // Snap back without animation
+        el.style.transition = 'none';
+        el.style.transform = `rotate(${angle}deg)`;
+        void el.offsetWidth;
+        el.style.transition = '';
+      };
+      el.addEventListener('transitionend', handle, { once: true });
+      el.style.transform = `rotate(${target}deg)`;
+    } else {
+      el.style.transform = `rotate(${angle}deg)`;
+    }
+
+    lastAngles[id] = angle;
+  }
+
   function updateClock() {
     const now = new Date();
     const cob = toCobiets(now);
@@ -97,11 +80,11 @@
     const cf = (cob % COBIE_UNITS.eonstrip) / COBIE_UNITS.eonstrip;
     const ef = (cob % COBIE_UNITS.megasequence) / COBIE_UNITS.megasequence;
     const mf = (cob % COBIE_UNITS.cosmocycle) / COBIE_UNITS.cosmocycle;
-    document.getElementById('handXeno').style.transform = `rotate(${xf * 360}deg)`;
+    rotateHand('handXeno', xf * 360);
-    document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`;
+    rotateHand('handQuantic', qf * 360);
-    document.getElementById('handChronon').style.transform = `rotate(${cf * 360}deg)`;
+    rotateHand('handChronon', cf * 360);
-    document.getElementById('handEonstrip').style.transform = `rotate(${ef * 360}deg)`;
+    rotateHand('handEonstrip', ef * 360);
-    document.getElementById('handMegasequence').style.transform = `rotate(${mf * 360}deg)`;
+    rotateHand('handMegasequence', mf * 360);
   }
 
   function initClock() {

cobie.js

@@ -163,7 +163,7 @@ function formatCobieTimestamp(cobiets) {
     return sign + rawDateHex + '.' + paddedTimeHex;
 }
 
-module.exports = {
+const Cobie = {
     COBIE_EPOCH,
     COBIE_UNITS,
     floorDiv,
@@ -171,5 +171,15 @@ module.exports = {
     getTAIOffsetAt,
     toCobiets,
     fromCobiets,
-    formatCobieTimestamp
+    formatCobieTimestamp,
+    breakdownNonNeg
 };
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = Cobie;
+}
+
+// Expose globally when loaded in a browser environment
+if (typeof window !== 'undefined') {
+    window.Cobie = Cobie;
+}

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&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -149,6 +151,7 @@
     </div>
     </div>
 
+    <script src="cobie.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>

script.js

@@ -1,26 +1,24 @@
 // CoBiE Time System Implementation
 // Using Unix TAI epoch (January 1, 1970, 00:00:00 TAI)
 // Note: TAI differs from UTC by leap seconds (37 seconds as of 2025)
-const COBIE_EPOCH = 0; // Unix TAI epoch in seconds
 
-const COBIE_UNITS = {
+(function() {
-    second: 1,
+if (!window.Cobie) {
-    xenocycle: 0x10,
+  console.error('cobie.js not loaded');
-    quantic: 0x100,
+  return;
-    chronon: 0x1000,
+}
-    eonstrip: 0x10000,
+
-    megasequence: 0x100000,
+const {
-    cosmocycle: 0x1000000,
+  COBIE_EPOCH,
-    galactic_year: 0x10000000,
+  COBIE_UNITS,
-    universal_eon: 0x100000000,
+  floorDiv,
-    celestial_era: 0x1000000000,
+  parseCobiets,
-    epoch_of_cosmos: 0x10000000000,
+  getTAIOffsetAt,
-    cosmic_aeon: 0x100000000000,
+  toCobiets,
-    metaepoch: 0x1000000000000,
+  fromCobiets,
-    eternum: 0x10000000000000,
+  formatCobieTimestamp,
-    infinitum: 0x100000000000000,
+  breakdownNonNeg
-    astralmillennia: 0x1000000000000000
+} = window.Cobie;
-};
 
 const EONSTRIP_NAMES = [
     'Solprime', 'Lunex', 'Terros', 'Aquarion',
@@ -70,77 +68,7 @@ function formatSafeDate(rawDate, cobSeconds, intlOptions) {
   }
 }
 
-function parseCobiets(str) {
+// parseCobiets, floorDiv and other CoBiE helpers are provided by cobie.js
-    const m = /^([+-]?)([0-9A-Fa-f]+)\.([0-9A-Fa-f]{1,})$/.exec(str.trim());
-    if (!m) return null;
-    const sign = m[1] === '-' ? -1 : 1;
-
-    // All date‐units in descending “size” order, exactly as in COBIE_UNITS
-    const allDateKeys = [
-        'astralmillennia',
-        'infinitum',
-        'eternum',
-        'metaepoch',
-        'cosmic_aeon',
-        'epoch_of_cosmos',
-        'celestial_era',
-        'universal_eon',
-        'galactic_year',
-        'cosmocycle',
-        'megasequence',
-        'eonstrip'
-    ];
-
-    // Raw hex‐string on the left of “.”
-    let rawDateHex = m[2];
-    // Pad on the left with zeros if shorter than the number of allDateKeys
-    if (rawDateHex.length < allDateKeys.length) {
-        rawDateHex = rawDateHex.padStart(allDateKeys.length, '0');
-    }
-
-    // If user provided MORE hex‐digits than allDateKeys.length, we treat each extra
-    // digit as an even higher‐order “super‐unit” whose weight is:
-    //    16^( position_from_right_of_eonstrip + 1 ) * COBIE_UNITS['eonstrip']
-    let dateKeys = [...allDateKeys];
-    if (rawDateHex.length > allDateKeys.length) {
-        const extraCount = rawDateHex.length - allDateKeys.length;
-        for (let i = 0; i < extraCount; i++) {
-            // Insert null placeholders at the front for “beyond astralmillennia”
-            dateKeys.unshift(null);
-        }
-    }
-
-    // Time portion (always exactly 4 hex digits → chronon, quantic, xenocycle, second)
-    const timeHexRaw = m[3];
-    const timeHex = timeHexRaw.padStart(4, '0');
-    const timeKeys = ['chronon', 'quantic', 'xenocycle', 'second'];
-
-    let total = 0;
-    // 1) Process every date‐hex digit
-    for (let i = 0; i < rawDateHex.length; i++) {
-        const digit = parseInt(rawDateHex[i], 16);
-        const key = dateKeys[i];
-        if (key === null) {
-            // “Super‐unit” weight = (16 ^ power) * (size of eonstrip),
-            // where power = (#digits_left_of_eonstrip) − (index_of_this_digit) − 1
-            const power = rawDateHex.length - 1 - i;
-            total += digit * Math.pow(16, power) * COBIE_UNITS['eonstrip'];
-        } else {
-            total += digit * COBIE_UNITS[key];
-        }
-    }
-
-    // 2) Add time‐portion
-    timeHex.split('').forEach((h, i) => {
-        total += parseInt(h, 16) * COBIE_UNITS[timeKeys[i]];
-    });
-
-    return sign * total;
-}
-
-function floorDiv(a, b) {
-    return Math.trunc(a / b);
-}
 
 function getCurrentTAIOffset() {
     return getTAIOffsetAt(new Date());
@@ -212,135 +140,8 @@ function getHumanDiff(d1, d2) {
   return { years, months, days, hours, minutes, seconds };
 }
 
-function getTAIOffsetAt(date) {
+// getTAIOffsetAt, toCobiets, fromCobiets, breakdownNonNeg and
-    const taiEpoch = new Date('1958-01-01T00:00:00Z');
+// formatCobieTimestamp come from cobie.js
-    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 leapDate = new Date(leapSeconds[i].date);
-        if (date < leapDate) {
-            return i === 0 ? 10 : leapSeconds[i - 1].offset;
-        }
-    }
-    return 37; // Most recent known offset
-}
-
-function toCobiets(date) {
-    const utcSec = floorDiv(date.getTime(), 1000);
-    const taiSec = utcSec + getTAIOffsetAt(date);
-    return taiSec - COBIE_EPOCH;
-}
-
-function fromCobiets(cobiets) {
-    const taiSeconds = cobiets + COBIE_EPOCH;
-    const taiMs = taiSeconds * 1000;
-    let utcMs = taiMs
-    for (let i = 0; i < 3; i++) {
-        const off = getTAIOffsetAt(new Date(utcMs));
-        utcMs = taiMs - off * 1000;
-    }
-    return new Date(utcMs);
-}
-
-const UNIT_KEYS = [
-  'astralmillennia',
-  'infinitum',
-  'eternum',
-  'metaepoch',
-  'cosmic_aeon',
-  'epoch_of_cosmos',
-  'celestial_era',
-  'universal_eon',
-  'galactic_year',
-  'cosmocycle',
-  'megasequence',
-  'eonstrip',
-  'chronon',
-  'quantic',
-  'xenocycle',
-  'second'
-];
-function breakdownNonNeg(cob) {
-    let rem = cob, bd = {};
-    for (let key of UNIT_KEYS) {
-        bd[key] = floorDiv(rem, COBIE_UNITS[key]);
-        rem %= COBIE_UNITS[key];
-    }
-    return bd;
-}
-
-function formatCobieTimestamp(cobiets) {
-    const sign = cobiets < 0 ? '-' : '+';
-    const absCob = Math.abs(cobiets);
-    const bd = breakdownNonNeg(absCob);
-
-    // All date‐units in descending “size” order
-    const dateUnits = [
-        'astralmillennia',
-        'infinitum',
-        'eternum',
-        'metaepoch',
-        'cosmic_aeon',
-        'epoch_of_cosmos',
-        'celestial_era',
-        'universal_eon',
-        'galactic_year',
-        'cosmocycle',
-        'megasequence',
-        'eonstrip'
-    ];
-
-    // Build a raw hex‐string by concatenating each unit’s hex
-    let rawDateHex = dateUnits
-        .map(key => bd[key].toString(16))
-        .join('');
-
-    // Trim leading zeros but leave at least one “0” if everything is zero
-    rawDateHex = rawDateHex.replace(/^0+/, '');
-    if (rawDateHex === '') rawDateHex = '0';
-
-    // Time portion: exactly 4 hex digits (chronon → second)
-    const timeHex = [
-        bd.chronon,
-        bd.quantic,
-        bd.xenocycle,
-        bd.second
-    ].map(n => n.toString(16)).join('');
-
-    const paddedTimeHex = timeHex.padStart(4, '0');
-
-    return sign + rawDateHex + '.' + paddedTimeHex;
-}
 
 function updateCurrentTime() {
     let cobiets, baseDate;
@@ -1000,6 +801,7 @@ function commitInput() {
   span.addEventListener('click', enterEdit);
 }
 
+function init() {
 // Timezone change handler
 document.getElementById('timezone').addEventListener('change', (e) => {
     currentTimezone = e.target.value;
@@ -1129,3 +931,15 @@ function wheelNavigate(e) {
 }
 
 document.addEventListener('wheel', wheelNavigate);
+
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}
+
+window.navigatePeriod = navigatePeriod;
+window.goToNow       = goToNow;
+})();

style.css

@@ -403,7 +403,8 @@
   width: 1.2em;
   height: 1.2em;
   transform: translate(-50%, -50%);
-  background: #ffffff;
+  background: url('logo.svg') center/contain no-repeat;
+  background-color: #ffffff;
   border-radius: 50%;
   box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
   z-index: 2;
@@ -415,10 +416,16 @@
   height: 2em;
   text-align: center;
   line-height: 2em;
-  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;
+  font-size: 1.2em;
-  text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+  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: translate(-50%, -50%);
   z-index: 0;
 }
@@ -436,35 +443,35 @@
 
 .hand.xeno {
   width: 2px;
-  height: 50%;
+  height: 40%;
   background: linear-gradient(to top, #00ffff, #0066ff);
   box-shadow: 0 0 8px #00ffff;
 }
 
 .hand.quantic {
   width: 3px;
-  height: 45%;
+  height: 34%;
   background: linear-gradient(to top, #ff00ff, #6600ff);
   box-shadow: 0 0 8px #ff00ff;
 }
 
 .hand.chronon {
   width: 4px;
-  height: 40%;
+  height: 30%;
   background: linear-gradient(to top, #ffff00, #ff6600);
   box-shadow: 0 0 8px #ffff99;
 }
 
 .hand.eonstrip {
   width: 5px;
-  height: 35%;
+  height: 20%;
   background: linear-gradient(to top, #00ff88, #005544);
   box-shadow: 0 0 8px #00ff88;
 }
 
 .hand.megasequence {
   width: 6px;
-  height: 30%;
+  height: 16%;
   background: linear-gradient(to top, #ffa500, #552200);
   box-shadow: 0 0 8px #ffa500;
 }