Spaces:

Artificial-superintelligence
/

Aitest

Running

App Files Files Community

Artificial-superintelligence commited on Dec 1, 2024

Commit

0edbe2c

verified ·

1 Parent(s): 9d64598

Create index.html

Browse files

Files changed (1) hide show

index.html +184 -0

index.html ADDED Viewed

	@@ -0,0 +1,184 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI-Powered Terminal Chat</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+            font-family: 'Courier New', monospace;
+            background-color: #000;
+            color: #0f0;
+        }
+        #terminal {
+            height: calc(100% - 60px);
+            width: 100%;
+            overflow-y: auto;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        #input-area {
+            height: 60px;
+            width: 100%;
+            display: flex;
+            padding: 10px;
+            box-sizing: border-box;
+            background-color: #111;
+            align-items: center;
+        }
+        #user-input {
+            flex-grow: 1;
+            background-color: #000;
+            border: 2px solid #0f0;
+            color: #0f0;
+            font-family: 'Courier New', monospace;
+            font-size: 16px;
+            padding: 10px;
+            border-radius: 5px 0 0 5px;
+            outline: none;
+        }
+        #send-btn {
+            width: 80px;
+            height: 42px;
+            background-color: #0f0;
+            color: #000;
+            border: none;
+            cursor: pointer;
+            font-family: 'Courier New', monospace;
+            font-size: 16px;
+            font-weight: bold;
+            border-radius: 0 5px 5px 0;
+            transition: background-color 0.3s;
+        }
+        #send-btn:hover {
+            background-color: #00ff00;
+        }
+        .line {
+            margin: 5px 0;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        .typed {
+            overflow: hidden;
+            white-space: nowrap;
+            animation: typing 0.5s steps(30, end);
+        }
+        @keyframes typing {
+            from { width: 0; }
+            to { width: 100%; }
+        }
+        @media (max-width: 768px) {
+            #terminal {
+                font-size: 14px;
+            }
+            #user-input, #send-btn {
+                font-size: 14px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="terminal"></div>
+    <div id="input-area">
+        <input type="text" id="user-input" placeholder="Enter your command..." aria-label="Enter your command">
+        <button id="send-btn">Send</button>
+    </div>
+    <script>
+        const terminal = document.getElementById('terminal');
+        const userInput = document.getElementById('user-input');
+        const sendBtn = document.getElementById('send-btn');
+        function typeWriter(text, lineElement, index = 0) {
+            if (index < text.length) {
+                lineElement.textContent += text.charAt(index);
+                setTimeout(() => typeWriter(text, lineElement, index + 1), Math.random() * 10 + 5);
+            } else {
+                lineElement.classList.remove('typed');
+                terminal.scrollTop = terminal.scrollHeight;
+            }
+        }
+        function addLine(text, isUser = false) {
+            const lineElement = document.createElement('div');
+            lineElement.classList.add('line', 'typed');
+            if (isUser) {
+                lineElement.style.color = '#ff0';
+                lineElement.textContent = '> ' + text;
+                terminal.appendChild(lineElement);
+                terminal.scrollTop = terminal.scrollHeight;
+            } else {
+                terminal.appendChild(lineElement);
+                typeWriter(text, lineElement);
+            }
+        }
+        function toggleFullScreen() {
+            if (!document.fullscreenElement) {
+                document.documentElement.requestFullscreen();
+                addLine("Entering fullscreen mode...");
+            } else {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                    addLine("Exiting fullscreen mode...");
+                }
+            }
+        }
+        async function processCommand(command) {
+            addLine(command, true);
+            if (command.toLowerCase() === 'help') {
+                addLine("Available commands:");
+                addLine("- help: Show this help message");
+                addLine("- pip install <package>: Install a Python package");
+                addLine("- git clone <repo>: Clone a git repository");
+                addLine("- python <script>: Execute a Python script");
+                addLine("- download <url>: Download a file from the given URL");
+                addLine("- !<shell command>: Execute a shell command");
+                addLine("- clear: Clear the terminal screen");
+                addLine("- cs: Toggle fullscreen mode");
+            } else if (command.toLowerCase() === 'clear') {
+                terminal.innerHTML = '';
+            } else if (command.toLowerCase() === 'cs') {
+                toggleFullScreen();
+            } else {
+                try {
+                    const response = await fetch('/execute', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ command }),
+                    });
+                    const data = await response.json();
+                    addLine(data.output);
+                } catch (error) {
+                    addLine('Error executing command. Please try again.');
+                }
+            }
+        }
+        sendBtn.addEventListener('click', () => {
+            const command = userInput.value.trim();
+            if (command) {
+                processCommand(command);
+                userInput.value = '';
+            }
+        });
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendBtn.click();
+            }
+        });
+        // Initial messages
+        addLine("Welcome to the AI-Powered Terminal Chat!");
+        addLine("Type 'help' for available commands.");
+    </script>
+</body>
+</html>