1 files changed, 91 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b7c0153
--- /dev/null
+++ b/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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;
+    }
+
+    #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);
+    }
+
+    main {
+        font-size: 16px;
+        font-family: "Lucida Grande", "Arial", sans-serif;
+        width: 760px;
+    }
+    </style>
+</head>
+<body>
+<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>
+    <div class="output">
+        <img id="photo" alt="The screen capture will appear in this box.">
+    </div>
+</main>
+<!-- Note the usage of `type=module` here as this is an ES6 module -->
+<script type="module">
+    // Use ES module import syntax to import functionality from the module
+    // that we have compiled.
+    //
+    // Note that the `default` import is an initialization function which
+    // will "boot" the module and make it ready to use. Currently browsers
+    // don't support natively imported WebAssembly as an ES module, but
+    // eventually the manual initialization won't be required!
+    import init, { boot } from './pkg/queue_go_brrr.js';
+
+    async function run() {
+        await init();
+
+        const bootButton = document.getElementById('bootbutton');
+        bootButton.addEventListener('click', () => {
+            bootButton.remove();
+            boot();
+        });
+    }
+
+    run();
+</script>
+</body>
+</html>
+\ No newline at end of file