4sp-dv 1.0.48 → 1.1.1

package/4simpleproblems_v5.html

@@ -6,11 +6,14 @@
     <title>4SP - VERSION 5 CLIENT</title>
     <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo.png">
 
-    <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.47/logged-in/">
+    <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.44/logged-in/">
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
     
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    
+    <script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
+
     <style>
     body { 
         background-color: #040404; 
@@ -45,6 +48,27 @@
         z-index: 60; 
         transition: background-color 0.3s ease, border-color 0.3s ease;
         position: relative; 
+        overflow: visible; 
+    }
+
+    /* --- FIREWORKS CONTAINER --- */
+    #fireworks-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none; /* Let clicks pass through */
+        z-index: 1; /* Sit above background */
+        opacity: 0;
+        transition: opacity 0.5s ease;
+        overflow: hidden; 
+    }
+    
+    /* Ensure navbar content sits ABOVE the fireworks */
+    #navbar-container > *:not(#fireworks-container) {
+        position: relative;
+        z-index: 10;
     }
 
     /* --- FIXED OVERLAY LOGIC --- */
@@ -171,15 +195,15 @@
         z-index: 50;
     }
 
-    /* --- DISABLE ANIMATIONS FOR AUTH BTN --- */
     #auth-btn, #auth-btn:hover, #auth-btn:active {
         transform: none !important;
         transition: none !important;
         background-color: transparent !important;
-        z-index: auto !important; 
+        z-index: 65 !important;
+        cursor: pointer !important;
     }
 
-    /* Auth Menu & Settings */
+    /* --- Auth Menu & Settings (Updated for dynamic theming) --- */
     .auth-menu {
         position: absolute; 
         right: 0; 
@@ -192,7 +216,7 @@
         display: none; 
         flex-direction: column; 
         gap: 0.5rem; 
-        z-index: 50;
+        z-index: 70;
         box-shadow: 0 10px 30px rgba(0,0,0,0.6);
         transform-origin: top right;
     }
@@ -213,9 +237,10 @@
         align-items: center; 
         gap: 0.75rem; 
         padding: 0.75rem 1rem;
-        color: var(--menu-text, #d1d5db); 
-        background: #0a0a0a;
-        border: 1px solid #333;
+        /* UPDATED: Uses variables for dynamic theme support */
+        color: var(--menu-item-text, #d1d5db); 
+        background: var(--menu-item-bg, #0a0a0a);
+        border: 1px solid var(--menu-item-border, #333);
         border-radius: 1rem;
         text-decoration: none; 
         font-size: 0.9rem;
@@ -225,9 +250,10 @@
     }
     
     .auth-menu-item:hover { 
-        background-color: #000; 
-        border-color: #fff; 
-        color: #fff;
+        /* UPDATED: Uses variables for dynamic theme support */
+        background-color: var(--menu-item-hover-bg, #000); 
+        border-color: var(--menu-item-hover-border, #fff); 
+        color: var(--menu-item-hover-text, #fff);
         transform: translateY(-2px) scale(1.02);
         box-shadow: 0 5px 15px rgba(255,255,255,0.05);
     }
@@ -236,13 +262,6 @@
         transform: translateY(0) scale(0.98);
     }
 
-    .auth-menu-item .fa-gear, .nav-tab .fa-gear {
-        display: inline-block;
-        transform-origin: center;
-        /* Quick transition for each "click" step */
-        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
-
     .auth-header { 
         padding: 0.5rem 1rem; 
         border-bottom: 1px solid var(--menu-divider, #333); 
@@ -312,13 +331,13 @@
     }
 
     .settings-box { 
-        border: 1px solid #333; border-radius: 1.5rem; 
+        border: 1px solid #333; border-radius: 1rem; 
         background-color: #000000; padding: 1.5rem; margin-bottom: 1.5rem;
     }
     
     .input-text-style, .input-select-style {
         width: 100%; padding: 0.75rem; border: 1px solid #252525; 
-        background-color: #111111; border-radius: 1rem; color: #c0c0c0; transition: all 0.2s;
+        background-color: #111111; border-radius: 0.5rem; color: #c0c0c0; transition: all 0.2s;
     }
     .input-text-style:focus, .input-select-style:focus { 
         border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5);
@@ -326,24 +345,13 @@
 
     .input-key-style {
         width: 4rem; padding: 0.75rem; border: 1px solid #252525; 
-        background-color: #111111; border-radius: 1rem; color: #c0c0c0; 
+        background-color: #111111; border-radius: 0.5rem; color: #c0c0c0; 
         transition: all 0.2s; font-size: 1.1rem; text-align: center;
         font-weight: 500; text-transform: uppercase; caret-color: transparent;
     }
     .input-key-style:focus {
         border-color: #505050; outline: none; box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.5);
     }
-    
-    /* Preference Toggles */
-    .icon-btn.off {
-        border-color: #ef4444;
-        color: #ef4444;
-        background-color: rgba(239, 68, 68, 0.05);
-    }
-    .icon-btn.off:hover {
-        background-color: rgba(239, 68, 68, 0.1);
-        border-color: #f87171;
-    }
     .input-key-style::placeholder { font-size: 1rem; text-transform: none; }
     
     .general-message-area { min-height: 20px; margin-top: 1rem; font-weight: 400; }
@@ -398,21 +406,8 @@
     }
     .shake-anim { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
 
-    /* Animation Control */
-    body.no-animations *, 
-    body.no-animations *:hover,
-    body.no-animations *:active,
-    body.no-animations *:focus {
-        transition: none !important;
-        animation: none !important;
-        transform: none !important;
-        box-shadow: none !important;
-    }
-
-    body.no-animations .auth-menu-item .fa-gear, 
-    body.no-animations .nav-tab .fa-gear {
-        transition: none !important;
-        transform: none !important;
+    body.no-animations * {
+        transition: none !important; animation: none !important; transform: none !important;
     }
 
     /* Bubbly Spring Transition */
@@ -579,6 +574,8 @@
     </div>
 
     <div id="navbar-container">
+        <div id="fireworks-container"></div>
+        
         <img src="https://cdn.jsdelivr.net/npm/4sp-asset-library@latest/logo.png" id="navbar-logo" class="navbar-logo" alt="Logo">
         
         <div class="tab-wrapper">
@@ -635,29 +632,13 @@
                     <h3 class="text-3xl font-bold text-white mb-6">General Settings</h3>
                     
                     <div class="settings-box">
-                        <h3 class="text-xl font-bold text-white mb-2">Account Details & Preferences</h3>
-                        
+                        <h3 class="text-xl font-bold text-white mb-2">Account Username</h3>
                         <label class="block text-gray-400 text-sm mb-2 font-light">New Username</label>
-                        <div class="flex gap-2 mb-6">
+                        <div class="flex gap-2">
                             <input type="text" id="settings-username-input" class="input-text-style" placeholder="Enter username">
                             <button id="save-username-btn" class="btn-toolbar-style btn-primary-override">Save</button>
                         </div>
                         <p id="username-msg" class="general-message-area text-sm mt-2"></p>
-
-                        <div class="flex gap-8 items-center pt-4 border-t border-[#1a1a1a]">
-                            <div class="flex flex-col items-center gap-2">
-                                <button id="toggle-animations-btn" class="icon-btn" title="Toggle Navbar Animations">
-                                    <i class="fa-solid fa-wand-magic-sparkles"></i>
-                                </button>
-                                <span class="text-xs text-gray-500">Animations</span>
-                            </div>
-                            <div class="flex flex-col items-center gap-2">
-                                <button id="toggle-sounds-btn" class="icon-btn" title="Toggle UI Sounds">
-                                    <i class="fa-solid fa-volume-high"></i>
-                                </button>
-                                <span class="text-xs text-gray-500">Sounds</span>
-                            </div>
-                        </div>
                     </div>
 
                     <h3 class="text-xl font-bold text-white mb-2 mt-6">Organization</h3>
@@ -710,8 +691,7 @@
                                     
                                     <label class="block text-gray-400 text-xs mb-2 font-light">Background Color</label>
                                     <div class="flex flex-wrap gap-2 mb-6" id="pfp-color-grid">
-                                        <!-- Colors generated by JS -->
-                                    </div>
+                                        </div>
                                     
                                     <button id="save-letter-pfp-btn" class="btn-toolbar-style btn-primary-override w-full justify-center">Set Letter Avatar</button>
                                 </div>
@@ -732,8 +712,7 @@
 
                     <h3 class="text-xl font-bold text-white mb-2">Navigation Bar Theme</h3>
                     <div class="settings-box p-4">
-                        <div id="theme-picker-container">
-                        </div>
+                        <div id="theme-picker-container"></div>
                     </div>
                 </div>
 
@@ -872,7 +851,7 @@
         const displayUsername = document.getElementById('display-username');
         const displayEmail = document.getElementById('display-email');
 
-        const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.47/logged-in/';
+        const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.44/logged-in/';
         
         // Preload Logos
         const preloadImgs = [
@@ -886,8 +865,10 @@
         const USER_DATA_KEY = 'local_user_data';
         const LAST_PAGE_KEY = 'local_last_page';
         const OWNER_EMAIL = "4simpleproblems@gmail.com"; // For admin checks
+        const FIREWORKS_SETTINGS_KEY = 'fireworks_settings';
 
-        const PAGE_DATA = {
+        // RENAMED TO AVOID CONFLICTS
+        const CLIENT_PAGE_DATA = {
             "dashboard": { "name": "Dashboard", "icon": "fa-solid fa-house-user", "url": "dashboard.html" },
             "soundboard": { "name": "Soundboard", "icon": "fa-solid fa-volume-up", "url": "soundboard.html" },
             "notes": { "name": "Notes", "icon": "fa-solid fa-sticky-note", "url": "notes.html" },
@@ -897,12 +878,34 @@
             "dictionary": { "name": "Dictionary", "icon": "fa-solid fa-book", "url": "dictionary.html" },
             "messenger-v2": { "name": "Messenger", "icon": "fa-solid fa-comments", "url": "messenger-v2.html" },
             "games": { "name": "GAMES", "icon": "fa-solid fa-gamepad", "url": "games.html" },
+            "velium": { "name": "Velium", "icon": "fa-solid fa-music", "url": "velium.html" },
             "settings": { "name": "Settings", "icon": "fa-solid fa-gear", "url": "settings.html" }
         };
 
         let currentUser = null;
         let userDataUnsubscribe = null;
 
+        // --- FIREWORKS ENGINE INITIALIZATION ---
+        const fwContainer = document.getElementById('fireworks-container');
+        
+        // HARDCODED SETTINGS AS REQUESTED
+        const fireworks = new Fireworks.default(fwContainer, {
+             autoresize: true,
+             opacity: 1.0, // Hardcoded
+             acceleration: 1.05,
+             friction: 0.97,
+             gravity: 1.5,
+             particles: 50, // Hardcoded
+             traceLength: 3,
+             traceSpeed: 10,
+             explosion: 5,
+             intensity: 5, // Hardcoded
+             flickering: 50,
+             lineStyle: 'round',
+             rocketsPoint: { min: 50, max: 50 }
+        });
+
+
         // --- ADMIN KEYBINDS LOGIC (Updated to Match admin_keybinds.js exactly) ---
         function initAdminKeybinds(db, auth, user) {
             console.log("[Admin Keybinds] Initializing for", user.uid);
@@ -1163,7 +1166,7 @@
             
             let currentPath = activePageUrl.replace(BASE_URL, '');
             
-            Object.entries(PAGE_DATA).forEach(([key, page]) => {
+            Object.entries(CLIENT_PAGE_DATA).forEach(([key, page]) => {
                 const isAuth = page.url === currentPath;
                 const tab = document.createElement('a');
                 tab.className = `nav-tab ${isAuth ? 'active' : ''}`;
@@ -1239,7 +1242,7 @@
             }, 50);
         }
 
-        // Auth Menu
+        // Auth Menu (Wait for DOMContentLoaded equivalent in module)
         if (authBtn) {
             authBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
@@ -1362,9 +1365,6 @@
             }
             
             authBtn.innerHTML = pfpHtml;
-            authBtn.style.padding = '0'; // Remove padding to let avatar fill
-            authBtn.style.overflow = 'hidden'; // Ensure roundness
-            authBtn.style.border = '1px solid #4b5563'; // Maintain border
         }
 
         // --- Auto-Login Logic ---
@@ -1487,7 +1487,7 @@
 
             // Priority: Last Page > > Default
             if (lastPage) {
-                 const isValid = Object.values(PAGE_DATA).some(p => p.url === lastPage);
+                 const isValid = Object.values(CLIENT_PAGE_DATA).some(p => p.url === lastPage);
                  if (isValid) startPage = lastPage;
             }
             
@@ -1543,7 +1543,7 @@
             if (loader && loaderTitle && loaderBar) {
                 // Determine Title
                 let pageTitle = "Loading...";
-                const pageEntry = Object.values(PAGE_DATA).find(p => p.url === cleanPageName || p.url.includes(lookupName));
+                const pageEntry = Object.values(CLIENT_PAGE_DATA).find(p => p.url === cleanPageName || p.url.includes(lookupName));
                 if (pageEntry) pageTitle = pageEntry.name;
                 
                 loaderTitle.textContent = pageTitle;
@@ -2148,8 +2148,42 @@
                 if (!res.ok) return;
                 let themes = await res.json();
                 
+                // --- INJECT CUSTOM "THE NEW YEAR" THEME & REMOVE ROYAL ---
+                // 1. Filter out Royal
+                themes = themes.filter(t => t.name !== 'Royal');
+                
+                // 2. Inject The New Year (Deep Blue)
+                const newYearTheme = {
+                    "name": "The New Year",
+                    "navbar-bg": "#020617", // Very deep blue (Slate-950)
+                    "navbar-border": "#1e293b",
+                    "navbar-text": "#e2e8f0",
+                    "tab-text": "#94a3b8",
+                    "tab-hover-text": "#ffffff",
+                    "tab-hover-bg": "rgba(255, 255, 255, 0.1)",
+                    "tab-active-text": "#fcd34d", // Gold accent for festive feel
+                    "tab-active-bg": "rgba(252, 211, 77, 0.15)",
+                    "tab-active-border": "#fcd34d",
+                    "accent-color": "#fcd34d",
+                    "logo-src": "https://cdn.jsdelivr.net/npm/4sp-asset-library@latest/logo.png",
+                    
+                    // --- UPDATED: AUTH MENU SPECIFIC THEME COLORS ---
+                    "menu-bg": "#020617",
+                    "menu-border": "#fcd34d", // Gold border for menu
+                    "menu-divider": "#1e293b",
+                    "menu-username-text": "#fcd34d", // Gold Username
+                    "menu-email-text": "#94a3b8",
+                    "menu-item-bg": "#0f172a", // Dark Slate for items
+                    "menu-item-text": "#cbd5e1",
+                    "menu-item-hover-bg": "rgba(252, 211, 77, 0.1)", // Gold tint on hover
+                    "menu-item-hover-text": "#fcd34d"
+                };
+                
+                themes.push(newYearTheme);
+                // --------------------------------------------------------
+
                 // --- Sorting Logic from settings.js ---
-                const orderedThemeNames = ['Dark', 'Light', 'Christmas'];
+                const orderedThemeNames = ['Dark', 'Light', 'Christmas', 'The New Year']; // Prioritize New Year
                 const sortedThemes = [];
 
                 orderedThemeNames.forEach(name => {
@@ -2214,22 +2248,33 @@
         function applyTheme(theme) {
             const root = document.documentElement;
             
+            // --- FIREWORKS LOGIC ---
+            if (theme.name === 'The New Year') {
+                document.getElementById('fireworks-container').style.opacity = '1';
+                fireworks.start();
+            } else {
+                document.getElementById('fireworks-container').style.opacity = '0';
+                fireworks.stop();
+            }
+            // -----------------------
+
             // --- Logo Path Modification ---
             let logoSrc;
             const isLightTheme = lightThemeNames.includes(theme.name);
             
             if (isLightTheme) {
                 logoSrc = 'https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo-dark.png'; 
-                root.style.setProperty('--menu-username-text', '#000000');
-                root.style.setProperty('--menu-email-text', '#444444');
+                // Default light theme variables if not specified in theme
+                if(!theme['menu-username-text']) root.style.setProperty('--menu-username-text', '#000000');
+                if(!theme['menu-email-text']) root.style.setProperty('--menu-email-text', '#444444');
             } else if (theme.name === 'Christmas') {
                 logoSrc = 'https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo-christmas.png';
-                root.style.setProperty('--menu-username-text', 'white');
-                root.style.setProperty('--menu-email-text', '#9ca3af');
+                if(!theme['menu-username-text']) root.style.setProperty('--menu-username-text', 'white');
+                if(!theme['menu-email-text']) root.style.setProperty('--menu-email-text', '#9ca3af');
             } else {
                 logoSrc = 'https://cdn.jsdelivr.net/npm/4sp-asset-library@latest/logo.png';
-                root.style.setProperty('--menu-username-text', 'white');
-                root.style.setProperty('--menu-email-text', '#9ca3af');
+                if(!theme['menu-username-text']) root.style.setProperty('--menu-username-text', 'white');
+                if(!theme['menu-email-text']) root.style.setProperty('--menu-email-text', '#9ca3af');
             }
 
             // Apply CSS Variables from theme object (overrides defaults if present)
@@ -2278,7 +2323,8 @@
             localStorage.setItem('user-navbar-theme', JSON.stringify(theme));
             
             // Apply Glide Button Color Sync
-            root.style.setProperty('--glide-btn-color', 'var(--tab-text)');
+            const glideColor = theme['tab-active-text'] || theme['accent-color'] || '#ffffff';
+            root.style.setProperty('--glide-btn-color', glideColor);
 
             // Also update user doc if logged in
             if (currentUser) {
@@ -2542,41 +2588,6 @@
 
             loadThemes();
             loadPanicKeys(); 
-
-            // --- App Preference Toggles Init ---
-            const animBtn = document.getElementById('toggle-animations-btn');
-            const soundBtn = document.getElementById('toggle-sounds-btn');
-
-            const updateToggleUI = () => {
-                const isEnabled = window.areAnimationsEnabled;
-                animBtn.classList.toggle('off', !isEnabled);
-                animBtn.innerHTML = isEnabled ? '<i class="fa-solid fa-wand-magic-sparkles"></i>' : '<i class="fa-solid fa-wand-magic"></i>';
-                
-                // Apply to body
-                if (isEnabled) document.body.classList.remove('no-animations');
-                else document.body.classList.add('no-animations');
-
-                soundBtn.classList.toggle('off', window.isMuted);
-                soundBtn.innerHTML = window.isMuted ? '<i class="fa-solid fa-volume-xmark"></i>' : '<i class="fa-solid fa-volume-high"></i>';
-            };
-
-            if (animBtn) {
-                animBtn.onclick = () => {
-                    window.areAnimationsEnabled = !window.areAnimationsEnabled;
-                    localStorage.setItem('app_animations_enabled', window.areAnimationsEnabled);
-                    updateToggleUI();
-                };
-            }
-
-            if (soundBtn) {
-                soundBtn.onclick = () => {
-                    window.isMuted = !window.isMuted;
-                    localStorage.setItem('app_is_muted', window.isMuted);
-                    updateToggleUI();
-                };
-            }
-
-            updateToggleUI();
         }
 
         checkAutoLogin();
@@ -2588,26 +2599,14 @@
     <script>
     // --- Sound & Notification Logic ---
     const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    
-    // Sync with global state
-    Object.defineProperty(window, 'isMuted', {
-        get: () => localStorage.getItem('app_is_muted') === 'true',
-        set: (v) => localStorage.setItem('app_is_muted', v)
-    });
-    
-    Object.defineProperty(window, 'areAnimationsEnabled', {
-        get: () => localStorage.getItem('app_animations_enabled') !== 'false',
-        set: (v) => localStorage.setItem('app_animations_enabled', v)
-    });
-
-    // Initial Class Set
-    if (!window.areAnimationsEnabled) document.body.classList.add('no-animations');
+    let isMuted = false;
+    let areAnimationsEnabled = true;
 
     // EXPOSE PlayTypeSound GLOBALLY
     // Debounce to prevent rapid-fire stuttering if called too fast
     let typeSoundTimeout = null;
     window.playTypeSound = function() {
-        if (window.isMuted) return;
+        if (isMuted) return;
         if (audioCtx.state === 'suspended') audioCtx.resume();
         
         // Small debounce
@@ -2648,7 +2647,7 @@
     };
 
     function playClickSound() {
-        if (window.isMuted) return;
+        if (isMuted) return;
         if (audioCtx.state === 'suspended') audioCtx.resume();
 
         const osc = audioCtx.createOscillator();
@@ -2663,12 +2662,8 @@
         osc.stop(audioCtx.currentTime + 0.015);
     }
 
-    // --- App Preferences State ---
-    window.isMuted = localStorage.getItem('app_is_muted') === 'true';
-    window.areAnimationsEnabled = localStorage.getItem('app_animations_enabled') !== 'false'; // Default true
-
     window.playMechClick = function(isReverse = false) {
-        if (window.isMuted || !window.areAnimationsEnabled) return;
+        if (isMuted) return;
         if (audioCtx.state === 'suspended') audioCtx.resume();
         const now = audioCtx.currentTime;
         
@@ -2709,60 +2704,7 @@
         osc.stop(now + 0.02);
     };
 
-    // Gear Clicking Sequence
-    let gearHoverStartTime = 0;
-    let currentGearRotation = 0;
-    let currentAnimatingGear = null;
-    const gearClickDelays = [0, 120, 240, 360]; // Adjusted for 0.5s total
-
-    const handleGearMouseOver = (e) => {
-        const target = e.target.closest('#auth-settings-btn, #nav-settings-tab');
-        if (target && currentAnimatingGear !== target) {
-            currentAnimatingGear = target;
-            const icon = target.querySelector('.fa-gear');
-            if (!icon) return;
-            
-            gearHoverStartTime = Date.now();
-            gearClickDelays.forEach((delay, index) => {
-                setTimeout(() => {
-                    if (target.matches(':hover')) {
-                        if (window.areAnimationsEnabled) {
-                            currentGearRotation = (index + 1) * 45;
-                            icon.style.transform = `rotate(${currentGearRotation}deg)`;
-                        }
-                        window.playMechClick(false);
-                    }
-                }, delay);
-            });
-        }
-    };
-
-    const handleGearMouseOut = (e) => {
-        const target = e.target.closest('#auth-settings-btn, #nav-settings-tab');
-        if (target && !target.contains(e.relatedTarget)) {
-            currentAnimatingGear = null;
-            const icon = target.querySelector('.fa-gear');
-            if (!icon) return;
-
-            const elapsed = Date.now() - gearHoverStartTime;
-            const clickCount = gearClickDelays.filter(d => d <= elapsed).length;
-            
-            for (let i = 0; i < clickCount; i++) {
-                setTimeout(() => {
-                    if (!target.matches(':hover')) {
-                        if (window.areAnimationsEnabled) {
-                            currentGearRotation -= 45;
-                            icon.style.transform = `rotate(${currentGearRotation}deg)`;
-                        }
-                        window.playMechClick(true);
-                    }
-                }, gearClickDelays[i]);
-            }
-        }
-    };
-
-    document.addEventListener('mouseover', handleGearMouseOver);
-    document.addEventListener('mouseout', handleGearMouseOut);
+    // Removed Gear Animation Logic
 
     const notificationContainer = document.getElementById('notification-container');
     function showNotification(message, iconClass = 'fa-solid fa-info-circle', type = 'info') {

package/README.md

@@ -0,0 +1,86 @@
+<div align="center">
+  <img src="https://raw.githubusercontent.com/4simpleproblems-v5/4simpleproblems-v5.github.io/main/images/logo.png" width="120" />
+  
+  <h1 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: 400; color: #888; margin-bottom: 0;">
+    The platform for everyone. Even you.
+  </h1>
+  <h1 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: 800; font-size: 3rem; margin-top: 0; color: #fff;">
+    The 4SP Organization.
+  </h1>
+
+  <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 1.2rem; color: #9ca3af; max-width: 600px;">
+    Official organizational home for <strong>4simpleproblems</strong>. Version 5 DV is built for unblockable access, full local security, and zero dependencies.
+  </p>
+
+  <div style="margin: 20px 0;">
+    <a href="https://4sp-organization.github.io/connection.html" style="text-decoration: none;">
+      <span style="background-color: rgba(147, 51, 234, 0.1); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.5); padding: 12px 24px; border-radius: 12px; font-family: sans-serif; font-weight: 500; margin-right: 10px;">
+        Connect to 4SP →
+      </span>
+    </a>
+    <a href="https://4sp-organization.github.io/create_link.html" style="text-decoration: none;">
+      <span style="background-color: rgba(249, 115, 22, 0.1); color: #fb923c; border: 1px solid rgba(253, 186, 116, 0.5); padding: 12px 24px; border-radius: 12px; font-family: sans-serif; font-weight: 500;">
+        Create a Link →
+      </span>
+    </a>
+  </div>
+
+  <div style="margin-top: 20px;">
+    <a href="https://discord.gg/A798ZZUgca"><img src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white" /></a>
+    <a href="https://linktr.ee/4simpleproblems"><img src="https://img.shields.io/badge/Linktree-39E09B?style=for-the-badge&logo=linktree&logoColor=white" /></a>
+  </div>
+</div>
+
+<hr style="border: 1px solid #1a1a1a; margin: 40px 0;" />
+
+<table style="width: 100%; border-collapse: collapse; border: none; font-family: sans-serif;">
+  <tr>
+    <td style="width: 33%; padding: 10px; border: none;">
+      <div style="background-color: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; padding: 20px; min-height: 150px;">
+        <h3 style="color: #c084fc; margin-top: 0;">Creation</h3>
+        <p style="color: #9ca3af; font-size: 14px;">Founded March 13, 2025. Started as a basic student soundboard and utility tool.</p>
+      </div>
+    </td>
+    <td style="width: 33%; padding: 10px; border: none;">
+      <div style="background-color: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; padding: 20px; min-height: 150px;">
+        <h3 style="color: #3b82f6; margin-top: 0;">The Shift (V4)</h3>
+        <p style="color: #9ca3af; font-size: 14px;">Introduced dashboard layouts, Tab Disguising, and the famous Panic Key system.</p>
+      </div>
+    </td>
+    <td style="width: 33%; padding: 10px; border: none;">
+      <div style="background-color: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; padding: 20px; min-height: 150px;">
+        <h3 style="color: #22c55e; margin-top: 0;">Rebuild (V5)</h3>
+        <p style="color: #9ca3af; font-size: 14px;">A complete rewrite focusing on security, 1,600+ games, and student utility.</p>
+      </div>
+    </td>
+  </tr>
+</table>
+
+<br />
+
+<div style="background-color: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 12px; padding: 30px; font-family: sans-serif;">
+  
+  <p style="color: #c0c0c0;">4SP is a student-made web project built for bored school days. It mixes utilities, games, and tools that feel fast and local instead of corporate.</p>
+  
+  <div align="center" style="margin: 20px 0;">
+    <img src="https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" />
+    <img src="https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=css3&logoColor=white" />
+    <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black" />
+    <img src="https://img.shields.io/badge/Firebase-FFCA28?style=flat-square&logo=firebase&logoColor=black" />
+  </div>
+
+  <h3 style="color: #fff; border-left: 3px solid #333; padding-left: 10px;">Deployment</h3>
+  <p style="color: #9ca3af;">Deploy your own instance of 4SP v5 instantly:</p>
+  
+  <div align="center">
+    <a href="https://vercel.com/new/import?framework=other&s=https%3A%2F%2Fgithub.com%2F4simpleproblems-v5%2F4simpleproblems-v5.github.io"><img src="https://img.shields.io/badge/Deploy_to_Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white" /></a>
+    <a href="https://app.netlify.com/start/deploy?repository=https://github.com/4simpleproblems-v5/4simpleproblems-v5.github.io"><img src="https://img.shields.io/badge/Deploy_to_Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white" /></a>
+  </div>
+</div>
+
+<br />
+
+<div align="center" style="font-family: sans-serif; color: #606060; font-size: 12px;">
+  Developed and Maintained by the 4SP Organization <br />
+  &copy; 2025 4SP Organization. Built using modern web standards.
+</div>