1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0, viewport-fit=cover ">
6+ < meta name ="theme-color " content ="#4a2954 ">
7+ < meta name ="description " content ="A beautifully designed binary clock that displays time using binary lights. Read time in 24-hour or 12-hour format. ">
8+ < title > Binary Bloom Clock</ title >
9+ < link rel ="manifest " href ="manifest.json ">
10+ < link rel ="icon " type ="image/svg+xml " href ="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192'><defs><linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' style='stop-color:%23ff7cbf;stop-opacity:1' /><stop offset='100%' style='stop-color:%23b05ad4;stop-opacity:1' /></linearGradient></defs><rect width='192' height='192' rx='48' fill='%23fff5fc'/><circle cx='48' cy='48' r='24' fill='url(%23grad)' opacity='0.9'/><circle cx='144' cy='48' r='24' fill='url(%23grad)' opacity='0.7'/><circle cx='48' cy='144' r='24' fill='url(%23grad)' opacity='0.7'/><circle cx='144' cy='144' r='24' fill='url(%23grad)' opacity='0.9'/><circle cx='96' cy='96' r='20' fill='%234a2954' opacity='0.8'/></svg> ">
11+ < link rel ="apple-touch-icon " href ="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'><defs><linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' style='stop-color:%23ff7cbf;stop-opacity:1' /><stop offset='100%' style='stop-color:%23b05ad4;stop-opacity:1' /></linearGradient></defs><rect width='180' height='180' rx='40' fill='%23fff5fc'/><circle cx='45' cy='45' r='22' fill='url(%23grad)' opacity='0.9'/><circle cx='135' cy='45' r='22' fill='url(%23grad)' opacity='0.7'/><circle cx='45' cy='135' r='22' fill='url(%23grad)' opacity='0.7'/><circle cx='135' cy='135' r='22' fill='url(%23grad)' opacity='0.9'/><circle cx='90' cy='90' r='18' fill='%234a2954' opacity='0.8'/></svg> ">
12+ < link rel ="preconnect " href ="https://fonts.googleapis.com ">
13+ < link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin >
14+ < link href ="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Cormorant+Garamond:wght@500;600&display=swap " rel ="stylesheet ">
15+ < link rel ="stylesheet " href ="styles.css ">
16+ </ head >
17+ < body >
18+ < div class ="background-glow background-glow-left "> </ div >
19+ < div class ="background-glow background-glow-right "> </ div >
20+
21+ < main class ="clock-shell " id ="widgetShell ">
22+ < div class ="clock-content " id ="clockContent ">
23+ < div class ="widget-bar " id ="widgetBar ">
24+ < div >
25+ < p class ="widget-label "> Desktop widget</ p >
26+ < p class ="widget-hint "> Drag this bar to move. Pull the lower-right corner to resize.</ p >
27+ </ div >
28+ < div class ="widget-actions ">
29+ < div class ="mode-toggle " role ="group " aria-label ="Clock format ">
30+ < button class ="mode-button is-active " type ="button " data-format-toggle ="24 "> 24h</ button >
31+ < button class ="mode-button " type ="button " data-format-toggle ="12 "> 12h</ button >
32+ </ div >
33+ < button class ="fit-button " type ="button " id ="fitToScreenButton "> Fit screen</ button >
34+ </ div >
35+ </ div >
36+
37+ < header class ="hero ">
38+ < p class ="eyebrow "> Binary Bloom</ p >
39+ < h1 > Read time using binary lights...</ h1 >
40+ < p class ="subtitle ">
41+ Each glowing tile represents a BCD value. Read tens and ones as separate 4-bit stacks for each unit, then switch between 24-hour and 12-hour reading.
42+ </ p >
43+ </ header >
44+
45+ < section class ="clock-panel " aria-label ="Binary clock ">
46+ < div class ="time-columns ">
47+ < section class ="time-column " data-unit ="hours " aria-labelledby ="hours-label ">
48+ < div class ="column-header ">
49+ < span class ="column-kicker " id ="hours-label "> Hours</ span >
50+ < span class ="binary-readout " data-binary-label ="hours "> 0000 0000</ span >
51+ </ div >
52+ < div class ="bit-groups ">
53+ < div class ="digit-group ">
54+ < span class ="digit-label "> Tens</ span >
55+ < div class ="bit-stack " data-bits ="hours-tens "> </ div >
56+ </ div >
57+ < div class ="digit-group ">
58+ < span class ="digit-label "> Ones</ span >
59+ < div class ="bit-stack " data-bits ="hours-ones "> </ div >
60+ </ div >
61+ </ div >
62+ < div class ="decimal-row ">
63+ < div class ="decimal-readout " data-decimal-label ="hours "> 00</ div >
64+ < div class ="period-badge " data-period-label > 24H</ div >
65+ </ div >
66+ </ section >
67+
68+ < section class ="time-column " data-unit ="minutes " aria-labelledby ="minutes-label ">
69+ < div class ="column-header ">
70+ < span class ="column-kicker " id ="minutes-label "> Minutes</ span >
71+ < span class ="binary-readout " data-binary-label ="minutes "> 0000 0000</ span >
72+ </ div >
73+ < div class ="bit-groups ">
74+ < div class ="digit-group ">
75+ < span class ="digit-label "> Tens</ span >
76+ < div class ="bit-stack " data-bits ="minutes-tens "> </ div >
77+ </ div >
78+ < div class ="digit-group ">
79+ < span class ="digit-label "> Ones</ span >
80+ < div class ="bit-stack " data-bits ="minutes-ones "> </ div >
81+ </ div >
82+ </ div >
83+ < div class ="decimal-readout " data-decimal-label ="minutes "> 00</ div >
84+ </ section >
85+
86+ < section class ="time-column " data-unit ="seconds " aria-labelledby ="seconds-label ">
87+ < div class ="column-header ">
88+ < span class ="column-kicker " id ="seconds-label "> Seconds</ span >
89+ < span class ="binary-readout " data-binary-label ="seconds "> 0000 0000</ span >
90+ </ div >
91+ < div class ="bit-groups ">
92+ < div class ="digit-group ">
93+ < span class ="digit-label "> Tens</ span >
94+ < div class ="bit-stack " data-bits ="seconds-tens "> </ div >
95+ </ div >
96+ < div class ="digit-group ">
97+ < span class ="digit-label "> Ones</ span >
98+ < div class ="bit-stack " data-bits ="seconds-ones "> </ div >
99+ </ div >
100+ </ div >
101+ < div class ="decimal-readout " data-decimal-label ="seconds "> 00</ div >
102+ </ section >
103+ </ div >
104+ </ section >
105+ </ div >
106+ </ main >
107+
108+ < script src ="script.js "> </ script >
109+ < script >
110+ // Register service worker for PWA functionality
111+ if ( 'serviceWorker' in navigator ) {
112+ const isDev = location . hostname === 'localhost' || location . hostname === '127.0.0.1' ;
113+ navigator . serviceWorker . register ( 'service-worker.js' )
114+ . then ( registration => {
115+ if ( isDev ) {
116+ console . log ( 'Service Worker registered:' , registration ) ;
117+ }
118+ } )
119+ . catch ( err => {
120+ if ( isDev ) {
121+ console . warn ( 'Service Worker registration failed:' , err ) ;
122+ }
123+ } ) ;
124+ }
125+ </ script >
126+ </ body >
127+ </ html >
0 commit comments