KeyZox/ban.kanel.ovh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

「✨」 feat: working

Browse Source
This commit is contained in:
Adam JOLY
2025-05-06 16:11:07 +02:00
parent a92e36f705
commit 14ac68d2a2
3 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Loading Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<img src="https://send.kanel.ovh/hotlink/xA0pJbJY6vuwjvGjpXHde6Y7WSVs7VF0qWp8y9YS.png" class="catually" ></img>
</br>
<div class="loading-bar" id="loading-bar"></div>
<div class="date-display" id="date-display"></div>
</div>
<script src="script.js"></script>
</body>
</html>

29
src/script.js Normal file
View File

@ -0,0 +1,29 @@
document.addEventListener('DOMContentLoaded', function () {
const targetDate = new Date('2025-06-30T00:00:00').getTime(); // Set your target date here
const loadingBar = document.getElementById('loading-bar');
const dateDisplay = document.getElementById('date-display');
function updateLoadingBar() {
const now = new Date().getTime();
const distance = targetDate - now;
const progress = Math.max(0, Math.min(100, ((now - new Date('2025-05-05T00:00:00').getTime()) / (targetDate - new Date('2025-05-05T00:00:00').getTime())) * 100));
loadingBar.innerHTML = `<div style="width:${progress}%">${progress.toFixed(10)}%</div>`;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
dateDisplay.innerHTML = `Back in : ${days}d ${hours}h ${minutes}m ${seconds}s`;
if (distance < 0) {
clearInterval(countdownInterval);
dateDisplay.innerHTML = 'Countdown completed!';
}
}
const countdownInterval = setInterval(updateLoadingBar, 1000);
updateLoadingBar(); // Initial call to set the loading bar immediately
});

38
src/styles.css Normal file
View File

@ -0,0 +1,38 @@
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
.loading-bar {
width: 100%;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
.loading-bar div {
height: 30px;
width: 0;
background-color: #4caf50;
text-align: center;
line-height: 30px;
color: black;
border-radius: 5px;
}
.date-display {
margin-top: 20px;
font-size: 1.2em;
}
.catually {
margin-bottom: 20px;
}