Fond de connexion : couleurs nettement plus vives + fix cache navigateur
- Fond génératif beaucoup plus lumineux et coloré (base par scène, taches plus grandes/saturées, scrim réduit à un dégradé directionnel léger côté texte) - le premier essai était encore jugé trop sombre/ invisible par l'utilisateur. - Cause réelle du "rien n'a changé" : le Caddyfile ne fixait aucun Cache-Control, donc le navigateur appliquait sa propre heuristique et gardait l'ancien index.html en cache après un déploiement. Corrigé sur le serveur (Caddyfile) et documenté dans tripoli-edge/deploy/Caddyfile.snippet : `no-cache` sur index.html (revalidation à chaque chargement), cache long `immutable` sur /assets/* (noms hachés par Vite, donc sans risque). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adam Belkacemi
parent
c5147f5cb0
commit
ecdaf19583
4 changed files with 71 additions and 27 deletions
|
|
@ -5,17 +5,17 @@ export function AuthBackground() {
|
|||
const activeIndex = useBackgroundCrossfade();
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 overflow-hidden bg-[#07080c]">
|
||||
<div className="absolute inset-0 overflow-hidden bg-[#120f24]">
|
||||
{BACKGROUND_SCENES.map((scene, i) => (
|
||||
<div
|
||||
key={scene.id}
|
||||
className="absolute inset-0 transition-opacity duration-[2400ms] ease-in-out"
|
||||
style={{ opacity: i === activeIndex ? 1 : 0 }}
|
||||
style={{ opacity: i === activeIndex ? 1 : 0, background: scene.base }}
|
||||
>
|
||||
{scene.blobs.map((blob, bi) => (
|
||||
<div
|
||||
key={bi}
|
||||
className="tc-drift absolute rounded-full blur-[90px]"
|
||||
className="tc-drift absolute rounded-full blur-[80px]"
|
||||
style={{
|
||||
top: blob.top,
|
||||
left: blob.left,
|
||||
|
|
@ -31,18 +31,16 @@ export function AuthBackground() {
|
|||
|
||||
{/* Grain léger : casse l'effet "dégradé plat", donne une texture
|
||||
plus organique - technique courante sur les fonds génératifs. */}
|
||||
<svg className="absolute inset-0 h-full w-full opacity-[0.05] mix-blend-overlay" aria-hidden="true">
|
||||
<svg className="absolute inset-0 h-full w-full opacity-[0.06] mix-blend-overlay" aria-hidden="true">
|
||||
<filter id="tc-grain">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch" />
|
||||
</filter>
|
||||
<rect width="100%" height="100%" filter="url(#tc-grain)" />
|
||||
</svg>
|
||||
|
||||
{/* Scrim en deux passes : un voile uniforme (garantit le contraste du
|
||||
texte quelle que soit la position des taches de couleur) plus un
|
||||
dégradé directionnel plus marqué côté texte. */}
|
||||
<div className="absolute inset-0 bg-[#07080c]/48" />
|
||||
<div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(6,7,11,0.74)_0%,rgba(6,7,11,0.44)_46%,rgba(6,7,11,0.22)_100%)]" />
|
||||
{/* Assombrit seulement côté texte (gauche) - le reste du fond reste
|
||||
vif et visible, pas noyé sous un voile uniforme. */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(9,7,18,0.66)_0%,rgba(9,7,18,0.28)_38%,transparent_66%)]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { TripoliLogo, TripoliWordmark } from '../layout/TripoliLogo';
|
|||
|
||||
export function AuthLayout() {
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden bg-[#07080c]">
|
||||
<div className="relative min-h-screen overflow-hidden bg-[#120f24]">
|
||||
<AuthBackground />
|
||||
|
||||
<div className="relative flex min-h-screen flex-col justify-between gap-11 p-6 sm:p-10 lg:p-[60px]">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
/**
|
||||
* Scènes du diaporama de fond de l'écran de connexion : de l'art génératif
|
||||
* (pas de photo tierce, pour rester libre de droits) - deux à trois taches
|
||||
* de couleur douces, floutées, qui dérivent lentement (voir `.tc-drift`
|
||||
* dans index.css) et s'enchaînent en fondu. Palette "zen" volontairement
|
||||
* sourde : jamais de couleur saturée à pleine opacité.
|
||||
* Scènes du diaporama de fond de l'écran de connexion : art génératif
|
||||
* (pas de photo tierce, pour rester libre de droits) - de larges taches de
|
||||
* couleur saturées, floutées, qui dérivent lentement (voir `.tc-drift` dans
|
||||
* index.css) et s'enchaînent en fondu. Volontairement lumineux et coloré,
|
||||
* pas "noir avec une pointe de couleur" - le fond DOIT se voir.
|
||||
*/
|
||||
export interface BackgroundBlob {
|
||||
color: string;
|
||||
|
|
@ -14,36 +14,46 @@ export interface BackgroundBlob {
|
|||
|
||||
export interface BackgroundScene {
|
||||
id: string;
|
||||
/** Couleur de base de la scène - un dégradé de fond, pas du noir plat. */
|
||||
base: string;
|
||||
blobs: BackgroundBlob[];
|
||||
}
|
||||
|
||||
export const BACKGROUND_SCENES: BackgroundScene[] = [
|
||||
{
|
||||
id: 'aube',
|
||||
base: 'linear-gradient(160deg, #241a3d 0%, #171029 60%, #0d0a18 100%)',
|
||||
blobs: [
|
||||
{ color: 'rgba(123,148,255,0.42)', top: '-12%', left: '58%', size: '56vw' },
|
||||
{ color: 'rgba(255,168,140,0.24)', top: '52%', left: '2%', size: '44vw' },
|
||||
{ color: 'rgba(140,163,255,0.62)', top: '-18%', left: '52%', size: '62vw' },
|
||||
{ color: 'rgba(255,140,163,0.42)', top: '46%', left: '-6%', size: '52vw' },
|
||||
{ color: 'rgba(255,196,120,0.28)', top: '62%', left: '62%', size: '40vw' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'nuit',
|
||||
base: 'linear-gradient(160deg, #1c1740 0%, #130f2c 60%, #0b0918 100%)',
|
||||
blobs: [
|
||||
{ color: 'rgba(91,102,255,0.38)', top: '-16%', left: '72%', size: '60vw' },
|
||||
{ color: 'rgba(124,92,255,0.3)', top: '58%', left: '12%', size: '50vw' },
|
||||
{ color: 'rgba(110,120,255,0.58)', top: '-20%', left: '66%', size: '66vw' },
|
||||
{ color: 'rgba(163,110,255,0.46)', top: '54%', left: '4%', size: '54vw' },
|
||||
{ color: 'rgba(94,214,255,0.22)', top: '4%', left: '2%', size: '36vw' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'foret',
|
||||
base: 'linear-gradient(160deg, #0f2a2e 0%, #0e1f26 60%, #0a1418 100%)',
|
||||
blobs: [
|
||||
{ color: 'rgba(94,214,170,0.22)', top: '8%', left: '76%', size: '48vw' },
|
||||
{ color: 'rgba(53,124,132,0.38)', top: '62%', left: '6%', size: '54vw' },
|
||||
{ color: 'rgba(94,224,180,0.48)', top: '2%', left: '70%', size: '54vw' },
|
||||
{ color: 'rgba(53,150,166,0.5)', top: '58%', left: '-4%', size: '58vw' },
|
||||
{ color: 'rgba(210,255,150,0.2)', top: '70%', left: '68%', size: '38vw' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'braise',
|
||||
base: 'linear-gradient(160deg, #351a2c 0%, #23122a 60%, #130a1a 100%)',
|
||||
blobs: [
|
||||
{ color: 'rgba(255,186,128,0.26)', top: '-6%', left: '18%', size: '50vw' },
|
||||
{ color: 'rgba(179,111,255,0.3)', top: '54%', left: '68%', size: '54vw' },
|
||||
{ color: 'rgba(255,176,110,0.5)', top: '-10%', left: '10%', size: '54vw' },
|
||||
{ color: 'rgba(210,120,255,0.44)', top: '48%', left: '64%', size: '58vw' },
|
||||
{ color: 'rgba(255,120,150,0.26)', top: '68%', left: '10%', size: '40vw' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,15 +1,26 @@
|
|||
# Bloc ajouté à /opt/edge/Caddyfile sur le serveur (fichier partagé avec
|
||||
# les 6 autres projets hébergés, donc pas dans ce dépôt en entier — voir
|
||||
# le README de ce dossier).
|
||||
# le README de ce dossier). Tenu à jour ici pour référence, mais la
|
||||
# source de vérité reste le fichier sur le serveur.
|
||||
#
|
||||
# Pourquoi Caddy et pas tripoli-edge lui-même sur 80/443 : les ports 80 et
|
||||
# 443 appartiennent déjà à ce Caddy. tripoli-edge est un service interne
|
||||
# (172.17.0.1:9000, passerelle docker0, jamais exposé publiquement) :
|
||||
# Caddy fait TLS/ACME et le routage par Host, tripoli-edge fait le reste.
|
||||
# Caddy fait TLS/ACME et le routage par Host, tripoli-edge fait le reste
|
||||
# via /api/*, /healthz et /metrics.
|
||||
#
|
||||
# Le frontend (build statique React) est servi directement par Caddy
|
||||
# depuis /var/www/tripoli-cloud, sans passer par tripoli-edge.
|
||||
#
|
||||
# Cache-Control explicite, sans quoi le navigateur applique sa propre
|
||||
# heuristique - imprévisible, et découvert à nos dépens : un déploiement
|
||||
# de frontend restait invisible pour un navigateur qui avait mis en
|
||||
# cache l'ancien index.html. `no-cache` force la revalidation à chaque
|
||||
# chargement (le fichier change à chaque déploiement) ; les fichiers
|
||||
# sous /assets/ ont un nom haché par leur contenu (Vite), donc peuvent
|
||||
# être mis en cache indéfiniment sans risque.
|
||||
|
||||
tripoli.cloud, www.tripoli.cloud {
|
||||
reverse_proxy 172.17.0.1:9000
|
||||
|
||||
header {
|
||||
Strict-Transport-Security "max-age=31536000; includeSubDomains"
|
||||
X-Content-Type-Options "nosniff"
|
||||
|
|
@ -18,6 +29,31 @@ tripoli.cloud, www.tripoli.cloud {
|
|||
-Server
|
||||
}
|
||||
|
||||
handle /api/* {
|
||||
reverse_proxy 172.17.0.1:9000
|
||||
}
|
||||
|
||||
handle /healthz {
|
||||
reverse_proxy 172.17.0.1:9000
|
||||
}
|
||||
|
||||
handle /metrics {
|
||||
reverse_proxy 172.17.0.1:9000
|
||||
}
|
||||
|
||||
handle /assets/* {
|
||||
root * /var/www/tripoli-cloud
|
||||
header Cache-Control "public, max-age=31536000, immutable"
|
||||
file_server
|
||||
}
|
||||
|
||||
handle {
|
||||
root * /var/www/tripoli-cloud
|
||||
header Cache-Control "no-cache"
|
||||
try_files {path} /index.html
|
||||
file_server
|
||||
}
|
||||
|
||||
log {
|
||||
output file /var/log/caddy/tripoli-cloud.log
|
||||
format json
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue