| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Bot Dashboard</title> |
| <style> |
| body { |
| font-family: "Helvetica Neue", Arial, sans-serif; |
| background-color: #D3F2C2; |
| } |
| |
| .navbar { |
| background-color: #34A853; |
| color: white; |
| padding: 12px 30px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .navbar h1 { |
| margin: 0; |
| font-size: 28px; |
| } |
| |
| .dashboard { |
| background-color: white; |
| margin: 2em auto; |
| padding: 2em; |
| border-radius: 10px; |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| width: 90%; |
| max-width: 600px; |
| } |
| |
| .dashboard h2 { |
| color: #333; |
| margin-bottom: 15px; |
| } |
| |
| .dashboard .stat { |
| padding: 20px; |
| background-color: #edf4ed; |
| margin-bottom: 20px; |
| border-radius: 10px; |
| } |
| |
| .dashboard .stat:last-child { |
| margin-bottom: 0; |
| } |
| |
| button { |
| background-color: #34A853; |
| color: white; |
| border: none; |
| padding: 12px 25px; |
| margin: 10px 0; |
| cursor: pointer; |
| font-size: 16px; |
| border-radius: 20px; |
| } |
| |
| button:hover { |
| background-color: #2C7A4B; |
| } |
| </style> |
| <script |
| src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.min.js"></script> |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const socket = io(); |
| |
| fetch('/dashboard') |
| .then(response => response.json()) |
| .then(data => { |
| document.getElementById('bot-name').textContent = data.botName; |
| document.getElementById('fca').textContent = data.fca; |
| document.getElementById('bot-uid').textContent = data.botUid; |
| document.getElementById('owner-name').textContent = data.ownerName; |
| document.getElementById('bot-prefix').textContent = data.prefix; |
| document.getElementById('commands-count').textContent = data.commandsCount; |
| document.getElementById('events-count').textContent = data.eventsCount; |
| document.getElementById('bot-uptime').textContent = new Date(data.uptime).toISOString().substr(11, 8); |
| }) |
| .catch(error => console.error('Error fetching dashboard data:', error)); |
| |
| socket.on('real-time-data', data => { |
| document.getElementById('bot-uptime').textContent = new Date(data.uptime).toISOString().substr(11, 8); |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <div class="navbar"> |
| <h1>Bot Dashboard</h1> |
| </div> |
| <div class="dashboard"> |
| <div class="stat"> |
| <h2>Bot Information</h2> |
| Name: <span id="bot-name">Loading...</span><br> |
| UID: <span id="bot-uid">Loading...</span><br> |
| Owner: <span id="owner-name">Loading...</span><br> |
| Prefix: <span id="bot-prefix">Loading...</span><br> |
| FCA Module: <span id="fca">Loading....</span> |
| </div> |
| <div class="stat"> |
| <h2>Statistics</h2> |
| Commands Count: <span id="commands-count">Loading...</span><br> |
| Events Count: <span id="events-count">Loading...</span> |
| </div> |
| <div class="stat"> |
| <h2>Status</h2> |
| Uptime: <span id="bot-uptime">Loading...</span> |
| </div> |
| <button onclick="location.href='/dashboard/refresh'">Refresh</button> |
| </div> |
| </body> |
| </html> |
