andil/THE-TIP-TOP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajouter la page concept, améliorer la bannière, ajouter pages contact et concept au menu et ajouter la condition d'inscription pour plus de 18 ans

Browse Source
This commit is contained in:
Alexis SANOGO
2026-08-29 01:44:20 +02:00
parent fc9bcbf8da
commit a1ab2df975
22 changed files with 495 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/index.css
View File

@@ -1 +1,54 @@
@import "tailwindcss";
/* Animation d'entrée de la bannière d'accueil : l'illustration glisse
légèrement depuis la droite en grossissant jusqu'à sa taille finale, et
les cartes de gains apparaissent juste après avec un léger décalage
(delay défini au cas par cas via [animation-delay:...]). */
@keyframes banner-image-enter {
0% { opacity: 0; transform: translateX(70px) scale(0.9); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes banner-badge-enter {
0% { opacity: 0; transform: translateY(16px) scale(0.9); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Flottement continu des cartes de la bannière, une fois qu'elles sont
apparues (deux variantes légèrement différentes pour éviter un
mouvement trop synchronisé entre les deux cartes). Appliqué sur un
conteneur séparé de celui qui gère l'inclinaison au survol (tilt), pour
que les deux animations du `transform` ne se marchent pas dessus. */
@keyframes card-float-a {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(1.5deg); }
}
@keyframes card-float-b {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-7px) rotate(-1.5deg); }
}
/* Dérive douce des particules de thé générées en JS (position, taille,
durée et délai tirés au sort côté composant, amplitude reçue ici via la
variable CSS --tea-drift posée en style inline par particule). */
@keyframes tea-drift {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(calc(-1 * var(--tea-drift, 12px))) rotate(8deg); }
}
.animate-banner-image { animation: banner-image-enter 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-banner-badge { animation: banner-badge-enter 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-card-float-a { animation: card-float-a 4.5s ease-in-out infinite; }
.animate-card-float-b { animation: card-float-b 5.5s ease-in-out infinite; }
.animate-tea-drift { animation: tea-drift 6s ease-in-out infinite; }
/* Respecte les préférences d'accessibilité : pas d'animation pour les
personnes qui ont désactivé les mouvements dans leur OS. */
@media (prefers-reduced-motion: reduce) {
.animate-banner-image,
.animate-banner-badge,
.animate-card-float-a,
.animate-card-float-b,
.animate-tea-drift {
animation: none;
}
}