aboutsummaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorMelody Horn <melody@boringcactus.com>2021-12-03 23:30:52 -0700
committerMelody Horn <melody@boringcactus.com>2021-12-03 23:30:52 -0700
commitce5be7f783ac7c6589b501433caafd717c6e119f (patch)
treec6827e1c8b4679501d317a8ab6e1f4a2b136dae0 /index.html
parent7cc6b6414d30e95e763baadee2f493c8f69329ac (diff)
downloadqueue-go-brrr-ce5be7f783ac7c6589b501433caafd717c6e119f.tar.gz
queue-go-brrr-ce5be7f783ac7c6589b501433caafd717c6e119f.zip
swag
Diffstat (limited to 'index.html')
-rw-r--r--index.html65
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">