Initial commit

This is a simple streaming timer meant to be hooked up to OBS and
customized using a separate CSS file.

1 files changed, 72 insertions, 0 deletions

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..96d8fbd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,72 @@
+# ZSST – ZLG's Simple Stream Timer
+
+Ever since `streamerific.com` went down, I was looking for a new countdown
+widget to add to my streams. Since I was *also* learning Javascript, it was a
+good opportunity to produce a countdown timer *on my own*, and import it into
+OBS as a Browser Source.
+
+## Usage
+
+Make your timer with the `make_timer.html` file. It contains a form that gives 
+you some basic options for the timer's behavior, and takes you to `timer.html`, 
+pre-populated with arguments to its script via `GET` query data.
+
+The `timer.html` page supports these query variables:
+
+* `duration`, which is how long the timer should last, in seconds.
+* `end_text`, which will display after the timer ends.
+* `f_family`, the font used by the timer.
+* `f_color`, a 6-digit hexadecimal code for the text color of the timer.
+
+Since this tool uses GET data / query strings, it doesn't need a server, and you 
+don't need to use `make_timer.html` if you know which options you want to use 
+and are comfortable editing query strings.
+
+### Initial Setup
+
+- Navigate to the `make_timer.html` file via your browser.
+- Customize your timer and generate it by clicking "Make My Timer".
+- Copy the URL in the address bar on the page where your timer is ticking.
+- Create a CSS file somewhere that you can style your countdown with.
+- Create a new <strong>Browser Source</strong> in OBS.
+- Paste the URL you copied from your main browser into the URL field.
+- Under <strong>Custom CSS</strong>, be sure to point it to the new CSS file you 
+  started.
+- Set the browser viewport dimensions to values compatible with what you need for 
+  your stream.
+- Ensure "Reload on activate" is enabled, so you can hide and reshow your 
+  countdown in order to restart it.
+- Enjoy customizing your new widget!
+
+### Styling your Timer
+
+Styling timers with CSS is pretty simple. Each time you edit the CSS file, 
+you'll need to either refresh your browser window (if pointed to the timer 
+page), or refresh the Browser Source in OBS by toggling its visibility. This is 
+the same workflow used by zlg to develop the timer.
+
+The page's structure is extremely straightforward:
+
+```
+div#page
+ └─ div#countdown
+     ├─ div#minutes
+     ├─ div#separator
+     └─ div#seconds
+```
+
+With the above structure, it should be adaptable to any countdown needs you 
+have. I've used it to great effect with flexbox and responsive layout design.
+
+## Copyright
+
+ZSST is Copyright © 2023 zlg. It is licensed under the Affero GNU General Public 
+License, version 3. Further details concerning the distribution and use of this 
+software can be found in this project's accompanying `LICENSE` file.
+
+`SPDX-License-Identifier: AGPL-3-only`
+
+## Contact
+
+Please [reach out to me](https://zlg.space) for any merge requests, constructive 
+feedback, or even just a shoutout, if you enjoy using this widget.