diff --git a/README_HTML_PATCH.txt b/README_HTML_PATCH.txt new file mode 100644 index 0000000..f0626e5 --- /dev/null +++ b/README_HTML_PATCH.txt @@ -0,0 +1,8 @@ +Patch HTML (header/menu unifié + onglet actif + liens CSS v=4) +- frontend/public/index.html +- frontend/public/tournament/index.html +- frontend/public/admin/index.html + +Installation: + unzip -o supersunday_frontend_html_header_patch.zip -d . + docker compose build web && docker compose up -d diff --git a/frontend/public/admin/index.html b/frontend/public/admin/index.html index c474c5f..a56b403 100644 --- a/frontend/public/admin/index.html +++ b/frontend/public/admin/index.html @@ -1,10 +1,14 @@ + Super Sunday — Admin - Super Sunday — Admin - + + + + +
@@ -12,13 +16,19 @@
+
+
Organisation
+

Pilote tes tournois

+

Création rapide, génération Americano, scoring en deux clics.

+
+
-

Connexion

+

Connexion

@@ -26,9 +36,10 @@
-
diff --git a/frontend/public/assets/style.css b/frontend/public/assets/style.css index bf37c58..1379f7d 100644 --- a/frontend/public/assets/style.css +++ b/frontend/public/assets/style.css @@ -20,7 +20,126 @@ } *{box-sizing:border-box} -html,body{height:100%} +html,body{height:100%}/* === Super Sunday — Dark "Sirion-like" theme overrides === */ + +/* 0) Couleurs globales + typo */ +:root{ + --ink: #e8eef6; /* texte global clair */ + --ink-strong: #ffffff; /* titres */ + --muted: #b7c3d6; /* textes secondaires */ + --border-dark: rgba(255,255,255,.08); + --surface-dark: rgba(15,23,42,.60); /* slate-900 translucide */ + --surface-dark-2: rgba(15,23,42,.72); +} + +/* 1) Fond sombre bleuté + image adoucie */ +body{ + color: var(--ink); +} +body::before{ + content:""; + position:fixed; inset:0; z-index:-2; + background: + radial-gradient(120% 85% at 20% -10%, rgba(3,7,18,.9) 0%, rgba(3,7,18,.6) 40%, rgba(3,7,18,.3) 60%, rgba(3,7,18,.2) 100%), + linear-gradient(180deg, rgba(9,14,30,.75), rgba(9,14,30,.55) 40%, rgba(9,14,30,.75)), + url("/assets/image/backgroundp24p.jpg") center top / cover no-repeat; + filter: saturate(.9) contrast(.95) brightness(.9) blur(0.5px); +} +body::after{ + /* vignette douce pour focus centre */ + content:""; + position:fixed; inset:0; z-index:-1; pointer-events:none; + background: + radial-gradient(140% 100% at 50% 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.26) 100%), + radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,0) 60%, rgba(0,0,0,.22) 100%); +} + +/* 2) Titres & textes */ +h1,h2,h3{ color: var(--ink-strong); } +.hero-title{ + color:#fff !important; + text-shadow: 0 8px 30px rgba(30,167,255,.25), 0 2px 12px rgba(0,0,0,.35); +} +.section-title{ + color:#f1f5ff; +} +.section-title::before{ + background: linear-gradient(180deg, #8ee7ff, #9fffcf); + box-shadow: 0 6px 16px rgba(143, 237, 255, .35); +} +.muted{ color: var(--muted); } + +/* 3) Header sombre translucide */ +header{ + background: rgba(10,14,26,.78); + color:#fff; + border-bottom: 1px solid var(--border-dark); + backdrop-filter: blur(10px) saturate(130%); + -webkit-backdrop-filter: blur(10px) saturate(130%); +} +nav a{ color:#e9f2ff; } +nav a:hover{ background: rgba(255,255,255,.06); } + +/* 4) Cartes dark glass */ +.card{ + background: var(--surface-dark); + border: 1px solid var(--border-dark); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + box-shadow: 0 10px 30px rgba(0,0,0,.35); +} +.card.accent{ + background: + linear-gradient(135deg, rgba(30,167,255,.12), rgba(39,217,128,.12)), + var(--surface-dark-2); + border-color: rgba(255,255,255,.12); +} + +/* 5) Inputs / selects en sombre lisible */ +input, select{ + color:#e8eef6; + background: rgba(8,12,24,.6); + border: 1px solid rgba(255,255,255,.10); +} +input::placeholder, select::placeholder{ color:#9fb0c7; } +input:focus, select:focus{ + border-color: rgba(143, 237, 255, .55); + box-shadow: 0 0 0 3px rgba(143, 237, 255, .18); +} + +/* 6) Boutons */ +.btn{ + box-shadow: 0 12px 28px rgba(30,167,255,.3); +} +.btn-outline{ + color:#eaf3ff; + background: rgba(255,255,255,.06); + border:1px solid rgba(255,255,255,.25); +} +.btn-outline:hover{ + background: rgba(255,255,255,.12); + border-color: rgba(255,255,255,.45); +} + +/* 7) État vide & préformatés */ +.empty{ + background: rgba(255,255,255,.06); + border: 1px dashed rgba(255,255,255,.18); + color: #c8d5e8; +} +pre{ + color:#e7efff; + background: rgba(8,12,24,.55); + border: 1px solid rgba(255,255,255,.08); + padding: 12px; border-radius: 12px; overflow:auto; +} + +/* 8) Légère retouche des bulles pour le mode sombre */ +.bg-bubble{ + background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0)); + mix-blend-mode: screen; + opacity:.7; +} body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; @@ -28,7 +147,7 @@ body{ line-height:1.5; /* Hero background image */ - background-image: url("/assets/images/backgroundp24p.jpg"); + background-image: url("/assets/image/backgroundp24p.jpg"); background-size: cover; background-position: center top; background-attachment: fixed; @@ -138,4 +257,115 @@ input:focus,select:focus{ border-color:#b8d8ff; box-shadow: 0 0 0 3px rgba(24,14 /* Footer (if needed) */ footer{ margin:40px 0 0; padding:24px 16px; text-align:center; color:var(--muted); - border-top:1px solid var(--border); background: rgba(255,255,255,.75); backdrop-filter: blur(6px) } \ No newline at end of file + border-top:1px solid var(--border); background: rgba(255,255,255,.75); backdrop-filter: blur(6px) } + + /* === Retouches: overlay noir + spacing formulaires === */ + +/* 1) Overlay plus noir, façon Sirion */ +body::before{ + /* on garde l'image + on fonce nettement avec un voile noir bleuté */ + background: + linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.55) 35%, rgba(0,0,0,.68)), + radial-gradient(120% 85% at 20% -10%, rgba(0,10,20,.75) 0%, rgba(0,10,20,.35) 60%, rgba(0,10,20,.20) 100%), + url("/assets/image/backgroundp24p.jpg") center top / cover no-repeat !important; + filter: saturate(.95) contrast(.98) brightness(.88) blur(0.6px); +} + +/* vignette un peu plus marquée sur les bords */ +body::after{ + background: + radial-gradient(145% 100% at 50% 0%, rgba(0,0,0,0) 52%, rgba(0,0,0,.30) 100%), + radial-gradient(125% 90% at 50% 100%, rgba(0,0,0,0) 58%, rgba(0,0,0,.24) 100%) !important; +} + +/* 2) Spacing des formulaires (inputs & dropdowns) */ +.card input, +.card select, +.card textarea { + margin-top: 8px !important; + margin-bottom: 14px !important; /* +respiration */ + min-height: 42px; /* dropdowns plus grands */ + padding: 10px 12px !important; + border-radius: 12px !important; +} + +/* espacement entre groupes de champs (si
direct dans .card) */ +.card > div + div { margin-top: 16px; } + +/* si tu utilises des