From 219561c5ae080022e76ae49a60d06ee6d1bc70c5 Mon Sep 17 00:00:00 2001 From: lubiana Date: Sun, 30 Jun 2024 15:25:48 +0200 Subject: [PATCH 01/78] #30: remove cdn css link --- public/static/css/new.min.css | 1 + templates/base.html.twig | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 public/static/css/new.min.css diff --git a/public/static/css/new.min.css b/public/static/css/new.min.css new file mode 100644 index 0000000..6375ff5 --- /dev/null +++ b/public/static/css/new.min.css @@ -0,0 +1 @@ +blockquote,header{background:var(--nc-bg-2)}dt,summary,table caption{font-weight:700}img,pre,textarea{max-width:100%}:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#000000;--nc-tx-2:#1A1A1A;--nc-bg-1:#FFFFFF;--nc-bg-2:#F6F8FA;--nc-bg-3:#E5E7EB;--nc-lk-1:#0070F3;--nc-lk-2:#0366D6;--nc-lk-tx:#FFFFFF;--nc-ac-1:#79FFE1;--nc-ac-tx:#0C4047;--nc-d-tx-1:#ffffff;--nc-d-tx-2:#eeeeee;--nc-d-bg-1:#000000;--nc-d-bg-2:#111111;--nc-d-bg-3:#222222;--nc-d-lk-1:#3291FF;--nc-d-lk-2:#0070F3;--nc-d-lk-tx:#FFFFFF;--nc-d-ac-1:#7928CA;--nc-d-ac-tx:#FFFFFF}@media (prefers-color-scheme:dark){:root{--nc-tx-1:var(--nc-d-tx-1);--nc-tx-2:var(--nc-d-tx-2);--nc-bg-1:var(--nc-d-bg-1);--nc-bg-2:var(--nc-d-bg-2);--nc-bg-3:var(--nc-d-bg-3);--nc-lk-1:var(--nc-d-lk-1);--nc-lk-2:var(--nc-d-lk-2);--nc-lk-tx:var(--nc--dlk-tx);--nc-ac-1:var(--nc-d-ac-1);--nc-ac-tx:var(--nc--dac-tx)}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,iframe,img,input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}button,html,input,select{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}::selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr,abbr:hover{cursor:help}blockquote{padding:1.5rem;border-left:5px solid var(--nc-bg-3)}blockquote :last-child{padding-bottom:0;margin-bottom:0}header{border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(50% - 50vw) 2rem;padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>:first-child{margin-top:0;padding-top:0}a img,details[open]>:last-child,header>:last-child,ol ol,ol ul,ul ol,ul ul{margin-bottom:0}a button,button,input[type=button],input[type=reset],input[type=submit]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;cursor:not-allowed}.button:enabled:hover,.button:focus,button:enabled:hover,button:focus,input[type=button]:enabled:hover,input[type=button]:focus,input[type=reset]:enabled:hover,input[type=reset]:focus,input[type=submit]:enabled:hover,input[type=submit]:focus{background:var(--nc-lk-2)}code,details,input,kbd,pre,samp,select,textarea,th,tr:nth-child(2n){background:var(--nc-bg-2)}code,kbd,pre,samp{font-family:var(--nc-font-mono);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9em}code pre,pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details,fieldset{border:1px solid var(--nc-bg-3)}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;overflow:auto}code pre{display:inline}details{padding:.6rem 1rem;border-radius:4px}summary{cursor:pointer}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}dd::before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border-radius:4px}input,select,td,textarea,th{border:1px solid var(--nc-bg-3)}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{text-align:left;padding:.5rem}table caption{margin-bottom:.5rem}ol,ul{padding-left:2rem}li{margin-top:.4rem}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}input,select,textarea{padding:6px 12px;margin-bottom:.5rem;color:var(--nc-tx-2);border-radius:4px;box-shadow:none;box-sizing:border-box} \ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index a286536..b9d8cc5 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -4,7 +4,7 @@ {% block title %}Welcome!{% endblock %} - + ")}}function zr(){var e=re().querySelector('meta[name="htmx-config"]');if(e){return E(e.content)}else{return null}}function $r(){var e=zr();if(e){Q.config=le(Q.config,e)}}jr(function(){$r();_r();var e=re().body;zt(e);var t=re().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){var t=e.target;var r=ae(t);if(r&&r.xhr){r.xhr.abort()}});const r=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){ar();oe(t,function(e){ce(e,"htmx:restored",{document:re(),triggerEvent:ce})})}else{if(r){r(e)}}};setTimeout(function(){ce(e,"htmx:load",{});e=null},0)});return Q}()}); \ No newline at end of file diff --git a/symfony.lock b/symfony.lock index 676275b..cfab487 100644 --- a/symfony.lock +++ b/symfony.lock @@ -115,6 +115,21 @@ "phpcs.xml.dist" ] }, + "symfony/asset-mapper": { + "version": "7.3", + "recipe": { + "repo": "github.com/symfony/recipes", + "branch": "main", + "version": "6.4", + "ref": "5ad1308aa756d58f999ffbe1540d1189f5d7d14a" + }, + "files": [ + "assets/app.js", + "assets/styles/app.css", + "config/packages/asset_mapper.yaml", + "importmap.php" + ] + }, "symfony/console": { "version": "7.3", "recipe": { @@ -265,5 +280,8 @@ "config/packages/web_profiler.yaml", "config/routes/web_profiler.yaml" ] + }, + "twig/extra-bundle": { + "version": "v3.21.0" } } diff --git a/templates/base.html.twig b/templates/base.html.twig index 1036cc3..942c876 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -3,27 +3,12 @@ - - {% block title %}Welcome!{% endblock %} - {% set currentDate = "now"|date("d") %} - {% if currentDate % 4 == 0 %} - - {% elseif currentDate % 4 == 1 %} - - {% elseif currentDate % 4 == 2 %} - - {% else %} - - {% endif %} - - + {% block javascripts %} + {% block importmap %}{{ importmap('app') }}{% endblock %} + {% endblock %}
From 5cb66c5012635b1fc026e3cca8c8c9a728a229f0 Mon Sep 17 00:00:00 2001 From: lubiana Date: Wed, 18 Jun 2025 20:12:17 +0200 Subject: [PATCH 67/78] booty --- assets/app.js | 15 +- assets/javascript/emoji-footprint.js | 19 + assets/javascript/modes.js | 136 +++++ assets/javascript/numberInputs.js | 55 ++ assets/javascript/radioState.js | 35 ++ assets/javascript/theme.js | 18 + assets/styles/app.css | 182 +++++- assets/styles/emoji-footprint.css | 30 + assets/styles/modes.css | 565 ++++++++++++++++++ config/packages/twig.php | 19 +- templates/_form.html.twig | 6 +- templates/base.html.twig | 56 +- templates/food_order/edit.html.twig | 8 +- templates/food_order/index.html.twig | 25 +- templates/food_order/new.html.twig | 4 +- templates/food_order/show.html.twig | 32 +- templates/food_order/table_row.html.twig | 2 +- templates/food_vendor/_form.html.twig | 6 +- templates/food_vendor/edit.html.twig | 8 +- templates/food_vendor/index.html.twig | 14 +- templates/food_vendor/new.html.twig | 8 +- templates/food_vendor/show.html.twig | 21 +- templates/menu_item/_delete_form.html.twig | 2 +- templates/menu_item/_form.html.twig | 6 +- templates/menu_item/edit.html.twig | 10 +- templates/menu_item/index.html.twig | 14 +- templates/menu_item/new.html.twig | 8 +- templates/menu_item/show.html.twig | 18 +- templates/order_item/_form.html.twig | 6 +- templates/order_item/edit.html.twig | 8 +- templates/order_item/new.html.twig | 16 +- templates/username.html.twig | 8 +- .../Controller/FoodOrderControllerTest.php | 6 +- .../Controller/FoodVendorControllerTest.php | 2 +- 34 files changed, 1236 insertions(+), 132 deletions(-) create mode 100644 assets/javascript/emoji-footprint.js create mode 100644 assets/javascript/modes.js create mode 100644 assets/javascript/numberInputs.js create mode 100644 assets/javascript/radioState.js create mode 100644 assets/javascript/theme.js create mode 100644 assets/styles/emoji-footprint.css create mode 100644 assets/styles/modes.css diff --git a/assets/app.js b/assets/app.js index 321cea2..88672ac 100644 --- a/assets/app.js +++ b/assets/app.js @@ -4,6 +4,19 @@ * This file will be included onto the page via the importmap() Twig function, * which should already be in your base.html.twig. */ +import 'bootstrap/dist/css/bootstrap.min.css'; import './styles/app.css'; +import './styles/modes.css'; +import './styles/emoji-footprint.css'; -import './javascript/htmx.js'; \ No newline at end of file +// Import modules +import './javascript/theme.js'; +import './javascript/emoji-footprint.js'; +import './javascript/modes.js'; +import './javascript/htmx.js'; +import 'bootstrap'; +import { initRadioState } from './javascript/radioState.js'; + +document.addEventListener('DOMContentLoaded', () => { + initRadioState(); +}); \ No newline at end of file diff --git a/assets/javascript/emoji-footprint.js b/assets/javascript/emoji-footprint.js new file mode 100644 index 0000000..238377b --- /dev/null +++ b/assets/javascript/emoji-footprint.js @@ -0,0 +1,19 @@ +// Sparkle effect on mouse move +document.addEventListener('mousemove', function (e) { + const emojis = ['✨', '💖', '🌟', '💅', '🦄', '🎉', '🌈']; + const sparkle = document.createElement('div'); + sparkle.className = 'emoji-footprint'; + sparkle.textContent = emojis[Math.floor(Math.random() * emojis.length)]; + sparkle.style.left = e.pageX + 'px'; + sparkle.style.top = e.pageY + 'px'; + document.body.appendChild(sparkle); + + setTimeout(() => { + sparkle.remove(); + }, 1000); +}); + +export function initEmojiFootprint() { + // The sparkle effect is already initialized when this module is imported + // This function can be used if we need to control when the effect starts +} \ No newline at end of file diff --git a/assets/javascript/modes.js b/assets/javascript/modes.js new file mode 100644 index 0000000..a288f32 --- /dev/null +++ b/assets/javascript/modes.js @@ -0,0 +1,136 @@ +// Bonkers mode functionality +function setEmojiLevelClass(mode) { + document.body.classList.remove('emoji-normal', 'emoji-enhanced', 'emoji-bonkers'); + if (mode === 'bonkers') { + document.body.classList.add('emoji-bonkers'); + } else if (mode === 'enhanced') { + document.body.classList.add('emoji-enhanced'); + } else { + document.body.classList.add('emoji-normal'); + } +} + +function initBonkersMode() { + // Check if we're in bonkers mode + const currentMode = document.documentElement.getAttribute('data-website-mode'); + setEmojiLevelClass(currentMode); + + if (currentMode === 'bonkers') { + // Apply bonkers mode immediately + document.body.classList.add('bonkers-mode'); + + // Start the fabulous effects + createExtraSparkles(); + createSlayEffects(); + + console.log('🌈✨ Bonkers mode activated! ✨🌈'); + } else { + // Remove bonkers mode if it was active + document.body.classList.remove('bonkers-mode'); + } +} + +// Function to create extra sparkles during bonkers mode +function createExtraSparkles() { + const currentMode = document.documentElement.getAttribute('data-website-mode'); + if (currentMode !== 'bonkers') return; + + const extraEmojis = [ + '💃', '🕺', + '🍑', '💦', '😏', '😈', '👅', '💋', '🥵', '😳', '🤤', '😍', '🥴', + '💕', '💖', '💗', '💘', '💝', '💞', '💟', '💌', '💏', '💑', + '🍆', '🥒', '🍌', '💦', '👀', '😉', '😌', '😍', '🥰', '😘', + '😚', '😋', '😏', '😫', '😩', '🥺', '🥵', '🥴', + '💖', '💗', '💕', '💞', '💓', '💗', '💖', '💘', '💝', + '💋', '💏', '💑' + ]; + const sparkle = document.createElement('div'); + sparkle.className = 'emoji-footprint'; + sparkle.textContent = extraEmojis[Math.floor(Math.random() * extraEmojis.length)]; + sparkle.style.left = Math.random() * window.innerWidth + 'px'; + sparkle.style.top = Math.random() * window.innerHeight + 'px'; + document.body.appendChild(sparkle); + + setTimeout(() => { + if (sparkle.parentNode) { + sparkle.remove(); + } + }, 3000); + + // Continue creating extra sparkles while in bonkers mode + const newMode = document.documentElement.getAttribute('data-website-mode'); + if (newMode === 'bonkers') { + setTimeout(() => createExtraSparkles(), 150); + } +} + +// Function to create slay effects +function createSlayEffects() { + const currentMode = document.documentElement.getAttribute('data-website-mode'); + if (currentMode !== 'bonkers') return; + + // Create floating "SLAY" text effects + const slayWords = [ + 'SLAY', 'QUEEN', 'FABULOUS', 'ICONIC', 'LEGENDARY', 'STUNNING', 'GORGEOUS', 'FLAWLESS', + 'DAZZLING', 'RADIANT', 'BREATHTAKING', 'EXQUISITE', 'DIVINE' + ]; + const slayElement = document.createElement('div'); + slayElement.className = 'slay-text'; + slayElement.textContent = slayWords[Math.floor(Math.random() * slayWords.length)]; + slayElement.style.left = Math.random() * window.innerWidth + 'px'; + slayElement.style.top = Math.random() * window.innerHeight + 'px'; + document.body.appendChild(slayElement); + + setTimeout(() => { + if (slayElement.parentNode) { + slayElement.remove(); + } + }, 3000); + + // Continue creating slay effects while in bonkers mode + const newMode = document.documentElement.getAttribute('data-website-mode'); + if (newMode === 'bonkers') { + setTimeout(() => createSlayEffects(), 800); + } +} + +// Watch for mode changes +function watchModeChanges() { + // Create a MutationObserver to watch for changes to the data-website-mode attribute + const observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + if (mutation.type === 'attributes' && mutation.attributeName === 'data-website-mode') { + const newMode = document.documentElement.getAttribute('data-website-mode'); + + if (newMode === 'bonkers') { + document.body.classList.add('bonkers-mode'); + setEmojiLevelClass(newMode); + + // Start the fabulous effects + createExtraSparkles(); + createSlayEffects(); + + console.log('🌈✨ Switched to bonkers mode! ✨🌈'); + } else { + document.body.classList.remove('bonkers-mode'); + setEmojiLevelClass(newMode); + console.log(`😴 Switched to ${newMode} mode`); + } + } + }); + }); + + // Start observing + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['data-website-mode'] + }); +} + +// Initialize when DOM is loaded +document.addEventListener('DOMContentLoaded', function() { + initBonkersMode(); + watchModeChanges(); +}); + +export { initBonkersMode, watchModeChanges }; diff --git a/assets/javascript/numberInputs.js b/assets/javascript/numberInputs.js new file mode 100644 index 0000000..a4a8dc1 --- /dev/null +++ b/assets/javascript/numberInputs.js @@ -0,0 +1,55 @@ +// Function to initialize number input buttons +function initNumberInputs(container = document) { + container.querySelectorAll('.number-input-wrapper').forEach(function(wrapper) { + const input = wrapper.querySelector('input[type="number"]'); + const decreaseBtn = wrapper.querySelector('[data-action="decrease"]'); + const increaseBtn = wrapper.querySelector('[data-action="increase"]'); + + if (!input || !decreaseBtn || !increaseBtn) return; + + // Skip if already initialized + if (decreaseBtn.hasAttribute('data-initialized')) return; + + const step = parseFloat(input.getAttribute('step')) || 1; + const min = 0; + const max = input.getAttribute('max') ? parseFloat(input.getAttribute('max')) : null; + + decreaseBtn.addEventListener('click', function() { + const currentValue = parseFloat(input.value) || 0; + const newValue = currentValue - step; + + if (min === null || newValue >= min) { + input.value = newValue; + input.dispatchEvent(new Event('change', { bubbles: true })); + } + }); + + increaseBtn.addEventListener('click', function() { + const currentValue = parseFloat(input.value) || 0; + const newValue = currentValue + step; + + if (max === null || newValue <= max) { + input.value = newValue; + input.dispatchEvent(new Event('change', { bubbles: true })); + } + }); + + // Validate input on change + input.addEventListener('input', function() { + const value = parseFloat(this.value); + + if (min !== null && value < min) { + this.value = min; + } + if (max !== null && value > max) { + this.value = max; + } + }); + + // Mark as initialized + decreaseBtn.setAttribute('data-initialized', 'true'); + increaseBtn.setAttribute('data-initialized', 'true'); + }); +} + +export { initNumberInputs }; \ No newline at end of file diff --git a/assets/javascript/radioState.js b/assets/javascript/radioState.js new file mode 100644 index 0000000..a30d311 --- /dev/null +++ b/assets/javascript/radioState.js @@ -0,0 +1,35 @@ +// Radio button state management with localStorage +function initRadioState() { + // 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; + // Set the data attribute to match the saved mode + document.documentElement.setAttribute('data-website-mode', savedMode); + } + } else { + // If no saved state, set to the currently checked radio button + const checkedRadio = document.querySelector('input[name="mode"]:checked'); + if (checkedRadio) { + document.documentElement.setAttribute('data-website-mode', checkedRadio.id); + } + } + + // Save state when radio button changes + radioButtons.forEach(radio => { + radio.addEventListener('change', function() { + if (this.checked) { + localStorage.setItem('selectedMode', this.id); + // Update the data attribute when mode changes + document.documentElement.setAttribute('data-website-mode', this.id); + } + }); + }); +} + +export { initRadioState }; \ No newline at end of file diff --git a/assets/javascript/theme.js b/assets/javascript/theme.js new file mode 100644 index 0000000..8acf738 --- /dev/null +++ b/assets/javascript/theme.js @@ -0,0 +1,18 @@ +// Theme detection and switching +const getPreferredTheme = () => { + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' +} + +const setTheme = theme => { + document.documentElement.setAttribute('data-bs-theme', theme) +} + +// Set initial theme +setTheme(getPreferredTheme()) + +// Listen for changes in user's preferred color scheme +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + setTheme(getPreferredTheme()) +}) + +export { getPreferredTheme, setTheme }; \ No newline at end of file diff --git a/assets/styles/app.css b/assets/styles/app.css index dd6181a..7400735 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -1,3 +1,179 @@ -body { - background-color: skyblue; -} +/* + * ================================================================================================= + * 💖 BUBBLEGUM PUNK THEME (LIGHT) 💖 + * + * This isn't just a theme. It's a statement. + * Unapologetically loud, pink, and quirky. + * ================================================================================================= + */ + :root, + [data-bs-theme=light] { + /* --- CORE VIBE --- */ + --bs-pink: #FF007A; /* 💖 Hyper Pink (Our Queen) */ + --bs-green: #CFFF50; /* 🧪 Toxic Slime */ + --bs-purple: #A328D6; /* 👾 Graffiti Purple */ + --bs-yellow: #F9F871; /* ⚡ Neon Lemon */ + --bs-cyan: #00F5D4; /* 💎 Glitchy Teal */ + --bs-blue: #00A9E0; /* 💦 Splash Zone */ + + /* Let's redefine ALL the core colors to match the new energy */ + --bs-primary: var(--bs-pink); + --bs-secondary: var(--bs-green); + --bs-success: var(--bs-cyan); + --bs-info: var(--bs-blue); + --bs-warning: var(--bs-yellow); + --bs-danger: #FF3D3D; /* 🚨 Code Red Rave */ + + /* --- BACKGROUNDS & TEXT --- */ + /* No more boring white! */ + --bs-body-bg: #FFF5FD; /* A soft, dreamy pink canvas */ + --bs-body-color: #4A003D; /* Dark Plum (instead of black) for text */ + --bs-heading-color: var(--bs-purple); /* Make headings POP */ + --bs-secondary-color: rgba(74, 0, 61, 0.75); /* Plum, but softer */ + --bs-tertiary-color: rgba(74, 0, 61, 0.5); + + /* Make cards and containers pure white to contrast the pink background */ + --bs-tertiary-bg: #FFFFFF; + --bs-secondary-bg: #FEF9FE; + + /* --- LINKS & CODE --- */ + --bs-link-color: var(--bs-pink); + --bs-link-hover-color: var(--bs-purple); + --bs-code-color: var(--bs-purple); + + /* --- BORDERS & SHADOWS: LET'S GET QUIRKY --- */ + --bs-border-width: 2px; /* Chunky borders! */ + --bs-border-color: #FFD6F5; /* Pink-tinted border color */ + --bs-border-color-translucent: rgba(74, 0, 61, 0.2); + --bs-border-radius: 1rem; /* Super bubbly and round */ + --bs-border-radius-sm: 0.5rem; + --bs-border-radius-lg: 1.5rem; + --bs-border-radius-pill: 50rem; + + /* Say goodbye to black shadows, hello to colored glows! */ + --bs-box-shadow: 0 4px 12px rgba(255, 0, 122, 0.2); + --bs-box-shadow-sm: 0 2px 4px rgba(255, 0, 122, 0.15); + --bs-box-shadow-lg: 0 8px 30px rgba(255, 0, 122, 0.25); + --bs-box-shadow-inset: inset 0 1px 4px rgba(74, 0, 61, 0.2); + + /* --- THE GRADIENT: THE SOUL OF THE THEME --- */ + --bs-gradient: linear-gradient(75deg, var(--bs-primary), var(--bs-secondary)); + + /* --- Don't forget the RGB values for Bootstrap components! --- */ + --bs-primary-rgb: 255, 0, 122; + --bs-secondary-rgb: 207, 255, 80; + --bs-body-color-rgb: 74, 0, 61; + --bs-body-bg-rgb: 255, 245, 253; + } + + + /* + * ================================================================================================= + * 🌙🦇 CYBER GOTH THEME (DARK) 🦇🌙 + * + * The lights are out, the neon is ON. + * A dark, moody theme with vibrant, glowing accents. + * ================================================================================================= + */ + [data-bs-theme=dark] { + color-scheme: dark; + + /* --- BACKGROUNDS & TEXT --- */ + --bs-body-bg: #1D001A; /* Deep, dark space purple */ + --bs-body-color: #FFE9FA; /* Light pink text for high contrast */ + --bs-heading-color: var(--bs-cyan); /* Glowing cyan headings */ + + --bs-tertiary-bg: #2E0028; /* A slightly lighter container background */ + --bs-secondary-bg: #3A0033; + --bs-secondary-color: rgba(255, 233, 250, 0.75); + --bs-tertiary-color: rgba(255, 233, 250, 0.5); + + /* --- LINKS & CODE --- */ + /* Using the Toxic Slime for links gives it that cyber look */ + --bs-link-color: var(--bs-green); + --bs-link-hover-color: var(--bs-cyan); + --bs-code-color: var(--bs-pink); + + /* --- BORDERS & SHADOWS: NEON GLOWS --- */ + --bs-border-color: #5C004F; + --bs-border-color-translucent: rgba(255, 255, 255, 0.15); + + /* Redefine shadows to be neon glows */ + --bs-box-shadow: 0 0 15px rgba(var(--bs-primary-rgb), 0.4); + --bs-box-shadow-lg: 0 0 30px rgba(var(--bs-primary-rgb), 0.5); + + /* --- EMPHASIS & SUBTLE BACKGROUNDS --- */ + /* These are for alerts, badges, etc. They'll be dark with glowing text. */ + --bs-primary-text-emphasis: #FF8AD1; + --bs-secondary-text-emphasis: #E2FF8A; + --bs-success-text-emphasis: #8AFFEB; + --bs-info-text-emphasis: #7ADCF5; + --bs-warning-text-emphasis: #FAF8A8; + --bs-danger-text-emphasis: #FF8A8A; + + --bs-primary-bg-subtle: #3D002B; + --bs-secondary-bg-subtle: #415215; + --bs-success-bg-subtle: #00332B; + --bs-info-bg-subtle: #00313D; + --bs-warning-bg-subtle: #3E3D1C; + --bs-danger-bg-subtle: #520E0E; + } + +/* === EMOJI LEVELS === */ +.emoji-normal .emoji-normal { display: inline; } +.emoji-normal .emoji-enhanced, +.emoji-normal .emoji-bonkers { display: none; } + +.emoji-enhanced .emoji-enhanced { display: inline; } +.emoji-enhanced .emoji-normal, +.emoji-enhanced .emoji-bonkers { display: none; } + +.emoji-bonkers .emoji-bonkers { display: inline; } +.emoji-bonkers .emoji-normal, +.emoji-bonkers .emoji-enhanced { display: none; } + /* + * ================================================================================================= + * 🌈 RAINBOW PRIDE ELEMENTS 🌈 + * + * Fabulous rainbow-themed elements to celebrate diversity and pride! + * ================================================================================================= + */ + .bg-rainbow { + background: linear-gradient( + to right, + #FF5757, /* Red */ + #FFBD59, /* Orange */ + #F9F871, /* Yellow */ + #CFFF50, /* Green */ + #00F5D4, /* Teal */ + #00A9E0, /* Blue */ + #A328D6 /* Purple */ + ); + color: white; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + font-weight: bold; + border: none; + } + + .fun-fact { + font-size: 1.1rem; + line-height: 1.6; + font-style: italic; + } + + /* Add a subtle rainbow border to the fun facts card */ + .card:has(.fun-fact) { + border-width: 2px; + border-style: solid; + border-image: linear-gradient( + to right, + #FF5757, /* Red */ + #FFBD59, /* Orange */ + #F9F871, /* Yellow */ + #CFFF50, /* Green */ + #00F5D4, /* Teal */ + #00A9E0, /* Blue */ + #A328D6 /* Purple */ + ) 1; + box-shadow: 0 4px 15px rgba(163, 40, 214, 0.2); + } diff --git a/assets/styles/emoji-footprint.css b/assets/styles/emoji-footprint.css new file mode 100644 index 0000000..b076361 --- /dev/null +++ b/assets/styles/emoji-footprint.css @@ -0,0 +1,30 @@ + +/* Emoji Footprint Animation */ +.emoji-footprint { + position: absolute; + font-size: 1.6rem; + pointer-events: none; + animation: emojiFade 1s ease-out forwards; + transform: translate(-50%, -50%) scale(1); + opacity: 1; + z-index: 9999; + text-shadow: + 0 0 4px #ff00bf, + 0 0 8px #ff80df, + 0 0 12px #ffccff; +} + +@keyframes emojiFade { + 0% { + transform: translate(-50%, -50%) scale(1); + opacity: 1; + } + 50% { + transform: translate(-50%, -50%) scale(1.5); + opacity: 0.7; + } + 100% { + transform: translate(-50%, -50%) scale(2); + opacity: 0; + } +} \ No newline at end of file diff --git a/assets/styles/modes.css b/assets/styles/modes.css new file mode 100644 index 0000000..383815b --- /dev/null +++ b/assets/styles/modes.css @@ -0,0 +1,565 @@ +/* 🌈✨ BONKERS MODE ANIMATIONS ✨🌈 */ +@keyframes rainbowGradient { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +@keyframes discoFlash { + 0%, 100% { + background-color: var(--bs-pink); + box-shadow: 0 0 20px var(--bs-pink), 0 0 40px var(--bs-pink); + } + 16.66% { + background-color: var(--bs-purple); + box-shadow: 0 0 20px var(--bs-purple), 0 0 40px var(--bs-purple); + } + 33.33% { + background-color: var(--bs-cyan); + box-shadow: 0 0 20px var(--bs-cyan), 0 0 40px var(--bs-cyan); + } + 50% { + background-color: var(--bs-yellow); + box-shadow: 0 0 20px var(--bs-yellow), 0 0 40px var(--bs-yellow); + } + 66.66% { + background-color: var(--bs-green); + box-shadow: 0 0 20px var(--bs-green), 0 0 40px var(--bs-green); + } + 83.33% { + background-color: var(--bs-orange); + box-shadow: 0 0 20px var(--bs-orange), 0 0 40px var(--bs-orange); + } +} + +@keyframes wiggle { + 0%, 100% { transform: rotate(0deg); } + 25% { transform: rotate(-2deg); } + 75% { transform: rotate(2deg); } +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +@keyframes rainbowText { + 0% { color: var(--bs-red); } + 14.28% { color: var(--bs-orange); } + 28.57% { color: var(--bs-yellow); } + 42.85% { color: var(--bs-green); } + 57.14% { color: var(--bs-cyan); } + 71.42% { color: var(--bs-purple); } + 85.71% { color: var(--bs-pink); } + 100% { color: var(--bs-red); } +} + +@keyframes shine { + 0% { left: -100%; } + 50% { left: 100%; } + 100% { left: 100%; } +} + +@keyframes slayFloat { + 0% { + transform: translateY(0) scale(0.5); + opacity: 0; + } + 20% { + transform: translateY(-20px) scale(1); + opacity: 1; + } + 80% { + transform: translateY(-60px) scale(1.2); + opacity: 0.8; + } + 100% { + transform: translateY(-100px) scale(1.5); + opacity: 0; + } +} + +/* 🎭 BONKERS MODE CLASSES 🎭 */ +.bonkers-mode { + transition: all 0.3s ease-in-out; +} + +.bonkers-mode .btn { + animation: discoFlash 0.3s infinite, wiggle 0.2s infinite; + background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red)); + background-size: 400% 400%; + animation: discoFlash 0.3s infinite, wiggle 0.2s infinite, rainbowGradient 1s ease infinite; + border: 4px solid var(--bs-white); + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); + position: relative; + overflow: hidden; + transition: all 0.2s ease; +} + +.bonkers-mode .btn:hover { + animation: discoFlash 0.2s infinite, wiggle 0.1s infinite, rainbowGradient 0.5s ease infinite; + box-shadow: 0 0 30px var(--bs-pink), 0 0 60px var(--bs-purple); +} + +.bonkers-mode .btn::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent); + transform: rotate(45deg); + animation: spin 0.5s linear infinite; +} + +.bonkers-mode .navbar { + background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red)); + background-size: 200% 200%; + animation: rainbowGradient 2s ease infinite; + box-shadow: 0 0 50px rgba(255, 105, 180, 0.9); + height: auto !important; + min-height: 56px; +} + +.bonkers-mode .navbar-brand { + animation: rainbowText 0.8s infinite, wiggle 0.4s infinite; + font-size: 1.8em; + text-shadow: 3px 3px 6px rgba(0,0,0,0.5); + position: relative; + overflow: hidden; +} + +.bonkers-mode .navbar-brand::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent); + transform: rotate(45deg); + animation: spin 2s linear infinite; +} + +.bonkers-mode .navbar-nav .nav-link { + animation: rainbowText 1.2s infinite, wiggle 0.3s infinite; + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); + border: 2px solid transparent; + border-radius: 8px; + padding: 8px 16px; + margin: 0 4px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.bonkers-mode .navbar-nav .nav-link::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); + animation: shine 1.5s ease-in-out infinite; +} + +.bonkers-mode .navbar-nav .nav-link:hover { + background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple)); + border-color: var(--bs-white); + box-shadow: 0 0 20px var(--bs-pink); + animation: discoFlash 0.5s infinite, wiggle 0.2s infinite; +} + +.bonkers-mode .navbar-nav .nav-link.active { + background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange)); + border-color: var(--bs-white); + box-shadow: 0 0 25px var(--bs-yellow); + animation: discoFlash 0.8s infinite, wiggle 0.3s infinite; +} + +.bonkers-mode .navbar-text { + animation: rainbowText 1.5s infinite, wiggle 0.5s infinite; + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); + border: 2px solid var(--bs-white); + border-radius: 8px; + padding: 6px 12px; + background: linear-gradient(45deg, var(--bs-cyan), var(--bs-blue)); + box-shadow: 0 0 15px var(--bs-cyan); +} + +.bonkers-mode .navbar-toggler { + border: 3px solid var(--bs-white); + background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple)); + animation: discoFlash 0.6s infinite, wiggle 0.4s infinite; + box-shadow: 0 0 20px var(--bs-pink); +} + +.bonkers-mode .navbar-toggler:focus { + box-shadow: 0 0 30px var(--bs-pink), 0 0 0 0.2rem rgba(255, 105, 180, 0.5); +} + +.bonkers-mode .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + animation: spin 1s linear infinite; +} + +.bonkers-mode .dropdown-menu { + background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan)); + border: 3px solid var(--bs-white); + box-shadow: 0 0 30px rgba(255,105,180,0.8); + animation: rainbowGradient 2s ease infinite; +} + +.bonkers-mode .dropdown-item { + animation: rainbowText 1.8s infinite, wiggle 0.6s infinite; + font-weight: bold; + text-shadow: 1px 1px 2px rgba(0,0,0,0.5); + border-bottom: 1px solid rgba(255,255,255,0.3); + transition: all 0.3s ease; +} + +.bonkers-mode .dropdown-item:hover { + background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange)); + color: var(--bs-white); + box-shadow: 0 0 15px var(--bs-yellow); + animation: discoFlash 0.5s infinite, wiggle 0.3s infinite; +} + +.bonkers-mode .navbar-collapse { + background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(138,43,226,0.1)); + border-radius: 8px; + margin-top: 8px; + padding: 8px; + border: 2px solid var(--bs-pink); +} + +.bonkers-mode h1, .bonkers-mode h2, .bonkers-mode h3 { + animation: rainbowText 1.5s infinite; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +.bonkers-mode .table { + background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2), rgba(0,255,255,0.2)); + animation: rainbowGradient 3s ease infinite; + border: 3px solid var(--bs-pink); + box-shadow: 0 0 30px rgba(255,105,180,0.5); +} + +.bonkers-mode .table th { + background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple)); + color: var(--bs-white); + animation: discoFlash 0.8s infinite; + text-shadow: 1px 1px 2px rgba(0,0,0,0.5); + font-size: 1.1em; +} + +.bonkers-mode .form-control { + border: 3px solid var(--bs-pink); + box-shadow: 0 0 15px var(--bs-pink); + animation: pulse 0.6s infinite; +} + +.bonkers-mode .alert { + animation: discoFlash 0.6s infinite, wiggle 0.3s infinite; + border: 4px solid var(--bs-white); + font-weight: bold; + font-size: 1.1em; +} + +.bonkers-mode .card { + background: linear-gradient(45deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2)); + border: 3px solid var(--bs-purple); + box-shadow: 0 0 35px rgba(138,43,226,0.6); + animation: pulse 1s infinite; +} + +.bonkers-mode .modal-content { + background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan)); + border: 4px solid var(--bs-white); + box-shadow: 0 0 50px rgba(255,105,180,0.8); + animation: rainbowGradient 2s ease infinite; +} + +.bonkers-mode .modal-header { + background: linear-gradient(90deg, var(--bs-yellow), var(--bs-orange)); + animation: discoFlash 0.8s infinite; + font-size: 1.2em; +} + +.bonkers-mode .number-input-wrapper { + animation: wiggle 0.4s infinite; +} + +.bonkers-mode .number-input-wrapper .btn { + animation: discoFlash 0.3s infinite, wiggle 0.2s infinite; +} + +/* Enhanced mode styles (for future use) */ +[data-website-mode="enhanced"] .btn { + background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red)); + background-size: 400% 400%; + animation: rainbowGradient 1s ease infinite; + border: 4px solid var(--bs-white); + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); + position: relative; + overflow: hidden; + transition: all 0.2s ease; +} + +[data-website-mode="enhanced"] .btn:hover { + animation: rainbowGradient 0.5s ease infinite; + box-shadow: 0 0 30px var(--bs-pink), 0 0 60px var(--bs-purple); +} + +[data-website-mode="enhanced"] .btn::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5), transparent); + transform: rotate(45deg); + animation: spin 0.5s linear infinite; +} + +[data-website-mode="enhanced"] .navbar { + background: linear-gradient(90deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow), var(--bs-green), var(--bs-orange), var(--bs-red)); + background-size: 200% 200%; + animation: rainbowGradient 2s ease infinite; + box-shadow: 0 0 50px rgba(255, 105, 180, 0.9); + height: auto !important; + min-height: 56px; +} + +[data-website-mode="enhanced"] .navbar-brand { + animation: rainbowText 0.8s infinite; + font-size: 1.8em; + text-shadow: 3px 3px 6px rgba(0,0,0,0.5); + position: relative; + overflow: hidden; +} + +[data-website-mode="enhanced"] .navbar-brand::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent); + transform: rotate(45deg); + animation: spin 2s linear infinite; +} + +[data-website-mode="enhanced"] .navbar-nav .nav-link { + animation: rainbowText 1.2s infinite; + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); + border: 2px solid transparent; + border-radius: 8px; + padding: 8px 16px; + margin: 0 4px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +[data-website-mode="enhanced"] .navbar-nav .nav-link::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); + animation: shine 1.5s ease-in-out infinite; +} + +[data-website-mode="enhanced"] .navbar-nav .nav-link:hover { + background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple)); + border-color: var(--bs-white); + box-shadow: 0 0 20px var(--bs-pink); +} + +[data-website-mode="enhanced"] .navbar-nav .nav-link.active { + background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange)); + border-color: var(--bs-white); + box-shadow: 0 0 25px var(--bs-yellow); +} + +[data-website-mode="enhanced"] .navbar-text { + animation: rainbowText 1.5s infinite; + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0,0,0,0.5); + border: 2px solid var(--bs-white); + border-radius: 8px; + padding: 6px 12px; + background: linear-gradient(45deg, var(--bs-cyan), var(--bs-blue)); + box-shadow: 0 0 15px var(--bs-cyan); +} + +[data-website-mode="enhanced"] .navbar-toggler { + border: 3px solid var(--bs-white); + background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple)); + animation: rainbowGradient 0.6s ease infinite; + box-shadow: 0 0 20px var(--bs-pink); +} + +[data-website-mode="enhanced"] .navbar-toggler:focus { + box-shadow: 0 0 30px var(--bs-pink), 0 0 0 0.2rem rgba(255, 105, 180, 0.5); +} + +[data-website-mode="enhanced"] .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + animation: spin 1s linear infinite; +} + +[data-website-mode="enhanced"] .dropdown-menu { + background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan)); + border: 3px solid var(--bs-white); + box-shadow: 0 0 30px rgba(255,105,180,0.8); + animation: rainbowGradient 2s ease infinite; +} + +[data-website-mode="enhanced"] .dropdown-item { + animation: rainbowText 1.8s infinite; + font-weight: bold; + text-shadow: 1px 1px 2px rgba(0,0,0,0.5); + border-bottom: 1px solid rgba(255,255,255,0.3); + transition: all 0.3s ease; +} + +[data-website-mode="enhanced"] .dropdown-item:hover { + background: linear-gradient(45deg, var(--bs-yellow), var(--bs-orange)); + color: var(--bs-white); + box-shadow: 0 0 15px var(--bs-yellow); +} + +[data-website-mode="enhanced"] .navbar-collapse { + background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(138,43,226,0.1)); + border-radius: 8px; + margin-top: 8px; + padding: 8px; + border: 2px solid var(--bs-pink); +} + +[data-website-mode="enhanced"] h1, [data-website-mode="enhanced"] h2, [data-website-mode="enhanced"] h3 { + animation: rainbowText 1.5s infinite; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +[data-website-mode="enhanced"] .table { + background: linear-gradient(135deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2), rgba(0,255,255,0.2)); + animation: rainbowGradient 3s ease infinite; + border: 3px solid var(--bs-pink); + box-shadow: 0 0 30px rgba(255,105,180,0.5); +} + +[data-website-mode="enhanced"] .table th { + background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple)); + color: var(--bs-white); + animation: rainbowGradient 0.8s ease infinite; + text-shadow: 1px 1px 2px rgba(0,0,0,0.5); + font-size: 1.1em; +} + +[data-website-mode="enhanced"] .form-control { + border: 3px solid var(--bs-pink); + box-shadow: 0 0 15px var(--bs-pink); +} + +[data-website-mode="enhanced"] .alert { + animation: rainbowGradient 0.6s ease infinite; + border: 4px solid var(--bs-white); + font-weight: bold; + font-size: 1.1em; +} + +[data-website-mode="enhanced"] .card { + background: linear-gradient(45deg, rgba(255,105,180,0.2), rgba(138,43,226,0.2)); + border: 3px solid var(--bs-purple); + box-shadow: 0 0 35px rgba(138,43,226,0.6); +} + +[data-website-mode="enhanced"] .modal-content { + background: linear-gradient(135deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan)); + border: 4px solid var(--bs-white); + box-shadow: 0 0 50px rgba(255,105,180,0.8); + animation: rainbowGradient 2s ease infinite; +} + +[data-website-mode="enhanced"] .modal-header { + background: linear-gradient(90deg, var(--bs-yellow), var(--bs-orange)); + animation: rainbowGradient 0.8s ease infinite; + font-size: 1.2em; +} + +[data-website-mode="enhanced"] .number-input-wrapper { +} + +[data-website-mode="enhanced"] .number-input-wrapper .btn { + animation: rainbowGradient 0.3s ease infinite; +} + +/* Emoji Footprint Animation */ +.emoji-footprint { + position: absolute; + font-size: 1.6rem; + pointer-events: none; + animation: emojiFade 1s ease-out forwards; + transform: translate(-50%, -50%) scale(1); + opacity: 1; + z-index: 9999; + text-shadow: + 0 0 4px #ff00bf, + 0 0 8px #ff80df, + 0 0 12px #ffccff; +} + +@keyframes emojiFade { + 0% { + transform: translate(-50%, -50%) scale(1); + opacity: 1; + } + 50% { + transform: translate(-50%, -50%) scale(1.5); + opacity: 0.7; + } + 100% { + transform: translate(-50%, -50%) scale(2); + opacity: 0; + } +} + +/* 💅 SLAY TEXT EFFECTS 💅 */ +.slay-text { + position: fixed; + font-size: 2rem; + font-weight: bold; + pointer-events: none; + z-index: 10000; + animation: slayFloat 3s ease-out forwards; + text-shadow: + 0 0 10px #ff00bf, + 0 0 20px #ff80df, + 0 0 30px #ffccff, + 2px 2px 4px rgba(0,0,0,0.5); + background: linear-gradient(45deg, var(--bs-pink), var(--bs-purple), var(--bs-cyan), var(--bs-yellow)); + background-size: 400% 400%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: slayFloat 3s ease-out forwards, rainbowGradient 1s ease infinite; +} diff --git a/config/packages/twig.php b/config/packages/twig.php index d08fe3f..1c06a5b 100644 --- a/config/packages/twig.php +++ b/config/packages/twig.php @@ -1,17 +1,16 @@ extension('twig', [ - 'file_name_pattern' => '*.twig', - 'globals' => [ - 'favicon' => '@App\Service\Favicon', - ], - ]); +return static function ( + ContainerConfigurator $containerConfigurator, + TwigConfig $twig, + ): void { if ($containerConfigurator->env() === 'test') { - $containerConfigurator->extension('twig', [ - 'strict_variables' => true, - ]); + $twig->strictVariables(true); } + $twig->formThemes(['bootstrap_5_layout.html.twig']); + $twig->fileNamePattern('*.twig'); + $twig->global('favicon', '@App\Service\Favicon'); }; diff --git a/templates/_form.html.twig b/templates/_form.html.twig index bf20b98..e0ed7ee 100644 --- a/templates/_form.html.twig +++ b/templates/_form.html.twig @@ -1,4 +1,4 @@ -{{ form_start(form) }} - {{ form_widget(form) }} - +{{ form_start(form, {'attr': {'class': 'mb-3'}}) }} + {{ form_widget(form, {'attr': {'class': 'form-control'}}) }} + {{ form_end(form) }} diff --git a/templates/base.html.twig b/templates/base.html.twig index 942c876..6e78f0a 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -11,19 +11,53 @@ {% endblock %} -
-

Hello {{ app.request.cookies.get('username', 'nobody') }} - change name

-