Spaces:
Running
Running
File size: 8,267 Bytes
9b3316e fd7890a 9b3316e fd7890a 9b3316e | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard | 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">
<h1 class="text-2xl font-bold text-gray-900 mb-6">Dashboard Overview</h1>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="card p-6 bg-white rounded-xl shadow-md hover-grow" data-animate>
<div class="flex items-center">
<div class="p-3 rounded-full bg-gradient-to-br from-blue-100 to-blue-200 text-blue-600 mr-4 shadow-inner">
<i class="fas fa-book-open text-lg"></i>
</div>
<div>
<p class="text-sm text-gray-500">Active Courses</p>
<p class="text-2xl font-bold">12</p>
</div>
</div>
</div>
<div class="card p-6 bg-white rounded-lg shadow-sm">
<div class="flex items-center">
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
<i class="fas fa-users"></i>
</div>
<div>
<p class="text-sm text-gray-500">Students</p>
<p class="text-2xl font-bold">142</p>
</div>
</div>
</div>
<div class="card p-6 bg-white rounded-lg shadow-sm">
<div class="flex items-center">
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
<i class="fas fa-tasks"></i>
</div>
<div>
<p class="text-sm text-gray-500">Assignments</p>
<p class="text-2xl font-bold">24</p>
</div>
</div>
</div>
<div class="card p-6 bg-white rounded-lg shadow-sm">
<div class="flex items-center">
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
<i class="fas fa-chart-line"></i>
</div>
<div>
<p class="text-sm text-gray-500">Engagement</p>
<p class="text-2xl font-bold">78%</p>
</div>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="card p-6 mb-8">
<h2 class="text-xl font-bold text-gray-900 mb-4">Recent Activity</h2>
<div class="space-y-4">
<div class="flex items-start">
<div class="p-2 rounded-full bg-gray-100 text-gray-600 mr-3">
<i class="fas fa-file-alt"></i>
</div>
<div class="flex-1">
<p class="font-medium">You created a new slide "Advanced Calculus"</p>
<p class="text-sm text-gray-500">2 hours ago</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-gray-100 text-gray-600 mr-3">
<i class="fas fa-check-circle"></i>
</div>
<div class="flex-1">
<p class="font-medium">Student completed assignment "History Essay"</p>
<p class="text-sm text-gray-500">5 hours ago</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-gray-100 text-gray-600 mr-3">
<i class="fas fa-comment"></i>
</div>
<div class="flex-1">
<p class="font-medium">New comment on "Biology Basics"</p>
<p class="text-sm text-gray-500">1 day ago</p>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="card p-6">
<h2 class="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="slides.html" class="flex flex-col items-center justify-center p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition">
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2">
<i class="fas fa-file-alt"></i>
</div>
<span class="text-sm font-medium">New Slide</span>
</a>
<a href="blocks.html" class="flex flex-col items-center justify-center p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition">
<div class="p-3 rounded-full bg-green-100 text-green-600 mb-2">
<i class="fas fa-th"></i>
</div>
<span class="text-sm font-medium">New Block</span>
</a>
<a href="assessments.html" class="flex flex-col items-center justify-center p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition">
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2">
<i class="fas fa-edit"></i>
</div>
<span class="text-sm font-medium">New Quiz</span>
</a>
<a href="#" class="flex flex-col items-center justify-center p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition">
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2">
<i class="fas fa-bolt"></i>
</div>
<span class="text-sm font-medium">AI Assistant</span>
</a>
</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> |