Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EduHome - Homeschool Platform</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"> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar.collapsed .nav-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .main-content { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed + .main-content { | |
| margin-left: 70px; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white text-gray-800 shadow-lg w-64 flex flex-col fixed h-full"> | |
| <!-- Logo --> | |
| <div class="p-4 flex items-center border-b border-gray-200"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-home text-xl"></i> | |
| </div> | |
| <span class="logo-text ml-3 font-bold text-xl">EduHome</span> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="p-4 flex items-center border-b border-gray-200"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">Sarah Johnson</div> | |
| <div class="text-xs text-gray-500">Parent/Teacher</div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 overflow-y-auto py-4"> | |
| <div class="px-4 mb-8"> | |
| <div class="text-xs uppercase font-semibold text-gray-500 mb-2 tracking-wider">Dashboard</div> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center p-2 text-indigo-600 rounded-lg bg-indigo-50"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| <span class="nav-text ml-3">Overview</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <span class="nav-text ml-3">Schedule</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-book"></i> | |
| <span class="nav-text ml-3">Curriculum</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-4 mb-8"> | |
| <div class="text-xs uppercase font-semibold text-gray-500 mb-2 tracking-wider">Students</div> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-users"></i> | |
| <span class="nav-text ml-3">My Students</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-chart-line"></i> | |
| <span class="nav-text ml-3">Progress Tracking</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-star"></i> | |
| <span class="nav-text ml-3">Achievements</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="px-4 mb-8"> | |
| <div class="text-xs uppercase font-semibold text-gray-500 mb-2 tracking-wider">Resources</div> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-book-open"></i> | |
| <span class="nav-text ml-3">Lesson Plans</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-file-alt"></i> | |
| <span class="nav-text ml-3">Worksheets</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-video"></i> | |
| <span class="nav-text ml-3">Educational Videos</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- Collapse Button --> | |
| <div class="p-4 border-t border-gray-200"> | |
| <button onclick="toggleSidebar()" class="w-full flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-chevron-left"></i> | |
| <span class="nav-text ml-3">Collapse</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 flex flex-col overflow-hidden ml-64"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <h1 class="text-xl font-semibold text-gray-800">Dashboard Overview</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-envelope text-gray-600"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| <div class="border-l border-gray-200 h-8 mx-2"></div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="ml-2 text-sm font-medium">Sarah J.</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Welcome Banner --> | |
| <div class="gradient-bg rounded-xl p-6 text-white mb-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-2xl font-bold mb-2">Welcome back, Sarah!</h2> | |
| <p class="opacity-90">You have 3 lessons scheduled for today. Let's make it a productive day!</p> | |
| </div> | |
| <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition"> | |
| View Schedule | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <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 justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Active Students</p> | |
| <h3 class="text-2xl font-bold mt-1">4</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-green-600 font-medium"> | |
| <i class="fas fa-arrow-up mr-1"></i> 1 new this month | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Lessons This Week</p> | |
| <h3 class="text-2xl font-bold mt-1">12</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-book text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-500 font-medium"> | |
| <i class="fas fa-check-circle mr-1"></i> 3 completed | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Assignments Due</p> | |
| <h3 class="text-2xl font-bold mt-1">5</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-tasks text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-red-600 font-medium"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> 2 overdue | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Total Progress</p> | |
| <h3 class="text-2xl font-bold mt-1">78%</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-green-600 font-medium"> | |
| <i class="fas fa-arrow-up mr-1"></i> 5% from last week | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Upcoming Lessons --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold">Upcoming Lessons</h3> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start p-4 border border-gray-100 rounded-lg hover:bg-gray-50"> | |
| <div class="bg-indigo-100 text-indigo-600 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-book-open"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Mathematics: Fractions</h4> | |
| <p class="text-sm text-gray-500 mt-1">Today, 10:00 AM - 11:30 AM</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-600 rounded-full">Emma</span> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full ml-2">Grade 5</span> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start p-4 border border-gray-100 rounded-lg hover:bg-gray-50"> | |
| <div class="bg-green-100 text-green-600 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-flask"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Science: Solar System</h4> | |
| <p class="text-sm text-gray-500 mt-1">Today, 1:00 PM - 2:30 PM</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-600 rounded-full">Liam</span> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full ml-2">Grade 4</span> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start p-4 border border-gray-100 rounded-lg hover:bg-gray-50"> | |
| <div class="bg-yellow-100 text-yellow-600 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-history"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">History: Ancient Egypt</h4> | |
| <p class="text-sm text-gray-500 mt-1">Tomorrow, 9:00 AM - 10:30 AM</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-600 rounded-full">Emma & Noah</span> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full ml-2">Group Lesson</span> | |
| </div> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 py-2 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:text-indigo-600 hover:border-indigo-300 transition"> | |
| <i class="fas fa-plus mr-2"></i> Add New Lesson | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Student Progress --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-lg font-semibold">Student Progress</h3> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button> | |
| </div> | |
| <div class="space-y-5"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Student" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Emma Johnson</h4> | |
| <p class="text-xs text-gray-500">Grade 5</p> | |
| </div> | |
| <div class="relative w-12 h-12"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#4f46e5" | |
| stroke-width="3" | |
| stroke-dasharray="85, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">85%</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Student" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Liam Smith</h4> | |
| <p class="text-xs text-gray-500">Grade 4</p> | |
| </div> | |
| <div class="relative w-12 h-12"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#10b981" | |
| stroke-width="3" | |
| stroke-dasharray="78, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">78%</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Student" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Noah Williams</h4> | |
| <p class="text-xs text-gray-500">Grade 3</p> | |
| </div> | |
| <div class="relative w-12 h-12"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#f59e0b" | |
| stroke-width="3" | |
| stroke-dasharray="65, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">65%</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 overflow-hidden mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Student" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Olivia Brown</h4> | |
| <p class="text-xs text-gray-500">Grade 2</p> | |
| </div> | |
| <div class="relative w-12 h-12"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| stroke-dasharray="100, 100" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#ef4444" | |
| stroke-width="3" | |
| stroke-dasharray="92, 100" | |
| /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">92%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Assignments --> | |
| <div class="mt-6 bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-semibold">Recent Assignments</h3> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button> | |
| </div> | |
| </div> | |
| <div class="divide-y divide-gray-100"> | |
| <div class="grid grid-cols-12 px-6 py-4 hover:bg-gray-50 items-center"> | |
| <div class="col-span-6 flex items-center"> | |
| <div class="w-10 h-10 rounded bg-indigo-100 text-indigo-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Math Worksheet - Fractions</h4> | |
| <p class="text-sm text-gray-500">Assigned to Emma Johnson</p> | |
| </div> | |
| </div> | |
| <div class="col-span-2 text-sm text-gray-500">Due: Today</div> | |
| <div class="col-span-2"> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Pending</span> | |
| </div> | |
| <div class="col-span-2 flex justify-end"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 px-6 py-4 hover:bg-gray-50 items-center"> | |
| <div class="col-span-6 flex items-center"> | |
| <div class="w-10 h-10 rounded bg-green-100 text-green-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Science Project - Solar System</h4> | |
| <p class="text-sm text-gray-500">Assigned to Liam Smith</p> | |
| </div> | |
| </div> | |
| <div class="col-span-2 text-sm text-gray-500">Due: Tomorrow</div> | |
| <div class="col-span-2"> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">In Progress</span> | |
| </div> | |
| <div class="col-span-2 flex justify-end"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 px-6 py-4 hover:bg-gray-50 items-center"> | |
| <div class="col-span-6 flex items-center"> | |
| <div class="w-10 h-10 rounded bg-purple-100 text-purple-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-pen-fancy"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Creative Writing - My Hero</h4> | |
| <p class="text-sm text-gray-500">Assigned to Olivia Brown</p> | |
| </div> | |
| </div> | |
| <div class="col-span-2 text-sm text-gray-500">Due: 2 days ago</div> | |
| <div class="col-span-2"> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Overdue</span> | |
| </div> | |
| <div class="col-span-2 flex justify-end"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 px-6 py-4 hover:bg-gray-50 items-center"> | |
| <div class="col-span-6 flex items-center"> | |
| <div class="w-10 h-10 rounded bg-blue-100 text-blue-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-history"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">History Quiz - Ancient Egypt</h4> | |
| <p class="text-sm text-gray-500">Assigned to Noah Williams</p> | |
| </div> | |
| </div> | |
| <div class="col-span-2 text-sm text-gray-500">Due: 1 week ago</div> | |
| <div class="col-span-2"> | |
| <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Completed</span> | |
| </div> | |
| <div class="col-span-2 flex justify-end"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar | |
| function toggleSidebar() { | |
| const sidebar = document.querySelector('.sidebar'); | |
| const mainContent = document.querySelector('.main-content'); | |
| sidebar.classList.toggle('collapsed'); | |
| // Change icon when collapsed | |
| const icon = sidebar.querySelector('.fa-chevron-left'); | |
| if (sidebar.classList.contains('collapsed')) { | |
| icon.classList.remove('fa-chevron-left'); | |
| icon.classList.add('fa-chevron-right'); | |
| } else { | |
| icon.classList.remove('fa-chevron-right'); | |
| icon.classList.add('fa-chevron-left'); | |
| } | |
| } | |
| // Sample data for charts (would be replaced with real data in production) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // This is where you would initialize any charts or more complex functionality | |
| console.log('Dashboard loaded'); | |
| }); | |
| </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=GruntDaddy/educore" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |