diff --git a/wiki/layout.html b/wiki/layout.html index 10cf5f11b891690f60789ad0c3fc26afbfef1b50..32063191b39daf6a7f847d68db124106f9f7477d 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 f14d8ab36a5a783837aaddf14fcfb147211cd42e..3b4ccf7f1ce98a1236eca2790dc14c1a48f41c67 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">