kaizenkodo/CoBiE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add eonstrip and megasequence hands

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 00:05:40 +02:00
parent 6c566db9e7
commit b91606183d
3 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
clock.js
View File

@ -8,6 +8,8 @@
quantic: 0x100, quantic: 0x100,
chronon: 0x1000, chronon: 0x1000,
eonstrip: 0x10000, eonstrip: 0x10000,
megasequence: 0x100000,
cosmocycle: 0x1000000,
}; };
function floorDiv(a, b) { function floorDiv(a, b) {
@ -93,9 +95,13 @@
const xf = (cob % COBIE_UNITS.quantic) / COBIE_UNITS.quantic; const xf = (cob % COBIE_UNITS.quantic) / COBIE_UNITS.quantic;
const qf = (cob % COBIE_UNITS.chronon) / COBIE_UNITS.chronon; const qf = (cob % COBIE_UNITS.chronon) / COBIE_UNITS.chronon;
const cf = (cob % COBIE_UNITS.eonstrip) / COBIE_UNITS.eonstrip; 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('handXeno').style.transform = `rotate(${xf * 360}deg)`;
document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`; document.getElementById('handQuantic').style.transform = `rotate(${qf * 360}deg)`;
document.getElementById('handChronon').style.transform = `rotate(${cf * 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() { function initClock() {

2
index.html
View File

@ -24,6 +24,8 @@
<div class="analog-clock-container"> <div class="analog-clock-container">
<div id="clock"> <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 chronon" id="handChronon"></div>
<div class="hand quantic" id="handQuantic"></div> <div class="hand quantic" id="handQuantic"></div>
<div class="hand xeno" id="handXeno"></div> <div class="hand xeno" id="handXeno"></div>

27
style.css
View File

@ -433,25 +433,40 @@
z-index: 1; z-index: 1;
} }
.hand.xeno { .hand.xeno {
width: 4px; width: 4px;
height: 40%; height: 40%;
background: #00ffff; background: linear-gradient(to top, #00ffff, #0066ff);
box-shadow: 0 0 6px #00ffff; box-shadow: 0 0 8px #00ffff;
} }
.hand.quantic { .hand.quantic {
width: 3px; width: 3px;
height: 35%; height: 35%;
background: #ff00ff; background: linear-gradient(to top, #ff00ff, #6600ff);
box-shadow: 0 0 6px #ff00ff; box-shadow: 0 0 8px #ff00ff;
} }
.hand.chronon { .hand.chronon {
width: 2px; width: 2px;
height: 30%; height: 30%;
background: #ffff00; background: linear-gradient(to top, #ffff00, #ff6600);
box-shadow: 0 0 6px #ffff00; 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, body.fullscreen-clock .header,