Hugging Face's logo

Spaces:
Maddyr237
/
lms2
Running

App Files Community
lms2 / index.html
Maddyr237's picture
Maddyr237
Add 3 files
ceba678 verified
raw
history blame contribute delete
77.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EduMaster LMS</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>
/* Custom CSS for animations and transitions */
.sidebar-item:hover .sidebar-icon {
transform: translateX(5px);
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.progress-ring__circle {
transition: stroke-dashoffset 0.5s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.chapter-accordion {
transition: all 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Video player styling */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Quiz styling */
.quiz-option {
transition: all 0.2s ease;
}
.quiz-option:hover {
transform: translateX(5px);
}
.quiz-option.correct {
background-color: #d1fae5;
border-color: #10b981;
}
.quiz-option.incorrect {
background-color: #fee2e2;
border-color: #ef4444;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Header -->
<header class="bg-indigo-700 text-white shadow-lg">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2 cursor-pointer" onclick="loadPage('dashboard')">
<i class="fas fa-graduation-cap text-3xl"></i>
<h1 class="text-2xl font-bold">EduMaster LMS</h1>
</div>
<div class="flex items-center space-x-6">
<div class="relative">
<input type="text" placeholder="Search courses..." class="py-2 px-4 pr-10 rounded-full bg-indigo-600 text-white placeholder-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-400">
<i class="fas fa-search absolute right-3 top-3 text-indigo-300"></i>
</div>
<div class="flex items-center space-x-2 cursor-pointer" onclick="loadPage('profile')">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full border-2 border-indigo-400">
<span class="font-medium">Sarah K.</span>
</div>
</div>
</div>
</header>
<div class="flex">
<!-- Sidebar -->
<aside class="w-64 bg-white shadow-md h-screen sticky top-0 overflow-y-auto">
<nav class="p-4">
<ul class="space-y-2">
<li>
<a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('dashboard')">
<i class="sidebar-icon fas fa-home mr-3 text-gray-500 transition-transform"></i>
Dashboard
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('my-courses')">
<i class="sidebar-icon fas fa-book mr-3 text-gray-500 transition-transform"></i>
My Courses
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('schedule')">
<i class="sidebar-icon fas fa-calendar-alt mr-3 text-gray-500 transition-transform"></i>
Schedule
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('progress')">
<i class="sidebar-icon fas fa-chart-bar mr-3 text-gray-500 transition-transform"></i>
Progress
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center py-3 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadPage('discussions')">
<i class="sidebar-icon fas fa-comments mr-3 text-gray-500 transition-transform"></i>
Discussions
</a>
</li>
</ul>
<div class="mt-8 pt-4 border-t border-gray-200">
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4">COURSES</h3>
<ul class="space-y-1">
<li>
<a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadCourse('web-development')">
<i class="sidebar-icon fas fa-laptop-code mr-3 text-gray-500 transition-transform"></i>
Web Development
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadCourse('mobile-apps')">
<i class="sidebar-icon fas fa-mobile-alt mr-3 text-gray-500 transition-transform"></i>
Mobile Apps
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadCourse('data-science')">
<i class="sidebar-icon fas fa-chart-line mr-3 text-gray-500 transition-transform"></i>
Data Science
</a>
</li>
<li>
<a href="#" class="sidebar-item flex items-center py-2 px-4 rounded-lg hover:bg-indigo-50 text-gray-700 hover:text-indigo-700" onclick="loadCourse('design')">
<i class="sidebar-icon fas fa-paint-brush mr-3 text-gray-500 transition-transform"></i>
Design
</a>
</li>
</ul>
</div>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 p-8 overflow-y-auto" style="max-height: calc(100vh - 80px);" id="main-content">
<!-- Dashboard Content (Default) -->
<div id="dashboard-content">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold text-gray-800">Welcome back, Sarah!</h2>
<div class="flex space-x-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> New Course
</button>
</div>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Enrolled Courses</p>
<h3 class="text-2xl font-bold text-gray-800 mt-1">5</h3>
</div>
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
<i class="fas fa-book text-xl"></i>
</div>
</div>
<div class="mt-4 text-sm text-indigo-600 font-medium">
<a href="#" class="hover:underline" onclick="loadPage('my-courses')">View all</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Completed Lessons</p>
<h3 class="text-2xl font-bold text-gray-800 mt-1">23</h3>
</div>
<div class="p-3 rounded-full bg-green-100 text-green-600">
<i class="fas fa-check-circle text-xl"></i>
</div>
</div>
<div class="mt-4 text-sm text-green-600 font-medium">
<a href="#" class="hover:underline" onclick="loadPage('progress')">View progress</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Upcoming Events</p>
<h3 class="text-2xl font-bold text-gray-800 mt-1">3</h3>
</div>
<div class="p-3 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-calendar-alt text-xl"></i>
</div>
</div>
<div class="mt-4 text-sm text-blue-600 font-medium">
<a href="#" class="hover:underline" onclick="loadPage('schedule')">View calendar</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">Unread Messages</p>
<h3 class="text-2xl font-bold text-gray-800 mt-1">7</h3>
</div>
<div class="p-3 rounded-full bg-purple-100 text-purple-600">
<i class="fas fa-comments text-xl"></i>
</div>
</div>
<div class="mt-4 text-sm text-purple-600 font-medium">
<a href="#" class="hover:underline" onclick="loadPage('discussions')">View messages</a>
</div>
</div>
</div>
<!-- Continue Learning -->
<div class="bg-white rounded-xl shadow-md p-6 mb-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold text-gray-800">Continue Learning</h3>
<a href="#" class="text-indigo-600 hover:underline font-medium" onclick="loadPage('my-courses')">View all</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Web Development" class="w-full h-40 object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
<span class="bg-indigo-600 text-white text-xs font-medium px-2 py-0.5 rounded">In Progress</span>
</div>
</div>
<div class="p-4">
<h4 class="font-bold text-gray-800 mb-1">Web Development</h4>
<p class="text-sm text-gray-600 mb-3">HTML, CSS, JavaScript fundamentals</p>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-indigo-600 h-2 rounded-full" style="width: 60%"></div>
</div>
<span class="ml-3 text-sm font-medium text-gray-700">60%</span>
</div>
<button class="mt-4 w-full bg-indigo-50 text-indigo-700 hover:bg-indigo-100 py-2 rounded-lg font-medium" onclick="loadCourse('web-development')">
Continue
</button>
</div>
</div>
<div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58eafe9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mobile Apps" class="w-full h-40 object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
<span class="bg-blue-600 text-white text-xs font-medium px-2 py-0.5 rounded">Not Started</span>
</div>
</div>
<div class="p-4">
<h4 class="font-bold text-gray-800 mb-1">Mobile Apps</h4>
<p class="text-sm text-gray-600 mb-3">React Native and Flutter</p>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
</div>
<span class="ml-3 text-sm font-medium text-gray-700">0%</span>
</div>
<button class="mt-4 w-full bg-blue-50 text-blue-700 hover:bg-blue-100 py-2 rounded-lg font-medium" onclick="loadCourse('mobile-apps')">
Start Learning
</button>
</div>
</div>
<div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Data Science" class="w-full h-40 object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
<span class="bg-green-600 text-white text-xs font-medium px-2 py-0.5 rounded">Completed</span>
</div>
</div>
<div class="p-4">
<h4 class="font-bold text-gray-800 mb-1">Data Science</h4>
<p class="text-sm text-gray-600 mb-3">Python, Pandas, and Machine Learning</p>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
</div>
<span class="ml-3 text-sm font-medium text-gray-700">100%</span>
</div>
<button class="mt-4 w-full bg-green-50 text-green-700 hover:bg-green-100 py-2 rounded-lg font-medium" onclick="loadCourse('data-science')">
View Certificate
</button>
</div>
</div>
</div>
</div>
<!-- Upcoming Events -->
<div class="bg-white rounded-xl shadow-md p-6 mb-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold text-gray-800">Upcoming Events</h3>
<a href="#" class="text-indigo-600 hover:underline font-medium" onclick="loadPage('schedule')">View all</a>
</div>
<div class="space-y-4">
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="bg-indigo-100 text-indigo-800 p-3 rounded-lg mr-4">
<i class="fas fa-calendar-day text-lg"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800">Live Q&A Session</h4>
<p class="text-sm text-gray-600">Web Development Fundamentals</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>Tomorrow • 2:00 PM - 3:30 PM</span>
</div>
</div>
<button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium">
Join
</button>
</div>
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="bg-blue-100 text-blue-800 p-3 rounded-lg mr-4">
<i class="fas fa-chalkboard-teacher text-lg"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800">Workshop: Mobile UI Design</h4>
<p class="text-sm text-gray-600">Mobile Apps Course</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>June 25 • 10:00 AM - 12:00 PM</span>
</div>
</div>
<button class="ml-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
Remind Me
</button>
</div>
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="bg-purple-100 text-purple-800 p-3 rounded-lg mr-4">
<i class="fas fa-certificate text-lg"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-gray-800">Final Exam Deadline</h4>
<p class="text-sm text-gray-600">Data Science Course</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>June 30 • 11:59 PM</span>
</div>
</div>
<button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium">
Start Exam
</button>
</div>
</div>
</div>
<!-- Recent Discussions -->
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold text-gray-800">Recent Discussions</h3>
<a href="#" class="text-indigo-600 hover:underline font-medium" onclick="loadPage('discussions')">View all</a>
</div>
<div class="space-y-4">
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium text-gray-800">Michael Johnson</h4>
<span class="text-xs text-gray-500">2 hours ago</span>
</div>
<p class="text-sm text-gray-600 mt-1">Has anyone completed the final project for Web Development? I'm stuck on the responsive design part...</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-comment mr-1.5"></i>
<span>5 replies</span>
<span class="ml-4 flex items-center">
<i class="fas fa-thumbs-up mr-1.5"></i>
<span>12 likes</span>
</span>
</div>
</div>
</div>
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium text-gray-800">Emily Chen</h4>
<span class="text-xs text-gray-500">5 hours ago</span>
</div>
<p class="text-sm text-gray-600 mt-1">Just shared some additional resources for the Data Science course in the resources section. Check it out!</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-comment mr-1.5"></i>
<span>3 replies</span>
<span class="ml-4 flex items-center">
<i class="fas fa-thumbs-up mr-1.5"></i>
<span>8 likes</span>
</span>
</div>
</div>
</div>
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-10 h-10 rounded-full mr-4">
<div class="flex-1">
<div class="flex items-center justify-between">
<h4 class="font-medium text-gray-800">David Wilson</h4>
<span class="text-xs text-gray-500">1 day ago</span>
</div>
<p class="text-sm text-gray-600 mt-1">Can someone explain the difference between React Native and Flutter? Trying to decide which mobile framework to learn first.</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-comment mr-1.5"></i>
<span>14 replies</span>
<span class="ml-4 flex items-center">
<i class="fas fa-thumbs-up mr-1.5"></i>
<span>22 likes</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- My Courses Content -->
<div id="my-courses-content" class="hidden">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold text-gray-800">My Courses</h2>
<div class="flex space-x-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> New Course
</button>
</div>
</div>
<!-- Course Filter -->
<div class="bg-white rounded-xl shadow-md p-4 mb-8">
<div class="flex flex-wrap items-center justify-between">
<div class="flex space-x-2 mb-4 md:mb-0">
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">All</button>
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">In Progress</button>
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Completed</button>
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Not Started</button>
</div>
<div class="relative">
<select class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option>Sort by: Recent</option>
<option>Sort by: A-Z</option>
<option>Sort by: Progress</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</div>
</div>
<!-- Courses Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Web Development Course -->
<div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Web Development" class="w-full h-40 object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
<span class="bg-indigo-600 text-white text-xs font-medium px-2 py-0.5 rounded">In Progress</span>
</div>
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-gray-800">Web Development</h4>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm font-medium">4.8</span>
</div>
</div>
<p class="text-sm text-gray-600 mb-3">HTML, CSS, JavaScript fundamentals</p>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-book-open mr-1.5"></i>
<span>12 Lessons</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>8h 30m</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-indigo-600 h-2 rounded-full" style="width: 60%"></div>
</div>
<span class="ml-3 text-sm font-medium text-gray-700">60%</span>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="bg-indigo-50 text-indigo-700 hover:bg-indigo-100 py-2 rounded-lg font-medium" onclick="loadCourse('web-development')">
Continue
</button>
<button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
Details
</button>
</div>
</div>
</div>
<!-- Mobile Apps Course -->
<div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58eafe9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mobile Apps" class="w-full h-40 object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
<span class="bg-blue-600 text-white text-xs font-medium px-2 py-0.5 rounded">Not Started</span>
</div>
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-gray-800">Mobile Apps</h4>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm font-medium">4.6</span>
</div>
</div>
<p class="text-sm text-gray-600 mb-3">React Native and Flutter</p>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-book-open mr-1.5"></i>
<span>10 Lessons</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>6h 45m</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
</div>
<span class="ml-3 text-sm font-medium text-gray-700">0%</span>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="bg-blue-50 text-blue-700 hover:bg-blue-100 py-2 rounded-lg font-medium" onclick="loadCourse('mobile-apps')">
Start
</button>
<button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
Details
</button>
</div>
</div>
</div>
<!-- Data Science Course -->
<div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Data Science" class="w-full h-40 object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
<span class="bg-green-600 text-white text-xs font-medium px-2 py-0.5 rounded">Completed</span>
</div>
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-gray-800">Data Science</h4>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm font-medium">4.9</span>
</div>
</div>
<p class="text-sm text-gray-600 mb-3">Python, Pandas, and Machine Learning</p>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-book-open mr-1.5"></i>
<span>15 Lessons</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>12h 20m</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div>
</div>
<span class="ml-3 text-sm font-medium text-gray-700">100%</span>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="bg-green-50 text-green-700 hover:bg-green-100 py-2 rounded-lg font-medium" onclick="loadCourse('data-science')">
Certificate
</button>
<button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
Details
</button>
</div>
</div>
</div>
<!-- Design Course -->
<div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Design" class="w-full h-40 object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
<span class="bg-purple-600 text-white text-xs font-medium px-2 py-0.5 rounded">In Progress</span>
</div>
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-gray-800">UI/UX Design</h4>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm font-medium">4.7</span>
</div>
</div>
<p class="text-sm text-gray-600 mb-3">Figma, Adobe XD, and User Research</p>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-book-open mr-1.5"></i>
<span>8 Lessons</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>5h 15m</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 30%"></div>
</div>
<span class="ml-3 text-sm font-medium text-gray-700">30%</span>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="bg-purple-50 text-purple-700 hover:bg-purple-100 py-2 rounded-lg font-medium" onclick="loadCourse('design')">
Continue
</button>
<button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
Details
</button>
</div>
</div>
</div>
<!-- Cybersecurity Course -->
<div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cybersecurity" class="w-full h-40 object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
<span class="bg-red-600 text-white text-xs font-medium px-2 py-0.5 rounded">Not Started</span>
</div>
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-gray-800">Cybersecurity</h4>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm font-medium">4.5</span>
</div>
</div>
<p class="text-sm text-gray-600 mb-3">Ethical Hacking and Network Security</p>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-book-open mr-1.5"></i>
<span>14 Lessons</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>10h 00m</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-600 h-2 rounded-full" style="width: 0%"></div>
</div>
<span class="ml-3 text-sm font-medium text-gray-700">0%</span>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="bg-red-50 text-red-700 hover:bg-red-100 py-2 rounded-lg font-medium" onclick="loadCourse('cybersecurity')">
Start
</button>
<button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
Details
</button>
</div>
</div>
</div>
<!-- Cloud Computing Course -->
<div class="course-card bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-all duration-300">
<div class="relative">
<img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Cloud Computing" class="w-full h-40 object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
<span class="bg-orange-600 text-white text-xs font-medium px-2 py-0.5 rounded">In Progress</span>
</div>
</div>
<div class="p-4">
<div class="flex justify-between items-start mb-2">
<h4 class="font-bold text-gray-800">Cloud Computing</h4>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400 mr-1"></i>
<span class="text-sm font-medium">4.4</span>
</div>
</div>
<p class="text-sm text-gray-600 mb-3">AWS, Azure, and Google Cloud</p>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-book-open mr-1.5"></i>
<span>9 Lessons</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>7h 30m</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-orange-600 h-2 rounded-full" style="width: 45%"></div>
</div>
<span class="ml-3 text-sm font-medium text-gray-700">45%</span>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="bg-orange-50 text-orange-700 hover:bg-orange-100 py-2 rounded-lg font-medium" onclick="loadCourse('cloud-computing')">
Continue
</button>
<button class="border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 rounded-lg font-medium">
Details
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Schedule Content -->
<div id="schedule-content" class="hidden">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold text-gray-800">My Schedule</h2>
<div class="flex space-x-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Add Event
</button>
</div>
</div>
<!-- Calendar Navigation -->
<div class="bg-white rounded-xl shadow-md p-4 mb-6">
<div class="flex flex-wrap items-center justify-between">
<div class="flex items-center space-x-4 mb-4 md:mb-0">
<button class="p-2 rounded-full hover:bg-gray-100">
<i class="fas fa-chevron-left"></i>
</button>
<h3 class="text-xl font-bold text-gray-800">June 2023</h3>
<button class="p-2 rounded-full hover:bg-gray-100">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="flex space-x-2">
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">Month</button>
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Week</button>
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">Day</button>
</div>
</div>
</div>
<!-- Calendar Grid -->
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
<div class="grid grid-cols-7 gap-px bg-gray-200">
<!-- Weekday Headers -->
<div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Sun</div>
<div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Mon</div>
<div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Tue</div>
<div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Wed</div>
<div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Thu</div>
<div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Fri</div>
<div class="bg-gray-100 py-2 text-center font-medium text-gray-700">Sat</div>
<!-- Calendar Days -->
<!-- Week 1 -->
<div class="bg-white p-1 h-32">
<div class="text-right p-1 text-gray-400">28</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1 text-gray-400">29</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1 text-gray-400">30</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1 text-gray-400">31</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">1</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">2</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">3</div>
</div>
<!-- Week 2 -->
<div class="bg-white p-1 h-32">
<div class="text-right p-1">4</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">5</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">6</div>
<div class="mt-1 text-xs p-1 bg-indigo-100 text-indigo-800 rounded truncate">Web Dev Q&A</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">7</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">8</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">9</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">10</div>
</div>
<!-- Week 3 -->
<div class="bg-white p-1 h-32">
<div class="text-right p-1">11</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">12</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">13</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">14</div>
<div class="mt-1 text-xs p-1 bg-blue-100 text-blue-800 rounded truncate">Mobile UI Workshop</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">15</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">16</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">17</div>
</div>
<!-- Week 4 -->
<div class="bg-white p-1 h-32">
<div class="text-right p-1">18</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">19</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">20</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">21</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">22</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">23</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">24</div>
</div>
<!-- Week 5 -->
<div class="bg-white p-1 h-32">
<div class="text-right p-1">25</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">26</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">27</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">28</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">29</div>
<div class="mt-1 text-xs p-1 bg-purple-100 text-purple-800 rounded truncate">Data Science Exam</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1">30</div>
</div>
<div class="bg-white p-1 h-32">
<div class="text-right p-1 text-gray-400">1</div>
</div>
</div>
</div>
<!-- Upcoming Events List -->
<div class="bg-white rounded-xl shadow-md p-6">
<h3 class="text-xl font-bold text-gray-800 mb-6">Upcoming Events</h3>
<div class="space-y-4">
<!-- Event 1 -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="bg-indigo-100 text-indigo-800 p-3 rounded-lg mr-4">
<i class="fas fa-calendar-day text-lg"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-start">
<h4 class="font-medium text-gray-800">Live Q&A Session</h4>
<span class="text-sm text-gray-500">Tomorrow</span>
</div>
<p class="text-sm text-gray-600">Web Development Fundamentals</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>2:00 PM - 3:30 PM</span>
<span class="mx-2">•</span>
<i class="fas fa-video mr-1.5"></i>
<span>Zoom Meeting</span>
</div>
</div>
<button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium">
Join
</button>
</div>
<!-- Event 2 -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="bg-blue-100 text-blue-800 p-3 rounded-lg mr-4">
<i class="fas fa-chalkboard-teacher text-lg"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-start">
<h4 class="font-medium text-gray-800">Workshop: Mobile UI Design</h4>
<span class="text-sm text-gray-500">June 14</span>
</div>
<p class="text-sm text-gray-600">Mobile Apps Course</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>10:00 AM - 12:00 PM</span>
<span class="mx-2">•</span>
<i class="fas fa-map-marker-alt mr-1.5"></i>
<span>Room 302</span>
</div>
</div>
<button class="ml-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
Remind Me
</button>
</div>
<!-- Event 3 -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="bg-purple-100 text-purple-800 p-3 rounded-lg mr-4">
<i class="fas fa-certificate text-lg"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-start">
<h4 class="font-medium text-gray-800">Final Exam Deadline</h4>
<span class="text-sm text-gray-500">June 29</span>
</div>
<p class="text-sm text-gray-600">Data Science Course</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>11:59 PM</span>
<span class="mx-2">•</span>
<i class="fas fa-laptop mr-1.5"></i>
<span>Online</span>
</div>
</div>
<button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium">
Start Exam
</button>
</div>
<!-- Event 4 -->
<div class="flex items-start p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
<div class="bg-green-100 text-green-800 p-3 rounded-lg mr-4">
<i class="fas fa-users text-lg"></i>
</div>
<div class="flex-1">
<div class="flex justify-between items-start">
<h4 class="font-medium text-gray-800">Study Group Meeting</h4>
<span class="text-sm text-gray-500">June 18</span>
</div>
<p class="text-sm text-gray-600">Web Development Study Group</p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i class="fas fa-clock mr-1.5"></i>
<span>4:00 PM - 5:30 PM</span>
<span class="mx-2">•</span>
<i class="fas fa-map-marker-alt mr-1.5"></i>
<span>Library Study Room</span>
</div>
</div>
<button class="ml-4 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium">
RSVP
</button>
</div>
</div>
</div>
</div>
<!-- Progress Content -->
<div id="progress-content" class="hidden">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold text-gray-800">My Progress</h2>
<div class="flex space-x-4">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-download mr-2"></i> Export
</button>
</div>
</div>
<!-- Overall Progress -->
<div class="bg-white rounded-xl shadow-md p-6 mb-8">
<h3 class="text-xl font-bold text-gray-800 mb-6">Overall Progress</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<!-- Completion Rate -->
<div class="bg-indigo-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h4 class="font-medium text-indigo-800">Completion Rate</h4>
<span class="text-2xl font-bold text-indigo-700">42%</span>
</div>
<div class="w-full bg-white rounded-full h-2">
<div class="bg-indigo-600 h-2 rounded-full" style="width: 42%"></div>
</div>
<p class="text-sm text-indigo-600 mt-2">You've completed 23 of 55 lessons</p>
</div>
<!-- Time Spent -->
<div class="bg-blue-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h4 class="font-medium text-blue-800">Time Spent</h4>
<span class="text-2xl font-bold text-blue-700">18h 45m</span>
</div>
<div class="w-full bg-white rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
</div>
<p class="text-sm text-blue-600 mt-2">Average 3h 45m per week</p>
</div>
<!-- Certificates Earned -->
<div class="bg-green-50 rounded-lg p-4">
<div class="flex items-center justify-between mb-2">
<h4 class="font-medium text-green-800">Certificates</h4>
<span class="text-2xl font-bold text-green-700">1</span>
</div>
<div class="w-full bg-white rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 20%"></div>
</div>
<p class="text-sm text-green-600 mt-2">1 of 5 courses completed</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Activity Calendar -->
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h4 class="font-medium text-gray-800 mb-4">Activity Calendar</h4>
<div class="grid grid-cols-7 gap-1 text-center text-xs">
<div class="text-gray-500">M</div>
<div class="text-gray-500">T</div>
<div class="text-gray-500">W</div>
<div class="text-gray-500">T</div>
<div class="text-gray-500">F</div>
<div class="text-gray-500">S</div>
<div class="text-gray-500">S</div>
<!-- Week 1 -->
<div class="h-4"></div>
<div class="h-4 bg-gray-200 rounded-sm"></div>
<div class="h-4 bg-gray-300 rounded-sm"></div>
<div class="h-4 bg-gray-400 rounded-sm"></div>
<div class="h-4 bg-indigo-300 rounded-sm"></div>
<div class="h-4 bg-indigo-500 rounded-sm"></div>
<div class="h-4"></div>
<!-- Week 2 -->
<div class="h-4"></div>
<div class="h-4 bg-indigo-400 rounded-sm"></div>
<div class="h-4 bg-indigo-600 rounded-sm"></div>
<div class="h-4 bg-gray-200 rounded-sm"></div>
<div class="h-4 bg-gray-300 rounded-sm"></div>
<div class="h-4 bg-indigo-300 rounded-sm"></div>
<div class="h-4"></div>
<!-- Week 3 -->
<div class="h-4"></div>
<div class="h-4 bg-indigo-500 rounded-sm"></div>
<div class="h-4 bg-gray-200 rounded-sm"></div>
<div class="h-4 bg-indigo-300 rounded-sm"></div>
<div class="h-4 bg-indigo-700 rounded-sm"></div>
<div class="h-4 bg-gray-400 rounded-sm"></div>
<div class="h-4"></div>
<!-- Week 4 -->
<div class="h-4"></div>
<div class="h-4 bg-gray-300 rounded-sm"></div>
<div class="h-4 bg-indigo-400 rounded-sm"></div>
<div class="h-4 bg-indigo-600 rounded-sm"></div>
<div class="h-4 bg-gray-200 rounded-sm"></div>
<div class="h-4 bg-indigo-300 rounded-sm"></div>
<div class="h-4"></div>
<!-- Week 5 -->
<div class="h-4"></div>
<div class="h-4 bg-indigo-500 rounded-sm"></div>
<div class="h-4 bg-gray-400 rounded-sm"></div>
<div class="h-4 bg-indigo-700 rounded-sm"></div>
<div class="h-4 bg-indigo-300 rounded-sm"></div>
<div class="h-4 bg-gray-200 rounded-sm"></div>
<div class="h-4"></div>
</div>
<div class="mt-4 flex items-center justify-between text-xs text-gray-500">
<span>Less</span>
<div class="flex space-x-1">
<div class="w-3 h-3 bg-gray-200 rounded-sm"></div>
<div class="w-3 h-3 bg-gray-300 rounded-sm"></div>
<div class="w-3 h-3 bg-gray-400 rounded-sm"></div>
<div class="w-3 h-3 bg-indigo-300 rounded-sm"></div>
<div class="w-3 h-3 bg-indigo-400 rounded-sm"></div>
<div class="w-3 h-3 bg-indigo-500 rounded-sm"></div>
<div class="w-3 h-3 bg-indigo-600 rounded-sm"></div>
<div class="w-3 h-3 bg-indigo-700 rounded-sm"></div>
</div>
<span>More</span>
</div>
</div>
<!-- Learning Streak -->
<div class="bg-white border border-gray-200 rounded-lg p-4">
<h4 class="font-medium text-gray-800 mb-4">Learning Streak</h4>
<div class="flex items-center">
<div class="text-4xl font-bold text-indigo-600 mr-4">7</div>
<div>
<p class="text-sm text-gray-600">days in a row</p>
<p class="text-xs text-indigo-600 mt-1">Keep it up! 3 more days for a new badge.</p>
</div>
</div>
<div class="mt-4 flex space-x-2">
<div class="p-2 bg-yellow-100 text-yellow-800 rounded-full">
<i class="fas fa-fire"></i>
</div>
<div class="p-2 bg-yellow-100 text-yellow-800 rounded-full">
<i class="fas fa-trophy"></i>
</div>
<div class="p-2 bg-gray-100 text-gray-400 rounded-full">
<i class="fas fa-medal"></i>
</div>
<div class="p-2 bg-gray-100 text-gray-400 rounded-full">
<i class="fas fa-award"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Course Progress -->
<div class="bg-white rounded-xl shadow-md p-6">
<h3 class="text-xl font-bold text-gray-800 mb-6">Course Progress</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lessons</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time Spent</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<!-- Web Development -->
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-lg flex items-center justify-center">
<i class="fas fa-laptop-code text-indigo-600"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Web Development</div>
<div class="text-sm text-gray-500">HTML, CSS, JavaScript</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-20 mr-3">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-indigo-600 h-2 rounded-full" style="width: 60%"></div>
</div>
</div>
<span class="text-sm font-medium text-gray-700">60%</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-sm text-gray-700">7/12</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-sm text-gray-700">5h
</html>