Add autoscroll toggle checkbox

static/css/base.css

@@ -100,7 +100,7 @@ form input[type="number"] {
     padding: 2px;
 }
 
-form input[type="checkbox"] {
+input[type="checkbox"] {
     -webkit-appearance: none;
     appearance: none;
     background-color: #fff;
@@ -119,7 +119,7 @@ form input[type="checkbox"] {
     place-content: center;
 }
 
-form input[type="checkbox"]::before {
+input[type="checkbox"]::before {
     content: "";
     width: 0.65em;
     height: 0.65em;
@@ -131,11 +131,11 @@ form input[type="checkbox"]::before {
     clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 }
   
-form input[type="checkbox"]:checked::before {
+input[type="checkbox"]:checked::before {
     transform: scale(1);
 }
 
-form input[type="checkbox"]:hover {
+input[type="checkbox"]:hover {
     outline: max(2px, 0.15em) solid currentColor;
     outline-offset: max(2px, 0.15em);
 }

templates/index.html

@@ -25,7 +25,9 @@
                 document.getElementById('console-output').appendChild(log_line);
             }
 
-            document.getElementById('console-output').scrollTop = 999999999999999999999999;
+            if (document.getElementById('autoscroll').checked) {
+                document.getElementById('console-output').scrollTop = 999999999999999999999999;
+            }
         }, 1000);
     </script>
 </head>
@@ -43,6 +45,7 @@
             </div></div>
         </form>
     </div>
+    <div style="display:inline-flex;align-items:baseline;"><label>Autoscroll: </label><input id="autoscroll" type="checkbox" checked></div>
     <div id="console-output" class="align-bottom scrollable">
     </div>