Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Slides | 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 Slides</h1> | |
| <button class="btn-primary"> | |
| <i class="fas fa-plus mr-2"></i> New Slide | |
| </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 slides..." 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">Category</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 Categories</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="slides-container"> | |
| <!-- Slide 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-file-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Introduction to Calculus</h3> | |
| <p class="text-sm text-gray-500">12 slides</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"> | |
| <i class="fas fa-image text-blue-200 text-4xl"></i> | |
| </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"> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-600"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 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-file-alt text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Biology Basics</h3> | |
| <p class="text-sm text-gray-500">8 slides</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"> | |
| <i class="fas fa-image text-green-200 text-4xl"></i> | |
| </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"> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-600"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 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-file-alt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">World History</h3> | |
| <p class="text-sm text-gray-500">15 slides</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"> | |
| <i class="fas fa-image text-purple-200 text-4xl"></i> | |
| </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"> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-600"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </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> |