Hugging Face's logo

Spaces:
transformered
/
deepsite-project-4sn6v
Running

App Files Community
deepsite-project-4sn6v / index.html
transformered's picture
transformered
Initial DeepSite commit
0c32f5f verified
raw
history blame contribute delete
27.8 kB
<!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>