enable mode selection
This commit is contained in:
parent
04c85e10ba
commit
1353a57990
SSH key fingerprint:
SHA256:vW1EA0fRR3Fw+dD/sM0K+x3Il2gSry6YRYHqOeQwrfk
3 changed files with 31 additions and 158 deletions
|
|
@ -28,161 +28,3 @@
|
||||||
opacity: 0;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -68,6 +68,27 @@ function initNumberInputs(container = document) {
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
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
|
// Bootstrap Modal handling
|
||||||
const htmxModal = document.getElementById('htmxModal');
|
const htmxModal = document.getElementById('htmxModal');
|
||||||
if (htmxModal) {
|
if (htmxModal) {
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,16 @@
|
||||||
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div class="btn-group ms-auto" role="group" aria-label="Mode selection">
|
||||||
|
<input type="radio" class="btn-check" name="mode" id="normal" autocomplete="off" checked>
|
||||||
|
<label class="btn btn-outline-primary" for="normal">Normal</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="mode" id="enhanced" autocomplete="off">
|
||||||
|
<label class="btn btn-outline-primary" for="enhanced">Enhanced</label>
|
||||||
|
|
||||||
|
<input type="radio" class="btn-check" name="mode" id="bonkers" autocomplete="off">
|
||||||
|
<label class="btn btn-outline-primary" for="bonkers">Bonkers</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue