https://github.com/devvyyxyz/fake-terminal
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.
https://github.com/devvyyxyz/fake-terminal
demo fake html outdated terminal web
Last synced: about 1 year ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/devvyyxyz/fake-terminal
- Owner: devvyyxyz
- Created: 2024-06-14T01:32:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-14T19:24:23.000Z (almost 2 years ago)
- Last Synced: 2025-02-09T15:44:16.913Z (over 1 year ago)
- Topics: demo, fake, html, outdated, terminal, web
- Language: JavaScript
- Homepage:
- Size: 36.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
---
# Fake Terminal Project
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.
### Features:
- Display of terminal-like interface with customizable output.
- Basic command handling for demonstration purposes.
- Simulated options menu interaction.
### Getting Started
To run this project locally, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/devvyyxyz/fake-terminal.git
cd fake-terminal-project
```
2. **Open `index.html` in your browser:**
- Simply open `index.html` in your preferred web browser.
3. **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).
### Project Structure
- **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.
### Usage
- **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.
### Additional Notes
- 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.
---
### Raw Code
Here are the raw HTML, CSS, and JavaScript files for your fake terminal project:
#### index.html
```html
Fake Terminal
$
```
#### styles.css
```css
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;
}
```
#### script.js
```javascript
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;
}
```