Add 'labeled_bar' style

This style is similar to the Persona 5-inspired style, but isn't as
purpose-built.

3 files changed, 23 insertions, 2 deletions

diff --git a/make_timer.html b/make_timer.html
index 173b884..bfa7098 100644
--- a/make_timer.html
+++ b/make_timer.html
@@ -22,6 +22,7 @@
 						<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>
+						<input type="radio" id="cdstyle" name="cdstyle" value="labeled_bar">Labeled Bar</input>
 						<input type="radio" id="cdstyle" name="cdstyle" value="p5">Persona 5</input>
 					</section>
 					<section>
@@ -29,6 +30,10 @@
 						<input name="duration" type="number" id="duration" min="10" value="60" required>
 					</section>
 					<section>
+						<label for="label_text">Text to Display Above Countdown (used in Labeled Bar)</label>
+						<input name="label_text" type="text" id="end_text">
+					</section>
+					<section>
 						<label for="end_text">Text to Display at End of Countdown</label>
 						<input name="end_text" type="text" id="end_text">
 					</section>
diff --git a/timer.css b/timer.css
index 4fac85f..2299a15 100644
--- a/timer.css
+++ b/timer.css
@@ -16,6 +16,10 @@ body {
 	line-height: 1.1;
 }
 
+#prompt {
+	text-align: center;
+}
+
 #countdown {
 	box-sizing: border-box;
 	display: flex;
diff --git a/timer.js b/timer.js
index c947036..c40bd4b 100644
--- a/timer.js
+++ b/timer.js
@@ -21,6 +21,18 @@ function setupCountdown() {
 			</div>
 			`;
 			break;
+		case "labeled_bar":
+			var label_text = params.get("label_text");
+			page.innerHTML = `
+			<div id="prompt">${label_text}</div>
+			<div id="bar"><div id="progress"></div></div>
+			<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>
@@ -50,7 +62,7 @@ function setupCountdown() {
 		cd.style.fontFamily = params.get("f_family");
 	}
 	cd.style.color = params.get("f_color");
-	if (params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
+	if (params.get("cdstyle") == "labeled_bar" || params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
 		document.getElementById("progress").style.backgroundColor = params.get("b_color");
 	}
 
@@ -72,7 +84,7 @@ function tick() {
 	}
 	cur_seconds--;
 	draw();
-	if (params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
+	if (params.get("cdstyle") == "labeled_bar" || params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
 		draw_bar();
 	}
 }