Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Projects | EduPulse</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <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"> | |
| </head> | |
| <body class="bg-surface-1"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar Component --> | |
| <script src="components/sidebar.js"></script> | |
| <custom-sidebar></custom-sidebar> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Header Component --> | |
| <script src="components/header.js"></script> | |
| <custom-header></custom-header> | |
| <!-- Main Workspace --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-900">Your Projects</h1> | |
| <button class="btn-primary"> | |
| <i class="fas fa-plus mr-2"></i> New Project | |
| </button> | |
| </div> | |
| <!-- Filters Section --> | |
| <div class="card p-4 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0"> | |
| <div class="flex-1"> | |
| <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Search</label> | |
| <input type="text" id="search" placeholder="Search projects..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> | |
| <select id="category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">All Subjects</option> | |
| <option value="Mathematics">Mathematics</option> | |
| <option value="Science">Science</option> | |
| <option value="History">History</option> | |
| <option value="Literature">Literature</option> | |
| <option value="Languages">Languages</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="sort" class="block text-sm font-medium text-gray-700 mb-1">Sort By</label> | |
| <select id="sort" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="recent">Most Recent</option> | |
| <option value="oldest">Oldest</option> | |
| <option value="name">Name (A-Z)</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button id="reset-filters" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Reset</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="projects-container"> | |
| <!-- Project Card 1 --> | |
| <div class="card glass p-6 card-hover" data-animate> | |
| <div class="flex items-center mb-4"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-book text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Calculus Course</h3> | |
| <p class="text-sm text-gray-500">Last edited 2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg mb-4 flex items-center justify-center"> | |
| <img src="http://static.photos/education/640x360/1" class="w-full h-full object-cover" alt="Project Cover"> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Mathematics</span> | |
| <div class="flex space-x-2"> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-edit"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-red-600"> | |
| <i class="fas fa-trash"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 2 --> | |
| <div class="card glass p-6 card-hover" data-animate data-animate-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-flask text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Biology Lab</h3> | |
| <p class="text-sm text-gray-500">Last edited 1 week ago</p> | |
| </div> | |
| </div> | |
| <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-green-50 to-teal-50 rounded-lg mb-4 flex items-center justify-center"> | |
| <img src="http://static.photos/science/640x360/2" class="w-full h-full object-cover" alt="Project Cover"> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Science</span> | |
| <div class="flex space-x-2"> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-edit"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-red-600"> | |
| <i class="fas fa-trash"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 3 --> | |
| <div class="card glass p-6 card-hover" data-animate data-animate-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-landmark text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">World History</h3> | |
| <p class="text-sm text-gray-500">Last edited 3 weeks ago</p> | |
| </div> | |
| </div> | |
| <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg mb-4 flex items-center justify-center"> | |
| <img src="http://static.photos/travel/640x360/3" class="w-full h-full object-cover" alt="Project Cover"> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded-full">History</span> | |
| <div class="flex space-x-2"> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-edit"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-red-600"> | |
| <i class="fas fa-trash"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/header.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |