This is a simple web-based fake terminal project designed to simulate a command-line interface similar to a real terminal. It allows users to type commands and see output directly in the browser.
- Display of terminal-like interface with customizable output.
- Basic command handling for demonstration purposes.
- Simulated options menu interaction.
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/devvyyxyz/fake-terminal.git cd fake-terminal-project -
Open
index.htmlin your browser:- Simply open
index.htmlin your preferred web browser.
- Simply open
-
Interact with the terminal:
- Type commands (e.g., "menu") in the input area to see different outputs.
- Explore the basic functionalities provided (e.g., options menu).
- index.html: Contains the HTML structure of the fake terminal interface.
- styles.css: Defines the styling for the terminal interface and options menu.
- script.js: Provides the interactive behavior and logic for the fake terminal.
- Command Input: Type commands in the input area (
$prompt) and press Enter to see corresponding outputs. - Options Menu: Type "menu" to display a simulated options menu within the terminal.
- Customize the styling and functionality further as per your requirements.
- This project is intended for educational purposes and can be expanded with additional features and commands.
Here are the raw HTML, CSS, and JavaScript files for your fake terminal project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fake Terminal</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="terminal" class="terminal">
<div id="output" class="output"></div>
<div id="input-line" class="input-line">
<span class="prompt">$</span>
<input id="command-line" type="text" class="command-line" autofocus autocomplete="off">
</div>
</div>
<script src="script.js"></script>
</body>
</html>body {
font-family: monospace;
background-color: #000;
color: #fff;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.terminal {
width: 80%;
max-width: 800px;
border: 2px solid #0f0;
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
overflow-y: auto; /* Enable vertical scrolling */
position: relative; /* Ensure relative positioning for absolute child */
}
.output {
min-height: 200px;
padding-bottom: 20px; /* Ensure space for input line */
}
.input-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding-top: 5px; /* Padding between input and output */
}
.prompt {
margin-right: 10px;
}
.command-line {
border: none;
background-color: transparent;
color: #fff;
font-family: monospace;
font-size: 1em;
width: 100%;
outline: none;
}
.command-line:focus {
outline: none;
}const output = document.getElementById('output');
const commandLine = document.getElementById('command-line');
let realisticTextOptions = []; // Array to hold realistic text options
// Initial welcome message
addOutputLine('Welcome to the fake terminal.');
addOutputLine('Type "menu" to see options.');
// Event listener for command line input
commandLine.addEventListener('keydown', async (event) => {
if (event.key === 'Enter') {
event.preventDefault(); // Prevent default enter behavior (form submission)
const command = commandLine.value.trim();
if (command.toLowerCase() === 'menu') {
displayOptionsMenu();
} else {
addOutputLine(`Command '${command}' not recognized.`);
}
commandLine.value = ''; // Clear command line
}
});
function displayOptionsMenu() {
addOutputLine('Options Menu:');
addOutputLine('- Option 1');
addOutputLine('- Option 2');
addOutputLine('- Option 3');
}
function addOutputLine(text) {
const line = document.createElement('div');
line.textContent = text;
output.appendChild(line);
// Scroll to bottom of output
output.scrollTop = output.scrollHeight;
}