|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MetaView - Create Account</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<link rel="stylesheet" href="assets/css/st.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="login-container"> |
|
|
<div class="logo"> |
|
|
<!-- Replace with your logo --> |
|
|
<img src="logo.png" alt="Japanese Motors Logo"> |
|
|
</div> |
|
|
<h2>Japanese Motors</h2> |
|
|
<p class="subtitle">Access your financial dashboard</p> |
|
|
</div> |
|
|
<div class="form-container"> |
|
|
<form> |
|
|
<div class="form-group"> |
|
|
<label for="username">Username</label> |
|
|
<div class="input-icon"> |
|
|
<i class="fas fa-user"></i> |
|
|
<input type="text" id="username" value="maha"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="email">Email</label> |
|
|
<div class="input-icon"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
<input type="email" id="email" value="yout@email.com"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="country">Country</label> |
|
|
<div class="input-icon"> |
|
|
<i class="fas fa-globe"></i> |
|
|
<select id="country" required> |
|
|
<option value="">Select your country</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="phone">Phone Number</label> |
|
|
<div class="input-icon"> |
|
|
<i class="fas fa-phone"></i> |
|
|
<input type="tel" id="phone" value="0712515678"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="password-row"> |
|
|
<div class="form-group"> |
|
|
<label for="password">Password</label> |
|
|
<div class="input-icon"> |
|
|
<i class="fas fa-lock"></i> |
|
|
<input type="password" id="password" value="password123"> |
|
|
<span class="password-toggle" id="togglePassword"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="confirm-password">Confirm Password</label> |
|
|
<div class="input-icon"> |
|
|
<i class="fas fa-lock"></i> |
|
|
<input type="password" id="confirm-password" value="password123"> |
|
|
<span class="password-toggle" id="toggleConfirmPassword"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="create-account-btn">Create Account <i class="fas fa-arrow-right"></i></button> |
|
|
</form> |
|
|
|
|
|
<p class="signin-link">Already have an account? <a href="#">sign in</a></p> |
|
|
</div> |
|
|
|
|
|
</div><br> |
|
|
<footer> |
|
|
<div class="footer"> |
|
|
<p>© 2024 Japanese Motors. All rights reserved.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const togglePassword = document.getElementById('togglePassword'); |
|
|
const toggleConfirmPassword = document.getElementById('toggleConfirmPassword'); |
|
|
const passwordInput = document.getElementById('password'); |
|
|
const confirmPasswordInput = document.getElementById('confirm-password'); |
|
|
|
|
|
togglePassword.addEventListener('click', function() { |
|
|
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; |
|
|
passwordInput.setAttribute('type', type); |
|
|
this.querySelector('i').classList.toggle('fa-eye'); |
|
|
this.querySelector('i').classList.toggle('fa-eye-slash'); |
|
|
}); |
|
|
|
|
|
toggleConfirmPassword.addEventListener('click', function() { |
|
|
const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password'; |
|
|
confirmPasswordInput.setAttribute('type', type); |
|
|
this.querySelector('i').classList.toggle('fa-eye'); |
|
|
this.querySelector('i').classList.toggle('fa-eye-slash'); |
|
|
}); |
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
const form = document.querySelector('form'); |
|
|
form.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
if (passwordInput.value !== confirmPasswordInput.value) { |
|
|
alert('Passwords do not match!'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
alert('Account created successfully!'); |
|
|
form.reset(); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
