Spaces:

Artificial-superintelligence
/

Athspi

Running

App Files Files Community

Artificial-superintelligence commited on Dec 3, 2024

Commit

bb3c1b4

verified ·

1 Parent(s): a15e38b

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +150 -54

templates/index.html CHANGED Viewed

@@ -3,84 +3,180 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Python Terminal</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-        }
-        #terminal {
-            width: 100%;
-            height: 300px;
-            background: #000;
             color: #0f0;
             overflow-y: auto;
             padding: 10px;
-            border-radius: 5px;
         }
-        #input-area {
             display: flex;
-            margin-top: 10px;
         }
-        #command-input {
             flex: 1;
-            padding: 10px;
             font-size: 16px;
         }
-        button {
-            padding: 10px 15px;
-            font-size: 16px;
-            margin-left: 5px;
         }
-        .audio-link {
-            margin-top: 10px;
         }
     </style>
 </head>
 <body>
-    <h1>Python Terminal</h1>
-    <div id="terminal"></div>
-    <div id="input-area">
-        <input type="text" id="command-input" placeholder="Enter Python or shell command">
-        <button onclick="runCommand()">Run</button>
     </div>
-    <div id="audio-container"></div>
     <script>
-        const terminal = document.getElementById("terminal");
-        const commandInput = document.getElementById("command-input");
-        const audioContainer = document.getElementById("audio-container");
-        function appendToTerminal(text) {
-            terminal.innerHTML += text + "<br>";
-            terminal.scrollTop = terminal.scrollHeight;
         }
-        async function runCommand() {
-            const command = commandInput.value;
-            if (!command.trim()) return;
-            appendToTerminal("> " + command);
-            commandInput.value = "";
-            try {
-                const response = await fetch("/run", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ command }),
                 });
-                const result = await response.json();
-                if (result.output) appendToTerminal(result.output);
-                if (result.error) appendToTerminal("<span style='color:red'>" + result.error + "</span>");
-                if (result.audio_file) {
-                    const audioLink = `<a href="/download/${result.audio_file}" target="_blank" class="audio-link">Download/Play Audio</a>`;
-                    audioContainer.innerHTML = audioLink;
-                }
-            } catch (error) {
-                appendToTerminal("<span style='color:red'>Error: " + error.message + "</span>");
-            }
         }
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hacker's Python Terminal</title>
     <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            font-family: 'Courier New', monospace;
+            background-color: #000;
             color: #0f0;
+            overflow: hidden;
+        }
+        .container {
+            display: flex;
+            height: 100%;
+        }
+        .terminal {
+            flex: 1;
+            padding: 20px;
             overflow-y: auto;
+            box-sizing: border-box;
+        }
+        .file-explorer {
+            width: 200px;
+            background-color: #111;
             padding: 10px;
+            overflow-y: auto;
         }
+        #output {
+            margin-bottom: 20px;
+            white-space: pre-wrap;
+        }
+        #input-line {
             display: flex;
+            align-items: center;
+        }
+        #prompt {
+            margin-right: 10px;
         }
+        #code-input {
             flex: 1;
+            background-color: transparent;
+            border: none;
+            color: #0f0;
+            font-family: 'Courier New', monospace;
             font-size: 16px;
+            outline: none;
         }
+        .file-item {
+            cursor: pointer;
+            padding: 5px;
+            transition: background-color 0.3s;
         }
+        .file-item:hover {
+            background-color: #222;
+        }
+        @keyframes glitch {
+            0% {
+                text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff,
+                    0.025em 0.05em 0 #fffc00;
+            }
+            14% {
+                text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff,
+                    0.025em 0.05em 0 #fffc00;
+            }
+            15% {
+                text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.025em 0 #fc00ff,
+                    -0.05em -0.05em 0 #fffc00;
+            }
+            49% {
+                text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.025em 0 #fc00ff,
+                    -0.05em -0.05em 0 #fffc00;
+            }
+            50% {
+                text-shadow: 0.025em 0.05em 0 #00fffc, 0.05em 0 0 #fc00ff,
+                    0 -0.05em 0 #fffc00;
+            }
+            99% {
+                text-shadow: 0.025em 0.05em 0 #00fffc, 0.05em 0 0 #fc00ff,
+                    0 -0.05em 0 #fffc00;
+            }
+            100% {
+                text-shadow: -0.025em 0 0 #00fffc, -0.025em -0.025em 0 #fc00ff,
+                    -0.025em -0.05em 0 #fffc00;
+            }
+        }
+        .glitch {
+            animation: glitch 1s linear infinite;
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <div class="terminal">
+            <div id="output"></div>
+            <div id="input-line">
+                <span id="prompt" class="glitch">&gt;</span>
+                <input type="text" id="code-input" autofocus>
+            </div>
+        </div>
+        <div class="file-explorer">
+            <h3 class="glitch">Files</h3>
+            <div id="file-list"></div>
+        </div>
     </div>
     <script>
+        const outputDiv = document.getElementById('output');
+        const codeInput = document.getElementById('code-input');
+        const fileList = document.getElementById('file-list');
+        function addToOutput(text) {
+            outputDiv.innerHTML += text + '\n';
+            outputDiv.scrollTop = outputDiv.scrollHeight;
         }
+        function executeCode() {
+            const command = codeInput.value;
+            addToOutput(`> ${command}`);
+            fetch("/execute", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ code: command }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                addToOutput(data.result);
+                updateFileList();
+            })
+            .catch(error => {
+                addToOutput(`Error: ${error}`);
+            });
+            codeInput.value = '';
+        }
+        function updateFileList() {
+            fetch("/list_files")
+            .then(response => response.json())
+            .then(data => {
+                fileList.innerHTML = '';
+                data.files.forEach(file => {
+                    const fileItem = document.createElement('div');
+                    fileItem.className = 'file-item';
+                    fileItem.textContent = file;
+                    fileItem.onclick = () => downloadFile(file);
+                    fileList.appendChild(fileItem);
                 });
+            });
+        }
+        function downloadFile(filename) {
+            window.location.href = `/download/${filename}`;
+        }
+        function cleanup() {
+            fetch("/cleanup", { method: "POST" })
+            .then(response => response.json())
+            .then(data => {
+                addToOutput(data.result);
+                updateFileList();
+            });
         }
+        codeInput.addEventListener('keydown', function(event) {
+            if (event.key === 'Enter') {
+                executeCode();
+            }
+        });
+        window.addEventListener('load', updateFileList);
+        window.addEventListener('beforeunload', cleanup);
+        // Initial message
+        addToOutput("Welcome to the Hacker's Python Terminal. Type your commands below.");
     </script>
 </body>
+</html>