|
|
<!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> |
