index.html

<!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">
    <!-- Firebase SDK -->
    <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>
    <!-- bcrypt for password hashing -->
    <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>
        // Initialize Firebase with your config
        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"
        };

        // Initialize Firebase
        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');
            
            // Social login buttons
            const googleLogin = document.getElementById('googleLogin');
            const facebookLogin = document.getElementById('facebookLogin');
            const appleLogin = document.getElementById('appleLogin');
            
            // Password strength indicator
            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 submission
            form.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                // Show loading state
                submitText.textContent = 'Signing Up...';
                submitIcon.classList.add('hidden');
                submitSpinner.classList.remove('hidden');
                submitBtn.disabled = true;
                
                // Validate terms checkbox
                if (!termsCheckbox.checked) {
                    alert('Please agree to the Terms & Conditions');
                    termsCheckbox.parentElement.classList.add('shake');
                    setTimeout(() => {
                        termsCheckbox.parentElement.classList.remove('shake');
                    }, 500);
                    
                    // Reset button state
                    submitText.textContent = 'Sign Up';
                    submitIcon.classList.remove('hidden');
                    submitSpinner.classList.add('hidden');
                    submitBtn.disabled = false;
                    return;
                }
                
                // Validate password match
                if (password.value !== confirmPassword.value) {
                    alert('Passwords do not match!');
                    password.classList.add('border-red-500');
                    confirmPassword.classList.add('border-red-500');
                    
                    // Reset button state
                    submitText.textContent = 'Sign Up';
                    submitIcon.classList.remove('hidden');
                    submitSpinner.classList.add('hidden');
                    submitBtn.disabled = false;
                    return;
                }
                
                // Hash the password (in a real app, this would be done server-side)
                const salt = bcrypt.genSaltSync(10);
                const hashedPassword = bcrypt.hashSync(password.value, salt);
                
                // User data to save
                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 {
                    // Save user to Firestore
                    await db.collection('users').add(userData);
                    
                    // Success
                    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');
                    });
                    
                    // Redirect or do something else on success
                    // window.location.href = '/dashboard.html';
                } catch (error) {
                    console.error('Error saving user:', error);
                    alert('An error occurred while creating your account. Please try again.');
                } finally {
                    // Reset button state
                    submitText.textContent = 'Sign Up';
                    submitIcon.classList.remove('hidden');
                    submitSpinner.classList.add('hidden');
                    submitBtn.disabled = false;
                }
            });
            
            // Reset password error when typing
            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');
            });
            
            // Social login handlers
            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);
            });
            
            // Calculate password strength
            function calculatePasswordStrength(password) {
                let strength = 0;
                
                // Length check
                if (password.length >= 8) strength++;
                if (password.length >= 12) strength++;
                
                // Character type checks
                if (/[A-Z]/.test(password)) strength++;
                if (/[0-9]/.test(password)) strength++;
                if (/[^A-Za-z0-9]/.test(password)) strength++;
                
                // Cap at 4
                return Math.min(strength, 4);
            }
            
            // Social login function
            async function socialLogin(provider) {
                try {
                    const result = await auth.signInWithPopup(provider);
                    const user = result.user;
                    
                    // Check if user exists in Firestore
                    const userDoc = await db.collection('users').doc(user.uid).get();
                    
                    if (!userDoc.exists) {
                        // Save new user to Firestore
                        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', ''));
                    // Redirect to dashboard or home page
                    // window.location.href = '/dashboard.html';
                } 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>