satakarimas/SuperSunday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style before n8n

Browse Source
This commit is contained in:
karim hassan
2025-08-24 16:28:35 +00:00
parent 72b5d23ce8
commit 92e6afff00
5 changed files with 312 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README_HTML_PATCH.txt Normal file
View File

@@ -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

26
frontend/public/admin/index.html
View File

@@ -1,10 +1,14 @@
<!doctype html>
<html lang="fr">
<head>
<title>Super Sunday — Admin</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Super Sunday — Admin</title>
<link rel="stylesheet" href="/assets/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/style.css?v=4" />
</head>
<body>
<header>
@@ -12,13 +16,19 @@
<nav>
<a href="/">Accueil</a>
<a href="/events">Événements</a>
<a href="/admin">Admin</a>
<a href="/admin" class="active">Admin</a>
</nav>
</header>
<main class="container">
<section class="card accent" style="padding:22px; margin:8px 0 18px;">
<div class="kicker">Organisation</div>
<h2 class="hero-title">Pilote tes tournois</h2>
<p class="muted">Création rapide, génération Americano, scoring en deux clics.</p>
</section>
<section id="loginSection" class="card">
<h2>Connexion</h2>
<h2 class="section-title">Connexion</h2>
<input id="email" placeholder="Email" />
<input id="password" type="password" placeholder="Mot de passe" />
<button id="loginBtn" class="btn">Se connecter</button>
@@ -26,9 +36,10 @@
</section>
<section id="adminSection" style="display:none;">
<h2 class="section-title">Actions rapides</h2>
<div class="grid">
<div class="card">
<h3>Nouveau tournoi</h3>
<h3>Créer un tournoi</h3>
<input id="t_name" placeholder="Nom" />
<input id="t_loc" placeholder="Lieu" />
<input id="t_sd" type="date" />
@@ -54,14 +65,13 @@
</div>
</div>
<h2 class="mt">Tournaments</h2>
<h2 class="section-title">Tournaments</h2>
<pre id="adminTournaments"></pre>
<h2>Matches</h2>
<h2 class="section-title">Matches</h2>
<pre id="adminMatches"></pre>
</section>
</main>
<!-- Bubbles -->
<div class="bg-bubble b1"></div>
<div class="bg-bubble b2"></div>
<div class="bg-bubble b3"></div>

236
frontend/public/assets/style.css
View File

@@ -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) }
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 <div> direct dans .card) */
.card > div + div { margin-top: 16px; }
/* si tu utilises des <label>, on les rapproche proprement du champ */
.card label {
display: block;
font-weight: 600;
color: #e9f1ff;
margin-top: 12px;
margin-bottom: 6px;
}
/* 3) Lisibilité du header encore meilleure sur overlay noir */
header{
background: linear-gradient(180deg, rgba(5,8,14,.96), rgba(5,8,14,.88)) !important;
border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
nav a{ color:#f2f6ff !important; }
nav a:hover{ background: rgba(255,255,255,.08) !important; }
/* 4) Cartes & blocs "empty" légèrement plus sombres pour contraster */
.card{
background: rgba(12,18,32,.72) !important;
border: 1px solid rgba(255,255,255,.12) !important;
}
.empty{
background: rgba(255,255,255,.07) !important;
border-color: rgba(255,255,255,.20) !important;
}
/* 5) Sections et titres : contraste blanc franc */
.section-title{ color:#ffffff !important; }
.hero-title{ color:#ffffff !important; }
/* === Retouches inputs + boutons === */
/* 1) Inputs & selects : fond bleu foncé homogène */
.card input,
.card select,
.card textarea {
background: #0f1b33 !important; /* bleu nuit uniforme */
color: #eaf3ff !important;
border: 1px solid rgba(255,255,255,.15) !important;
}
.card input::placeholder,
.card select::placeholder,
.card textarea::placeholder {
color: #93a4c0 !important;
}
/* 2) Boutons flat arrondis */
.btn {
display:inline-block;
padding:10px 18px;
border-radius: 999px; /* bien arrondi */
border:none;
background: #1890ff; /* bleu flat */
color:#fff;
font-weight:600;
box-shadow: none; /* pas d’ombre lourde */
transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover {
background: #3aa0ff; /* bleu un peu plus clair au hover */
transform: translateY(-1px);
}
/* Variante secondaire : outline */
.btn-outline {
border-radius: 999px;
padding:10px 16px;
border:1px solid rgba(255,255,255,.25);
background: transparent;
color:#eaf3ff;
transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-outline:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.45);
}

26
frontend/public/index.html
View File

@@ -1,33 +1,47 @@
<!doctype html>
<html lang="fr">
<head>
<title>Super Sunday — Accueil</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Super Sunday — Accueil</title>
<link rel="stylesheet" href="/assets/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/style.css?v=4" />
</head>
<body>
<header>
<h1>Super Sunday — Padel Championship</h1>
<nav>
<a href="/">Accueil</a>
<a href="/" class="active">Accueil</a>
<a href="/events">Événements</a>
<a href="/admin">Admin</a>
</nav>
</header>
<main class="container">
<div class="card accent" style="padding:22px; margin:8px 0 18px;">
<div class="kicker">Tournoi du dimanche</div>
<h2 class="hero-title">Padel, ambiance & performance</h2>
<p class="muted" style="margin:6px 0 0">Inscriptions, poules Americano, scores en direct.</p>
<div class="cta-row" style="display:flex; gap:12px; flex-wrap:wrap; margin-top:12px">
<a class="btn" href="/events">Voir les événements</a>
<a class="btn-outline" href="/admin">Espace organisateur</a>
</div>
</div>
<section>
<h2>Tournois</h2>
<h2 class="section-title">Tournois</h2>
<div id="tournaments"></div>
</section>
<section>
<h2>Matches</h2>
<h2 class="section-title">Matches</h2>
<div id="matches" class="empty">Aucun match</div>
</section>
</main>
<!-- Bubbles -->
<div class="bg-bubble b1"></div>
<div class="bg-bubble b2"></div>
<div class="bg-bubble b3"></div>

40
frontend/public/tournament/index.html
View File

@@ -1,34 +1,46 @@
<!doctype html>
<html lang="fr">
<head>
<title>Détail tournoi — Super Sunday</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Détail tournoi — Super Sunday</title>
<link rel="stylesheet" href="/assets/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/style.css?v=4" />
</head>
<body>
<header>
<h1>Détail du tournoi</h1>
<nav>
<a href="/">Accueil</a>
<a href="/events">Événements</a>
<a href="/events" class="active">Événements</a>
<a href="/admin">Admin</a>
</nav>
</header>
<main class="container">
<section id="info" class="card"></section>
<section class="card accent" style="padding:22px; margin:8px 0 18px;">
<div class="kicker">Super Sunday</div>
<h2 class="hero-title" id="ttitle">Tournoi</h2>
<p class="muted" id="tsub">Détails & participants</p>
</section>
<section>
<h2>Participants</h2>
<h2 class="section-title">Infos</h2>
<div id="info" class="card"></div>
</section>
<section>
<h2 class="section-title">Participants</h2>
<div id="participants"></div>
</section>
<section>
<h2>Matches</h2>
<h2 class="section-title">Matches</h2>
<div id="matchlist"></div>
</section>
</main>
<!-- Bubbles -->
<div class="bg-bubble b1"></div>
<div class="bg-bubble b2"></div>
<div class="bg-bubble b3"></div>
@@ -37,5 +49,19 @@
<script src="/assets/api.js"></script>
<script src="/assets/tournament.js"></script>
<script>
(function(){
const params = new URLSearchParams(location.search);
const id = Number(params.get('id')||'0');
if(!id) return;
fetch('/api/tournaments/'+id).then(r=>r.json()).then(t=>{
if(t && t.name){
document.getElementById('ttitle').textContent = t.name;
const d = (t.start_date||'') + (t.end_date? ' → '+t.end_date : '');
document.getElementById('tsub').textContent = [t.location||'Lieu à venir', d].filter(Boolean).join(' • ');
}
}).catch(()=>{});
})();
</script>
</body>
</html>