Raihan-R/quantum-physics-playground
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Register | Quantum Physics Playground</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Inter:wght@300;400;500&display=swap');13 14 :root {15 --primary-dark: #0f1419;16 --secondary-dark: #1a1a2e;17 --accent-blue: #00a8e8;18 --accent-cyan: #08d9d6;19 --accent-purple: #a239ca;20 }21 22 body {23 font-family: 'Inter', sans-serif;24 background-color: var(--primary-dark);25 color: white;26 }27 28 .glass-card {29 background: rgba(45, 48, 71, 0.7);30 backdrop-filter: blur(10px);31 border: 1px solid rgba(255, 255, 255, 0.1);32 border-radius: 16px;33 }34 35 .input-field {36 background: rgba(255, 255, 255, 0.05);37 border: 1px solid rgba(255, 255, 255, 0.1);38 transition: all 0.3s ease;39 }40 41 .input-field:focus {42 border-color: var(--accent-blue);43 box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.2);44 }45 46 .glow-button {47 transition: all 0.3s ease;48 box-shadow: 0 0 15px rgba(0, 168, 232, 0.3);49 }50 51 .glow-button:hover {52 box-shadow: 0 0 25px rgba(0, 168, 232, 0.6);53 transform: translateY(-2px);54 }55 56 .tab-button {57 transition: all 0.3s ease;58 }59 60 .tab-button.active {61 background: rgba(0, 168, 232, 0.2);62 border-bottom: 3px solid var(--accent-blue);63 }64 </style>65</head>66<body class="min-h-screen flex items-center justify-center">67 <!-- Vanta.js Background -->68 <div id="vanta-bg" class="fixed inset-0 -z-10"></div>69 70 <!-- Register Container -->71 <div class="glass-card p-10 w-full max-w-md mx-4">72 <div class="text-center mb-8">73 <i data-feather="atom" class="text-accent-cyan w-12 h-12 mx-auto mb-4"></i>74 <h1 class="text-3xl font-bold font-['Exo_2'] bg-gradient-to-r from-accent-blue to-accent-purple bg-clip-text text-transparent">75 Create Your Account76 </h1>77 <p class="text-gray-400 mt-2">Join our physics learning community</p>78 </div>79 80 <!-- Tab Navigation -->81 <div class="flex mb-8 border-b border-gray-700">82 <button class="tab-button active flex-1 py-3 font-medium text-center" data-tab="student">83 <i data-feather="user" class="inline mr-2"></i> Student84 </button>85 <button class="tab-button flex-1 py-3 font-medium text-center" data-tab="teacher">86 <i data-feather="book" class="inline mr-2"></i> Teacher87 </button>88 </div>89 90 <!-- Student Register Form -->91 <form id="student-form" class="space-y-4">92 <div>93 <label for="student-name" class="block text-sm font-medium text-gray-300 mb-2">Full Name</label>94 <input type="text" id="student-name" class="input-field w-full px-4 py-3 rounded-lg" placeholder="John Doe" required>95 </div>96 97 <div>98 <label for="student-email" class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>99 <div class="relative">100 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">101 <i data-feather="mail" class="text-gray-500"></i>102 </div>103 <input type="email" id="student-email" class="input-field w-full pl-10 pr-3 py-3 rounded-lg" placeholder="student@example.com" required>104 </div>105 </div>106 107 <div>108 <label for="student-password" class="block text-sm font-medium text-gray-300 mb-2">Password</label>109 <div class="relative">110 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">111 <i data-feather="lock" class="text-gray-500"></i>112 </div>113 <input type="password" id="student-password" class="input-field w-full pl-10 pr-3 py-3 rounded-lg" placeholder="••••••••" required>114 </div>115 </div>116 117 <div>118 <label for="student-confirm-password" class="block text-sm font-medium text-gray-300 mb-2">Confirm Password</label>119 <div class="relative">120 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">121 <i data-feather="lock" class="text-gray-500"></i>122 </div>123 <input type="password" id="student-confirm-password" class="input-field w-full pl-10 pr-3 py-3 rounded-lg" placeholder="••••••••" required>124 </div>125 </div>126 127 <div class="flex items-center">128 <input id="student-terms" name="terms" type="checkbox" class="h-4 w-4 text-accent-blue focus:ring-accent-blue border-gray-600 rounded" required>129 <label for="student-terms" class="ml-2 block text-sm text-gray-300">130 I agree to the <a href="#" class="text-accent-blue hover:text-accent-cyan">Terms of Service</a> and <a href="#" class="text-accent-blue hover:text-accent-cyan">Privacy Policy</a>131 </label>132 </div>133 134 <button type="submit" class="w-full bg-accent-blue hover:bg-accent-cyan text-white py-3 px-4 rounded-lg glow-button font-medium flex items-center justify-center transition duration-300 mt-4">135 <i data-feather="user-plus" class="mr-2"></i>136 Create Student Account137 </button>138 139 <div class="text-center text-sm text-gray-400 mt-4">140 Already have an account? <a href="/login.html" class="text-accent-blue hover:text-accent-cyan font-medium">Sign in here</a>141 </div>142 </form>143 144 <!-- Teacher Register Form (hidden by default) -->145 <form id="teacher-form" class="space-y-4 hidden">146 <div>147 <label for="teacher-name" class="block text-sm font-medium text-gray-300 mb-2">Full Name</label>148 <input type="text" id="teacher-name" class="input-field w-full px-4 py-3 rounded-lg" placeholder="Jane Smith" required>149 </div>150 151 <div>152 <label for="teacher-email" class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>153 <div class="relative">154 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">155 <i data-feather="mail" class="text-gray-500"></i>156 </div>157 <input type="email" id="teacher-email" class="input-field w-full pl-10 pr-3 py-3 rounded-lg" placeholder="teacher@example.com" required>158 </div>159 </div>160 161 <div>162 <label for="teacher-school" class="block text-sm font-medium text-gray-300 mb-2">School/Institution</label>163 <input type="text" id="teacher-school" class="input-field w-full px-4 py-3 rounded-lg" placeholder="Your School Name" required>164 </div>165 166 <div>167 <label for="teacher-password" class="block text-sm font-medium text-gray-300 mb-2">Password</label>168 <div class="relative">169 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">170 <i data-feather="lock" class="text-gray-500"></i>171 </div>172 <input type="password" id="teacher-password" class="input-field w-full pl-10 pr-3 py-3 rounded-lg" placeholder="••••••••" required>173 </div>174 </div>175 176 <div>177 <label for="teacher-confirm-password" class="block text-sm font-medium text-gray-300 mb-2">Confirm Password</label>178 <div class="relative">179 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">180 <i data-feather="lock" class="text-gray-500"></i>181 </div>182 <input type="password" id="teacher-confirm-password" class="input-field w-full pl-10 pr-3 py-3 rounded-lg" placeholder="••••••••" required>183 </div>184 </div>185 186 <div class="flex items-center">187 <input id="teacher-terms" name="terms" type="checkbox" class="h-4 w-4 text-accent-purple focus:ring-accent-purple border-gray-600 rounded" required>188 <label for="teacher-terms" class="ml-2 block text-sm text-gray-300">189 I agree to the <a href="#" class="text-accent-purple hover:text-accent-blue">Terms of Service</a> and <a href="#" class="text-accent-purple hover:text-accent-blue">Privacy Policy</a>190 </label>191 </div>192 193 <button type="submit" class="w-full bg-accent-purple hover:bg-accent-blue text-white py-3 px-4 rounded-lg glow-button font-medium flex items-center justify-center transition duration-300 mt-4">194 <i data-feather="user-plus" class="mr-2"></i>195 Create Teacher Account196 </button>197 198 <div class="text-center text-sm text-gray-400 mt-4">199 Already have an account? <a href="/login.html" class="text-accent-purple hover:text-accent-blue font-medium">Sign in here</a>200 </div>201 </form>202 </div>203 204 <script>205 // Initialize Vanta.js background206 VANTA.NET({207 el: "#vanta-bg",208 mouseControls: true,209 touchControls: true,210 gyroControls: false,211 minHeight: 200.00,212 minWidth: 200.00,213 scale: 1.00,214 scaleMobile: 1.00,215 color: 0x00a8e8,216 backgroundColor: 0x0f1419,217 points: 12.00,218 maxDistance: 20.00,219 spacing: 15.00220 });221 222 // Initialize Feather Icons223 feather.replace();224 225 // Tab switching functionality226 document.addEventListener('DOMContentLoaded', () => {227 const tabButtons = document.querySelectorAll('.tab-button');228 const studentForm = document.getElementById('student-form');229 const teacherForm = document.getElementById('teacher-form');230 231 tabButtons.forEach(button => {232 button.addEventListener('click', () => {233 // Update active tab234 tabButtons.forEach(btn => btn.classList.remove('active'));235 button.classList.add('active');236 237 // Show correct form238 if (button.dataset.tab === 'student') {239 studentForm.classList.remove('hidden');240 teacherForm.classList.add('hidden');241 } else {242 studentForm.classList.add('hidden');243 teacherForm.classList.remove('hidden');244 }245 });246 });247 248 // Form submission249 const forms = document.querySelectorAll('form');250 forms.forEach(form => {251 form.addEventListener('submit', (e) => {252 e.preventDefault();253 // Here you would normally handle the registration254 // For now, just redirect to login255 window.location.href = '/login.html';256 });257 });258 });259 </script>260</body>261</html>