aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzlg <zlg@zlg.space>2024-08-16 07:24:17 -0700
committerzlg <zlg@zlg.space>2024-08-17 01:46:52 -0700
commit0f06c4ac974a388320da4a014a77ef26566b27f0 (patch)
tree30d63829be75c6a393a8fcf3f73e4ce25e681fee
parentUpdate footer (diff)
downloadzsst-0f06c4ac974a388320da4a014a77ef26566b27f0.tar.gz
zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.tar.bz2
zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.tar.xz
zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.zip
Add progress bar countdown style
-rw-r--r--make_timer.html9
-rw-r--r--timer.css12
-rw-r--r--timer.html5
-rw-r--r--timer.js36
4 files changed, 55 insertions, 7 deletions
diff --git a/make_timer.html b/make_timer.html
index d625767..3a6e178 100644
--- a/make_timer.html
+++ b/make_timer.html
@@ -18,6 +18,11 @@
<article class="timer_maker">
<form action="./timer.html" method="get">
<section>
+ <label for="cdstyle">Countdown Style</label>
+ <input type="radio" id="cdstyle" name="cdstyle" value="standard">Standard Countdown</input>
+ <input type="radio" id="cdstyle" name="cdstyle" value="bar">Progress Bar</input>
+ </section>
+ <section>
<label for="duration">Countdown Duration, in seconds</label>
<input name="duration" type="number" id="duration" min="10" value="60" required>
</section>
@@ -33,6 +38,10 @@
<label for="f_color">Font Color</label>
<input name="f_color" type="color" id="f_color">
</section>
+ <section>
+ <label for="b_color">Bar Color</label>
+ <input name="b_color" type="color" id="b_color">
+ </section>
<section class="bottom">
<input type="submit" value="Make My Timer">
<input type="reset" value="Reset to Defaults">
diff --git a/timer.css b/timer.css
index 253d895..2285a38 100644
--- a/timer.css
+++ b/timer.css
@@ -9,7 +9,7 @@ body {
}
#page {
- font-size: 85vh;
+ font-size: 30vh;
/* other font sizes, depending on CEF support */
/* font-size: min(30vmin, max(90vh, calc(100vw * 0.40))); */
/* font-size: clamp(10vmin, 90vh, calc(100vw * 0.40)); */
@@ -28,3 +28,13 @@ body {
height: 100%;
margin: 0 auto;
}
+
+#bar {
+ height: 20vh;
+}
+
+#progress {
+ background: #000;
+ width: 0%;
+ height: inherit;
+}
diff --git a/timer.html b/timer.html
index 6df6a65..3c812ad 100644
--- a/timer.html
+++ b/timer.html
@@ -21,11 +21,6 @@ body elements.
-->
<body onload="setupCountdown();">
<div id="page">
- <div id="countdown">
- <div id="minutes">00</div>
- <div id="separator">:</div>
- <div id="seconds">00</div>
- </div>
</div>
<script src="./timer.js" type="text/javascript"></script>
</body>
diff --git a/timer.js b/timer.js
index e2e9380..f625094 100644
--- a/timer.js
+++ b/timer.js
@@ -1,7 +1,9 @@
let params;
let cur_seconds = null;
let timer_id;
-const cd = document.getElementById("countdown");
+let cd;
+
+const page = document.getElementById("page");
function setupCountdown() {
params = new URLSearchParams(document.location.search);
@@ -9,12 +11,37 @@ function setupCountdown() {
console.log(`${key}: ${value}`);
}
+ switch (params.get("cdstyle")) {
+ case "standard":
+ page.innerHTML = `
+ <div id="countdown">
+ <div id="minutes">00</div>
+ <div id="separator">:</div>
+ <div id="seconds">00</div>
+ </div>
+ `;
+ break;
+ case "bar":
+ page.innerHTML = `
+ <div id="bar"><div id="progress"></div>
+ <div id="countdown">
+ <div id="minutes">00</div>
+ <div id="separator">:</div>
+ <div id="seconds">00</div>
+ </div>
+ `;
+ break;
+ }
+ cd = document.getElementById("countdown");
cur_seconds = parseInt(params.get("duration"));
if (params.get("f_family") !== "") {
cd.style.fontFamily = params.get("f_family");
}
cd.style.color = params.get("f_color");
+ if (params.get("cdstyle") == "bar") {
+ document.getElementById("progress").style.backgroundColor = params.get("b_color");
+ }
draw();
timer_id = window.setInterval(tick, 1000);
@@ -33,6 +60,9 @@ function tick() {
}
cur_seconds--;
draw();
+ if (params.get("cdstyle") == "bar") {
+ draw_bar();
+ }
}
function draw() {
@@ -40,6 +70,10 @@ function draw() {
document.getElementById("seconds").textContent = zero_pad((cur_seconds % 60));
}
+function draw_bar() {
+ document.getElementById("progress").style.width = (((params.get("duration") - cur_seconds) / params.get("duration")) * 100) + "vw";
+}
+
function zero_pad(num) {
if (num < 10) {
return "0"+num;