|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<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; |
|
display: none; |
|
} |
|
#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; |
|
} |
|
#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, |
|
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">></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'); |
|
|
|
let currentEditingFile = ''; |
|
|
|
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); |
|
if (data.action === "edit") { |
|
currentEditingFile = data.filename; |
|
editorTextarea.value = ''; |
|
fileEditor.style.display = 'block'; |
|
} else { |
|
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(); |
|
}); |
|
} |
|
|
|
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); |
|
|
|
|
|
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> |
