helpbot/assignment-buddy
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>Sign Up - BrainyBytes</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="components/navbar.js"></script>11 <script src="components/footer.js"></script>12</head>13<body class="bg-gray-100 min-h-screen">14 <custom-navbar></custom-navbar>15 16 <main class="container mx-auto px-4 py-12 flex items-center justify-center">17 <div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-md">18 <div class="text-center mb-8">19 <i data-feather="user-plus" class="text-amber-500 w-12 h-12 mx-auto mb-4"></i>20 <h1 class="text-3xl font-bold">Create Account</h1>21 <p class="text-gray-600">Join BrainyBytes to unlock all features</p>22 </div>23 24 <form id="signupForm" class="space-y-4">25 <div>26 <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>27 <input type="text" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">28 </div>29 30 <div>31 <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>32 <input type="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">33 </div>34 35 <div>36 <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>37 <input type="password" required minlength="8" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">38 <p class="text-xs text-gray-500 mt-1">Minimum 8 characters</p>39 </div>40 41 <div>42 <label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>43 <input type="password" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">44 </div>45 46 <div class="flex items-center">47 <input type="checkbox" id="terms" required class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-gray-300 rounded">48 <label for="terms" class="ml-2 block text-sm text-gray-700">I agree to the <a href="#" class="text-amber-600">Terms</a> and <a href="#" class="text-amber-600">Privacy Policy</a></label>49 </div>50 51 <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded-md transition">52 Create Account53 </button>54 </form>55 56 <div class="mt-6 text-center">57 <p class="text-gray-600">Already have an account? <a href="login.html" class="text-amber-600 hover:text-amber-800 font-medium">Login</a></p>58 </div>59 </div>60 </main>61 62 <custom-footer></custom-footer>63 64 <script src="script.js"></script>65 <script>66 feather.replace();67 </script>68</body>69</html>