| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Bot Control Panel CC</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script defer src="https://unpkg.com/alpinejs@3.10.2/dist/cdn.min.js"></script> |
| | <style> |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(10px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | .fade-in { animation: fadeIn 0.5s ease-out; } |
| | |
| | @keyframes fadeOut { |
| | from { opacity: 1; transform: scale(1); } |
| | to { opacity: 0; transform: scale(0); } |
| | } |
| | .fade-out { animation: fadeOut 0.5s ease-out forwards; } |
| | |
| | @keyframes spin { |
| | 100% { transform: rotate(360deg); } |
| | } |
| | .loading-circle { |
| | border: 4px solid rgba(255, 255, 255, 0.3); |
| | border-top-color: white; |
| | border-radius: 50%; |
| | width: 40px; |
| | height: 40px; |
| | animation: spin 1s linear infinite; |
| | } |
| | |
| | .popup { |
| | position: fixed; |
| | bottom: 20px; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | background-color: rgba(0, 0, 0, 0.8); |
| | color: white; |
| | padding: 12px 20px; |
| | border-radius: 8px; |
| | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
| | opacity: 0; |
| | transition: opacity 0.5s ease-out; |
| | } |
| | .popup.show { opacity: 1; } |
| | |
| | #ping { |
| | position: fixed; |
| | bottom: 10px; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | font-size: 14px; |
| | color: rgba(255, 255, 255, 0.6); |
| | font-weight: 500; |
| | font-style: italic; |
| | pointer-events: none; |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-900 text-white flex flex-col items-center justify-center min-h-screen p-6"> |
| |
|
| | <div class="w-full max-w-3xl space-y-6 fade-in"> |
| | <h1 class="text-3xl font-bold text-center">Bot Control Panel</h1> |
| |
|
| | <div class="bg-gray-800 p-6 rounded-lg shadow-lg"> |
| | <label class="block text-lg font-medium mb-2">Paste JSON:</label> |
| | <textarea id="jsonInput" class="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:ring focus:ring-blue-500 transition" rows="6" placeholder="Paste JSON here..."></textarea> |
| | <button onclick="askPasscode('updateAppState')" class="mt-4 w-full bg-blue-600 hover:bg-blue-700 transition px-4 py-2 rounded-lg font-semibold shadow-lg">Proceed</button> |
| | </div> |
| |
|
| | <div class="bg-gray-800 p-6 rounded-lg shadow-lg fade-in"> |
| | <button onclick="askPasscode('restartBot')" class="w-full bg-red-600 hover:bg-red-700 transition px-4 py-2 rounded-lg font-semibold shadow-lg">Restart Bot</button> |
| | </div> |
| |
|
| | <div class="bg-gray-800 p-6 rounded-lg shadow-lg fade-in"> |
| | <label class="block text-lg font-medium mb-2">Execute Command:</label> |
| | <input type="text" id="commandInput" class="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:ring focus:ring-blue-500 transition" placeholder="Enter a command..."> |
| | <button onclick="askPasscode('executeCommand')" class="mt-4 w-full bg-yellow-600 hover:bg-yellow-700 transition px-4 py-2 rounded-lg font-semibold shadow-lg">Execute</button> |
| | </div> |
| |
|
| | </div> |
| |
|
| | <div id="ping" class="fade-in">Ping: <span id="pingValue">Loading...</span></div> |
| |
|
| | <div id="loading" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden"> |
| | <div class="loading-circle"></div> |
| | </div> |
| |
|
| | <div id="popupNotification" class="popup"></div> |
| |
|
| | <script> |
| | function showPopup(message) { |
| | const popup = document.getElementById("popupNotification"); |
| | popup.textContent = message; |
| | popup.classList.add("show"); |
| | setTimeout(() => popup.classList.remove("show"), 3000); |
| | } |
| | |
| | function askPasscode(action) { |
| | const passcode = prompt("Enter Passcode:"); |
| | if (!passcode) { |
| | showPopup("Passcode is required."); |
| | return; |
| | } |
| | window[action](passcode); |
| | } |
| | |
| | function updateAppState(passcode) { |
| | const jsonInput = document.getElementById("jsonInput").value; |
| | |
| | try { |
| | JSON.parse(jsonInput); |
| | } catch { |
| | showPopup("Invalid JSON format."); |
| | return; |
| | } |
| | |
| | document.getElementById("loading").classList.remove("hidden"); |
| | |
| | fetch("/update-appstate", { |
| | method: "POST", |
| | headers: { "Content-Type": "application/json" }, |
| | body: JSON.stringify({ passcode, jsonData: JSON.parse(jsonInput) }) |
| | }).then(res => res.text()).then(message => { |
| | document.getElementById("loading").classList.add("hidden"); |
| | showPopup(message); |
| | }).catch(() => { |
| | document.getElementById("loading").classList.add("hidden"); |
| | showPopup("Error updating AppState."); |
| | }); |
| | } |
| | |
| | function restartBot(passcode) { |
| | document.getElementById("loading").classList.remove("hidden"); |
| | |
| | fetch(`/restart?passcode=${encodeURIComponent(passcode)}`) |
| | .then(res => res.text()) |
| | .then(message => { |
| | document.getElementById("loading").classList.add("hidden"); |
| | showPopup(message); |
| | }) |
| | .catch(() => { |
| | document.getElementById("loading").classList.add("hidden"); |
| | showPopup("Error restarting bot."); |
| | }); |
| | } |
| | |
| | function executeCommand(passcode) { |
| | const commandInput = document.getElementById("commandInput").value; |
| | if (!commandInput) { |
| | showPopup("Please enter a command."); |
| | return; |
| | } |
| | |
| | document.getElementById("loading").classList.remove("hidden"); |
| | |
| | fetch("/execute-command", { |
| | method: "POST", |
| | headers: { "Content-Type": "application/json" }, |
| | body: JSON.stringify({ passcode, command: commandInput }) |
| | }).then(res => res.text()).then(output => { |
| | document.getElementById("loading").classList.add("hidden"); |
| | showPopup(output); |
| | }).catch(() => { |
| | document.getElementById("loading").classList.add("hidden"); |
| | showPopup("Error executing command."); |
| | }); |
| | } |
| | |
| | function updatePing() { |
| | fetch("/ping") |
| | .then(res => res.json()) |
| | .then(data => { |
| | document.getElementById("pingValue").textContent = data.ping + " ms"; |
| | }) |
| | .catch(() => { |
| | document.getElementById("pingValue").textContent = "Error"; |
| | }); |
| | } |
| | |
| | setInterval(updatePing, 5000); |
| | updatePing(); |
| | </script> |
| | </body> |
| | </html> |
