Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 safaritrader
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,97 @@
+# Custom Command-Line Interface (CLI) Project
+
+Welcome to the Custom CLI project! This project provides an interactive command-line interface implemented in JavaScript, along with a GUI-based Command Creator to build custom commands and sub-commands.
+
+> [!IMPORTANT]
+> All of codes in this repository Made with the ChatGPT :white_flag:
+> [![ License](https://img.shields.io/badge/Chat_GPT_Version-o1_preview-blue&?color=red)](https://chatgpt.com)
+
+##[Demo](https://safaritrader.github.io/js-cli/index.html)
+
+## Features
+
+- **Interactive CLI**: Navigate through commands and frameworks, execute actions, and receive feedback in real-time.
+- **Dynamic Command Hierarchy**: Supports infinite nesting of commands and sub-commands.
+- **Command History Navigation**: Use the up and down arrow keys to navigate through previous commands.
+- **Tree-Structured Help Display**: Type `help` to see a hierarchical list of available commands.
+- **Dark Dracula Theme**: A visually appealing dark theme inspired by PyCharm's Dracula theme.
+- **GUI-based Command Creator**: Build custom commands with specific handlers using a user-friendly interface.
+
+<details>
+
+<summary>Getting Started</summary>
+
+
+### Launch the CLI Interface
+
+- Open [`cli.html`](https://safaritrader.github.io/js-cli/cli.html) in your web browser.
+- Type commands into the input field and press **Enter** to execute them.
+- Use `help` to see available commands.
+
+### Use the Command Creator
+
+- Open [`command_creator.html`](https://safaritrader.github.io/js-cli/command_creator.html) in your web browser.
+- Use the GUI to create custom commands and sub-commands.
+- Generate the JavaScript code and integrate it into your CLI.
+
+## How to Add Custom Commands
+
+1. **Open the Command Creator**: Use the Command Creator page to build your commands.
+2. **Define Commands**: Enter command names, types, descriptions, and handler code.
+3. **Generate Code**: Click **Generate Code** to create the JavaScript code for your commands.
+4. **Copy and Integrate**: Copy the generated code and paste it into `js/cli.js` after the CLI initialization code.
+5. **Test Your Commands**: Reload the CLI page and test your new commands.
+
+## Project Structure
+
+JS-CLI/ ├── index.html ├── cli.html ├── command_creator.html ├── css/ │ └── style.css ├── js/ │ ├── cli.js │ └── command_creator.js └── README.md
+
+
+## Customization
+
+Feel free to modify and extend the project to suit your needs. You can:
+
+- Add new commands and frameworks.
+- Customize the theme and styles.
+- Integrate additional features such as syntax highlighting or command auto-completion.
+
+## Acknowledgments
+
+This project was developed to provide a flexible platform for creating interactive command-line interfaces in web environments. It combines practical functionality with an intuitive user experience.
+
+---
+
+## **Deploying to GitHub Pages**
+
+To host your site on GitHub Pages:
+
+1. **Push Your Code to GitHub**: Commit and push all your files to your GitHub repository.
+2. **Enable GitHub Pages**:
+   - Go to your repository's settings.
+   - Scroll down to **GitHub Pages**.
+   - Under **Source**, select the branch you want to use (usually `main` or `master`).
+   - Click **Save**.
+3. **Access Your Site**: After a few minutes, your site will be available at:
+   - `https://<username>.github.io` (for user/organization sites)
+   - `https://<username>.github.io/<repository>` (for project sites)
+
+---
+
+</details>
+
+## **Final Notes**
+
+By following this guide, you should have a fully functional GitHub Pages site hosting your CLI project and command creator. Users can interact with the CLI directly in their browsers and use the Command Creator to build and customize commands.
+
+This project demonstrates how JavaScript and HTML can be leveraged to create interactive web-based command-line interfaces. The use of classes, event handling, and dynamic DOM manipulation showcases modern web development techniques.
+
+Feel free to share your project with others, contribute to its development, and explore new features and enhancements!
+
+---
+
+**Enjoy building and customizing your CLI project!**
+## 📞 Contact
+
+[Hassan Safari] - Telegram : @safari_trader - [email protected]
+
+Project Link: https://github.com/safaritrader/js-cli

cli.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>JS CLI</title>
+  <link rel="stylesheet" href="./css/header.css">
+  <style>
+    body {
+      font-family: 'Source Code Pro', monospace;
+      background-color: #282a36;
+      color: #f8f8f2;
+      margin: 20px;
+    }
+    #output {
+      background-color: #282a36;
+      border: 1px solid #44475a;
+      padding: 10px;
+      height: 300px;
+      overflow-y: auto;
+      margin-bottom: 10px;
+      white-space: pre-wrap;
+    }
+    #input {
+      width: calc(100% - 22px);
+      padding: 10px;
+      font-size: 16px;
+      background-color: #44475a;
+      color: #f8f8f2;
+      border: 1px solid #6272a4;
+    }
+    #input:focus {
+      outline: none;
+      border-color: #50fa7b;
+    }
+
+  </style>
+</head>
+<body>
+<!-- Navigation Menu -->
+<nav>
+  <ul>
+    <li><a href="index.html">Home</a></li>
+    <li><a href="cli.html"  style="color: #50fa7b;">CLI Interface</a></li>
+    <li><a href="command_creator.html">Command Creator</a></li>
+  </ul>
+</nav>
+<h1>CLI Test</h1>
+<div id="output"></div>
+<input type="text" id="input" placeholder="Enter command..." autocomplete="off" />
+<footer>
+  <p>&copy; 2024-10-14 Made for &#127987; With Chatgpt o1-preview <a href="https://github.com/safaritrader" style="color: #f8f8f2 !important;">Hassan Safari</a></p>
+</footer>
+<script type="text/javascript" src="./js/cli.js"></script>
+<script>
+  // Handlers
+  function typeHandler(lastAnswer) {
+    return { response: 'Type framework activated.' };
+  }
+
+  function nameHandler(lastAnswer, input) {
+    if (!input) {
+      return { requiresInput: true, message: 'Please enter your name:' };
+    } else {
+      cli.lastAnswer = input; // Save the name as last answer
+      return { response: `Name saved: ${input}` };
+    }
+  }
+
+  function validHandler(lastAnswer) {
+    if (cli.lastAnswer) {
+      return { response: `Name "${cli.lastAnswer}" is valid.` };
+    } else {
+      return { response: '<span style="color: red;">No name found to validate.</span>' };
+    }
+  }
+
+  function printNameHandler(lastAnswer) {
+    if (cli.lastAnswer) {
+      return { response: `Your name is: ${cli.lastAnswer}` };
+    } else {
+      return { response: 'No name found. Please enter your name first.' };
+    }
+  }
+  function alertHandler(lastAnswer) {
+    if (cli.lastAnswer) {
+      alert(`Hello, ${cli.lastAnswer}!`);
+      return { response: `Your name is: ${cli.lastAnswer}` };
+    } else {
+      return { response: 'No name found. Please enter your name first.' };
+    }
+  }
+  // Commands
+  const typeCommand = new Command('type', 'framework', 'Type framework', typeHandler);
+  const nameCommand = new Command('name', 'self', 'Enter your name.', nameHandler);
+  const validCommand = new Command('valid', 'self', 'Validate your name.', validHandler);
+  const printNameCommand = new Command('printname', 'self', 'Print your name.', printNameHandler);
+  const alertCommand = new Command('alertname', 'self', 'Alert your name.', alertHandler);
+  // Build command hierarchy
+  cli.registerCommand(typeCommand);
+  cli.registerCommand(nameCommand, typeCommand);
+  cli.registerCommand(validCommand, nameCommand); // valid is a sub-command of name
+  cli.registerCommand(printNameCommand, nameCommand); // printname is a sub-command of name
+  cli.registerCommand(alertCommand, nameCommand);
+</script>
+</body>
+</html>

command_creator.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Command Creator</title>
+  <link rel="stylesheet" href="./css/command.css">
+  <link rel="stylesheet" href="./css/header.css">
+</head>
+<body>
+<nav>
+  <ul>
+    <li><a href="index.html">Home</a></li>
+    <li><a href="cli.html" >CLI Interface</a></li>
+    <li><a href="command_creator.html" style="color: #50fa7b;">Command Creator</a></li>
+  </ul>
+</nav>
+<h1>Command Creator</h1>
+<div id="commandsContainer"></div>
+<button id="addCommandButton">Add Command</button>
+<button id="generateButton">Generate Code</button>
+<button id="copyButton">Copy Code to Clipboard</button>
+<textarea id="generatedCode" readonly></textarea>
+
+<footer>
+  <p>&copy; 2024-10-14 Made for &#127987; With Chatgpt o1-preview <a href="https://github.com/safaritrader" style="color: #f8f8f2 !important;">Hassan Safari</a></p>
+</footer>
+<script type="text/javascript" src="./js/command_creator.js"></script>
+</body>
+</html>