make new website that make a minecraft server for java and bedrock . make the real time database and and also include the log-in, sig-in and sign-up pages . Add spigot and other server files and make server by using these files and give the interface where the user can adjust their server`s properties and also include the console panel where the user can used commands for other tasks like bane the players and give operater access to the user. make the backend that handles the tasks like watching the website`s traffic , health and also secure the website from hackers and server`s attack . make another sperate page for only the admin of this website and all the information like how many users signing , loging and other related information . Makes the several logics for best handling the network like connecting the users with admin and takes comments and reply and ensure servers connections with the users. Add the service of special server for 25 players in 10$ , add the payment methods.
b25c766 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Dashboard - CraftyHost</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h1 class="text-2xl md:text-3xl font-bold">Admin Dashboard</h1> | |
| <div class="text-sm text-gray-400"> | |
| Last updated: <span id="last-updated">Just now</span> | |
| </div> | |
| </div> | |
| <!-- Stats Overview --> | |
| <div class="grid md:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Total Users</p> | |
| <p class="text-3xl font-bold">1,284</p> | |
| </div> | |
| <i data-feather="users" class="w-10 h-10 text-blue-500"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-green-500 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| +12.5% from last month | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Active Servers</p> | |
| <p class="text-3xl font-bold">892</p> | |
| </div> | |
| <i data-feather="server" class="w-10 h-10 text-emerald-500"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-green-500 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| +8.3% from last month | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Monthly Revenue</p> | |
| <p class="text-3xl font-bold">$12,845</p> | |
| </div> | |
| <i data-feather="dollar-sign" class="w-10 h-10 text-purple-500"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-green-500 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| +5.2% from last month | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Support Tickets</p> | |
| <p class="text-3xl font-bold">24</p> | |
| </div> | |
| <i data-feather="mail" class="w-10 h-10 text-yellow-500"></i> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-sm text-red-500 flex items-center"> | |
| <i data-feather="trending-down" class="w-4 h-4 mr-1"></i> | |
| -3 from yesterday | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts --> | |
| <div class="grid md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h2 class="text-xl font-semibold mb-4">User Growth</h2> | |
| <canvas id="user-growth-chart" height="250"></canvas> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Revenue Breakdown</h2> | |
| <canvas id="revenue-chart" height="250"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-gray-800 rounded-xl p-6 mb-8"> | |
| <h2 class="text-xl font-semibold mb-4">Recent Activity</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-gray-400 border-b border-gray-700"> | |
| <th class="pb-2 pl-2">Time</th> | |
| <th class="pb-2">User</th> | |
| <th class="pb-2">Action</th> | |
| <th class="pb-2 pr-2">Details</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-700 hover:bg-gray-700/50"> | |
| <td class="py-3 pl-2">2 min ago</td> | |
| <td>user123</td> | |
| <td>Created server</td> | |
| <td class="pr-2">Premium Plan (25 slots)</td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-700/50"> | |
| <td class="py-3 pl-2">15 min ago</td> | |
| <td>mcplayer99</td> | |
| <td>Renewed subscription</td> | |
| <td class="pr-2">Pro Plan (50 slots)</td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-700/50"> | |
| <td class="py-3 pl-2">32 min ago</td> | |
| <td>admin</td> | |
| <td>Resolved ticket</td> | |
| <td class="pr-2">#TKT-1245 (Plugin issue)</td> | |
| </tr> | |
| <tr class="border-b border-gray-700 hover:bg-gray-700/50"> | |
| <td class="py-3 pl-2">1 hour ago</td> | |
| <td>builderman</td> | |
| <td>Uploaded plugin</td> | |
| <td class="pr-2">WorldEdit v7.2.12</td> | |
| </tr> | |
| <tr class="hover:bg-gray-700/50"> | |
| <td class="py-3 pl-2">2 hours ago</td> | |
| <td>serveradmin</td> | |
| <td>Restarted server</td> | |
| <td class="pr-2">Server ID: SRV-4892</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- System Health --> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h2 class="text-xl font-semibold mb-4">System Health</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-medium mb-3">Node 1</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>CPU Usage</span> | |
| <span>42%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Memory</span> | |
| <span>64GB / 128GB</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Storage</span> | |
| <span>4.2TB / 10TB</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-emerald-500 h-2 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-3">Node 2</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>CPU Usage</span> | |
| <span>38%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 38%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Memory</span> | |
| <span>58GB / 128GB</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Storage</span> | |
| <span>3.8TB / 10TB</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-emerald-500 h-2 rounded-full" style="width: 38%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-3">Node 3</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>CPU Usage</span> | |
| <span>29%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 29%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Memory</span> | |
| <span>42GB / 128GB</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 33%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Storage</span> | |
| <span>3.1TB / 10TB</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-emerald-500 h-2 rounded-full" style="width: 31%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // User Growth Chart | |
| const userGrowthCtx = document.getElementById('user-growth-chart').getContext('2d'); | |
| new Chart(userGrowthCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], | |
| datasets: [{ | |
| label: 'Total Users', | |
| data: [850, 920, 1000, 1050, 1120, 1200, 1284], | |
| borderColor: '#3b82f6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| borderWidth: 2, | |
| tension: 0.3, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Revenue Chart | |
| const revenueCtx = document.getElementById('revenue-chart').getContext('2d'); | |
| new Chart(revenueCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Starter ($5)', 'Premium ($10)', 'Pro ($20)'], | |
| datasets: [{ | |
| data: [3200, 6500, 3145], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.8)', | |
| 'rgba(16, 185, 129, 0.8)', | |
| 'rgba(139, 92, 246, 0.8)' | |
| ], | |
| borderColor: [ | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(139, 92, 246, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| } | |
| } | |
| } | |
| }); | |
| // Update last updated time | |
| setInterval(() => { | |
| document.getElementById('last-updated').textContent = 'Just now'; | |
| }, 60000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |