Skip to content
Snippets Groups Projects
Commit b5eaa681 authored by HouTeng Chan's avatar HouTeng Chan
Browse files

Update file attributions.html

parent 1c6d5073
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
wiki/pages/attributions.html
+ 13
− 46
View file @ b5eaa681
......@@ -49,50 +49,31 @@
}
.progress-container {
position: fixed;
left: 20px;
bottom: 80px;
width: 80px;
height: 80px;
z-index: 1000;
position: fixed;
left: 20px;
bottom: 80px;
width: 60px;
height: 60px;
z-index: 1000;
}
.progress-bar-circle {
transform: rotate(-90deg);
filter: drop-shadow(0 0 5px rgba(250, 128, 114, 0.5));
}
.progress-circle-bg {
fill: none;
stroke: rgba(250, 128, 114, 0.2);
stroke-width: 8;
}
.progress-circle {
fill: none;
stroke: url(#gradient);
stroke: hsl(17, 100%, 50%);
stroke-linecap: round;
stroke-width: 8;
transition: stroke-dashoffset 0.3s ease;
transition: stroke-dashoffset 0.3s;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
font-size: 12px;
font-weight: bold;
color: #fa8072;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
color: hsl(17, 100%, 50%);
}
</style>
</head>
<body>
......@@ -113,20 +94,12 @@
</div>
<div class="progress-container">
<svg class="progress-bar-circle" width="80" height="80">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff9a9e" />
<stop offset="100%" stop-color="#fa8072" />
</linearGradient>
</defs>
<circle class="progress-circle-bg" cx="40" cy="40" r="34" />
<circle class="progress-circle" cx="40" cy="40" r="34" />
<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>
<div class="row mt-4">
<div class="col-lg-12">
<h2 id="description">
......@@ -188,7 +161,6 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
var circle = document.querySelector('.progress-circle');
var text = document.querySelector('.progress-text');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
......@@ -198,12 +170,7 @@
function setProgress(percent) {
const offset = circumference - (percent / 100) * circumference;
circle.style.strokeDashoffset = offset;
text.textContent = Math.round(percent) + '%';
// Add pulse animation when progress changes
text.style.animation = 'none';
text.offsetHeight; // Trigger reflow
text.style.animation = 'pulse 0.5s ease';
document.querySelector('.progress-text').textContent = Math.round(percent) + '%';
}
function handleScroll() {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment