| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>VPC - Virtual Private Console 😩💕</title> |
| | <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script> |
| | <script src="https://cdn.socket.io/4.3.2/socket.io.min.js"></script> |
| | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" /> |
| | <style> |
| | body { background: #111; color: white; margin: 0; display: flex; flex-direction: column; height: 100vh; } |
| | #terminal { flex-grow: 1; padding: 10px; } |
| | #upload-btn { padding: 10px; background: hotpink; border: none; color: white; cursor: pointer; } |
| | </style> |
| | </head> |
| | <body> |
| | <div id="terminal"></div> |
| | <input type="file" id="fileInput" style="display:none"> |
| | <button id="upload-btn">📁 Upload File</button> |
| |
|
| | <script> |
| | const term = new Terminal(); |
| | const socket = io(); |
| | term.open(document.getElementById('terminal')); |
| | |
| | term.onData(data => socket.emit('input', data)); |
| | socket.on('output', data => term.write(data)); |
| | |
| | const uploadBtn = document.getElementById("upload-btn"); |
| | const fileInput = document.getElementById("fileInput"); |
| | |
| | uploadBtn.onclick = () => fileInput.click(); |
| | |
| | fileInput.onchange = () => { |
| | const file = fileInput.files[0]; |
| | const formData = new FormData(); |
| | formData.append("file", file); |
| | |
| | fetch("/upload", { |
| | method: "POST", |
| | body: formData |
| | }) |
| | .then(res => res.json()) |
| | .then(data => { |
| | term.writeln(`\r\n[Uploaded: ${data.path}]\r\n`); |
| | }); |
| | }; |
| | </script> |
| | </body> |
| | </html> |
| |
|
