File size: 12,007 Bytes
1d9b079 cdf3a4e 1d9b079 cdf3a4e 1d9b079 cdf3a4e 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 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DANTE: Learning Universe Portal 🌟</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);
}
.floating-card {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</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>
</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">
<div class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center">
<i data-feather="book-open" class="text-white"></i>
</div>
<div>
<h1 class="text-2xl font-bold gradient-text">DANTE</h1>
<p class="text-sm text-gray-600 dark:text-gray-400">Learning Universe Portal 🌟</p>
</div>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="text-center mb-16">
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6">
Welcome to <span class="gradient-text">DANTE</span>
</h1>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Your gateway to interactive learning, collaboration, and academic excellence.
Join our educational universe today!
</p>
</div>
<!-- Main Access Cards -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Login Card -->
<div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
<div class="w-20 h-20 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center mb-6 mx-auto">
<i data-feather="log-in" class="w-10 h-10 text-white"></i>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Login</h3>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">
Access your personalized learning dashboard
</p>
<a href="login.html" class="w-full bg-primary hover:bg-blue-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
<i data-feather="arrow-right" class="w-4 h-4"></i>
<span>Enter Portal</span>
</a>
</div>
<!-- Sign Up Card -->
<div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
<div class="w-20 h-20 bg-gradient-to-r from-secondary to-accent rounded-full flex items-center justify-center mb-6 mx-auto" style="animation-delay: 2s;">
<i data-feather="user-plus" class="w-10 h-10 text-white"></i>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Sign Up</h3>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">
Join our educational community today
</p>
<a href="signup.html" class="w-full bg-secondary hover:bg-purple-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
<i data-feather="users" class="w-4 h-4"></i>
<span>Create Account</span>
</a>
</div>
<!-- Teacher Page Card -->
<div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
<div class="w-20 h-20 bg-gradient-to-r from-accent to-green-500 rounded-full flex items-center justify-center mb-6 mx-auto" style="animation-delay: 4s;">
<i data-feather="award" class="w-10 h-10 text-white"></i>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Teacher Portal</h3>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">
Manage classes, upload materials, and track progress
</p>
<a href="teacher.html" class="w-full bg-accent hover:bg-cyan-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
<i data-feather="book" class="w-4 h-4"></i>
<span>Educator Access</span>
</a>
</div>
<!-- Student Page Card -->
<div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
<div class="w-20 h-20 bg-gradient-to-r from-green-500 to-yellow-500 rounded-full flex items-center justify-center mb-6 mx-auto" style="animation-delay: 1s;">
<i data-feather="graduation-cap" class="w-10 h-10 text-white"></i>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Student Hub</h3>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">
Access courses, track progress, and submit assignments
</p>
<a href="student.html" class="w-full bg-green-500 hover:bg-green-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
<i data-feather="trending-up" class="w-4 h-4"></i>
<span>Learn & Grow</span>
</a>
</div>
<!-- Admin Dashboard Card -->
<div class="floating-card glass-effect rounded-2xl p-8 text-gray-800 dark:text-white">
<div class="w-20 h-20 bg-gradient-to-r from-yellow-500 to-red-500 rounded-full flex items-center justify-center mb-6 mx-auto" style="animation-delay: 3s;">
<i data-feather="settings" class="w-10 h-10 text-white"></i>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Admin Center</h3>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">
System management, user control, and analytics
</p>
<a href="admin.html" class="w-full bg-yellow-500 hover:bg-yellow-700 text-white py-3 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
<i data-feather="shield" class="w-4 h-4"></i>
<span>System Control</span>
</a>
</div>
</div>
<!-- Features Overview -->
<div class="mt-20 glass-effect rounded-2xl p-8 max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white text-center mb-8">Why Choose EduSphere?</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="flex items-start space-x-4">
<i data-feather="zap" class="w-6 h-6 text-primary mt-1"></i>
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Interactive Learning</h3>
<p class="text-gray-600 dark:text-gray-300">Engage with dynamic content and real-time collaboration tools</p>
</div>
</div>
<div class="flex items-start space-x-4">
<i data-feather="users" class="w-6 h-6 text-primary mt-1"></i>
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Community Driven</h3>
<p class="text-gray-600 dark:text-gray-300">Connect with peers and educators in a supportive environment</p>
</div>
</div>
<div class="flex items-start space-x-4">
<i data-feather="bar-chart-2" class="w-6 h-6 text-primary mt-1"></i>
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Progress Tracking</h3>
<p class="text-gray-600 dark:text-gray-300">Monitor your academic journey with detailed analytics</p>
</div>
</div>
<div class="flex items-start space-x-4">
<i data-feather="smartphone" class="w-6 h-6 text-primary mt-1"></i>
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Mobile Friendly</h3>
<p class="text-gray-600 dark:text-gray-300">Learn anytime, anywhere with our responsive design</p>
</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> |