349 lines
11 KiB
HTML
349 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>🎄 Calendrier de l'Avent 🎄</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
/* Styles comme dans la version Noël complète */
|
|
/* (Le contenu CSS complet déjà fourni) */
|
|
:root {
|
|
--noel-red: #dc3545;
|
|
--noel-green: #198754;
|
|
--noel-gold: #ffc107;
|
|
--noel-silver: #6c757d;
|
|
--snow-white: #f8f9fa;
|
|
--dark-green: #0f5132;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
radial-gradient(circle at 20% 80%, rgba(120,119,198,.3) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(255,255,255,.3) 0%, transparent 50%),
|
|
radial-gradient(circle at 40% 40%, rgba(120,219,255,.2) 0%, transparent 50%);
|
|
z-index: -1;
|
|
}
|
|
|
|
.snowflake {
|
|
position: absolute;
|
|
color: #fff;
|
|
pointer-events: none;
|
|
animation: snowfall linear infinite;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
@keyframes snowfall {
|
|
to { transform: translateY(100vh) rotate(360deg); }
|
|
}
|
|
|
|
.main-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.christmas-title {
|
|
background: linear-gradient(45deg, var(--noel-red), var(--noel-green), var(--noel-gold));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 30px rgba(255,255,255,.5);
|
|
animation: glow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from { filter: drop-shadow(0 0 20px var(--noel-gold)); }
|
|
to { filter: drop-shadow(0 0 30px var(--noel-red)); }
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
backdrop-filter: blur(10px);
|
|
background: rgba(255,255,255,0.95);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 30px 60px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.btn-christmas {
|
|
background: linear-gradient(45deg, var(--noel-red), var(--noel-green));
|
|
border: none;
|
|
border-radius: 50px;
|
|
padding: 15px 40px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-christmas:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 10px 30px rgba(220,53,69,0.4);
|
|
}
|
|
|
|
.btn-christmas::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn-christmas:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.day-badge {
|
|
background: linear-gradient(45deg, var(--noel-gold), #ff9800);
|
|
color: #333;
|
|
font-weight: 700;
|
|
padding: 10px 20px;
|
|
border-radius: 50px;
|
|
box-shadow: 0 5px 15px rgba(255,193,7,0.4);
|
|
}
|
|
|
|
.person-winner {
|
|
background: linear-gradient(45deg, #28a745, #20c997);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
text-shadow: 0 0 20px rgba(40,167,69,0.5);
|
|
}
|
|
|
|
.stats-table th {
|
|
background: linear-gradient(45deg, var(--noel-red), var(--noel-green));
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stats-row-full {
|
|
background: linear-gradient(90deg, var(--noel-gold), #ff9800) !important;
|
|
color: #333;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tree-decoration {
|
|
position: absolute;
|
|
top: -20px;
|
|
right: -20px;
|
|
font-size: 3rem;
|
|
animation: bounce 2s infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
|
40% { transform: translateY(-10px); }
|
|
60% { transform: translateY(-5px); }
|
|
}
|
|
|
|
.alert {
|
|
border-radius: 15px;
|
|
border: none;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.person-winner { font-size: 2rem; }
|
|
.christmas-title { font-size: 2rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="snowflake" style="left:10%; animation-duration: 15s;">❄️</div>
|
|
<div class="snowflake" style="left:20%; animation-duration: 20s; animation-delay: 1s;">❄️</div>
|
|
<div class="snowflake" style="left:30%; animation-duration: 18s; animation-delay: 2s;">❄️</div>
|
|
<div class="snowflake" style="left:60%; animation-duration: 22s;">❄️</div>
|
|
<div class="snowflake" style="left:80%; animation-duration: 16s; animation-delay: 0s;">❄️</div>
|
|
<div class="snowflake" style="left:90%; animation-duration: 19s; animation-delay: 3s;">❄️</div>
|
|
|
|
<div class="container py-5 main-container">
|
|
<div class="text-center mb-5">
|
|
<h1 class="christmas-title display-4 fw-bold mb-3">
|
|
<i class="fas fa-gift"></i> Calendrier de l'Avent <i class="fas fa-gift"></i>
|
|
</h1>
|
|
<p class="lead text-white-50">Qui aura la chance aujourd'hui ? 🎁</p>
|
|
</div>
|
|
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
{% for msg in messages %}
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
<i class="fas fa-star me-2"></i>{{ msg }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="row g-4">
|
|
<div class="col-lg-8">
|
|
<div class="card h-100">
|
|
<div class="card-body text-center p-5">
|
|
<i class="fas fa-tree tree-decoration text-success"></i>
|
|
<h2 class="h3 mb-4">
|
|
<i class="fas fa-calendar-day text-danger me-2"></i>
|
|
Jour <span class="day-badge">{{ today_day }}</span>
|
|
</h2>
|
|
|
|
{% if today_draw %}
|
|
<div class="mb-4">
|
|
<i class="fas fa-crown fa-3x text-warning mb-3"></i>
|
|
<div class="person-winner">{{ today_draw["name"] }}</div>
|
|
<small class="text-muted">
|
|
<i class="fas fa-clock me-1"></i>
|
|
{{ today_draw["draw_time"] }}
|
|
</small>
|
|
</div>
|
|
<div class="alert alert-warning">
|
|
<i class="fas fa-check-circle me-2"></i>
|
|
Déjà tiré pour aujourd'hui !
|
|
</div>
|
|
{% else %}
|
|
<div class="mb-4 py-4">
|
|
<i class="fas fa-question-circle fa-4x text-muted mb-3"></i>
|
|
<p class="h5 text-muted mb-0">Prêt pour le tirage ?</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<a href="{{ url_for('draw_today') }}" class="btn btn-christmas btn-lg">
|
|
<i class="fas fa-dice me-2"></i>
|
|
{% if today_draw %}
|
|
Revoir le tirage
|
|
{% else %}
|
|
Tirer pour aujourd'hui !
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h3 class="h5 mb-3">
|
|
<i class="fas fa-chart-bar me-2 text-primary"></i>Statistiques
|
|
</h3>
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Tirages effectués</span>
|
|
<span class="fw-bold">{{ all_draws|length }} / {{ max_days }}</span>
|
|
</div>
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-success" style="width: {{ (all_draws|length / max_days * 100)|round(0) }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mt-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-transparent border-0">
|
|
<h3 class="h5 mb-0">
|
|
<i class="fas fa-history me-2 text-info"></i>Historique
|
|
</h3>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% if all_draws %}
|
|
<div class="list-group list-group-flush">
|
|
{% for d in all_draws[-10:] %}
|
|
<div class="list-group-item px-4 py-3">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h6 class="mb-1">
|
|
<span class="badge bg-primary rounded-pill me-2">Jour {{ d["day"] }}</span>
|
|
{{ d["name"] }}
|
|
</h6>
|
|
<small class="text-muted">{{ d["draw_time"][:10] }}</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-4 text-muted">
|
|
<i class="fas fa-calendar-times fa-3x mb-3 opacity-50"></i>
|
|
<p>Aucun tirage effectué</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-transparent border-0">
|
|
<h3 class="h5 mb-0">
|
|
<i class="fas fa-users me-2 text-warning"></i>Statut des participants
|
|
</h3>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0 stats-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Tirages</th>
|
|
<th>Max</th>
|
|
<th>Restant</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for p in stats %}
|
|
<tr class="{% if p['draws'] == p['max_draws'] %}stats-row-full{% endif %}">
|
|
<td><i class="fas fa-user me-2"></i>{{ p["name"] }}</td>
|
|
<td><span class="badge bg-info">{{ p["draws"] }}</span></td>
|
|
<td>{{ p["max_draws"] }}</td>
|
|
<td>
|
|
<span class="badge {% if p['draws'] < p['max_draws'] %}bg-success{% else %}bg-secondary{% endif %}">
|
|
{{ p["max_draws"] - p["draws"] }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-5">
|
|
<p class="text-white-50 mb-0">
|
|
<i class="fas fa-heart text-danger me-1"></i>
|
|
Joyeuses fêtes ! 🎄✨
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|
|
|