<!-- Signup Modal --> <div id="signupModal" class="modal"> <div class="modal-content"> <div class="login-box"> <div class="login-header"> <svg class="logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> </svg> <h2>Join Project Mycelium</h2> <p>Create your Project Mycelium account</p> </div> <form id="signup-form" onsubmit="return validateSignupForm(event)"> <div class="form-group compact"> <label for="signup-name">Full Name</label> <input type="text" id="signup-name" name="name" required placeholder="Enter your full name" autocomplete="name" > <span class="error-message" id="signup-nameError"></span> </div> <div class="form-group compact"> <label for="signup-email">Email</label> <input type="email" id="signup-email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="Enter your email" autocomplete="email" > <span class="error-message" id="signup-emailError"></span> </div> <div class="form-group compact"> <label for="signup-password">Password</label> <input type="password" id="signup-password" name="password" required minlength="8" placeholder="Enter your password" autocomplete="new-password" > <span class="error-message" id="signup-passwordError"></span> </div> <div class="form-group compact"> <label for="signup-tel">Phone Number</label> <input type="tel" id="signup-tel" name="tel" required placeholder="Enter your phone number" autocomplete="tel" > <span class="error-message" id="signup-telError"></span> </div> <div class="form-group compact"> <label for="signup-country">Country</label> <select id="signup-country" name="country" required class="form-control"> <option value="">Select your country</option> </select> <span class="error-message" id="signup-countryError"></span> </div> <div class="form-group compact"> [[signup_interests]] <span class="error-message" id="signup-interestsError"></span> </div> <button type="submit" class="submit-button">Sign Up</button> </form> <div class="signup-link"> Already have an account? <a href="#" onclick="openLoginModal(); closeSignupModal();">Sign in</a> </div> <button class="close-button" onclick="closeSignupModal()">×</button> </div> </div> </div> <script> // Populate countries dropdown [[system/countries]] const countrySelect = document.getElementById('signup-country'); countries.forEach(country => { const option = document.createElement('option'); option.value = country; option.textContent = country; countrySelect.appendChild(option); }); function openSignupModal() { const modal = document.getElementById('signupModal'); modal.style.display = 'flex'; document.body.style.overflow = 'hidden'; } function closeSignupModal() { const modal = document.getElementById('signupModal'); modal.style.display = 'none'; document.body.style.overflow = 'auto'; } // Close modal when clicking outside window.onclick = function(event) { const modal = document.getElementById('signupModal'); if (event.target === modal) { closeSignupModal(); } } // Real-time validation functions function validatePassword(password) { return password.length >= 8; } function validatePhoneNumber(phone) { return /^\+?[\d\s-]{10,}$/.test(phone); } function validateEmail(email) { return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email); } // Real-time validation event listeners document.getElementById('signup-password')?.addEventListener('input', function(e) { const passwordError = document.getElementById('signup-passwordError'); if (this.value && !validatePassword(this.value)) { passwordError.textContent = 'Password must be at least 8 characters long'; } else { passwordError.textContent = ''; } }); document.getElementById('signup-tel')?.addEventListener('input', function(e) { const telError = document.getElementById('signup-telError'); if (this.value && !validatePhoneNumber(this.value)) { telError.textContent = 'Please enter a valid phone number (min 10 digits)'; } else { telError.textContent = ''; } }); document.getElementById('signup-email')?.addEventListener('input', function(e) { const emailError = document.getElementById('signup-emailError'); if (this.value && !validateEmail(this.value)) { emailError.textContent = 'Please enter a valid email address'; } else { emailError.textContent = ''; } }); function validateSignupForm(event) { event.preventDefault(); const name = document.getElementById('signup-name'); const email = document.getElementById('signup-email'); const password = document.getElementById('signup-password'); const tel = document.getElementById('signup-tel'); const country = document.getElementById('signup-country'); const interests = document.querySelectorAll('input[name="interests"]:checked'); const nameError = document.getElementById('signup-nameError'); const emailError = document.getElementById('signup-emailError'); const passwordError = document.getElementById('signup-passwordError'); const telError = document.getElementById('signup-telError'); const countryError = document.getElementById('signup-countryError'); const interestsError = document.getElementById('signup-interestsError'); // Reset error messages nameError.textContent = ''; emailError.textContent = ''; passwordError.textContent = ''; telError.textContent = ''; countryError.textContent = ''; interestsError.textContent = ''; let isValid = true; // Name validation if (name.value.trim().length < 2) { nameError.textContent = 'Please enter your full name'; isValid = false; } // Email validation if (!validateEmail(email.value)) { emailError.textContent = 'Please enter a valid email address'; isValid = false; } // Password validation if (!validatePassword(password.value)) { passwordError.textContent = 'Password must be at least 8 characters long'; isValid = false; } // Phone validation if (!validatePhoneNumber(tel.value)) { telError.textContent = 'Please enter a valid phone number (min 10 digits)'; isValid = false; } // Country validation if (!country.value) { countryError.textContent = 'Please select your country'; isValid = false; } // Interests validation if (interests.length === 0) { interestsError.textContent = 'Please select at least one interest'; isValid = false; } if (isValid) { // Here you would typically send the form data to your server console.log('Form is valid, ready to submit'); closeSignupModal(); } return false; } </script> <style> /* Additional styles for signup form */ .form-group.compact { margin-bottom: 0.5rem; } .form-group.compact label { margin-bottom: 0; font-size: 0.85rem; display: block; line-height: 1.2; } .form-group.compact input, .form-group.compact select { margin-bottom: 0; height: 28px; padding: 0 0.5rem; } .checkbox-group { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 1rem; } .checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--modal-text); cursor: pointer; line-height: 1; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; margin: 0.2; } select.form-control { width: 100%; padding: 0 0.5rem; border: 1px solid var(--input-border); border-radius: 4px; background: var(--body-background); color: var(--modal-text); font-size: 0.9rem; transition: all 0.3s; height: 35px; cursor: pointer; } select.form-control:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 2px #1A73E833; } .error-message { color: #dc3545; font-size: 0.8rem; margin: 0; display: block; min-height: 1rem; line-height: 1; } .modal-content { padding: 0.8rem; } .login-header { margin-bottom: 1rem; } .login-header h2 { margin-bottom: 0.2rem; } </style>