aboutsummaryrefslogtreecommitdiff
path: root/timer.html
diff options
context:
space:
mode:
authorzlg <zlg@zlg.space>2023-04-01 23:41:02 -0700
committerzlg <zlg@zlg.space>2023-04-01 23:41:02 -0700
commit776605926111b462bba2d397b150b0447da8b6d9 (patch)
tree662e432e52faf395dcb6921971e92f4cdbcfa19d /timer.html
downloadzsst-776605926111b462bba2d397b150b0447da8b6d9.tar.gz
zsst-776605926111b462bba2d397b150b0447da8b6d9.tar.bz2
zsst-776605926111b462bba2d397b150b0447da8b6d9.tar.xz
zsst-776605926111b462bba2d397b150b0447da8b6d9.zip
Initial commit
This is a simple streaming timer meant to be hooked up to OBS and customized using a separate CSS file.
Diffstat (limited to 'timer.html')
-rw-r--r--timer.html31
1 files changed, 31 insertions, 0 deletions
diff --git a/timer.html b/timer.html
new file mode 100644
index 0000000..6df6a65
--- /dev/null
+++ b/timer.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title></title>
+ </head>
+ <link type="text/css" rel="stylesheet" href="./timer.css">
+ <style type="text/css">
+ /* just maximize the canvas area and set rem to 10px. */
+ html { margin: 0; padding: 0; font-size: 16px;}
+ body { margin: 0; padding: 0; font-size: 62.5%;}
+ </style>
+</html>
+<!--
+This file is meant to have custom CSS applied to it, via adding it as a source
+in OBS and specifying custom CSS on the Source. This allows you full control
+over what your countdown will look like, with little upkeep cost or outside
+dependency.
+
+You can count on a blank canvas for this, with sane defaults for the html and
+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>