|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Account Authentication</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
|
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); |
|
|
width: 100%; |
|
|
max-width: 550px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.form-container { |
|
|
padding: 30px; |
|
|
transition: transform 0.6s ease-in-out; |
|
|
} |
|
|
|
|
|
h2 { |
|
|
text-align: center; |
|
|
color: #333; |
|
|
margin-bottom: 25px; |
|
|
font-size: 28px; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 20px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.input-container { |
|
|
position: relative; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.input-container i { |
|
|
position: absolute; |
|
|
left: 12px; |
|
|
color: #ccc; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.input-container input, |
|
|
.input-container select { |
|
|
width: 100%; |
|
|
padding: 10px 12px 10px 35px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 6px; |
|
|
outline: none; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
color: #fff; |
|
|
} |
|
|
|
|
|
.password-container .toggle-password { |
|
|
position: absolute; |
|
|
right: 12px; |
|
|
cursor: pointer; |
|
|
color: #ccc; |
|
|
} |
|
|
|
|
|
label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
font-weight: 600; |
|
|
color: #444; |
|
|
} |
|
|
|
|
|
input, select { |
|
|
width: 100%; |
|
|
padding: 14px; |
|
|
border: 2px solid #ddd; |
|
|
border-radius: 8px; |
|
|
font-size: 16px; |
|
|
transition: border 0.3s; |
|
|
} |
|
|
|
|
|
input:focus, select:focus { |
|
|
border-color: #6e8efb; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.password-row { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.password-column { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.password-container { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.toggle-password { |
|
|
position: absolute; |
|
|
right: 15px; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
cursor: pointer; |
|
|
color: #777; |
|
|
} |
|
|
|
|
|
.error-message { |
|
|
color: #e74c3c; |
|
|
font-size: 14px; |
|
|
margin-top: 5px; |
|
|
min-height: 20px; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
width: 100%; |
|
|
padding: 14px; |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
color: white; |
|
|
font-size: 18px; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
background: linear-gradient(135deg, #5d7ce0, #9666d3); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.switch-form { |
|
|
text-align: center; |
|
|
margin-top: 20px; |
|
|
color: #555; |
|
|
} |
|
|
|
|
|
.switch-form a { |
|
|
color: #6e8efb; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: color 0.3s; |
|
|
} |
|
|
|
|
|
.switch-form a:hover { |
|
|
color: #a777e3; |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
.success-message { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
color: white; |
|
|
padding: 20px; |
|
|
text-align: center; |
|
|
border-radius: 10px; |
|
|
margin-bottom: 20px; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.success-message i { |
|
|
font-size: 48px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
@media (max-width: 576px) { |
|
|
.container { |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.form-container { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.password-row { |
|
|
flex-direction: column; |
|
|
gap: 0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="form-container" id="signup-container"> |
|
|
<div class="success-message" id="signup-success"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<h3>Account Created Successfully!</h3> |
|
|
<p>Redirecting to sign in page...</p> |
|
|
</div> |
|
|
|
|
|
<h2>Create Your Account</h2> |
|
|
<form id="signup-form"> |
|
|
<div class="form-group"> |
|
|
<label for="username">Username</label> |
|
|
<input type="text" id="username" placeholder="Enter your username" required> |
|
|
<div class="error-message" id="username-error"></div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="email">Email Address</label> |
|
|
<input type="email" id="email" placeholder="Enter your email" required> |
|
|
<div class="error-message" id="email-error"></div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="country">Country</label> |
|
|
<select id="country" required> |
|
|
<option value="">Select your country</option> |
|
|
</select> |
|
|
<div class="error-message" id="country-error"></div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="phone">Phone Number</label> |
|
|
<input type="tel" id="phone" placeholder="Enter your phone number" required> |
|
|
<div class="error-message" id="phone-error"></div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label>Password</label> |
|
|
<div class="password-row"> |
|
|
<div class="password-column"> |
|
|
<div class="password-container"> |
|
|
<input type="password" id="password" placeholder="Create a password" required> |
|
|
<span class="toggle-password" id="toggle-password"> |
|
|
<i class="far fa-eye"></i> |
|
|
</span> |
|
|
</div> |
|
|
<div class="error-message" id="password-error"></div> |
|
|
</div> |
|
|
<div class="password-column"> |
|
|
<div class="password-container"> |
|
|
<input type="password" id="confirm-password" placeholder="Confirm password" required> |
|
|
<span class="toggle-password" id="toggle-confirm-password"> |
|
|
<i class="far fa-eye"></i> |
|
|
</span> |
|
|
</div> |
|
|
<div class="error-message" id="confirm-password-error"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="btn">Create Account</button> |
|
|
|
|
|
<div class="switch-form"> |
|
|
Already have an account? <a id="switch-to-signin">Sign In</a> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="form-container" id="signin-container" style="display: none; transform: translateX(100%);"> |
|
|
<h2>Sign In to Your Account</h2> |
|
|
<form id="signin-form"> |
|
|
<div class="form-group"> |
|
|
<label for="signin-email">Email or Username</label> |
|
|
<input type="text" id="signin-email" placeholder="Enter your email or username" required> |
|
|
<div class="error-message" id="signin-email-error"></div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="signin-password">Password</label> |
|
|
<div class="password-container"> |
|
|
<input type="password" id="signin-password" placeholder="Enter your password" required> |
|
|
<span class="toggle-password" id="toggle-signin-password"> |
|
|
<i class="far fa-eye"></i> |
|
|
</span> |
|
|
</div> |
|
|
<div class="error-message" id="signin-password-error"></div> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="btn">Sign In</button> |
|
|
|
|
|
<div class="switch-form"> |
|
|
Don't have an account? <a id="switch-to-signup">Sign Up</a> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const signupForm = document.getElementById('signup-form'); |
|
|
const signinForm = document.getElementById('signin-form'); |
|
|
const successMessage = document.getElementById('signup-success'); |
|
|
const switchToSignin = document.getElementById('switch-to-signin'); |
|
|
const switchToSignup = document.getElementById('switch-to-signup'); |
|
|
const signupContainer = document.getElementById('signup-container'); |
|
|
const signinContainer = document.getElementById('signin-container'); |
|
|
|
|
|
|
|
|
['password', 'confirm-password', 'signin-password'].forEach(id => { |
|
|
const toggle = document.getElementById(`toggle-${id}`); |
|
|
const input = document.getElementById(id); |
|
|
toggle.addEventListener('click', () => { |
|
|
input.type = input.type === 'password' ? 'text' : 'password'; |
|
|
toggle.innerHTML = input.type === 'password' ? '<i class="far fa-eye"></i>' : '<i class="far fa-eye-slash"></i>'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
switchToSignin.addEventListener('click', () => { |
|
|
signupContainer.style.transform = 'translateX(-100%)'; |
|
|
signinContainer.style.display = 'block'; |
|
|
setTimeout(() => signinContainer.style.transform = 'translateX(0)', 10); |
|
|
}); |
|
|
|
|
|
switchToSignup.addEventListener('click', () => { |
|
|
signinContainer.style.transform = 'translateX(100%)'; |
|
|
setTimeout(() => { |
|
|
signinContainer.style.display = 'none'; |
|
|
signupContainer.style.transform = 'translateX(0)'; |
|
|
}, 300); |
|
|
}); |
|
|
|
|
|
const countries = [ |
|
|
{ name: "Afghanistan", dial_code: "+93", code: "AF" }, |
|
|
{ name: "Albania", dial_code: "+355", code: "AL" }, |
|
|
{ name: "Algeria", dial_code: "+213", code: "DZ" }, |
|
|
{ name: "Andorra", dial_code: "+376", code: "AD" }, |
|
|
{ name: "Angola", dial_code: "+244", code: "AO" }, |
|
|
{ name: "Antigua and Barbuda", dial_code: "+1-268", code: "AG" }, |
|
|
{ name: "Argentina", dial_code: "+54", code: "AR" }, |
|
|
{ name: "Armenia", dial_code: "+374", code: "AM" }, |
|
|
{ name: "Australia", dial_code: "+61", code: "AU" }, |
|
|
{ name: "Austria", dial_code: "+43", code: "AT" }, |
|
|
{ name: "Azerbaijan", dial_code: "+994", code: "AZ" }, |
|
|
{ name: "Bahamas", dial_code: "+1-242", code: "BS" }, |
|
|
{ name: "Bahrain", dial_code: "+973", code: "BH" }, |
|
|
{ name: "Bangladesh", dial_code: "+880", code: "BD" }, |
|
|
{ name: "Barbados", dial_code: "+1-246", code: "BB" }, |
|
|
{ name: "Belarus", dial_code: "+375", code: "BY" }, |
|
|
{ name: "Belgium", dial_code: "+32", code: "BE" }, |
|
|
{ name: "Belize", dial_code: "+501", code: "BZ" }, |
|
|
{ name: "Benin", dial_code: "+229", code: "BJ" }, |
|
|
{ name: "Bhutan", dial_code: "+975", code: "BT" }, |
|
|
{ name: "Bolivia", dial_code: "+591", code: "BO" }, |
|
|
{ name: "Bosnia and Herzegovina", dial_code: "+387", code: "BA" }, |
|
|
{ name: "Botswana", dial_code: "+267", code: "BW" }, |
|
|
{ name: "Brazil", dial_code: "+55", code: "BR" }, |
|
|
{ name: "Brunei", dial_code: "+673", code: "BN" }, |
|
|
{ name: "Bulgaria", dial_code: "+359", code: "BG" }, |
|
|
{ name: "Burkina Faso", dial_code: "+226", code: "BF" }, |
|
|
{ name: "Burundi", dial_code: "+257", code: "BI" }, |
|
|
{ name: "Cabo Verde", dial_code: "+238", code: "CV" }, |
|
|
{ name: "Cambodia", dial_code: "+855", code: "KH" }, |
|
|
{ name: "Cameroon", dial_code: "+237", code: "CM" }, |
|
|
{ name: "Canada", dial_code: "+1", code: "CA" }, |
|
|
{ name: "Central African Republic", dial_code: "+236", code: "CF" }, |
|
|
{ name: "Chad", dial_code: "+235", code: "TD" }, |
|
|
{ name: "Chile", dial_code: "+56", code: "CL" }, |
|
|
{ name: "China", dial_code: "+86", code: "CN" }, |
|
|
{ name: "Colombia", dial_code: "+57", code: "CO" }, |
|
|
{ name: "Comoros", dial_code: "+269", code: "KM" }, |
|
|
{ name: "Congo (Brazzaville)", dial_code: "+242", code: "CG" }, |
|
|
{ name: "Congo (Kinshasa)", dial_code: "+243", code: "CD" }, |
|
|
{ name: "Costa Rica", dial_code: "+506", code: "CR" }, |
|
|
{ name: "Croatia", dial_code: "+385", code: "HR" }, |
|
|
{ name: "Cuba", dial_code: "+53", code: "CU" }, |
|
|
{ name: "Cyprus", dial_code: "+357", code: "CY" }, |
|
|
{ name: "Czechia", dial_code: "+420", code: "CZ" }, |
|
|
{ name: "Denmark", dial_code: "+45", code: "DK" }, |
|
|
{ name: "Djibouti", dial_code: "+253", code: "DJ" }, |
|
|
{ name: "Dominica", dial_code: "+1-767", code: "DM" }, |
|
|
{ name: "Dominican Republic", dial_code: "+1-809", code: "DO" }, |
|
|
{ name: "Ecuador", dial_code: "+593", code: "EC" }, |
|
|
{ name: "Egypt", dial_code: "+20", code: "EG" }, |
|
|
{ name: "El Salvador", dial_code: "+503", code: "SV" }, |
|
|
{ name: "Equatorial Guinea", dial_code: "+240", code: "GQ" }, |
|
|
{ name: "Eritrea", dial_code: "+291", code: "ER" }, |
|
|
{ name: "Estonia", dial_code: "+372", code: "EE" }, |
|
|
{ name: "Eswatini", dial_code: "+268", code: "SZ" }, |
|
|
{ name: "Ethiopia", dial_code: "+251", code: "ET" }, |
|
|
{ name: "Fiji", dial_code: "+679", code: "FJ" }, |
|
|
{ name: "Finland", dial_code: "+358", code: "FI" }, |
|
|
{ name: "France", dial_code: "+33", code: "FR" }, |
|
|
{ name: "Gabon", dial_code: "+241", code: "GA" }, |
|
|
{ name: "Gambia", dial_code: "+220", code: "GM" }, |
|
|
{ name: "Georgia", dial_code: "+995", code: "GE" }, |
|
|
{ name: "Germany", dial_code: "+49", code: "DE" }, |
|
|
{ name: "Ghana", dial_code: "+233", code: "GH" }, |
|
|
{ name: "Greece", dial_code: "+30", code: "GR" }, |
|
|
{ name: "Grenada", dial_code: "+1-473", code: "GD" }, |
|
|
{ name: "Guatemala", dial_code: "+502", code: "GT" }, |
|
|
{ name: "Guinea", dial_code: "+224", code: "GN" }, |
|
|
{ name: "Guinea-Bissau", dial_code: "+245", code: "GW" }, |
|
|
{ name: "Guyana", dial_code: "+592", code: "GY" }, |
|
|
{ name: "Haiti", dial_code: "+509", code: "HT" }, |
|
|
{ name: "Honduras", dial_code: "+504", code: "HN" }, |
|
|
{ name: "Hungary", dial_code: "+36", code: "HU" }, |
|
|
{ name: "Iceland", dial_code: "+354", code: "IS" }, |
|
|
{ name: "India", dial_code: "+91", code: "IN" }, |
|
|
{ name: "Indonesia", dial_code: "+62", code: "ID" }, |
|
|
{ name: "Iran", dial_code: "+98", code: "IR" }, |
|
|
{ name: "Iraq", dial_code: "+964", code: "IQ" }, |
|
|
{ name: "Ireland", dial_code: "+353", code: "IE" }, |
|
|
{ name: "Israel", dial_code: "+972", code: "IL" }, |
|
|
{ name: "Italy", dial_code: "+39", code: "IT" }, |
|
|
{ name: "Jamaica", dial_code: "+1-876", code: "JM" }, |
|
|
{ name: "Japan", dial_code: "+81", code: "JP" }, |
|
|
{ name: "Jordan", dial_code: "+962", code: "JO" }, |
|
|
{ name: "Kazakhstan", dial_code: "+7", code: "KZ" }, |
|
|
{ name: "Kenya", dial_code: "+254", code: "KE" }, |
|
|
{ name: "Kiribati", dial_code: "+686", code: "KI" }, |
|
|
{ name: "Kuwait", dial_code: "+965", code: "KW" }, |
|
|
{ name: "Kyrgyzstan", dial_code: "+996", code: "KG" }, |
|
|
{ name: "Laos", dial_code: "+856", code: "LA" }, |
|
|
{ name: "Latvia", dial_code: "+371", code: "LV" }, |
|
|
{ name: "Lebanon", dial_code: "+961", code: "LB" }, |
|
|
{ name: "Lesotho", dial_code: "+266", code: "LS" }, |
|
|
{ name: "Liberia", dial_code: "+231", code: "LR" }, |
|
|
{ name: "Libya", dial_code: "+218", code: "LY" }, |
|
|
{ name: "Liechtenstein", dial_code: "+423", code: "LI" }, |
|
|
{ name: "Lithuania", dial_code: "+370", code: "LT" }, |
|
|
{ name: "Luxembourg", dial_code: "+352", code: "LU" }, |
|
|
{ name: "Madagascar", dial_code: "+261", code: "MG" }, |
|
|
{ name: "Malawi", dial_code: "+265", code: "MW" }, |
|
|
{ name: "Malaysia", dial_code: "+60", code: "MY" }, |
|
|
{ name: "Maldives", dial_code: "+960", code: "MV" }, |
|
|
{ name: "Mali", dial_code: "+223", code: "ML" }, |
|
|
{ name: "Malta", dial_code: "+356", code: "MT" }, |
|
|
{ name: "Marshall Islands", dial_code: "+692", code: "MH" }, |
|
|
{ name: "Mauritania", dial_code: "+222", code: "MR" }, |
|
|
{ name: "Mauritius", dial_code: "+230", code: "MU" }, |
|
|
{ name: "Mexico", dial_code: "+52", code: "MX" }, |
|
|
{ name: "Micronesia", dial_code: "+691", code: "FM" }, |
|
|
{ name: "Moldova", dial_code: "+373", code: "MD" }, |
|
|
{ name: "Monaco", dial_code: "+377", code: "MC" }, |
|
|
{ name: "Mongolia", dial_code: "+976", code: "MN" }, |
|
|
{ name: "Montenegro", dial_code: "+382", code: "ME" }, |
|
|
{ name: "Morocco", dial_code: "+212", code: "MA" }, |
|
|
{ name: "Mozambique", dial_code: "+258", code: "MZ" }, |
|
|
{ name: "Myanmar", dial_code: "+95", code: "MM" }, |
|
|
{ name: "Namibia", dial_code: "+264", code: "NA" }, |
|
|
{ name: "Nauru", dial_code: "+674", code: "NR" }, |
|
|
{ name: "Nepal", dial_code: "+977", code: "NP" }, |
|
|
{ name: "Netherlands", dial_code: "+31", code: "NL" }, |
|
|
{ name: "New Zealand", dial_code: "+64", code: "NZ" }, |
|
|
{ name: "Nicaragua", dial_code: "+505", code: "NI" }, |
|
|
{ name: "Niger", dial_code: "+227", code: "NE" }, |
|
|
{ name: "Nigeria", dial_code: "+234", code: "NG" }, |
|
|
{ name: "North Korea", dial_code: "+850", code: "KP" }, |
|
|
{ name: "North Macedonia", dial_code: "+389", code: "MK" }, |
|
|
{ name: "Norway", dial_code: "+47", code: "NO" }, |
|
|
{ name: "Oman", dial_code: "+968", code: "OM" }, |
|
|
{ name: "Pakistan", dial_code: "+92", code: "PK" }, |
|
|
{ name: "Palau", dial_code: "+680", code: "PW" }, |
|
|
{ name: "Palestine", dial_code: "+970", code: "PS" }, |
|
|
{ name: "Panama", dial_code: "+507", code: "PA" }, |
|
|
{ name: "Papua New Guinea", dial_code: "+675", code: "PG" }, |
|
|
{ name: "Paraguay", dial_code: "+595", code: "PY" }, |
|
|
{ name: "Peru", dial_code: "+51", code: "PE" }, |
|
|
{ name: "Philippines", dial_code: "+63", code: "PH" }, |
|
|
{ name: "Poland", dial_code: "+48", code: "PL" }, |
|
|
{ name: "Portugal", dial_code: "+351", code: "PT" }, |
|
|
{ name: "Qatar", dial_code: "+974", code: "QA" }, |
|
|
{ name: "Romania", dial_code: "+40", code: "RO" }, |
|
|
{ name: "Russia", dial_code: "+7", code: "RU" }, |
|
|
{ name: "Rwanda", dial_code: "+250", code: "RW" }, |
|
|
{ name: "Saint Kitts and Nevis", dial_code: "+1-869", code: "KN" }, |
|
|
{ name: "Saint Lucia", dial_code: "+1-758", code: "LC" }, |
|
|
{ name: "Saint Vincent and the Grenadines", dial_code: "+1-784", code: "VC" }, |
|
|
{ name: "Samoa", dial_code: "+685", code: "WS" }, |
|
|
{ name: "San Marino", dial_code: "+378", code: "SM" }, |
|
|
{ name: "Sao Tome and Principe", dial_code: "+239", code: "ST" }, |
|
|
{ name: "Saudi Arabia", dial_code: "+966", code: "SA" }, |
|
|
{ name: "Senegal", dial_code: "+221", code: "SN" }, |
|
|
{ name: "Serbia", dial_code: "+381", code: "RS" }, |
|
|
{ name: "Seychelles", dial_code: "+248", code: "SC" }, |
|
|
{ name: "Sierra Leone", dial_code: "+232", code: "SL" }, |
|
|
{ name: "Singapore", dial_code: "+65", code: "SG" }, |
|
|
{ name: "Slovakia", dial_code: "+421", code: "SK" }, |
|
|
{ name: "Slovenia", dial_code: "+386", code: "SI" }, |
|
|
{ name: "Solomon Islands", dial_code: "+677", code: "SB" }, |
|
|
{ name: "Somalia", dial_code: "+252", code: "SO" }, |
|
|
{ name: "South Africa", dial_code: "+27", code: "ZA" }, |
|
|
{ name: "South Korea", dial_code: "+82", code: "KR" }, |
|
|
{ name: "South Sudan", dial_code: "+211", code: "SS" }, |
|
|
{ name: "Spain", dial_code: "+34", code: "ES" }, |
|
|
{ name: "Sri Lanka", dial_code: "+94", code: "LK" }, |
|
|
{ name: "Sudan", dial_code: "+249", code: "SD" }, |
|
|
{ name: "Suriname", dial_code: "+597", code: "SR" }, |
|
|
{ name: "Sweden", dial_code: "+46", code: "SE" }, |
|
|
{ name: "Switzerland", dial_code: "+41", code: "CH" }, |
|
|
{ name: "Syria", dial_code: "+963", code: "SY" }, |
|
|
{ name: "Taiwan", dial_code: "+886", code: "TW" }, |
|
|
{ name: "Tajikistan", dial_code: "+992", code: "TJ" }, |
|
|
{ name: "Tanzania", dial_code: "+255", code: "TZ" }, |
|
|
{ name: "Thailand", dial_code: "+66", code: "TH" }, |
|
|
{ name: "Timor-Leste", dial_code: "+670", code: "TL" }, |
|
|
{ name: "Togo", dial_code: "+228", code: "TG" }, |
|
|
{ name: "Tonga", dial_code: "+676", code: "TO" }, |
|
|
{ name: "Trinidad and Tobago", dial_code: "+1-868", code: "TT" }, |
|
|
{ name: "Tunisia", dial_code: "+216", code: "TN" }, |
|
|
{ name: "Turkey", dial_code: "+90", code: "TR" }, |
|
|
{ name: "Turkmenistan", dial_code: "+993", code: "TM" }, |
|
|
{ name: "Tuvalu", dial_code: "+688", code: "TV" }, |
|
|
{ name: "Uganda", dial_code: "+256", code: "UG" }, |
|
|
{ name: "Ukraine", dial_code: "+380", code: "UA" }, |
|
|
{ name: "United Arab Emirates", dial_code: "+971", code: "AE" }, |
|
|
{ name: "United Kingdom", dial_code: "+44", code: "GB" }, |
|
|
{ name: "United States", dial_code: "+1", code: "US" }, |
|
|
{ name: "Uruguay", dial_code: "+598", code: "UY" }, |
|
|
{ name: "Uzbekistan", dial_code: "+998", code: "UZ" }, |
|
|
{ name: "Vanuatu", dial_code: "+678", code: "VU" }, |
|
|
{ name: "Vatican City", dial_code: "+379", code: "VA" }, |
|
|
{ name: "Venezuela", dial_code: "+58", code: "VE" }, |
|
|
{ name: "Vietnam", dial_code: "+84", code: "VN" }, |
|
|
{ name: "Yemen", dial_code: "+967", code: "YE" }, |
|
|
{ name: "Zambia", dial_code: "+260", code: "ZM" }, |
|
|
{ name: "Zimbabwe", dial_code: "+263", code: "ZW"}, |
|
|
]; |
|
|
|
|
|
|
|
|
const countrySelect = document.getElementById("country"); |
|
|
|
|
|
countries.forEach(c => { |
|
|
const option = document.createElement("option"); |
|
|
option.value = c.code; |
|
|
option.textContent = `${c.name} (${c.dial_code})`; |
|
|
countrySelect.appendChild(option); |
|
|
}); |
|
|
|
|
|
switchToSignup.addEventListener('click', function() { |
|
|
signinContainer.style.transform = 'translateX(100%)'; |
|
|
setTimeout(() => { |
|
|
signinContainer.style.display = 'none'; |
|
|
signupContainer.style.transform = 'translateX(0)'; |
|
|
}, 300); |
|
|
}); |
|
|
|
|
|
|
|
|
signupForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
document.querySelectorAll('.error-message').forEach(el => el.textContent = ''); |
|
|
|
|
|
|
|
|
const formData = { |
|
|
username: document.getElementById('username').value.trim(), |
|
|
email: document.getElementById('email').value.trim(), |
|
|
country: document.getElementById('country').value, |
|
|
phone: document.getElementById('phone').value.trim(), |
|
|
password: document.getElementById('password').value, |
|
|
confirm_password: document.getElementById('confirm-password').value |
|
|
}; |
|
|
|
|
|
fetch('signup.php', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify(formData) |
|
|
}) |
|
|
.then(res => res.json()) |
|
|
.then(data => { |
|
|
if (data.success) { |
|
|
successMessage.style.display = 'block'; |
|
|
signupForm.style.display = 'none'; |
|
|
setTimeout(() => { |
|
|
successMessage.style.display = 'none'; |
|
|
signupForm.style.display = 'block'; |
|
|
switchToSignin.click(); |
|
|
}, 3000); |
|
|
} else { |
|
|
alert(data.message); |
|
|
} |
|
|
}) |
|
|
.catch(err => console.error('Signup error:', err)); |
|
|
}); |
|
|
|
|
|
|
|
|
signinForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
document.getElementById('signin-email-error').textContent = ''; |
|
|
document.getElementById('signin-password-error').textContent = ''; |
|
|
|
|
|
const formData = { |
|
|
email: document.getElementById('signin-email').value.trim(), |
|
|
password: document.getElementById('signin-password').value |
|
|
}; |
|
|
|
|
|
fetch('login.php', { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
}, |
|
|
body: JSON.stringify(formData) |
|
|
}) |
|
|
.then(res => res.json()) |
|
|
.then(data => { |
|
|
if (data.success) { |
|
|
window.location.href = data.redirect; |
|
|
} else { |
|
|
alert(data.message); |
|
|
} |
|
|
}) |
|
|
.catch(err => console.error('Login error:', err)); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
