<?php
// Start the session for favorites
session_start();

// Define constants for configuration
define('DEFAULT_PAGE', 'Tools.php');
define('ALLOWED_PAGES', [
    'Tools.php' => 'Tools',
    'server_filter.php' => 'Server Filter',
    'IPAddressConverter.php' => 'IP Address Converter',
    'Multi-Tool_Page.php' => 'Wrap & Randomize HTML',
    'process_Remove_Tag_and_Style.php' => 'Remove Tag and Style',
    'hexadecimal_entities_tools.php' => 'Hexadecimal Entities Tools',
    'inline-css-converter.html' => 'Inline CSS Converter',
    'encoder_lines_base64_and_quoted_p.php' => 'Encode Lines',
    'Text_File_Operations.php' => 'Text File Operations',
    'mx.php' => 'MX Check',
    'Email_Header_Formatter.php' => 'Email Formatter',
    'convert_files.php' => 'Upload and Convert Files',
    'dmarc_checker.php' => 'DMARC Checker',
    'Excel_for_Analysis.html' => 'Excel File for Analysis'
]);

// Define tool descriptions
define('TOOL_DESCRIPTIONS', [
    'Tools.php' => 'General tools for various tasks and text processing operations.',
    'server_filter.php' => 'Advanced server filtering and management tools.',
    'IPAddressConverter.php' => 'Convert IP addresses between different formats.',
    'Multi-Tool_Page.php' => 'Wrap and randomize HTML content with advanced options.',
    'process_Remove_Tag_and_Style.php' => 'Clean HTML by removing tags and inline styles.',
    'hexadecimal_entities_tools.php' => 'Convert text to hexadecimal entities and back.',
    'inline-css-converter.html' => 'Convert external CSS to inline styles for emails.',
    'encoder_lines_base64_and_quoted_p.php' => 'Encode text using Base64 and quoted-printable methods.',
    'Text_File_Operations.php' => 'Perform various operations on text files and content.',
    'mx.php' => 'Check and analyze MX records for email domains.',
    'Email_Header_Formatter.php' => 'Format, analyze and validate email headers.',
    'convert_files.php' => 'Upload and convert files between different formats.',
    'dmarc_checker.php' => 'Extract domains and check DMARC policies.',
    'Excel_for_Analysis.html' => 'Analyze Excel files for data insights and statistics.'
]);

// Define tool categories with icons
define('TOOL_CATEGORIES', [
    'General Tools' => [
        'icon' => 'fas fa-tools',
        'tools' => [
            'Tools.php' => 'Tools',
            'server_filter.php' => 'Server Filter',
            'IPAddressConverter.php' => 'IP Address Converter'
        ]
    ],
    'HTML Tools' => [
        'icon' => 'fab fa-html5',
        'tools' => [
            'Multi-Tool_Page.php' => 'Wrap & Randomize HTML',
            'process_Remove_Tag_and_Style.php' => 'Remove Tag and Style',
            'inline-css-converter.html' => 'Inline CSS Converter',
            'hexadecimal_entities_tools.php' => 'Hexadecimal Entities Tools'
        ]
    ],
    'Text Tools' => [
        'icon' => 'fas fa-file-text',
        'tools' => [
            'Text_File_Operations.php' => 'Text File Operations',
            'encoder_lines_base64_and_quoted_p.php' => 'Encode Lines'
        ]
    ],
    'Email Tools' => [
        'icon' => 'fas fa-envelope',
        'tools' => [
            'Email_Header_Formatter.php' => 'Email Formatter',
            'mx.php' => 'MX Check',
            'dmarc_checker.php' => 'DMARC Checker'
        ]
    ],
    'File Tools' => [
        'icon' => 'fas fa-file-upload',
        'tools' => [
            'convert_files.php' => 'Upload and Convert Files',
            'Excel_for_Analysis.html' => 'Excel File for Analysis'
        ]
    ]
]);

// Initialize favorites list
if (!isset($_SESSION['favorites'])) {
    $_SESSION['favorites'] = [];
}

// Handle AJAX requests for favorites
if (isset($_POST['action']) && $_POST['action'] === 'toggle_favorite') {
    $favoritePage = $_POST['page'] ?? '';
    if (array_key_exists($favoritePage, ALLOWED_PAGES)) {
        if (in_array($favoritePage, $_SESSION['favorites'])) {
            $_SESSION['favorites'] = array_diff($_SESSION['favorites'], [$favoritePage]);
            echo json_encode(['status' => 'removed', 'message' => 'Removed from favorites']);
        } else {
            $_SESSION['favorites'][] = $favoritePage;
            echo json_encode(['status' => 'added', 'message' => 'Added to favorites']);
        }
    }
    exit;
}

// Add/remove favorites (fallback for non-AJAX)
if (isset($_GET['toggle_favorite'])) {
    $favoritePage = $_GET['toggle_favorite'];
    if (array_key_exists($favoritePage, ALLOWED_PAGES)) {
        if (in_array($favoritePage, $_SESSION['favorites'])) {
            $_SESSION['favorites'] = array_diff($_SESSION['favorites'], [$favoritePage]);
        } else {
            $_SESSION['favorites'][] = $favoritePage;
        }
    }
    // Redirect to prevent resubmission
    header('Location: ' . $_SERVER['PHP_SELF'] . '?' . http_build_query(['page' => $_GET['page'] ?? DEFAULT_PAGE]));
    exit;
}

// Sanitize and validate the 'page' parameter
$page = isset($_GET['page']) ? htmlspecialchars($_GET['page'], ENT_QUOTES, 'UTF-8') : DEFAULT_PAGE;
if (!array_key_exists($page, ALLOWED_PAGES)) {
    $page = DEFAULT_PAGE;
}

// Function to load page content
function loadPageContent($page) {
    $file = basename($page);
    
    if ($file === 'Tools.php') {
        renderToolsPage();
    } elseif (file_exists($file)) {
        // Security check for file inclusion
        $realPath = realpath($file);
        $currentDir = realpath('.');
        
        if ($realPath && strpos($realPath, $currentDir) === 0) {
            include $file;
        } else {
            renderErrorPage("Security: File access denied.");
        }
    } else {
        renderErrorPage("The requested page '$file' was not found.");
    }
}

// Function to render the tools page
function renderToolsPage() {
    ?>
    <div class="tools-container">
        <div class="page-header">
            <div class="header-content">
                <h2 class="page-title">
                    <i class="fas fa-tools mr-2"></i>
                    Advanced Tools Dashboard
                </h2>
                <p class="page-description">Professional text processing and analysis tools for developers and system administrators.</p>
            </div>
            <div class="header-stats">
                <div class="stat-item">
                    <div class="stat-value"><?php echo count(ALLOWED_PAGES); ?></div>
                    <div class="stat-label">Total Tools</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value"><?php echo count($_SESSION['favorites']); ?></div>
                    <div class="stat-label">Favorites</div>
                </div>
            </div>
        </div>

        <div class="tools-grid">
            <!-- Text Processing Section -->
            <div class="tool-card">
                <div class="tool-card-header">
                    <h3><i class="fas fa-text-width mr-2"></i>Text Processing Tools</h3>
                </div>
                <div class="tool-card-body">
                    <div class="button-grid">
                        <button class="tool-btn" onclick="processText('extract_ips')" title="Extract IP addresses from text">
                            <i class="fas fa-network-wired"></i>
                            Extract IPs
                        </button>
                        <button class="tool-btn" onclick="processText('extract_domains')" title="Extract domain names from text">
                            <i class="fas fa-globe"></i>
                            Extract Domains
                        </button>
                        <button class="tool-btn" onclick="processText('concatenate')" title="Concatenate server information">
                            <i class="fas fa-link"></i>
                            Concatenate
                        </button>
                        <button class="tool-btn" onclick="processText('remove_duplicates')" title="Remove duplicate entries">
                            <i class="fas fa-filter"></i>
                            Remove Duplicates
                        </button>
                    </div>
                </div>
            </div>

            <!-- Encoding Tools Section -->
            <div class="tool-card">
                <div class="tool-card-header">
                    <h3><i class="fas fa-code mr-2"></i>Encoding & Conversion</h3>
                </div>
                <div class="tool-card-body">
                    <div class="button-grid">
                        <button class="tool-btn secondary" onclick="processText('base64_encode')" title="Encode text to Base64">
                            <i class="fas fa-lock"></i>
                            Base64 Encode
                        </button>
                        <button class="tool-btn secondary" onclick="processText('base64_decode')" title="Decode Base64 text">
                            <i class="fas fa-unlock"></i>
                            Base64 Decode
                        </button>
                        <button class="tool-btn secondary" onclick="processText('url_encode')" title="URL encode text">
                            <i class="fas fa-link"></i>
                            URL Encode
                        </button>
                        <button class="tool-btn secondary" onclick="processText('html_entities')" title="Convert to HTML entities">
                            <i class="fas fa-code"></i>
                            HTML Entities
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Text Processing Interface -->
        <div class="processing-interface">
            <div class="input-section">
                <div class="section-header">
                    <label for="input-text" class="section-title">
                        <i class="fas fa-edit mr-2"></i>Input Text
                    </label>
                    <div class="input-controls">
                        <button class="control-btn" onclick="clearInput()" title="Clear input">
                            <i class="fas fa-trash"></i>
                        </button>
                        <button class="control-btn" onclick="pasteClipboard()" title="Paste from clipboard">
                            <i class="fas fa-paste"></i>
                        </button>
                        <span class="character-count" id="char-count">0 characters</span>
                    </div>
                </div>
                <textarea 
                    id="input-text" 
                    class="text-input" 
                    placeholder="Paste your text here for processing..."
                    oninput="updateCharCount()"
                    rows="8"
                ></textarea>
            </div>

            <div class="output-section">
                <div class="section-header">
                    <label class="section-title">
                        <i class="fas fa-eye mr-2"></i>Results
                        <span id="result-count" class="result-badge">0 items found</span>
                    </label>
                    <div class="output-controls">
                        <button class="control-btn" onclick="copyResults()" title="Copy results">
                            <i class="fas fa-copy"></i>
                        </button>
                        <button class="control-btn" onclick="downloadResults()" title="Download as file">
                            <i class="fas fa-download"></i>
                        </button>
                        <button class="control-btn" onclick="clearOutput()" title="Clear results">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div id="output-text" class="text-output">
                    <div class="placeholder-content">
                        <i class="fas fa-arrow-up"></i>
                        <p>Processed results will appear here</p>
                        <small>Select a processing tool above and paste your text to get started</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .tools-container {
            max-width: 100%;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .page-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin: 0 0 0.5rem 0;
        }

        .page-description {
            font-size: 1rem;
            opacity: 0.9;
            margin: 0;
        }

        .header-stats {
            display: flex;
            gap: 2rem;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            line-height: 1;
        }

        .stat-label {
            font-size: 0.875rem;
            opacity: 0.8;
            margin-top: 0.25rem;
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .tool-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .tool-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }

        .tool-card-header {
            background: #f8fafc;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #e2e8f0;
        }

        .tool-card-header h3 {
            font-size: 1.125rem;
            font-weight: 600;
            margin: 0;
            color: #2d3748;
        }

        .tool-card-body {
            padding: 1.5rem;
        }

        .button-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        .tool-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.875rem;
        }

        .tool-btn:hover {
            background: #2563eb;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
        }

        .tool-btn.secondary {
            background: #10b981;
        }

        .tool-btn.secondary:hover {
            background: #059669;
            box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
        }

        .processing-interface {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        .input-section, .output-section {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
        }

        .section-title {
            font-weight: 600;
            color: #2d3748;
            font-size: 1rem;
        }

        .input-controls, .output-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .control-btn {
            padding: 0.5rem;
            background: #e2e8f0;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s ease;
            color: #4a5568;
        }

        .control-btn:hover {
            background: #cbd5e0;
        }

        .character-count {
            font-size: 0.875rem;
            color: #718096;
            margin-left: 0.5rem;
        }

        .result-badge {
            background: #3b82f6;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-left: 0.5rem;
        }

        .text-input {
            width: 100%;
            padding: 1.5rem;
            border: none;
            resize: vertical;
            font-family: 'Fira Code', monospace;
            font-size: 0.875rem;
            line-height: 1.5;
            background: #fafafa;
        }

        .text-input:focus {
            outline: none;
            background: white;
        }

        .text-output {
            padding: 1.5rem;
            min-height: 200px;
            font-family: 'Fira Code', monospace;
            font-size: 0.875rem;
            line-height: 1.5;
            background: #fafafa;
            white-space: pre-wrap;
            word-break: break-all;
        }

        .placeholder-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #a0aec0;
            text-align: center;
        }

        .placeholder-content i {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        @media (max-width: 768px) {
            .page-header {
                flex-direction: column;
                text-align: center;
                gap: 1rem;
            }

            .header-stats {
                justify-content: center;
            }

            .tools-grid {
                grid-template-columns: 1fr;
            }

            .processing-interface {
                grid-template-columns: 1fr;
            }

            .button-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <script>
        let currentOperation = null;

        function updateCharCount() {
            const input = document.getElementById('input-text');
            const count = document.getElementById('char-count');
            count.textContent = `${input.value.length} characters`;
        }

        function clearInput() {
            document.getElementById('input-text').value = '';
            updateCharCount();
        }

        async function pasteClipboard() {
            try {
                const text = await navigator.clipboard.readText();
                document.getElementById('input-text').value = text;
                updateCharCount();
            } catch (err) {
                alert('Unable to access clipboard. Please paste manually.');
            }
        }

        function clearOutput() {
            const output = document.getElementById('output-text');
            output.innerHTML = `
                <div class="placeholder-content">
                    <i class="fas fa-arrow-up"></i>
                    <p>Processed results will appear here</p>
                    <small>Select a processing tool above and paste your text to get started</small>
                </div>
            `;
            updateResultCount(0);
        }

        function updateResultCount(count) {
            document.getElementById('result-count').textContent = `${count} items found`;
        }

        function processText(operation) {
            currentOperation = operation;
            const input = document.getElementById('input-text').value;
            const output = document.getElementById('output-text');
            
            if (!input.trim()) {
                alert('Please enter some text to process.');
                return;
            }

            let results = [];
            
            switch (operation) {
                case 'extract_ips':
                    results = extractIPs(input);
                    break;
                case 'extract_domains':
                    results = extractDomains(input);
                    break;
                case 'concatenate':
                    results = [input.split('\n').filter(line => line.trim()).join(' ')];
                    break;
                case 'remove_duplicates':
                    results = [...new Set(input.split('\n').filter(line => line.trim()))];
                    break;
                case 'base64_encode':
                    results = [btoa(input)];
                    break;
                case 'base64_decode':
                    try {
                        results = [atob(input)];
                    } catch (e) {
                        results = ['Error: Invalid Base64 input'];
                    }
                    break;
                case 'url_encode':
                    results = [encodeURIComponent(input)];
                    break;
                case 'html_entities':
                    results = [input.replace(/[&<>"']/g, function(match) {
                        const entities = {
                            '&': '&amp;',
                            '<': '&lt;',
                            '>': '&gt;',
                            '"': '&quot;',
                            "'": '&#39;'
                        };
                        return entities[match];
                    })];
                    break;
                default:
                    results = ['Unknown operation'];
            }
            
            output.textContent = results.join('\n');
            updateResultCount(results.length);
        }

        function extractIPs(text) {
            const ipRegex = /(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/g;
            return [...new Set(text.match(ipRegex) || [])];
        }

        function extractDomains(text) {
            const domainRegex = /(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}/g;
            return [...new Set(text.match(domainRegex) || [])];
        }

        async function copyResults() {
            const output = document.getElementById('output-text');
            try {
                await navigator.clipboard.writeText(output.textContent);
                showToast('Results copied to clipboard!', 'success');
            } catch (err) {
                showToast('Failed to copy to clipboard', 'error');
            }
        }

        function downloadResults() {
            const output = document.getElementById('output-text');
            const content = output.textContent;
            
            if (!content.trim() || content.includes('Processed results will appear here')) {
                alert('No results to download.');
                return;
            }
            
            const blob = new Blob([content], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `${currentOperation || 'results'}_${new Date().getTime()}.txt`;
            a.click();
            URL.revokeObjectURL(url);
        }

        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `toast toast-${type}`;
            toast.textContent = message;
            toast.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 12px 24px;
                border-radius: 8px;
                color: white;
                font-weight: 500;
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            
            if (type === 'success') {
                toast.style.background = '#10b981';
            } else if (type === 'error') {
                toast.style.background = '#ef4444';
            } else {
                toast.style.background = '#3b82f6';
            }
            
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        }
    </script>
    <?php
}

// Function to render error page
function renderErrorPage($message) {
    ?>
    <div class="error-container">
        <div class="error-icon">
            <i class="fas fa-exclamation-triangle"></i>
        </div>
        <h2 class="error-title">Page Not Found</h2>
        <p class="error-message"><?php echo htmlspecialchars($message); ?></p>
        <div class="error-actions">
            <a href="?" class="btn btn-primary">
                <i class="fas fa-home mr-2"></i>Return to Dashboard
            </a>
        </div>
    </div>
    
    <style>
        .error-container {
            text-align: center;
            padding: 3rem 2rem;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .error-icon {
            font-size: 4rem;
            color: #f59e0b;
            margin-bottom: 1.5rem;
        }
        
        .error-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1rem;
        }
        
        .error-message {
            font-size: 1.125rem;
            color: #6b7280;
            margin-bottom: 2rem;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .btn-primary {
            background: #3b82f6;
            color: white;
        }
        
        .btn-primary:hover {
            background: #2563eb;
            transform: translateY(-1px);
        }
    </style>
    
    <script>
        setTimeout(() => {
            window.location.href = '?';
        }, 5000);
    </script>
    <?php
}

// Function to generate the navigation menu with collapsible categories and favorites
function generateNavigationMenu($currentPage) {
    $menu = '';

    // Search Box
    $menu .= '
    <div class="search-container mb-4">
        <div class="relative">
            <input type="text" id="tool-search" placeholder="Search tools..." 
                   class="w-full px-3 py-2 pl-10 text-sm bg-white/20 border border-white/30 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-white/50">
            <i class="fas fa-search absolute left-3 top-2.5 text-gray-300"></i>
        </div>
    </div>';

    // Favorites Section
    if (!empty($_SESSION['favorites'])) {
        $menu .= "<div class='favorites-section mb-4'>";
        $menu .= "<h3 class='text-sm font-semibold mb-2 text-gray-200 flex items-center'><i class='fas fa-star mr-2 text-yellow-400'></i>Favorites</h3>";
        $menu .= '<div class="space-y-1">';
        foreach ($_SESSION['favorites'] as $favorite) {
            if (array_key_exists($favorite, ALLOWED_PAGES)) {
                $name = ALLOWED_PAGES[$favorite];
                $activeClass = ($favorite === $currentPage) ? 'bg-white/30 text-white font-medium' : 'text-gray-200 hover:bg-white/20 hover:text-white';
                $description = TOOL_DESCRIPTIONS[$favorite];
                $menu .= "<div class='flex items-center justify-between rounded-lg p-2 $activeClass transition duration-200 group' title='$description'>
                            <a href='?page=$favorite' class='flex-1 text-sm'>$name</a>
                            <button onclick='toggleFavorite(\"$favorite\", this)' class='text-yellow-400 hover:text-yellow-300 ml-2 opacity-70 group-hover:opacity-100'>
                                <i class='fas fa-star'></i>
                            </button>
                          </div>";
            }
        }
        $menu .= '</div></div>';
        $menu .= '<hr class="my-4 border-white/20">';
    }

    // Category Toggle Controls
    $menu .= '<div class="category-controls mb-4">';
    $menu .= '<div class="grid grid-cols-2 gap-2">';
    $menu .= '<button id="expand-all" onclick="toggleAllCategories(true)" class="text-xs font-medium py-1.5 px-3 rounded-md bg-white/20 text-white hover:bg-white/30 transition">
                <i class="fas fa-expand-alt mr-1"></i>Expand All
              </button>';
    $menu .= '<button id="collapse-all" onclick="toggleAllCategories(false)" class="text-xs font-medium py-1.5 px-3 rounded-md bg-white/20 text-white hover:bg-white/30 transition hidden">
                <i class="fas fa-compress-alt mr-1"></i>Collapse All
              </button>';
    $menu .= '</div></div>';

    // Tool Categories
    foreach (TOOL_CATEGORIES as $category => $categoryData) {
        $icon = $categoryData['icon'];
        $tools = $categoryData['tools'];
        $toolCount = count($tools);
        
        $menu .= "<div class='category-section mb-3'>";
        $menu .= "<button class='category-header w-full text-left' onclick='toggleCategory(\"$category\")'>
                    <div class='flex items-center justify-between py-2 px-3 rounded-lg hover:bg-white/10 transition duration-200'>
                        <span class='flex items-center text-sm font-medium text-gray-200'>
                            <i class='$icon mr-2'></i>
                            $category
                        </span>
                        <div class='flex items-center gap-2'>
                            <span class='text-xs bg-white/20 px-2 py-1 rounded-full'>$toolCount</span>
                            <i class='fas fa-chevron-down transition-transform duration-200' id='chevron-$category'></i>
                        </div>
                    </div>
                  </button>";
        
        $menu .= "<div id='category-$category' class='category-content hidden mt-1 ml-4 space-y-1'>";
        foreach ($tools as $file => $name) {
            $activeClass = ($file === $currentPage) ? 'bg-white/30 text-white font-medium border-l-2 border-white' : 'text-gray-300 hover:bg-white/10 hover:text-white';
            $description = TOOL_DESCRIPTIONS[$file];
            $isFavorite = in_array($file, $_SESSION['favorites']);
            $favoriteIcon = $isFavorite ? 'fas fa-star text-yellow-400' : 'far fa-star text-gray-400 hover:text-yellow-400';
            
            $menu .= "<div class='flex items-center justify-between rounded-md p-2 $activeClass transition duration-200 group' title='$description'>
                        <a href='?page=$file' class='flex-1 text-sm'>$name</a>
                        <button onclick='toggleFavorite(\"$file\", this)' class='ml-2 opacity-70 group-hover:opacity-100 transition-opacity'>
                            <i class='$favoriteIcon'></i>
                        </button>
                      </div>";
        }
        $menu .= '</div></div>';
    }

    return $menu;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo ALLOWED_PAGES[$page]; ?> - Sysbase Tools</title>
    <meta name="description" content="<?php echo TOOL_DESCRIPTIONS[$page]; ?>">
    <meta name="keywords" content="tools, resources, Sysbase, HTML, CSS, PHP, developer tools">
    <meta name="author" content="Sysbase Development Team">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    <!-- External Libraries -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --content-width: 1000px;
            --content-padding: 2rem;
            --sidebar-width: 280px;
            --transition-speed: 0.3s;
            --primary-color: #1e40af;
            --primary-dark: #1e3a8a;
            --accent-color: #3b82f6;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }

        /* Sidebar Styles */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            padding: 1.5rem;
            overflow-y: auto;
            transition: transform var(--transition-speed) ease-in-out;
            z-index: 1000;
            color: white;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }

        .sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.5);
        }

        .sidebar-hidden {
            transform: translateX(-100%);
        }

        .sidebar-header {
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .sidebar-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin: 0 0 0.5rem 0;
            background: linear-gradient(45deg, #ffffff, #e0e7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .sidebar-subtitle {
            font-size: 0.875rem;
            color: rgba(255,255,255,0.8);
            margin: 0;
        }

        /* Main Content */
        .main-content {
            margin-left: var(--sidebar-width);
            transition: margin-left var(--transition-speed) ease-in-out;
            min-height: 100vh;
            padding: 1rem;
        }

        .main-content-expanded {
            margin-left: 0;
        }

        /* Content Container */
        #content-container {
            max-width: var(--content-width);
            margin: 0 auto;
            padding: var(--content-padding);
            transition: all var(--transition-speed) ease-in-out;
        }

        .content-area {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: all var(--transition-speed) ease;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        /* Header Controls */
        .header-controls {
            position: fixed;
            top: 1rem;
            right: 1rem;
            display: flex;
            gap: 0.5rem;
            z-index: 100;
        }

        .header-btn {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.3);
            padding: 0.75rem;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #374151;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .header-btn:hover {
            background: rgba(255,255,255,1);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        }

        /* Size Controls */
        .size-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }

        .size-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #64748b;
            margin-right: 0.5rem;
        }

        .size-btn {
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
            background: white;
            border: 1px solid #d1d5db;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 500;
            transition: all 0.2s ease;
            color: #374151;
            min-width: 80px;
            text-align: center;
        }

        .size-btn:hover {
            background: #f3f4f6;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .size-btn.active {
            background: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        /* Toast Notifications */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 8px;
            color: white;
            font-weight: 500;
            z-index: 1001;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: slideInDown 0.3s ease;
        }

        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Loading States */
        .loading {
            position: relative;
            overflow: hidden;
        }

        .loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: loading 1.5s infinite;
        }

        @keyframes loading {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        /* Dark Mode */
        .dark {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        }

        .dark .content-area {
            background: #1e293b;
            border-color: rgba(148, 163, 184, 0.2);
            color: #e2e8f0;
        }

        .dark .sidebar {
            background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
        }

        .dark .size-controls {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border-color: #334155;
        }

        .dark .size-btn {
            background: #334155;
            border-color: #475569;
            color: #e2e8f0;
        }

        .dark .size-btn:hover {
            background: #475569;
        }

        .dark .header-btn {
            background: rgba(30, 41, 59, 0.9);
            color: #e2e8f0;
            border-color: rgba(148, 163, 184, 0.3);
        }

        .dark .header-btn:hover {
            background: rgba(30, 41, 59, 1);
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            :root {
                --content-padding: 1.5rem;
                --sidebar-width: 260px;
            }
        }

        @media (max-width: 768px) {
            :root {
                --content-padding: 1rem;
                --sidebar-width: 280px;
            }

            .sidebar {
                transform: translateX(-100%);
            }

            .sidebar-open {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0;
            }

            .size-controls {
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.25rem;
            }

            .size-btn {
                min-width: 70px;
                font-size: 0.75rem;
                padding: 0.4rem 0.6rem;
            }

            .header-controls {
                top: 4rem;
                right: 0.5rem;
            }
        }

        @media (max-width: 480px) {
            .content-area {
                padding: 1rem;
                margin: 0.5rem;
                border-radius: 12px;
            }
            
            #content-container {
                padding: 0.5rem;
            }
        }

        /* Performance Optimizations */
        .sidebar, .main-content, .content-area {
            will-change: transform;
        }

        /* Accessibility Improvements */
        .tool-btn:focus,
        .control-btn:focus,
        .size-btn:focus {
            outline: 2px solid #3b82f6;
            outline-offset: 2px;
        }

        .dark .tool-btn:focus,
        .dark .control-btn:focus,
        .dark .size-btn:focus {
            outline-color: #60a5fa;
        }

        /* Print Styles */
        @media print {
            .sidebar,
            .header-controls,
            .size-controls {
                display: none;
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .content-area {
                box-shadow: none;
                border: 1px solid #ccc;
            }
        }
    </style>
</head>
<body>
    <!-- Sidebar Toggle Button (Mobile) -->
    <button id="sidebar-toggle" class="md:hidden fixed top-4 left-4 z-50 p-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all duration-200 shadow-lg">
        <i class="fas fa-bars text-lg"></i>
    </button>

    <!-- Sidebar Navigation -->
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-header">
            <h1 class="sidebar-title">
                <i class="fas fa-cogs mr-2"></i>
                Sysbase Tools
            </h1>
            <p class="sidebar-subtitle">Professional Web Development Suite</p>
            
            <!-- Sidebar Controls -->
            <div class="flex items-center justify-between mt-4">
                <button id="dark-mode-toggle" class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white/20 hover:bg-white/30 text-white transition-all duration-200">
                    <i class="fas fa-moon mr-1"></i>
                    <span id="dark-mode-text">Dark Mode</span>
                </button>
                <button id="sidebar-close" class="md:hidden text-gray-300 hover:text-white transition-colors">
                    <i class="fas fa-times text-lg"></i>
                </button>
            </div>
        </div>
        
        <div class="navigation-menu">
            <?php echo generateNavigationMenu($page); ?>
        </div>
        
        <!-- Sidebar Footer -->
        <div class="mt-auto pt-4 border-t border-white/20">
            <div class="text-xs text-gray-300 text-center">
                <p>&copy; 2025 Sysbase Tools</p>
                <p class="mt-1">v2.1.0</p>
            </div>
        </div>
    </nav>

    <!-- Main Content Area -->
    <div id="main-content" class="main-content">
        <!-- Header Controls -->
        <div class="header-controls">
            <button class="header-btn" onclick="toggleSidebar()" title="Toggle Sidebar">
                <i class="fas fa-bars"></i>
            </button>
            <button class="header-btn" onclick="goHome()" title="Home">
                <i class="fas fa-home"></i>
            </button>
            <button class="header-btn" onclick="showShortcuts()" title="Keyboard Shortcuts">
                <i class="fas fa-keyboard"></i>
            </button>
            <button class="header-btn" onclick="showAbout()" title="About">
                <i class="fas fa-info-circle"></i>
            </button>
        </div>

        <!-- Content Container -->
        <div id="content-container">
            <!-- Size Controls -->
            <div class="size-controls">
                <span class="size-label">
                    <i class="fas fa-expand-arrows-alt mr-1"></i>
                    Layout Width:
                </span>
                <button class="size-btn" data-size="small" title="Compact View (800px) - Ctrl+1">
                    <i class="fas fa-mobile-alt mr-1"></i>
                    Compact
                </button>
                <button class="size-btn active" data-size="medium" title="Balanced View (1000px) - Ctrl+2">
                    <i class="fas fa-desktop mr-1"></i>
                    Balanced
                </button>
                <button class="size-btn" data-size="large" title="Wide View (1200px) - Ctrl+3">
                    <i class="fas fa-tv mr-1"></i>
                    Wide
                </button>
                <button class="size-btn" data-size="full" title="Full Width (95%) - Ctrl+4">
                    <i class="fas fa-expand mr-1"></i>
                    Full
                </button>
            </div>

            <!-- Main Content Area -->
            <main id="content" class="content-area">
                <?php loadPageContent($page); ?>
            </main>
        </div>

        <!-- Footer -->
        <footer class="text-center mt-8 p-6 bg-white/10 backdrop-blur-sm text-white rounded-xl mx-4">
            <div class="flex justify-center items-center gap-4 mb-2">
                <i class="fas fa-code"></i>
                <span class="font-medium">Sysbase Development Suite</span>
                <i class="fas fa-code"></i>
            </div>
            <p class="text-sm opacity-80">Built with PHP, HTML5, CSS3 & JavaScript</p>
        </footer>
    </div>

    <!-- Keyboard Shortcuts Modal -->
    <div id="shortcuts-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50" onclick="closeShortcuts()">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md w-full" onclick="event.stopPropagation()">
                <h3 class="text-lg font-bold mb-4 flex items-center">
                    <i class="fas fa-keyboard mr-2"></i>
                    Keyboard Shortcuts
                </h3>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span>Compact View</span>
                        <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Ctrl + 1</kbd>
                    </div>
                    <div class="flex justify-between">
                        <span>Balanced View</span>
                        <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Ctrl + 2</kbd>
                    </div>
                    <div class="flex justify-between">
                        <span>Wide View</span>
                        <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Ctrl + 3</kbd>
                    </div>
                    <div class="flex justify-between">
                        <span>Full Width</span>
                        <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Ctrl + 4</kbd>
                    </div>
                    <div class="flex justify-between">
                        <span>Toggle Dark Mode</span>
                        <kbd class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Ctrl + D</kbd>
                    </div>
                </div>
                <button onclick="closeShortcuts()" class="mt-4 w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
                    Close
                </button>
            </div>
        </div>
    </div>

    <script>
        // Global variables
        let sidebarVisible = window.innerWidth >= 768;
        let currentOperation = null;

        // Size presets for different layouts
        const sizePresets = {
            small: { width: '800px', padding: '1.5rem' },
            medium: { width: '1000px', padding: '2rem' },
            large: { width: '1200px', padding: '2.5rem' },
            full: { width: '95%', padding: '2rem' }
        };

        // Initialize dashboard on page load
        document.addEventListener('DOMContentLoaded', function() {
            initializeDashboard();
        });

        function initializeDashboard() {
            setupSizeControls();
            setupDarkMode();
            setupNavigation();
            setupKeyboardShortcuts();
            setupSidebarToggle();
            setupSearch();
            setupFavorites();
            
            // Load saved preferences
            loadUserPreferences();
            
            console.log('🚀 Sysbase Tools Dashboard initialized successfully');
        }

        // Size Control System
        function setupSizeControls() {
            const container = document.getElementById('content-container');
            const sizeButtons = document.querySelectorAll('.size-btn');
            
            sizeButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const size = this.dataset.size;
                    applySize(size);
                    savePreference('contentSize', size);
                    showToast(`Layout changed to ${size} view`, 'success');
                });
            });
        }

        function applySize(size) {
            const preset = sizePresets[size];
            if (!preset) return;
            
            document.documentElement.style.setProperty('--content-width', preset.width);
            document.documentElement.style.setProperty('--content-padding', preset.padding);
            
            // Update active button
            document.querySelectorAll('.size-btn').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.size === size);
            });
        }

        // Dark Mode System
        function setupDarkMode() {
            const darkModeToggle = document.getElementById('dark-mode-toggle');
            const darkModeText = document.getElementById('dark-mode-text');
            
            darkModeToggle.addEventListener('click', function() {
                toggleDarkMode();
            });
        }

        function toggleDarkMode() {
            const isDark = document.body.classList.toggle('dark');
            const darkModeText = document.getElementById('dark-mode-text');
            const darkModeIcon = darkModeToggle.querySelector('i');
            
            if (isDark) {
                darkModeText.textContent = 'Light Mode';
                darkModeIcon.className = 'fas fa-sun mr-1';
            } else {
                darkModeText.textContent = 'Dark Mode';
                darkModeIcon.className = 'fas fa-moon mr-1';
            }
            
            savePreference('darkMode', isDark);
            showToast(`${isDark ? 'Dark' : 'Light'} mode activated`, 'info');
        }

        // Navigation System
        function setupNavigation() {
            // Category toggle functionality
            window.toggleCategory = function(category) {
                const categoryContent = document.getElementById(`category-${category}`);
                const chevron = document.getElementById(`chevron-${category}`);
                
                if (categoryContent && chevron) {
                    const isHidden = categoryContent.classList.contains('hidden');
                    categoryContent.classList.toggle('hidden');
                    chevron.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)';
                }
            };

            window.toggleAllCategories = function(expand) {
                const categories = document.querySelectorAll('[id^="category-"]');
                const chevrons = document.querySelectorAll('[id^="chevron-"]');
                const expandBtn = document.getElementById('expand-all');
                const collapseBtn = document.getElementById('collapse-all');

                categories.forEach(category => {
                    if (expand) {
                        category.classList.remove('hidden');
                    } else {
                        category.classList.add('hidden');
                    }
                });

                chevrons.forEach(chevron => {
                    chevron.style.transform = expand ? 'rotate(180deg)' : 'rotate(0deg)';
                });

                expandBtn.classList.toggle('hidden', expand);
                collapseBtn.classList.toggle('hidden', !expand);
            };
        }

        // Search Functionality
        function setupSearch() {
            const searchInput = document.getElementById('tool-search');
            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    const query = this.value.toLowerCase();
                    filterTools(query);
                });
            }
        }

        function filterTools(query) {
            const categories = document.querySelectorAll('.category-section');
            
            categories.forEach(category => {
                const tools = category.querySelectorAll('[href*="page="]');
                let hasVisibleTools = false;
                
                tools.forEach(tool => {
                    const toolName = tool.textContent.toLowerCase();
                    const toolContainer = tool.closest('[title]');
                    const isVisible = toolName.includes(query);
                    
                    if (toolContainer) {
                        toolContainer.style.display = isVisible ? 'flex' : 'none';
                        if (isVisible) hasVisibleTools = true;
                    }
                });
                
                category.style.display = hasVisibleTools || !query ? 'block' : 'none';
            });
        }

        // Favorites System
        function setupFavorites() {
            window.toggleFavorite = async function(page, button) {
                try {
                    const formData = new FormData();
                    formData.append('action', 'toggle_favorite');
                    formData.append('page', page);
                    
                    const response = await fetch(window.location.href, {
                        method: 'POST',
                        body: formData
                    });
                    
                    if (response.ok) {
                        const result = await response.json();
                        const icon = button.querySelector('i');
                        
                        if (result.status === 'added') {
                            icon.className = 'fas fa-star text-yellow-400';
                            showToast('Added to favorites', 'success');
                        } else {
                            icon.className = 'far fa-star text-gray-400 hover:text-yellow-400';
                            showToast('Removed from favorites', 'info');
                        }
                        
                        // Refresh the page to update favorites list
                        setTimeout(() => window.location.reload(), 1000);
                    }
                } catch (error) {
                    console.error('Error toggling favorite:', error);
                    showToast('Error updating favorites', 'error');
                }
            };
        }

        // Sidebar Controls
        function setupSidebarToggle() {
            const sidebar = document.getElementById('sidebar');
            const toggleButton = document.getElementById('sidebar-toggle');
            const closeButton = document.getElementById('sidebar-close');
            const mainContent = document.getElementById('main-content');

            function updateSidebarState() {
                if (window.innerWidth < 768) {
                    sidebar.classList.toggle('sidebar-open', sidebarVisible);
                    mainContent.classList.remove('main-content-expanded');
                } else {
                    sidebar.classList.toggle('sidebar-hidden', !sidebarVisible);
                    mainContent.classList.toggle('main-content-expanded', !sidebarVisible);
                }
            }

            toggleButton?.addEventListener('click', () => {
                sidebarVisible = !sidebarVisible;
                updateSidebarState();
            });

            closeButton?.addEventListener('click', () => {
                sidebarVisible = false;
                updateSidebarState();
            });

            // Close sidebar on mobile when clicking outside
            document.addEventListener('click', (e) => {
                if (window.innerWidth < 768 && sidebarVisible && 
                    !sidebar.contains(e.target) && 
                    !toggleButton.contains(e.target)) {
                    sidebarVisible = false;
                    updateSidebarState();
                }
            });

            // Handle window resize
            window.addEventListener('resize', () => {
                if (window.innerWidth >= 768) {
                    sidebarVisible = true;
                }
                updateSidebarState();
            });

            updateSidebarState();
        }

        // Keyboard Shortcuts
        function setupKeyboardShortcuts() {
            document.addEventListener('keydown', (e) => {
                // Size shortcuts (Ctrl + 1-4)
                if (e.ctrlKey && e.key >= '1' && e.key <= '4') {
                    e.preventDefault();
                    const sizes = ['small', 'medium', 'large', 'full'];
                    const sizeIndex = parseInt(e.key) - 1;
                    const size = sizes[sizeIndex];
                    applySize(size);
                    savePreference('contentSize', size);
                    showToast(`Layout: ${size} view`, 'info');
                }
                
                // Dark mode toggle (Ctrl + D)
                if (e.ctrlKey && e.key === 'd') {
                    e.preventDefault();
                    toggleDarkMode();
                }
                
                // Sidebar toggle (Ctrl + B)
                if (e.ctrlKey && e.key === 'b') {
                    e.preventDefault();
                    toggleSidebar();
                }
            });
        }

        // Utility Functions
        function toggleSidebar() {
            sidebarVisible = !sidebarVisible;
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('main-content');
            
            if (window.innerWidth < 768) {
                sidebar.classList.toggle('sidebar-open', sidebarVisible);
            } else {
                sidebar.classList.toggle('sidebar-hidden', !sidebarVisible);
                mainContent.classList.toggle('main-content-expanded', !sidebarVisible);
            }
        }

        function goHome() {
            window.location.href = '?';
        }

        function showShortcuts() {
            document.getElementById('shortcuts-modal').classList.remove('hidden');
        }

        function closeShortcuts() {
            document.getElementById('shortcuts-modal').classList.add('hidden');
        }

        function showAbout() {
            showToast('Sysbase Tools v2.1.0 - Professional Web Development Suite', 'info');
        }

        // Toast Notification System
        function showToast(message, type = 'info', duration = 3000) {
            // Remove existing toasts
            document.querySelectorAll('.toast').forEach(toast => toast.remove());
            
            const toast = document.createElement('div');
            toast.className = 'toast';
            
            const icons = {
                success: 'fas fa-check-circle',
                error: 'fas fa-exclamation-circle',
                warning: 'fas fa-exclamation-triangle',
                info: 'fas fa-info-circle'
            };
            
            const colors = {
                success: '#10b981',
                error: '#ef4444',
                warning: '#f59e0b',
                info: '#3b82f6'
            };
            
            toast.innerHTML = `
                <i class="${icons[type]} mr-2"></i>
                ${message}
            `;
            
            toast.style.background = colors[type];
            document.body.appendChild(toast);
            
            // Auto remove
            setTimeout(() => {
                toast.style.animation = 'slideOutUp 0.3s ease forwards';
                setTimeout(() => toast.remove(), 300);
            }, duration);
        }

        // Preference Management
        function savePreference(key, value) {
            try {
                localStorage.setItem(`sysbase_${key}`, JSON.stringify(value));
            } catch (e) {
                console.warn('Unable to save preference:', key);
            }
        }

        function loadPreference(key, defaultValue = null) {
            try {
                const saved = localStorage.getItem(`sysbase_${key}`);
                return saved ? JSON.parse(saved) : defaultValue;
            } catch (e) {
                return defaultValue;
            }
        }

        function loadUserPreferences() {
            // Load dark mode preference
            const isDark = loadPreference('darkMode', false);
            if (isDark) {
                document.body.classList.add('dark');
                const darkModeText = document.getElementById('dark-mode-text');
                const darkModeIcon = document.querySelector('#dark-mode-toggle i');
                if (darkModeText) darkModeText.textContent = 'Light Mode';
                if (darkModeIcon) darkModeIcon.className = 'fas fa-sun mr-1';
            }
            
            // Load size preference
            const savedSize = loadPreference('contentSize', getDefaultSize());
            applySize(savedSize);
        }

        function getDefaultSize() {
            return window.innerWidth < 768 ? 'full' : 'medium';
        }

        // Enhanced Error Handling
        window.addEventListener('error', function(e) {
            console.error('JavaScript Error:', e.error);
            showToast('An error occurred. Please refresh the page.', 'error');
        });

        // Performance monitoring
        window.addEventListener('load', function() {
            const loadTime = performance.now();
            if (loadTime > 2000) {
                console.warn('Slow page load detected:', loadTime + 'ms');
            }
        });

        // Add CSS animations
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideOutUp {
                to {
                    opacity: 0;
                    transform: translateY(-20px);
                }
            }
            
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            .content-area {
                animation: fadeIn 0.5s ease;
            }
            
            /* Smooth transitions for all interactive elements */
            button, a, .tool-card {
                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            /* Custom scrollbar for webkit browsers */
            ::-webkit-scrollbar {
                width: 8px;
            }
            
            ::-webkit-scrollbar-track {
                background: #f1f5f9;
            }
            
            ::-webkit-scrollbar-thumb {
                background: #cbd5e1;
                border-radius: 4px;
            }
            
            ::-webkit-scrollbar-thumb:hover {
                background: #94a3b8;
            }
            
            .dark ::-webkit-scrollbar-track {
                background: #1e293b;
            }
            
            .dark ::-webkit-scrollbar-thumb {
                background: #475569;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>