From 01acbfa4445a7534386108ce6df6de4d205e7323 Mon Sep 17 00:00:00 2001
From: Trysdyn Black <trysdyn@voidfox.com>
Date: Tue, 8 Nov 2022 16:45:42 -0800
Subject: [PATCH] Add index.html

---
 index.html | 170 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 170 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a7cd59a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src='https://player.twitch.tv/js/embed/v1.js'></script>
+        <script src='js/live.js'></script>
+        <script src='js/timer.js'></script>
+        <link rel='stylesheet' type='text/css' href='img/main.css' />
+        <link id='css_4x3' rel='stylesheet' type='text/css' href='img/4x3.css' />
+        <link id='css_16x9' rel='stylesheet' type='text/css' href='img/16x9.css' disabled />
+    </head>
+    <body>
+        <div id='livedisplay'>
+            <img class='backdrop' id='backdrop_4x3' src='img/4x3.png' />
+            <img class='backdrop' id='backdrop_16x9' src='img/16x9.png' />
+            <div id='game'>Game Name</div>
+            <div class='ratname' id='rat0name'>Labrat 1</div>
+            <div class='ratname' id='rat1name'>Labrat 2</div>
+            <div class='ratname' id='rat2name'>Labrat 3</div>
+            <div class='ratname' id='rat3name'>Labrat 4</div>
+            <div class='ratpronouns' id='rat0pronouns'>they/them</div>
+            <div class='ratpronouns' id='rat1pronouns'>they/them</div>
+            <div class='ratpronouns' id='rat2pronouns'>they/them</div>
+            <div class='ratpronouns' id='rat3pronouns'>they/them</div>
+            <img class='ratspeaker' id='rat0speaker' src='img/speaker.png' />
+            <img class='ratspeaker' id='rat1speaker' src='img/speaker.png' />
+            <img class='ratspeaker' id='rat2speaker' src='img/speaker.png' />
+            <img class='ratspeaker' id='rat3speaker' src='img/speaker.png' />
+            <div id='scientist'>Lead Scientist:</div>
+            <div id='timer'>0:00:00</div>
+            <div class='embed' id='embed0'></div>
+            <div class='embed' id='embed1'></div>
+            <div class='embed' id='embed2'></div>
+            <div class='embed' id='embed3'></div>
+        </div>
+        <div class='controls'>
+            <table>
+                <tr>
+                    <!-- Global Controls -->
+                    Overlay: 
+                    <button type='button' name='go_4x3' onclick='set_state(false);'>4x3</button>
+                    <button type='button' name='go_16x9' onclick='set_state(true);'>16x9</button>
+                    Volume: 
+                    <input type='range' id='vol_slider' min=0 max=100 value=100 />
+                    <td>
+                        <h3>Global Settings</h3>
+                        <p>
+                            <label for='gamename_text'>Game Name</label>
+                            <input id='gamename_text' type='text' />
+                        </p>
+                        <p>
+                            <label for='scientist_text'>Scientist</label>
+                            <input id='scientist_text' type='text' />
+                        </p>
+                        <p>
+                            <label></label>
+                            <button type='button' name='update_global' onclick='update_globals();'>Update</button>
+                            <button type='button' name='update_all' onclick='update_all();'>Update All</button>
+                        </p>
+                    </td>
+                    <!-- Timer Controls -->
+                    <td>
+                        <h3>Timer Controls</h3>
+                        <p>
+                            <input type='number' id='timer_h' min=0 max=99 size=2 value=1 /> H
+                            <input type='number' id='timer_m' min=0 max=59 size=2 value=0 /> M
+                            <input type='number' id='timer_s' min=0 max=59 size=2 value=0 /> S
+                        </p>
+                        <p>
+                            <button type='button' name='timer_reset' onclick='reset_timer();'>Reset</button>
+                            <button type='button' name='timer_start' onclick='start_timer();'>Start</button>
+                            <button type='button' name='timer_reset' onclick='stop_timer();'>Stop</button>
+                        </p>
+                    </td>
+                </tr>
+                <tr>
+                    <!-- Top Left Control -->
+                    <td>
+                        <h3>Top-Left Stream</h3>
+                        <p>
+                            <label for='embed0_stream'>Twitch Stream</label>
+                            <input id='embed0_stream' type='text' />
+                        </p>
+                        <p>
+                            <label for='embed0_name'>Labrat Name</label>
+                            <input id='embed0_name' type='text' />
+                        </p>
+                        <p>
+                            <label for='embed0_pronouns'>Labrat Pronouns</label>
+                            <input id='embed0_pronouns' type='text' />
+                        </p>
+                        <p>
+                            <label></label>
+                            <button type='button' name='update' onclick='update_embed(0);'>Update</button>
+                            <button type='button' name='dump' onclick='dump_stream(0);'>Dump</button>
+                            <button type='button' name='focus' onclick='focus_audio(0);'>Audio</button>
+                        </p>
+                    </td>
+                    <!-- Top Right Control -->
+                    <td>
+                        <h3>Top-Right Stream</h3>
+                        <p>
+                            <label for='embed1_stream'>Twitch Stream</label>
+                            <input id='embed1_stream' type='text' />
+                        </p>
+                        <p>
+                            <label for='embed1_name'>Labrat Name</label>
+                            <input id='embed1_name' type='text' />
+                        </p>
+                        <p>
+                            <label for='embed1_pronouns'>Labrat Pronouns</label>
+                            <input id='embed1_pronouns' type='text' />
+                        </p>
+                        <p>
+                            <label></label>
+                            <button type='button' name='update' onclick='update_embed(1);'>Update</button>
+                            <button type='button' name='dump' onclick='dump_stream(1);'>Dump</button>
+                            <button type='button' name='focus' onclick='focus_audio(1);'>Audio</button>
+                        </p>
+                    </td>
+                </tr>
+                <tr>
+                    <!-- Bottom Left Control -->
+                    <td>
+                        <h3>Bottom-Left Stream</h3>
+                        <p>
+                            <label for='embed2_stream'>Twitch Stream</label>
+                            <input id='embed2_stream' type='text' />
+                        </p>
+                        <p>
+                            <label for='embed2_name'>Labrat Name</label>
+                            <input id='embed2_name' type='text' />
+                        </p>
+                        <p>
+                            <label for='embed2_pronouns'>Labrat Pronouns</label>
+                            <input id='embed2_pronouns' type='text' />
+                        </p>
+                        <p>
+                            <label></label>
+                            <button type='button' name='update' onclick='update_embed(2);'>Update</button>
+                            <button type='button' name='dump' onclick='dump_stream(2);'>Dump</button>
+                            <button type='button' name='focus' onclick='focus_audio(2);'>Audio</button>
+                        </p>
+                    </td>
+                    <!-- Bottom Right Control -->
+                    <td>
+                        <h3>Bottom-Right Stream</h3>
+                        <p>
+                            <label for='embed3_stream'>Twitch Stream</label>
+                            <input id='embed3_stream' type='text' />
+                        </p>
+                        <p>
+                            <label for='embed3_name'>Labrat Name</label>
+                            <input id='embed3_name' type='text' />
+                        </p>
+                        <p>
+                            <label for='embed3_pronouns'>Labrat Pronouns</label>
+                            <input id='embed3_pronouns' type='text' />
+                        </p>
+                        <p>
+                            <label></label>
+                            <button type='button' name='update' onclick='update_embed(3);'>Update</button>
+                            <button type='button' name='dump' onclick='dump_stream(3);'>Dump</button>
+                            <button type='button' name='focus' onclick='focus_audio(3);'>Audio</button>
+                        </p>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </body>
+</html>
