config.html

<h1>Sugoi Streamathon Timer</h1>
<div id="status">Loading...</div>
<br>
<form id="config">
    <label>
        Starting Time:
        <input type="text" name="start-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="8:00:00" required>
    </label>
    <br>
    <label>
        <input type="checkbox" name="max-time-enabled" checked>
        Maximum Time:
        <input type="text" name="max-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="12:00:00" required>
    </label>
    <br>
    <label>
        <input type="checkbox" name="sub1000-time-enabled" checked>
        Time Per T1 Sub:
        <input type="text" name="sub1000-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="500" required>
    </label>
    <br>
    <label>
        <input type="checkbox" name="sub2000-time-enabled" checked>
        Time Per T2 Sub:
        <input type="text" name="sub2000-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1000" required>
    </label>
    <br>
    <label>
        <input type="checkbox" name="sub3000-time-enabled" checked>
        Time Per T3 Sub:
        <input type="text" name="sub3000-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="2500" required>
    </label>
    <br>
    <label>
        <input type="checkbox" name="bit-time-enabled" checked>
        Time Per Bit:
        <input type="text" name="bit-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1" required>
    </label>
    <br>
    <label>
        <input type="checkbox" name="follow-time-enabled" checked>
        Time Per Follow:
        <input type="text" name="follow-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1:00" required>
    </label>
    <br>
    <label>
        <input type="checkbox" name="raid-time-enabled" checked>
        Time Per Raid:
        <input type="text" name="raid-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="10:00" required>
    </label>
    <br>
    <label>
        <input type="checkbox" name="charity-time-enabled" checked>
        Time Per Charity Cent:
        <input type="text" name="charity-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1" required>
    </label>
    <br>
    <br>
    <label>
        StreamElements Overlay Token:
        <input type="text" name="streamelements-token">
    </label>
    <br>
    <label>
        <input type="checkbox" name="tip-time-enabled" checked>
        Time Per Tip Cent:
        <input type="text" name="tip-time" pattern="[\d.\d:]+" placeholder="HH:MM:SS" value="1">
    </label>
    <br>
    <br>
    <button type="submit">Save</button>
    <button type="reset">Defaults</button>
    <a id="timer-link" href="index.html" target="_blank">Browser Source</a>
    <div>
        <h3>Chat Commands for Moderators:</h3>
        !subathon start <br>
        !subathon pause <br>
        !subathon add 1:0:0 <br>
        !subathon reset
    </div>
</form>
<style>
    * {
        font-family: sans-serif;
    }
    ::placeholder {
        color: lightgray;
    }
    fieldset {
        border: none;
        margin: 0;
        padding: 0;
    }
    iframe {
        overflow: hidden;
    }
</style>
<script type="module" src="js/config.js"></script>