code_public/pointeuse-optimisator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Semaine parfaite : célébration kitsch quand tout boucle à +0h00

Browse Source 
La dernière heure saisie qui clôt la semaine à +0h00 pile, sans
aucune demi-journée restante, déclenche une fête assumée : fond disco
en rotation de teintes, pluie d'une fourgonnée de confettis (emojis
et rectangles), trophée bondissant et titre doré défilant. Une seule
fois par semaine et par onglet, fermeture au clic ou après 8 s, et
animation réduite pour prefers-reduced-motion.

Le serveur pose un drapeau data-perfect (solde nul, plus rien à
remplir, heures dues non nulles) sur les soldes re-rendus à chaque
saisie et rafraîchissement ; le client le détecte et célèbre.

💘 Generated with Crush

Assisted-by: Crush:glm-5.2
This commit is contained in:
Jacquin Antoine
2026-09-11 15:29:46 +02:00
parent 59a04ea07f
commit edf52acdc9
9 changed files with 167 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/templates/base.html
View File

@ -1560,6 +1560,61 @@
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip .ct-val { font-weight: 500; }
.chart-tooltip .ct-label { color: var(--muted); margin-left: .35em; }
/* ── Semaine parfaite : célébration kitsch (+0h00 pile, rien à remplir) ── */
#perfect-week {
position: fixed; inset: 0; z-index: 400;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .6rem; cursor: pointer;
background:
radial-gradient(circle at 20% 20%, rgba(255,0,128,.45), transparent 40%),
radial-gradient(circle at 80% 30%, rgba(0,201,167,.45), transparent 45%),
radial-gradient(circle at 30% 80%, rgba(255,215,0,.45), transparent 40%),
radial-gradient(circle at 75% 85%, rgba(90,80,255,.45), transparent 45%),
rgba(20, 16, 28, .88);
animation: perfect-disco 1.6s linear infinite;
}
.perfect-trophy { font-size: 4.2rem; line-height: 1; animation: perfect-bounce .7s ease-in-out infinite alternate; }
.perfect-title {
font-size: clamp(1.9rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: .04em;
background: linear-gradient(90deg, #ffd700, #ff5ec4, #7af5ff, #ffd700);
background-size: 300% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: perfect-shine 2.2s linear infinite, perfect-pop .8s cubic-bezier(.2,1.6,.4,1) 1;
text-align: center; padding: 0 1rem;
}
.perfect-sub { color: #fff; font-size: 1.05rem; text-align: center; padding: 0 1rem; }
.perfect-sub b { font-family: var(--mono); color: #ffd700; }
.perfect-close { color: rgba(255,255,255,.75); font-size: .85rem; margin-top: 1.2rem; }
.perfect-confetti {
position: absolute; top: -8vh; user-select: none; pointer-events: none;
animation: perfect-fall linear forwards;
}
@keyframes perfect-disco {
0% { filter: hue-rotate(0deg) saturate(1.2); }
100% { filter: hue-rotate(360deg) saturate(1.2); }
}
@keyframes perfect-shine {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
@keyframes perfect-pop {
0% { transform: scale(.2) rotate(-6deg); opacity: 0; }
70% { transform: scale(1.15) rotate(2deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes perfect-bounce {
0% { transform: translateY(0) scale(1); }
100% { transform: translateY(-14px) scale(1.12); }
}
@keyframes perfect-fall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(118vh) rotate(720deg); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
#perfect-week, .perfect-trophy, .perfect-title, .perfect-confetti { animation: none; }
.perfect-confetti { display: none; }
}
</style>
</head>
<body>