Spaces:

weltenschmid
/

anycoder-04dc4c5e

Running

App Files Files Community

weltenschmid commited on Jan 16

Commit

bc0e72b

verified ·

1 Parent(s): ee56293

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +556 -759

index.html CHANGED Viewed

@@ -3,933 +3,730 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Royal Fortune | Modern Casino</title>
-    <!-- Google Fonts: Inter for clean, modern UI -->
-    <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&display=swap" rel="stylesheet">
-    <!-- FontAwesome for Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* --- CSS VARIABLES & RESET --- */
         :root {
-            --bg-body: #0f172a;
-            --bg-surface: #1e293b;
-            --bg-surface-hover: #334155;
-            --primary: #6366f1; /* Indigo */
-            --primary-hover: #4f46e5;
-            --accent-gold: #fbbf24;
-            --accent-red: #ef4444;
             --accent-green: #10b981;
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-            --border: #334155;
-            --radius-sm: 8px;
-            --radius-md: 12px;
-            --radius-lg: 20px;
-            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
         }
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
-            -webkit-tap-highlight-color: transparent;
         }
         body {
-            font-family: 'Inter', sans-serif;
-            background-color: var(--bg-body);
-            color: var(--text-main);
-            line-height: 1.5;
             min-height: 100vh;
             display: flex;
             flex-direction: column;
         }
-        /* --- UTILITIES --- */
-        .container {
-            width: 100%;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
         }
-        .flex-center { display: flex; align-items: center; justify-content: center; }
-        .flex-between { display: flex; align-items: center; justify-content: space-between; }
-        .text-center { text-align: center; }
-        .hidden { display: none !important; }
-        /* --- BUTTONS --- */
-        .btn {
-            display: inline-flex;
             align-items: center;
-            justify-content: center;
-            gap: 8px;
-            padding: 10px 20px;
-            border-radius: var(--radius-md);
-            border: none;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            font-size: 0.95rem;
         }
-        .btn:active { transform: scale(0.98); }
-        .btn-primary {
-            background-color: var(--primary);
-            color: white;
         }
-        .btn-primary:hover { background-color: var(--primary-hover); }
-        .btn-outline {
-            background: transparent;
-            border: 1px solid var(--border);
-            color: var(--text-main);
         }
-        .btn-outline:hover { background-color: var(--bg-surface-hover); border-color: var(--text-muted); }
-        .btn-gold {
-            background: linear-gradient(135deg, var(--accent-gold), #d97706);
-            color: #000;
         }
-        .btn-gold:hover { filter: brightness(1.1); }
-        .btn-danger { background-color: var(--accent-red); color: white; }
-        .btn-success { background-color: var(--accent-green); color: white; }
-        /* --- HEADER --- */
-        header {
-            background: rgba(15, 23, 42, 0.9);
-            backdrop-filter: blur(10px);
-            position: sticky;
-            top: 0;
-            z-index: 50;
-            padding: 16px 0;
-            border-bottom: 1px solid var(--border);
         }
-        .logo {
-            font-size: 1.25rem;
-            font-weight: 700;
-            color: var(--text-main);
-            display: flex;
-            align-items: center;
-            gap: 8px;
         }
-        .logo i { color: var(--accent-gold); }
-        .header-controls {
             display: flex;
             align-items: center;
-            gap: 12px;
         }
-        .balance-pill {
-            background: var(--bg-surface);
-            padding: 6px 12px;
-            border-radius: 20px;
             font-weight: 600;
-            color: var(--accent-gold);
-            font-size: 0.9rem;
             display: flex;
             align-items: center;
-            gap: 6px;
-            border: 1px solid rgba(251, 191, 36, 0.2);
         }
-        .lang-select {
-            background: transparent;
-            color: var(--text-muted);
-            border: none;
-            font-family: inherit;
-            cursor: pointer;
-            font-size: 0.9rem;
         }
-        /* --- HERO & PROMO --- */
-        .hero {
-            padding: 40px 0;
         }
-        .promo-card {
-            background: linear-gradient(135deg, #1e293b, #0f172a);
-            border: 1px solid var(--border);
-            border-radius: var(--radius-lg);
-            padding: 30px;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            align-items: center;
-            margin-bottom: 40px;
-            position: relative;
             overflow: hidden;
         }
-        /* Decorative background blob */
-        .promo-card::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -20%;
-            width: 400px;
-            height: 400px;
-            background: var(--primary);
-            filter: blur(120px);
-            opacity: 0.15;
-            border-radius: 50%;
-        }
-        .promo-content {
-            position: relative;
-            z-index: 1;
-        }
-        .promo-title {
-            font-size: 2rem;
-            margin-bottom: 10px;
-            background: linear-gradient(to right, #fff, #94a3b8);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        .promo-desc {
-            color: var(--text-muted);
-            margin-bottom: 20px;
         }
-        .promo-image {
-            height: 200px;
-            background: url('https://picsum.photos/seed/casino/600/400') center/cover no-repeat;
-            border-radius: var(--radius-md);
-            opacity: 0.8;
-            box-shadow: var(--shadow-lg);
         }
-        /* --- GAMES GRID --- */
-        .section-header {
-            margin-bottom: 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
         }
-        .section-title { font-size: 1.5rem; font-weight: 700; }
-        .games-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-            gap: 20px;
-            margin-bottom: 60px;
-        }
-        .game-card {
-            background: var(--bg-surface);
-            border-radius: var(--radius-md);
             overflow: hidden;
-            transition: transform 0.2s, box-shadow 0.2s;
-            cursor: pointer;
-            border: 1px solid transparent;
-            display: flex;
-            flex-direction: column;
         }
-        .game-card:hover {
-            transform: translateY(-4px);
-            box-shadow: var(--shadow-lg);
-            border-color: var(--primary);
-        }
-        .card-thumb {
-            height: 160px;
-            background-color: #000;
             position: relative;
-            background-size: cover;
-            background-position: center;
         }
-        .card-thumb::after {
             content: '';
             position: absolute;
-            inset: 0;
-            background: linear-gradient(to top, var(--bg-surface), transparent);
         }
-        .card-body {
-            padding: 16px;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
         }
-        .game-name { font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
-        .game-meta { font-size: 0.85rem; color: var(--text-muted); display: flex; justify-content: space-between; }
-        .game-tag { background: rgba(99, 102, 241, 0.2); color: var(--primary); padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
-        /* --- MODALS --- */
-        .modal-overlay {
-            position: fixed;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(4px);
-            z-index: 100;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.2s;
-            padding: 20px;
         }
-        .modal-overlay.active { opacity: 1; visibility: visible; }
-        .modal {
-            background: var(--bg-surface);
-            width: 100%;
-            max-width: 500px;
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--border);
-            box-shadow: var(--shadow-lg);
-            transform: scale(0.95);
-            transition: transform 0.2s;
-            overflow: hidden;
             display: flex;
             flex-direction: column;
-            max-height: 90vh;
         }
-        .modal-overlay.active .modal { transform: scale(1); }
-        .modal-header {
-            padding: 20px;
-            border-bottom: 1px solid var(--border);
             display: flex;
-            justify-content: space-between;
-            align-items: center;
         }
-        .modal-title { font-size: 1.25rem; font-weight: 700; }
-        .close-btn {
-            background: none;
             border: none;
-            color: var(--text-muted);
-            font-size: 1.25rem;
             cursor: pointer;
-        }
-        .modal-body {
-            padding: 20px;
-            overflow-y: auto;
-        }
-        .modal-footer {
-            padding: 16px 20px;
-            border-top: 1px solid var(--border);
-            background: rgba(0,0,0,0.2);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        /* --- GAME UI COMPONENTS --- */
-        .game-arena {
-            background: #000;
-            border-radius: var(--radius-md);
-            min-height: 250px;
             display: flex;
-            flex-direction: column;
-            justify-content: center;
             align-items: center;
-            margin-bottom: 20px;
-            position: relative;
-            padding: 20px;
-            border: 1px solid var(--border);
-        }
-        .game-message {
-            font-size: 1.5rem;
-            font-weight: 700;
-            margin-bottom: 10px;
-            text-align: center;
-        }
-        /* Playing Cards */
-        .cards-row {
-            display: flex;
-            justify-content: center;
-            gap: 10px;
-            margin: 10px 0;
-            flex-wrap: wrap;
-        }
-        .playing-card {
-            width: 60px;
-            height: 84px;
-            background: white;
-            border-radius: 6px;
-            color: #333;
-            font-weight: bold;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 6px;
-            font-size: 1.2rem;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
-            animation: dealCard 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        @keyframes dealCard {
-            from { opacity: 0; transform: translateY(-20px) scale(0.8); }
-            to { opacity: 1; transform: translateY(0) scale(1); }
         }
-        .playing-card.red { color: #dc2626; }
-        .playing-card.black { color: #1e293b; }
-        .card-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; }
-        .card-corner-bottom { transform: rotate(180deg); }
-        .hidden-card {
-            background: repeating-linear-gradient(45deg, #1e293b, #1e293b 10px, #334155 10px, #334155 20px);
-            border: 2px solid #fff;
         }
-        .hidden-card * { display: none; }
-        /* Slot Machine */
-        .slot-machine {
-            display: flex;
-            gap: 10px;
-            background: #222;
-            padding: 15px;
-            border-radius: 10px;
-            border: 4px solid var(--accent-gold);
-        }
-        .slot-reel {
-            width: 60px;
-            height: 80px;
-            background: #fff;
-            border-radius: 4px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 2.5rem;
-            color: #333;
         }
-        /* Controls */
-        .bet-controls {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            background: var(--bg-surface-hover);
-            padding: 5px;
-            border-radius: var(--radius-sm);
-        }
-        .bet-btn {
-            width: 32px;
-            height: 32px;
-            border-radius: 6px;
-            border: none;
-            background: var(--bg-surface);
-            color: var(--text-main);
-            cursor: pointer;
-            font-weight: bold;
         }
-        .bet-btn:hover { background: var(--primary); color: white; }
-        .bet-display { min-width: 60px; text-align: center; font-weight: 600; }
-        .game-actions {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
         }
-        .game-actions.full { grid-template-columns: 1fr; }
-        /* --- TOAST NOTIFICATIONS --- */
-        .toast-container {
             position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 200;
             display: flex;
             flex-direction: column;
-            gap: 10px;
         }
         .toast {
-            background: var(--bg-surface);
-            border-left: 4px solid var(--primary);
-            padding: 12px 20px;
             border-radius: 4px;
-            box-shadow: var(--shadow-lg);
-            color: var(--text-main);
-            font-size: 0.9rem;
-            animation: slideIn 0.3s ease;
             display: flex;
             align-items: center;
-            gap: 10px;
         }
-        .toast.success { border-color: var(--accent-green); }
-        .toast.error { border-color: var(--accent-red); }
-        @keyframes slideIn {
-            from { transform: translateX(100%); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
         }
-        /* --- FOOTER --- */
-        footer {
-            margin-top: auto;
-            padding: 30px 0;
-            background: var(--bg-surface);
-            border-top: 1px solid var(--border);
-            text-align: center;
         }
-        .footer-link {
-            color: var(--text-muted);
-            text-decoration: none;
-            font-size: 0.85rem;
-            transition: color 0.2s;
-        }
-        .footer-link:hover { color: var(--primary); }
-        /* --- RESPONSIVE --- */
-        @media (max-width: 768px) {
-            .promo-card { grid-template-columns: 1fr; text-align: center; }
-            .promo-image { height: 150px; order: -1; }
-            .header-controls span { display: none; } /* Hide label text on mobile */
-            .modal { height: 100vh; max-height: 100vh; border-radius: 0; }
         }
     </style>
 </head>
 <body>
-    <!-- NAV -->
     <header>
-        <div class="container flex-between">
-            <div class="logo">
-                <i class="fas fa-crown"></i>
-                <span>ROYAL FORTUNE</span>
-            </div>
-            <div class="header-controls">
-                <select id="langSelect" class="lang-select">
-                    <option value="en">EN</option>
-                    <option value="es">ES</option>
-                    <option value="fr">FR</option>
-                    <option value="de">DE</option>
-                </select>
-                <div class="balance-pill">
-                    <i class="fas fa-coins"></i>
-                    <span id="balanceDisplay">1000</span>
-                </div>
-                <button class="btn btn-primary" id="topUpBtn">
-                    <i class="fas fa-plus"></i>
-                    <span class="desktop-only" data-i18n="topUp">Top Up</span>
-                </button>
-            </div>
         </div>
     </header>
-    <!-- MAIN CONTENT -->
-    <main class="container">
-        <!-- HERO -->
-        <section class="hero">
-            <div class="promo-card">
-                <div class="promo-content">
-                    <h1 class="promo-title" data-i18n="heroTitle">Welcome to Fortune</h1>
-                    <p class="promo-desc" data-i18n="heroDesc">Experience the thrill of modern gaming. Play smarter, win bigger.</p>
-                    <div style="margin-bottom: 15px;">
-                        <span style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green); padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600;">
-                            <i class="fas fa-gift"></i> <span data-i18n="dailyBonus">Daily Bonus Active</span>
-                        </span>
                     </div>
-                    <button class="btn btn-gold" onclick="openGame('blackjack')">
-                        <span data-i18n="playNow">Play Now</span> <i class="fas fa-arrow-right"></i>
-                    </button>
                 </div>
-                <div class="promo-image"></div>
             </div>
-        </section>
-        <!-- GAMES -->
-        <section>
-            <div class="section-header">
-                <h2 class="section-title" data-i18n="ourGames">Our Games</h2>
             </div>
-            <div class="games-grid" id="gamesGrid">
-                <!-- Injected via JS -->
             </div>
-        </section>
-    </main>
-    <!-- FOOTER -->
-    <footer>
-        <div class="container">
-            <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 10px;">
-                &copy; 2023 Royal Fortune. <span data-i18n="responsibleGamble">Please gamble responsibly.</span>
-            </p>
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link" style="font-weight: 600; color: var(--primary);">
-                Built with anycoder
-            </a>
-        </div>
-    </footer>
-    <!-- TOP UP MODAL -->
-    <div class="modal-overlay" id="topUpModal">
-        <div class="modal">
-            <div class="modal-header">
-                <h3 class="modal-title" data-i18n="addFunds">Add Funds</h3>
-                <button class="close-btn" onclick="closeModal('topUpModal')">&times;</button>
-            </div>
-            <div class="modal-body">
-                <div class="form-group">
-                    <label style="display:block; margin-bottom: 8px; color: var(--text-muted);" data-i18n="amount">Amount</label>
-                    <input type="number" id="topUpInput" class="form-input" value="500" min="10" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-body); color: white;">
                 </div>
             </div>
-            <div class="modal-footer">
-                <button class="btn btn-outline" onclick="closeModal('topUpModal')" data-i18n="cancel">Cancel</button>
-                <button class="btn btn-primary" onclick="processTopUp()" data-i18n="confirm">Confirm</button>
-            </div>
-        </div>
-    </div>
-    <!-- GAME MODAL -->
-    <div class="modal-overlay" id="gameModal">
-        <div class="modal" style="max-width: 600px;">
-            <div class="modal-header">
-                <h3 class="modal-title" id="gameModalTitle">Game</h3>
-                <button class="close-btn" onclick="closeGame()">&times;</button>
             </div>
-            <div class="modal-body">
-                <div class="game-arena" id="gameArena">
-                    <!-- Dynamic Game Content -->
                 </div>
             </div>
-            <div class="modal-footer">
-                <div class="bet-controls">
-                    <button class="bet-btn" onclick="adjustBet(-10)">-</button>
-                    <span class="bet-display"><i class="fas fa-coins" style="color: var(--accent-gold)"></i> <span id="currentBet">10</span></span>
-                    <button class="bet-btn" onclick="adjustBet(10)">+</button>
-                </div>
-                <div class="game-actions" id="gameControls">
-                    <!-- Dynamic Buttons -->
-                </div>
             </div>
-        </div>
-    </div>
-    <!-- TOAST CONTAINER -->
-    <div class="toast-container" id="toastContainer"></div>
     <script>
-        // --- TRANSLATIONS ---
-        const i18n = {
-            en: {
-                topUp: "Top Up", heroTitle: "Welcome to Fortune", heroDesc: "Experience the thrill of modern gaming.",
-                dailyBonus: "Daily Bonus Active", playNow: "Play Now", ourGames: "Our Games",
-                addFunds: "Add Funds", amount: "Amount", confirm: "Confirm", cancel: "Cancel",
-                spin: "Spin", hit: "Hit", stand: "Stand", double: "Double",
-                red: "Red", black: "Black", green: "Green", higher: "Higher", lower: "Lower",
-                msgWin: "You Won!", msgLose: "House Wins", msgBust: "Bust!", msgTie: "Push",
-                msgInsufficient: "Insufficient Funds!", responsibleGamble: "Please gamble responsibly.",
-                games: {
-                    slots: { name: "Neon Slots", desc: "Match symbols to win" },
-                    blackjack: { name: "Blackjack", desc: "Beat the dealer to 21" },
-                    roulette: { name: "Roulette", desc: "Pick your lucky color" },
-                    highlow: { name: "High Low", desc: "Guess the next card" }
-                }
-            },
-            es: {
-                topUp: "Recargar", heroTitle: "Bienvenido", heroDesc: "Vive la emoción del juego moderno.",
-                dailyBonus: "Bono Diario Activo", playNow: "Jugar", ourGames: "Nuestros Juegos",
-                addFunds: "Añadir Fondos", amount: "Cantidad", confirm: "Confirmar", cancel: "Cancelar",
-                spin: "Girar", hit: "Pedir", stand: "Plantarse", double: "Doblar",
-                red: "Rojo", black: "Negro", green: "Verde", higher: "Más Alto", lower: "Más Bajo",
-                msgWin: "¡Ganaste!", msgLose: "Gana la Casa", msgBust: "¡Te pasaste!", msgTie: "Empate",
-                msgInsufficient: "¡Fondos insuficientes!", responsibleGamble: "Juega con responsabilidad.",
-                games: {
-                    slots: { name: "Tragamonedas", desc: "Combina símbolos" },
-                    blackjack: { name: "Blackjack", desc: "Supera al croupier" },
-                    roulette: { name: "Ruleta", desc: "Elige tu color" },
-                    highlow: { name: "Alto Bajo", desc: "Adivina la carta" }
-                }
             }
-            // Simplified for brevity, defaulting to EN/ES logic
-        };
-        // --- STATE ---
-        const state = {
-            balance: 1000,
-            bet: 10,
-            lang: 'en',
-            activeGame: null,
-            // Game States
-            bj: { deck: [], player: [], dealer: [], active: false },
-            slots: { symbols: ['🍒', '🍋', '🍉', '⭐', '💎', '7️⃣'] }
-        };
-        // --- CORE FUNCTIONS ---
-        function init() {
-            renderGames();
-            updateBalanceUI();
-            setupEventListeners();
-        }
-        function updateText() {
-            document.querySelectorAll('[data-i18n]').forEach(el => {
-                const key = el.getAttribute('data-i18n');
-                if (i18n[state.lang][key]) {
-                    el.textContent = i18n[state.lang][key];
-                }
-            });
-            renderGames(); // Re-render grid for game titles
         }
-        function updateBalanceUI() {
-            document.getElementById('balanceDisplay').textContent = state.balance;
-            document.getElementById('currentBet').textContent = state.bet;
-        }
-        function showToast(msg, type = 'info') {
-            const container = document.getElementById('toastContainer');
-            const toast = document.createElement('div');
-            toast.className = `toast ${type}`;
-            toast.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i> ${msg}`;
-            container.appendChild(toast);
-            setTimeout(() => toast.remove(), 3000);
-        }
-        // --- MODAL & NAVIGATION ---
-        function openModal(id) { document.getElementById(id).classList.add('active'); }
-        function closeModal(id) { document.getElementById(id).classList.remove('active'); }
-        function openTopUp() { openModal('topUpModal'); }
-        function processTopUp() {
-            const amount = parseInt(document.getElementById('topUpInput').value);
-            if (amount > 0) {
-                state.balance += amount;
-                updateBalanceUI();
-                closeModal('topUpModal');
-                showToast(i18n[state.lang].msgTopUpSuccess || "Funds added!", 'success');
             }
-        }
-        function openGame(gameId) {
-            if (state.balance < state.bet) {
-                showToast(i18n[state.lang].msgInsufficient, 'error');
-                openTopUp();
-                return;
-            }
-            state.activeGame = gameId;
-            const gameNames = i18n[state.lang].games;
-            document.getElementById('gameModalTitle').textContent = gameNames[gameId].name;
-            openModal('gameModal');
-            // Init Game
-            if (gameId === 'blackjack') initBlackjack();
-            else if (gameId === 'slots') initSlots();
-            else if (gameId === 'roulette') initRoulette();
-            else if (gameId === 'highlow') initHighLow();
         }
-        function closeGame() {
-            closeModal('gameModal');
-            state.activeGame = null;
         }
-        function adjustBet(amount) {
-            const newBet = state.bet + amount;
-            if (newBet >= 10 && newBet <= state.balance) {
-                state.bet = newBet;
-                updateBalanceUI();
             }
         }
-        // --- GAME GRID RENDERING ---
-        function renderGames() {
-            const grid = document.getElementById('gamesGrid');
-            const games = ['slots', 'blackjack', 'roulette', 'highlow'];
-            const meta = i18n[state.lang].games;
-            grid.innerHTML = games.map(g => {
-                const info = meta[g];
-                // Generate a consistent gradient based on game name
-                return `
-                <div class="game-card" onclick="openGame('${g}')">
-                    <div class="card-thumb" style="background: linear-gradient(135deg, hsl(${Math.random()*360}, 60%, 20%), hsl(${Math.random()*360}, 60%, 10%))">
-                        <div style="position: absolute; bottom: 10px; left: 10px; font-size: 2rem;">
-                            ${g === 'slots' ? '🎰' : g === 'blackjack' ? '🃏' : g === 'roulette' ? '🎡' : '📈'}
-                        </div>
-                    </div>
-                    <div class="card-body">
-                        <div>
-                            <div class="game-name">${info.name}</div>
-                            <div class="game-meta">
-                                <span>${info.desc}</span>
-                            </div>
-                        </div>
-                        <div style="margin-top: 10px; display:flex; justify-content:space-between; align-items:center;">
-                            <span class="game-tag">CASINO</span>
-                            <i class="fas fa-play-circle" style="color: var(--primary);"></i>
-                        </div>
-                    </div>
-                </div>
-                `;
-            }).join('');
         }
-        // --- GAME LOGIC: BLACKJACK ---
-        function initBlackjack() {
-            state.bj = { deck: [], player: [], dealer: [], active: true };
-            createDeck();
-            shuffleDeck();
-            dealBJ();
-            renderBJ();
-            const controls = document.getElementById('gameControls');
-            controls.innerHTML = `
-                <button class="btn btn-primary" onclick="bjHit()">${i18n[state.lang].hit}</button>
-                <button class="btn btn-danger" onclick="bjStand()">${i18n[state.lang].stand}</button>
-                <button class="btn btn-outline" onclick="bjDouble()" id="bjDoubleBtn">${i18n[state.lang].double}</button>
-            `;
-            if (state.bet * 2 > state.balance) document.getElementById('bjDoubleBtn').disabled = true;
         }
-        function createDeck() {
-            const suits = ['♠', '♥', '♦', '♣'];
-            const values = ['2','3','4','5','6','7','8','9','10','J','Q','K','A'];
-            state.bj.deck = [];
-            for(let s of suits) {
-                for(let v of values) {
-                    state.bj.deck.push({ suit: s, value: v });
-                }
             }
-        }
-        function shuffleDeck() {
-            for (let i = state.bj.deck.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [state.bj.deck[i], state.bj.deck[j]] = [state.bj.deck[j], state.bj.deck[i]];
             }
         }
-        function getHandValue(hand) {
-            let val = 0;
-            let aces = 0;
-            for(let card of hand) {
-                if (['J','Q','K'].includes(card.value)) val += 10;
-                else if (card.value === 'A') { val += 11; aces++; }
-                else val += parseInt(card.value);
-            }
-            while (val > 21 && aces > 0) { val -= 10; aces--; }
-            return val;
-        }
-        function dealBJ() {
-            state.bj.player.push(state.bj.deck.pop());
-            state.bj.dealer.push(state.bj.deck.pop());
-            state.bj.player.push(state.bj.deck.pop());
-            state.bj.dealer.push(state.bj.deck.pop());
-        }
-        function renderBJ(showDealer = false) {
-            const arena = document.getElementById('gameArena');
-            const pScore = getHandValue(state.bj.player);
-            const dScore = getHandValue(state.bj.dealer);
-            let dealerHTML = state.bj.dealer.map((c, i) => {
-                if (i === 1 && !showDealer) return `<div class="playing-card hidden-card"></div>`;
-                return `<div class="playing-card ${['♥','♦'].includes(c.suit)?'red':'black'}">
-                    <div>${c.value} ${c.suit}</div>
-                    <div class="card-center">${c.suit}</div>
-                    <div class="card-corner-bottom">${c.value} ${c.suit}</div>
-                </div>`;
-            }).join('');
-            let playerHTML = state.bj.player.map(c =>
-                `<div class="playing-card ${['♥','♦'].includes(c.suit)?'red':'black'}">
-                    <div>${c.value} ${c.suit}</div>
-                    <div class="card-center">${c.suit}</div>
-                    <div class="card-corner-bottom">${c.value} ${c.suit}</div>
-                </div>`
-            ).join('');
-            let msg = "";
-            let color = "white";
-            if (pScore > 21) { msg = i18n[state.lang].msgBust; color = "var(--accent-red)"; endBJ('lose'); }
-            else if (pScore === 21) { msg = "BLACKJACK!"; color = "var(--accent-gold)"; endBJ('blackjack'); }
-            arena.innerHTML = `
-                <div style="width:100%">
-                    <div style="text-align:center; color:var(--text-muted); font-size:0.8rem; margin-bottom:5px;">DEALER (${showDealer ? dScore : '?'})</div>
-                    <div class="cards-row">${dealerHTML}</div>
-                    <div style="height: 20px;"></div>
-                    <div style="text-align:center; color:var(--text-muted); font-size:0.8rem; margin-bottom:5px;">YOU (${pScore})</div>
-                    <div class="cards-row">${playerHTML}</div>
-                    <div class="game-message" style="color:${color}; margin-top: 20px;">${msg}</div>
-                </div>
-            `;
-        }
-        function bjHit() {
-            state.bj.player.push(state.bj.deck.pop());
-            renderBJ();
         }
-        function bjStand() {
-            // Dealer Logic
-            while(getHandValue(state.bj.dealer) < 17) {
-                state.bj.dealer.push(state.bj.deck.pop());
-            }
-            renderBJ(true);
-            determineWinner();
         }
-        function bjDouble() {
-            state.balance -= state.bet; // Deduct extra bet
-            updateBalanceUI();
-            state.bj.player.push(state.bj.deck.pop());
-            bjStand();
-        }
-        function determineWinner() {
-            const p = getHandValue(state.bj.player);
-            const d = getHandValue(state.bj.dealer);
-            let msg = "";
-            if (p > 21) msg = i18n[state.lang].msgBust;
-            else if (d > 21) msg = i18n[state.lang].msgWin;
-            else if (p > d) msg = i18n[state.lang].msgWin;
-            else if (p < d) msg = i18n[state.lang].msgLose;
-            else msg = i18n[state.lang].msgTie;
-            const arena = document.getElementById('gameArena');
-            const msgEl = arena.querySelector('.game-message');
-            msgEl.textContent = msg;
-            msgEl.style.color = msg === i18n[state.lang].msgWin ? "var(--accent-green)" : (msg === i18n[state.lang].msgTie ? "white" : "var(--accent-red)");
         }
-        function endBJ(result) {
-            state.bj.active = false;
-            document.getElementById('gameControls').innerHTML = `<button class="btn btn-primary full" onclick="openGame('blackjack')">Play Again</button>`;
-            if (result === 'blackjack') {
-                state.balance += state.bet * 2.5;
-                showToast(`Blackjack! +${state.bet * 1.5}`, 'success');
-            } else if (result === 'lose') {
-                state.balance -= state.bet;
-                showToast(`Lost

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NetDiag: Host & Connection Monitor</title>
+    <!-- Importing FontAwesome for Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
+            --bg-color: #0f172a;
+            --card-bg: rgba(30, 41, 59, 0.7);
+            --card-border: rgba(148, 163, 184, 0.1);
+            --text-primary: #f1f5f9;
+            --text-secondary: #94a3b8;
+            --accent-cyan: #06b6d4;
             --accent-green: #10b981;
+            --accent-red: #ef4444;
+            --accent-orange: #f59e0b;
+            --glow: 0 0 15px rgba(6, 182, 212, 0.3);
+            --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
         }
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
         }
         body {
+            font-family: var(--font-main);
+            background-color: var(--bg-color);
+            background-image:
+                radial-gradient(at 0% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
+                radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.15) 0px, transparent 50%);
+            color: var(--text-primary);
             min-height: 100vh;
             display: flex;
             flex-direction: column;
+            overflow-x: hidden;
         }
+        /* --- Header --- */
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1.5rem 2rem;
+            border-bottom: 1px solid var(--card-border);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            background: rgba(15, 23, 42, 0.8);
         }
+        .brand {
+            display: flex;
             align-items: center;
+            gap: 0.75rem;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--accent-cyan);
+            text-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
         }
+        .brand i {
+            font-size: 1.8rem;
         }
+        .anycoder-link {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border: 1px solid var(--card-border);
+            border-radius: 20px;
+            transition: all 0.3s ease;
         }
+        .anycoder-link:hover {
+            color: var(--text-primary);
+            border-color: var(--accent-cyan);
+            box-shadow: var(--glow);
         }
+        /* --- Main Layout --- */
+        main {
+            flex: 1;
+            padding: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(12, 1fr);
+            gap: 1.5rem;
+        }
+        /* --- Cards Generic --- */
+        .card {
+            background: var(--card-bg);
+            border: 1px solid var(--card-border);
+            border-radius: 16px;
+            padding: 1.5rem;
+            backdrop-filter: blur(12px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            display: flex;
+            flex-direction: column;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
         }
+        .card-header {
             display: flex;
+            justify-content: space-between;
             align-items: center;
+            margin-bottom: 1rem;
         }
+        .card-title {
+            font-size: 1rem;
             font-weight: 600;
+            color: var(--text-secondary);
             display: flex;
             align-items: center;
+            gap: 0.5rem;
         }
+        /* --- Specific Grid Areas --- */
+        .status-panel {
+            grid-column: span 12;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
         }
+        .chart-panel {
+            grid-column: span 8;
+            min-height: 400px;
         }
+        .log-panel {
+            grid-column: span 4;
+            min-height: 400px;
             overflow: hidden;
         }
+        .controls-panel {
+            grid-column: span 12;
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+            align-items: center;
         }
+        /* --- Metrics & Visuals --- */
+        .metric-value {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin: 0.5rem 0;
         }
+        .metric-unit {
+            font-size: 1rem;
+            color: var(--text-secondary);
+            font-weight: 400;
         }
+        .status-indicator {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: var(--text-secondary);
+            box-shadow: 0 0 10px currentColor;
+            transition: background-color 0.3s ease, box-shadow 0.3s ease;
         }
+        .status-indicator.active { background-color: var(--accent-green); color: var(--accent-green); }
+        .status-indicator.warning { background-color: var(--accent-orange); color: var(--accent-orange); }
+        .status-indicator.critical { background-color: var(--accent-red); color: var(--accent-red); }
+        /* Progress Bars */
+        .progress-container {
+            width: 100%;
+            height: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
             overflow: hidden;
+            margin-top: 0.5rem;
         }
+        .progress-bar {
+            height: 100%;
+            width: 0%;
+            background: var(--accent-cyan);
+            border-radius: 4px;
+            transition: width 0.5s ease, background-color 0.3s ease;
             position: relative;
         }
+        .progress-bar::after {
             content: '';
             position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+            transform: translateX(-100%);
+            animation: shimmer 2s infinite;
         }
+        @keyframes shimmer {
+            100% { transform: translateX(100%); }
         }
+        /* Canvas */
+        canvas {
+            width: 100%;
+            height: 100%;
+            display: block;
         }
+        /* Logs */
+        .log-container {
+            font-family: 'Courier New', monospace;
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            overflow-y: auto;
+            flex: 1;
+            padding-right: 0.5rem;
             display: flex;
             flex-direction: column;
+            gap: 0.25rem;
         }
+        .log-entry {
             display: flex;
+            gap: 0.5rem;
         }
+        .log-time { color: var(--accent-cyan); }
+        .log-msg-info { color: var(--text-primary); }
+        .log-msg-warn { color: var(--accent-orange); }
+        .log-msg-err { color: var(--accent-red); }
+        /* Buttons */
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border-radius: 8px;
             border: none;
+            font-weight: 600;
             cursor: pointer;
+            transition: all 0.2s ease;
             display: flex;
             align-items: center;
+            gap: 0.5rem;
+            font-size: 0.95rem;
         }
+        .btn-primary {
+            background: var(--accent-cyan);
+            color: #0f172a;
         }
+        .btn-primary:hover {
+            background: #22d3ee;
+            box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
         }
+        .btn-danger {
+            background: transparent;
+            border: 1px solid var(--accent-red);
+            color: var(--accent-red);
         }
+        .btn-danger:hover {
+            background: rgba(239, 68, 68, 0.1);
         }
+        /* Toast Notification */
+        #toast-container {
             position: fixed;
+            bottom: 2rem;
+            right: 2rem;
             display: flex;
             flex-direction: column;
+            gap: 1rem;
+            z-index: 1000;
         }
         .toast {
+            background: rgba(15, 23, 42, 0.95);
+            border-left: 4px solid var(--accent-cyan);
+            padding: 1rem 1.5rem;
             border-radius: 4px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+            color: var(--text-primary);
+            transform: translateX(120%);
+            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
             display: flex;
             align-items: center;
+            gap: 0.75rem;
+            backdrop-filter: blur(5px);
         }
+        .toast.show {
+            transform: translateX(0);
         }
+        /* Responsive Design */
+        @media (max-width: 1024px) {
+            .chart-panel { grid-column: span 12; }
+            .log-panel { grid-column: span 12; min-height: 250px; }
         }
+        @media (max-width: 600px) {
+            header { flex-direction: column; gap: 1rem; }
+            .metric-value { font-size: 2rem; }
+            .controls-panel { flex-direction: column; align-items: stretch; }
         }
     </style>
 </head>
 <body>
     <header>
+        <div class="brand">
+            <i class="fa-solid fa-network-wired"></i>
+            <span>NetDiag</span>
         </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+            Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em; margin-left:4px;"></i>
+        </a>
     </header>
+    <main>
+        <!-- Status Panel: Host vs Connection -->
+        <section class="status-panel">
+            <!-- Host Limits (CPU/RAM) -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <i class="fa-solid fa-server"></i> Host CPU Load
                     </div>
+                    <div id="host-status-light" class="status-indicator active"></div>
+                </div>
+                <div class="metric-value" id="cpu-val">0%</div>
+                <div class="progress-container">
+                    <div id="cpu-bar" class="progress-bar"></div>
+                </div>
+                <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary);">
+                    Limit: 90% (Throttling Threshold)
                 </div>
             </div>
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <i class="fa-solid fa-memory"></i> Memory Usage
+                    </div>
+                </div>
+                <div class="metric-value" id="ram-val">0<span class="metric-unit">GB</span></div>
+                <div class="progress-container">
+                    <div id="ram-bar" class="progress-bar" style="background-color: var(--accent-green);"></div>
+                </div>
+                <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary);">
+                    Total: 16 GB
+                </div>
             </div>
+            <!-- Connection Quality -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <i class="fa-solid fa-wifi"></i> Connection Latency
+                    </div>
+                    <div id="conn-status-light" class="status-indicator active"></div>
+                </div>
+                <div class="metric-value" id="ping-val">0<span class="metric-unit">ms</span></div>
+                <div class="progress-container">
+                    <div id="ping-bar" class="progress-bar" style="background-color: var(--accent-orange);"></div>
+                </div>
+                <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary);">
+                    Jitter: <span id="jitter-val">0</span>ms
+                </div>
             </div>
+        </section>
+        <!-- Main Chart Panel -->
+        <section class="card chart-panel">
+            <div class="card-header">
+                <div class="card-title">
+                    <i class="fa-solid fa-chart-line"></i> Real-Time Traffic Analysis
+                </div>
+                <div style="font-size: 0.8rem; color: var(--text-secondary);">
+                    <span style="color: var(--accent-cyan)">●</span> Requests &nbsp;
+                    <span style="color: var(--accent-red)">●</span> Errors
                 </div>
             </div>
+            <div style="flex: 1; position: relative;">
+                <canvas id="trafficChart"></canvas>
             </div>
+        </section>
+        <!-- Log Panel -->
+        <section class="card log-panel">
+            <div class="card-header">
+                <div class="card-title">
+                    <i class="fa-solid fa-terminal"></i> System Logs
                 </div>
+                <button onclick="clearLogs()" style="background:none; border:none; color:var(--text-secondary); cursor:pointer;">
+                    <i class="fa-solid fa-trash"></i>
+                </button>
             </div>
+            <div class="log-container" id="log-container">
+                <!-- Logs will appear here -->
             </div>
+        </section>
+        <!-- Controls -->
+        <section class="controls-panel">
+            <button class="btn btn-danger" id="stop-btn" onclick="toggleMonitoring(false)" disabled>
+                <i class="fa-solid fa-stop"></i> Stop Monitor
+            </button>
+            <button class="btn btn-primary" id="start-btn" onclick="toggleMonitoring(true)">
+                <i class="fa-solid fa-play"></i> Start Diagnostics
+            </button>
+            <button class="btn btn-primary" style="background: var(--accent-orange);" onclick="simulateSpike()">
+                <i class="fa-solid fa-bolt"></i> Test Host Limit
+            </button>
+        </section>
+    </main>
+    <!-- Toast Container -->
+    <div id="toast-container"></div>
     <script>
+        // --- State Management ---
+        let isRunning = false;
+        let intervalId = null;
+        let chartIntervalId = null;
+        // Data arrays for the chart
+        const maxDataPoints = 60;
+        let trafficData = new Array(maxDataPoints).fill(0);
+        let errorData = new Array(maxDataPoints).fill(0);
+        // --- DOM Elements ---
+        const cpuVal = document.getElementById('cpu-val');
+        const cpuBar = document.getElementById('cpu-bar');
+        const ramVal = document.getElementById('ram-val');
+        const ramBar = document.getElementById('ram-bar');
+        const pingVal = document.getElementById('ping-val');
+        const pingBar = document.getElementById('ping-bar');
+        const jitterVal = document.getElementById('jitter-val');
+        const hostLight = document.getElementById('host-status-light');
+        const connLight = document.getElementById('conn-status-light');
+        const logContainer = document.getElementById('log-container');
+        const canvas = document.getElementById('trafficChart');
+        const ctx = canvas.getContext('2d');
+        // --- Initialization ---
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+        addLog("System initialized. Ready to diagnose.", "info");
+        // --- Core Logic ---
+        function toggleMonitoring(start) {
+            if (start) {
+                if (isRunning) return;
+                isRunning = true;
+                document.getElementById('start-btn').disabled = true;
+                document.getElementById('stop-btn').disabled = false;
+                addLog("Diagnostics started...", "info");
+                showToast("Monitoring Active", "success");
+                // Start Data Loop (Every 1s)
+                intervalId = setInterval(updateMetrics, 1000);
+                // Start Chart Loop (Every 100ms for smoothness)
+                chartIntervalId = setInterval(updateChartData, 100);
+            } else {
+                isRunning = false;
+                document.getElementById('start-btn').disabled = false;
+                document.getElementById('stop-btn').disabled = true;
+                clearInterval(intervalId);
+                clearInterval(chartIntervalId);
+                addLog("Diagnostics paused by user.", "warn");
+                showToast("Monitoring Paused", "default");
+                // Reset lights
+                hostLight.className = "status-indicator";
+                connLight.className = "status-indicator";
             }
         }
+        function updateMetrics() {
+            // Simulate Host Stats (CPU/RAM)
+            // Random fluctuation + potential spike
+            let cpu = Math.floor(Math.random() * 30) + 20; // Base 20-50%
+            let ram = (Math.random() * 2 + 4).toFixed(1); // Base 4-6 GB
+            // Randomly spike CPU to simulate host limit issues
+            if (Math.random() > 0.8) cpu += 30;
+            // Update DOM - CPU
+            cpuVal.innerText = cpu + "%";
+            cpuBar.style.width = cpu + "%";
+            if (cpu > 90) {
+                cpuBar.style.backgroundColor = "var(--accent-red)";
+                hostLight.className = "status-indicator critical";
+                if(Math.random() > 0.7) addLog("Host CPU Limit Critical! Throttling detected.", "err");
+            } else if (cpu > 70) {
+                cpuBar.style.backgroundColor = "var(--accent-orange)";
+                hostLight.className = "status-indicator warning";
+            } else {
+                cpuBar.style.backgroundColor = "var(--accent-cyan)";
+                hostLight.className = "status-indicator active";
             }
+            // Update DOM - RAM
+            ramVal.innerHTML = ram + '<span class="metric-unit">GB</span>';
+            const ramPercent = (ram / 16) * 100;
+            ramBar.style.width = ramPercent + "%";
+            if(ramPercent > 80) ramBar.style.backgroundColor = "var(--accent-red)";
+            else ramBar.style.backgroundColor = "var(--accent-green)";
+            // Simulate Connection Stats (Ping/Jitter)
+            let ping = Math.floor(Math.random() * 40) + 10; // Base 10-50ms
+            let jitter = Math.floor(Math.random() * 10);
+            // Randomly spike Ping to simulate connection issues
+            if (Math.random() > 0.85) ping += 150;
+            // Update DOM - Ping
+            pingVal.innerHTML = ping + '<span class="metric-unit">ms</span>';
+            jitterVal.innerText = jitter;
+            // Ping bar scale: 0ms = 0%, 200ms = 100%
+            const pingPercent = Math.min((ping / 200) * 100, 100);
+            pingBar.style.width = pingPercent + "%";
+            if (ping > 150) {
+                pingBar.style.backgroundColor = "var(--accent-red)";
+                connLight.className = "status-indicator critical";
+                if(Math.random() > 0.7) addLog(`Connection timeout: ${ping}ms latency.`, "err");
+            } else if (ping > 80) {
+                pingBar.style.backgroundColor = "var(--accent-orange)";
+                connLight.className = "status-indicator warning";
+            } else {
+                pingBar.style.backgroundColor = "var(--accent-green)";
+                connLight.className = "status-indicator active";
+            }
         }
+        function updateChartData() {
+            // Shift data
+            trafficData.shift();
+            errorData.shift();
+            // Add new random data points
+            // Traffic usually flows
+            let newTraffic = Math.floor(Math.random() * 50) + 20;
+            let newError = Math.random() > 0.95 ? Math.floor(Math.random() * 40) : 0;
+            trafficData.push(newTraffic);
+            errorData.push(newError);
+            drawChart();
         }
+        // --- Canvas Drawing (2D Tool) ---
+        function drawChart() {
+            const w = canvas.width;
+            const h = canvas.height;
+            // Clear
+            ctx.clearRect(0, 0, w, h);
+            // Grid lines
+            ctx.strokeStyle = "rgba(148, 163, 184, 0.1)";
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            for(let i=0; i<h; i+=40) {
+                ctx.moveTo(0, i);
+                ctx.lineTo(w, i);
             }
+            ctx.stroke();
+            // Draw Traffic Line (Cyan)
+            drawLine(trafficData, "#06b6d4", 2);
+            // Draw Error Line (Red)
+            drawLine(errorData, "#ef4444", 2);
         }
+        function drawLine(data, color, width) {
+            const w = canvas.width;
+            const h = canvas.height;
+            const step = w / (maxDataPoints - 1);
+            ctx.beginPath();
+            ctx.strokeStyle = color;
+            ctx.lineWidth = width;
+            ctx.lineJoin = 'round';
+            for (let i = 0; i < data.length; i++) {
+                // Map value (0-100) to height
+                // y = h - (value/100 * h)
+                const y = h - ((data[i] / 100) * h);
+                const x = i * step;
+                if (i === 0) ctx.moveTo(x, y);
+                else ctx.lineTo(x, y);
+            }
+            ctx.stroke();
+            // Add fill gradient under the line
+            ctx.lineTo(w, h);
+            ctx.lineTo(0, h);
+            ctx.closePath();
+            const gradient = ctx.createLinearGradient(0, 0, 0, h);
+            gradient.addColorStop(0, color + "44"); // Hex + alpha
+            gradient.addColorStop(1, color + "00");
+            ctx.fillStyle = gradient;
+            ctx.fill();
         }
+        function resizeCanvas() {
+            // Handle high DPI displays
+            const container = canvas.parentElement;
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight;
+            drawChart();
         }
+        // --- Interaction: Simulate Host Limit ---
+        function simulateSpike() {
+            if(!isRunning) {
+                showToast("Start monitoring first!", "warn");
+                return;
             }
+            // Force visual spike
+            cpuVal.innerText = "98%";
+            cpuBar.style.width = "98%";
+            cpuBar.style.backgroundColor = "var(--accent-red)";
+            hostLight.className = "status-indicator critical";
+            addLog("MANUAL TEST: Simulating Host Limit Breach...", "err");
+            showToast("Host Limit Test Triggered", "error");
+            // Inject data into chart
+            for(let i=0; i<20; i++) {
+                trafficData.push(Math.random() * 20 + 80);
+                trafficData.shift();
             }
         }
+        // --- Utilities ---
+        function addLog(msg, type) {
+            const time = new Date().toLocaleTimeString('en-US', { hour12: false });
+            const div = document.createElement('div');
+            div.className = 'log-entry';
+            let colorClass = "log-msg-info";
+            if (type === "warn") colorClass = "log-msg-warn";
+            if (type === "err") colorClass = "log-msg-err";
+            div.innerHTML = `<span class="log-time">[${time}]</span> <span class="${colorClass}">${msg}</span>`;
+            logContainer.appendChild(div);
+            logContainer.scrollTop = logContainer.scrollHeight; // Auto scroll
         }
+        function clearLogs() {
+            logContainer.innerHTML = '';
+            addLog("Logs cleared.", "info");
         }
+        function showToast(message, type = "default") {
+            const container = document.getElementById('toast-container');
+            const toast = document.createElement('div');
+            toast.className = 'toast';
+            let icon = '<i class="fa-solid fa-info-circle"></i>';
+            let color = 'var(--accent-cyan)';
+            if (type === 'success') {
+                icon = '<i class="fa-solid fa-check-circle"></i>';
+                color = 'var(--accent-green)';
+            } else if (type === 'error') {
+                icon = '<i class="fa-solid fa-triangle-exclamation"></i>';
+                color = 'var(--accent-red)';
+            } else if (type === 'warn') {
+                icon = '<i class="fa-solid fa-exclamation-circle"></i>';
+                color = 'var(--accent-orange)';
+            }
+            toast.style.borderLeftColor = color;
+            toast.innerHTML = `<span style="color:${color}; font-size: 1.2rem;">${icon}</span> ${message}`;
+            container.appendChild(toast);
+            // Trigger animation
+            requestAnimationFrame(() => {
+                toast.classList.add('show');
+            });
+            // Remove after 3 seconds
+            setTimeout(() => {
+                toast.classList.remove('show');
+                setTimeout(() => {
+                    toast.remove();
+                }, 300);
+            }, 3000);
         }
+    </script>
+</body>
+</html>