Skip to content

Commit 340362b

Browse files
purajitpurajit
authored
remove fullscreen buttons, better hourglass design (#143)
1 parent 294ca46 commit 340362b

File tree

2 files changed

+43
-169
lines changed

2 files changed

+43
-169
lines changed

‎templates/template_continuous_dice.html‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -38,23 +38,6 @@
3838
margin: 2rem 0 1.5rem 0;
3939
}
4040

41-
#header {
42-
display: flex;
43-
justify-content: flex-end;
44-
padding: 0.5rem;
45-
}
46-
47-
#fullscreen-btn {
48-
cursor: pointer;
49-
font-size: 1.25rem;
50-
padding: 0.25rem 0.5rem;
51-
border-radius: var(--radius);
52-
transition: background 0.2s;
53-
}
54-
#fullscreen-btn:hover {
55-
background: rgba(128, 128, 128, 0.2);
56-
}
57-
5841
.flex-row {
5942
display: flex;
6043
flex-wrap: wrap;
@@ -138,9 +121,6 @@
138121
<div id="main">
139122
<div id="contents">
140123
<div class="page-content">
141-
<div id="header">
142-
<div id="fullscreen-btn" title="fullscreen">⛶</div>
143-
</div>
144124
<h1 class="title">Continuous dice</h1>
145125
<div id="dice" class="flex-col gappy">
146126
<div class="flex-row gappy">
@@ -262,15 +242,6 @@ <h1 class="title">Continuous dice</h1>
262242
let PAUSED = true;
263243
let TIMER = null;
264244

265-
function enterAppMode() {
266-
if (document.fullscreenElement) {
267-
document.exitFullscreen();
268-
} else {
269-
const div = document.getElementsByClassName("page-content")[0];
270-
div.requestFullscreen();
271-
}
272-
}
273-
274245
function roll(die) {
275246
return Math.floor(Math.random() * die) + 1;
276247
}
@@ -293,11 +264,6 @@ <h1 class="title">Continuous dice</h1>
293264
PAUSED = true;
294265
}
295266

296-
document.getElementById("fullscreen-btn").onclick = function(e) {
297-
e.preventDefault();
298-
enterAppMode();
299-
}
300-
301267
document.addEventListener("keydown", function(e) {
302268
if (e.code == "Space") {
303269
e.preventDefault();

‎templates/template_hourglass.html‎

Lines changed: 43 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,20 @@
33
<meta charset="utf-8"/>
44
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"/>
55
<style>
6+
@font-face {
7+
font-family: 'Libre Caslon Text';
8+
src: local('Libre Caslon Text Regular'), url(/static/LibreCaslonText-Regular.ttf) format('truetype');
9+
}
10+
611
:root {
712
color-scheme: light dark;
8-
--bg-light: #f9f9f9;
9-
--bg-dark: #121212;
10-
--fg-light: #111;
11-
--fg-dark: #f5f5f5;
12-
--accent: #4e9af1;
1313
--btn-bg: light-dark(#e0e0e0, #2a2a2a);
1414
--btn-hover: light-dark(#cfcfcf, #3a3a3a);
15-
--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
1615
--radius: 0.5rem;
1716
--gap: 1rem;
18-
--mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
19-
20-
background-color: light-dark(var(--bg-light), var(--bg-dark));
21-
color: light-dark(var(--fg-light), var(--fg-dark));
17+
--background-color: light-dark(#f9f9f9, #121212);
18+
--font-color: light-dark(#111111, #f5f5f5);
19+
--tile-background-color: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.02));
2220
}
2321

2422
html, body {
@@ -27,73 +25,55 @@
2725
height: 100vh;
2826
background: var(--background-color);
2927
color: var(--font-color);
30-
font-family: var(--font-stack);
28+
font-family: "Libre Caslon Text";
3129
}
3230

33-
.page-content.hourglass {
31+
.flex-col {
3432
display: flex;
3533
flex-direction: column;
36-
align-items: center;
37-
gap: var(--gap);
38-
max-width: 600px;
39-
width: 100%;
40-
padding: 1rem;
41-
box-sizing: border-box;
42-
margin: auto;
4334
}
4435

45-
#hourglass-header {
46-
width: 100%;
36+
.flex-row {
4737
display: flex;
48-
justify-content: flex-end;
38+
flex-direction: row;
4939
}
5040

51-
#fullscreen-btn {
52-
cursor: pointer;
53-
font-size: 1.25rem;
54-
padding: 0.25rem 0.5rem;
55-
border-radius: var(--radius);
56-
transition: background 0.2s;
41+
.gappy {
42+
gap: var(--gap);
5743
}
5844

59-
#fullscreen-btn:hover {
60-
background: rgba(128, 128, 128, 0.2);
45+
.hourglass {
46+
align-items: center;
47+
width: fit-content;
48+
padding: 1rem;
49+
box-sizing: border-box;
50+
margin: auto;
51+
height: 100vh;
52+
justify-content: center;
6153
}
6254

6355
#hourglass-display {
6456
width: 100%;
6557
display: flex;
6658
flex-direction: column;
6759
align-items: center;
68-
gap: 0.25rem;
69-
background: light-dark(#ffffff, #1b1b1b);
60+
background: var(--tile-background-color);
7061
border-radius: var(--radius);
7162
padding: 1rem;
72-
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
63+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
7364
box-sizing: border-box;
7465
}
7566

76-
.table-row {
77-
display: flex;
78-
justify-content: center;
79-
width: 100%;
80-
}
81-
82-
.table-column {
83-
text-align: center;
84-
}
85-
8667
.timedisplay {
87-
font-family: var(--mono-font);
88-
font-size: clamp(3rem, 10vw, 6rem);
68+
font-size: 10rem;
8969
font-weight: bold;
9070
line-height: 1.1;
91-
width: 8ch; /* Enough for 9999 */
71+
width: 5ch; /* Enough for 9999 */
9272
text-align: center;
9373
}
9474

9575
.label {
96-
font-size: 1rem;
76+
font-size: 2rem;
9777
opacity: 0.7;
9878
margin-bottom: 0.5rem;
9979
}
@@ -107,6 +87,7 @@
10787
font-weight: 500;
10888
transition: background 0.2s;
10989
user-select: none;
90+
font-size: 3rem;
11091
}
11192

11293
.btn:hover {
@@ -117,7 +98,7 @@
11798
margin-top: 0.5rem;
11899
display: flex;
119100
align-items: center;
120-
gap: 0.5rem;
101+
font-size: 2rem;
121102
}
122103

123104
#hourglass-timerequested {
@@ -130,93 +111,33 @@
130111
color: inherit;
131112
}
132113

133-
/* 📱 Fullscreen stacked layout for mobile */
134-
@media (max-width: 600px) {
135-
body, html {
136-
overflow: hidden;
137-
}
138-
139-
.page-content.hourglass {
140-
padding: 0;
141-
height: 100vh;
142-
max-width: none;
143-
width: 100%;
144-
justify-content: space-between;
145-
}
146-
147-
#hourglass-display {
148-
flex-grow: 1;
149-
width: 100%;
150-
border-radius: 0;
151-
padding: 0;
152-
gap: 0;
153-
}
154-
155-
.table-row {
156-
flex-direction: column;
157-
flex: 1 1 50%;
158-
justify-content: center;
159-
}
160-
161-
.table-row:nth-of-type(1),
162-
.table-row:nth-of-type(3) {
163-
height: 50vh;
164-
display: flex;
165-
align-items: center;
166-
justify-content: center;
167-
}
168-
169-
.timedisplay {
170-
font-size: 20vw;
171-
width: 100%;
172-
}
173-
174-
.label {
175-
font-size: 1rem;
176-
text-align: center;
177-
}
178-
179-
.table-row:nth-of-type(5) {
180-
flex-direction: row;
181-
justify-content: center;
182-
padding: 1rem;
183-
}
184-
185-
#hourglass-form {
186-
flex-direction: row;
187-
justify-content: center;
188-
padding: 1rem;
189-
}
190-
}
191-
192114
</style>
193115
</head>
194116
<body>
195117
<div id="main">
196118
<div id="contents">
197119
<audio id="hourglass-beep" src="{{ static_url }}/sounds/timer-beep.mp3" preload="auto"></audio>
198120
<audio id="hourglass-end" src="{{ static_url }}/sounds/timer-end.mp3" preload="auto"></audio>
199-
<div class="page-content hourglass">
200-
<div id="hourglass-header"><div id="fullscreen-btn" title="fullscreen">⛶</div></div>
201-
<div id="hourglass-display" class="table no-borders">
202-
<div class="table-row non-alternating">
203-
<div class="table-column timedisplay" id="hourglass-timeleft"></div>
121+
<div class="hourglass flex-col gappy">
122+
<div id="hourglass-display" class="flex-col gappy">
123+
<div class="flex-row">
124+
<div class="timedisplay" id="hourglass-timeleft"></div>
204125
</div>
205-
<div class="table-row non-alternating label">
206-
<div class="table-column">seconds left</div>
126+
<div class="flex-row label">
127+
<div class="flex-col">seconds left</div>
207128
</div>
208-
<div class="table-row non-alternating">
209-
<div class="table-column timedisplay" id="hourglass-timeelapsed"></div>
129+
<div class="flex-row">
130+
<div class="timedisplay" id="hourglass-timeelapsed"></div>
210131
</div>
211-
<div class="table-row non-alternating label">
212-
<div class="table-column">seconds elapsed</div>
132+
<div class="flex-row label">
133+
<div class="flex-col">seconds elapsed</div>
213134
</div>
214-
<div class="table-row non-alternating">
215-
<div class="table-column btn hourglass-btn" id="hg-control">Start</div>
216-
<div class="table-column btn hourglass-btn" id="hg-flip">Flip</div>
135+
<div class="flex-row gappy">
136+
<div class="btn" id="hg-control">Start</div>
137+
<div class="btn" id="hg-flip">Flip</div>
217138
</div>
218139
</div>
219-
<form id="hourglass-form">
140+
<form id="hourglass-form" class="gappy">
220141
<input inputmode="numeric" id="hourglass-timerequested">seconds
221142
</form>
222143
</div>
@@ -269,15 +190,6 @@
269190
document.getElementById("hg-control").textContent = "Reset";
270191
}
271192

272-
function enterAppMode() {
273-
if (document.fullscreenElement) {
274-
document.exitFullscreen();
275-
} else {
276-
const div = document.getElementsByClassName("page-content")[0];
277-
div.requestFullscreen();
278-
}
279-
};
280-
281193
// primary action taken on click/hitting space
282194
function primaryAction() {
283195
if (timeLeft <= 0 || !currentTimer) {
@@ -300,10 +212,6 @@
300212
document.getElementById("hourglass-timeleft").textContent = 180;
301213
document.getElementById("hourglass-timeelapsed").textContent = 0;
302214

303-
document.getElementById("fullscreen-btn").onclick = function(e) {
304-
e.preventDefault();
305-
enterAppMode();
306-
}
307215
document.getElementById("hourglass-display").onclick = function(e) {
308216
e.preventDefault();
309217
primaryAction();

0 commit comments

Comments
 (0)