From b9f9d9e5fd6af05c182d2af3751998ae1ab61333 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Fri, 15 Jul 2022 20:48:23 +0000
Subject: [PATCH] Uploaded index file

---
 index.html | 252 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 252 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2a95774
--- /dev/null
+++ b/index.html
@@ -0,0 +1,252 @@
+<html>
+<head>
+    <title>Konsole</title>
+    <style>
+        ::-webkit-scrollbar { width: 10px; }
+        ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); }
+        ::-webkit-scrollbar-thumb { background: #555; }
+        ::-webkit-scrollbar-thumb:hover { background: #777; }
+
+        body, html {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+
+            font-family: monospace;
+            font-size: 1rem;
+            background-color: #333;
+            color: #0f0;
+        }
+
+        .console {
+            display: flex;
+            flex-direction: column;
+            padding: 1rem;
+        }
+
+        .console-input {
+            display: flex;
+        }
+
+        .console-input-prompt {
+            padding-right: 0.55em;
+        }
+
+        .console-input-field {
+            border: none;
+            outline: none;
+            font-size: 1rem;
+            background-color: rgba(0, 0, 0, 0);
+            color: #0f0;
+            font-family: monospace;
+            flex-grow: 1;
+            padding: 0;
+        }
+
+        .console-output {
+            flex-grow: 1;
+        }
+
+        .console-output-line {
+            margin: 0;
+            padding: 0;
+            min-height: 1.25rem;
+        }
+    </style>
+    <script>
+        window.cli = {};
+    </script>
+    <script>
+        window.cli['clear'] = {
+            autocomplete: () => {
+                return [];
+            },
+            help: () => {
+                return 'Clear console output';
+            },
+            run: args => {
+                output.innerHTML = '';
+            }
+        }
+    </script>
+    <script>
+        window.cli['echo'] = {
+            autocomplete: () => {
+                return [];
+            },
+            help: () => {
+                return 'Output text to console';
+            },
+            run: args => {
+                return args.join(' ');
+            }
+        }
+    </script>
+    <script>
+        window.cli['exit'] = {
+            autocomplete: () => {
+                return [];
+            },
+            help: () => {
+                return 'End session';
+            },
+            run: args => {
+                process('clear');
+                history = [];
+                historyIndex = 0;
+                header();
+            }
+        }
+    </script>
+    <script>
+        window.cli['help'] = {
+            autocomplete: () => {
+                return [];
+            },
+            help: () => {
+                return 'Display all commands';
+            },
+            run: args => {
+                return Object.keys(window.cli).map(command => `${command} - ${window.cli[command].help()}`).join('<br>') + '<br><br>';
+            }
+        }
+    </script>
+    <script>
+        window.cli['hostname'] = {
+            autocomplete: () => {
+                return [];
+            },
+            help: () => {
+                return 'Get computer hostname';
+            },
+            run: args => {
+                return 'localhost'
+            }
+        }
+    </script>
+    <script>
+        window.cli['man'] = {
+            autocomplete: () => {
+                return [];
+            },
+            help: () => {
+                return 'Command manual';
+            },
+            run: args => {
+                return window.cli[args[0]].help();
+            }
+        }
+    </script>
+    <script>
+        window.cli['whoami'] = {
+            autocomplete: () => {
+                return [];
+            },
+            help: () => {
+                return 'Get username';
+            },
+            run: args => {
+                return 'root'
+            }
+        }
+    </script>
+</head>
+
+<body>
+    <div class="console">
+        <div class="console-output"></div>
+        <div class="console-input">
+            <div class="console-input-prompt">root@localhost:~ #</div>
+            <input class="console-input-field" type="text" autofocus>
+        </div>
+    </div>
+
+    <script>
+        const output = document.getElementsByClassName('console-output')[0];
+        const input = document.getElementsByClassName('console-input-field')[0];
+
+        let history = [];
+        let historyIndex = 0;
+
+        function disableInput() {
+            input.disabled = true;
+            document.getElementsByClassName('console-input-prompt')[0].style.visibility = 'hidden';
+        }
+
+        function enableInput() {
+            input.disabled = false;
+            input.focus();
+            document.getElementsByClassName('console-input-prompt')[0].style.visibility = 'visible';
+        }
+
+        function header() {
+            stdOut('Konsole 0.1.0 LTS localhost tty1<br><br>localhost login: root<br>password:<br><br>');
+        }
+
+        function process(command) {
+            (Array.isArray(command) ? command.join(' ') : command).split(';').filter(c => !!c).forEach(c => {
+                const parts = c.split(' ').filter(c => !!c);
+                if(window.cli[parts[0]] == undefined || window.cli[parts[0]].run == undefined) {
+                    stdErr(`${parts[0]}: command not found`);
+                } else {
+                    try {
+                        const out = window.cli[parts[0]].run(parts.slice(1));
+                        if(!!out) stdOut(out);
+                    } catch(err) {
+                        console.error(err)
+                        stdErr(`${parts[0]}: exited with a non-zero status`);
+                    }
+                }
+            });
+        }
+
+        function stdErr(text) {
+            const p = document.createElement('p');
+            p.classList = 'console-output-line error';
+            p.innerText = text;
+            output.appendChild(p);
+        }
+
+        function stdOut(text, html=true) {
+            const p = document.createElement('p');
+            p.classList = 'console-output-line';
+            p[html ? 'innerHTML' : 'innerText'] = text;
+            output.appendChild(p);
+        }
+
+        input.addEventListener('blur', event => input.focus());
+        input.addEventListener("keydown", event => {
+            if(event.key == "Enter") {
+                disableInput();
+                inputValue = input.value;
+                input.value = '';
+                stdOut(`root@localhost:~ # ${inputValue}`, false);
+                if(!!inputValue) {
+                    history.push(inputValue);
+                    historyIndex = history.length;
+                    process(inputValue)
+                }
+                enableInput();
+            } else if(event.key == 'Up' || event.key == 'ArrowUp') {
+                if(historyIndex > 0) historyIndex--;
+                input.value = historyIndex == history.length ? '' : history[historyIndex];
+                setTimeout(() => {
+                    const end = input.value.length;
+                    input.setSelectionRange(end, end);
+                    input.focus();
+                }, 1)
+            } else if(event.key == 'Down' || event.key == 'ArrowDown') {
+                if(historyIndex < history.length) historyIndex++;
+                input.value = historyIndex == history.length ? '' : history[historyIndex];
+                setTimeout(() => {
+                    const end = input.value.length;
+                    input.setSelectionRange(end, end);
+                    input.focus();
+                }, 1)
+            }
+        });
+        header();
+    </script>
+</body>
+</html>
