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

「✨」 feat: added a footer

Browse Source
This commit is contained in:
Adam JOLY
2025-05-06 16:58:11 +02:00
parent 41d858af4f
commit c9e15f8ab0
2 changed files with 50 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/index.html
View File

@ -3,16 +3,25 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Loading Bar</title> <title>Comeback countdown</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<img src="https://send.kanel.ovh/hotlink/xA0pJbJY6vuwjvGjpXHde6Y7WSVs7VF0qWp8y9YS.png" class="catually" ></img> <img src="https://send.kanel.ovh/hotlink/xA0pJbJY6vuwjvGjpXHde6Y7WSVs7VF0qWp8y9YS.png" class="catually" ></img>
</br> </br>
<div class="loading-bar" id="loading-bar"></div> <div class="loading-bar" id="loading-bar"></div>
<div class="date-display" id="date-display"></div> <div class="date-display" id="date-display"></div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
<footer>
<p>Author: <a href="https://github.com/keyzox71">adjoly</a> and Mistral AI :D</p>
<p>License: <a href="https://git.kanel.ovh/KeyZox/ban.kanel.ovh/src/branch/main/LICENSE">WTFPL</a></p>
<p>Running on : <a href="https://github.com/keyzox71/webserv">webserv</a></p>
</footer>
</body> </body>
</html> </html>

44
src/styles.css
View File

@ -1,21 +1,31 @@
html, body {
height: 100%;
margin: 0;
box-sizing: border-box;
}
body { body {
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.container { .container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center; text-align: center;
} }
.loading-bar { .loading-bar {
width: 100%; width: 100%;
max-width: 600px;
background-color: #ddd; background-color: #ddd;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
position: relative;
} }
.loading-bar div { .loading-bar div {
@ -36,3 +46,29 @@ body {
.catually { .catually {
margin-bottom: 20px; margin-bottom: 20px;
} }
footer {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-around; /* Distribute items evenly */
padding: 10px; /* Adjusted padding */
width: 100%;
box-sizing: border-box; /* Ensure padding is included in the width */
/* font-size: 0.9em; /* Reduced font size */ */
}
footer p {
margin: 0; /* Removed margin */
flex: 1; /* Allow paragraphs to take equal space */
text-align: center; /* Center text within each paragraph */
}
footer a {
color: #fff;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}