Skip to content

Commit 5909a62

Browse files
SilentCoderHereSilentCoderHere
committed
countdown ui update
1 parent 21fd329 commit 5909a62

3 files changed

Lines changed: 545 additions & 67 deletions

File tree

‎countdown/index.html‎

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,53 +3,90 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Countdown</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
7+
<title>Countdown Timer</title>
88
<link rel="stylesheet" href="styles.css">
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1010
</head>
1111

1212
<body>
13+
<<<<<<< refs/remotes/origin/main
1314
<div class="floating-dots" id="floatingDots"></div>
1415

16+
=======
17+
>>>>>>> countdown ui update
1518
<div class="container">
1619
<div class="header">
17-
<h1 class="title">Countdown Timer</h1>
18-
<div class="target-date">
19-
<i class="fas fa-calendar-day"></i>
20-
<span>March 9, 2026</span>
20+
<h1 class="title"><i class="fas fa-hourglass-half"></i> Countdown</h1>
21+
<div class="date-display">
22+
<span class="date-label">Target Date:</span>
23+
<span class="date-value">March 9, 2026</span>
2124
</div>
2225
</div>
26+
27+
<!-- Progress Bar -->
28+
<div class="progress-section">
29+
<div class="progress-info">
30+
<span class="progress-label">Progress</span>
31+
<span class="progress-percent" id="percentage">0%</span>
32+
</div>
33+
<div class="progress-bar">
34+
<div class="progress-fill" id="progressFill"></div>
35+
<div class="progress-marker" id="progressMarker"></div>
36+
</div>
37+
<div class="progress-stats">
38+
<span class="stat" id="elapsedTime">0 days passed</span>
39+
<span class="stat" id="remainingTime">0 days left</span>
40+
</div>
41+
</div>
42+
<<<<<<< refs/remotes/origin/main
2343

44+
=======
45+
46+
<!-- Countdown -->
47+
>>>>>>> countdown ui update
2448
<div class="countdown-container">
2549
<div class="time-unit">
2650
<div class="time-value" id="days">00</div>
2751
<div class="time-label">Days</div>
2852
</div>
53+
<<<<<<< refs/remotes/origin/main
2954

3055
<div class="separator">:</div>
3156

57+
=======
58+
59+
>>>>>>> countdown ui update
3260
<div class="time-unit">
3361
<div class="time-value" id="hours">00</div>
3462
<div class="time-label">Hours</div>
3563
</div>
64+
<<<<<<< refs/remotes/origin/main
3665

3766
<div class="separator">:</div>
3867

68+
=======
69+
70+
>>>>>>> countdown ui update
3971
<div class="time-unit">
4072
<div class="time-value" id="minutes">00</div>
4173
<div class="time-label">Minutes</div>
4274
</div>
75+
<<<<<<< refs/remotes/origin/main
4376

4477
<div class="separator">:</div>
4578

79+
=======
80+
81+
>>>>>>> countdown ui update
4682
<div class="time-unit">
4783
<div class="time-value" id="seconds">00</div>
4884
<div class="time-label">Seconds</div>
4985
</div>
5086
</div>
5187

5288
<div class="completed" id="completedMessage">
89+
<<<<<<< refs/remotes/origin/main
5390
<i class="fas fa-trophy"></i> Time's Up!
5491
</div>
5592

@@ -59,6 +96,9 @@ <h1 class="title">Countdown Timer</h1>
5996
<div class="x-symbol">×</div>
6097
<div class="name">FEARLESS BOT</div>
6198
</div>
99+
=======
100+
<i class="fas fa-trophy"></i> Countdown Complete!
101+
>>>>>>> countdown ui update
62102
</div>
63103
</div>
64104

‎countdown/script.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<<<<<<< refs/remotes/origin/main
12
const targetDate = new Date("March 9, 2026 00:00:00").getTime();
23
const daysElement = document.getElementById("days");
34
const hoursElement = document.getElementById("hours");
@@ -70,6 +71,58 @@ function updateCountdown() {
7071
secondsElement.textContent = "00";
7172
completedMessage.style.display = "block";
7273
document.querySelector(".countdown-container").style.display = "none";
74+
=======
75+
// Configuration
76+
const START_DATE = new Date("December 8, 2025 00:00:00").getTime();
77+
const TARGET_DATE = new Date("March 9, 2026 00:00:00").getTime();
78+
79+
// DOM Elements
80+
const daysElement = document.getElementById("days");
81+
const hoursElement = document.getElementById("hours");
82+
const minutesElement = document.getElementById("minutes");
83+
const secondsElement = document.getElementById("seconds");
84+
const completedMessage = document.getElementById("completedMessage");
85+
const percentageElement = document.getElementById("percentage");
86+
const progressFill = document.getElementById("progressFill");
87+
const progressMarker = document.getElementById("progressMarker");
88+
const elapsedTimeElement = document.getElementById("elapsedTime");
89+
const remainingTimeElement = document.getElementById("remainingTime");
90+
91+
let countdownInterval;
92+
93+
// Update Progress Bar - Fixed UI Bug
94+
function updateProgressBar() {
95+
const now = new Date().getTime();
96+
const totalDuration = TARGET_DATE - START_DATE;
97+
const elapsed = Math.max(0, now - START_DATE);
98+
const progressPercent = Math.min((elapsed / totalDuration) * 100, 100);
99+
100+
// Fix progress bar overflow bug
101+
const safePercent = Math.min(Math.max(progressPercent, 0), 100);
102+
103+
// Update progress bar
104+
progressFill.style.width = `${safePercent}%`;
105+
progressMarker.style.left = `${safePercent}%`;
106+
percentageElement.textContent = `${safePercent.toFixed(5)}%`;
107+
108+
// Update time stats
109+
const daysElapsed = Math.floor(elapsed / (1000 * 60 * 60 * 24));
110+
const daysRemaining = Math.max(0, Math.floor((TARGET_DATE - now) / (1000 * 60 * 60 * 24)));
111+
112+
elapsedTimeElement.textContent = `${daysElapsed} days passed`;
113+
remainingTimeElement.textContent = `${daysRemaining} days left`;
114+
115+
return safePercent;
116+
}
117+
118+
// Update Countdown
119+
function updateCountdown() {
120+
const now = new Date().getTime();
121+
const distance = TARGET_DATE - now;
122+
123+
if (distance < 0) {
124+
handleCountdownComplete();
125+
>>>>>>> countdown ui update
73126
return;
74127
}
75128

@@ -79,6 +132,7 @@ function updateCountdown() {
79132
);
80133
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
81134
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
135+
<<<<<<< refs/remotes/origin/main
82136

83137
// Remove animation classes first
84138
daysElement.classList.remove("changed");
@@ -201,3 +255,70 @@ document.addEventListener("mousemove", (e) => {
201255
document.addEventListener("click", (e) => {
202256
createSparkle(e.clientX, e.clientY);
203257
});
258+
=======
259+
260+
updateValue(daysElement, days);
261+
updateValue(hoursElement, hours);
262+
updateValue(minutesElement, minutes);
263+
updateValue(secondsElement, seconds);
264+
265+
updateProgressBar();
266+
}
267+
268+
function updateValue(element, value) {
269+
const formattedValue = value < 10 ? `0${value}` : value;
270+
if (element.textContent !== formattedValue) {
271+
element.textContent = formattedValue;
272+
element.classList.add('changed');
273+
setTimeout(() => element.classList.remove('changed'), 500);
274+
}
275+
}
276+
277+
function handleCountdownComplete() {
278+
clearInterval(countdownInterval);
279+
280+
daysElement.textContent = "00";
281+
hoursElement.textContent = "00";
282+
minutesElement.textContent = "00";
283+
secondsElement.textContent = "00";
284+
285+
completedMessage.style.display = "block";
286+
287+
// Set progress to 100% with safety check
288+
progressFill.style.width = "100%";
289+
progressMarker.style.left = "100%";
290+
percentageElement.textContent = "100%";
291+
remainingTimeElement.textContent = "0 days left";
292+
293+
// Add completion animation to progress bar
294+
progressFill.style.background = "linear-gradient(90deg, #ffd700, #ffa500, #ffd700)";
295+
progressFill.style.backgroundSize = "200% 100%";
296+
progressFill.style.animation = "shimmer 1.5s infinite";
297+
}
298+
299+
// Initialize
300+
function init() {
301+
// Check if elements exist before updating
302+
if (progressFill && progressMarker) {
303+
updateProgressBar();
304+
}
305+
306+
if (daysElement && hoursElement && minutesElement && secondsElement) {
307+
updateCountdown();
308+
}
309+
310+
countdownInterval = setInterval(updateCountdown, 1000);
311+
}
312+
313+
// Start when DOM is loaded
314+
document.addEventListener('DOMContentLoaded', init);
315+
316+
// Handle page visibility changes
317+
document.addEventListener('visibilitychange', function() {
318+
if (!document.hidden) {
319+
// Update immediately when page becomes visible again
320+
updateCountdown();
321+
updateProgressBar();
322+
}
323+
});
324+
>>>>>>> countdown ui update

0 commit comments

Comments
 (0)