Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>AIMHSA - Create Account</title> | |
| <link rel="stylesheet" href="auth.css" /> | |
| </head> | |
| <body> | |
| <div class="auth-container"> | |
| <div class="auth-card"> | |
| <div class="auth-header"> | |
| <h1 class="brand">AIMHSA</h1> | |
| <p class="subtitle">Mental Health Companion for Rwanda</p> | |
| </div> | |
| <form class="auth-form" id="registerForm" novalidate> | |
| <div class="form-group"> | |
| <label for="regUsername">Username *</label> | |
| <input type="text" id="regUsername" name="regUsername" | |
| placeholder="Enter your username" | |
| minlength="3" maxlength="50" | |
| pattern="^[a-zA-Z0-9_]+$" | |
| title="Username can only contain letters, numbers, and underscores" | |
| required /> | |
| <div class="field-error" id="regUsernameError"></div> | |
| <div class="field-help">3-50 characters, letters, numbers, and underscores only</div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="regEmail">Email Address *</label> | |
| <input type="email" id="regEmail" name="regEmail" | |
| placeholder="Enter your email address" | |
| maxlength="100" | |
| title="Enter a valid email address" | |
| required /> | |
| <div class="field-error" id="regEmailError"></div> | |
| <div class="field-help">We'll use this to contact you about your account</div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="regFullname">Full Name *</label> | |
| <input type="text" id="regFullname" name="regFullname" | |
| placeholder="Enter your full name" | |
| minlength="2" maxlength="100" | |
| pattern="^[a-zA-Z\s\-'\.]+$" | |
| title="Enter your full name (letters, spaces, hyphens, apostrophes, and periods only)" | |
| required /> | |
| <div class="field-error" id="regFullnameError"></div> | |
| <div class="field-help">Enter your complete name as it appears on official documents</div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="regTelephone">Phone Number *</label> | |
| <input type="tel" id="regTelephone" name="regTelephone" | |
| placeholder="+250XXXXXXXXX or 07XXXXXXXX" | |
| pattern="^(\+250|0)[0-9]{9}$" | |
| title="Enter a valid Rwanda phone number" | |
| required /> | |
| <div class="field-error" id="regTelephoneError"></div> | |
| <div class="field-help">Rwanda format: +250XXXXXXXXX or 07XXXXXXXX</div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="regProvince">Province *</label> | |
| <select id="regProvince" name="regProvince" required> | |
| <option value="">Select Province</option> | |
| <option value="Kigali">Kigali</option> | |
| <option value="Eastern">Eastern</option> | |
| <option value="Northern">Northern</option> | |
| <option value="Southern">Southern</option> | |
| <option value="Western">Western</option> | |
| </select> | |
| <div class="field-error" id="regProvinceError"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="regDistrict">District *</label> | |
| <select id="regDistrict" name="regDistrict" required> | |
| <option value="">Select District</option> | |
| </select> | |
| <div class="field-error" id="regDistrictError"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="regPassword">Password *</label> | |
| <input type="password" id="regPassword" name="regPassword" | |
| placeholder="Create a strong password" | |
| minlength="8" maxlength="128" | |
| title="Password must be at least 8 characters long" | |
| required /> | |
| <div class="field-error" id="regPasswordError"></div> | |
| <div class="field-help">At least 8 characters, include letters and numbers</div> | |
| <div class="password-strength-indicator"> | |
| <div class="password-strength-bar"></div> | |
| </div> | |
| <div class="password-strength"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="regConfirmPassword">Confirm Password *</label> | |
| <input type="password" id="regConfirmPassword" name="regConfirmPassword" | |
| placeholder="Confirm your password" | |
| required /> | |
| <div class="field-error" id="regConfirmPasswordError"></div> | |
| <div class="field-help">Must match the password above</div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="checkbox-label"> | |
| <input type="checkbox" id="agreeTerms" name="agreeTerms" required /> | |
| <span class="checkmark"></span> | |
| I agree to the <a href="#" target="_blank">Terms of Service</a> and <a href="#" target="_blank">Privacy Policy</a> * | |
| </label> | |
| <div class="field-error" id="agreeTermsError"></div> | |
| </div> | |
| <button type="submit" class="auth-btn" id="registerBtn">Create Account</button> | |
| </form> | |
| <div class="auth-links"> | |
| <p>Already have an account? <a href="/login">Sign In</a></p> | |
| </div> | |
| <div class="auth-footer"> | |
| <p>By continuing, you agree to our Terms of Service and Privacy Policy</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="register.js"></script> | |
| </body> | |
| </html> | |