Merge pull request #9 from ok2/codex/redesign-application-and-merge-html-pages

Integrate analog clock into single page

clock.js

@@ -81,4 +81,10 @@ window.addEventListener('load',()=>{
   placeMarkers();
   updateClock();
   setInterval(updateClock,1000);
+  const clk=document.getElementById('clock');
+  if(clk){
+    clk.addEventListener('click',()=>{
+      document.body.classList.toggle('fullscreen-clock');
+    });
+  }
 });

index.html

@@ -14,6 +14,7 @@
         <div class="subtitle">CosmoChron Binary Epoch Calendar</div>
     </div>
 
+    <div class="time-display">
         <div class="current-time">
             <div class="label">Current CoBiE Time</div>
             <div class="cobie-time" id="cobieTime" tabindex="0">+00000000.0000</div>
@@ -21,6 +22,15 @@
             <div class="regular-time" style="font-size: 0.9em; color: #888;" id="taiTime">TAI: Loading...</div>
         </div>
 
+        <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>
+    </div>
+
     <div class="timezone-selector">
         <label for="timezone">Timezone: </label>
         <select id="timezone">
@@ -139,5 +149,6 @@
 
     <script src="events.js"></script>
     <script src="script.js"></script>
+    <script src="clock.js"></script>
 </body>
 </html>

style.css

@@ -361,3 +361,108 @@
   transition: transform 0.3s ease;
   will-change: transform;
 }
+
+/* Layout combining current time and analog clock */
+.time-display {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.analog-clock-container {
+  flex: 0 0 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#clock {
+  position: relative;
+  width: 40vmin;
+  height: 40vmin;
+  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 {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1.2em;
+  height: 1.2em;
+  transform: translate(-50%, -50%);
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+}
+
+.marker {
+  position: absolute;
+  width: 2em;
+  height: 2em;
+  text-align: center;
+  line-height: 2em;
+  font-family: 'Courier New', monospace;
+  font-size: 1.1em;
+  color: #ffffff;
+  text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
+  transform: translate(-50%, -50%);
+}
+
+.hand {
+  position: absolute;
+  bottom: 50%;
+  left: 50%;
+  transform-origin: bottom;
+  transition: transform 0.5s ease-in-out;
+  border-radius: 2px;
+}
+
+.hand.xeno {
+  width: 4px;
+  height: 40%;
+  background: #00ffff;
+  box-shadow: 0 0 6px #00ffff;
+}
+
+.hand.quantic {
+  width: 3px;
+  height: 35%;
+  background: #ff00ff;
+  box-shadow: 0 0 6px #ff00ff;
+}
+
+.hand.chronon {
+  width: 2px;
+  height: 30%;
+  background: #ffff00;
+  box-shadow: 0 0 6px #ffff00;
+}
+
+body.fullscreen-clock .header,
+body.fullscreen-clock .current-time,
+body.fullscreen-clock .timezone-selector,
+body.fullscreen-clock .calendar-controls,
+body.fullscreen-clock .calendar-view,
+body.fullscreen-clock .time-details,
+body.fullscreen-clock .explanations {
+  display: none;
+}
+
+body.fullscreen-clock .time-display {
+  position: fixed;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+body.fullscreen-clock #clock {
+  width: 80vmin;
+  height: 80vmin;
+}