Update 2 files

- /wiki/layout.html
- /wiki/pages/attributions.html

wiki/layout.html

@@ -62,52 +62,63 @@
       }
       
       .sidebar {
-            position: fixed;
-            left: 5px;
-            top: 210px;
-            width: 200px;
-            height: 60%;
-            background-color: #ffffff;
-            padding: 20px;
-            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-            border-radius: 20px;
-        }
-        .sidebar ul {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-        .sidebar ul li {
-            margin-bottom: 10px;
-            position: relative;
-        }
-        .sidebar ul li a {
-            display: block;
-            padding: 10px;
-            color: #fa8072;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            border-radius: 20px;
-        }
-        .sidebar ul li a:hover {
-            background-color: #fa8072;
-            color: #ffffff;
-            transform: translateY(-3px);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        }
-        .progress-bar {
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 4px;
-            background-color: #fa8072;
-            opacity: 0;
-            transition: opacity 0.3s, height 0.3s;
-        }
-        .sidebar ul li.active .progress-bar {
-            opacity: 1;
-        }
+        position: fixed;
+        left: 5px;
+        top: 210px;
+        width: 160px;
+        height: 40%;
+        background-color: #ffffff;
+        padding: 20px;
+        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+        border-radius: 20px;
+      }
+      .sidebar ul {
+        list-style: none;
+        padding: 0;
+      }
+      .sidebar ul li a {
+        display: block;
+        padding: 10px;
+        color: #fa8072;
+        text-decoration: none;
+        transition: all 0.3s ease;
+        border-radius: 20px;  /* Added border-radius here */
+      }
+      .sidebar ul li a:hover {
+        background-color: #fa8072;
+        color: #ffffff;
+        transform: translateY(-3px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      }
+
+      .progress-container {
+        position: fixed;
+        left: 25px;  
+        bottom: 160px;
+        width: 60px;
+        height: 60px;
+        z-index: 1000;  
+      }
+
+      .progress-bar-circle {
+        transform: rotate(-90deg);
+      }
+
+      .progress-circle {
+        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%);
+      }
 
       .back-to-top {
         position: fixed;
@@ -195,33 +206,45 @@
 
   <script>
     document.addEventListener('DOMContentLoaded', function() {
-            const sidebarItems = document.querySelectorAll('.sidebar ul li');
-            const sections = document.querySelectorAll('section');
-
-            function updateProgress() {
-                const scrollPosition = window.scrollY;
-                const windowHeight = window.innerHeight;
-                const documentHeight = document.documentElement.scrollHeight;
-
-                sections.forEach((section, index) => {
-                    const sectionTop = section.offsetTop;
-                    const sectionHeight = section.offsetHeight;
-                    const sectionProgress = (scrollPosition - sectionTop + windowHeight/2) / sectionHeight;
-
-                    if (sectionProgress > 0 && sectionProgress <= 1) {
-                        sidebarItems[index].classList.add('active');
-                        sidebarItems[index].querySelector('.progress-bar').style.height = `${sectionProgress * 100}%`;
-                    } else {
-                        sidebarItems[index].classList.remove('active');
-                        sidebarItems[index].querySelector('.progress-bar').style.height = '0';
-                    }
-                });
-            }
-
-            window.addEventListener('scroll', updateProgress);
-            updateProgress(); // Initial call to set the correct state on page load
+        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>
+

wiki/pages/attributions.html

@@ -36,13 +36,22 @@
   {% block page_content %}
   <div class="sidebar">
     <ul>
-        <li><a href="#description">General Description<span class="progress-bar"></span></a></li>
-        <li><a href="#topic1">Topic 1<span class="progress-bar"></span></a></li>
-        <li><a href="#topic2">Topic 2<span class="progress-bar"></span></a></li>
-        <li><a href="#topic3">Topic 3<span class="progress-bar"></span></a></li>
-        <li><a href="#topic4">Topic 4<span class="progress-bar"></span></a></li>
+      <li><a href="#description">General Description</a></li>
+      <li><a href="#topic1">Topic1</a></li>
+      <li><a href="#topic2">Topic2</a></li>
+      <li><a href="#topic3">Topic3</a></li>
+      <li><a href="#topic4">Topic4</a></li>
     </ul>
-</div>
+  </div>
+
+  <div class="progress-container">
+    <svg class="progress-bar-circle" width="60" height="60">
+      <circle class="progress-circle" cx="30" cy="30" r="25" stroke-width="5" fill="transparent"></circle>
+    </svg>
+    <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">