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