From b91606183d50f84205beb7cf0558999a82ed6298 Mon Sep 17 00:00:00 2001
From: Kiyomichi Kosaka <ok2@users.noreply.github.com>
Date: Sun, 15 Jun 2025 00:05:40 +0200
Subject: [PATCH] Add eonstrip and megasequence hands

---
 clock.js   |  6 ++++++
 index.html |  2 ++
 style.css  | 27 +++++++++++++++++++++------
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/clock.js b/clock.js
index d1ce7d0..efe7cae 100644
--- a/clock.js
+++ b/clock.js
@@ -8,6 +8,8 @@
     quantic: 0x100,
     chronon: 0x1000,
     eonstrip: 0x10000,
+    megasequence: 0x100000,
+    cosmocycle: 0x1000000,
   };
 
   function floorDiv(a, b) {
@@ -93,9 +95,13 @@
     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;
+    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)`;
     document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`;
     document.getElementById('handChronon').style.transform = `rotate(${cf * 360}deg)`;
+    document.getElementById('handEonstrip').style.transform = `rotate(${ef * 360}deg)`;
+    document.getElementById('handMegasequence').style.transform = `rotate(${mf * 360}deg)`;
   }
 
   function initClock() {
diff --git a/index.html b/index.html
index fe038e7..c02e6b9 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,8 @@
 
         <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>
diff --git a/style.css b/style.css
index 880b7c0..3c3304d 100644
--- a/style.css
+++ b/style.css
@@ -433,25 +433,40 @@
   z-index: 1;
 }
 
+
 .hand.xeno {
   width: 4px;
   height: 40%;
-  background: #00ffff;
-  box-shadow: 0 0 6px #00ffff;
+  background: linear-gradient(to top, #00ffff, #0066ff);
+  box-shadow: 0 0 8px #00ffff;
 }
 
 .hand.quantic {
   width: 3px;
   height: 35%;
-  background: #ff00ff;
-  box-shadow: 0 0 6px #ff00ff;
+  background: linear-gradient(to top, #ff00ff, #6600ff);
+  box-shadow: 0 0 8px #ff00ff;
 }
 
 .hand.chronon {
   width: 2px;
   height: 30%;
-  background: #ffff00;
-  box-shadow: 0 0 6px #ffff00;
+  background: linear-gradient(to top, #ffff00, #ff6600);
+  box-shadow: 0 0 8px #ffff99;
+}
+
+.hand.eonstrip {
+  width: 5px;
+  height: 45%;
+  background: linear-gradient(to top, #00ff88, #005544);
+  box-shadow: 0 0 8px #00ff88;
+}
+
+.hand.megasequence {
+  width: 6px;
+  height: 50%;
+  background: linear-gradient(to top, #ffa500, #552200);
+  box-shadow: 0 0 8px #ffa500;
 }
 
 body.fullscreen-clock .header,