diff --git a/wiki/pages/attributions.html b/wiki/pages/attributions.html
index a2f76c8ca2947b630f3044f31aafcf92a5dd3efe..19ea25a1cd5d7a2fd8e2e5b0b37415e331d21ec4 100644
--- a/wiki/pages/attributions.html
+++ b/wiki/pages/attributions.html
@@ -8,7 +8,7 @@
top: 230px;
width: 160px;
height: 40%;
- background-color: #ffffff ;
+ background-color: #ffffff;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
border-radius: 20px;
@@ -28,33 +28,29 @@
border-radius: 20px;
}
h2 {
- scroll-margin-top: 60px;
+ scroll-margin-top: 60px;
}
-
.row.mt-4 {
- margin-left: 130px;
+ margin-left: 130px;
}
+ .progress-bar {
+ height: 8px;
+ background: #04AA6D;
+ width: 0%;
+ }
- .bar{
- position: fixed;
- top: 0;
- width: 0.5%;
- height: 4px;
- }
-
+ /* Style for circular progress bar */
.progress-container {
position: fixed;
left: 20px;
- bottom: 20px;
- width: 100px;
- height: 100px;
+ bottom: 20px;
+ width: 100px;
+ height: 100px;
}
-
.progress-bar-circle {
transform: rotate(-90deg);
- transform-origin: center;
+ transform-origin: center;
}
-
.progress-circle {
stroke: #04AA6D;
stroke-linecap: round;
@@ -62,7 +58,6 @@
stroke-dashoffset: 283;
}
</style>
-
</head>
<body>
@@ -73,22 +68,26 @@
{% block page_content %}
+<div class="progress-bar" id="myBar"></div>
+
<div class="sidebar">
<ul>
<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>
+ <li><a href="#topic4">Topic4</a></li>
+ </ul>
</div>
+<!-- Circular Progress Bar Container -->
<div class="progress-container">
<svg class="progress-bar-circle" width="100" height="100">
<circle class="progress-circle" cx="50" cy="50" r="45" stroke-width="5" fill="transparent"></circle>
</svg>
</div>
+<!-- Existing page content continues here... -->
<div class="row mt-4">
<div class="col-lg-12">
<h2 id="description">
@@ -146,8 +145,8 @@
<img src="https://static.igem.wiki/teams/5187/unrelated-to-tech/thu.png" alt="thu" style="max-width: 100%; height: auto; width: 50%;">
</div>
</div>
-
{% endblock %}
+
<script>
window.onscroll = function() {
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;