Spaces:

KK21200211
/

modem-magic-manager

Running

App Files Files Community

KK21200211 commited on Nov 7, 2025

Commit

d289566

verified ·

1 Parent(s): 1855dfe

add more features to this

Browse files

Files changed (5) hide show

components/navbar.js +8 -2
index.html +6 -1
script.js +12 -1
status.html +178 -0
style.css +23 -2

components/navbar.js CHANGED Viewed

@@ -16,8 +16,14 @@ class CustomNavbar extends HTMLElement {
                         <i data-feather="wifi" class="text-primary-500"></i>
                         <span class="text-xl font-bold text-gray-800 dark:text-white">Modem Magic</span>
                     </div>
-                    <div class="flex items-center space-x-4">
-                        <button id="themeToggle" class="theme-toggle p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
                             <i data-feather="moon"></i>
                         </button>
                     </div>

                         <i data-feather="wifi" class="text-primary-500"></i>
                         <span class="text-xl font-bold text-gray-800 dark:text-white">Modem Magic</span>
                     </div>
+                    <div class="flex items-center space-x-6">
+                        <a href="/" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 transition-colors hidden md:block">
+                            <i data-feather="home"></i>
+                        </a>
+                        <a href="status.html" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 transition-colors hidden md:block">
+                            <i data-feather="activity"></i>
+                        </a>
+<button id="themeToggle" class="theme-toggle p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
                             <i data-feather="moon"></i>
                         </button>
                     </div>

index.html CHANGED Viewed

@@ -32,7 +32,12 @@
     <main class="container mx-auto px-4 py-8">
         <div class="flex justify-between items-center mb-8">
             <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Modem Tasks</h1>
-            <button id="addTaskBtn" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-all hover:scale-105">
                 <i data-feather="plus"></i> Add Task
             </button>
         </div>

     <main class="container mx-auto px-4 py-8">
         <div class="flex justify-between items-center mb-8">
             <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Modem Tasks</h1>
+            <div class="flex gap-4">
+                <a href="status.html" class="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 transition-colors">
+                    <i data-feather="activity"></i> Status
+                </a>
+                <button id="addTaskBtn" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-all hover:scale-105">
+<button id="addTaskBtn" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-all hover:scale-105">
                 <i data-feather="plus"></i> Add Task
             </button>
         </div>

script.js CHANGED Viewed

@@ -1,5 +1,16 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // DOM Elements
     const addTaskBtn = document.getElementById('addTaskBtn');
     const taskModal = document.getElementById('taskModal');
     const closeModalBtn = document.getElementById('closeModalBtn');

+// Utility functions
+function formatBytes(bytes, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
 document.addEventListener('DOMContentLoaded', function() {
+// DOM Elements
     const addTaskBtn = document.getElementById('addTaskBtn');
     const taskModal = document.getElementById('taskModal');
     const closeModalBtn = document.getElementById('closeModalBtn');

status.html ADDED Viewed

	@@ -0,0 +1,178 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Status | Modem Magic Manager</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8">Network Status</h1>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Connection Status</h2>
+                <div class="flex items-center mb-2">
+                    <div class="w-3 h-3 rounded-full bg-green-500 mr-2 pulse"></div>
+                    <span class="text-gray-700 dark:text-gray-300">Connected</span>
+                </div>
+                <div class="grid grid-cols-2 gap-4 mt-4">
+                    <div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Download Speed</p>
+                        <p class="text-2xl font-bold text-primary-500">95.2 Mbps</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Upload Speed</p>
+                        <p class="text-2xl font-bold text-secondary-500">42.8 Mbps</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Latency</p>
+                        <p class="text-2xl font-bold">24 ms</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Uptime</p>
+                        <p class="text-2xl font-bold">12d 4h</p>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Connected Devices</h2>
+                <div class="flex justify-between mb-4">
+                    <div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Total Devices</p>
+                        <p class="text-2xl font-bold">8</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Active Now</p>
+                        <p class="text-2xl font-bold text-green-500">5</p>
+                    </div>
+                </div>
+                <div class="h-48" id="deviceChart"></div>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Data Usage</h2>
+                <div class="h-64" id="dataUsageChart"></div>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Recent Events</h2>
+                <div class="space-y-4">
+                    <div class="flex items-start">
+                        <div class="w-2 h-2 rounded-full bg-green-500 mt-2 mr-3"></div>
+                        <div>
+                            <p class="text-gray-800 dark:text-gray-200">New device connected - Smart TV</p>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start">
+                        <div class="w-2 h-2 rounded-full bg-blue-500 mt-2 mr-3"></div>
+                        <div>
+                            <p class="text-gray-800 dark:text-gray-200">Firmware check completed</p>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start">
+                        <div class="w-2 h-2 rounded-full bg-yellow-500 mt-2 mr-3"></div>
+                        <div>
+                            <p class="text-gray-800 dark:text-gray-200">Connection instability detected</p>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Initialize charts
+        document.addEventListener('DOMContentLoaded', function() {
+            // Device Chart
+            const deviceCtx = document.getElementById('deviceChart').getContext('2d');
+            new Chart(deviceCtx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Phones', 'Computers', 'IoT', 'Other'],
+                    datasets: [{
+                        data: [3, 2, 2, 1],
+                        backgroundColor: [
+                            '#6366f1',
+                            '#10b981',
+                            '#f59e0b',
+                            '#888888'
+                        ],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    cutout: '70%',
+                    plugins: {
+                        legend: {
+                            position: 'right'
+                        }
+                    }
+                }
+            });
+            // Data Usage Chart
+            const dataUsageCtx = document.getElementById('dataUsageChart').getContext('2d');
+            new Chart(dataUsageCtx, {
+                type: 'line',
+                data: {
+                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    datasets: [
+                        {
+                            label: 'Download',
+                            data: [12, 19, 15, 22, 18, 25, 30],
+                            borderColor: '#6366f1',
+                            backgroundColor: 'rgba(99, 102, 241, 0.1)',
+                            fill: true,
+                            tension: 0.3
+                        },
+                        {
+                            label: 'Upload',
+                            data: [5, 8, 6, 9, 7, 10, 12],
+                            borderColor: '#10b981',
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                            fill: true,
+                            tension: 0.3
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'top'
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'GB'
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    </script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -40,7 +40,6 @@
 .completed {
     position: relative;
 }
 .completed::after {
     content: '';
     position: absolute;
@@ -51,4 +50,26 @@
     background: rgba(16, 185, 129, 0.1);
     z-index: 1;
     border-radius: 0.5rem;
-}

 .completed {
     position: relative;
 }
 .completed::after {
     content: '';
     position: absolute;
     background: rgba(16, 185, 129, 0.1);
     z-index: 1;
     border-radius: 0.5rem;
+}
+/* Status page styles */
+.pulse {
+    animation: pulse 1.5s infinite;
+}
+#deviceChart, #dataUsageChart {
+    width: 100% !important;
+}
+.status-card {
+    transition: all 0.3s ease;
+}
+.status-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.dark .status-card:hover {
+    box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06);
+}