feat: add countdown files
This commit is contained in:
+138
@@ -0,0 +1,138 @@
|
|||||||
|
<?php
|
||||||
|
// Inclure la configuration
|
||||||
|
require_once 'includes/config.php';
|
||||||
|
// Inclure les fonctions de sécurité
|
||||||
|
require_once 'includes/security.php';
|
||||||
|
// Appliquer les en-têtes de sécurité
|
||||||
|
setSecurityHeaders();
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="csrf-token" content="<?php echo generateCSRFToken(); ?>">
|
||||||
|
<title>kaubuntu.re - Ouverture prochaine</title>
|
||||||
|
|
||||||
|
<!-- Styles -->
|
||||||
|
<link rel="stylesheet" href="css/countdown.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
|
||||||
|
<!-- Favicons -->
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="site.webmanifest">
|
||||||
|
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
|
||||||
|
<meta name="theme-color" content="#FF0000">
|
||||||
|
|
||||||
|
<!-- PWA Meta Tags -->
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||||
|
<meta name="apple-mobile-web-app-title" content="kaubuntu.re">
|
||||||
|
<meta name="application-name" content="kaubuntu.re">
|
||||||
|
|
||||||
|
<!-- Open Graph Meta Tags -->
|
||||||
|
<meta property="og:title" content="kaubuntu.re - Ouverture prochaine">
|
||||||
|
<meta property="og:description" content="La plateforme multimédia kaubuntu.re ouvrira ses portes le 11 octobre 2025. Restez connectés !">
|
||||||
|
<meta property="og:image" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . '/img/logo.png'; ?>">
|
||||||
|
<meta property="og:url" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:site_name" content="kaubuntu.re">
|
||||||
|
<meta property="og:locale" content="fr_FR">
|
||||||
|
|
||||||
|
<!-- Twitter Card Meta Tags -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="kaubuntu.re - Ouverture prochaine">
|
||||||
|
<meta name="twitter:description" content="La plateforme multimédia kaubuntu.re ouvrira ses portes le 11 octobre 2025. Restez connectés !">
|
||||||
|
<meta name="twitter:image" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . '/img/logo.png'; ?>">
|
||||||
|
|
||||||
|
<!-- Configuration JavaScript -->
|
||||||
|
<script>
|
||||||
|
const COUNTDOWN_TARGET_DATE = '<?php echo defined('COUNTDOWN_TARGET_DATE') ? COUNTDOWN_TARGET_DATE : '2025-10-11 00:00:00'; ?>';
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="countdown-overlay">
|
||||||
|
<div class="countdown-container">
|
||||||
|
<!-- Logo -->
|
||||||
|
<img src="img/logo.png" alt="Logo kaubuntu.re" class="countdown-logo">
|
||||||
|
|
||||||
|
<!-- Titre principal -->
|
||||||
|
<h1 class="countdown-title">kaubuntu.re</h1>
|
||||||
|
|
||||||
|
<!-- Sous-titre -->
|
||||||
|
<p class="countdown-subtitle">Plateforme Multimédia - Ouverture prochaine</p>
|
||||||
|
|
||||||
|
<!-- Compte à rebours -->
|
||||||
|
<div class="countdown-timer">
|
||||||
|
<div class="countdown-unit">
|
||||||
|
<span class="countdown-number" id="countdown-days">00</span>
|
||||||
|
<span class="countdown-label">Jours</span>
|
||||||
|
</div>
|
||||||
|
<div class="countdown-unit">
|
||||||
|
<span class="countdown-number" id="countdown-hours">00</span>
|
||||||
|
<span class="countdown-label">Heures</span>
|
||||||
|
</div>
|
||||||
|
<div class="countdown-unit">
|
||||||
|
<span class="countdown-number" id="countdown-minutes">00</span>
|
||||||
|
<span class="countdown-label">Minutes</span>
|
||||||
|
</div>
|
||||||
|
<div class="countdown-unit">
|
||||||
|
<span class="countdown-number" id="countdown-seconds">00</span>
|
||||||
|
<span class="countdown-label">Secondes</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Message -->
|
||||||
|
<div class="countdown-message">
|
||||||
|
<p>La plateforme ouvrira ses portes le <strong>11 octobre 2025</strong>.</p>
|
||||||
|
<p>Restez connectés et suivez-nous sur nos réseaux sociaux !</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Réseaux sociaux -->
|
||||||
|
<div class="countdown-social">
|
||||||
|
<?php if (defined('FACEBOOK_URL') && !empty(FACEBOOK_URL)): ?>
|
||||||
|
<a href="<?php echo FACEBOOK_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
|
||||||
|
<i class="fab fa-facebook-f"></i>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if (defined('X_URL') && !empty(X_URL)): ?>
|
||||||
|
<a href="<?php echo X_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)">
|
||||||
|
<i class="fab fa-x-twitter"></i>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if (defined('INSTAGRAM_URL') && !empty(INSTAGRAM_URL)): ?>
|
||||||
|
<a href="<?php echo INSTAGRAM_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
|
||||||
|
<i class="fab fa-instagram"></i>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if (defined('YOUTUBE_URL') && !empty(YOUTUBE_URL)): ?>
|
||||||
|
<a href="<?php echo YOUTUBE_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
|
||||||
|
<i class="fab fa-youtube"></i>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if (defined('TIKTOK_URL') && !empty(TIKTOK_URL)): ?>
|
||||||
|
<a href="<?php echo TIKTOK_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
|
||||||
|
<i class="fab fa-tiktok"></i>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if (defined('MASTODON_URL') && !empty(MASTODON_URL)): ?>
|
||||||
|
<a href="<?php echo MASTODON_URL; ?>" target="_blank" rel="noopener noreferrer" aria-label="Mastodon">
|
||||||
|
<i class="fab fa-mastodon"></i>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="js/countdown.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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; }
|
||||||
@@ -233,6 +233,17 @@ define('PRIORITY_CATEGORIES', [
|
|||||||
// define('LEGAL_SOURCE_CODE_URL', 'https://codeberg.org/Ka-Ubuntu/kaubuntu.re');
|
// 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.');
|
// 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
|
// Texte de présentation du mouvement
|
||||||
// =========================================
|
// =========================================
|
||||||
|
|||||||
@@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user