From 9d946beb00119c6798145bd142d389e12527c283 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Fri, 26 Jul 2024 08:50:00 +0000
Subject: [PATCH] Update 2 files

- /wiki/pages/attributions.html
- /wiki/layout.html
---
 wiki/layout.html             | 126 ++++++++++++++++++++++++-----------
 wiki/pages/attributions.html |   2 +
 2 files changed, 89 insertions(+), 39 deletions(-)

diff --git a/wiki/layout.html b/wiki/layout.html
index 10cf5f11..32063191 100644
--- a/wiki/layout.html
+++ b/wiki/layout.html
@@ -92,30 +92,61 @@
       }
 
       .progress-container {
-      position: fixed;
-      left: 25px;  
-      bottom: 160px;
-      width: 60px;
-      height: 60px;
-      z-index: 1000;  
+        position: fixed;
+        left: 25px;  
+        bottom: 160px;
+        width: 60px;
+        height: 60px;
+        z-index: 1000;  
       }
 
       .progress-bar-circle {
-      transform: rotate(-90deg);
+        transform: rotate(-90deg);
       }
+
       .progress-circle {
-      stroke: hsl(17, 100%, 50%);
-      stroke-linecap: round;
-      transition: stroke-dashoffset 0.3s;
+        stroke: hsl(17, 100%, 50%);
+        stroke-linecap: round;
+        transition: stroke-dashoffset 0.3s;
       }
+
       .progress-text {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 12px;
-      font-weight: bold;
-      color: hsl(17, 100%, 50%);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 12px;
+        font-weight: bold;
+        color: hsl(17, 100%, 50%);
+      }
+
+      .back-to-top {
+        position: fixed;
+        left: 95px;  /* Positioned to the right of the progress bar */
+        bottom: 180px;
+        width: 40px;
+        height: 40px;
+        background-color: hsl(17, 100%, 50%);
+        border: none;
+        border-radius: 50%;
+        color: white;
+        font-size: 20px;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: opacity 0.3s, visibility 0.3s;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      .back-to-top.show {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .back-to-top:hover {
+        background-color: hsl(17, 100%, 40%);
       }
 
       .team-logo {
@@ -172,30 +203,47 @@
 
   <!-- Bootstrap Bundle with Popper -->
   <script src="{{ url_for('static', filename = 'bootstrap.bundle.min.js') }}"></script>
+
   <script>
     document.addEventListener('DOMContentLoaded', function() {
-      var circle = document.querySelector('.progress-circle');
-      var radius = circle.r.baseVal.value;
-      var circumference = radius * 2 * Math.PI;
-      
-      circle.style.strokeDasharray = `${circumference} ${circumference}`;
-      circle.style.strokeDashoffset = circumference;
-      
-      function setProgress(percent) {
-        const offset = circumference - (percent / 100) * circumference;
-        circle.style.strokeDashoffset = offset;
-        document.querySelector('.progress-text').textContent = Math.round(percent) + '%';
-      }
-      
-      function handleScroll() {
-        var winScroll = document.documentElement.scrollTop;
-        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-        var scrolled = (winScroll / height) * 100;
-        setProgress(scrolled);
-      }
-      
-      window.addEventListener('scroll', handleScroll);
-    });
+        var circle = document.querySelector('.progress-circle');
+        var radius = circle.r.baseVal.value;
+        var circumference = radius * 2 * Math.PI;
+        var backToTopButton = document.getElementById('backToTop');
+        
+        circle.style.strokeDasharray = `${circumference} ${circumference}`;
+        circle.style.strokeDashoffset = circumference;
+        
+        function setProgress(percent) {
+          const offset = circumference - (percent / 100) * circumference;
+          circle.style.strokeDashoffset = offset;
+          document.querySelector('.progress-text').textContent = Math.round(percent) + '%';
+        }
+        
+        function handleScroll() {
+          var winScroll = document.documentElement.scrollTop;
+          var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+          var scrolled = (winScroll / height) * 100;
+          setProgress(scrolled);
+
+          // Show or hide the back to top button
+          if (winScroll > 300) {
+            backToTopButton.classList.add('show');
+          } else {
+            backToTopButton.classList.remove('show');
+          }
+        }
+        
+        window.addEventListener('scroll', handleScroll);
+
+        // Back to top functionality
+        backToTopButton.addEventListener('click', function() {
+          window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
+        });
+      });
   </script>
 </body>
 </html>
diff --git a/wiki/pages/attributions.html b/wiki/pages/attributions.html
index f14d8ab3..3b4ccf7f 100644
--- a/wiki/pages/attributions.html
+++ b/wiki/pages/attributions.html
@@ -51,6 +51,8 @@
     <div class="progress-text">0%</div>
   </div>
 
+  <button class="back-to-top" id="backToTop" title="Back to Top">↑</button>
+
   <div class="row mt-4">
     <div class="col-lg-12">
       <h2 id="description">
-- 
GitLab