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

Merge pull request #20 from ok2/codex/improve-analog-clock-hands-design

Browse Source 
Add futuristic analog clock hands
This commit is contained in:
Kiyomichi Kosaka 2025-06-15 00:06:05 +02:00 committed by GitHub
commit fcb49b2f97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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,
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() {

2
index.html
View File

@ -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>

27
style.css
View File

@ -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,