| <!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> |
|
|
