jules/photobooth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme Viking Celte : bois sculpte, bronze, entrelacs

Browse Source 
Palette bois fonce (#1a0f08/#2b1810), bronze (#b08d57), parchemin (#f0e6d2).
Polices MedievalSharp + Cinzel. Boutons style bois sculpte avec bordures bronze.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules
2026-06-23 00:31:51 +02:00
parent 9ce8fc0e55
commit e5c73d4855
2 changed files with 190 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
frontend/css/themes.css
View File

@@ -195,5 +195,187 @@
color: rgba(36, 4, 57, 0.5);
}
/* Import Google Fonts pour SikaPics */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');
/* --- Theme Viking Celte (bois sculpte, bronze, entrelacs) --- */
[data-theme="viking"] {
--primaire: #b08d57;
--secondaire: #f0e6d2;
--fond: #1a0f08;
--fond-carte: #2b1810;
--texte: #f0e6d2;
--texte-secondaire: #a08a6e;
--danger: #8b2500;
--succes: #5a7a3a;
--rayon: 8px;
--ombre: 0 8px 32px rgba(0,0,0,0.5);
--accent-gradient: linear-gradient(135deg, #b08d57, #d4a843);
--pellicule-fond: #1a0f08;
--pellicule-perf: #4a3520;
}
[data-theme="viking"] body,
[data-theme="viking"] {
font-family: 'MedievalSharp', 'Cinzel', 'Georgia', serif;
}
[data-theme="viking"] .ecran {
background: var(--fond);
}
[data-theme="viking"] #ecran-accueil {
background:
radial-gradient(ellipse at center, rgba(176,141,87,0.08) 0%, transparent 70%),
linear-gradient(180deg, #1a0f08 0%, #2b1810 50%, #1a0f08 100%);
}
[data-theme="viking"] #nom-evenement {
font-family: 'MedievalSharp', 'Cinzel', serif;
font-size: 4rem;
color: var(--primaire);
font-weight: 700;
text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 30px rgba(176,141,87,0.2);
letter-spacing: 3px;
}
[data-theme="viking"] .accueil-instruction {
color: var(--texte-secondaire);
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 0.95rem;
}
[data-theme="viking"] .cercle-pulse {
border-color: var(--primaire);
background: rgba(176,141,87,0.1);
box-shadow: 0 0 40px rgba(176,141,87,0.15);
}
[data-theme="viking"] .btn-mode {
background: linear-gradient(145deg, #2b1810, #3a2418);
border: 2px solid #5a3d28;
color: var(--texte);
box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(176,141,87,0.1);
}
[data-theme="viking"] .btn-mode:active {
border-color: var(--primaire);
box-shadow: 0 2px 16px rgba(176,141,87,0.3);
}
[data-theme="viking"] .btn-action {
background: var(--accent-gradient);
border: none;
color: #1a0f08;
font-weight: 700;
letter-spacing: 2px;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
[data-theme="viking"] .btn-secondaire {
background: transparent;
border: 2px solid var(--primaire);
color: var(--primaire);
}
[data-theme="viking"] .btn-retour {
color: var(--texte-secondaire);
border-color: #5a3d28;
}
[data-theme="viking"] .btn-partage {
background: linear-gradient(145deg, #2b1810, #3a2418);
border: 2px solid #5a3d28;
color: var(--texte);
}
[data-theme="viking"] .btn-filtre,
[data-theme="viking"] .btn-overlay {
background: linear-gradient(145deg, #2b1810, #3a2418);
border: 2px solid #5a3d28;
color: var(--texte);
}
[data-theme="viking"] .btn-filtre.actif,
[data-theme="viking"] .btn-overlay.actif {
border-color: var(--primaire);
background: rgba(176,141,87,0.15);
}
[data-theme="viking"] .popup-box {
background: linear-gradient(145deg, #2b1810, #1a0f08);
color: var(--texte);
border: 1px solid #5a3d28;
}
[data-theme="viking"] .popup-box input {
background: #1a0f08;
border-color: #5a3d28;
color: var(--texte);
}
[data-theme="viking"] .pave-touche {
background: rgba(176,141,87,0.1);
color: var(--texte);
border: 1px solid #5a3d28;
}
[data-theme="viking"] .pave-touche:active {
background: rgba(176,141,87,0.25);
}
[data-theme="viking"] .pave-effacer {
background: rgba(139,37,0,0.2);
}
[data-theme="viking"] .pave-valider {
background: rgba(90,122,58,0.2);
}
[data-theme="viking"] .admin-contenu {
background: #2b1810;
}
[data-theme="viking"] .admin-onglets {
background: #1a0f08;
}
[data-theme="viking"] .onglet {
color: var(--texte-secondaire);
}
[data-theme="viking"] .onglet.actif {
color: var(--primaire);
background: #2b1810;
}
[data-theme="viking"] .compte-a-rebours {
color: var(--primaire);
text-shadow: 0 4px 20px rgba(176,141,87,0.4), 0 0 60px rgba(176,141,87,0.15);
}
[data-theme="viking"] .flash-blanc {
background: rgba(240,230,210,0.85);
}
[data-theme="viking"] .booth-info {
background: rgba(26,15,8,0.8);
border: 1px solid #5a3d28;
color: var(--texte);
}
[data-theme="viking"] .compteur-accueil {
background: rgba(26,15,8,0.6);
border: 1px solid rgba(176,141,87,0.3);
color: var(--texte);
}
[data-theme="viking"] .btn-admin {
color: rgba(176,141,87,0.15);
}
[data-theme="viking"] .btn-admin:active {
color: rgba(176,141,87,0.4);
}
/* Import Google Fonts pour SikaPics + Viking */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Dancing+Script:wght@400;600;700&family=MedievalSharp&family=Montserrat:wght@300;400;500;600;700&display=swap');

7
frontend/index.html
View File

@@ -8,7 +8,7 @@
<meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="fr">
<link rel="stylesheet" href="/css/style.css?v=6">
<link rel="stylesheet" href="/css/themes.css">
<link rel="stylesheet" href="/css/themes.css?v=2">
</head>
<body>
<div id="app">
@@ -289,6 +289,10 @@
<div class="wizard-card-icon" style="background:#fbe7e8;color:#c31f48">&#10047;</div>
<span>SikaPics</span>
</button>
<button class="wizard-card" data-val="viking" onclick="wizardChoisir(this, 'theme')">
<div class="wizard-card-icon" style="background:#2b1810;color:#b08d57">&#9876;</div>
<span>Viking</span>
</button>
</div>
<button class="wizard-btn-next" onclick="wizardSuivant()">Suivant</button>
</div>
@@ -592,6 +596,7 @@
<select id="admin-theme" onchange="changerTheme(this.value)">
<option value="base">Base (Sombre moderne)</option>
<option value="sikapics">SikaPics (Rose elegant)</option>
<option value="viking">Viking Celte (Bois & Bronze)</option>
</select>
</div>
<div class="champ">