1 files changed, 22 insertions, 43 deletions
diff --git a/index.html b/index.html
index b7c0153..d7d8f95 100644
--- a/index.html
+++ b/index.html
@@ -4,65 +4,44 @@
     <meta charset="UTF-8">
     <title>queue go brrr</title>
     <style>
-    #video {
-        border: 1px solid black;
-        box-shadow: 2px 2px 3px black;
-        height:240px;
-    }
-
-    #photo {
-        border: 1px solid black;
-        box-shadow: 2px 2px 3px black;
-        height:240px;
-    }
-
     #canvas {
         display:none;
     }
 
-    .camera {
-        width: 340px;
-        display:inline-block;
-    }
-
-    .output {
-        width: 340px;
-        display:inline-block;
+    video, img {
+        max-width: 100%;
     }
 
-    #startbutton {
-        display:block;
-        position:relative;
-        margin-left:auto;
-        margin-right:auto;
-        bottom:32px;
-        background-color: rgba(0, 150, 0, 0.5);
-        border: 1px solid rgba(255, 255, 255, 0.7);
-        box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
-        font-size: 14px;
-        font-family: "Lucida Grande", "Arial", sans-serif;
-        color: rgba(255, 255, 255, 1.0);
+    #video-preview-container {
+        position: relative;
     }
 
-    main {
-        font-size: 16px;
-        font-family: "Lucida Grande", "Arial", sans-serif;
-        width: 760px;
+    #target-marker {
+        position: absolute;
+        border: 1px solid red;
+        pointer-events: none;
     }
     </style>
 </head>
 <body>
+<canvas id="canvas">
+</canvas>
 <main>
-    <button id="bootbutton">Start!</button>
-    <div class="camera">
-        <video id="video">Video stream not available.</video>
-        <button id="startbutton">Take photo</button>
-    </div>
-    <canvas id="canvas">
-    </canvas>
+    <h1>queue go brrr<span id="eta"></span></h1>
+    <h2>For tracking your Login Queue (Extreme) raid progression.</h2>
+    <p>
+        Share your FFXIV window, and then this tool will figure out how much longer you probably have to wait.
+    </p>
+    <h2><button id="bootbutton">Start!</button></h2>
     <div class="output">
+        <h3>Queue Position Preview (it looks like this says <span id="current-queue-position">something once you hit the button</span>)</h3>
         <img id="photo" alt="The screen capture will appear in this box.">
     </div>
+    <h3>Live Window View (click to move the queue position box if it's misaligned)</h3>
+    <div id="video-preview-container">
+        <video id="video">Video stream not available.</video>
+        <div id="target-marker"></div>
+    </div>
 </main>
 <!-- Note the usage of `type=module` here as this is an ES6 module -->
 <script type="module">