<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forxzz@Terminal: ~</title>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #0f0;
            --bg-color: #050505;
            --prompt-color: #00d4ff;
            --highlight: #fff;
        }

        body {
            background-color: var(--bg-color);
            color: var(--primary);
            font-family: 'Fira Code', 'Courier New', monospace;
            padding: 10px;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        /* Scanline Effect */
        body::before {
            content: " ";
            display: block;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            z-index: 2;
            background-size: 100% 2px, 3px 100%;
            pointer-events: none;
        }

        #terminal {
            width: 100%;
            max-width: 950px;
            height: 85vh;
            background: rgba(0, 0, 0, 0.85);
            padding: 25px;
            border: 1px solid #111;
            border-radius: 10px;
            box-shadow: 0 0 40px rgba(0, 255, 0, 0.1), inset 0 0 10px rgba(0, 255, 0, 0.05);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
        }

        /* Top Bar */
        .top-bar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(0, 255, 0, 0.2);
            padding-bottom: 10px;
            font-size: 12px;
            color: rgba(0, 255, 0, 0.5);
        }

        #history {
            flex: 1;
            overflow-y: auto;
            margin-bottom: 15px;
            scrollbar-width: thin;
            scrollbar-color: #111 transparent;
        }

        #history::-webkit-scrollbar { width: 5px; }
        #history::-webkit-scrollbar-thumb { background: #111; }

        .output { margin-bottom: 12px; line-height: 1.6; white-space: pre-wrap; }
        .input-line { display: flex; align-items: center; }
        .prompt { color: var(--prompt-color); margin-right: 12px; font-weight: bold; }
        
        input {
            background: transparent;
            border: none;
            color: var(--primary);
            outline: none;
            width: 100%;
            font-family: inherit;
            font-size: inherit;
            text-shadow: 0 0 5px var(--primary);
        }

        .highlight { color: var(--highlight); font-weight: bold; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
        .error { color: #ff5555; text-shadow: 0 0 5px #ff5555; }
        .warning { color: #ffaa00; text-shadow: 0 0 5px #ffaa00; }
        
        /* ASCII Art style */
        .ascii-art { color: var(--prompt-color); margin-bottom: 20px; font-size: 10px; }
    </style>
</head>
<body>

<div id="terminal">
    <div class="top-bar">
        <span>SSH forxzz@vps:2026 - Active</span>
        <span id="clock"></span>
    </div>
    <div id="history">
        <div class="ascii-art">
███████╗ ██████╗ ██████╗ ██╗  ██╗███████╗███████╗
██╔════╝██╔═══██╗██╔══██╗╚██╗██╔╝╚══███╔╝╚══███╔╝
█████╗  ██║   ██║██████╔╝ ╚███╔╝   ███╔╝   ███╔╝ 
██╔══╝  ██║   ██║██╔══██╗ ██╔██╗  ███╔╝   ███╔╝  
██║     ╚██████╔╝██║  ██║██╔╝ ██╗███████╗███████╗
╚═╝      ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝╚══════╝</div>
        <div class="output">Welcome to <span class="highlight">Forxzz Terminal [Version 2.0.26]</span>
Type <span class="highlight">'menu'</span> to see available protocols.</div>
    </div>
    <div class="input-line">
        <span class="prompt">forxzz@vps:~$</span>
        <input type="text" id="commandInput" autofocus autocomplete="off">
    </div>
</div>

<script>
    const input = document.getElementById('commandInput');
    const history = document.getElementById('history');
    const clock = document.getElementById('clock');

    // Update Jam
    function updateClock() {
        const now = new Date();
        clock.innerText = now.toLocaleTimeString();
    }
    setInterval(updateClock, 1000);
    updateClock();

    const commands = {
        'menu': `Available Commands:
- <span class="highlight">about</span>      : Identity info.
- <span class="highlight">skills</span>     : Arsenal & capabilities.
- <span class="highlight">projects</span>   : Operational projects.
- <span class="highlight">closed</span>     : Forbidden services.
- <span class="highlight">clear</span>      : Purge terminal.`,
        
        'about': `[+] <span class="highlight">NAME</span>   : Bos Forxzz
[+] <span class="highlight">AGE</span>    : 14 y.o
[+] <span class="highlight">ROLE</span>   : Web Developer & SysAdmin
[+] <span class="highlight">BIO</span>    : Infrastruktur hosting & Automation specialist.`,

        'skills': `[+] <span class="highlight">ARSENAL</span>:
- <span class="warning">Server:</span> VPS, WHM/cPanel Expert (AlmaLinux/Ubuntu)
- <span class="warning">Web:</span> Top-Up Web Specialist
- <span class="warning">API:</span> Pakasir.com, QR Atlantic Integration
- <span class="warning">Design:</span> UI/UX, 3D Assets, Web Graphics`,

        'projects': `[+] <span class="highlight">OPERATIONAL</span>:
1. <span class="prompt">ForxzZHost</span> - High Performance Web Hosting.
2. <span class="prompt">Murhost</span> - Digital Services & Provider.
3. <span class="prompt">FINN X VX MARKET</span> - Game Top-Up Store.`,

        'closed': `<span class="error">[!] FORBIDDEN:</span>
- <span class="warning">X</span> Jasa Hack/Doxing (Not a criminal).
- <span class="warning">X</span> Joki Rank ML (Focus on Business).
- <span class="warning">X</span> Klinik Skincare (Nanya produk OK, buka jasa NO).`,

        'clear': 'CLEAR'
    };

    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            const cmd = input.value.toLowerCase().trim();
            addLine(`<span class="prompt">forxzz@vps:~$</span> ${cmd}`);

            if (cmd === 'clear') {
                history.innerHTML = '';
            } else if (commands[cmd]) {
                addLine(commands[cmd]);
            } else if (cmd !== "") {
                addLine(`<span class="error">Unknown protocol: '${cmd}'. Type 'menu' for help.</span>`);
            }

            input.value = '';
            history.scrollTop = history.scrollHeight;
        }
    });

    function addLine(text) {
        const div = document.createElement('div');
        div.className = 'output';
        div.innerHTML = text;
        history.appendChild(div);
    }

    document.addEventListener('click', () => input.focus());
</script>

</body>
</html>
