Spaces:

GummyBall
/

backend-bananza

Running

App Files Files Community

GummyBall commited on Dec 26, 2025

Commit

2175e6d

verified ·

1 Parent(s): d9aa0de

make me a frontend system for my pc

Browse files

Files changed (5) hide show

components/navbar.js +2 -2
dashboard.html +138 -0
dashboard.js +181 -0
index.html +0 -2
style.css +11 -2

components/navbar.js CHANGED Viewed

@@ -34,11 +34,11 @@ class CustomNavbar extends HTMLElement {
         <div class="logo">Backend Bananza 🎪</div>
         <div class="nav-links">
           <a href="/">Home</a>
           <a href="#">API Docs</a>
-          <a href="#">Dashboard</a>
           <a href="#">Login</a>
         </div>
-      </nav>
     `;
   }
 }

         <div class="logo">Backend Bananza 🎪</div>
         <div class="nav-links">
           <a href="/">Home</a>
+          <a href="/dashboard.html">Dashboard</a>
           <a href="#">API Docs</a>
           <a href="#">Login</a>
         </div>
+</nav>
     `;
   }
 }

dashboard.html ADDED Viewed

	@@ -0,0 +1,138 @@

+<!DOCTYPE html>
+<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>

dashboard.js ADDED Viewed

	@@ -0,0 +1,181 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize charts
+    const cpuCtx = document.getElementById('cpuChart').getContext('2d');
+    const memoryCtx = document.getElementById('memoryChart').getContext('2d');
+    const diskCtx = document.getElementById('diskChart').getContext('2d');
+    const networkCtx = document.getElementById('networkChart').getContext('2d');
+    const cpuChart = new Chart(cpuCtx, {
+        type: 'line',
+        data: {
+            labels: Array(30).fill(''),
+            datasets: [{
+                label: 'CPU Usage %',
+                data: [],
+                borderColor: 'rgb(75, 192, 192)',
+                tension: 0.1,
+                fill: true
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    max: 100
+                }
+            }
+        }
+    });
+    const memoryChart = new Chart(memoryCtx, {
+        type: 'doughnut',
+        data: {
+            labels: ['Used', 'Free'],
+            datasets: [{
+                data: [0, 100],
+                backgroundColor: [
+                    'rgb(255, 99, 132)',
+                    'rgb(54, 162, 235)'
+                ]
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false
+        }
+    });
+    const diskChart = new Chart(diskCtx, {
+        type: 'doughnut',
+        data: {
+            labels: ['Used', 'Free'],
+            datasets: [{
+                data: [0, 100],
+                backgroundColor: [
+                    'rgb(255, 159, 64)',
+                    'rgb(75, 192, 192)'
+                ]
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false
+        }
+    });
+    const networkChart = new Chart(networkCtx, {
+        type: 'line',
+        data: {
+            labels: Array(30).fill(''),
+            datasets: [
+                {
+                    label: 'Download (KB/s)',
+                    data: [],
+                    borderColor: 'rgb(54, 162, 235)',
+                    tension: 0.1
+                },
+                {
+                    label: 'Upload (KB/s)',
+                    data: [],
+                    borderColor: 'rgb(255, 99, 132)',
+                    tension: 0.1
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false
+        }
+    });
+    // System information
+    document.getElementById('osInfo').textContent = `${navigator.platform}`;
+    document.getElementById('browserInfo').textContent = `${navigator.userAgent.split(') ')[0].split('(')[1]}`;
+    document.getElementById('resolutionInfo').textContent = `${window.screen.width}x${window.screen.height}`;
+    // Simulate data updates (in a real app, you'd use WebSocket or API)
+    function updateSystemData() {
+        // CPU
+        const cpuUsage = Math.min(100, Math.max(0, Math.random() * 30 + 50));
+        updateChartData(cpuChart, cpuUsage);
+        document.getElementById('cpuCores').textContent = navigator.hardwareConcurrency || 'N/A';
+        document.getElementById('cpuSpeed').textContent = `${(Math.random() * 2 + 2).toFixed(2)} GHz`;
+        // Memory
+        const memUsed = Math.random() * 8 + 4;
+        const memTotal = 16;
+        const memFree = memTotal - memUsed;
+        memoryChart.data.datasets[0].data = [memUsed, memFree];
+        memoryChart.update();
+        document.getElementById('memTotal').textContent = `${memTotal} GB`;
+        document.getElementById('memUsed').textContent = `${memUsed.toFixed(2)} GB`;
+        // Disk
+        const diskUsed = Math.random() * 200 + 100;
+        const diskTotal = 500;
+        const diskFree = diskTotal - diskUsed;
+        diskChart.data.datasets[0].data = [diskUsed, diskFree];
+        diskChart.update();
+        document.getElementById('diskTotal').textContent = `${diskTotal} GB`;
+        document.getElementById('diskFree').textContent = `${diskFree.toFixed(2)} GB`;
+        // Network
+        const download = Math.random() * 500 + 100;
+        const upload = Math.random() * 200 + 50;
+        updateChartData(networkChart, download, upload);
+        document.getElementById('networkDown').textContent = `${download.toFixed(2)} KB/s`;
+        document.getElementById('networkUp').textContent = `${upload.toFixed(2)} KB/s`;
+        // Processes
+        updateProcessList();
+        // Uptime
+        const uptime = Math.floor(Math.random() * 86400) + 3600;
+        document.getElementById('uptimeInfo').textContent = formatUptime(uptime);
+    }
+    function updateChartData(chart, ...newData) {
+        newData.forEach((data, i) => {
+            if (chart.data.datasets[i]) {
+                chart.data.datasets[i].data.push(data);
+                if (chart.data.datasets[i].data.length > 30) {
+                    chart.data.datasets[i].data.shift();
+                }
+            }
+        });
+        chart.update();
+    }
+    function updateProcessList() {
+        const processes = [
+            { name: 'chrome.exe', cpu: (Math.random() * 20).toFixed(1), memory: (Math.random() * 500 + 100).toFixed(1) },
+            { name: 'node.exe', cpu: (Math.random() * 15).toFixed(1), memory: (Math.random() * 300 + 50).toFixed(1) },
+            { name: 'explorer.exe', cpu: (Math.random() * 5).toFixed(1), memory: (Math.random() * 200 + 30).toFixed(1) },
+            { name: 'vscode.exe', cpu: (Math.random() * 10).toFixed(1), memory: (Math.random() * 400 + 100).toFixed(1) },
+            { name: 'spotify.exe', cpu: (Math.random() * 8).toFixed(1), memory: (Math.random() * 350 + 80).toFixed(1) }
+        ].sort((a, b) => b.cpu - a.cpu);
+        const processList = document.getElementById('processList');
+        processList.innerHTML = processes.map(proc => `
+            <tr class="border-b">
+                <td class="py-2">${proc.name}</td>
+                <td class="py-2 text-right">${proc.cpu}%</td>
+                <td class="py-2 text-right">${proc.memory} MB</td>
+            </tr>
+        `).join('');
+    }
+    function formatUptime(seconds) {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        return `${hours}h ${minutes}m`;
+    }
+    // Initial update
+    updateSystemData();
+    // Update every 2 seconds
+    setInterval(updateSystemData, 2000);
+});

index.html CHANGED Viewed

	@@ -1,2 +0,0 @@
1	-
2	- <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>

style.css CHANGED Viewed

@@ -28,8 +28,17 @@ body {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 pre {
     white-space: pre-wrap;
     word-wrap: break-word;
-}

     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 pre {
     white-space: pre-wrap;
     word-wrap: break-word;
+}
+/* Dashboard specific styles */
+#processList tr:hover {
+    background-color: #f8fafc;
+}
+canvas {
+    width: 100% !important;
+    height: 100% !important;
+}