Spaces:
Running
Running
File size: 7,665 Bytes
fd4a429 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Student - EduFlow Student Hub</title>
<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>
<style>
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>
</head>
<body class="min-h-screen gradient-bg">
<!-- Header -->
<header class="glass-effect text-white shadow-lg">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="book-open" class="w-8 h-8"></i>
<h1 class="text-2xl font-bold">EduFlow Student Hub</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="../index.html" class="hover:text-blue-200 transition-colors">Dashboard</a>
<a href="view.html" class="hover:text-blue-200 transition-colors">Students</a>
<a href="add.html" class="text-blue-200 font-semibold">Add Student</a>
</nav>
<button class="md:hidden">
<i data-feather="menu" class="w-6 h-6"></i>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<div class="max-w-2xl mx-auto">
<div class="glass-effect rounded-xl p-6 text-white">
<div class="flex items-center space-x-2 mb-6">
<i data-feather="user-plus" class="w-6 h-6"></i>
<h2 class="text-2xl font-bold">Add New Student</h2>
</div>
<form id="addStudentForm" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium mb-2">First Name</label>
<input type="text" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
</div>
<div>
<label class="block text-sm font-medium mb-2">Last Name</label>
<input type="text" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">Email Address</label>
<input type="email" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium mb-2">Student ID</label>
<input type="text" required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
</div>
<div>
<label class="block text-sm font-medium mb-2">Phone Number</label>
<input type="tel" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium mb-2">Course</label>
<select required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-blue-300">
<option value="">Select Course</option>
<option value="cs">Computer Science</option>
<option value="math">Mathematics</option>
<option value="phy">Physics</option>
<option value="chem">Chemistry</option>
<option value="bio">Biology</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-2">Year</label>
<select required class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-blue-300">
<option value="">Select Year</option>
<option value="1">Year 1</option>
<option value="2">Year 2</option>
<option value="3">Year 3</option>
<option value="4">Year 4</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">Address</label>
<textarea rows="3" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-300 focus:outline-none focus:border-blue-300"></textarea>
</div>
<div class="flex items-center space-x-2">
<input type="checkbox" id="activeStatus" checked class="rounded bg-white/10 border-white/20">
<label for="activeStatus" class="text-sm">Active Student</label>
</div>
<div class="flex space-x-4 pt-4">
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition-colors">
<i data-feather="save" class="w-4 h-4"></i>
<span>Save Student</span>
</button>
<a href="view.html" class="bg-white/10 hover:bg-white/20 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition-colors">
<i data-feather="x" class="w-4 h-4"></i>
<span>Cancel</span>
</a>
</div>
</form>
</div>
</div>
</main>
<script>
document.getElementById('addStudentForm').addEventListener('submit', function(e) {
e.preventDefault();
// Simulate form submission
const formData = new FormData(this);
const studentData = Object.fromEntries(formData);
alert('Student added successfully!');
window.location.href = 'view.html';
});
feather.replace();
</script>
</body>
</html>
|