File size: 5,947 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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - 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);
}
</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-3">
<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="book-open" class="text-white"></i>
</div>
<span class="text-xl font-bold gradient-text">EduSphere</span>
</a>
</div>
</div>
</div>
</nav>
<!-- Login Form -->
<div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="glass-effect rounded-2xl p-8">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">Welcome Back</h2>
<p class="text-gray-600 dark:text-gray-300">Sign in to your EduSphere account</p>
</div>
<form class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input type="email" class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
<select class="w-full bg-white/50 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="admin">Admin</option>
</select>
</div>
<button type="submit" class="w-full bg-primary hover:bg-blue-700 text-white py-3 rounded-lg transition duration-300">
Sign In
</button>
</form>
<div class="text-center mt-6">
<p class="text-gray-600 dark:text-gray-300">
Don't have an account?
<a href="signup.html" class="text-secondary hover:text-purple-700 font-medium">
Create Account
</a>
</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();
});
// Form submission
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
const role = document.querySelector('select').value;
if (role === 'teacher') {
window.location.href = 'teacher.html';
} else if (role === 'admin') {
window.location.href = 'admin.html';
} else {
window.location.href = 'student.html';
}
});
// Initialize feather icons
feather.replace();
</script>
</body>
</html> |