sahilwep / cli_design

Command-Line Interface (CLI) Design

Welcome to the Command-Line Interface (CLI) Design repository! This project is an exploration of frontend development, inspired by the charming and functional design of command prompts.

Overview

The CLI Design project recreates a command-line shell experience using HTML, CSS, and JavaScript. It offers a blend of classic terminal aesthetics with modern features, providing an immersive and interactive environment.

Features

• Directory Structure: Navigate through a nested directory structure, unveiling different facets of the virtual environment.
• Commands: Execute various commands, including listing directories (ls), changing display color (color), toggling text animation (anim), and more.
• Interactive Elements: Enjoy clickable links, dynamic text animations, and sound effects for an engaging experience.

File Structure

• index.html: The main HTML file defining the structure of the CLI.
• style.css: Cascading Style Sheets (CSS) file styling the CLI interface.
• script.js: JavaScript file handling dynamic behavior, command processing, and user interactions.
• files Directory: Contains simulated files and directories for the virtual environment.

Getting Started

1. Clone the repository:

   git clone https://github.com/sahilwep/CLI_Design.git

2. Use any server to host these file content on your local machine:

   1. Python way:
      1. visit inside the directory.
      2. open shell
      3. use command python3 -m http.server 80
      4. open localhost or 127.0.0.1 on your browser.
   2. VsCode way:
      1. use liveserver extension.

3. Open index.html in your web browser to experience the CLI.

4. Interact with the shell using various commands and explore the virtual environment.

Commands

• ls: List directories.
• help: Display command descriptions and usages.
• clear: Clear the screen.
• color #hexcode: Change display color.
• anim: Toggle text animation.
• sound: Mute/Unmute sound effects.
• cd: Go to the root directory.

Inspiration

This project draws inspiration from [Name of the Inspirational Project]. Their innovative approach motivated the creation of this CLI Design.

Happy coding! 🚀