Update templates/index.html

templates/index.html

@@ -29,6 +29,7 @@
             background-color: #111;
             padding: 10px;
             overflow-y: auto;
+            display: none;
         }
         #output {
             margin-bottom: 20px;
@@ -58,6 +59,37 @@
         .file-item:hover {
             background-color: #222;
         }
+        #file-editor {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80%;
+            height: 80%;
+            background-color: #111;
+            border: 1px solid #0f0;
+            padding: 20px;
+            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+        }
+        #editor-textarea {
+            width: 100%;
+            height: calc(100% - 40px);
+            background-color: #000;
+            color: #0f0;
+            border: none;
+            resize: none;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+        }
+        #save-button {
+            margin-top: 10px;
+            padding: 5px 10px;
+            background-color: #0f0;
+            color: #000;
+            border: none;
+            cursor: pointer;
+        }
         @keyframes glitch {
             0% {
                 text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff,
@@ -107,10 +139,20 @@
             <div id="file-list"></div>
         </div>
     </div>
+    <div id="file-editor">
+        <textarea id="editor-textarea"></textarea>
+        <button id="save-button">Save</button>
+    </div>
     <script>
         const outputDiv = document.getElementById('output');
         const codeInput = document.getElementById('code-input');
         const fileList = document.getElementById('file-list');
+        const fileExplorer = document.querySelector('.file-explorer');
+        const fileEditor = document.getElementById('file-editor');
+        const editorTextarea = document.getElementById('editor-textarea');
+        const saveButton = document.getElementById('save-button');
+
+        let currentEditingFile = '';
 
         function addToOutput(text) {
             outputDiv.innerHTML += text + '\n';
@@ -129,7 +171,13 @@
             .then(response => response.json())
             .then(data => {
                 addToOutput(data.result);
-                updateFileList();
+                if (data.action === "edit") {
+                    currentEditingFile = data.filename;
+                    editorTextarea.value = '';
+                    fileEditor.style.display = 'block';
+                } else {
+                    updateFileList();
+                }
             })
             .catch(error => {
                 addToOutput(`Error: ${error}`);
@@ -166,6 +214,20 @@
             });
         }
 
+        saveButton.addEventListener('click', function() {
+            fetch("/save_file", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ filename: currentEditingFile, content: editorTextarea.value }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                addToOutput(data.result);
+                fileEditor.style.display = 'none';
+                updateFileList();
+            });
+        });
+
         codeInput.addEventListener('keydown', function(event) {
             if (event.key === 'Enter') {
                 executeCode();
@@ -177,6 +239,16 @@
 
         // Initial message
         addToOutput("Welcome to the Hacker's Python Terminal. Type your commands below.");
+        addToOutput("Available commands:");
+        addToOutput("- show files: Display the file explorer");
+        addToOutput("- hide files: Hide the file explorer");
+        addToOutput("- new file <filename>: Create a new file");
+        addToOutput("- edit <filename>: Edit an existing file");
+        addToOutput("- cd <directory>: Change directory");
+        addToOutput("- !<shell command>: Execute a shell command");
+        addToOutput("- pip install <package>: Install a Python package");
+        addToOutput("- git <command>: Execute a git command");
+        addToOutput("- <python code>: Execute Python code");
     </script>
 </body>
 </html>