131 lines
3.7 KiB
HTML
131 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>monitor2 – En construction 🏗️</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<style>
|
||
body {
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
|
||
font-family: 'Segoe UI', 'Arial', sans-serif;
|
||
color: #22223b;
|
||
margin: 0;
|
||
padding: 0;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.container {
|
||
background: #fff;
|
||
border-radius: 1.5em;
|
||
box-shadow: 0 4px 16px rgba(79,70,229,0.10);
|
||
padding: 2.5em 2em 2em 2em;
|
||
text-align: center;
|
||
max-width: 400px;
|
||
margin: 2em;
|
||
}
|
||
h1 {
|
||
font-size: 2.3em;
|
||
color: #4f46e5;
|
||
margin-bottom: 0.2em;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.4em;
|
||
}
|
||
.emojis {
|
||
font-size: 2.2em;
|
||
margin: 0.5em 0 0.7em 0;
|
||
letter-spacing: 0.2em;
|
||
animation: bounce 2s infinite;
|
||
}
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0);}
|
||
50% { transform: translateY(-10px);}
|
||
}
|
||
.message {
|
||
font-size: 1.18em;
|
||
margin: 1.2em 0 0.8em 0;
|
||
color: #444;
|
||
}
|
||
.waiting {
|
||
font-size: 1.1em;
|
||
color: #6366f1;
|
||
margin-bottom: 1.3em;
|
||
}
|
||
.progress-bar {
|
||
background: #e0e7ff;
|
||
border-radius: 1em;
|
||
overflow: hidden;
|
||
width: 80%;
|
||
height: 18px;
|
||
margin: 1.5em auto 1em auto;
|
||
box-shadow: 0 1px 4px #c7d2fe33;
|
||
position: relative;
|
||
}
|
||
.progress {
|
||
background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
|
||
height: 100%;
|
||
width: 0%;
|
||
transition: width 0.5s;
|
||
}
|
||
.back-link {
|
||
display: inline-block;
|
||
margin-top: 1.8em;
|
||
padding: 0.7em 1.3em;
|
||
background: #4f46e5;
|
||
color: #fff;
|
||
border-radius: 2em;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
transition: background 0.15s, transform 0.15s;
|
||
font-size: 1.07em;
|
||
}
|
||
.back-link:hover {
|
||
background: #6366f1;
|
||
transform: translateY(-2px) scale(1.04);
|
||
}
|
||
footer {
|
||
margin-top: 2em;
|
||
color: #888;
|
||
font-size: 0.98em;
|
||
opacity: 0.85;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>monitor2 <span>🏗️</span></h1>
|
||
<div class="emojis">🚧⏳🕒</div>
|
||
<div class="message">
|
||
Ce projet est actuellement <strong>en construction</strong>.<br>
|
||
Le téléchargement sera bientôt disponible !
|
||
</div>
|
||
<div class="waiting">
|
||
Merci de votre patience 😊<br>
|
||
<span style="font-size:1.4em;">Prenez un café ☕ ou rafraîchissez la page plus tard !</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress" id="progress"></div>
|
||
</div>
|
||
<a class="back-link" href="../">⬅️ Retour à la racine du projet</a>
|
||
</div>
|
||
<footer>
|
||
monitor2 – ByMyCode.com<br>
|
||
Dernière mise à jour : 2025
|
||
</footer>
|
||
<script>
|
||
// Animation de barre de progression pour passer le temps
|
||
let progress = 0;
|
||
const bar = document.getElementById('progress');
|
||
setInterval(() => {
|
||
progress = (progress + Math.random() * 15) % 100;
|
||
bar.style.width = progress + "%";
|
||
}, 700);
|
||
</script>
|
||
</body>
|
||
</html>
|