moving slider code to before end of body tag

MurpheyLab · Oct 4, 2024 · b9e49e3 · b9e49e3
1 parent 968b56a
commit b9e49e3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -223,25 +223,16 @@ <h2 class="title is-3">Abstract</h2>
             <h2 class="title is-3">See how our augmentation compares with others!</h2>
           </div>
         </div>
-      </div>
-      <div class='img-container'>
-        <div class="img-in-container background-img" style="background-image: url(./static/images/ours_dozer.png); background-repeat: no-repeat;" id="bgImg"></div>
-
-        <div class='img-in-container foreground-img' style="background-image: url(./static/images/fisher_dozer.png); background-repeat: no-repeat;" id="fgImg"></div>
-
-        <input type="range" min="0" max="100" value="50" class="img-slider" id="imgSlider">
-        <div class="subtitle top-left">FisherRF</div>
-        <div class="subtitle top-right">Ours</div>
-
-        <script>
-          var slider = document.getElementById("imgSlider");
-          var fg_img = document.getElementById("fgImg");
-          var bg_img = document.getElementById("bgImg");
+        <!-- TODO: turn this into a carousel? -->
+        <div class='img-container'>
+          <div class="img-in-container background-img" style="background-image: url(./static/images/ours_dozer.png); background-repeat: no-repeat;" id="bgImg"></div>
+
+          <div class='img-in-container foreground-img' style="background-image: url(./static/images/fisher_dozer.png); background-repeat: no-repeat;" id="fgImg"></div>
 
-          slider.oninput = function() {
-            fg_img.style.width = slider.value + "%";
-          }
-        </script>
+          <input type="range" min="0" max="100" value="50" class="img-slider" id="imgSlider">
+          <div class="subtitle top-left">FisherRF</div>
+          <div class="subtitle top-right">Ours</div>
+        </div>
       </div>
     </section>
 
@@ -577,5 +568,15 @@ <h2 class="title">BibTeX</h2>
   </div>
 </footer>
 
+<script>
+  var slider = document.getElementById("imgSlider");
+  var fg_img = document.getElementById("fgImg");
+  var bg_img = document.getElementById("bgImg");
+
+  slider.oninput = function() {
+    fg_img.style.width = slider.value + "%";
+  }
+</script>
+
 </body>
 </html>
diff --git a/static/css/index.css b/static/css/index.css
@@ -212,7 +212,7 @@ body {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
-  height: 100%;
+  height: 90%;
   background: rgba(242, 242, 242, 0.0);
   outline: none;
   margin: 0;
@@ -238,11 +238,11 @@ body {
 
 .top-left {
   position: absolute;
-  top: 8px;
-  left: 16px;
+  top: 12px;
+  left: 20px;
 }
 .top-right {
   position: absolute;
-  top: 8px;
-  right: 16px;
+  top: 12px;
+  right: 20px;
 }