From 1353a57990381ce69b1c086790ae3b522d5b1eeb Mon Sep 17 00:00:00 2001 From: lubiana Date: Wed, 11 Jun 2025 21:42:33 +0200 Subject: [PATCH] enable mode selection --- public/assets/css/styles.css | 158 ----------------------------------- public/assets/js/app.js | 21 +++++ templates/base.html.twig | 10 +++ 3 files changed, 31 insertions(+), 158 deletions(-) diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css index d186373..40f1ecd 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -28,161 +28,3 @@ opacity: 0; } } - -/* - * ================================================================================================= - * ✨💅 GAY, SLAY & FABULOUS THEME 💅✨ - * - * A Bootstrap override that's unapologetically queer, vibrant, and readable. - * Because your website deserves to be as iconic as you are. - * - * Designed with love, glitter, and a whole lot of sass. - * ================================================================================================= - */ - -:root { - /* 🌈✨ The Main Attraction: A Vibrant & Proud Palette ✨🌈 */ - --bs-red: #FF3860; /* 🍒 Cherry Pop Realness */ - --bs-orange: #FF9F43; /* 🍊 Tangerine Dream Queen */ - --bs-yellow: #FFE156; /* 🌟 Superstar Spotlight */ - --bs-green: #34C759; /* 🌿 Growth & chosen family */ - --bs-teal: #20c997; /* 🧜‍♀️ Mermaid's Grotto */ - --bs-cyan: #4ED6FF; /* 🧊 Iced Genderfluid */ - --bs-blue: #5AC8FA; /* 🦋 Blue Bi You */ - --bs-indigo: #6C63FF; /* 🦄 Unicorn Energy */ - --bs-purple: #AF52DE; /* 💜 Violets for Visibility */ - --bs-pink: #FF6F91; /* 💖 Queerberry Kiss */ - - /* 💅 Neutrals That Are Anything But Neutral 💅 */ - --bs-black: #1A202C; /* 🕶️ Midnight Manifesto */ - --bs-white: #F8F7FF; /* ☁️ Cloud Nine Comfort */ - --bs-gray: #A0AEC0; /* 🌫️ Foggy Festival Morning */ - --bs-gray-dark: #2D3748; /* 🖤 Emo Afterparty */ - --bs-gray-100: #F7FAFC; - --bs-gray-200: #EDF2F7; - --bs-gray-300: #E2E8F0; - --bs-gray-400: #CBD5E1; - --bs-gray-500: #A0AEC0; - --bs-gray-600: #718096; - --bs-gray-700: #4A5568; - --bs-gray-800: #2D3748; - --bs-gray-900: #1A202C; - - /* 💖 Semantic Roles: Give Every Color a Job 💖 */ - --bs-primary: var(--bs-indigo); /* Main Character Energy */ - --bs-secondary: var(--bs-pink); /* Sassy Sidekick */ - --bs-success: var(--bs-green); /* Yas, Queen! (Success) */ - --bs-info: var(--bs-cyan); /* The Tea (Information) */ - --bs-warning: var(--bs-orange); /* Hun, Be Careful (Warning) */ - --bs-danger: var(--bs-red); /* Not Today, Satan (Danger) */ - --bs-light: var(--bs-gray-100); /* Daytime Disco */ - --bs-dark: var(--bs-gray-900); /* Velvet Rope */ - - /* 📖 Fonts with Personality 📖 */ - /* Recommendation: Import "Quicksand" and "Fira Mono" from Google Fonts for the full effect! */ - --bs-font-sans-serif: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --bs-font-monospace: "Fira Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - - /* ✨ The Gradient That Slays ✨ */ - --bs-gradient: linear-gradient(93deg, var(--bs-indigo), var(--bs-pink) 50%, var(--bs-orange)); - - /* 🎨 Core Styles for a Flawless Look 🎨 */ - --bs-body-color: var(--bs-gray-800); - --bs-body-bg: var(--bs-white); - --bs-emphasis-color: var(--bs-black); - --bs-secondary-color: rgba(45, 55, 72, 0.75); - --bs-secondary-bg: var(--bs-gray-200); - --bs-tertiary-color: rgba(45, 55, 72, 0.5); - --bs-tertiary-bg: var(--bs-gray-100); - --bs-heading-color: inherit; - --bs-link-color: var(--bs-primary); - --bs-link-hover-color: var(--bs-purple); - --bs-code-color: var(--bs-pink); - --bs-highlight-bg: #fff9c4; /* A soft, buttery highlight */ - --bs-border-color: var(--bs-gray-300); - --bs-border-color-translucent: rgba(0, 0, 0, 0.175); - --bs-border-radius: 0.5rem; /* A little softer, a little friendlier */ - --bs-border-radius-lg: 0.75rem; - --bs-border-radius-sm: 0.25rem; - --bs-box-shadow: 0 0.25rem 1.5rem rgba(45, 55, 72, 0.1); - --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(45, 55, 72, 0.07); - --bs-box-shadow-lg: 0 1rem 3rem rgba(45, 55, 72, 0.15); -} - -/* - * ================================================================================================= - * 🌙✨ DARK MODE: VOGUE AFTER MIDNIGHT ✨🌙 - * - * Because fabulousness doesn't sleep. This is for the night owls, the dreamers, - * and everyone who knows the party really starts after dark. - * ================================================================================================= - */ - -[data-bs-theme=dark] { - color-scheme: dark; - - /* 💅 Dark Mode Neutrals: Still Chic 💅 */ - --bs-body-color: var(--bs-gray-300); - --bs-body-bg: var(--bs-gray-900); - --bs-emphasis-color: var(--bs-white); - --bs-secondary-color: rgba(237, 242, 247, 0.75); - --bs-secondary-bg: var(--bs-gray-800); - --bs-tertiary-color: rgba(237, 242, 247, 0.5); - --bs-tertiary-bg: #222938; /* A slightly bluer dark gray */ - - /* 💖 Semantic Roles: Nightlife Edition 💖 */ - /* We use the same vibrant colors but adjust text emphasis and backgrounds for contrast */ - --bs-primary-text-emphasis: #A3A0FF; - --bs-secondary-text-emphasis: #FFA8B9; - --bs-success-text-emphasis: #79F3B3; - --bs-info-text-emphasis: #99E5FF; - --bs-warning-text-emphasis: #FFC98B; - --bs-danger-text-emphasis: #FF7B96; - --bs-light-text-emphasis: #F7FAFC; - --bs-dark-text-emphasis: #E2E8F0; - - --bs-primary-bg-subtle: #2A2859; - --bs-secondary-bg-subtle: #592432; - --bs-success-bg-subtle: #144A29; - --bs-info-bg-subtle: #194A59; - --bs-warning-bg-subtle: #593918; - --bs-danger-bg-subtle: #591422; - --bs-light-bg-subtle: var(--bs-gray-800); - --bs-dark-bg-subtle: var(--bs-gray-900); - - --bs-primary-border-subtle: #4D49A6; - --bs-secondary-border-subtle: #A6435C; - --bs-success-border-subtle: #248047; - --bs-info-border-subtle: #2D8DA6; - --bs-warning-border-subtle: #A66629; - --bs-danger-border-subtle: #A6273D; - --bs-light-border-subtle: var(--bs-gray-700); - --bs-dark-border-subtle: var(--bs-gray-800); - - /* 🎨 Core Styles for the Afterparty 🎨 */ - --bs-heading-color: inherit; - --bs-link-color: var(--bs-blue); - --bs-link-hover-color: var(--bs-cyan); - --bs-code-color: var(--bs-secondary); - --bs-highlight-bg: #403d07; - --bs-border-color: var(--bs-gray-700); - --bs-border-color-translucent: rgba(255, 255, 255, 0.15); -} -/* Top Navigation Bar Styles */ -main { - margin-top: 20px; -} - -.navbar-brand { - font-weight: bold; -} - -.navbar-text { - font-size: 0.9rem; -} - -@media (max-width: 992px) { - .navbar-text { - display: none; - } -} diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 0d612f3..96827b7 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -68,6 +68,27 @@ function initNumberInputs(container = document) { } document.addEventListener('DOMContentLoaded', function() { + // Store and retrieve radio button state + const radioButtons = document.querySelectorAll('input[name="mode"]'); + + // Load saved state on page load + const savedMode = localStorage.getItem('selectedMode'); + if (savedMode) { + const radioToCheck = document.getElementById(savedMode); + if (radioToCheck) { + radioToCheck.checked = true; + } + } + + // Save state when radio button changes + radioButtons.forEach(radio => { + radio.addEventListener('change', function() { + if (this.checked) { + localStorage.setItem('selectedMode', this.id); + } + }); + }); + // Bootstrap Modal handling const htmxModal = document.getElementById('htmxModal'); if (htmxModal) { diff --git a/templates/base.html.twig b/templates/base.html.twig index ed3154d..5c64155 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -29,6 +29,16 @@ Home +
+ + + + + + + + +