| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>VPS KW Panel</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg: #f7f8fa; |
| --card: #ffffff; |
| --accent: #3b82f6; |
| --text: #1e293b; |
| --muted: #94a3b8; |
| --border: #e2e8f0; |
| } |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--bg); |
| color: var(--text); |
| margin: 0; |
| padding: 0; |
| } |
| header { |
| text-align: center; |
| padding: 1.2rem; |
| font-size: 1.4rem; |
| font-weight: 600; |
| background-color: #ffffff; |
| box-shadow: 0 2px 4px rgba(0,0,0,0.05); |
| } |
| nav { |
| display: flex; |
| justify-content: center; |
| gap: 1rem; |
| background-color: #ffffff; |
| padding: 0.8rem; |
| border-bottom: 1px solid var(--border); |
| } |
| nav button { |
| background: none; |
| border: none; |
| font-weight: 600; |
| color: var(--muted); |
| padding: 0.5rem 1rem; |
| border-radius: 0.5rem; |
| transition: all 0.2s ease; |
| cursor: pointer; |
| } |
| nav button.active, |
| nav button:hover { |
| background-color: var(--accent); |
| color: white; |
| } |
| .tab { |
| display: none; |
| max-width: 600px; |
| margin: 2rem auto; |
| padding: 1rem; |
| background: var(--card); |
| border-radius: 12px; |
| box-shadow: 0 4px 10px rgba(0,0,0,0.03); |
| } |
| .tab.active { |
| display: block; |
| } |
| input, textarea, button { |
| width: 100%; |
| padding: 0.75rem; |
| margin: 0.5rem 0; |
| font-size: 1rem; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| transition: 0.2s; |
| } |
| input:focus, textarea:focus { |
| outline: none; |
| border-color: var(--accent); |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); |
| } |
| button { |
| background-color: var(--accent); |
| color: white; |
| font-weight: 600; |
| border: none; |
| cursor: pointer; |
| } |
| button:hover { |
| background-color: #2563eb; |
| } |
| .console-box { |
| background: #0f172a; |
| color: #38bdf8; |
| font-family: monospace; |
| padding: 1rem; |
| border-radius: 8px; |
| height: 200px; |
| overflow-y: auto; |
| white-space: pre-wrap; |
| } |
| .file-entry { |
| display: flex; |
| justify-content: space-between; |
| background: #f1f5f9; |
| border: 1px solid #e2e8f0; |
| padding: 0.5rem; |
| margin: 0.25rem 0; |
| border-radius: 6px; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <header>VPS KW Panel</header> |
|
|
| <nav> |
| <button onclick="showTab('setup')" id="tab-setup" class="active">Setup</button> |
| <button onclick="showTab('console')" id="tab-console">Console</button> |
| <button onclick="showTab('filemanager')" id="tab-filemanager">File Manager</button> |
| </nav> |
|
|
| <div id="setup" class="tab active"> |
| <h2>Setup</h2> |
| <input id="username" placeholder="Username"> |
| <input id="password" type="password" placeholder="Password"> |
| <input id="filename" placeholder="Start command (e.g. python main.py)"> |
| <button onclick="saveSetup()">Save</button> |
| </div> |
|
|
| <div id="console" class="tab"> |
| <h2>Console</h2> |
| <div class="console-box" id="output">Output will appear here...</div> |
| <input id="consoleInput" placeholder="Your input here..."> |
| <button onclick="sendInput()">Send</button> |
| <button onclick="startConsole()">Start</button> |
| <button onclick="stopConsole()">Stop</button> |
| </div> |
|
|
| <div id="filemanager" class="tab"> |
| <h2>File Manager</h2> |
| <input type="file" id="uploadFile" /> |
| <button onclick="uploadFile()">Upload</button> |
| <input id="newName" placeholder="New file or folder name"> |
| <button onclick="createFile()">Create File</button> |
| <button onclick="createFolder()">Create Folder</button> |
| <div id="fileList"> |
| |
| </div> |
| </div> |
|
|
| <script> |
| function showTab(id) { |
| document.querySelectorAll(".tab").forEach(tab => tab.classList.remove("active")); |
| document.querySelectorAll("nav button").forEach(btn => btn.classList.remove("active")); |
| document.getElementById(id).classList.add("active"); |
| document.getElementById("tab-" + id).classList.add("active"); |
| |
| if (id === "filemanager") refreshFileList(); |
| } |
| |
| function saveSetup() { |
| const data = { |
| username: document.getElementById("username").value, |
| password: document.getElementById("password").value, |
| startcmd: document.getElementById("startcmd").value |
| }; |
| |
| fetch("/setup", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify(data) |
| }).then(res => res.json()) |
| .then(res => alert("Saved!")) |
| .catch(err => alert("Error saving setup.")); |
| } |
| |
| function startConsole() { |
| const filename = document.getElementById("filename").value; |
| if (!filename) { |
| document.getElementById("output").textContent += ">>> No file selected.\n"; |
| return; |
| } |
| |
| fetch("/run", { |
| method: "POST", |
| headers: { |
| "Content-Type": "application/json" |
| }, |
| body: JSON.stringify({ filename: filename }) |
| }) |
| .then(res => res.json()) |
| .then(data => { |
| document.getElementById("output").textContent += `>>> Console started\n${data.output}\n`; |
| }) |
| .catch(err => { |
| document.getElementById("output").textContent += `>>> Error: ${err}\n`; |
| }); |
| } |
| |
| function stopConsole() { |
| fetch("/console/stop", { method: "POST" }) |
| .then(res => res.json()) |
| .then(data => { |
| document.getElementById("output").textContent += ">>> Console stopped\n"; |
| }); |
| } |
| |
| function sendInput() { |
| const input = document.getElementById("consoleInput").value; |
| fetch("/console/input", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ input }) |
| }) |
| .then(res => res.json()) |
| .then(data => { |
| document.getElementById("output").textContent += data.output + "\n"; |
| document.getElementById("consoleInput").value = ""; |
| }); |
| } |
| |
| function refreshFileList() { |
| fetch("/files") |
| .then(res => res.json()) |
| .then(files => { |
| const list = document.getElementById("fileList"); |
| list.innerHTML = ""; |
| files.forEach(name => { |
| const entry = document.createElement("div"); |
| entry.className = "file-entry"; |
| entry.textContent = name; |
| list.appendChild(entry); |
| }); |
| }); |
| } |
| |
| function createFile() { |
| const name = prompt("File name:"); |
| if (!name) return; |
| fetch("/file/create", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ name }) |
| }).then(() => refreshFileList()); |
| } |
| |
| function createFolder() { |
| const name = prompt("Folder name:"); |
| if (!name) return; |
| fetch("/folder/create", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ name }) |
| }).then(() => refreshFileList()); |
| } |
| |
| function deleteItem() { |
| const name = prompt("File/Folder name to delete:"); |
| if (!name) return; |
| fetch("/delete", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ name }) |
| }).then(() => refreshFileList()); |
| } |
| |
| function renameItem() { |
| const oldName = prompt("Old name:"); |
| const newName = prompt("New name:"); |
| if (!oldName || !newName) return; |
| fetch("/rename", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ old_name: oldName, new_name: newName }) |
| }).then(() => refreshFileList()); |
| } |
| |
| function uploadFile() { |
| const fileInput = document.getElementById("uploadFile"); |
| const file = fileInput.files[0]; |
| if (!file) return; |
| const formData = new FormData(); |
| formData.append("file", file); |
| |
| fetch("/upload", { |
| method: "POST", |
| body: formData |
| }).then(() => { |
| alert("Uploaded!"); |
| refreshFileList(); |
| fileInput.value = ""; |
| }); |
| } |
| |
| window.onload = () => { |
| refreshFileList(); |
| }; |
| </script> |
| </body> |
| </html> |
