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