<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
    <title>Terminal</title>
</head>
<body>
    <input type="text" id="userInput" class="user" placeholder="Enter Command..." spellcheck="false">
    <button id="submit" class="user">Enter</button>
    <div id="output"></div>
    <style>
        body{
            display: flex;
        }
        .source-code-pro-customFont {
        font-family: "Source Code Pro", monospace;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        }
        #output{
            width: 100%;
            height: calc(100vh - 20px);
            border: 2px solid black;
            background-color: hsl(0, 0%, 30%);
            overflow: hidden;
            font-family: "Source Code Pro";
            font-weight: bold;
        }
        .user{
            height: 25px;
        }
        .cmdLine{
            padding-left: 10px;
            color: hsl(100, 47%, 50%);
        }
        .badLine{
            padding-left: 10px;
            color: hsl(0, 100%, 50%);
        }
    </style>
    <script>
        var updating = false;
        var updateError = false;
        const updateTimer = setInterval(() => {
            updating = true
        }, Math.trunc(Math.floor(Math.floor(Math.random() * 1000) * 10)));
        const output = document.getElementById('output');
        const input = document.getElementById('userInput');
        const submitBtn = document.getElementById('submit');
        const commands = ['help', 'reboot', 'sudo', 'update'];
        submitBtn.addEventListener("click", () => {
            execute(input.value);
            input.value = '';
        });
        input.addEventListener("keydown", (e) => {
            if (e.code === "Enter"){
                execute(input.value);
                input.value = '';
            }
        });
        function execute(e){
            if(updating === false){
                if(updateError === false){
                    if(commands[0] === e){
                        const commandsString = commands.join(', ');
                        const splitCommands = commandsString.split(', '); 
                        splitCommands.forEach(command => {
                            const line = document.createElement('p');
                            if(command === commands[0]){
                                line.textContent = command + ' [Brings up This Menu]';
                            }else if(command === commands[1]){
                                line.textContent = command + ' [Clears The Terminal]';
                            }else if(command === commands[2]){
                                line.textContent = command + ' [Gives Administrator Rights]'
                            }else if(command === commands[3]){
                                line.textContent = command + ' [Updates Console]';
                            }else{
                                line.textContent = command;
                            }
                            line.classList.add('cmdLine');
                            output.appendChild(line); 
                        });
                    }else if(commands[1] === e){
                        const line = document.createElement('p');
                        line.textContent = 'Error: Insufficent Rights';
                        line.classList.add('badLine');
                        output.appendChild(line)
                    }else if(e.includes(commands[2])){
                        if(e.includes(commands[2]) && e.includes(commands[1])){
                            const line = document.createElement('p');
                            line.textContent = 'Rebooting...';
                            setInterval(() => {
                                line.textContent += '.';
                            }, 500);
                            line.classList.add('cmdLine');
                            output.appendChild(line);
                            setTimeout(() => {
                                output.innerHTML = '';
                            }, 2000);
                        }else if(e.includes(commands[3])){
                            if(e.includes(commands[3]) && e.includes(commands[2])){
                                const line = document.createElement('p');
                                line.textContent = 'Updating'
                                line.classList.add('cmdLine');
                                output.appendChild(line)
                                updating = true;
                                const i = setInterval(() => {
                                    line.textContent += '.';
                                }, 500);
                                setTimeout(() => {
                                    clearInterval(i);
                                    const line1 = document.createElement('p');
                                    line1.textContent = 'Update Complete';
                                    line1.classList.add('cmdLine');
                                    output.appendChild(line1);
                                    updating = false;
                                }, Math.trunc(Math.floor(Math.random() * 10000)));
                            }
                    }
                    }else if(e === commands[3]){
                        const line = document.createElement('p');
                        line.textContent = 'Error: Insufficent Rights';
                        line.classList.add('badLine');
                        output.appendChild(line);
                    }else{
                        const line = document.createElement('p');
                        line.textContent = 'Unknown Command: ' + input.value;
                        line.classList.add('badLine');
                        output.appendChild(line);
                    }
                    output.scrollTop = output.scrollHeight;
                }else{
                    const line = document.createElement('p');
                        line.textContent = 'Error: Please Update Console';
                        line.classList.add('badLine');
                        output.appendChild(line);
                        updateError = false;
                }
            }
        }
        /*
        const commands = ['help', 'reboot'];
        const commandsString = commands.join(', '); // Join the array into a string
        const splitCommands = commandsString.split(', '); // Split the string back into an array

        splitCommands.forEach(command => {
            console.log(command); // Log each command on a new line
        });
        */
    </script>
</body>
</html>