update to browser

Author: spite

css/styles.css

@@ -60,12 +60,20 @@ header {
 
 .orange:hover {
   background-color: #FF983C;
+  color: #CD6509;
 }
 
-canvas {
-  box-shadow: 0 0 5px rgba(0,0,0,.5);
+.green {
+  text-shadow: 0 -1px 0 #096d14;
+  background-color: rgb(15, 145, 30);
+  box-shadow: 0px 5px 0px 0px #096d14;
 }
 
-.back, .next {
-  background-color: rgb(15, 145, 30);
+.green:hover {
+  background-color: #26af36;
+  color: #096d14;
 }
+
+canvas {
+  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
+}

index.html

@@ -14,30 +14,33 @@
     <h1>Looper</h1>
     <h2>A tool to create looperinos · <a href="https://github.com/spite/looper" >GitHub</a> | <b>Chrome and Safari Tech Preview only</b></h2>
     <div class="recordPanel">
-      <a href="#" class="btn orange" id="start">Record</a>
-    </div>
-    
-    <div>
-      <button class="btn back" style="margin-right: 4px" onclick="back()" >Before</button>
-      <button class="btn next" onclick="next()" >Next</button>
+      <a href="#" class="btn orange" id="start">⚫ Record</a>
+      <a href="#" id="backButton" class="btn green">◀&nbsp;&nbsp;Previous</a>
+      <a href="#" id="nextButton" class="btn green">Next&nbsp;&nbsp;▶</a>
     </div>
   </header>
-  
   <script>
-    function getIndex() {
-      return parseInt(window.location.hash.replace('#', ''));
-    }
-    function back() {
-      let index = getIndex();  
+  function getIndex() {
+    return parseInt(window.location.hash.replace('#', ''));
+  }
+
+  function prev(e) {
+    let index = getIndex();
+
+    // beginning, dont do anything
+    if (index === 1) return;
+    window.location.hash = `${--index}`;
+    e.preventDefault();
+  }
+
+  function next(e) {
+    let index = getIndex();
+    window.location.hash = ++index;
+    e.preventDefault();
+  }
 
-      // beginning, dont do anything
-      if (index === 1) return;
-      window.location.hash = --index;
-    }
-    function next() {
-      let index = getIndex();
-      window.location.hash = ++index;
-    }
+  document.getElementById('backButton').addEventListener('click', (e) => prev(e));
+  document.getElementById('nextButton').addEventListener('click', (e) => next(e));
   </script>
   <script src="js/CCapture.all.min.js"></script>
   <script async type="module" src="modules/looper.js"></script>

modules/looper.js

@@ -11,7 +11,11 @@ async function init() {
 
   async function reload() {
     if (module && module.canvas) {
-      document.body.removeChild(module.canvas);
+      try {
+        document.body.removeChild(module.canvas);
+      } catch (e) {
+
+      }
     }
     module = await loadModule();
   }