1 files changed, 35 insertions, 1 deletions
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;