| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LuminousCRM - Interior Design 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> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6D28D9', |
| secondary: '#8B5CF6', |
| accent: '#A78BFA', |
| dark: '#1F2937', |
| light: '#F9FAFB' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .sidebar-collapsed { |
| width: 80px; |
| } |
| .sidebar-collapsed .sidebar-text { |
| display: none; |
| } |
| .sidebar-collapsed .logo-text { |
| display: none; |
| } |
| .sidebar-collapsed .nav-item { |
| justify-content: center; |
| } |
| .content-area { |
| transition: all 0.3s ease; |
| } |
| .content-expanded { |
| margin-left: 80px; |
| } |
| .chart-container { |
| position: relative; |
| height: 300px; |
| } |
| .project-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| .task-completed { |
| background-color: #ECFDF5; |
| border-left: 4px solid #10B981; |
| } |
| .task-pending { |
| background-color: #FEF2F2; |
| border-left: 4px solid #EF4444; |
| } |
| .task-in-progress { |
| background-color: #EFF6FF; |
| border-left: 4px solid #3B82F6; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-white shadow-lg w-64 fixed h-full flex flex-col z-10"> |
| <div class="p-4 flex items-center border-b border-gray-200"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white font-bold text-xl">L</div> |
| <span class="logo-text ml-3 text-xl font-semibold text-gray-800">LuminousCRM</span> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto py-4"> |
| <div class="px-4 mb-8"> |
| <div class="relative"> |
| <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| </div> |
| |
| <nav> |
| <div class="px-4 mb-2"> |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Main</p> |
| </div> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-primary bg-purple-50"> |
| <i class="fas fa-home text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">Dashboard</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-purple-50"> |
| <i class="fas fa-lightbulb text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">LED Projects</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-purple-50"> |
| <i class="fas fa-paint-roller text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">Design Studio</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-purple-50"> |
| <i class="fas fa-users text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">Clients</span> |
| </a> |
| |
| <div class="px-4 mt-6 mb-2"> |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Work Process</p> |
| </div> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-purple-50"> |
| <i class="fas fa-tasks text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">Projects</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-purple-50"> |
| <i class="fas fa-calendar-alt text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">Calendar</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-purple-50"> |
| <i class="fas fa-file-invoice-dollar text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">Invoices</span> |
| </a> |
| |
| <div class="px-4 mt-6 mb-2"> |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Social & Analytics</p> |
| </div> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-purple-50"> |
| <i class="fas fa-chart-line text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">Analytics</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-purple-50"> |
| <i class="fas fa-hashtag text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">Social Media</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:text-primary hover:bg-purple-50"> |
| <i class="fas fa-bullhorn text-lg"></i> |
| <span class="sidebar-text ml-3 font-medium">Campaigns</span> |
| </a> |
| </nav> |
| </div> |
| |
| <div class="p-4 border-t border-gray-200"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center"> |
| <i class="fas fa-user text-gray-600"></i> |
| </div> |
| <div class="ml-3 sidebar-text"> |
| <p class="text-sm font-medium text-gray-800">Sarah Designer</p> |
| <p class="text-xs text-gray-500">Admin</p> |
| </div> |
| <button class="ml-auto text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="content-area flex-1 flex flex-col overflow-hidden ml-64"> |
| |
| <header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between"> |
| <div class="flex items-center"> |
| <button id="sidebarToggle" class="text-gray-500 focus:outline-none mr-4"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <h1 class="text-xl font-semibold text-gray-800">Dashboard Overview</h1> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="text-gray-500 hover:text-gray-700 focus:outline-none"> |
| <i class="fas fa-bell text-xl"></i> |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| <button class="text-gray-500 hover:text-gray-700 focus:outline-none"> |
| <i class="fas fa-envelope text-xl"></i> |
| </button> |
| <button class="text-gray-500 hover:text-gray-700 focus:outline-none"> |
| <i class="fas fa-cog text-xl"></i> |
| </button> |
| </div> |
| </header> |
| |
| |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-lg bg-purple-100 text-primary"> |
| <i class="fas fa-lightbulb text-2xl"></i> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm font-medium text-gray-500">LED Projects</p> |
| <p class="text-2xl font-semibold text-gray-800">24</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium">+12%</span> |
| <span class="text-gray-500 text-sm ml-2">from last month</span> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-500"> |
| <i class="fas fa-users text-2xl"></i> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm font-medium text-gray-500">Active Clients</p> |
| <p class="text-2xl font-semibold text-gray-800">42</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium">+5%</span> |
| <span class="text-gray-500 text-sm ml-2">from last month</span> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-lg bg-green-100 text-green-500"> |
| <i class="fas fa-dollar-sign text-2xl"></i> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm font-medium text-gray-500">Revenue</p> |
| <p class="text-2xl font-semibold text-gray-800">$28,450</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium">+18%</span> |
| <span class="text-gray-500 text-sm ml-2">from last month</span> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-lg bg-yellow-100 text-yellow-500"> |
| <i class="fas fa-tasks text-2xl"></i> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm font-medium text-gray-500">Tasks Completed</p> |
| <p class="text-2xl font-semibold text-gray-800">76%</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-green-500 text-sm font-medium">+8%</span> |
| <span class="text-gray-500 text-sm ml-2">from last month</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-lg font-semibold text-gray-800">Project Timeline</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm rounded-lg bg-primary text-white">Add Project</button> |
| <button class="px-3 py-1 text-sm rounded-lg border border-gray-300 text-gray-700">View All</button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| |
| <div class="project-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300"> |
| <div class="flex items-start"> |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center text-primary"> |
| <i class="fas fa-lightbulb text-xl"></i> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h3 class="font-medium text-gray-800">Modern Living Room LED</h3> |
| <p class="text-sm text-gray-500 mt-1">Client: Johnson Family</p> |
| <div class="mt-3 flex items-center"> |
| <div class="flex -space-x-2"> |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
| </div> |
| <span class="ml-2 text-xs text-gray-500">+2 more</span> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center justify-between"> |
| <div> |
| <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800">On Track</span> |
| </div> |
| <div class="text-xs text-gray-500">Due: May 25</div> |
| </div> |
| </div> |
| |
| |
| <div class="project-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300"> |
| <div class="flex items-start"> |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center text-blue-500"> |
| <i class="fas fa-home text-xl"></i> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h3 class="font-medium text-gray-800">Kitchen Remodel</h3> |
| <p class="text-sm text-gray-500 mt-1">Client: Smith Residence</p> |
| <div class="mt-3 flex items-center"> |
| <div class="flex -space-x-2"> |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center justify-between"> |
| <div> |
| <span class="text-xs px-2 py-1 rounded-full bg-yellow-100 text-yellow-800">In Review</span> |
| </div> |
| <div class="text-xs text-gray-500">Due: May 18</div> |
| </div> |
| </div> |
| |
| |
| <div class="project-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300"> |
| <div class="flex items-start"> |
| <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center text-green-500"> |
| <i class="fas fa-building text-xl"></i> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h3 class="font-medium text-gray-800">Office Space Design</h3> |
| <p class="text-sm text-gray-500 mt-1">Client: TechStart Inc.</p> |
| <div class="mt-3 flex items-center"> |
| <div class="flex -space-x-2"> |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/65.jpg" alt=""> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center justify-between"> |
| <div> |
| <span class="text-xs px-2 py-1 rounded-full bg-red-100 text-red-800">Delayed</span> |
| </div> |
| <div class="text-xs text-gray-500">Due: May 10</div> |
| </div> |
| </div> |
| |
| |
| <div class="project-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300"> |
| <div class="flex items-start"> |
| <div class="w-12 h-12 rounded-lg bg-pink-100 flex items-center justify-center text-pink-500"> |
| <i class="fas fa-bed text-xl"></i> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h3 class="font-medium text-gray-800">Master Bedroom</h3> |
| <p class="text-sm text-gray-500 mt-1">Client: Davis Family</p> |
| <div class="mt-3 flex items-center"> |
| <div class="flex -space-x-2"> |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/33.jpg" alt=""> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4 flex items-center justify-between"> |
| <div> |
| <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800">Completed</span> |
| </div> |
| <div class="text-xs text-gray-500">Finished: May 5</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-lg font-semibold text-gray-800">Social Media Engagement</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm rounded-lg border border-gray-300 text-gray-700">View All</button> |
| </div> |
| </div> |
| |
| <div class="chart-container"> |
| <canvas id="socialChart"></canvas> |
| </div> |
| |
| <div class="mt-6 space-y-4"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white"> |
| <i class="fab fa-facebook-f"></i> |
| </div> |
| <span class="ml-3 text-sm font-medium text-gray-700">Facebook</span> |
| </div> |
| <div class="text-sm font-medium text-gray-700">1,245</div> |
| </div> |
| |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-pink-500 flex items-center justify-center text-white"> |
| <i class="fab fa-instagram"></i> |
| </div> |
| <span class="ml-3 text-sm font-medium text-gray-700">Instagram</span> |
| </div> |
| <div class="text-sm font-medium text-gray-700">2,876</div> |
| </div> |
| |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-400 flex items-center justify-center text-white"> |
| <i class="fab fa-twitter"></i> |
| </div> |
| <span class="ml-3 text-sm font-medium text-gray-700">Twitter</span> |
| </div> |
| <div class="text-sm font-medium text-gray-700">543</div> |
| </div> |
| |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center text-white"> |
| <i class="fab fa-pinterest-p"></i> |
| </div> |
| <span class="ml-3 text-sm font-medium text-gray-700">Pinterest</span> |
| </div> |
| <div class="text-sm font-medium text-gray-700">3,210</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-lg font-semibold text-gray-800">Recent Tasks</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm rounded-lg bg-primary text-white">Add Task</button> |
| <button class="px-3 py-1 text-sm rounded-lg border border-gray-300 text-gray-700">View All</button> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| |
| <div class="task-completed p-4 rounded-lg"> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="task1" type="checkbox" checked class="h-4 w-4 text-green-500 focus:ring-green-500 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 flex-1"> |
| <label for="task1" class="font-medium text-gray-700">Finalize living room LED layout</label> |
| <p class="text-sm text-gray-500 mt-1">Project: Modern Living Room LED</p> |
| </div> |
| <div class="text-sm text-gray-500">Today, 10:30 AM</div> |
| </div> |
| </div> |
| |
| |
| <div class="task-in-progress p-4 rounded-lg"> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="task2" type="checkbox" class="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 flex-1"> |
| <label for="task2" class="font-medium text-gray-700">Create 3D render for kitchen remodel</label> |
| <p class="text-sm text-gray-500 mt-1">Project: Kitchen Remodel</p> |
| </div> |
| <div class="text-sm text-gray-500">Tomorrow, 2:00 PM</div> |
| </div> |
| </div> |
| |
| |
| <div class="task-pending p-4 rounded-lg"> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="task3" type="checkbox" class="h-4 w-4 text-red-500 focus:ring-red-500 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 flex-1"> |
| <label for="task3" class="font-medium text-gray-700">Client meeting for office space design</label> |
| <p class="text-sm text-gray-500 mt-1">Project: Office Space Design</p> |
| </div> |
| <div class="text-sm text-gray-500">May 12, 9:00 AM</div> |
| </div> |
| </div> |
| |
| |
| <div class="task-in-progress p-4 rounded-lg"> |
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="task4" type="checkbox" class="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded"> |
| </div> |
| <div class="ml-3 flex-1"> |
| <label for="task4" class="font-medium text-gray-700">Select LED fixtures for bedroom</label> |
| <p class="text-sm text-gray-500 mt-1">Project: Master Bedroom</p> |
| </div> |
| <div class="text-sm text-gray-500">May 8, 11:00 AM</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2> |
| <button class="px-3 py-1 text-sm rounded-lg border border-gray-300 text-gray-700">View All</button> |
| </div> |
| |
| <div class="space-y-4"> |
| |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">Lisa Johnson</p> |
| <p class="text-sm text-gray-500">Approved the final design for living room LED project</p> |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">Michael Smith</p> |
| <p class="text-sm text-gray-500">Requested changes to kitchen remodel layout</p> |
| <p class="text-xs text-gray-400 mt-1">5 hours ago</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">David Wilson</p> |
| <p class="text-sm text-gray-500">Scheduled meeting for office space project</p> |
| <p class="text-xs text-gray-400 mt-1">Yesterday</p> |
| </div> |
| </div> |
| |
| |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-primary"> |
| <i class="fas fa-lightbulb"></i> |
| </div> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">System Notification</p> |
| <p class="text-sm text-gray-500">New LED product catalog available for download</p> |
| <p class="text-xs text-gray-400 mt-1">May 3</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| |
| document.getElementById('sidebarToggle').addEventListener('click', function() { |
| document.querySelector('.sidebar').classList.toggle('sidebar-collapsed'); |
| document.querySelector('.content-area').classList.toggle('content-expanded'); |
| }); |
| |
| |
| const socialCtx = document.getElementById('socialChart').getContext('2d'); |
| const socialChart = new Chart(socialCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Facebook', 'Instagram', 'Twitter', 'Pinterest'], |
| datasets: [{ |
| data: [1245, 2876, 543, 3210], |
| backgroundColor: [ |
| '#3B5998', |
| '#E1306C', |
| '#1DA1F2', |
| '#E60023' |
| ], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| cutout: '70%', |
| plugins: { |
| legend: { |
| display: false |
| } |
| } |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nasar37/awsemo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
