Spaces:
Running
Running
File size: 9,338 Bytes
b2e1ab5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blocks | 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 Content Blocks</h1>
<button class="btn-primary">
<i class="fas fa-plus mr-2"></i> New Block
</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 blocks..." 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="Text">Text</option>
<option value="Image">Image</option>
<option value="Video">Video</option>
<option value="Quiz">Quiz</option>
<option value="Interactive">Interactive</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="blocks-container">
<!-- Block 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-font text-blue-600"></i>
</div>
<div>
<h3 class="font-medium">Introduction Text</h3>
<p class="text-sm text-gray-500">Text Block</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-align-left 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">Text</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>
<!-- Block 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-image text-green-600"></i>
</div>
<div>
<h3 class="font-medium">Biology Diagram</h3>
<p class="text-sm text-gray-500">Image Block</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">Image</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>
<!-- Block 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-play text-purple-600"></i>
</div>
<div>
<h3 class="font-medium">Chemistry Experiment</h3>
<p class="text-sm text-gray-500">Video Block</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-video 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">Video</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> |