diff --git a/frontend/css/themes.css b/frontend/css/themes.css new file mode 100644 index 0000000..9308f38 --- /dev/null +++ b/frontend/css/themes.css @@ -0,0 +1,197 @@ +/* === Themes Photobooth === */ + +/* --- Theme Base (defaut, sombre moderne) --- */ +[data-theme="base"] { + --primaire: #e91e63; + --secondaire: #ffffff; + --fond: #1a1a2e; + --fond-carte: #16213e; + --texte: #ffffff; + --texte-secondaire: #a0a0b0; + --danger: #f44336; + --succes: #4caf50; + --rayon: 16px; + --ombre: 0 8px 32px rgba(0,0,0,0.3); + --accent-gradient: linear-gradient(135deg, #e91e63, #ff5252); + --pellicule-fond: #141414; + --pellicule-perf: #3a3a3a; +} + +/* --- Theme SikaPics (rose elegant, style photographe) --- */ +[data-theme="sikapics"] { + --primaire: #c31f48; + --secondaire: #240439; + --fond: #fbe7e8; + --fond-carte: #ffffff; + --texte: #240439; + --texte-secondaire: #666666; + --danger: #c31f48; + --succes: #4caf50; + --rayon: 20px; + --ombre: 0 4px 24px rgba(195, 31, 72, 0.12); + --accent-gradient: linear-gradient(135deg, #c31f48, #f33362); + --pellicule-fond: #240439; + --pellicule-perf: #4a2060; +} + +[data-theme="sikapics"] body, +[data-theme="sikapics"] { + font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif; +} + +[data-theme="sikapics"] .ecran { + background: var(--fond); +} + +[data-theme="sikapics"] #ecran-accueil { + background: linear-gradient(160deg, #fbe7e8 0%, #fff0f1 40%, #ffffff 100%); +} + +[data-theme="sikapics"] #nom-evenement { + font-family: 'Dancing Script', 'Kalnia', cursive, serif; + font-size: 4.5rem; + color: var(--primaire); + font-weight: 600; +} + +[data-theme="sikapics"] .accueil-instruction { + color: var(--texte-secondaire); + font-weight: 300; + letter-spacing: 2px; + text-transform: uppercase; + font-size: 1rem; +} + +[data-theme="sikapics"] .cercle-pulse { + border-color: var(--primaire); + background: rgba(195, 31, 72, 0.1); +} + +[data-theme="sikapics"] .btn-mode { + background: #ffffff; + border: 2px solid #eee; + color: var(--texte); + box-shadow: 0 2px 12px rgba(0,0,0,0.06); +} + +[data-theme="sikapics"] .btn-mode:active { + border-color: var(--primaire); + box-shadow: 0 2px 16px rgba(195, 31, 72, 0.2); +} + +[data-theme="sikapics"] .btn-action { + background: var(--accent-gradient); + border: none; + color: #fff; + font-weight: 600; + letter-spacing: 1px; +} + +[data-theme="sikapics"] .btn-secondaire { + background: transparent; + border: 2px solid var(--primaire); + color: var(--primaire); +} + +[data-theme="sikapics"] .btn-retour { + color: var(--texte-secondaire); + border-color: #ccc; +} + +[data-theme="sikapics"] .btn-partage { + background: #ffffff; + border: 2px solid #eee; + color: var(--texte); +} + +[data-theme="sikapics"] .btn-filtre, +[data-theme="sikapics"] .btn-overlay { + background: #ffffff; + border: 2px solid #eee; + color: var(--texte); +} + +[data-theme="sikapics"] .btn-filtre.actif, +[data-theme="sikapics"] .btn-overlay.actif { + border-color: var(--primaire); + background: rgba(195, 31, 72, 0.08); +} + +[data-theme="sikapics"] .popup-box { + background: #ffffff; + color: var(--texte); +} + +[data-theme="sikapics"] .popup-box input { + background: #f8f0f1; + border-color: #e0c0c5; + color: var(--texte); +} + +[data-theme="sikapics"] .pave-touche { + background: rgba(195, 31, 72, 0.08); + color: var(--texte); +} + +[data-theme="sikapics"] .pave-touche:active { + background: rgba(195, 31, 72, 0.2); +} + +[data-theme="sikapics"] .pave-effacer { + background: rgba(195, 31, 72, 0.15); +} + +[data-theme="sikapics"] .pave-valider { + background: rgba(76, 175, 80, 0.15); +} + +[data-theme="sikapics"] .admin-contenu { + background: #ffffff; +} + +[data-theme="sikapics"] .admin-onglets { + background: #f8f0f1; +} + +[data-theme="sikapics"] .onglet { + color: var(--texte-secondaire); +} + +[data-theme="sikapics"] .onglet.actif { + color: var(--primaire); + background: #ffffff; +} + +[data-theme="sikapics"] .compte-a-rebours { + color: var(--primaire); + text-shadow: 0 4px 20px rgba(195, 31, 72, 0.3); +} + +[data-theme="sikapics"] .flash-blanc { + background: rgba(251, 231, 232, 0.9); +} + +[data-theme="sikapics"] .booth-info { + background: rgba(36, 4, 57, 0.7); + color: #fff; +} + +[data-theme="sikapics"] .booth-code { + color: #ffffff; +} + +[data-theme="sikapics"] .compteur-accueil { + background: rgba(36, 4, 57, 0.5); + color: #ffffff; +} + +[data-theme="sikapics"] .btn-admin { + color: rgba(36, 4, 57, 0.2); +} + +[data-theme="sikapics"] .btn-admin:active { + 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'); diff --git a/frontend/index.html b/frontend/index.html index d35445d..6d690f4 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,6 +5,7 @@