diff --git a/countdown.php b/countdown.php new file mode 100644 index 0000000..81c125c --- /dev/null +++ b/countdown.php @@ -0,0 +1,138 @@ + + + + + + + + kaubuntu.re - Ouverture prochaine + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + +

kaubuntu.re

+ + +

Plateforme Multimédia - Ouverture prochaine

+ + +
+
+ 00 + Jours +
+
+ 00 + Heures +
+
+ 00 + Minutes +
+
+ 00 + Secondes +
+
+ + +
+

La plateforme ouvrira ses portes le 11 octobre 2025.

+

Restez connectés et suivez-nous sur nos réseaux sociaux !

+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/css/countdown.css b/css/countdown.css new file mode 100644 index 0000000..05ad3d7 --- /dev/null +++ b/css/countdown.css @@ -0,0 +1,211 @@ +/* Styles pour la page de compte à rebours */ +.countdown-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 9999; + color: white; + text-align: center; + padding: 20px; + box-sizing: border-box; +} + +.countdown-container { + max-width: 800px; + width: 100%; +} + +.countdown-logo { + width: 150px; + height: auto; + margin-bottom: 30px; + filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.3)); +} + +.countdown-title { + font-size: 3rem; + font-weight: bold; + margin-bottom: 20px; + color: #FF0000; + text-shadow: 0 0 30px rgba(255, 0, 0, 0.5); +} + +.countdown-subtitle { + font-size: 1.5rem; + margin-bottom: 50px; + color: #ffffff; + opacity: 0.9; +} + +.countdown-timer { + display: flex; + justify-content: center; + gap: 30px; + margin-bottom: 40px; + flex-wrap: wrap; +} + +.countdown-unit { + text-align: center; + background: rgba(255, 0, 0, 0.1); + border: 2px solid #FF0000; + border-radius: 15px; + padding: 20px; + min-width: 120px; + backdrop-filter: blur(10px); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.countdown-unit:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3); +} + +.countdown-number { + font-size: 3rem; + font-weight: bold; + color: #FF0000; + display: block; + text-shadow: 0 0 20px rgba(255, 0, 0, 0.6); +} + +.countdown-label { + font-size: 1rem; + color: #ffffff; + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 10px; +} + +.countdown-message { + font-size: 1.2rem; + margin-bottom: 30px; + color: #ffffff; + opacity: 0.8; + line-height: 1.6; +} + +.countdown-social { + display: flex; + justify-content: center; + gap: 20px; + margin-top: 40px; +} + +.countdown-social a { + color: #ffffff; + font-size: 2rem; + transition: all 0.3s ease; + padding: 10px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); +} + +.countdown-social a:hover { + color: #FF0000; + transform: scale(1.2); + box-shadow: 0 0 20px rgba(255, 0, 0, 0.4); +} + +/* Animation de pulsation pour le titre */ +@keyframes pulse { + 0%, 100% { + text-shadow: 0 0 30px rgba(255, 0, 0, 0.5); + } + 50% { + text-shadow: 0 0 50px rgba(255, 0, 0, 0.8); + } +} + +.countdown-title { + animation: pulse 2s infinite; +} + +/* Responsive */ +@media (max-width: 768px) { + .countdown-title { + font-size: 2rem; + } + + .countdown-subtitle { + font-size: 1.2rem; + } + + .countdown-timer { + gap: 15px; + } + + .countdown-unit { + min-width: 80px; + padding: 15px 10px; + } + + .countdown-number { + font-size: 2rem; + } + + .countdown-label { + font-size: 0.8rem; + } + + .countdown-logo { + width: 100px; + } + + .countdown-social { + gap: 15px; + } + + .countdown-social a { + font-size: 1.5rem; + } +} + +@media (max-width: 480px) { + .countdown-timer { + gap: 10px; + } + + .countdown-unit { + min-width: 70px; + padding: 10px 5px; + } + + .countdown-number { + font-size: 1.5rem; + } + + .countdown-label { + font-size: 0.7rem; + } +} + +/* Animation d'entrée */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.countdown-container > * { + animation: fadeInUp 0.8s ease forwards; +} + +.countdown-container > *:nth-child(1) { animation-delay: 0.1s; } +.countdown-container > *:nth-child(2) { animation-delay: 0.2s; } +.countdown-container > *:nth-child(3) { animation-delay: 0.3s; } +.countdown-container > *:nth-child(4) { animation-delay: 0.4s; } +.countdown-container > *:nth-child(5) { animation-delay: 0.5s; } \ No newline at end of file diff --git a/includes/config.local.php.sample b/includes/config.local.php.sample index 5dbc426..cc4d65c 100644 --- a/includes/config.local.php.sample +++ b/includes/config.local.php.sample @@ -233,6 +233,17 @@ define('PRIORITY_CATEGORIES', [ // define('LEGAL_SOURCE_CODE_URL', 'https://codeberg.org/Ka-Ubuntu/kaubuntu.re'); // define('LEGAL_SERVICE_DESCRIPTION', 'est une plateforme multimédia proposant des contenus vidéo, des actualités et des informations liées au mouvement politique indépendantiste et panafricaniste réunionnais Ka-Ubuntu.'); +// ========================================= +// Système de compte à rebours / maintenance +// ========================================= + +// Activer le mode compte à rebours (true/false) +define('COUNTDOWN_ENABLED', false); + +// Date de fin du compte à rebours (format: Y-m-d H:i:s) +define('COUNTDOWN_TARGET_DATE', '2025-10-11 00:00:00'); + + // ========================================= // Texte de présentation du mouvement // ========================================= diff --git a/js/countdown.js b/js/countdown.js new file mode 100644 index 0000000..b2d8862 --- /dev/null +++ b/js/countdown.js @@ -0,0 +1,97 @@ +/** + * Script de compte à rebours pour la page de maintenance + */ + +class CountdownTimer { + constructor(targetDate) { + this.targetDate = new Date(targetDate).getTime(); + this.elements = { + days: document.getElementById('countdown-days'), + hours: document.getElementById('countdown-hours'), + minutes: document.getElementById('countdown-minutes'), + seconds: document.getElementById('countdown-seconds') + }; + + this.start(); + } + + start() { + // Mise à jour immédiate + this.updateTimer(); + + // Mise à jour chaque seconde + this.interval = setInterval(() => { + this.updateTimer(); + }, 1000); + } + + updateTimer() { + const now = new Date().getTime(); + const distance = this.targetDate - now; + + if (distance < 0) { + // Le compte à rebours est terminé + this.stop(); + this.onComplete(); + return; + } + + 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 des éléments du DOM + if (this.elements.days) this.elements.days.textContent = this.formatNumber(days); + if (this.elements.hours) this.elements.hours.textContent = this.formatNumber(hours); + if (this.elements.minutes) this.elements.minutes.textContent = this.formatNumber(minutes); + if (this.elements.seconds) this.elements.seconds.textContent = this.formatNumber(seconds); + } + + formatNumber(num) { + return num.toString().padStart(2, '0'); + } + + stop() { + if (this.interval) { + clearInterval(this.interval); + } + } + + onComplete() { + // Rediriger vers la page principale quand le compte à rebours est terminé + window.location.href = '/'; + } +} + +// Animation des éléments au chargement +document.addEventListener('DOMContentLoaded', function() { + // Initialiser le compte à rebours si les éléments existent + if (document.getElementById('countdown-days')) { + // La date cible est fournie par PHP + if (typeof COUNTDOWN_TARGET_DATE !== 'undefined') { + new CountdownTimer(COUNTDOWN_TARGET_DATE); + } + } + + // Animation d'apparition progressive + const elements = document.querySelectorAll('.countdown-container > *'); + elements.forEach((element, index) => { + element.style.opacity = '0'; + element.style.transform = 'translateY(30px)'; + + setTimeout(() => { + element.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; + element.style.opacity = '1'; + element.style.transform = 'translateY(0)'; + }, 100 * (index + 1)); + }); +}); + +// Gérer la fermeture propre du timer +window.addEventListener('beforeunload', function() { + // Arrêter le timer si il existe + if (window.countdownTimer) { + window.countdownTimer.stop(); + } +});