| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>EduTrack - Homeschool Teacher's Companion</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: '#4F46E5', |
| secondary: '#10B981', |
| accent: '#F59E0B', |
| dark: '#1F2937', |
| light: '#F3F4F6' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| |
| .progress-ring__circle { |
| transition: stroke-dashoffset 0.35s; |
| transform: rotate(-90deg); |
| transform-origin: 50% 50%; |
| } |
| |
| .task-item:hover .task-actions { |
| opacity: 1; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar { |
| width: 6px; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 3px; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar w-64 bg-white shadow-md flex flex-col"> |
| <div class="p-4 border-b border-gray-200"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold text-lg">ET</div> |
| <h1 class="text-xl font-bold text-dark">EduTrack</h1> |
| </div> |
| <p class="text-xs text-gray-500 mt-1">Homeschool Teacher's Companion</p> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto custom-scrollbar py-4"> |
| <div class="px-4 mb-6"> |
| <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">Dashboard</p> |
| </div> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-primary bg-primary bg-opacity-10 border-r-4 border-primary"> |
| <i class="fas fa-home mr-3 text-primary"></i> |
| Overview |
| </a> |
| |
| <div class="px-4 mt-6 mb-2"> |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Teaching</p> |
| </div> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-book-open mr-3 text-secondary"></i> |
| Lesson Plans |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-tasks mr-3 text-accent"></i> |
| Assignments |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-chart-line mr-3 text-purple-500"></i> |
| Progress Tracking |
| </a> |
| |
| <div class="px-4 mt-6 mb-2"> |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Students</p> |
| </div> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-users mr-3 text-blue-500"></i> |
| My Students |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-clipboard-check mr-3 text-green-500"></i> |
| Assessments |
| </a> |
| |
| <div class="px-4 mt-6 mb-2"> |
| <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Resources</p> |
| </div> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-book mr-3 text-yellow-500"></i> |
| Curriculum |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-link mr-3 text-indigo-500"></i> |
| Web Resources |
| </a> |
| </nav> |
| </div> |
| |
| <div class="p-4 border-t border-gray-200"> |
| <div class="flex items-center space-x-3"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full"> |
| <div> |
| <p class="text-sm font-medium text-dark">Sarah Johnson</p> |
| <p class="text-xs text-gray-500">Homeschool Teacher</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-auto custom-scrollbar"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="flex items-center justify-between px-6 py-4"> |
| <h2 class="text-xl font-semibold text-dark">Dashboard Overview</h2> |
| <div class="flex items-center space-x-4"> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-bell text-gray-500"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-envelope text-gray-500"></i> |
| </button> |
| <button class="flex items-center space-x-2"> |
| <span class="text-sm font-medium text-dark">Today</span> |
| <i class="fas fa-chevron-down text-gray-500"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
| |
| |
| <main class="p-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Students</p> |
| <h3 class="text-2xl font-bold text-dark mt-1">4</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-users text-blue-500 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-xs font-medium text-green-500 bg-green-100 px-2 py-1 rounded-full"> |
| <i class="fas fa-arrow-up mr-1"></i> 1 new |
| </span> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Lessons This Week</p> |
| <h3 class="text-2xl font-bold text-dark mt-1">12</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-book-open text-purple-500 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-xs font-medium text-yellow-500 bg-yellow-100 px-2 py-1 rounded-full"> |
| <i class="fas fa-clock mr-1"></i> 3 pending |
| </span> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Assignments Due</p> |
| <h3 class="text-2xl font-bold text-dark mt-1">7</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center"> |
| <i class="fas fa-tasks text-red-500 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-xs font-medium text-red-500 bg-red-100 px-2 py-1 rounded-full"> |
| <i class="fas fa-exclamation-circle mr-1"></i> 2 overdue |
| </span> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Resources</p> |
| <h3 class="text-2xl font-bold text-dark mt-1">24</h3> |
| </div> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-book text-green-500 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <span class="text-xs font-medium text-blue-500 bg-blue-100 px-2 py-1 rounded-full"> |
| <i class="fas fa-plus mr-1"></i> Add new |
| </span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 space-y-6"> |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-semibold text-dark">Today's Schedule</h3> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| <div class="px-6 py-4 flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-3 h-3 rounded-full bg-primary"></div> |
| </div> |
| <div class="ml-4 flex-1"> |
| <div class="flex items-center justify-between"> |
| <h4 class="text-base font-medium text-dark">Math Lesson</h4> |
| <span class="text-sm text-gray-500">9:00 AM - 10:30 AM</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">Algebra basics with Emily and Jacob</p> |
| <div class="mt-2 flex items-center space-x-2"> |
| <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Math</span> |
| <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Grade 7</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-4 flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-3 h-3 rounded-full bg-secondary"></div> |
| </div> |
| <div class="ml-4 flex-1"> |
| <div class="flex items-center justify-between"> |
| <h4 class="text-base font-medium text-dark">Science Project</h4> |
| <span class="text-sm text-gray-500">11:00 AM - 12:30 PM</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">Volcano experiment with all students</p> |
| <div class="mt-2 flex items-center space-x-2"> |
| <span class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">Science</span> |
| <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Hands-on</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-4 flex items-start"> |
| <div class="flex-shrink-0 mt-1"> |
| <div class="w-3 h-3 rounded-full bg-accent"></div> |
| </div> |
| <div class="ml-4 flex-1"> |
| <div class="flex items-center justify-between"> |
| <h4 class="text-base font-medium text-dark">Reading Time</h4> |
| <span class="text-sm text-gray-500">2:00 PM - 3:00 PM</span> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">"To Kill a Mockingbird" discussion</p> |
| <div class="mt-2 flex items-center space-x-2"> |
| <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">Literature</span> |
| <span class="px-2 py-1 text-xs font-medium bg-indigo-100 text-indigo-800 rounded-full">Grade 9</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 py-4 bg-gray-50 text-center"> |
| <button class="text-sm font-medium text-primary hover:text-primary-dark"> |
| <i class="fas fa-plus mr-1"></i> Add New Schedule Item |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-semibold text-dark">Quick Tasks</h3> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| <div class="px-6 py-4 flex items-center task-item"> |
| <div class="flex-shrink-0"> |
| <input type="checkbox" class="h-4 w-4 text-primary rounded focus:ring-primary"> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h4 class="text-base font-medium text-dark">Grade math assignments</h4> |
| <p class="text-sm text-gray-500 mt-1">Due tomorrow</p> |
| </div> |
| <div class="task-actions opacity-0 transition-opacity duration-200"> |
| <button class="p-1 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button class="p-1 text-gray-400 hover:text-gray-600 ml-2"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="px-6 py-4 flex items-center task-item"> |
| <div class="flex-shrink-0"> |
| <input type="checkbox" class="h-4 w-4 text-primary rounded focus:ring-primary"> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h4 class="text-base font-medium text-dark">Prepare science materials</h4> |
| <p class="text-sm text-gray-500 mt-1">For Wednesday's experiment</p> |
| </div> |
| <div class="task-actions opacity-0 transition-opacity duration-200"> |
| <button class="p-1 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button class="p-1 text-gray-400 hover:text-gray-600 ml-2"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="px-6 py-4 flex items-center task-item"> |
| <div class="flex-shrink-0"> |
| <input type="checkbox" class="h-4 w-4 text-primary rounded focus:ring-primary"> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h4 class="text-base font-medium text-dark">Update progress reports</h4> |
| <p class="text-sm text-gray-500 mt-1">End of month review</p> |
| </div> |
| <div class="task-actions opacity-0 transition-opacity duration-200"> |
| <button class="p-1 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button class="p-1 text-gray-400 hover:text-gray-600 ml-2"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 py-4 bg-gray-50"> |
| <div class="flex"> |
| <input type="text" placeholder="Add new task..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-primary"> |
| <button class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-primary-dark"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-semibold text-dark">Student Progress</h3> |
| </div> |
| <div class="p-6"> |
| <div class="space-y-6"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img src="https://randomuser.me/api/portraits/boys/32.jpg" alt="Student" class="w-12 h-12 rounded-full"> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h4 class="text-base font-medium text-dark">Jacob Wilson</h4> |
| <p class="text-sm text-gray-500">Grade 7</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="#E5E7EB" |
| stroke-width="3" |
| /> |
| <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="75, 100" |
| /> |
| </svg> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <span class="text-xs font-bold text-dark">75%</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img src="https://randomuser.me/api/portraits/girls/44.jpg" alt="Student" class="w-12 h-12 rounded-full"> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h4 class="text-base font-medium text-dark">Emily Parker</h4> |
| <p class="text-sm text-gray-500">Grade 7</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="#E5E7EB" |
| stroke-width="3" |
| /> |
| <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="90, 100" |
| /> |
| </svg> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <span class="text-xs font-bold text-dark">90%</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img src="https://randomuser.me/api/portraits/boys/12.jpg" alt="Student" class="w-12 h-12 rounded-full"> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h4 class="text-base font-medium text-dark">Michael Chen</h4> |
| <p class="text-sm text-gray-500">Grade 9</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="#E5E7EB" |
| stroke-width="3" |
| /> |
| <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="60, 100" |
| /> |
| </svg> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <span class="text-xs font-bold text-dark">60%</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <img src="https://randomuser.me/api/portraits/girls/68.jpg" alt="Student" class="w-12 h-12 rounded-full"> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h4 class="text-base font-medium text-dark">Sophia Rodriguez</h4> |
| <p class="text-sm text-gray-500">Grade 9</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="#E5E7EB" |
| stroke-width="3" |
| /> |
| <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="#EC4899" |
| stroke-width="3" |
| stroke-dasharray="85, 100" |
| /> |
| </svg> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <span class="text-xs font-bold text-dark">85%</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 py-4 bg-gray-50 text-center"> |
| <button class="text-sm font-medium text-primary hover:text-primary-dark"> |
| <i class="fas fa-chart-line mr-1"></i> View All Progress |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-semibold text-dark">Upcoming Events</h3> |
| </div> |
| <div class="divide-y divide-gray-200"> |
| <div class="px-6 py-4"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> |
| <i class="fas fa-calendar-day text-blue-500"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-dark">Field Trip</h4> |
| <p class="text-xs text-gray-500 mt-1">Science Museum - Tomorrow</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-4"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> |
| <i class="fas fa-graduation-cap text-green-500"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-dark">Parent-Teacher Meeting</h4> |
| <p class="text-xs text-gray-500 mt-1">Friday, 3:00 PM</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="px-6 py-4"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> |
| <i class="fas fa-birthday-cake text-purple-500"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-dark">Michael's Birthday</h4> |
| <p class="text-xs text-gray-500 mt-1">Next Monday</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 py-4 bg-gray-50 text-center"> |
| <button class="text-sm font-medium text-primary hover:text-primary-dark"> |
| <i class="fas fa-calendar-plus mr-1"></i> Add New Event |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-200"> |
| <h3 class="text-lg font-semibold text-dark">Quick Resources</h3> |
| </div> |
| <div class="p-6"> |
| <div class="grid grid-cols-2 gap-4"> |
| <a href="#" class="p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"> |
| <div class="flex flex-col items-center text-center"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-calculator text-blue-500"></i> |
| </div> |
| <span class="text-xs font-medium text-dark">Math Tools</span> |
| </div> |
| </a> |
| |
| <a href="#" class="p-3 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"> |
| <div class="flex flex-col items-center text-center"> |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-flask text-green-500"></i> |
| </div> |
| <span class="text-xs font-medium text-dark">Science Labs</span> |
| </div> |
| </a> |
| |
| <a href="#" class="p-3 bg-yellow-50 rounded-lg hover:bg-yellow-100 transition-colors"> |
| <div class="flex flex-col items-center text-center"> |
| <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-book text-yellow-500"></i> |
| </div> |
| <span class="text-xs font-medium text-dark">Reading List</span> |
| </div> |
| </a> |
| |
| <a href="#" class="p-3 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors"> |
| <div class="flex flex-col items-center text-center"> |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mb-2"> |
| <i class="fas fa-palette text-purple-500"></i> |
| </div> |
| <span class="text-xs font-medium text-dark">Art Projects</span> |
| </div> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const checkboxes = document.querySelectorAll('.task-item input[type="checkbox"]'); |
| checkboxes.forEach(checkbox => { |
| checkbox.addEventListener('change', function() { |
| const taskText = this.closest('.task-item').querySelector('h4'); |
| if (this.checked) { |
| taskText.classList.add('line-through', 'text-gray-400'); |
| } else { |
| taskText.classList.remove('line-through', 'text-gray-400'); |
| } |
| }); |
| }); |
| |
| |
| const addTaskBtn = document.querySelector('.bg-gray-50 button'); |
| const taskInput = document.querySelector('.bg-gray-50 input[type="text"]'); |
| |
| addTaskBtn.addEventListener('click', function() { |
| if (taskInput.value.trim() !== '') { |
| const tasksContainer = document.querySelector('.divide-y.divide-gray-200'); |
| const newTask = document.createElement('div'); |
| newTask.className = 'px-6 py-4 flex items-center task-item'; |
| newTask.innerHTML = ` |
| <div class="flex-shrink-0"> |
| <input type="checkbox" class="h-4 w-4 text-primary rounded focus:ring-primary"> |
| </div> |
| <div class="ml-4 flex-1"> |
| <h4 class="text-base font-medium text-dark">${taskInput.value}</h4> |
| <p class="text-sm text-gray-500 mt-1">Added just now</p> |
| </div> |
| <div class="task-actions opacity-0 transition-opacity duration-200"> |
| <button class="p-1 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-edit"></i> |
| </button> |
| <button class="p-1 text-gray-400 hover:text-gray-600 ml-2"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| `; |
| tasksContainer.appendChild(newTask); |
| taskInput.value = ''; |
| |
| |
| newTask.querySelector('input[type="checkbox"]').addEventListener('change', function() { |
| const taskText = this.closest('.task-item').querySelector('h4'); |
| if (this.checked) { |
| taskText.classList.add('line-through', 'text-gray-400'); |
| } else { |
| taskText.classList.remove('line-through', 'text-gray-400'); |
| } |
| }); |
| } |
| }); |
| |
| |
| taskInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| addTaskBtn.click(); |
| } |
| }); |
| }); |
| </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=aramb-dev/edutrack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
