Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PC Dashboard</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto p-4"> | |
| <h1 class="text-3xl font-bold mb-6">PC System Dashboard</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- CPU Usage --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">CPU Usage</h2> | |
| <div class="h-64"> | |
| <canvas id="cpuChart"></canvas> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-100 p-3 rounded"> | |
| <p class="text-sm text-gray-600">Cores</p> | |
| <p class="text-xl font-bold" id="cpuCores">Loading...</p> | |
| </div> | |
| <div class="bg-gray-100 p-3 rounded"> | |
| <p class="text-sm text-gray-600">Speed</p> | |
| <p class="text-xl font-bold" id="cpuSpeed">Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Memory Usage --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Memory Usage</h2> | |
| <div class="h-64"> | |
| <canvas id="memoryChart"></canvas> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-100 p-3 rounded"> | |
| <p class="text-sm text-gray-600">Total</p> | |
| <p class="text-xl font-bold" id="memTotal">Loading...</p> | |
| </div> | |
| <div class="bg-gray-100 p-3 rounded"> | |
| <p class="text-sm text-gray-600">Used</p> | |
| <p class="text-xl font-bold" id="memUsed">Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Disk Usage --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Disk Usage</h2> | |
| <div class="h-64"> | |
| <canvas id="diskChart"></canvas> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-100 p-3 rounded"> | |
| <p class="text-sm text-gray-600">Total</p> | |
| <p class="text-xl font-bold" id="diskTotal">Loading...</p> | |
| </div> | |
| <div class="bg-gray-100 p-3 rounded"> | |
| <p class="text-sm text-gray-600">Free</p> | |
| <p class="text-xl font-bold" id="diskFree">Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Network --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Network</h2> | |
| <div class="h-64"> | |
| <canvas id="networkChart"></canvas> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-100 p-3 rounded"> | |
| <p class="text-sm text-gray-600">Upload</p> | |
| <p class="text-xl font-bold" id="networkUp">Loading...</p> | |
| </div> | |
| <div class="bg-gray-100 p-3 rounded"> | |
| <p class="text-sm text-gray-600">Download</p> | |
| <p class="text-xl font-bold" id="networkDown">Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Info --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">System Information</h2> | |
| <div class="space-y-3"> | |
| <div> | |
| <p class="text-sm text-gray-600">OS</p> | |
| <p class="text-lg" id="osInfo">Loading...</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Browser</p> | |
| <p class="text-lg" id="browserInfo">Loading...</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Resolution</p> | |
| <p class="text-lg" id="resolutionInfo">Loading...</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">Uptime</p> | |
| <p class="text-lg" id="uptimeInfo">Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Processes --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Running Processes</h2> | |
| <div class="h-64 overflow-y-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-2">Process</th> | |
| <th class="text-right py-2">CPU %</th> | |
| <th class="text-right py-2">Memory</th> | |
| </tr> | |
| </thead> | |
| <tbody id="processList"> | |
| <tr><td colspan="3" class="py-4 text-center">Loading...</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="dashboard.js"></script> | |
| </body> | |
| </html> |