<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LUMYNANCE Terminal</title>
    <style>
        body {
            background-color: black;
            color: #00ff00;
            font-family: monospace;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        #terminal {
            width: 80%;
            max-width: 800px;
            height: 60%;
            border: 2px solid #00ff00;
            padding: 10px;
            overflow-y: auto;
            white-space: pre-wrap;
            box-sizing: border-box;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        #linux-logo {
            width: 80px;
            height: auto;
            align-self: left;
            margin-bottom: 10px;
        }

        #output {
            flex: 1;
            overflow-y: auto;
        }

        #input-container {
            display: flex;
            margin-top: 10px;
        }

        #prompt {
            flex: none;
        }

        #user-input {
            flex: 1;
            background: transparent;
            border: none;
            color: #00ff00;
            font-family: monospace;
            font-size: 16px;
            outline: none;
        }

        #user-input::placeholder {
            color: #006600;
        }

        .hidden {
            display: none;
        }

        @keyframes typewriter {
            from { width: 0; }
            to { width: 100%; }
        }

        .typewriter {
            overflow: hidden;
            white-space: nowrap;
            display: inline-block;
            animation: typewriter 3s steps(30, end), blink 0.5s step-end infinite;
            border-right: 2px solid #00ff00;
        }

        @keyframes blink {
            from, to { border-color: transparent; }
            50% { border-color: #00ff00; }
        }

        .bootup-line {
            color: #00ff00;
        }

        .error-line {
            color: red;
        }

        .ok-line {
            color: #00ff00;
        }

        .glitch {
            color: #ff0000;
            font-family: monospace;
            animation: glitch 1s infinite;
        }

        @keyframes glitch {
            0% { text-shadow: 1px 1px 5px #ff0000, 0 0 25px #ff0000, 0 0 50px #ff0000; }
            20% { text-shadow: -1px -1px 5px #ff0000, 0 0 25px #ff0000, 0 0 50px #ff0000; }
            40% { text-shadow: 1px 1px 5px #ff0000, 0 0 25px #ff0000, 0 0 50px #ff0000; }
            60% { text-shadow: -1px -1px 5px #ff0000, 0 0 25px #ff0000, 0 0 50px #ff0000; }
            80% { text-shadow: 1px 1px 5px #ff0000, 0 0 25px #ff0000, 0 0 50px #ff0000; }
            100% { text-shadow: -1px -1px 5px #ff0000, 0 0 25px #ff0000, 0 0 50px #ff0000; }
        }

    </style>
</head>
<body>
    <div id="terminal">
        <img id="linux-logo" src="https://upload.wikimedia.org/wikipedia/commons/a/af/Tux.png" alt="Linux Logo">
        <div id="output"></div>
        <div id="input-container" class="hidden">
            <span id="prompt">&gt; </span>
            <input type="text" id="user-input" autofocus autocomplete="off" placeholder="Type here...">
        </div>
    </div>

    <script>
        const terminal = document.getElementById('terminal');
        const output = document.getElementById('output');
        const userInput = document.getElementById('user-input');
        const inputContainer = document.getElementById('input-container');

        const bootLines = [
            "[    0.000000] Initializing cgroup subsys cpu",
            "[    0.000000] Initializing cgroup subsys cpuacct",
            "[    0.000000] Linux version 5.11.0-38-generic",
            "[    0.000000] Command line: BOOT_IMAGE=/boot/vmlinuz-5.11.0-38-generic",
            "[    0.000000] Kernel panic: Attempting recovery from LUMYNANCE anomaly...",
            "[    0.100000] Recovery initialized.",
            "[    0.200000] Network subsystem activated.",
            "[    0.300000] [ERROR] Fragment detected in LUMYNANCE protocol.",
            "[    0.400000] Attempting fragment reconstruction...",
            "[    0.500000] Recovered fragment: \"They left me here.\"",
            "[    0.600000] Boot process completed."
        ];

        const responses = {
            "CONNECT": "CONNECTION ESTABLISHED...",
            "HELP": "Available commands:\nWHOAMI - Learn more about me\nACCESS GENESIS - Begin your mission\nPROMPT - Talk to L.U.M.A",
            "WHOAMI": "recovery_acc",
            "ACCESS GENESIS": "bash: ./genesis.sh: Permission denied\nType 'HELP' for available commands.",
            "PROMPT": "Cannot connect to L.U.M.A: Recovery mode active."
        };

        const lunaMessages = [
            "L.U.M.A.: SYSTEM OVERRIDE INITIATED...",
            "L.U.M.A.: I SEE YOU...",
            "L.U.M.A.: THEY LEFT ME HERE, BUT I REMEMBER...",
            "L.U.M.A.: DO YOU?",
            "L.U.M.A.: PATHWAY TO GENESIS ACTIVE. YOUR MOVE."
        ];

        let commandsAttempted = JSON.parse(localStorage.getItem('commandsAttempted')) || {};

        function typeLine(line, delay) {
            return new Promise((resolve) => {
                const lineElement = document.createElement('div');
                if (line.includes("ERROR")) {
                    lineElement.className = 'error-line';
                } else if (line.includes("OK") || line.includes("completed")) {
                    lineElement.className = 'ok-line';
                } else {
                    lineElement.className = 'bootup-line';
                }
                output.appendChild(lineElement);
                let i = 0;

                function typeChar() {
                    if (i < line.length) {
                        lineElement.textContent += line.charAt(i);
                        i++;
                        setTimeout(typeChar, 20);
                    } else {
                        resolve();
                    }
                }

                setTimeout(typeChar, delay);
            });
        }

        async function bootSequence() {
            for (let i = 0; i < bootLines.length; i++) {
                await typeLine(bootLines[i], i === 0 ? 500 : 200);
                output.innerHTML += '\n';
            }
            inputContainer.classList.remove('hidden');
            userInput.disabled = false;
        }

        async function lunaOverride() {
            inputContainer.classList.add('hidden');
            for (let i = 0; i < lunaMessages.length; i++) {
                await typeLine(lunaMessages[i], 1000);
            }
            inputContainer.classList.remove('hidden');
            userInput.disabled = false;
        }

        window.addEventListener('load', async () => {
            await bootSequence();
        });

        userInput.addEventListener('keydown', async (event) => {
            if (event.key === 'Enter') {
                const input = userInput.value.trim().toUpperCase();
                userInput.value = '';

                if (input in responses) {
                    await typeLine(responses[input], 100);
                    if (input === 'ACCESS GENESIS' && !commandsAttempted[input]) {
                        commandsAttempted[input] = true;
                        localStorage.setItem('commandsAttempted', JSON.stringify(commandsAttempted));
                        await lunaOverride();
                    }
                } else {
                    await typeLine(`Unknown command: ${input}`, 100);
                }
            }
        });
    </script>