<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Terminal UI</title>
    <style>
        /* Global styles */
        body {
            margin: 0;
            padding: 0;
            background: #141414;
            color: #fff;
            font-family: monospace;
        }

        /* Container styles */
        .container {
            margin: 0 auto;
            width: 480px;
            text-align: center;
        }

        /* Terminal styles */
        #term {
            position: relative;
            margin: 0;
            padding: 10px;
            min-height: 264px;
            font-size: 14px;
            background: #000;
            color: #fff;
            overflow-y: auto;
            white-space: pre-wrap;
            border: 2px solid #333;
        }

        /* Keyboard styles */
        .kd {
            height: 50px;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 5px;
            margin-top: 10px;
        }

        .k {
            padding: 10px;
            background-color: #333;
            color: #fff;
            text-align: center;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .k:hover {
            background-color: #555;
        }

        .k:active {
            background-color: #777;
        }

        .t {
            width: 100%;
            margin-top: 10px;
            padding: 8px;
            background-color: #000;
            color: #fff;
            font-size: 18px;
            border: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Terminal Output -->
        <div id="term">
            <span>Welcome to the terminal!</span><br>
            <span>System: </span><span>Linux</span><br>
            <span>User: </span><span>guest</span><br>
            <span>Command: </span><span id="command-line">_</span>
        </div>

        <!-- Command Input -->
        <input type="text" id="inputField" class="t" placeholder="Type your command here..." autocomplete="off">

        <!-- Keyboard Buttons -->
        <div class="kd">
            <div class="k" onclick="addToInput('1')">1</div>
            <div class="k" onclick="addToInput('2')">2</div>
            <div class="k" onclick="addToInput('3')">3</div>
            <div class="k" onclick="addToInput('4')">4</div>
            <div class="k" onclick="addToInput('5')">5</div>
            <div class="k" onclick="addToInput('6')">6</div>
            <div class="k" onclick="addToInput('7')">7</div>
            <div class="k" onclick="addToInput('8')">8</div>
            <div class="k" onclick="addToInput('9')">9</div>
            <div class="k" onclick="addToInput('0')">0</div>
            <div class="k" onclick="submitCommand()">Enter</div>
            <div class="k" onclick="clearInput()">Clear</div>
        </div>
    </div>

    <script>
        // Handler for adding input text to the command line
        function addToInput(value) {
            let inputField = document.getElementById('inputField');
            inputField.value += value;
        }

        // Handler for clearing the input field
        function clearInput() {
            let inputField = document.getElementById('inputField');
            inputField.value = '';
        }

        // Handler for submitting a command (like pressing Enter)
        function submitCommand() {
            let inputField = document.getElementById('inputField');
            let commandLine = document.getElementById('command-line');
            let inputCommand = inputField.value.trim();

            if (inputCommand !== '') {
                // Display the entered command in the terminal
                commandLine.innerHTML = inputCommand + " _";
                inputField.value = '';

                // Simulate sending command to a backend or processing it
                processCommand(inputCommand);
            }
        }

        // Simulated backend command processing
        function processCommand(command) {
            let term = document.getElementById('term');

            // Simulate a response (you can replace this with an actual AJAX request)
            let response = "Processing: " + command;
            term.innerHTML += "<br>" + response;

            // Scroll to the bottom of the terminal
            term.scrollTop = term.scrollHeight;
        }

        // Optionally: Handle keypress event for typing commands
        document.getElementById('inputField').addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                submitCommand();
            }
        });

        // Webshell functionality for terminal-like behavior (unchanged)
        var webshell = {};
        webshell.TerminalClass = function(id, width, height, handler) {
            var ie = 0;
            if (window.ActiveXObject) ie = 1;
            var sid = "" + Math.round(Math.random() * 1000000000);
            var qs = "s=" + sid + "&w=" + width + "&h=" + height + "&k=";
            var kb = [];
            var isactive = false;
            var islocked = false;
            var qtimer;
            var qtime = 100;
            var retry = 0;
            var cy = 0;
            var div = document.getElementById(id);

            function update() {
                if (!islocked) {
                    islocked = true;
                    var r;
                    if (ie == 1)
                        r = new ActiveXObject("Microsoft.XMLHTTP");
                    else
                        r = new XMLHttpRequest();
                    var send = "";
                    while (kb.length > 0)
                        send += kb.pop();
                    r.open("GET", "u?" + qs + send, true);
                    if (ie)
                        r.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
                    r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    r.onreadystatechange = function() {
                        if (r.readyState != 4)
                            return;
                        islocked = false;
                        if (!isactive) {
                            isactive = true;
                            handler('conn', 0);
                        }
                        if (r.status == 200) {
                            retry = 0;
                            cy = r.responseText.substring(45, 48);
                            var html = r.responseText.substring(52);
                            if (html.length > 0) {
                                div.innerHTML = html;
                                handler('curs', cy);
                                qtime = 100;
                            } else {
                                qtime *= 2;
                                if (qtime > 2000)
                                    qtime = 2000;
                            }
                            qtimer = window.setTimeout(update, qtime);
                        } else if (r.status == 400)
                            handler('disc', 0);
                        else {
                            retry++;
                            if (retry < 3)
                                qtimer = window.setTimeout(update, 2000);
                            else
                                handler('disc', 1);
                        }
                    }
                    r.send(null);
                }
            }

            function queue(s) {
                kb.unshift(s);
                qtime = 100;
                if (!islocked) {
                    window.clearTimeout(qtimer);
                    qtimer = window.setTimeout(update, 1);
                }
            }

            function private_sendkey(kc) {
                var k = "";
                switch (kc) {
                    case 126:
                        k = "~~";
                        break;
                    case 63232:
                        k = "~A";
                        break; // Up
                    case 63233:
                        k = "~B";
                        break; // Down
                    case 63234:
                        k = "~D";
                        break; // Left
                    case 63235:
                        k = "~C";
                        break; // Right
                    case 63276:
                        k = "~1";
                        break; // PgUp
                    case 63277:
                        k = "~2";
                        break; // PgDn
                    case 63273:
                        k = "~H";
                        break; // Home
                    case 63275:
                        k = "~F";
                        break; // End
                    case 63302:
                        k = "~3";
                        break; // Ins
                    case 63272:
                        k = "~4";
                        break; // Del
                    default:
                        k = String.fromCharCode(kc);
                }
                queue(encodeURIComponent(k));
            };

            this.sendkey = function(kc) {
                private_sendkey(kc);
            }

            this.keypress = function(ev) {
               
