Add analog clock page

2025-06-14 22:21:09 +02:00 · 2025-06-14 22:21:09 +02:00 · 2944dd9b9c
commit 2944dd9b9c
parent a12ccc259d
3 changed files with 143 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -5,6 +5,7 @@ An interactive web app that visualizes the **CosmoChron Binary Epoch (CoBiE)** t
 ## Features

 - **Live CoBiE Clock**: Displays the current CoBiE timestamp, updating every second.
+- **Analog Clock**: Full-screen clock with 16 hex markers and CoBiE hands.
 - **UTC & TAI Display**: Shows both UTC and International Atomic Time (TAI) in human-readable format.
 - **Timezone Selector**: Switch between UTC, TAI, or any IANA timezone.
 - **Interactive Calendar**: Browse past and future Megasequences and Eonstrips with Prev/Next controls.
@ -53,6 +54,9 @@ 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
+
 ├── style.css        # Separated styles
 ├── script.js        # JavaScript logic
 ├── README.md        # This documentation
--- a/analog.html
+++ b/analog.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CoBiE Analog Clock</title>
+  <link rel="stylesheet" href="style.css">
+  <style>
+    body, html { height:100%; margin:0; }
+    .analog-clock-container {
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        height:100%;
+    }
+    #clock {
+        position:relative;
+        width:90vmin;
+        height:90vmin;
+        border:6px solid #fff;
+        border-radius:50%;
+        background:radial-gradient(circle, #1a1f3a 0%, #0a0e27 100%);
+    }
+    .marker {
+        position:absolute;
+        width:2em;
+        height:2em;
+        text-align:center;
+        line-height:2em;
+        font-family:'Courier New', monospace;
+        color:#fff;
+        transform:translate(-50%, -50%);
+    }
+    .hand {
+        position:absolute;
+        bottom:50%;
+        left:50%;
+        transform-origin:bottom;
+    }
+    .hand.xeno { width:4px; height:40%; background:#00ffff; }
+    .hand.quantic { width:3px; height:35%; background:#ff00ff; }
+    .hand.chronon { width:2px; height:30%; background:#ffff00; }
+  </style>
+</head>
+<body>
+<div class="analog-clock-container">
+  <div id="clock">
+    <div class="hand chronon" id="handChronon"></div>
+    <div class="hand quantic" id="handQuantic"></div>
+    <div class="hand xeno" id="handXeno"></div>
+  </div>
+</div>
+<script src="clock.js"></script>
+</body>
+</html>
--- a/clock.js
+++ b/clock.js
@ -0,0 +1,84 @@
+// Minimal CoBiE analog clock logic
+const COBIE_EPOCH = 0;
+const COBIE_UNITS = {
+  second: 1,
+  xenocycle: 0x10,
+  quantic: 0x100,
+  chronon: 0x1000,
+  eonstrip: 0x10000
+};
+function floorDiv(a,b){ 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');
+  const radius=clock.offsetWidth/2-20;
+  for(let i=0;i<16;i++){
+    const angle=i/16*2*Math.PI;
+    const x=radius*Math.sin(angle);
+    const y=-radius*Math.cos(angle);
+    const m=document.createElement('div');
+    m.className='marker';
+    m.textContent=i.toString(16).toUpperCase();
+    m.style.left=`${clock.offsetWidth/2+x}px`;
+    m.style.top=`${clock.offsetHeight/2+y}px`;
+    clock.appendChild(m);
+  }
+}
+function updateClock(){
+  const now=new Date();
+  const cob=toCobiets(now);
+  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)`;
+  document.getElementById('handQuantic').style.transform=`rotate(${qf*360}deg)`;
+  document.getElementById('handChronon').style.transform=`rotate(${cf*360}deg)`;
+}
+window.addEventListener('load',()=>{
+  placeMarkers();
+  updateClock();
+  setInterval(updateClock,1000);
+});