Skip to content

Commit 6929699

Browse files
authored
Merge pull request #5 from Lanthanum89/apk-gradle
2 parents 4b8bdd5 + 5d6cf90 commit 6929699

7 files changed

Lines changed: 1226 additions & 0 deletions

File tree

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ apps/
99

1010
# Android local SDK path file
1111
android/local.properties
12+
13+
# Local tooling downloads/cache
14+
.tools/
Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
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>
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"name": "Binary Bloom Clock",
3+
"short_name": "Binary Clock",
4+
"description": "A beautifully designed binary clock that displays time using binary lights. Read the time in 24-hour or 12-hour format.",
5+
"start_url": "./index.html",
6+
"scope": "./",
7+
"display": "standalone",
8+
"orientation": "portrait-primary",
9+
"theme_color": "#4a2954",
10+
"background_color": "#fff5fc",
11+
"icons": [
12+
{
13+
"src": "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>",
14+
"sizes": "192x192",
15+
"type": "image/svg+xml",
16+
"purpose": "any"
17+
},
18+
{
19+
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><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='512' height='512' rx='128' fill='%23fff5fc'/><circle cx='128' cy='128' r='64' fill='url(%23grad)' opacity='0.9'/><circle cx='384' cy='128' r='64' fill='url(%23grad)' opacity='0.7'/><circle cx='128' cy='384' r='64' fill='url(%23grad)' opacity='0.7'/><circle cx='384' cy='384' r='64' fill='url(%23grad)' opacity='0.9'/><circle cx='256' cy='256' r='52' fill='%234a2954' opacity='0.8'/></svg>",
20+
"sizes": "512x512",
21+
"type": "image/svg+xml",
22+
"purpose": "any maskable"
23+
}
24+
],
25+
"categories": ["utilities"],
26+
"screenshots": [
27+
{
28+
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 540 720'><rect width='540' height='720' fill='%23fff5fc'/><rect x='20' y='40' width='500' height='640' rx='24' fill='rgba(255,250,255,0.78)' stroke='%23dba9e5' stroke-width='1'/><text x='270' y='100' font-size='32' font-weight='bold' fill='%234a2954' text-anchor='middle'>Binary Bloom</text><circle cx='100' cy='200' r='24' fill='%23ffa8d9'/><circle cx='220' cy='200' r='24' fill='%23ffa8d9'/><circle cx='340' cy='200' r='24' fill='%23ffffff' stroke='%23c99bd5'/><circle cx='100' cy='300' r='24' fill='%23ffffff' stroke='%23c99bd5'/><circle cx='220' cy='300' r='24' fill='%23ffa8d9'/><circle cx='340' cy='300' r='24' fill='%23ffffff' stroke='%23c99bd5'/></svg>",
29+
"sizes": "540x720",
30+
"type": "image/svg+xml",
31+
"form_factor": "narrow"
32+
}
33+
],
34+
"shortcuts": [
35+
{
36+
"name": "24-Hour View",
37+
"short_name": "24h",
38+
"description": "Open Binary Clock in 24-hour mode",
39+
"url": "./?mode=24",
40+
"icons": [
41+
{
42+
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><rect width='96' height='96' rx='24' fill='%23ffa8d9'/><text x='48' y='60' font-size='32' font-weight='bold' fill='white' text-anchor='middle'>24h</text></svg>",
43+
"sizes": "96x96",
44+
"type": "image/svg+xml"
45+
}
46+
]
47+
},
48+
{
49+
"name": "12-Hour View",
50+
"short_name": "12h",
51+
"description": "Open Binary Clock in 12-hour mode",
52+
"url": "./?mode=12",
53+
"icons": [
54+
{
55+
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><rect width='96' height='96' rx='24' fill='%23e39cff'/><text x='48' y='60' font-size='32' font-weight='bold' fill='white' text-anchor='middle'>12h</text></svg>",
56+
"sizes": "96x96",
57+
"type": "image/svg+xml"
58+
}
59+
]
60+
}
61+
]
62+
}

0 commit comments

Comments
 (0)