File manager

File manager - Edit - /home/justdoit/portal.springpasscapital.com/register.php

Back
<?php session_start(); require_once 'config/database.php'; // Redirect if already logged in if (isset($_SESSION['user_id'])) { header('Location: index.php'); exit; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Create Account \| Spring Pass Capital</title> <meta name="theme-color" content="#2596be"> <meta name="description" content="Create your Spring Pass Capital account - Enterprise Digital Banking"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.min.css"> <style> :root { --primary: #2596be; --primary-dark: #1c7fa3; --primary-deeper: #0f5e78; --primary-light: #eaf7fc; --gradient: linear-gradient(135deg, #2596be, #1c7fa3, #0f5e78); --gradient-light: linear-gradient(135deg, #eaf7fc, #f8fbfd, #ffffff); --shadow: 0 4px 20px rgba(37, 150, 190, 0.12); --shadow-lg: 0 12px 40px rgba(37, 150, 190, 0.18); --shadow-xl: 0 20px 60px rgba(37, 150, 190, 0.22); --success: #16a34a; --danger: #dc2626; --warning: #f59e0b; --font-inter: 'Inter', sans-serif; --font-poppins: 'Poppins', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-inter); background: var(--gradient-light); min-height: 100vh; -webkit-font-smoothing: antialiased; } .register-wrapper { min-height: 100vh; display: flex; align-items: center; padding: 40px 0; } .container { max-width: 1200px; } /* Left Side - Info Section / .info-section { background: var(--gradient); color: white; padding: 60px 50px; border-radius: 30px; height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; box-shadow: var(--shadow-xl); } .info-section::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); border-radius: 50%; } .info-section .logo-icon { width: 70px; height: 70px; border-radius: 20px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 30px; border: 1px solid rgba(255, 255, 255, 0.3); } .info-section h2 { font-family: var(--font-poppins); font-weight: 700; font-size: 2rem; margin-bottom: 15px; position: relative; } .info-section p { font-size: 1rem; opacity: 0.9; margin-bottom: 40px; position: relative; } .features-list { list-style: none; padding: 0; position: relative; } .features-list li { padding: 12px 0; display: flex; align-items: center; gap: 12px; font-size: 0.95rem; } .features-list li i { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } .stats-row { display: flex; gap: 30px; margin-top: 40px; position: relative; } .stat-item { text-align: center; } .stat-item .stat-number { font-size: 1.8rem; font-weight: 700; font-family: var(--font-poppins); } .stat-item .stat-label { font-size: 0.8rem; opacity: 0.8; } / Right Side - Form Section / .form-section { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 30px; padding: 50px 40px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.6); } .form-section h3 { font-family: var(--font-poppins); font-weight: 700; color: #1a1a2e; margin-bottom: 10px; } .form-section .subtitle { color: #888; font-size: 0.9rem; margin-bottom: 30px; } .step-indicator { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; } .step { width: 35px; height: 35px; border-radius: 50%; background: #e8f0f5; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; color: #888; transition: all 0.3s ease; } .step.active { background: var(--gradient); color: white; box-shadow: var(--shadow); } .step.completed { background: var(--success); color: white; } .step-connector { flex: 1; height: 2px; background: #e8f0f5; } .step-connector.active { background: var(--primary); } .form-step { display: none; } .form-step.active { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .form-label { font-weight: 500; color: #555; margin-bottom: 6px; font-size: 0.88rem; } .form-control, .form-select { border: 1px solid #e0e0e0; padding: 12px 16px; border-radius: 12px; font-size: 0.9rem; transition: all 0.3s ease; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 150, 190, 0.1); } .input-group .input-group-text { background: #f8fbfd; border: 1px solid #e0e0e0; border-radius: 12px 0 0 12px; } .input-group .form-control { border-left: none; } .btn-primary-custom { background: var(--gradient); color: white; border: none; padding: 14px 30px; border-radius: 50px; font-weight: 600; font-size: 1rem; width: 100%; transition: all 0.3s ease; box-shadow: var(--shadow); cursor: pointer; } .btn-primary-custom:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: white; } .btn-outline-custom { background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 12px 24px; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; } .btn-outline-custom:hover { background: var(--primary-light); } .password-strength { height: 4px; border-radius: 2px; margin-top: 8px; transition: all 0.3s ease; background: #e0e0e0; } .strength-bar { height: 100%; border-radius: 2px; transition: all 0.3s ease; width: 0%; } .strength-weak { width: 25%; background: #dc2626; } .strength-fair { width: 50%; background: #f59e0b; } .strength-good { width: 75%; background: #2596be; } .strength-strong { width: 100%; background: #16a34a; } .requirements-list { font-size: 0.78rem; color: #888; margin-top: 8px; padding-left: 18px; } .requirements-list li { margin-bottom: 3px; } .requirements-list li.valid { color: var(--success); } .terms-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: #666; } .terms-check a { color: var(--primary); text-decoration: none; font-weight: 500; } .already-member { text-align: center; margin-top: 20px; font-size: 0.9rem; color: #888; } .already-member a { color: var(--primary); text-decoration: none; font-weight: 600; } .alert { border-radius: 12px; font-size: 0.88rem; } .iti { width: 100%; } @media (max-width: 991px) { .info-section { margin-bottom: 30px; padding: 40px 30px; } .form-section { padding: 30px 20px; } } #currencySign { font-size: 1.1rem; font-weight: 700; min-width: 40px; justify-content: center; border-radius: 12px 0 0 12px; background: #f8fbfd; } </style> </head> <body> <div class="register-wrapper"> <div class="container"> <div class="row g-4 align-items-stretch"> <!-- Left Info Section --> <div class="col-lg-5"> <div class="info-section animate__animated animate__fadeInLeft"> <div class="logo-icon"> <i class="fas fa-mountain-sun"></i> </div> <h2>Spring Pass Capital</h2> <p>Join the future of digital banking. Secure, fast, and designed for the modern enterprise.</p> <ul class="features-list"> <li> <i class="fas fa-shield-alt"></i> <span>Enterprise-grade security with 256-bit encryption</span> </li> <li> <i class="fas fa-bolt"></i> <span>Instant transfers and real-time transactions</span> </li> <li> <i class="fas fa-globe"></i> <span>Multi-currency support with competitive rates</span> </li> <li> <i class="fas fa-chart-line"></i> <span>Smart investment tools and portfolio management</span> </li> <li> <i class="fas fa-headset"></i> <span>24/7 premium customer support</span> </li> </ul> <div class="stats-row"> <div class="stat-item"> <div class="stat-number">50K+</div> <div class="stat-label">Active Users</div> </div> <div class="stat-item"> <div class="stat-number">$2B+</div> <div class="stat-label">Transactions</div> </div> <div class="stat-item"> <div class="stat-number">99.9%</div> <div class="stat-label">Uptime</div> </div> </div> </div> </div> <!-- Right Form Section --> <div class="col-lg-7"> <div class="form-section animate__animated animate__fadeInRight"> <h3>Create Your Account</h3> <p class="subtitle">Start your journey with Spring Pass Capital in just a few steps.</p> <!-- Step Indicator --> <div class="step-indicator"> <div class="step active" id="step1Indicator">1</div> <div class="step-connector" id="connector1"></div> <div class="step" id="step2Indicator">2</div> <div class="step-connector" id="connector2"></div> <div class="step" id="step3Indicator">3</div> </div> <?php if (isset($_GET['error'])): ?> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <i class="fas fa-exclamation-circle"></i> <?php echo htmlspecialchars($_GET['error']); ?> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div> <?php endif; ?> <?php if (isset($_GET['success'])): ?> <div class="alert alert-success alert-dismissible fade show" role="alert"> <i class="fas fa-check-circle"></i> <?php echo htmlspecialchars($_GET['success']); ?> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div> <?php endif; ?> <form id="registerForm" action="auth/register-process.php" method="POST" novalidate> <input type="hidden" name="csrf_token" value="<?php echo csrfToken(); ?>"> <!-- Step 1: Personal Information --> <div class="form-step active" id="step1"> <h5 class="mb-3" style="color: #1a1a2e; font-weight: 600;"> <i class="fas fa-user-circle"></i> Personal Information </h5> <div class="row"> <div class="col-md-6 mb-3"> <label class="form-label">First Name </label> <input type="text" name="first_name" class="form-control" placeholder="John" required pattern="[A-Za-z]{2,50}" title="2-50 letters only"> <div class="invalid-feedback">Please enter a valid first name (2-50 letters)</div> </div> <div class="col-md-6 mb-3"> <label class="form-label">Last Name </label> <input type="text" name="last_name" class="form-control" placeholder="Doe" required pattern="[A-Za-z]{2,50}" title="2-50 letters only"> <div class="invalid-feedback">Please enter a valid last name (2-50 letters)</div> </div> </div> <div class="mb-3"> <label class="form-label">Email Address </label> <div class="input-group"> <span class="input-group-text"> <i class="fas fa-envelope text-muted"></i> </span> <input type="email" name="email" class="form-control" placeholder="john.doe@example.com" required id="emailInput"> </div> <div class="invalid-feedback">Please enter a valid email address</div> <div id="emailAvailability" class="mt-1" style="font-size: 0.8rem;"></div> </div> <div class="mb-3"> <label class="form-label">Phone Number </label> <input type="tel" name="phone" class="form-control" placeholder="+1 (555) 000-0000" required id="phoneInput" pattern="^[\+]?[(]?[0-9]{1,4}[)]?[-\s\./0-9]$"> <div class="invalid-feedback">Please enter a valid phone number</div> </div> <div class="mb-3"> <label class="form-label">Date of Birth </label> <input type="date" name="date_of_birth" class="form-control" required max="<?php echo date('Y-m-d', strtotime('-18 years')); ?>" min="<?php echo date('Y-m-d', strtotime('-100 years')); ?>"> <div class="invalid-feedback">You must be at least 18 years old</div> </div> <div class="d-flex justify-content-end mt-4"> <button type="button" class="btn-primary-custom" style="width: auto; padding: 12px 40px;" onclick="nextStep(1)"> Continue <i class="fas fa-arrow-right ms-2"></i> </button> </div> </div> <!-- Step 2: Account Security --> <div class="form-step" id="step2"> <h5 class="mb-3" style="color: #1a1a2e; font-weight: 600;"> <i class="fas fa-shield-alt"></i> Account Security </h5> <div class="mb-3"> <label class="form-label">Username </label> <div class="input-group"> <span class="input-group-text">@</span> <input type="text" name="username" class="form-control" placeholder="johndoe" required pattern="[A-Za-z0-9_]{4,30}" title="4-30 characters: letters, numbers, underscore"> </div> <div class="invalid-feedback">Username must be 4-30 characters (letters, numbers, underscore)</div> </div> <div class="mb-3"> <label class="form-label">Password </label> <div class="input-group"> <input type="password" name="password" class="form-control" placeholder="••••••••" required id="passwordInput" minlength="8"> <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('passwordInput')" style="border-radius: 0 12px 12px 0;"> <i class="fas fa-eye"></i> </button> </div> <div class="password-strength mt-2"> <div class="strength-bar" id="strengthBar"></div> </div> <div id="passwordFeedback" class="mt-1" style="font-size: 0.78rem;"></div> <ul class="requirements-list"> <li id="req-length"><i class="fas fa-circle"></i> At least 8 characters</li> <li id="req-uppercase"><i class="fas fa-circle"></i> One uppercase letter</li> <li id="req-lowercase"><i class="fas fa-circle"></i> One lowercase letter</li> <li id="req-number"><i class="fas fa-circle"></i> One number</li> <li id="req-special"><i class="fas fa-circle"></i> One special character (!@#$%^&)</li> </ul> </div> <div class="mb-3"> <label class="form-label">Confirm Password </label> <div class="input-group"> <input type="password" name="password_confirm" class="form-control" placeholder="••••••••" required id="confirmPasswordInput"> <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('confirmPasswordInput')" style="border-radius: 0 12px 12px 0;"> <i class="fas fa-eye"></i> </button> </div> <div class="invalid-feedback" id="passwordMatchError">Passwords do not match</div> </div> <div class="mb-3"> <label class="form-label">Security Question </label> <select name="security_question" class="form-select" required> <option value="">Select a security question...</option> <option value="pet">What was the name of your first pet?</option> <option value="school">What elementary school did you attend?</option> <option value="city">In what city were you born?</option> <option value="maiden">What is your mother's maiden name?</option> <option value="book">What is your favorite book?</option> </select> </div> <div class="mb-3"> <label class="form-label">Security Answer </label> <input type="text" name="security_answer" class="form-control" placeholder="Your answer" required> <div class="form-text">This helps us verify your identity if you forget your password.</div> </div> <div class="d-flex justify-content-between mt-4"> <button type="button" class="btn-outline-custom" onclick="prevStep(2)"> <i class="fas fa-arrow-left me-2"></i> Back </button> <button type="button" class="btn-primary-custom" style="width: auto; padding: 12px 40px;" onclick="nextStep(2)"> Continue <i class="fas fa-arrow-right ms-2"></i> </button> </div> </div> <!-- Step 3: Account Setup --> <div class="form-step" id="step3"> <h5 class="mb-3" style="color: #1a1a2e; font-weight: 600;"> <i class="fas fa-cog"></i> Account Setup </h5> <div class="mb-3"> <label class="form-label">Account Type </label> <select name="account_type" class="form-select" required> <option value="">Select account type...</option> <option value="savings">Savings Account</option> <option value="checking">Checking Account</option> <option value="both">Both Savings & Checking</option> </select> </div> <div class="mb-3"> <label class="form-label">Currency Preference </label> <select name="currency" id="regCurrency" class="form-select" required onchange="updateCurrencyDisplay()"> <option value="">Select currency...</option> <option value="USD">$ USD - US Dollar</option> <option value="EUR">€ EUR - Euro</option> <option value="GBP">£ GBP - British Pound</option> <option value="JPY">¥ JPY - Japanese Yen</option> <option value="CAD">C$ CAD - Canadian Dollar</option> <option value="AUD">A$ AUD - Australian Dollar</option> <option value="ZAR">R ZAR - South African Rand</option> <option value="INR">₹ INR - Indian Rupee</option> </select> </div> <div class="mb-3"> <label class="form-label">Initial Deposit (Optional)</label> <div class="input-group"> <span class="input-group-text" id="currencySign" style="background:#f8fbfd;font-weight:600;">$</span> <input type="number" name="initial_deposit" id="initialDeposit" class="form-control" placeholder="0.00" min="0" step="0.01" value="0"> </div> <div class="form-text"> Minimum deposit: <span id="minDeposit">$0.00</span> - Start with any amount! </div> </div> <div class="mb-3"> <label class="form-label">Referral Code (Optional)</label> <input type="text" name="referral_code" class="form-control" placeholder="Enter referral code" pattern="[A-Za-z0-9]{6,10}"> <div class="form-text">Have a referral code? Enter it to earn bonus rewards!</div> </div> <div class="mb-4"> <div class="terms-check"> <input type="checkbox" id="termsCheck" required> <label for="termsCheck"> I agree to the <a href="#" onclick="showTerms(event)">Terms of Service</a>, <a href="#" onclick="showPrivacy(event)">Privacy Policy</a>, and <a href="#" onclick="showBanking(event)">Banking Agreement</a>. I confirm that I am at least 18 years of age. </label> </div> </div> <div class="mb-3"> <div class="terms-check"> <input type="checkbox" id="marketingCheck" name="marketing_consent"> <label for="marketingCheck"> I would like to receive marketing communications and special offers from Spring Pass Capital. </label> </div> </div> <div class="d-flex justify-content-between mt-4"> <button type="button" class="btn-outline-custom" onclick="prevStep(3)"> <i class="fas fa-arrow-left me-2"></i> Back </button> <button type="submit" class="btn-primary-custom" style="width: auto; padding: 12px 40px;"> <i class="fas fa-user-plus me-2"></i> Create Account </button> </div> </div> </form> <div class="already-member"> Already have an account? <a href="index.php">Sign In <i class="fas fa-sign-in-alt"></i></a> </div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script> // Multi-step form navigation let currentStep = 1; const totalSteps = 3; function showStep(stepNumber) { // Hide all steps document.querySelectorAll('.form-step').forEach(step => { step.classList.remove('active'); }); // Show current step document.getElementById('step' + stepNumber).classList.add('active'); // Update indicators for (let i = 1; i <= totalSteps; i++) { const indicator = document.getElementById('step' + i + 'Indicator'); indicator.classList.remove('active', 'completed'); if (i < stepNumber) { indicator.classList.add('completed'); indicator.innerHTML = '<i class="fas fa-check"></i>'; } else if (i === stepNumber) { indicator.classList.add('active'); indicator.innerHTML = i; } else { indicator.innerHTML = i; } } // Update connectors for (let i = 1; i < totalSteps; i++) { const connector = document.getElementById('connector' + i); if (i < stepNumber) { connector.classList.add('active'); } else { connector.classList.remove('active'); } } currentStep = stepNumber; } function nextStep(currentStepNum) { if (validateStep(currentStepNum)) { showStep(currentStepNum + 1); } } function prevStep(currentStepNum) { showStep(currentStepNum - 1); } function validateStep(stepNumber) { const step = document.getElementById('step' + stepNumber); const inputs = step.querySelectorAll('input[required], select[required]'); let isValid = true; inputs.forEach(input => { if (!input.checkValidity()) { input.classList.add('is-invalid'); isValid = false; } else { input.classList.remove('is-invalid'); } }); // Special validations if (stepNumber === 2) { const password = document.getElementById('passwordInput').value; const confirmPassword = document.getElementById('confirmPasswordInput').value; if (password !== confirmPassword) { document.getElementById('confirmPasswordInput').classList.add('is-invalid'); document.getElementById('passwordMatchError').style.display = 'block'; isValid = false; } } if (stepNumber === 3) { const termsCheck = document.getElementById('termsCheck'); if (!termsCheck.checked) { Swal.fire({ icon: 'warning', title: 'Terms Required', text: 'Please agree to the Terms of Service to continue.', confirmButtonColor: '#2596be' }); isValid = false; } } if (!isValid) { Swal.fire({ icon: 'warning', title: 'Validation Error', text: 'Please fill in all required fields correctly.', confirmButtonColor: '#2596be' }); } return isValid; } // Toggle password visibility function togglePassword(fieldId) { const field = document.getElementById(fieldId); const icon = field.nextElementSibling.querySelector('i'); if (field.type === 'password') { field.type = 'text'; icon.classList.remove('fa-eye'); icon.classList.add('fa-eye-slash'); } else { field.type = 'password'; icon.classList.remove('fa-eye-slash'); icon.classList.add('fa-eye'); } } // Password strength checker document.getElementById('passwordInput').addEventListener('input', function(e) { const password = e.target.value; const strengthBar = document.getElementById('strengthBar'); const feedback = document.getElementById('passwordFeedback'); let strength = 0; // Check requirements const hasLength = password.length >= 8; const hasUpper = /[A-Z]/.test(password); const hasLower = /[a-z]/.test(password); const hasNumber = /[0-9]/.test(password); const hasSpecial = /[!@#$%^&(),.?":{}\|<>]/.test(password); // Update requirement indicators updateRequirement('req-length', hasLength); updateRequirement('req-uppercase', hasUpper); updateRequirement('req-lowercase', hasLower); updateRequirement('req-number', hasNumber); updateRequirement('req-special', hasSpecial); // Calculate strength if (hasLength) strength++; if (hasUpper) strength++; if (hasLower) strength++; if (hasNumber) strength++; if (hasSpecial) strength++; // Update strength bar strengthBar.className = 'strength-bar'; if (password.length === 0) { strengthBar.style.width = '0%'; feedback.textContent = ''; } else if (strength <= 2) { strengthBar.classList.add('strength-weak'); feedback.textContent = 'Weak password'; feedback.style.color = '#dc2626'; } else if (strength === 3) { strengthBar.classList.add('strength-fair'); feedback.textContent = 'Fair password'; feedback.style.color = '#f59e0b'; } else if (strength === 4) { strengthBar.classList.add('strength-good'); feedback.textContent = 'Good password'; feedback.style.color = '#2596be'; } else if (strength === 5) { strengthBar.classList.add('strength-strong'); feedback.textContent = 'Strong password!'; feedback.style.color = '#16a34a'; } }); function updateRequirement(id, valid) { const element = document.getElementById(id); if (valid) { element.classList.add('valid'); element.querySelector('i').classList.remove('fa-circle'); element.querySelector('i').classList.add('fa-check-circle'); } else { element.classList.remove('valid'); element.querySelector('i').classList.remove('fa-check-circle'); element.querySelector('i').classList.add('fa-circle'); } } // Check email availability let emailTimeout; document.getElementById('emailInput').addEventListener('input', function() { clearTimeout(emailTimeout); const email = this.value; if (email && email.includes('@') && email.includes('.')) { emailTimeout = setTimeout(() => { $.ajax({ url: 'ajax/check-email.php', method: 'POST', data: { email: email }, success: function(response) { if (response.success) { Swal.fire({ icon: 'success', title: 'Account Created!', text: response.message, confirmButtonColor: '#2596be', timer: 3000, showConfirmButton: true }).then(() => { // Redirect to login page instead of dashboard window.location.href = response.redirect \|\| 'index.php?success=Account created! Please login.'; }); } else { submitBtn.disabled = false; submitBtn.innerHTML = '<i class="fas fa-user-plus me-2"></i> Create Account'; Swal.fire({ icon: 'error', title: 'Registration Failed', text: response.message \|\| 'Please try again.', confirmButtonColor: '#2596be' }); } } }); }, 500); } }); // Confirm password match document.getElementById('confirmPasswordInput').addEventListener('input', function() { const password = document.getElementById('passwordInput').value; const confirmPassword = this.value; if (confirmPassword && password !== confirmPassword) { this.classList.add('is-invalid'); document.getElementById('passwordMatchError').style.display = 'block'; } else { this.classList.remove('is-invalid'); document.getElementById('passwordMatchError').style.display = 'none'; } }); // Form submission document.getElementById('registerForm').addEventListener('submit', function(e) { e.preventDefault(); if (!validateStep(3)) { return false; } const submitBtn = this.querySelector('button[type="submit"]'); submitBtn.disabled = true; submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating Account...'; // Submit form via AJAX const formData = new FormData(this); $.ajax({ url: this.action, method: 'POST', data: formData, processData: false, contentType: false, success: function(response) { if (response.success) { Swal.fire({ icon: 'success', title: 'Account Created!', text: 'Welcome to Spring Pass Capital. Redirecting to dashboard...', confirmButtonColor: '#2596be', timer: 3000, showConfirmButton: false }).then(() => { window.location.href = response.redirect \|\| 'index.php'; }); } else { submitBtn.disabled = false; submitBtn.innerHTML = '<i class="fas fa-user-plus me-2"></i> Create Account'; Swal.fire({ icon: 'error', title: 'Registration Failed', text: response.message \|\| 'Please try again.', confirmButtonColor: '#2596be' }); } }, error: function() { submitBtn.disabled = false; submitBtn.innerHTML = '<i class="fas fa-user-plus me-2"></i> Create Account'; Swal.fire({ icon: 'error', title: 'Error', text: 'An error occurred. Please try again later.', confirmButtonColor: '#2596be' }); } }); }); // Show legal documents function showTerms(e) { e.preventDefault(); Swal.fire({ title: 'Terms of Service', html: '<div style="max-height: 400px; overflow-y: auto; text-align: left;">' + '<p>By using Spring Pass Capital services, you agree to these terms...</p>' + '<p>This is a demo version. Full terms would be displayed here.</p></div>', confirmButtonColor: '#2596be', width: '600px' }); } function showPrivacy(e) { e.preventDefault(); Swal.fire({ title: 'Privacy Policy', html: '<div style="max-height: 400px; overflow-y: auto; text-align: left;">' + '<p>We take your privacy seriously...</p>' + '<p>This is a demo version. Full privacy policy would be displayed here.</p></div>', confirmButtonColor: '#2596be', width: '600px' }); } function showBanking(e) { e.preventDefault(); Swal.fire({ title: 'Banking Agreement', html: '<div style="max-height: 400px; overflow-y: auto; text-align: left;">' + '<p>This agreement governs your banking relationship with Spring Pass Capital...</p>' + '<p>This is a demo version. Full agreement would be displayed here.</p></div>', confirmButtonColor: '#2596be', width: '600px' }); } // Auto-hide alerts setTimeout(() => { $('.alert').fadeOut('slow'); }, 5000); // ============ CURRENCY DISPLAY ============ var currencySymbols = { 'USD': '$', 'EUR': '€', 'GBP': '£', 'JPY': '¥', 'CAD': 'C$', 'AUD': 'A$', 'NGN': '₦', 'GHS': '₵', 'ZAR': 'R', 'INR': '₹' }; var currencyNames = { 'USD': 'US Dollar', 'EUR': 'Euro', 'GBP': 'British Pound', 'JPY': 'Japanese Yen', 'CAD': 'Canadian Dollar', 'AUD': 'Australian Dollar', 'NGN': 'Nigerian Naira', 'GHS': 'Ghanaian Cedi', 'ZAR': 'South African Rand', 'INR': 'Indian Rupee' }; var minimumDeposits = { 'USD': 0, 'EUR': 0, 'GBP': 0, 'JPY': 0, 'CAD': 0, 'AUD': 0, 'NGN': 0, 'GHS': 0, 'ZAR': 0, 'INR': 0 }; function updateCurrencyDisplay() { var currencySelect = document.getElementById('regCurrency'); var selectedCurrency = currencySelect.value; var symbol = currencySymbols[selectedCurrency] \|\| '$'; var minDeposit = minimumDeposits[selectedCurrency] \|\| 0; // Update the currency sign in the input group document.getElementById('currencySign').textContent = symbol; // Update minimum deposit display document.getElementById('minDeposit').textContent = symbol + minDeposit.toFixed(2); // Update the placeholder document.getElementById('initialDeposit').placeholder = '0.00'; } </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.0.33 | Generation time: 1.6 | proxy | phpinfo | Settings