--- a
+++ b/index.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="/niivue.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <title>AI powered brain segmentation</title>
+</head>
+
+<body>
+  <header>
+    <label for="clipCheck">Clip Plane</label>
+    <input type="checkbox" id="clipCheck" unchecked />
+    <label for="opacitySlider0">Background Opacity</label>
+    <input type="range" min="0" max="255" value="255" class="slider" id="opacitySlider0" />
+    &nbsp;
+    <label for="opacitySlider1">Overlay Opacity</label>
+    <input type="range" min="0" max="255" value="128" class="slider" id="opacitySlider1" />
+    &nbsp;
+    <label for="modelSelect">Segmentation Model</label>
+    <select id="modelSelect">
+    </select>
+    &nbsp;
+    <button id="saveImgBtn">Save Segmentation</button>
+    &nbsp;
+    <button id="saveSceneBtn">Save Scene</button>
+    &nbsp;
+    <label for="workerCheck">Use Webworker</label>
+    <input type="checkbox" title="webworkers are faster but not supported by all browsers" id="workerCheck" checked />
+    &nbsp;
+    <label for="penDrop">Draw</label>
+    <select id="penDrop">
+      <option value="-1">Off</option>
+      <option value="2">On</option>
+      <option value="10">Filled</option>
+      <option value="0">Erase</option>
+    </select>
+    <select id="drawDrop">
+      <option value="0">Undo</option>
+      <option value="1">Append</option>
+      <option value="2">Remove</option>
+    </select>
+    &nbsp;
+    <label for="dragMode">Drag Mode</label>
+    <select id="dragMode">
+      <option>none</option>
+      <option>contrast</option>
+      <option>measurement</option>
+      <option selected>pan/zoom</option>
+      <option>slicer3D</option>
+    </select>
+    &nbsp;
+    <button id="diagnosticsBtn">Diagnostics</button>
+    &nbsp;
+    <button id="aboutBtn">About</button>
+  </header>
+  <main id="canvas-container">
+    <canvas id="gl1"></canvas>
+  </main>
+  <footer>
+    <div class="footer">
+      <table class="footer">
+        <tr>
+          <th id="location">Drag and Drop any NIfTI image</th>
+          <th><progress id="modelProgress" value="0" max="100"> 32% </progress></th>
+          <th>
+            <!-- important to use class footer here -->
+            <div class="footer" id="memstatus" style="color: green">Memory OK</div>
+          </th>
+          <th>
+            <a href="https://github.com/neuroneural/brainchop" target="_blank" style="text-decoration:none">
+              <div class="github-star">
+                <div class="star-button">
+                  <i class="fa-brands fa-github" style="color: #000000;"></i>
+                  <span>Star</span>
+                </div>
+                <div id="star-count">0</div>
+              </div>
+            </a>
+          </th>
+        </tr>
+      </table>
+    </div>
+  </footer>
+  <script type="module" src="/main.js"></script>
+</body>
+
+</html>