mirror of
https://github.com/byecorps/id.git
synced 2024-09-20 07:50:15 +01:00
127 lines
6.9 KiB
HTML
127 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Sign up // ByeCorps ID</title>
|
||
<link rel="stylesheet" href="./styles/base.css">
|
||
<link rel="stylesheet" href="./styles/loginform.css">
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<h1 class="bc-font bc-logo"><span class="weight1">Bye</span><span class="weight2">Corps</span><span class="weight3"> ID</span></h1>
|
||
<p class="center">Ready for your ByeCorps ID?</p>
|
||
|
||
<h2 class="center">Sign up</h2>
|
||
<p class="center small">Already have an ID? <a href="./login.html">Log in</a></p>
|
||
<form action="#" id="signup">
|
||
<div class="input email">
|
||
<label for="email"><i aria-hidden="true" class="fa-solid fa-fw fa-envelope" title="Email"></i><span class="fa-sr-only">Email address</span></label>
|
||
<input type="email" name="email" id="email" required placeholder="a.dent@squornshellous.cloud" />
|
||
<!-- <button id="switchtophone">
|
||
<i class="fa-solid fa-fw fa-mobile-retro" title="Use phone number instead"></i>
|
||
<span class="fa-sr-only-focusable">Use phone number instead</span>
|
||
</button> -->
|
||
</div>
|
||
<!-- <div class="input phone">
|
||
<button id="switchtoemail">
|
||
<i class="fa-solid fa-fw fa-envelope" title="Use email instead"></i>
|
||
<span class="fa-sr-only-focusable">Use email instead</span>
|
||
</button>
|
||
<label for="phone"><i aria-hidden="true" class="fa-solid fa-fw fa-mobile-retro" title="Phone"></i><span class="fa-sr-only">Phone number</span></label>
|
||
<input type="tel" name="phone" id="phone" placeholder="+1 800 APL–CARE" />
|
||
</div> -->
|
||
|
||
<div class="input password">
|
||
<label for="password"><i aria-hidden="true" class="fa-solid fa-fw fa-lock" title="Password"></i><span class="fa-sr-only">Password</span></label>
|
||
<input type="password" name="password" id="password" required placeholder="Password: keep secure" />
|
||
</div>
|
||
|
||
<div class="password-strength">
|
||
<p style="margin: 0;">Password requirements:</p>
|
||
<ul>
|
||
<li><i style="color: var(--oc-red-5);" class="fa-fw fa-solid fa-circle-xmark"></i> At least 8 characters</li>
|
||
</ul>
|
||
|
||
<script>
|
||
|
||
let password = document.getElementById("password");
|
||
let passwordStrength = document.querySelector(".password-strength");
|
||
|
||
password.addEventListener("input", function() {
|
||
let passwordValue = password.value;
|
||
let passwordLength = passwordValue.length;
|
||
let passwordStrengthList = passwordStrength.querySelectorAll("li");
|
||
let passwordStrengthListLength = passwordStrengthList.length;
|
||
|
||
if (passwordLength >= 8) {
|
||
passwordStrengthList[0].querySelector("i").classList.remove("fa-circle-xmark");
|
||
passwordStrengthList[0].querySelector("i").classList.add("fa-circle-check");
|
||
} else {
|
||
passwordStrengthList[0].querySelector("i").classList.remove("fa-circle-check");
|
||
passwordStrengthList[0].querySelector("i").classList.add("fa-circle-xmark");
|
||
}
|
||
});
|
||
</script>
|
||
</div>
|
||
|
||
<div class="input password-confirm">
|
||
<label for="password-confirm"><i aria-hidden="true" class="fa-solid fa-fw fa-lock" title="Password"></i><span class="fa-sr-only">Confirm password</span></label>
|
||
<input type="password" name="password-confirm" id="password-confirm" required placeholder="Confirm password" />
|
||
</div>
|
||
|
||
<div class="password-confirm-requirements">
|
||
<i class="fa-fw fa-solid fa-circle-xmark"></i> Passwords match
|
||
|
||
<script>
|
||
let passwordConfirm = document.getElementById("password-confirm");
|
||
|
||
passwordConfirm.addEventListener("input", function() {
|
||
let passwordConfirmValue = passwordConfirm.value;
|
||
let passwordConfirmLength = passwordConfirmValue.length;
|
||
let passwordConfirmRequirements = document.querySelector(".password-confirm-requirements");
|
||
|
||
if (passwordConfirmValue == password.value) {
|
||
passwordConfirmRequirements.querySelector("i").classList.remove("fa-circle-xmark");
|
||
passwordConfirmRequirements.querySelector("i").classList.add("fa-circle-check");
|
||
} else {
|
||
passwordConfirmRequirements.querySelector("i").classList.remove("fa-circle-check");
|
||
passwordConfirmRequirements.querySelector("i").classList.add("fa-circle-xmark");
|
||
}
|
||
});
|
||
</script>
|
||
</div>
|
||
|
||
<div class="legal">
|
||
<div class="tos-agree">
|
||
<input type="checkbox" name="tos-agree" id="tos-agree" required />
|
||
<label for="tos-agree">I agree to the <a href="#">Terms of Service</a></label>
|
||
</div>
|
||
<div class="privacy-agree">
|
||
<input type="checkbox" name="privacy-agree" id="privacy-agree" required />
|
||
<label for="privacy-agree">I agree to the <a href="#">Privacy Policy</a></label>
|
||
</div>
|
||
<div class="asshole-agree">
|
||
<input type="checkbox" name="asshole-agree" id="asshole-agree" required />
|
||
<label for="asshole-agree">I agree to <a href="https://asshole.fyi">not be an asshole</a></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="finisher">
|
||
<button type="submit" class="bc-btn bc-btn-primary">Sign up</button>
|
||
<button type="reset" class="bc-btn">Reset</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="sso">
|
||
<p>Or, sign up with</p>
|
||
<div class="sso-buttons">
|
||
<a href="#" class="bc-btn btn-sso sso-omglol"><img src="https://cdn.cache.lol/img/prami.svg" alt="omg.lol logo" aria-hidden="true"> omg.lol</a>
|
||
<a href="#" class="bc-btn btn-sso sso-litauth"><img src="https://auth.litdevs.org/resources/litauth.png" alt="LITauth logo" aria-hidden="true"> LITauth</a>
|
||
<a href="#" class="bc-btn btn-sso sso-github"><i class="fa-fw fa-brands fa-github" aria-hidden="true"></i> GitHub</a>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</body>
|
||
</html> |