| | <!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> |
