| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Register - YourHand.co</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#d946ef', |
| 600: '#c026d3', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .gradient-text { |
| background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| .animate-spin { |
| animation: spin 1s linear infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center"> |
| <div class="max-w-md w-full mx-auto py-12 px-4"> |
| <div class="flex items-center justify-center mb-8"> |
| <i data-feather="hand" class="text-primary-500 w-8 h-8"></i> |
| <span class="text-2xl font-bold gradient-text ml-2">YourHand.co</span> |
| </div> |
|
|
| <div class="bg-gray-800 rounded-xl p-8 shadow-lg"> |
| <h1 class="text-2xl font-bold text-center mb-6">Create Your Account</h1> |
| |
| <form id="registerForm" class="space-y-4"> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label for="firstName" class="block text-sm font-medium mb-1">First Name</label> |
| <input type="text" id="firstName" required |
| class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white"> |
| </div> |
| <div> |
| <label for="lastName" class="block text-sm font-medium mb-1">Last Name</label> |
| <input type="text" id="lastName" required |
| class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white"> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> |
| <input type="email" id="email" required |
| class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white"> |
| </div> |
|
|
| <div> |
| <label for="password" class="block text-sm font-medium mb-1">Password</label> |
| <input type="password" id="password" required minlength="8" |
| class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white"> |
| </div> |
|
|
| <div> |
| <label for="confirmPassword" class="block text-sm font-medium mb-1">Confirm Password</label> |
| <input type="password" id="confirmPassword" required minlength="8" |
| class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 text-white"> |
| </div> |
|
|
| <div class="pt-2"> |
| <label class="flex items-center"> |
| <input type="checkbox" required class="rounded bg-gray-700 border-gray-600 text-primary-500 focus:ring-primary-500 w-4 h-4"> |
| <span class="ml-2 text-sm">I agree to the <a href="#" class="text-primary-500 hover:underline">Terms & Conditions</a></span> |
| </label> |
| </div> |
|
|
| <div class="pt-2"> |
| <button type="submit" id="submitBtn" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"> |
| Create Account |
| </button> |
| </div> |
|
|
| <div class="text-center text-sm pt-2"> |
| <p>Already have an account? <a href="login.html" class="text-primary-500 hover:underline">Log in</a></p> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| <script> |
| // Initialize feather icons |
| feather.replace(); |
| |
| document.getElementById('registerForm').addEventListener('submit', async function(e) { |
| e.preventDefault(); |
| |
| const firstName = document.getElementById('firstName').value.trim(); |
| const lastName = document.getElementById('lastName').value.trim(); |
| const email = document.getElementById('email').value.trim(); |
| const password = document.getElementById('password').value; |
| const confirmPassword = document.getElementById('confirmPassword').value; |
| |
| // Validation |
| if (password !== confirmPassword) { |
| alert('Passwords do not match!'); |
| document.getElementById('confirmPassword').focus(); |
| return; |
| } |
| |
| if (password.length < 8) { |
| alert('Password must be at least 8 characters long!'); |
| return; |
| } |
| |
| const submitBtn = document.getElementById('submitBtn'); |
| submitBtn.disabled = true; |
| submitBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin inline mr-2"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg> Creating account...'; |
| |
| try { |
| // Simulate API call |
| await new Promise(resolve => setTimeout(resolve, 1500)); |
| |
| // Store user data in localStorage |
| const user = { |
| firstName, |
| lastName, |
| email, |
| role: 'buyer', |
| createdAt: new Date().toISOString() |
| }; |
| localStorage.setItem('currentUser', JSON.stringify(user)); |
| |
| // Show success message |
| alert('Account created successfully!'); |
| |
| // Redirect to profile settings (profile-setup.html doesn't exist, use profile-settings.html) |
| window.location.href = 'profile-settings.html'; |
| } catch (error) { |
| alert('Registration failed: ' + error.message); |
| submitBtn.disabled = false; |
| submitBtn.innerHTML = 'Create Account'; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
