From b9e49e3ba1ff471dc6a8d1896c2701a5f6b11338 Mon Sep 17 00:00:00 2001
From: Ayush Gaggar <agaggar@u.northwestern.edu>
Date: Fri, 4 Oct 2024 10:49:40 -0500
Subject: [PATCH] moving slider code to before end of body tag

---
 index.html           | 37 +++++++++++++++++++------------------
 static/css/index.css | 10 +++++-----
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 904737b..96b0e60 100644
--- 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
index 77d4533..df06149 100644
--- 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;
 }
\ No newline at end of file