array(1) {
  ["en"]=>
  array(2) {
    ["common"]=>
    array(45) {
      ["gold"]=>
      string(7) "`^Gold
"
      ["gold_clean"]=>
      string(4) "gold"
      ["gems"]=>
      string(7) "`%Gems
"
      ["gems_clean"]=>
      string(4) "gems"
      ["clan_tag_start"]=>
      string(2) "<
"
      ["clan_tag_end"]=>
      string(2) ">
"
      ["turns"]=>
      string(8) "`&Turns
"
      ["dragon"]=>
      string(15) "`@Green Dragon
"
      ["title"]=>
      string(35) "`@The Legend of the Green Dragon`0
"
      ["title_clean"]=>
      string(26) "Legend of the Green Dragon"
      ["hitpoints"]=>
      string(13) "`&Hit Points
"
      ["attacks"]=>
      string(9) "`&Attack
"
      ["defense"]=>
      string(10) "`&Defense
"
      ["favor"]=>
      string(8) "`$Favor
"
      ["soulpoints"]=>
      string(14) "`$Soul Points
"
      ["torments"]=>
      string(11) "`$Torments
"
      ["psyche"]=>
      string(9) "`$Psyche
"
      ["spirit"]=>
      string(9) "`$Spirit
"
      ["race"]=>
      string(7) "`&Race
"
      ["level"]=>
      string(8) "`&Level
"
      ["experience"]=>
      string(13) "`&Experience
"
      ["weapon"]=>
      string(9) "`&Weapon
"
      ["armor"]=>
      string(8) "`&Armor
"
      ["creature"]=>
      string(11) "`&Creature
"
      ["name"]=>
      string(7) "`&Name
"
      ["barkeep"]=>
      string(9) "`tCedrik
"
      ["names"]=>
      array(3) {
        ["banker"]=>
        string(9) "`@Elessa
"
        ["inn"]=>
        string(20) "The Boar's Head Inn
"
        ["stablehand"]=>
        string(9) "`6Merick
"
      }
      ["headers"]=>
      array(1) {
        ["events"]=>
        string(31) "`^`c`bSomething Special!`c`b`0
"
      }
      ["stat_headers"]=>
      array(6) {
        ["vital"]=>
        string(10) "Vital Info"
        ["equipment"]=>
        string(9) "Equipment"
        ["companions"]=>
        string(10) "Companions"
        ["personal"]=>
        string(13) "Personal Info"
        ["buffs"]=>
        string(5) "Buffs"
        ["other"]=>
        string(10) "Other Info"
      }
      ["vital_stat_label"]=>
      string(10) "Vital Info"
      ["equipment_stat_label"]=>
      string(9) "Equipment"
      ["companion_stat_label"]=>
      string(10) "Companions"
      ["personal_stat_label"]=>
      string(13) "Personal Info"
      ["buffs_stat_label"]=>
      string(5) "Buffs"
      ["navs"]=>
      array(17) {
        ["home"]=>
        string(4) "Home"
        ["forest"]=>
        string(6) "Forest"
        ["inn"]=>
        string(3) "Inn"
        ["arena"]=>
        string(5) "Arena"
        ["guild"]=>
        string(5) "Guild"
        ["clan"]=>
        string(4) "Clan"
        ["hall_of_fame"]=>
        string(12) "Hall of Fame"
        ["news"]=>
        string(4) "News"
        ["faq"]=>
        string(3) "FAQ"
        ["logout"]=>
        string(7) "Log Out"
        ["daily_news"]=>
        string(22) "R?Return to Daily News"
        ["village"]=>
        string(19) "R?Return to Village"
        ["mundane"]=>
        string(23) "R?Return to the Mundane"
        ["grotto"]=>
        string(22) "R?Return to the Grotto"
        ["graveyard"]=>
        string(25) "R?Return to the Graveyard"
        ["shades"]=>
        string(22) "R?Return to the Shades"
        ["return_to"]=>
        string(14) "R?Return to %s"
      }
      ["nav_headers"]=>
      array(2) {
        ["navigation"]=>
        string(10) "Navigation"
        ["other"]=>
        string(5) "Other"
      }
      ["yes"]=>
      string(3) "Yes"
      ["no"]=>
      string(2) "No"
      ["ok"]=>
      string(2) "OK"
      ["submit"]=>
      string(6) "Submit"
      ["cancel"]=>
      string(6) "Cancel"
      ["confirm"]=>
      string(7) "Confirm"
      ["choose"]=>
      string(6) "Choose"
      ["edit"]=>
      string(4) "Edit"
      ["translate"]=>
      array(1) {
        ["footer"]=>
        array(3) {
          ["edit_wrapper"]=>
          string(42) "<div class='translations-footer'>%s</div>
"
          ["heading"]=>
          string(39) "<h2 class='editor colLtYellow'>%s</h2>
"
          ["file_row"]=>
          string(14) "<div class=''
"
        }
      }
    }
    ["home"]=>
    array(17) {
      ["description"]=>
      string(133) "`cWelcome to the Legend of the Green Dragon, a text-based roleplay game created by Eric Stevens based on Legend of the Red Dragon.`c
"
      ["time"]=>
      string(42) "`c`^The current time in %s is `%%s`@.`0`c
"
      ["newday_time"]=>
      string(47) "`c`^Next new game day in: `$%s (real time)`0`c
"
      ["newest_player"]=>
      string(50) "`c`^The newest resident of the realm is: `&%s`0`c
"
      ["banner"]=>
      string(135) "`c`&`b*BETA*`b`$ This is a BETA of this website, things are likely to
change now and again, as it is under active development *BETA*`c
"
      ["game_version"]=>
      string(40) "`cGame server running version: `@%s`0`c
"
      ["skin_select"]=>
      string(227) "<form action='home.php' method='POST'>
  <label for='skinselect'>`&Select your preferred skin:`0</label>
  <select name='skinselect' id='skinselect'>
    %s
  </select>
  <input type='submit' value='{{common.choose}}'>
</form>
"
      ["login_form"]=>
      string(130) "`cEnter your name and password to enter the realm.`n
<form action='login.php' method='POST' onSubmit="md5pass();">
  %s
</form>`c
"
      ["login_form_javascript"]=>
      string(296) "<script type="text/javascript" src="lib/md5.js"></script>
<script type="text/javascript">
  function md5pass() {
    var passbox = document.getElementById('password');
    if (passbox.value.substring(0, 5) != '!md5!') {
      passbox.value = '!md5!' + hex_md5(passbox.value);
    }
  }
</script>
"
      ["server_full"]=>
      string(74) "`$`bServer full!`b`n`^Please wait until some users have logged out.`n`n`0
"
      ["login_username"]=>
      string(9) "Username
"
      ["login_password"]=>
      string(9) "Password
"
      ["login_submit"]=>
      string(7) "Log in
"
      ["timeout"]=>
      string(53) "Your session has timed out, you must log in again.`n
"
      ["no_cookie"]=>
      string(130) "It appears that you may be blocking cookies from this site. At least session cookies must be enabled in order to use this site.`n
"
      ["navs"]=>
      array(7) {
        ["create"]=>
        string(17) "Create Character
"
        ["forgot"]=>
        string(16) "Forgot Password
"
        ["list_characters"]=>
        string(16) "List Characters
"
        ["news"]=>
        string(11) "Daily News
"
        ["about"]=>
        string(12) "About LotGD
"
        ["setup_info"]=>
        string(16) "Game Setup Info
"
        ["lotgdnet"]=>
        string(14) "LotGD Network
"
      }
      ["nav_headers"]=>
      array(3) {
        ["new"]=>
        string(14) "New to LotGD?
"
        ["about_game"]=>
        string(15) "Game Functions
"
        ["info"]=>
        string(22) "Other Information    
"
      }
    }
  }
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>The Legend of the Green Dragon
</title>
    <link href="templates/moderndark.css" rel="stylesheet" type="text/css">
    <link href="templates/assets/colors.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.cdnfonts.com/css/open-dyslexic" rel="stylesheet">
    <link href="templates/assets/app.css" rel="stylesheet" type="text/css">
    <script src="templates/assets/app.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Mobile Navigation Logic
            const navSidebar = document.getElementById('navSidebar');
            const statsSidebar = document.getElementById('statsSidebar');
            const mainContent = document.getElementById('mainContent');
            const sidebarOverlay = document.getElementById('sidebarOverlay');
            const btnNav = document.getElementById('btnNav');
            const btnMain = document.getElementById('btnMain');
            const btnStats = document.getElementById('btnStats');

            function resetView() {
                navSidebar.classList.remove('active');
                statsSidebar.classList.remove('active');
                if (sidebarOverlay) sidebarOverlay.classList.remove('active');
                document.querySelectorAll('.nav-btn').forEach(btn => btn.classList.remove('active'));
            }

            if (btnNav) {
                btnNav.addEventListener('click', function () {
                    if (navSidebar.classList.contains('active')) {
                        resetView();
                        btnMain.classList.add('active');
                    } else {
                        resetView();
                        navSidebar.classList.add('active');
                        if (sidebarOverlay) sidebarOverlay.classList.add('active');
                        btnNav.classList.add('active');
                    }
                });
            }

            if (btnMain) {
                btnMain.addEventListener('click', function () {
                    resetView();
                    btnMain.classList.add('active');
                });
            }

            if (btnStats) {
                btnStats.addEventListener('click', function () {
                    if (statsSidebar.classList.contains('active')) {
                        resetView();
                        btnMain.classList.add('active');
                    } else {
                        resetView();
                        statsSidebar.classList.add('active');
                        if (sidebarOverlay) sidebarOverlay.classList.add('active');
                        btnStats.classList.add('active');
                    }
                });
            }

            // Default to main view
            if (btnMain) btnMain.classList.add('active');

            // Close sidebars when clicking overlay
            if (sidebarOverlay) {
                sidebarOverlay.addEventListener('click', function () {
                    resetView();
                    btnMain.classList.add('active');
                });
            }

            // Modal Logic
            const modalOverlay = document.getElementById('modalOverlay');
            const modalTitle = document.getElementById('modalTitle');
            const modalBody = document.getElementById('modalBody');
            const modalClose = document.getElementById('modalClose');


            // Function to execute scripts in the injected content
            function executeScripts(container) {
                const scripts = container.querySelectorAll('script');
                scripts.forEach(oldScript => {
                    const newScript = document.createElement('script');
                    Array.from(oldScript.attributes).forEach(attr => {
                        newScript.setAttribute(attr.name, attr.value);
                    });
                    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
                    oldScript.parentNode.replaceChild(newScript, oldScript);
                });
            }

            // Function to process content and attach listeners
            function processModalContent(html) {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                let content = doc.querySelector('.content-column');
                if (content) {
                    modalBody.innerHTML = content.innerHTML;
                } else {
                    content = doc.querySelector('body');
                    if (content) {
                        modalBody.innerHTML = content.innerHTML;
                    } else {
                        modalBody.innerHTML = html;
                    }
                }
                executeScripts(modalBody);
                attachModalFormListeners();
            }

            // Attach listeners to forms inside the modal
            function attachModalFormListeners() {
                const forms = modalBody.querySelectorAll('form');
                forms.forEach(form => {
                    form.addEventListener('submit', function (e) {
                        e.preventDefault();

                        const formData = new FormData(form);
                        const method = form.getAttribute('method') || 'GET';
                        const action = form.getAttribute('action') || window.location.href;

                        const options = {
                            method: method.toUpperCase(),
                        };

                        if (options.method === 'POST') {
                            options.body = formData;
                        } else {
                            // For GET, append params to URL
                            const params = new URLSearchParams(formData);
                            const separator = action.includes('?') ? '&' : '?';
                            // We can't modify action directly if it's const, but we use it in fetch
                            // Actually, let's just construct the URL
                            // Note: This simple GET handling might need refinement for complex URLs
                        }

                        // For simplicity in this environment, let's handle POST mostly as that's what forms usually do for actions
                        // If it is GET, we might need to handle it differently, but let's stick to the fetch body for POST

                        // Handling GET requests for forms is a bit trickier with fetch if we want to emulate browser behavior exactly
                        // But for LotGD, most action forms are POST.

                        let fetchUrl = action;
                        if (options.method === 'GET') {
                            const params = new URLSearchParams(formData).toString();
                            if (params) {
                                fetchUrl += (fetchUrl.includes('?') ? '&' : '?') + params;
                            }
                        }

                        modalBody.innerHTML = '<div style="text-align:center; padding: 20px;">Processing...</div>';

                        fetch(fetchUrl, options)
                            .then(response => response.text())
                            .then(data => {
                                processModalContent(data);
                            })
                            .catch(error => {
                                modalBody.innerHTML = '<div style="text-align:center; padding: 20px; color: red;">Failed to submit form.</div>';
                            });
                    });
                });
            }

            function openModal(title, url) {
                modalTitle.textContent = title;
                modalBody.innerHTML = '<div style="text-align:center; padding: 20px;">Loading...</div>';
                modalOverlay.classList.add('active');

                fetch(url)
                    .then(response => response.text())
                    .then(data => {
                        processModalContent(data);
                    })
                    .catch(error => {
                        modalBody.innerHTML = '<div style="text-align:center; padding: 20px; color: red;">Failed to load content.</div>';
                    });
            }

            function closeModal() {
                modalOverlay.classList.remove('active');
                modalBody.innerHTML = '';
            }

            if (modalClose) modalClose.addEventListener('click', closeModal);

            // Close modal when clicking outside container
            //if (modalOverlay) {
            //    modalOverlay.addEventListener('click', function (e) {
            //        if (e.target === this) {
            //            closeModal();
            //        }
            //    });
            //}

            // Fix Popup Links (remove inline onclick and target)
            function fixPopupLinks() {
                const links = document.querySelectorAll('a[href*="mail.php"], a[href*="petition.php"], a[href*="motd.php"], a[href*="runmodule.php?module=villages&op=faq"], a[href^="translations.php"]');
                links.forEach(link => {
                    // Exclude viewpetition.php
                    if (link.getAttribute('href').includes('viewpetition.php')) return;

                    link.removeAttribute('onclick');
                    link.removeAttribute('target');
                });
            }
            fixPopupLinks();// Intercept Mail, Petition, and MotD links
            document.addEventListener('click', function (e) {
                const link = e.target.closest('a[href*="mail.php"], a[href*="petition.php"], a[href^="translations.php"], a[href*="motd.php"], a[href*="runmodule.php?module=villages&op=faq"]');
                if (link) {
                    const url = link.getAttribute('href');
                    // Ensure we strip attributes if they were added dynamically or missed
                    link.removeAttribute('onclick');
                    link.removeAttribute('target');
                    
                    // Exclude viewpetition.php
                    if (url.includes('viewpetition.php')) return;

                    // Parse URL to handle relative paths and query params reliably
                    const fullUrl = new URL(url, window.location.href);
                    let title = "Content";
                    let isHandled = true;

                    if (fullUrl.pathname.endsWith('mail.php')) {
                        title = "Mail";
                    } else if (fullUrl.pathname.endsWith('petition.php')) {
                        title = "Petition";
                    } else if (fullUrl.pathname.endsWith('motd.php')) {
                        title = "Message of the Day";
                    } else if (fullUrl.pathname.endsWith('translations.php')) {
                        const op = fullUrl.searchParams.get('op');
                        if (op === 'edit') {
                            title = "Edit Translation";
                        } else if (op === 'save') {
                            title = "Save Translation";
                        } else {
                            isHandled = false; // Don't intercept if op doesn't match
                        }
                    } // Add similar else if for runmodule if needed

                    if (!isHandled) return;

                    e.preventDefault();

                    openModal(title, url);
                }
            });

            // Clean up Login Placeholders (remove HTML tags)
            document.querySelectorAll('.login-form input[placeholder]').forEach(function (input) {
                var placeholder = input.getAttribute('placeholder');
                var tempDiv = document.createElement('div');
                tempDiv.innerHTML = placeholder;
                var decoded = tempDiv.textContent || tempDiv.innerText || "";
                input.setAttribute('placeholder', decoded);
            });

            // Theme Settings Logic
            const settingsBtn = document.getElementById('settingsBtn');
            const settingsModal = document.getElementById('settingsModal');
            const settingsClose = document.getElementById('settingsClose');
            const primaryBgColor = document.getElementById('primaryBgColor');
            const secondaryBgColor = document.getElementById('secondaryBgColor');
            const navHighlightColor = document.getElementById('navHighlightColor');
            const fontSelect = document.getElementById('fontSelect');
            const fontSizeSelect = document.getElementById('fontSizeSelect');
            // const layoutStyleSelect = document.getElementById('layoutStyle'); // Removed
            const saveSettings = document.getElementById('saveSettings');
            const resetSettings = document.getElementById('resetSettings');
            const statsToggleBtn = document.getElementById('statsToggleBtn');

            // Default values
            const defaults = {
                primaryBg: '#1a1a1a',
                secondaryBg: '#252525',
                navHighlight: '#4da6ff',
                font: 'standard',
                fontSize: 'large',
                layoutStyle: 'unified',
                desktopWidth: 'small', // Default to small (1200px)
                statsOpen: true // Default closed
            };

            // Load OpenDyslexic font dynamically
            function loadDyslexicFont() {
                if (!document.getElementById('dyslexic-font-link')) {
                    const link = document.createElement('link');
                    link.id = 'dyslexic-font-link';
                    link.rel = 'stylesheet';
                    link.href = 'https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-regular.min.css';
                    document.head.appendChild(link);
                }
            }

            // Apply theme settings
            function applySettings(settings) {
                document.documentElement.style.setProperty('--primary', settings.primaryBg);
                document.documentElement.style.setProperty('--secondary', settings.secondaryBg);
                document.documentElement.style.setProperty('--nav-highlight', settings.navHighlight);

                // Font Application
                let fontFamily = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
                if (settings.font === 'dyslexic') {
                    loadDyslexicFont();
                    fontFamily = "'Open-Dyslexic', sans-serif";
                } else if (settings.font === 'Droid Sans') {
                    fontFamily = "'Droid Sans', sans-serif";
                } else if (settings.font === 'Merced') {
                    fontFamily = "'Merced', serif";
                }
                document.documentElement.style.setProperty('--font-family', fontFamily);

                // Remove dyslexic class as we are using variables now, but keep for legacy/specificity if needed
                if (settings.font === 'dyslexic') {
                    document.body.classList.add('dyslexic-font');
                } else {
                    document.body.classList.remove('dyslexic-font');
                }

                let size = '16px';
                if (settings.fontSize === 'small') size = '12px';
                if (settings.fontSize === 'medium') size = '14px';
                if (settings.fontSize === 'large') size = '16px';
                document.documentElement.style.setProperty('--base-font-size', size);

                // Apply Layout Style
                if (settings.layoutStyle === 'split') {
                    document.body.classList.add('layout-gap');
                } else {
                    document.body.classList.remove('layout-gap');
                }

                // Apply Desktop Width
                document.body.classList.remove('width-medium', 'width-large');
                if (settings.desktopWidth === 'medium') {
                    document.body.classList.add('width-medium');
                } else if (settings.desktopWidth === 'large') {
                    document.body.classList.add('width-large');
                }

                // Apply Stats Sidebar State (Desktop only logic handled via CSS mostly, but class needed)
                const statsSidebar = document.getElementById('statsSidebar');
                if (statsSidebar) {
                    if (settings.statsOpen) {
                        statsSidebar.classList.remove('collapsed');
                    } else {
                        statsSidebar.classList.add('collapsed');
                    }
                }
            }

            // Load settings from localStorage
            function loadSettings() {
                const saved = localStorage.getItem('modernDarkSettings');
                let settings = defaults;

                if (saved) {
                    try {
                        const parsed = JSON.parse(saved);
                        settings = { ...defaults, ...parsed }; // Merge with defaults to handle new keys
                    } catch (e) {
                        console.error('Failed to load settings:', e);
                    }
                }

                // Populate inputs
                if (primaryBgColor) primaryBgColor.value = settings.primaryBg;
                if (secondaryBgColor) secondaryBgColor.value = settings.secondaryBg;
                if (navHighlightColor) navHighlightColor.value = settings.navHighlight;
                if (fontSelect) fontSelect.value = settings.font;
                if (fontSizeSelect) fontSizeSelect.value = settings.fontSize;

                // Radio buttons - Layout
                const layoutRadios = document.querySelectorAll('input[name="layoutStyle"]');
                layoutRadios.forEach(radio => {
                    if (radio.value === settings.layoutStyle) {
                        radio.checked = true;
                    }
                });

                // Radio buttons - Width
                const widthRadios = document.querySelectorAll('input[name="desktopWidth"]');
                widthRadios.forEach(radio => {
                    if (radio.value === settings.desktopWidth) {
                        radio.checked = true;
                    }
                });

                applySettings(settings);
            }

            // Save settings to localStorage
            function saveSettingsToStorage() {
                // Get current settings to preserve statsOpen state
                const saved = localStorage.getItem('modernDarkSettings');
                let currentSettings = defaults;
                if (saved) {
                    try {
                        currentSettings = JSON.parse(saved);
                    } catch (e) { }
                }

                const layoutStyle = document.querySelector('input[name="layoutStyle"]:checked')?.value || defaults.layoutStyle;
                const desktopWidth = document.querySelector('input[name="desktopWidth"]:checked')?.value || defaults.desktopWidth;

                const settings = {
                    ...currentSettings,
                    primaryBg: primaryBgColor.value,
                    secondaryBg: secondaryBgColor.value,
                    navHighlight: navHighlightColor.value,
                    font: fontSelect.value,
                    fontSize: fontSizeSelect.value,
                    layoutStyle: layoutStyle,
                    desktopWidth: desktopWidth
                };
                localStorage.setItem('modernDarkSettings', JSON.stringify(settings));
                applySettings(settings);
            }

            // Stats Toggle Listener
            if (statsToggleBtn) {
                statsToggleBtn.addEventListener('click', () => {
                    const statsSidebar = document.getElementById('statsSidebar');
                    const isCollapsed = statsSidebar.classList.toggle('collapsed');

                    // Save state
                    const saved = localStorage.getItem('modernDarkSettings');
                    let settings = defaults;
                    if (saved) {
                        try {
                            settings = JSON.parse(saved);
                        } catch (e) { }
                    }
                    settings.statsOpen = !isCollapsed;
                    localStorage.setItem('modernDarkSettings', JSON.stringify(settings));
                });
            }

            // Header Menu Logic
            const menuBtn = document.getElementById('menuBtn');
            const menuDropdown = document.getElementById('menuDropdown');
            const hiddenLinks = document.getElementById('hiddenHeaderLinks');
            const menuList = document.getElementById('menuList');
            const notificationDot = document.getElementById('notificationDot');

            if (menuBtn && menuDropdown && hiddenLinks) {
                // Parse links
                const links = hiddenLinks.querySelectorAll('a');
                let hasNotification = false;

                links.forEach(link => {
                    const href = link.getAttribute('href');
                    let text = link.textContent.trim();
                    if (text.endsWith(':')) {
                        text = text.slice(0, -1);
                    }
                    const isHot = link.classList.contains('hotmotd');

                    // Determine icon based on href/text
                    let icon = '';
                    if (href.includes('mail.php')) {
                        icon = '<svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>';
                    } else if (href == 'petition.php') {
                        icon = '<svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>';
                    } else if (href.includes('motd.php')) {
                        icon = '<svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>';
                    } else if (href.includes('user.php')) {
                        icon = '<svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>';
                    } else if (href.includes('viewpetition.php')) {
                        icon = '<svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>';
                    }

                    // Create menu item
                    const li = document.createElement('li');
                    const a = document.createElement('a');
                    a.href = href;
                    a.innerHTML = icon + '<span>' + text + '</span>';
                    a.className = 'menu-item';
                    if (isHot) {
                        a.classList.add('highlight');
                        hasNotification = true;
                    }

                    // Copy attributes (onclick, target)
                    Array.from(link.attributes).forEach(attr => {
                        if (attr.name !== 'class' && attr.name !== 'href') {
                            a.setAttribute(attr.name, attr.value);
                        }
                    });

                    li.appendChild(a);
                    menuList.appendChild(li);
                });

                // Show notification dot
                if (hasNotification) {
                    notificationDot.style.display = 'block';
                }

                // Toggle Menu
                menuBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    menuDropdown.classList.toggle('active');
                });

                // Close menu when clicking outside
                document.addEventListener('click', (e) => {
                    if (!menuDropdown.contains(e.target) && !menuBtn.contains(e.target)) {
                        menuDropdown.classList.remove('active');
                    }
                });
            }

            // Open settings modal
            if (settingsBtn) {
                settingsBtn.addEventListener('click', function () {
                    settingsModal.classList.add('active');
                });
            }

            // Close settings modal
            if (settingsClose) {
                settingsClose.addEventListener('click', function () {
                    settingsModal.classList.remove('active');
                });
            }

            // Close modal when clicking outside
            if (settingsModal) {
                settingsModal.addEventListener('click', function (e) {
                    if (e.target === this) {
                        settingsModal.classList.remove('active');
                    }
                });
            }

            // Save settings button
            if (saveSettings) {
                saveSettings.addEventListener('click', function () {
                    saveSettingsToStorage();
                    settingsModal.classList.remove('active');
                });
            }

            // Reset settings button
            if (resetSettings) {
                resetSettings.addEventListener('click', function () {
                    if (primaryBgColor) primaryBgColor.value = defaults.primaryBg;
                    if (secondaryBgColor) secondaryBgColor.value = defaults.secondaryBg;
                    if (navHighlightColor) navHighlightColor.value = defaults.navHighlight;
                    if (fontSelect) fontSelect.value = defaults.font;
                    if (fontSizeSelect) fontSizeSelect.value = defaults.fontSize;

                    // Reset radios
                    const layoutRadio = document.querySelector(`input[name="layoutStyle"][value="$"]`);
                    if (layoutRadio) layoutRadio.checked = true;

                    const widthRadio = document.querySelector(`input[name="desktopWidth"][value="$"]`);
                    if (widthRadio) widthRadio.checked = true;

                    localStorage.removeItem('modernDarkSettings');
                    applySettings(defaults);
                    settingsModal.classList.remove('active');
                });
            }

            // Load settings on page load
            loadSettings();
        });
    </script>
    <LINK REL="shortcut icon" HREF="favicon.ico" TYPE="image/x-icon"/>
    <script language='JavaScript'>
	<!--
	document.onkeypress=keyevent;
	function keyevent(e){
		var c;
		var target;
		var altKey;
		var ctrlKey;
		if (window.event != null) {
			c=String.fromCharCode(window.event.keyCode).toUpperCase();
			altKey=window.event.altKey;
			ctrlKey=window.event.ctrlKey;
		}else{
			c=String.fromCharCode(e.charCode).toUpperCase();
			altKey=e.altKey;
			ctrlKey=e.ctrlKey;
		}
		if (window.event != null)
			target=window.event.srcElement;
		else
			target=e.originalTarget;
		if (target.nodeName.toUpperCase()=='INPUT' || target.nodeName.toUpperCase()=='TEXTAREA' || altKey || ctrlKey){
		}else{
			if (c == 'C') { window.location='create.php?c=1-192952'; return false; }
			if (c == 'F') { window.location='create.php?op=forgot&c=1-192952'; return false; }
			if (c == 'L') { window.location='list.php?c=1-192952'; return false; }
			if (c == 'D') { window.location='news.php?c=1-192952'; return false; }
			if (c == 'A') { window.location='about.php?c=1-192952'; return false; }
			if (c == 'G') { window.location='about.php?op=setup&c=1-192952'; return false; }
			if (c == 'O') { window.location='logdnet.php?op=list&c=1-192952'; return false; }
		}
	}
	//-->
	</script>
</head>

<body>
    <div class="layout-container">
        <header>
            <img src="templates/assets/logo.png" alt="The Legend of the Green Dragon
" class="site-logo">
            <div class="site-title">The Legend of the Green Dragon
</div>

            <!-- Hidden container for raw links -->
            <div id="hiddenHeaderLinks" style="display: none;">
                 <a href='petition.php' onClick="window.open('petition.php','petitionphp','scrollbars=yes,resizable=yes,width=550,height=300').focus();return false;" target='_blank' align='right' class='motd'>Petition for Help</a> <a href='motd.php' target='_blank' onClick="window.open('motd.php','motdphp','scrollbars=yes,resizable=yes,width=550,height=300').focus();return false;" class='motd'><b>MoTD</b></a> 
            </div>

            <div class="header-actions">
                <!-- Stats Toggle (Moved to Header) -->
                <button class="header-btn" id="statsToggleBtn" title="Toggle Stats">
                    <svg class="header-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <rect x="18" y="3" width="4" height="18"></rect>
                        <line x1="10" y1="8" x2="2" y2="8"></line>
                        <line x1="10" y1="16" x2="2" y2="16"></line>
                    </svg>
                </button>

                <!-- Menu Dropdown -->
                <div class="menu-container">
                    <button class="header-btn" id="menuBtn" title="Menu">
                        <svg class="header-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <line x1="3" y1="12" x2="21" y2="12"></line>
                            <line x1="3" y1="6" x2="21" y2="6"></line>
                            <line x1="3" y1="18" x2="21" y2="18"></line>
                        </svg>
                        <span class="notification-dot" id="notificationDot"></span>
                    </button>
                    <div class="menu-dropdown" id="menuDropdown">
                        <ul id="menuList">
                            <!-- Items populated by JS -->
                        </ul>
                    </div>
                </div>

                <!-- Settings Button -->
                <button class="header-btn" id="settingsBtn" title="Theme Settings">
                    <svg class="header-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M12 15.5A3.5 3.5 0 0 1 8.5 12 3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97 0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1 0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66z" />
                    </svg>
                </button>
            </div>

            <div class="petition-count"> </div>
        </header>

        <div class="main-wrapper">
            <!-- Navigation Sidebar (Left) -->
            <nav class="sidebar sidebar-left" id="navSidebar">
                <div class="nav-list">
                    
                    <ul>
                        
<li class="navhead">
    New to LotGD?

</li>

<li class="nav-item">
    <a href="create.php?c=1-192952"  accesskey="C"  ><span class='navhi'>C</span>reate Character
</a>
</li>


<li class="navhead">
    Game Functions

</li>

<li class="nav-item">
    <a href="create.php?op=forgot&amp;c=1-192952"  accesskey="F"  ><span class='navhi'>F</span>orgot Password
</a>
</li>

<li class="nav-item">
    <a href="list.php?c=1-192952"  accesskey="L"  ><span class='navhi'>L</span>ist Characters
</a>
</li>

<li class="nav-item">
    <a href="news.php?c=1-192952"  accesskey="D"  ><span class='navhi'>D</span>aily News
</a>
</li>


<li class="navhead">
    Other Information    

</li>

<li class="nav-item">
    <a href="about.php?c=1-192952"  accesskey="A"  ><span class='navhi'>A</span>bout LotGD
</a>
</li>

<li class="nav-item">
    <a href="about.php?op=setup&amp;c=1-192952"  accesskey="G"  ><span class='navhi'>G</span>ame Setup Info
</a>
</li>

<li class="nav-item">
    <a href="logdnet.php?op=list&amp;c=1-192952"  accesskey="o"  >L<span class='navhi'>o</span>tGD Network
</a>
</li>


                    </ul>
                </div>
            </nav>

            <!-- Main Content -->
            <main class="content-column" id="mainContent">
                <!--
AllowAnonymous: True
Override Forced Nav: False
-->
<div align='center'>Welcome to the Legend of the Green Dragon, a text-based roleplay game created by Eric Stevens based on Legend of the Red Dragon.</div>

<div align='center'><span class='colLtYellow'>The current time in Degolburg is </span><span class='colLtMagenta'>11:53 pm</span><span class='colLtGreen'>.</span></div>

<div align='center'><span class='colLtYellow'>Next new game day in: </span><span class='colLtRed'>6h, 30m, 00s (real time)</span></div>

<div align='center'>Enter your name and password to enter the realm.<br>

<form action='login.php' method='POST' onSubmit="md5pass();">
  
<div class="login-form">
    <input name="name" id="name" accesskey="u" size="10" placeholder="Username
">
    <input name="password" id="password" accesskey="p" type="password" size="10" placeholder="Password
"><br />
    <input type="submit" value="Log in
" class="button">
</div>

</form></div>

<script type="text/javascript" src="lib/md5.js"></script>
<script type="text/javascript">
  function md5pass() {
    var passbox = document.getElementById('password');
    if (passbox.value.substring(0, 5) != '!md5!') {
      passbox.value = '!md5!' + hex_md5(passbox.value);
    }
  }
</script>

<div align='center'><span class='colLtWhite'><b>*BETA*</b></span><span class='colLtRed'> This is a BETA of this website, things are likely to
change now and again, as it is under active development *BETA*</div>

<div align='center'>Game server running version: </span><span class='colLtGreen'>1.1.2 Dragonprime Edition</span></div>

<form action='home.php' method='POST'>
<table align='center'><tr><td>
<table width='100%' cellpadding='0' cellspacing='0'><tr><td>
<div id='showFormSection1'></div>
</td></tr><tr><td>&nbsp;</td></tr><tr><td>
<table cellpadding='2' cellspacing='0'>
<tr class='trdark'><td valign='top'>
Choose a different display skin:
</td><td valign='top'>
<select name='template'>
<option value='ailean.htm'>ailean</option>
<option value='aileans.htm'>aileans</option>
<option value='amber.htm'>amber</option>
<option value='Aware.htm'>Aware</option>
<option value='blarg.htm'>blarg</option>
<option value='Classic.htm'>Classic</option>
<option value='Cupertino.htm'>Cupertino</option>
<option value='desert.htm'>desert</option>
<option value='jade.htm'>jade</option>
<option value='mer.htm'>mer</option>
<option value='ModernDark.htm'>ModernDark</option>
<option value='mourn.htm'>mourn</option>
<option value='NeoYar.htm'>NeoYar</option>
<option value='Red.htm'>Red</option>
<option value='redmond.htm'>redmond</option>
<option value='Responsive.htm'>Responsive</option>
<option value='teksolo.htm'>teksolo</option>
<option value='vcpp.htm'>vcpp</option>
<option value='volcano.htm'>volcano</option>
<option value='yar2.htm'>yar2</option>
<option value='yarbrough.htm'>yarbrough</option>
</select>
</td></tr>
</table><br>

		 	<script language='JavaScript'>
		 	function prepare_form(id){
		 		var theTable;
		 		var theDivs='';
		 		var x=0;
		 		var weight='';
		 		for (x in formSections[id]){
		 			theTable = document.getElementById('showFormTable'+x);
		 			if (x != 1 ){
			 			theTable.style.visibility='hidden';
			 			theTable.style.display='none';
			 			weight='';
			 		}else{
			 			theTable.style.visibility='visible';
			 			theTable.style.display='inline';
			 			weight='color: yellow;';
			 		}
			 		theDivs += "<div id='showFormButton"+x+"' class='trhead' style='"+weight+"float: left; cursor: pointer; cursor: hand; padding: 5px; border: 1px solid #000000;' onClick='showFormTabClick("+id+","+x+");'>"+formSections[id][x]+"</div>";
		 		}
		 		theDivs += "<div style='display: block;'>&nbsp;</div>";
				theDivs += "<input type='hidden' name='showFormTabIndex' value='1' id='showFormTabIndex'>";
		 		document.getElementById('showFormSection'+id).innerHTML = theDivs;
		 	}
		 	function showFormTabClick(formid,sectionid){
		 		var theTable;
		 		var theButton;
		 		for (x in formSections[formid]){
		 			theTable = document.getElementById('showFormTable'+x);
		 			theButton = document.getElementById('showFormButton'+x);
		 			if (x == sectionid){
		 				theTable.style.visibility='visible';
		 				theTable.style.display='inline';
		 				theButton.style.fontWeight='normal';
		 				theButton.style.color='yellow';
						document.getElementById('showFormTabIndex').value = sectionid;
		 			}else{
		 				theTable.style.visibility='hidden';
		 				theTable.style.display='none';
		 				theButton.style.fontWeight='normal';
		 				theButton.style.color='';
		 			}
		 		}
		 	}
		 	formSections = new Array();
			</script>
<script language='JavaScript'>
formSections[1] = new Array();

		prepare_form(1);
		</script>
</td></tr></table>


</td><td><br>&nbsp;<input type='submit' class='button' value='Choose'></td>
</tr></table></form>














            </main>

            <!-- Stats Sidebar (Right) -->
            <aside class="sidebar sidebar-right" id="statsSidebar">
                <div class="stats-content">
                    <b>Staff Online<br>
(0 Staff Members):</b><br>
<i>none</i><br>
<br>
<b>Donators Online<br>
(0 Donators):</b><br>
<i>none</i><br>
<br>
<b>Characters Online<br>
(0 Players):</b><br>
<i>none</i><br>
<br>

                    <table align="center"><tr><td><form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_blank'><input type='hidden' name='cmd' value='_xclick'><input type='hidden' name='business' value='logd@mightye.org'><input type='hidden' name='item_name' value='Donation from '><input type='hidden' name='item_number' value=':lotgd.io/home.php?c=3-115204'><input type='hidden' name='no_shipping' value='1'><input type='hidden' name='notify_url' value='http://lotgd.net/payment.php'><input type='hidden' name='cn' value=''><input type='hidden' name='cs' value='1'><input type='hidden' name='currency_code' value='USD'><input type='hidden' name='tax' value='0'><input type='image' src='images/paypal1.gif' border='0' name='submit' alt='Donate!'></form></td><td><form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_blank'><input type='hidden' name='cmd' value='_xclick'><input type='hidden' name='business' value='derbugmeister@shaw.ca'><input type='hidden' name='item_name' value='Donation from ''><input type='hidden' name='item_number' value=':lotgd.io/home.php?c=3-115204'><input type='hidden' name='no_shipping' value='1'><input type='hidden' name='notify_url' value='http://dragonprimelogd.net/payment.php'><input type='hidden' name='cn' value=''><input type='hidden' name='cs' value='1'><input type='hidden' name='currency_code' value='USD'><input type='hidden' name='tax' value='0'><input type='image' src='images/paypal3.gif' border='0' name='submit' alt='Donate!'></form></td></tr></table>
                </div>
            </aside>
        </div>

        <footer>
            <div class="copyright">
                Game Design and Code: Copyright &copy; 2002-2005, Eric Stevens & JT Traub, &copy; 2006-2007, Dragonprime Development Team <br/> 
<!-- Creative Commons License -->
<a rel='license' href='http://creativecommons.org/licenses/by-nc-sa/2.0/' target='_blank'><img clear='right' align='left' alt='Creative Commons License' border='0' src='images/somerights20.gif' /></a>
This work is licensed under a <a rel='license' href='http://creativecommons.org/licenses/by-nc-sa/2.0/' target='_blank'>Creative Commons License</a>.<br />
<!-- /Creative Commons License -->
<!--
  <rdf:RDF xmlns='http://web.resource.org/cc/' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>
	<Work rdf:about=''>
	  <dc:type rdf:resource='http://purl.org/dc/dcmitype/Interactive' />
	  <license rdf:resource='http://creativecommons.org/licenses/by-nc-sa/2.0/' />
	</Work>
	<License rdf:about='http://creativecommons.org/licenses/by-nc-sa/2.0/'>
	  <permits rdf:resource='http://web.resource.org/cc/Reproduction' />
	  <permits rdf:resource='http://web.resource.org/cc/Distribution' />
	  <requires rdf:resource='http://web.resource.org/cc/Notice' />
	  <requires rdf:resource='http://web.resource.org/cc/Attribution' />
	  <prohibits rdf:resource='http://web.resource.org/cc/CommercialUse' />
	  <permits rdf:resource='http://web.resource.org/cc/DerivativeWorks' />
	  <requires rdf:resource='http://web.resource.org/cc/ShareAlike' />
	</License>
  </rdf:RDF>
-->

                <a href='source.php?url=/home.php' onclick="window.open('source.php?url=/home.php','sourcephpurlhomephp','scrollbars=yes,resizable=yes,width=550,height=300').focus();return false;" target='_blank'>View PHP Source</a>
                Version: 1.1.2 Dragonprime Edition
                PG:0.01s | Q:46 | QT: 0.008s |  PGA:0s | PGT:0s/2c
            </div>
        </footer>

        <!-- Mobile Bottom Navigation -->
        <div class="bottom-nav">
            <button class="nav-btn" id="btnNav">
                <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <line x1="19" y1="12" x2="5" y2="12"></line>
                    <polyline points="12 19 5 12 12 5"></polyline>
                </svg>
                Navs
            </button>
            <button class="nav-btn" id="btnMain">
                <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <rect x="2" y="6" width="20" height="12" rx="2"></rect>
                    <path d="M6 12h4m-2-2v4"></path>
                    <line x1="15" y1="11" x2="15" y2="11"></line>
                    <line x1="18" y1="13" x2="18" y2="13"></line>
                </svg>
                Main
            </button>
            <button class="nav-btn" id="btnStats">
                <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                    <polyline points="12 5 19 12 12 19"></polyline>
                </svg>
                Stats
            </button>
        </div>

        <!-- Sidebar Overlay -->
        <div class="sidebar-overlay" id="sidebarOverlay"></div>

        <!-- Modal Overlay -->
        <div class="modal-overlay" id="modalOverlay">
            <div class="modal-container">
                <div class="modal-header">
                    <div class="modal-title" id="modalTitle">Title</div>
                    <button class="modal-close" id="modalClose">&times;</button>
                </div>
                <div class="modal-body" id="modalBody">
                    <!-- Content will be loaded here -->
                </div>
            </div>
        </div>

        <!-- Settings Modal -->
        <div class="modal-overlay settings-modal" id="settingsModal">
            <div class="modal-container">
                <div class="modal-header">
                    <span class="modal-title">Theme Settings</span>
                    <button class="modal-close" id="settingsClose">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="settings-group">
                        <!-- Layout & Width Row -->
                        <div class="settings-row">
                            <div class="settings-label">Layout & Width</div>
                            <div class="settings-options">
                                <!-- Layout Style -->
                                <div class="setting-subgroup">
                                    <div style="font-size: 0.8em; color: #aaa; margin-bottom: 5px;">Style</div>
                                    <div style="display: flex; gap: 5px;">
                                        <input type="radio" name="layoutStyle" id="layoutUnified" value="unified"
                                            class="icon-radio">
                                        <label for="layoutUnified" class="icon-label" title="Unified">
                                            <svg viewBox="0 0 24 24">
                                                <rect x="3" y="3" width="18" height="18" rx="2"></rect>
                                            </svg>
                                        </label>

                                        <input type="radio" name="layoutStyle" id="layoutSplit" value="split"
                                            class="icon-radio">
                                        <label for="layoutSplit" class="icon-label" title="Split">
                                            <svg viewBox="0 0 24 24">
                                                <rect x="2" y="4" width="4" height="16" rx="1"></rect>
                                                <rect x="8" y="4" width="8" height="16" rx="1"></rect>
                                                <rect x="18" y="4" width="4" height="16" rx="1"></rect>
                                            </svg>
                                        </label>
                                    </div>
                                </div>

                                <!-- Desktop Width -->
                                <div class="setting-subgroup">
                                    <div style="font-size: 0.8em; color: #aaa; margin-bottom: 5px;">Desktop Width</div>
                                    <div style="display: flex; gap: 5px;">
                                        <input type="radio" name="desktopWidth" id="widthSmall" value="small"
                                            class="icon-radio">
                                        <label for="widthSmall" class="icon-label" title="Small (1200px)">
                                            <svg viewBox="0 0 24 24">
                                                <rect x="6" y="4" width="12" height="16" rx="1"></rect>
                                                <line x1="2" y1="12" x2="4" y2="12"></line>
                                                <line x1="20" y1="12" x2="22" y2="12"></line>
                                            </svg>
                                        </label>

                                        <input type="radio" name="desktopWidth" id="widthMedium" value="medium"
                                            class="icon-radio">
                                        <label for="widthMedium" class="icon-label" title="Medium (1500px)">
                                            <svg viewBox="0 0 24 24">
                                                <rect x="4" y="4" width="16" height="16" rx="1"></rect>
                                                <line x1="1" y1="12" x2="3" y2="12"></line>
                                                <line x1="21" y1="12" x2="23" y2="12"></line>
                                            </svg>
                                        </label>

                                        <input type="radio" name="desktopWidth" id="widthLarge" value="large"
                                            class="icon-radio">
                                        <label for="widthLarge" class="icon-label" title="Full Width">
                                            <svg viewBox="0 0 24 24">
                                                <rect x="2" y="4" width="20" height="16" rx="1"></rect>
                                            </svg>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Colors Row -->
                        <div class="settings-row">
                            <div class="settings-label">Theme Colors</div>
                            <div class="settings-options">
                                <div class="color-group">
                                    <input type="color" id="primaryBgColor" value="#1a1a1a" title="Primary Background">
                                    <span>Primary</span>
                                </div>
                                <div class="color-group">
                                    <input type="color" id="secondaryBgColor" value="#252525"
                                        title="Secondary Background">
                                    <span>Secondary</span>
                                </div>
                                <div class="color-group">
                                    <input type="color" id="navHighlightColor" value="#4da6ff" title="Highlight Color">
                                    <span>Highlight</span>
                                </div>
                            </div>
                        </div>

                        <div class="settings-row">
                            <label for="fontSelect" class="settings-label">Font Style</label>
                            <select id="fontSelect" style="flex: 1;">
                                <option value="standard">Standard</option>
                                <option value="dyslexic">Dyslexic-Friendly (OpenDyslexic)</option>
                                <option value="Droid Sans">Droid Sans</option>
                                <option value="Merced">Merced</option>
                            </select>
                        </div>

                        <div class="settings-row">
                            <label for="fontSizeSelect" class="settings-label">Font Size</label>
                            <select id="fontSizeSelect" style="flex: 1;">
                                <option value="small">Small</option>
                                <option value="medium">Medium</option>
                                <option value="large" selected>Large (Default)</option>
                            </select>
                        </div>
                        <div class="settings-actions">
                            <button class="btn-secondary" id="resetSettings">Reset to Defaults</button>
                            <button class="btn-primary" id="saveSettings">Save Settings</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>