Spaces:

transformered
/

deepsite-project-4sn6v

Running

App Files Files Community

transformered commited on Feb 23

Commit

0c32f5f

verified ·

1 Parent(s): 75d2a1d

Initial DeepSite commit

Browse files

Files changed (2) hide show

README.md +9 -6
index.html +528 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project 4sn6v
-emoji: 🦀
-colorFrom: indigo
-colorTo: pink
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
+colorFrom: green
+colorTo: red
 sdk: static
+emoji: 📱
+tags:
+  - deepsite-v4
 ---
+# DeepSite Project
+This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.

index.html CHANGED Viewed

@@ -1,19 +1,528 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modern Analytics Dashboard 📊</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            font-family: 'Inter', sans-serif;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .card-shadow {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            transition: all 0.3s ease;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .chart-bar {
+            animation: growBar 1.5s ease-out forwards;
+        }
+        @keyframes growBar {
+            from { height: 0; }
+        }
+        .sidebar {
+            transition: all 0.3s ease;
+        }
+        @media (max-width: 768px) {
+            .sidebar {
+                transform: translateX(-100%);
+            }
+            .sidebar.active {
+                transform: translateX(0);
+            }
+        }
+        .progress-ring {
+            transform: rotate(-90deg);
+        }
+        .progress-ring__circle {
+            transition: stroke-dashoffset 0.35s;
+            transform-origin: 50% 50%;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
+    <!-- Mobile Menu Button -->
+    <button id="mobileMenuBtn" class="md:hidden fixed top-4 left-4 z-50 bg-white dark:bg-gray-800 p-3 rounded-full shadow-lg">
+        <i data-lucide="menu"></i>
+    </button>
+    <!-- Sidebar -->
+    <aside class="sidebar fixed inset-y-0 left-0 z-40 w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 overflow-y-auto">
+        <!-- Logo -->
+        <div class="p-6">
+            <div class="flex items-center space-x-3">
+                <div class="w-10 h-10 gradient-bg rounded-lg flex items-center justify-center">
+                    <i data-lucide="bar-chart-3" class="text-white"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-900 dark:text-white">AnalyticsPro</h1>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Dashboard v2.1</p>
+                </div>
+            </div>
+        </div>
+        <!-- Navigation -->
+        <nav class="px-4 pb-6">
+            <div class="mb-8">
+                <h3 class="px-4 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Main</h3>
+                <ul>
+                    <li>
+                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 mb-2">
+                            <i data-lucide="home"></i>
+                            <span>Dashboard</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 mb-2">
+                            <i data-lucide="trending-up"></i>
+                            <span>Analytics</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 mb-2">
+                            <i data-lucide="users"></i>
+                            <span>Users</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 mb-2">
+                            <i data-lucide="settings"></i>
+                            <span>Settings</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="mb-8">
+                <h3 class="px-4 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Tools</h3>
+                <ul>
+                    <li>
+                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 mb-2">
+                            <i data-lucide="file-text"></i>
+                            <span>Reports</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 mb-2">
+                            <i data-lucide="bell"></i>
+                            <span>Notifications</span>
+                            <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+        <!-- User Profile -->
+        <div class="px-4 mt-auto">
+            <div class="flex items-center space-x-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center">
+                    <span class="text-white font-semibold">JD</span>
+                </div>
+                <div class="flex-1">
+                    <h4 class="font-medium text-gray-900 dark:text-white">John Doe</h4>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Admin</p>
+                </div>
+                <button class="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg">
+                    <i data-lucide="log-out"></i>
+                </button>
+            </div>
+        </div>
+    </aside>
+    <!-- Main Content -->
+    <main class="md:ml-64 p-4 md:p-6">
+        <!-- Header -->
+        <header class="mb-8">
+            <div class="flex flex-col md:flex-row md:items-center justify-between">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Dashboard Overview</h1>
+                    <p class="text-gray-600 dark:text-gray-400 mt-2">Welcome back! Here's what's happening with your analytics today.</p>
+                </div>
+                <div class="mt-4 md:mt-0 flex items-center space-x-4">
+                    <div class="relative">
+                        <i data-lucide="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                        <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    </div>
+                    <button class="p-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg">
+                        <i data-lucide="bell"></i>
+                    </button>
+                </div>
+            </div>
+        </header>
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow card-hover">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Revenue</p>
+                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-2">$45,231</h3>
+                        <p class="text-green-500 text-sm mt-1 flex items-center">
+                            <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i>
+                            +20.1% from last month
+                        </p>
+                    </div>
+                    <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
+                        <i data-lucide="dollar-sign" class="text-blue-600 dark:text-blue-400"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow card-hover">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Active Users</p>
+                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-2">2,543</h3>
+                        <p class="text-green-500 text-sm mt-1 flex items-center">
+                            <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i>
+                            +12.5% from last week
+                        </p>
+                    </div>
+                    <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
+                        <i data-lucide="users" class="text-green-600 dark:text-green-400"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow card-hover">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Conversion Rate</p>
+                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-2">3.24%</h3>
+                        <p class="text-red-500 text-sm mt-1 flex items-center">
+                            <i data-lucide="trending-down" class="w-4 h-4 mr-1"></i>
+                            -1.2% from yesterday
+                        </p>
+                    </div>
+                    <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
+                        <i data-lucide="refresh-cw" class="text-purple-600 dark:text-purple-400"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow card-hover">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Avg. Session</p>
+                        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-2">4m 32s</h3>
+                        <p class="text-green-500 text-sm mt-1 flex items-center">
+                            <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i>
+                            +8.7% from last month
+                        </p>
+                    </div>
+                    <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
+                        <i data-lucide="clock" class="text-orange-600 dark:text-orange-400"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Charts Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+            <!-- Line Chart -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow">
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Revenue Overview</h3>
+                    <select class="border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-1 bg-white dark:bg-gray-800 text-sm">
+                        <option>Last 7 days</option>
+                        <option>Last 30 days</option>
+                        <option>Last 90 days</option>
+                    </select>
+                </div>
+                <div class="h-64">
+                    <canvas id="revenueChart"></canvas>
+                </div>
+            </div>
+            <!-- Donut Chart -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow">
+                <div class="flex items-center justify-between mb-6">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Traffic Sources</h3>
+                    <select class="border border-gray-300 dark:border-gray-700 rounded-lg px-3 py-1 bg-white dark:bg-gray-800 text-sm">
+                        <option>This month</option>
+                        <option>Last month</option>
+                    </select>
+                </div>
+                <div class="h-64">
+                    <canvas id="trafficChart"></canvas>
+                </div>
+            </div>
+        </div>
+        <!-- Progress Charts (Inspired by MCI) -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 text-center">Call Package</h3>
+                <div class="relative mx-auto" style="width: 140px; height: 140px;">
+                    <svg class="progress-ring" width="140" height="140">
+                        <circle class="progress-ring__circle" stroke="#e5e7eb" stroke-width="10" fill="transparent" r="60" cx="70" cy="70"/>
+                        <circle class="progress-ring__circle" stroke="#0095da" stroke-width="10" fill="transparent" r="60" cx="70" cy="70" stroke-dasharray="377" stroke-dashoffset="377"/>
+                    </svg>
+                    <div class="absolute inset-0 flex flex-col items-center justify-center">
+                        <div class="text-2xl font-bold text-gray-900 dark:text-white">0 min</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">No active package</div>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 text-center">Internet Package</h3>
+                <div class="relative mx-auto" style="width: 140px; height: 140px;">
+                    <svg class="progress-ring" width="140" height="140">
+                        <circle class="progress-ring__circle" stroke="#e5e7eb" stroke-width="10" fill="transparent" r="60" cx="70" cy="70"/>
+                        <circle class="progress-ring__circle" stroke="#00AECD" stroke-width="10" fill="transparent" r="60" cx="70" cy="70" stroke-dasharray="377" stroke-dashoffset="113"/>
+                    </svg>
+                    <div class="absolute inset-0 flex flex-col items-center justify-center">
+                        <div class="text-2xl font-bold text-gray-900 dark:text-white">53.26 GB</div>
+                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">remaining from</div>
+                        <div class="text-sm font-semibold text-gray-900 dark:text-white">60.06 GB</div>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 text-center">SMS Package</h3>
+                <div class="relative mx-auto" style="width: 140px; height: 140px;">
+                    <svg class="progress-ring" width="140" height="140">
+                        <circle class="progress-ring__circle" stroke="#e5e7eb" stroke-width="10" fill="transparent" r="60" cx="70" cy="70"/>
+                        <circle class="progress-ring__circle" stroke="#ff4f00" stroke-width="10" fill="transparent" r="60" cx="70" cy="70" stroke-dasharray="377" stroke-dashoffset="377"/>
+                    </svg>
+                    <div class="absolute inset-0 flex flex-col items-center justify-center">
+                        <div class="text-2xl font-bold text-gray-900 dark:text-white">0 SMS</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">No active package</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Quick Actions (Inspired by MCI Tools) -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow mb-8">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Quick Actions</h3>
+            <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+                <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                    <div class="w-12 h-12 bg-gradient-to-tr from-[#F76B1C] to-[#FAD961] rounded-full flex items-center justify-center mb-3">
+                        <i data-lucide="refresh-cw" class="text-white"></i>
+                    </div>
+                    <span class="text-sm font-medium text-gray-900 dark:text-white text-center">Convert to Permanent</span>
+                </a>
+                <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                    <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-3">
+                        <i data-lucide="wifi" class="text-gray-600 dark:text-gray-400"></i>
+                    </div>
+                    <span class="text-sm font-medium text-gray-900 dark:text-white text-center">Internet</span>
+                </a>
+                <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                    <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-3">
+                        <i data-lucide="zap" class="text-gray-600 dark:text-gray-400"></i>
+                    </div>
+                    <span class="text-sm font-medium text-gray-900 dark:text-white text-center">Suggested</span>
+                </a>
+                <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                    <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-3">
+                        <i data-lucide="gift" class="text-gray-600 dark:text-gray-400"></i>
+                    </div>
+                    <span class="text-sm font-medium text-gray-900 dark:text-white text-center">Incentive</span>
+                </a>
+                <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                    <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mb-3">
+                        <i data-lucide="credit-card" class="text-gray-600 dark:text-gray-400"></i>
+                    </div>
+                    <span class="text-sm font-medium text-gray-900 dark:text-white text-center">Wallet</span>
+                </a>
+            </div>
+        </div>
+        <!-- Recent Activity -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl p-6 card-shadow">
+            <div class="flex items-center justify-between mb-6">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Activity</h3>
+                <a href="#" class="text-blue-600 dark:text-blue-400 text-sm font-medium">View all</a>
+            </div>
+            <div class="space-y-4">
+                <div class="flex items-center p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+                    <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mr-4">
+                        <i data-lucide="user-plus" class="text-blue-600 dark:text-blue-400"></i>
+                    </div>
+                    <div class="flex-1">
+                        <h4 class="font-medium text-gray-900 dark:text-white">New user registered</h4>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">John Doe joined the platform</p>
+                    </div>
+                    <span class="text-sm text-gray-500 dark:text-gray-400">2 min ago</span>
+                </div>
+                <div class="flex items-center p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+                    <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mr-4">
+                        <i data-lucide="shopping-cart" class="text-green-600 dark:text-green-400"></i>
+                    </div>
+                    <div class="flex-1">
+                        <h4 class="font-medium text-gray-900 dark:text-white">New order placed</h4>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Order #ORD-7890 was placed</p>
+                    </div>
+                    <span class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</span>
+                </div>
+                <div class="flex items-center p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+                    <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mr-4">
+                        <i data-lucide="file-text" class="text-purple-600 dark:text-purple-400"></i>
+                    </div>
+                    <div class="flex-1">
+                        <h4 class="font-medium text-gray-900 dark:text-white">Report generated</h4>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Monthly sales report ready</p>
+                    </div>
+                    <span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="md:ml-64 p-4 border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="text-gray-600 dark:text-gray-400 text-sm mb-4 md:mb-0">
+                © 2024 AnalyticsPro. All rights reserved.
+            </div>
+            <div class="flex items-center space-x-6">
+                <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
+                    <i data-lucide="help-circle"></i>
+                </a>
+                <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
+                    <i data-lucide="settings"></i>
+                </a>
+                <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
+                    <i data-lucide="mail"></i>
+                </a>
+            </div>
+        </div>
+    </footer>
+    <!-- JavaScript -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+        // Mobile menu toggle
+        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+        const sidebar = document.querySelector('.sidebar');
+        mobileMenuBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('active');
+        });
+        // Close sidebar when clicking outside on mobile
+        document.addEventListener('click', (event) => {
+            if (window.innerWidth < 768 && !sidebar.contains(event.target) && !mobileMenuBtn.contains(event.target)) {
+                sidebar.classList.remove('active');
+            }
+        });
+        // Initialize progress rings
+        function updateProgressRing(circle, percent) {
+            const radius = circle.r.baseVal.value;
+            const circumference = radius * 2 * Math.PI;
+            const offset = circumference - (percent / 100) * circumference;
+            circle.style.strokeDasharray = `${circumference} ${circumference}`;
+            circle.style.strokeDashoffset = offset;
+        }
+        // Update progress rings
+        document.querySelectorAll('.progress-ring__circle').forEach((circle, index) => {
+            if (index === 1) { // Internet package - 88.7% used (11.3% remaining)
+                updateProgressRing(circle, 88.7);
+            } else if (index === 2) { // SMS package - 0%
+                updateProgressRing(circle, 0);
+            } else { // Call package - 0%
+                updateProgressRing(circle, 0);
+            }
+        });
+        // Initialize charts
+        const ctx1 = document.getElementById('revenueChart').getContext('2d');
+        const revenueChart = new Chart(ctx1, {
+            type: 'line',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+                datasets: [{
+                    label: 'Revenue',
+                    data: [3000, 4200, 3800, 5100, 4900, 6200, 7000],
+                    borderColor: '#0095da',
+                    backgroundColor: 'rgba(0, 149, 218, 0.1)',
+                    borderWidth: 2,
+                    fill: true,
+                    tension: 0.4
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        grid: {
+                            color: 'rgba(0, 0, 0, 0.05)'
+                        }
+                    },
+                    x: {
+                        grid: {
+                            display: false
+                        }
+                    }
+                }
+            }
+        });
+        const ctx2 = document.getElementById('trafficChart').getContext('2d');
+        const trafficChart = new Chart(ctx2, {
+            type: 'doughnut',
+            data: {
+                labels: ['Direct', 'Social', 'Referral', 'Email', 'Search'],
+                datasets: [{
+                    data: [35, 25, 20, 12, 8],
+                    backgroundColor: [
+                        '#0095da',
+                        '#ff4f00',
+                        '#00AECD',
+                        '#764ba2',
+                        '#667eea'
+                    ],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom'
+                    }
+                }
+            }
+        });
+        // Dark mode toggle (simple implementation)
+        const darkModeToggle = document.createElement('button');
+        darkModeToggle.className = 'fixed bottom-4 right-4 z-50 bg-gray-800 text-white p-3 rounded-full shadow-lg';
+        darkModeToggle.innerHTML = '<i data-lucide="moon"></i>';
+        document.body.appendChild(darkModeToggle);
+        darkModeToggle.addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            lucide.createIcons(); // Refresh icons
+        });
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>