updated initial

GustyCube · Nov 13, 2023 · e9f6502 · e9f6502
1 parent 9486538
commit e9f6502
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 103 deletions.
diff --git a/index.html b/index.html
@@ -4,52 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Linux Terminal Simulation</title>
-    <style>
-        body {
-            background-color: #000000;
-            color: #ffffff;
-            font-family: 'Courier New', monospace;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: left;
-
-            height: 100vh;
-        }
-
-        .terminal {
-            width: 80%;
-            max-width: 600px;
-            background-color: #000;
-            padding: 20px;
-
-
-        }
-
-        .prompt {
-            color: #ffffff;
-            display: inline-block;
-        }
-
-        .output {
-            color: #ffffff;
-        }
-
-        .input {
-            color: #ffffff;
-            display: inline-block;
-            font-family: 'Courier New', monospace;
-        }
-
-        input {
-            background-color: transparent;
-            border: none;
-            outline: none;
-            color: #ffffff;
-            width: 90%;
-            font-family: 'Courier New', monospace;
-        }
-    </style>
+    <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
     <div class="terminal">
@@ -59,62 +14,8 @@
             <input type="text" id="commandInput" onkeydown="handleInput(event)">
         </div>
     </div>
-
-    <script>
-        // Retrieve the name from localStorage or set a default value
-let name = localStorage.getItem('username') || "user";
-terminal.loadAddon(fitAddon);
-        terminal.open(document.getElementsByClassName('terminal'));
-        fitAddon.fit();
-
-        terminal.prompt = () => {
-            terminal.write('\r\n');
-            terminal.write(`\x1b[32m${name}\x1b[0m$ `);
-        };
-
-function changeName(newName) {
-    // Update the name variable
-    name = newName;
-    // Store the updated name in localStorage
-    localStorage.setItem('username', newName);
-}
-
-function handleInput(event) {
-    if (event.key === "Enter") {
-        const commandInput = document.getElementById("commandInput");
-        const command = commandInput.value;
-        const outputDiv = document.querySelector('.output');
-
-        // Simulate command execution (you can expand this part)
-        const output = executeCommand(command);
-
-        // Display command and output in the terminal
-        outputDiv.innerHTML += `<div class="prompt">$ ${command}</div>`;
-        outputDiv.innerHTML += `<div class="output">${output}</div>`;
-
-        // Clear the input field
-        commandInput.value = "";
-    }
-}
-
-function executeCommand(command) {
-    // Simulate command execution (you can add more commands)
-    if (command.toLowerCase() === "hello") {
-        return `Hello, ${name}!`;
-    } else if (command.toLowerCase().startsWith("changename ")) {
-        const newName = command.substring("changename ".length);
-        changeName(newName);
-        return `Name changed to ${name}`;
-    } else if (command.toLowerCase() === "clearcache") {
-        localStorage.clear();
-        window.location.reload(true);
-    }
-     else {
-        return `Command not found: ${command}`;
-    }
-}
-
-
-    </script>
+
+    <script src="./main.js"></script>
+    <footer><a href="https://github.com/GustyCube/terminal-simulator">Github</a></footer>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,53 @@
+ // Retrieve the name from localStorage. If not found, set a default value.
+ let name = localStorage.getItem('username') || "user";
+ terminal.loadAddon(fitAddon);
+         terminal.open(document.getElementsByClassName('terminal'));
+         fitAddon.fit();
+
+         terminal.prompt = () => {
+             terminal.write('\r\n');
+             terminal.write(`\x1b[32m${name}\x1b[0m$ `);
+         };
+
+ function changeName(newName) {
+     // Update the name variable
+     name = newName;
+     // Store the updated name in localStorage
+     localStorage.setItem('username', newName);
+ }
+
+ function handleInput(event) {
+     if (event.key === "Enter") {
+         const commandInput = document.getElementById("commandInput");
+         const command = commandInput.value;
+         const outputDiv = document.querySelector('.output');
+
+         // Simulate command execution
+         const output = executeCommand(command);
+
+         // Display command and output in the terminal
+         outputDiv.innerHTML += `<div class="prompt">$ ${command}</div>`;
+         outputDiv.innerHTML += `<div class="output">${output}</div>`;
+
+         // Clear the input field
+         commandInput.value = "";
+     }
+ }
+
+ function executeCommand(command) {
+     // Simulate command execution (add more commands through GitHub Pull Requests.)
+     if (command.toLowerCase() === "hello") {
+         return `Hello, ${name}!`;
+     } else if (command.toLowerCase().startsWith("changename ")) {
+         const newName = command.substring("changename ".length);
+         changeName(newName);
+         return `Name changed to ${name}`;
+     } else if (command.toLowerCase() === "clearcache") {
+         localStorage.clear();
+         window.location.reload(true);
+     }
+      else {
+         return `Command not found: ${command}`;
+     }
+ }
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,52 @@
+body {
+    background-color: #000000;
+    color: #ffffff;
+    font-family: 'Courier New', monospace;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: left;
+
+    height: 100vh;
+}
+
+.terminal {
+    width: 80%;
+    max-width: 600px;
+    background-color: #000;
+    padding: 20px;
+
+
+}
+
+.prompt {
+    color: #ffffff;
+    display: inline-block;
+}
+
+.output {
+    color: #ffffff;
+}
+
+.input {
+    color: #ffffff;
+    display: inline-block;
+    font-family: 'Courier New', monospace;
+}
+
+input {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    color: #ffffff;
+    width: 90%;
+    font-family: 'Courier New', monospace;
+}
+
+footer {
+    position: fixed;
+left: 0;
+bottom: 0;
+width: 100%;
+text-align: center;
+}