diff options
| author | Melody Horn <melody@boringcactus.com> | 2021-12-03 23:30:52 -0700 |
|---|---|---|
| committer | Melody Horn <melody@boringcactus.com> | 2021-12-03 23:30:52 -0700 |
| commit | ce5be7f783ac7c6589b501433caafd717c6e119f (patch) | |
| tree | c6827e1c8b4679501d317a8ab6e1f4a2b136dae0 /index.html | |
| parent | 7cc6b6414d30e95e763baadee2f493c8f69329ac (diff) | |
| download | queue-go-brrr-ce5be7f783ac7c6589b501433caafd717c6e119f.tar.gz queue-go-brrr-ce5be7f783ac7c6589b501433caafd717c6e119f.zip | |
swag
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 65 |
1 files changed, 22 insertions, 43 deletions
@@ -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"> |