File size: 8,805 Bytes
1d9b079 |
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 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Hub - EduSphere</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#8b5cf6',
accent: '#06b6d4'
}
}
}
}
</script>
<style>
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.dark .glass-effect {
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.progress-ring {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen transition-colors duration-300">
<!-- Theme Toggle -->
<div class="fixed top-4 right-4 z-50">
<button id="themeToggle" class="glass-effect rounded-full p-3 text-gray-600 dark:text-gray-300 hover:scale-110 transition-transform duration-300">
<i data-feather="moon" class="w-5 h-5"></i>
</button>
</div>
<!-- Navigation -->
<nav class="glass-effect border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-4">
<a href="index.html" class="flex items-center space-x-3">
<div class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center">
<i data-feather="graduation-cap" class="text-white"></i>
</div>
<div>
<h1 class="text-white font-bold text-xl">Student Hub</h1>
<p class="text-gray-400 text-sm">Track your progress and access learning materials</p>
</div>
</a>
<div class="flex items-center space-x-4">
<span class="text-white">Ahmed Hassan</span>
<button class="text-gray-400 hover:text-white">
<i data-feather="log-out" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
</nav>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Student Overview -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="glass-effect rounded-xl p-6 text-white">
<div class="text-center">
<div class="relative w-20 h-20 mx-auto mb-4">
<svg class="w-20 h-20">
<circle class="text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="36" cx="40" cy="40"></circle>
<circle class="progress-ring text-green-400" stroke-width="8" stroke-dasharray="226.1946710584651" stroke-dashoffset="0" stroke="currentColor" fill="transparent" r="36" cx="40" cy="40" stroke-linecap="round"></circle>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-white font-bold">87%</span>
</div>
</div>
<p class="text-gray-300">Overall Progress</p>
</div>
</div>
<div class="glass-effect rounded-xl p-6 text-white">
<div class="text-center">
<div class="text-3xl font-bold mb-2">94%</p>
<p class="text-gray-300">Attendance Rate</p>
</div>
</div>
<div class="glass-effect rounded-xl p-6 text-white">
<div class="text-center">
<i data-feather="award" class="w-8 h-8 text-yellow-400 mx-auto mb-2"></i>
<p class="text-3xl font-bold">A</p>
<p class="text-gray-300">Current Grade</p>
</div>
</div>
<div class="glass-effect rounded-xl p-6 text-white">
<div class="text-center">
<i data-feather="file-text" class="w-8 h-8 text-blue-400 mx-auto mb-2"></i>
<p class="text-3xl font-bold">12</p>
<p class="text-gray-300">Completed Courses</p>
</div>
</div>
</div>
<!-- Student Dashboard -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Attendance Section -->
<div class="glass-effect rounded-xl p-6">
<h3 class="text-xl font-bold text-white mb-4">Attendance Overview</h3>
<div class="space-y-4">
<div class="flex justify-between items-center">
<span class="text-gray-300">Mathematics</span>
<span class="text-green-400">96%</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-300">Science</span>
<span class="text-green-400">92%</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-300">English</span>
<span class="text-yellow-400">88%</span>
</div>
</div>
</div>
<!-- Grades Section -->
<div class="glass-effect rounded-xl p-6">
<h3 class="text-xl font-bold text-white mb-4">Current Grades</h4>
<div class="space-y-3">
<div>
<div class="flex justify-between mb-1">
<span class="text-gray-300">History</span>
<span class="text-green-400">A</span>
</div>
<div>
<span class="text-gray-300">Physics</span>
<span class="text-green-400">A-</span>
</div>
</div>
</div>
</div>
<!-- Materials Section -->
<div class="glass-effect rounded-xl p-6">
<h3 class="text-xl font-bold text-white mb-4">Learning Materials</h4>
<div class="space-y-3">
<div class="flex items-center space-x-3">
<i data-feather="download" class="w-4 h-4 text-gray-400"></i>
<div>
<h4 class="text-white font-semibold">Mathematics Notes</h4>
<p class="text-gray-400 text-sm">Prof. Johnson • Updated today</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Theme Toggle
const themeToggle = document.getElementById('themeToggle');
const themeIcon = themeToggle.querySelector('i');
themeToggle.addEventListener('click', () => {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
themeIcon.setAttribute('data-feather', 'moon');
} else {
document.documentElement.classList.add('dark');
themeIcon.setAttribute('data-feather', 'sun');
}
feather.replace();
});
// Initialize feather icons
feather.replace();
</script>
</body>
</html> |