Bootstrap 5
Coming Soon
Countdown
Template
Snippet
Lancement
Formulaire
Email
Fullscreen
Javascript
Html Css
Responsive
Page coming soon Bootstrap 5 avec compte à rebours JavaScript, formulaire d'inscription email et design fullscreen attractif pour lancement de produit.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template Coming Soon Count 2026 05120101 | AngularForAll</title>
<!-- Bootstrap 5 CSS + icônes -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<!-- Google Fonts moderne -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Space Grotesk', sans-serif;
background: radial-gradient(circle at 20% 30%, #1a1a2e, #0f0f1a);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
margin: 0;
color: #f0f0f0;
position: relative;
overflow-x: hidden;
}
/* Particules décoratives (effet moderne) */
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 80% 10%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
radial-gradient(circle at 20% 90%, rgba(168, 85, 247, 0.1) 0%, transparent 45%),
radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.coming-soon-card {
background: rgba(20, 20, 35, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 3rem;
padding: 3rem 2rem;
max-width: 850px;
width: 100%;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
@media (min-width: 768px) {
.coming-soon-card {
padding: 4rem 3rem;
}
}
.badge-pill {
background: rgba(99, 102, 241, 0.2);
border: 1px solid rgba(99, 102, 241, 0.4);
color: #c4b5fd;
font-weight: 500;
letter-spacing: 1px;
font-size: 0.8rem;
padding: 0.4rem 1.2rem;
border-radius: 2rem;
display: inline-block;
margin-bottom: 2rem;
text-transform: uppercase;
backdrop-filter: blur(5px);
}
h1 {
font-weight: 700;
font-size: 3rem;
line-height: 1.2;
background: linear-gradient(to right, #ffffff, #cbd5e1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
@media (max-width: 576px) {
h1 {
font-size: 2.2rem;
}
}
.lead-text {
color: #a5b4fc;
font-size: 1.2rem;
font-weight: 400;
margin-bottom: 2.5rem;
opacity: 0.9;
}
/* Compteur */
.countdown-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin: 2.5rem 0 3rem;
}
.count-item {
background: rgba(15, 15, 25, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 2rem;
padding: 1.5rem 0.8rem;
min-width: 90px;
flex: 1 0 auto;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 25px -8px rgba(0, 0, 0, 0.5);
transition: transform 0.2s ease, border-color 0.2s;
}
.count-item:hover {
transform: translateY(-5px);
border-color: rgba(129, 140, 248, 0.5);
}
@media (max-width: 576px) {
.count-item {
min-width: 70px;
padding: 1rem 0.5rem;
}
}
.count-number {
font-size: 3.2rem;
font-weight: 700;
color: #e0e7ff;
line-height: 1;
letter-spacing: 1px;
text-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
display: block;
}
@media (max-width: 576px) {
.count-number {
font-size: 2.4rem;
}
}
.count-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #9ca3af;
margin-top: 0.4rem;
display: block;
font-weight: 500;
}
/* Formulaire notification */
.notify-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
margin: 2rem 0 1.5rem;
}
@media (min-width: 576px) {
.notify-form {
flex-direction: row;
justify-content: center;
}
}
.input-group-custom {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 3rem;
padding: 0.2rem 0.2rem 0.2rem 1.5rem;
width: 100%;
max-width: 400px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.input-group-custom:focus-within {
border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}
.input-group-custom input {
background: transparent;
border: none;
outline: none;
color: white;
font-size: 1rem;
width: 100%;
padding: 0.7rem 0;
}
.input-group-custom input::placeholder {
color: #9ca3af;
font-weight: 300;
}
.btn-notify {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border: none;
color: white;
font-weight: 600;
padding: 0.7rem 1.8rem;
border-radius: 3rem;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 0.4rem;
transition: all 0.25s ease;
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
}
.btn-notify:hover {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5);
transform: scale(1.02);
border-color: rgba(255, 255, 255, 0.2);
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.social-icon {
color: #cbd5e1;
font-size: 1.5rem;
transition: color 0.2s, transform 0.2s;
text-decoration: none;
background: rgba(255, 255, 255, 0.05);
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-icon:hover {
color: #a5b4fc;
transform: translateY(-3px);
background: rgba(99, 102, 241, 0.2);
border-color: rgba(129, 140, 248, 0.5);
}
.footer-note {
color: #6b7280;
font-size: 0.8rem;
margin-top: 2rem;
letter-spacing: 0.5px;
}
/* Animation simple */
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.coming-soon-card {
animation: fadeUp 0.8s ease-out;
}
</style>
</head>
<body>
<div class="coming-soon-card text-center">
<span class="badge-pill"><i class="bi bi-rocket-takeoff me-2"></i>Lancement prochain</span>
<h1>Quelque chose d'extraordinaire arrive</h1>
<p class="lead-text">Notre nouvelle plateforme est en construction. Restez à l'écoute.</p>
<!-- Compte à rebours dynamique -->
<div class="countdown-container" id="countdown">
<div class="count-item">
<span class="count-number" id="days">00</span>
<span class="count-label">Jours</span>
</div>
<div class="count-item">
<span class="count-number" id="hours">00</span>
<span class="count-label">Heures</span>
</div>
<div class="count-item">
<span class="count-number" id="minutes">00</span>
<span class="count-label">Minutes</span>
</div>
<div class="count-item">
<span class="count-number" id="seconds">00</span>
<span class="count-label">Secondes</span>
</div>
</div>
<!-- Formulaire notification -->
<div class="notify-form">
<div class="input-group-custom">
<i class="bi bi-envelope text-secondary me-2 fs-5"></i>
<input type="email" id="emailInput" placeholder="Votre adresse email" aria-label="Email pour notification">
</div>
<button class="btn btn-notify" id="notifyBtn" type="button">
<i class="bi bi-bell-fill"></i> Me prévenir
</button>
</div>
<div id="messageFeedback" class="text-info small mt-2" style="min-height: 24px;"></div>
<!-- Réseaux sociaux -->
<div class="social-links">
<a href="#" class="social-icon" aria-label="Twitter"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="social-icon" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="social-icon" aria-label="LinkedIn"><i class="bi bi-linkedin"></i></a>
<a href="#" class="social-icon" aria-label="GitHub"><i class="bi bi-github"></i></a>
</div>
<p class="footer-note mt-4 mb-0">© 2025 NovaSphere · Tous droits réservés</p>
</div>
<!-- Bootstrap JS (pour interactions éventuelles) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function() {
// Date cible : 30 jours à partir d'aujourd'hui pour un compte à rebours dynamique
function setTargetDate() {
const now = new Date();
// Par défaut, le lancement est dans 30 jours. Vous pouvez modifier cette valeur.
const target = new Date(now);
target.setDate(target.getDate() + 30);
// Pour un test plus rapide (ex: 2 minutes) décommentez la ligne suivante :
// target.setMinutes(target.getMinutes() + 2);
return target.getTime();
}
const countDownDate = setTargetDate();
function updateCountdown() {
const now = new Date().getTime();
const distance = countDownDate - now;
// Calculs pour jours, heures, minutes, secondes
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);
// Mise à jour du DOM avec formatage 2 chiffres
document.getElementById('days').innerText = days < 10 ? '0' + days : days;
document.getElementById('hours').innerText = hours < 10 ? '0' + hours : hours;
document.getElementById('minutes').innerText = minutes < 10 ? '0' + minutes : minutes;
document.getElementById('seconds').innerText = seconds < 10 ? '0' + seconds : seconds;
// Si le compte à rebours est terminé
if (distance < 0) {
clearInterval(countdownInterval);
document.getElementById('days').innerText = '00';
document.getElementById('hours').innerText = '00';
document.getElementById('minutes').innerText = '00';
document.getElementById('seconds').innerText = '00';
// Option : afficher un message
const lead = document.querySelector('.lead-text');
if (lead) lead.innerText = 'Le lancement est imminent ! 🚀';
}
}
// Mise à jour immédiate puis toutes les secondes
updateCountdown();
const countdownInterval = setInterval(updateCountdown, 1000);
// Gestion du formulaire de notification
const notifyBtn = document.getElementById('notifyBtn');
const emailInput = document.getElementById('emailInput');
const messageFeedback = document.getElementById('messageFeedback');
function showMessage(text, isSuccess = true) {
if (!messageFeedback) return;
messageFeedback.innerText = text;
messageFeedback.style.color = isSuccess ? '#a5b4fc' : '#fca5a5';
setTimeout(() => {
if (messageFeedback) messageFeedback.innerText = '';
}, 4000);
}
notifyBtn.addEventListener('click', function() {
const email = emailInput.value.trim();
if (!email) {
showMessage('Veuillez entrer une adresse email.', false);
emailInput.focus();
return;
}
// Validation simple email
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
showMessage('Adresse email invalide. Essayez encore.', false);
return;
}
// Simulation d'envoi (normalement appel API)
showMessage(`Merci ! ${email} recevra une alerte. ✨`, true);
emailInput.value = ''; // Réinitialiser le champ
});
// Permettre la soumission avec la touche Entrée
emailInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
notifyBtn.click();
}
});
// Rendre les liens sociaux inactifs (évite la navigation réelle)
document.querySelectorAll('.social-icon').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
// Effet visuel subtil (optionnel)
link.style.transform = 'scale(0.95)';
setTimeout(() => { link.style.transform = ''; }, 150);
});
});
})();
</script>
</body>
</html>Télécharger le fichier source