Spaces:
Sleeping
Sleeping
File size: 6,755 Bytes
c024705 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
<!doctype html>
<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>
|