|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>AI-Powered 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%; |
|
position: relative; |
|
z-index: 2; |
|
} |
|
.terminal { |
|
flex: 1; |
|
padding: 20px; |
|
overflow-y: auto; |
|
box-sizing: border-box; |
|
background-color: rgba(0, 0, 0, 0.7); |
|
border: 1px solid #0f0; |
|
box-shadow: 0 0 20px #0f0; |
|
} |
|
.file-explorer { |
|
width: 200px; |
|
background-color: rgba(17, 17, 17, 0.8); |
|
padding: 10px; |
|
overflow-y: auto; |
|
display: none; |
|
border-left: 1px solid #0f0; |
|
} |
|
#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, color 0.3s; |
|
} |
|
.file-item:hover { |
|
background-color: #0f0; |
|
color: #000; |
|
} |
|
#file-editor { |
|
display: none; |
|
position: fixed; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
width: 80%; |
|
height: 80%; |
|
background-color: rgba(17, 17, 17, 0.9); |
|
border: 1px solid #0f0; |
|
padding: 20px; |
|
box-shadow: 0 0 30px #0f0; |
|
z-index: 1000; |
|
} |
|
#editor-textarea { |
|
width: 100%; |
|
height: calc(100% - 40px); |
|
background-color: rgba(0, 0, 0, 0.8); |
|
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; |
|
transition: background-color 0.3s, color 0.3s; |
|
} |
|
#save-button:hover { |
|
background-color: #000; |
|
color: #0f0; |
|
} |
|
.ai-executed { |
|
color: #ff00ff; |
|
} |
|
@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; |
|
} |
|
#ai-background { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: 0; |
|
opacity: 0.2; |
|
pointer-events: none; |
|
} |
|
@keyframes codeFlow { |
|
0% { transform: translateY(-100%); } |
|
100% { transform: translateY(100%); } |
|
} |
|
.code-line { |
|
position: absolute; |
|
font-size: 14px; |
|
color: #0f0; |
|
white-space: nowrap; |
|
animation: codeFlow 20s linear infinite; |
|
text-shadow: 0 0 5px #0f0; |
|
} |
|
#ai-text { |
|
position: fixed; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
font-size: 200px; |
|
font-weight: bold; |
|
color: transparent; |
|
background: repeating-linear-gradient( |
|
0deg, |
|
#0f0 0%, |
|
#0fa 25%, |
|
#0f0 50%, |
|
#0fa 75%, |
|
#0f0 100% |
|
); |
|
background-size: 100% 200%; |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
animation: gradientFlow 10s linear infinite; |
|
z-index: 1; |
|
opacity: 0.2; |
|
pointer-events: none; |
|
} |
|
@keyframes gradientFlow { |
|
0% { background-position: 0 0; } |
|
100% { background-position: 0 -200%; } |
|
} |
|
#ai-sleep { |
|
position: fixed; |
|
top: 10%; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
font-size: 48px; |
|
color: #0f0; |
|
text-shadow: 0 0 10px #0f0, 0 0 20px #0f0; |
|
z-index: 2; |
|
pointer-events: none; |
|
} |
|
@keyframes float { |
|
0%, 100% { transform: translateY(0) translateX(-50%); } |
|
50% { transform: translateY(-20px) translateX(-50%); } |
|
} |
|
#ai-sleep span { |
|
display: inline-block; |
|
animation: float 2s ease-in-out infinite; |
|
} |
|
#ai-sleep span:nth-child(2) { animation-delay: 0.2s; } |
|
#ai-sleep span:nth-child(3) { animation-delay: 0.4s; } |
|
#ai-sleep span:nth-child(4) { animation-delay: 0.6s; } |
|
.particle { |
|
position: absolute; |
|
width: 5px; |
|
height: 5px; |
|
background-color: #0f0; |
|
border-radius: 50%; |
|
pointer-events: none; |
|
opacity: 0.5; |
|
} |
|
@keyframes particleFloat { |
|
0% { transform: translateY(0) rotate(0deg); opacity: 0.5; } |
|
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } |
|
} |
|
.hexagon { |
|
position: absolute; |
|
width: 100px; |
|
height: 57.74px; |
|
background-color: rgba(0, 255, 0, 0.1); |
|
margin: 28.87px 0; |
|
border-left: solid 2px #0f0; |
|
border-right: solid 2px #0f0; |
|
pointer-events: none; |
|
} |
|
.hexagon:before, |
|
.hexagon:after { |
|
content: ""; |
|
position: absolute; |
|
z-index: 1; |
|
width: 70.71px; |
|
height: 70.71px; |
|
transform: scaleY(0.5774) rotate(-45deg); |
|
background-color: inherit; |
|
left: 13.64px; |
|
} |
|
.hexagon:before { |
|
top: -35.3553px; |
|
border-top: solid 2.8284px #0f0; |
|
border-right: solid 2.8284px #0f0; |
|
} |
|
.hexagon:after { |
|
bottom: -35.3553px; |
|
border-bottom: solid 2.8284px #0f0; |
|
border-left: solid 2.8284px #0f0; |
|
} |
|
@keyframes hexRotate { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="ai-background"></div> |
|
<div id="ai-text">AI</div> |
|
<div id="ai-sleep" aria-live="polite"> |
|
<span>z</span><span>z</span><span>z</span><span>z</span> |
|
</div> |
|
<div class="container"> |
|
<div class="terminal"> |
|
<div id="output"></div> |
|
<div id="input-line"> |
|
<span id="prompt" class="glitch">></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> |
|
<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'); |
|
const aiBackground = document.getElementById('ai-background'); |
|
const aiSleep = document.getElementById('ai-sleep'); |
|
|
|
let currentEditingFile = ''; |
|
let isFirstInteraction = true; |
|
|
|
function addToOutput(text, isAiExecuted = false) { |
|
if (isAiExecuted) { |
|
outputDiv.innerHTML += `<span class="ai-executed">${text}</span>\n`; |
|
} else { |
|
outputDiv.innerHTML += text + '\n'; |
|
} |
|
outputDiv.scrollTop = outputDiv.scrollHeight; |
|
} |
|
|
|
function executeCode() { |
|
if (isFirstInteraction) { |
|
aiSleep.style.display = 'none'; |
|
isFirstInteraction = false; |
|
} |
|
|
|
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 => { |
|
if (data.result.startsWith("AI Executed:")) { |
|
addToOutput(data.result, true); |
|
} else { |
|
addToOutput(data.result); |
|
} |
|
if (data.action === "edit") { |
|
currentEditingFile = data.filename; |
|
editorTextarea.value = ''; |
|
fileEditor.style.display = 'block'; |
|
} else { |
|
updateFileList(); |
|
} |
|
}) |
|
.catch(error => { |
|
addToOutput(`Error: ${error}`); |
|
}); |
|
|
|
codeInput.value = ''; |
|
createParticles(10); |
|
} |
|
|
|
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(); |
|
}); |
|
} |
|
|
|
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(); |
|
} |
|
}); |
|
|
|
window.addEventListener('load', updateFileList); |
|
window.addEventListener('beforeunload', cleanup); |
|
|
|
|
|
const codeSnippets = [ |
|
"def ai_function():", |
|
" return 'Hello, World!'", |
|
"class AIAssistant:", |
|
" def __init__(self):", |
|
" self.knowledge = []", |
|
"import tensorflow as tf", |
|
"model = tf.keras.Sequential()", |
|
"x = np.array([1, 2, 3, 4])", |
|
"y = x * 2 + 1", |
|
"plt.plot(x, y, 'r-')", |
|
"for i in range(100):", |
|
" train(model, data[i])" |
|
]; |
|
|
|
function createCodeLine() { |
|
const codeLine = document.createElement('div'); |
|
codeLine.className = 'code-line'; |
|
codeLine.style.left = `${Math.random() * 100}%`; |
|
codeLine.style.animationDuration = `${15 + Math.random() * 10}s`; |
|
codeLine.textContent = codeSnippets[Math.floor(Math.random() * codeSnippets.length)]; |
|
aiBackground.appendChild(codeLine); |
|
|
|
codeLine.addEventListener('animationiteration', () => { |
|
codeLine.style.left = `${Math.random() * 100}%`; |
|
codeLine.textContent = codeSnippets[Math.floor(Math.random() * codeSnippets.length)]; |
|
}); |
|
} |
|
|
|
for (let i = 0; i < 20; i++) { |
|
createCodeLine(); |
|
} |
|
|
|
function createParticles(num) { |
|
for (let i = 0; i < num; i++) { |
|
const particle = document.createElement('div'); |
|
particle.className = 'particle'; |
|
particle.style.left = `${Math.random() * 100}%`; |
|
particle.style.top = `${Math.random() * 100}%`; |
|
particle.style.animation = `particleFloat ${2 + Math.random() * 3}s linear forwards`; |
|
document.body.appendChild(particle); |
|
setTimeout(() => particle.remove(), 5000); |
|
} |
|
} |
|
|
|
function createHexagon() { |
|
const hexagon = document.createElement('div'); |
|
hexagon.className = 'hexagon'; |
|
hexagon.style.left = `${Math.random() * 100}%`; |
|
hexagon.style.top = `${Math.random() * 100}%`; |
|
hexagon.style.animation = `hexRotate ${10 + Math.random() * 10}s linear infinite`; |
|
document.body.appendChild(hexagon); |
|
} |
|
|
|
for (let i = 0; i < 5; i++) { |
|
createHexagon(); |
|
} |
|
|
|
|
|
addToOutput("Welcome to the AI-Powered Hacker's Python Terminal. Type your commands below."); |
|
addToOutput("Available commands:"); |
|
addToOutput("- AI: <your request>: Use AI to understand and execute your command"); |
|
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"); |
|
addToOutput("- AI can now create and edit files. Try 'AI: create a new file named example.py with a simple calculator function'"); |
|
</script> |
|
</body> |
|
</html> |
|
|
|
|
