|
<!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(); |
|
} |
|
}); |
|
|
|
|
|
addLine("Welcome to the AI-Powered Terminal Chat!"); |
|
addLine("Type 'help' for available commands."); |
|
</script> |
|
</body> |
|
</html> |
