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