| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Sign Up | Get Started</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| |
| <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script> |
| <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script> |
| <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore-compat.js"></script> |
| |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js"></script> |
| |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .input-focus:focus { |
| box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.3); |
| } |
| .shake { |
| animation: shake 0.5s; |
| } |
| @keyframes shake { |
| 0%, 100% { transform: translateX(0); } |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } |
| } |
| .password-strength { |
| height: 4px; |
| transition: all 0.3s; |
| } |
| .loading-spinner { |
| width: 20px; |
| height: 20px; |
| border: 3px solid rgba(255,255,255,0.3); |
| border-radius: 50%; |
| border-top-color: #fff; |
| animation: spin 1s ease-in-out infinite; |
| } |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center gradient-bg p-4"> |
| <div class="w-full max-w-md"> |
| <div class="bg-white rounded-xl shadow-2xl overflow-hidden transition-all duration-300 transform hover:scale-[1.01]"> |
| <div class="p-8"> |
| <div class="flex justify-center mb-6"> |
| <div class="bg-indigo-100 p-3 rounded-full"> |
| <i class="fas fa-user-plus text-indigo-600 text-2xl"></i> |
| </div> |
| </div> |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-2">Create Your Account</h2> |
| <p class="text-gray-600 text-center mb-8">Join us today and unlock amazing features!</p> |
| |
| <form id="signupForm" class="space-y-5"> |
| <div class="relative"> |
| <input type="text" id="fullname" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition-all" placeholder="Full Name" required> |
| <i class="fas fa-user absolute right-3 top-3.5 text-gray-400"></i> |
| </div> |
| |
| <div class="relative"> |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition-all" placeholder="Email Address" required> |
| <i class="fas fa-envelope absolute right-3 top-3.5 text-gray-400"></i> |
| </div> |
| |
| <div class="relative"> |
| <input type="password" id="password" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition-all" placeholder="Password" required> |
| <i class="fas fa-lock absolute right-3 top-3.5 text-gray-400"></i> |
| <div class="flex mt-1 space-x-1"> |
| <div id="strength-1" class="password-strength w-1/4 bg-gray-200 rounded-full"></div> |
| <div id="strength-2" class="password-strength w-1/4 bg-gray-200 rounded-full"></div> |
| <div id="strength-3" class="password-strength w-1/4 bg-gray-200 rounded-full"></div> |
| <div id="strength-4" class="password-strength w-1/4 bg-gray-200 rounded-full"></div> |
| </div> |
| </div> |
| |
| <div class="relative"> |
| <input type="password" id="confirmPassword" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition-all" placeholder="Confirm Password" required> |
| <i class="fas fa-lock absolute right-3 top-3.5 text-gray-400"></i> |
| </div> |
| |
| <div class="flex items-center"> |
| <input type="checkbox" id="terms" class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500"> |
| <label for="terms" class="ml-2 text-sm text-gray-600">I agree to the <a href="#" class="text-indigo-600 hover:underline">Terms & Conditions</a></label> |
| </div> |
| |
| <button type="submit" id="submitBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-[1.02] flex justify-center items-center"> |
| <span id="submitText">Sign Up</span> |
| <i id="submitIcon" class="fas fa-arrow-right ml-2"></i> |
| <div id="submitSpinner" class="loading-spinner hidden"></div> |
| </button> |
| </form> |
| |
| <div class="mt-6 text-center"> |
| <p class="text-gray-600">Already have an account? <a href="#" class="text-indigo-600 font-semibold hover:underline">Log In</a></p> |
| </div> |
| |
| <div class="mt-6"> |
| <div class="relative"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-gray-300"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-2 bg-white text-gray-500">Or continue with</span> |
| </div> |
| </div> |
| |
| <div class="mt-6 grid grid-cols-3 gap-3"> |
| <button id="googleLogin" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition"> |
| <i class="fab fa-google text-red-500"></i> |
| </button> |
| <button id="facebookLogin" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition"> |
| <i class="fab fa-facebook-f text-blue-600"></i> |
| </button> |
| <button id="appleLogin" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition"> |
| <i class="fab fa-apple"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const firebaseConfig = { |
| apiKey: "AIzaSyD6sZ1h12SDDV4cHmV2_Xb4-V7H_R0U2iQ", |
| authDomain: "your-project-id.firebaseapp.com", |
| projectId: "your-project-id", |
| storageBucket: "your-project-id.appspot.com", |
| messagingSenderId: "1234567890", |
| appId: "1:1234567890:web:abcdef1234567890" |
| }; |
| |
| |
| firebase.initializeApp(firebaseConfig); |
| const auth = firebase.auth(); |
| const db = firebase.firestore(); |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const form = document.getElementById('signupForm'); |
| const password = document.getElementById('password'); |
| const confirmPassword = document.getElementById('confirmPassword'); |
| const termsCheckbox = document.getElementById('terms'); |
| const submitBtn = document.getElementById('submitBtn'); |
| const submitText = document.getElementById('submitText'); |
| const submitIcon = document.getElementById('submitIcon'); |
| const submitSpinner = document.getElementById('submitSpinner'); |
| |
| |
| const googleLogin = document.getElementById('googleLogin'); |
| const facebookLogin = document.getElementById('facebookLogin'); |
| const appleLogin = document.getElementById('appleLogin'); |
| |
| |
| password.addEventListener('input', function() { |
| const strengthBars = [ |
| document.getElementById('strength-1'), |
| document.getElementById('strength-2'), |
| document.getElementById('strength-3'), |
| document.getElementById('strength-4') |
| ]; |
| |
| const strength = calculatePasswordStrength(password.value); |
| |
| strengthBars.forEach((bar, index) => { |
| if (index < strength) { |
| bar.classList.remove('bg-gray-200'); |
| if (strength === 1) bar.classList.add('bg-red-500'); |
| else if (strength === 2) bar.classList.add('bg-yellow-500'); |
| else if (strength === 3) bar.classList.add('bg-blue-500'); |
| else if (strength === 4) bar.classList.add('bg-green-500'); |
| } else { |
| bar.classList.add('bg-gray-200'); |
| bar.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-blue-500', 'bg-green-500'); |
| } |
| }); |
| }); |
| |
| |
| form.addEventListener('submit', async function(e) { |
| e.preventDefault(); |
| |
| |
| submitText.textContent = 'Signing Up...'; |
| submitIcon.classList.add('hidden'); |
| submitSpinner.classList.remove('hidden'); |
| submitBtn.disabled = true; |
| |
| |
| if (!termsCheckbox.checked) { |
| alert('Please agree to the Terms & Conditions'); |
| termsCheckbox.parentElement.classList.add('shake'); |
| setTimeout(() => { |
| termsCheckbox.parentElement.classList.remove('shake'); |
| }, 500); |
| |
| |
| submitText.textContent = 'Sign Up'; |
| submitIcon.classList.remove('hidden'); |
| submitSpinner.classList.add('hidden'); |
| submitBtn.disabled = false; |
| return; |
| } |
| |
| |
| if (password.value !== confirmPassword.value) { |
| alert('Passwords do not match!'); |
| password.classList.add('border-red-500'); |
| confirmPassword.classList.add('border-red-500'); |
| |
| |
| submitText.textContent = 'Sign Up'; |
| submitIcon.classList.remove('hidden'); |
| submitSpinner.classList.add('hidden'); |
| submitBtn.disabled = false; |
| return; |
| } |
| |
| |
| const salt = bcrypt.genSaltSync(10); |
| const hashedPassword = bcrypt.hashSync(password.value, salt); |
| |
| |
| const userData = { |
| fullName: document.getElementById('fullname').value, |
| email: document.getElementById('email').value, |
| password: hashedPassword, |
| createdAt: firebase.firestore.FieldValue.serverTimestamp(), |
| updatedAt: firebase.firestore.FieldValue.serverTimestamp() |
| }; |
| |
| try { |
| |
| await db.collection('users').add(userData); |
| |
| |
| alert('Account created successfully!'); |
| form.reset(); |
| document.querySelectorAll('.password-strength').forEach(bar => { |
| bar.classList.add('bg-gray-200'); |
| bar.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-blue-500', 'bg-green-500'); |
| }); |
| |
| |
| |
| } catch (error) { |
| console.error('Error saving user:', error); |
| alert('An error occurred while creating your account. Please try again.'); |
| } finally { |
| |
| submitText.textContent = 'Sign Up'; |
| submitIcon.classList.remove('hidden'); |
| submitSpinner.classList.add('hidden'); |
| submitBtn.disabled = false; |
| } |
| }); |
| |
| |
| password.addEventListener('input', function() { |
| password.classList.remove('border-red-500'); |
| confirmPassword.classList.remove('border-red-500'); |
| }); |
| |
| confirmPassword.addEventListener('input', function() { |
| password.classList.remove('border-red-500'); |
| confirmPassword.classList.remove('border-red-500'); |
| }); |
| |
| |
| googleLogin.addEventListener('click', function() { |
| const provider = new firebase.auth.GoogleAuthProvider(); |
| socialLogin(provider); |
| }); |
| |
| facebookLogin.addEventListener('click', function() { |
| const provider = new firebase.auth.FacebookAuthProvider(); |
| socialLogin(provider); |
| }); |
| |
| appleLogin.addEventListener('click', function() { |
| const provider = new firebase.auth.OAuthProvider('apple.com'); |
| socialLogin(provider); |
| }); |
| |
| |
| function calculatePasswordStrength(password) { |
| let strength = 0; |
| |
| |
| if (password.length >= 8) strength++; |
| if (password.length >= 12) strength++; |
| |
| |
| if (/[A-Z]/.test(password)) strength++; |
| if (/[0-9]/.test(password)) strength++; |
| if (/[^A-Za-z0-9]/.test(password)) strength++; |
| |
| |
| return Math.min(strength, 4); |
| } |
| |
| |
| async function socialLogin(provider) { |
| try { |
| const result = await auth.signInWithPopup(provider); |
| const user = result.user; |
| |
| |
| const userDoc = await db.collection('users').doc(user.uid).get(); |
| |
| if (!userDoc.exists) { |
| |
| await db.collection('users').doc(user.uid).set({ |
| fullName: user.displayName || '', |
| email: user.email || '', |
| createdAt: firebase.firestore.FieldValue.serverTimestamp(), |
| updatedAt: firebase.firestore.FieldValue.serverTimestamp(), |
| provider: provider.providerId |
| }); |
| } |
| |
| alert('Logged in successfully with ' + provider.providerId.replace('.com', '')); |
| |
| |
| } catch (error) { |
| console.error('Social login error:', error); |
| alert('Login failed: ' + error.message); |
| } |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=shemmz/prototype" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
