Skip to content

W
web-app-templates
Commit 8feab482 authored by konstantin-smirnov's avatar konstantin-smirnov
Browse files
Options

Initial commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 1767 additions and 0 deletions
README.md 0 → 100644
View file @ 8feab482
# Web App Templates
Project where the page layout is stored
\ No newline at end of file
forms/signIn/chooseMethod.html 0 → 100644
View file @ 8feab482
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700&display=swap"/>
<link rel="stylesheet" href="../../public/styles.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>AYA Digital, LLC Telehealth</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root" style="width:100%">
<div class='header'>
<div><img src='images/logo.png'></div>
</div>
<div class="base-block">
<div class="select">Select the Login method</div>
<div class="outer-form-block">
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="inner-form-block">
<div class="form-block">
<!--#if !usernameHidden??-->
<div class="email">
<button tabindex="1" id="username" class="username-input" name="username" required value="" type="text" autocomplete="off"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
>
<div class="picture"><img src='images/envelope.svg' width="20px"></div>
<div>Sign in with Email</div>
</button>
</div>
<!--/#if-->
<div class="google">
<button tabindex="2" id="password" class="password-input" name="password" required type="password" autocomplete="off"
>
<div class="picture"><img src='images/google.png' width="20px"></div>
<div>Sign in with Google</div>
</button>
</div>
<div class="have-account">
<!--#if realm.resetPasswordAllowed-->
<span class="text">Already heave an account?</span>
<span class="link"><a tabindex="5" href="#">Sign in</a></span>
<!--/#if-->
</div>
<div class="agreement">
By registering you agree to the
<a href="#">Terms of Servise Privacy Policy</a> and <a href="#">Cookie Policy</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
forms/signIn/chooseMethodAdopted.html 0 → 100644
View file @ 8feab482
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700&display=swap"/>
<link rel="stylesheet" href="../../public/styles.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>AYA Digital, LLC Telehealth</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root" style="width:100%">
<div class='header'>
<div><img src='images/logo.png'></div>
</div>
<div class="base-block">
<div class="select">Select the Login method</div>
<div class="outer-form-block">
<div class="inner-form-block choose-method">
<div class="form-block choose-method">
<!--#if realm.password && realm.registrationAllowed && !registrationDisabled??-->
<div class="email">
<a href="${url.registrationUrl}">
<div class="picture">
<!--${url.resourcesPath}/img/aya/google.png-->
<img src="images/envelope.svg" width="20px">
</div>
<div>Sign in with Email<!--${msg("doRegister")}--></div>
</a>
</div>
<!--/#if-->
<!--#list social.providers as p-->
<div class="google">
<a href="${p.loginUrl}">
<div class="picture">
<!--${url.resourcesPath}/img/aya/google.png-->
<img src="images/google.png" width="20px">
</div>
<div>Sign in with Google</div>
</a>
</div>
<!--/#list-->
<div class="have-account">
<span class="text">Already heave an account?</span>
<span class="link"><a tabindex="5" href="#" onclick="fillAndSubmit('${auth.authenticationSelections[1].authExecId}')">Sign in</a></span>
</div>
<div class="agreement">
By registering you agree to the
<a href="#">Terms of Servise Privacy Policy</a> and <a href="#">Cookie Policy</a>
</div>
</div>
</div>
<form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post" hidden="hidden">
<input type="hidden" id="authexec-hidden-input" name="authenticationExecution" />
</form>
</div>
</div>
</div>
</body>
</html>
forms/signIn/css/styles.css 0 → 100644
View file @ 8feab482
body {
background-color: rgba(245, 245, 245, 1);
margin: 0px;
width: 100%;
min-height: 100vh;
max-height: 100%;
font-family: Manrope;
font-weight: 500;
}
@media screen and (max-width: 568px) {
body .form-block .new-password input,
body .form-block .confirm-password input,
body .form-block .username input,
body .form-block .password input {
width: auto;
}
body .form-block .email a, body .form-block .google a {
width: 100%;
}
body .form-block .email button, body .form-block .google button {
width: 100%;
}
body .form-block .email button .picture, body .form-block .google button .picture {
margin-right: 10%;
}
body .form-block .email a .picture, body .form-block .google a .picture {
margin-right: 10%;
}
body .header {
width: 100%;
}
body {
background-color: rgba(255, 255, 255, 1);
}
body .outer-form-block {
display: block;
}
body .sign-in {
text-align: left;
margin-left: 34px;
}
body .form-block label {
max-width: 100px;
}
body form .submit input {
width: 86%;
}
body form {
height: 100%;
}
body .header {
padding: 20px 10% 20px 10%;
box-shadow: none;
width: auto;
}
body .header .prevpage {
flex-wrap: wrap;
display: flex !important;
align-content: center;
}
body .base-block .prevpage-desktop {
display: none;
}
body .select {
height: 200px;
}
}
body .header .prevpage {
display: none;
}
body .base-block .prevpage-desktop {
position: relative;
left: 25px;
top: -11%;
width: auto;
}
.header {
display: flex;
background-color: rgba(255, 255, 255, 1);
flex-direction: row;
justify-content: space-between;
padding: 20px 256px 20px min(250px, 39%);
box-shadow: 0px 6px 8px 1px rgba(0, 0, 0, 0.08);
margin-bottom: clamp(10px, 8vh, 206px);
box-sizing: border-box;
overflow: hidden;
}
.base-block {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.sign-in {
font-family: Manrope;
font-size: 34px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
margin-bottom: 32px;
}
.outer-form-block {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
font-family: Manrope;
font-size: 16px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0px;
height: clamp(9vh, 47vh, 50vh)
}
form .submit input {
width: 444px;
height: 44px;
padding: 12px 24px 12px 24px;
border-radius: 8px;
background-color: rgba(44, 121, 206, 1);
color: white;
border: none;
}
form .submit {
margin-top: 32px;
display: flex;
flex-direction: row;
justify-content: center;
}
form {
border-radius: 16px;
background-color: white;
padding-bottom: 32px;
}
.form-block.choose-method,
form .form-block {
width: 100%;
height: 260px;
top: 208px;
left: 706px;
padding: 32px;
box-sizing: border-box;
display: flex;
flex-direction: column;
row-gap: 20px;
}
form .inner-form-block {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.inner-form-block.choose-method {
border-radius: 16px;
background-color: white;
}
form .form-block .forgot-password {
display: flex;
flex-direction: row;
justify-content: flex-end;
column-gap: 20px;
}
form .form-block .forgot-password .link a {
color: rgba(44, 121, 206, 1);
text-decoration: none;
}
.form-block .new-password, .form-block .confirm-password,
.form-block .username, .form-block .password {
display: flex;
flex-direction: column;
}
.form-block .new-password input, .form-block .confirm-password input,
.form-block .username input, .form-block .password input {
width: 444px;
height: 55px;
padding: 8px 0px 8px 16px;
border-radius: 12px;
border: 2px;
background-color: rgba(245, 245, 245, 1);
transition: 0.9s ease-in;
box-sizing: border-box;
}
.form-block .new-password input:focus,
.form-block .confirm-password input:focus,
.form-block .password input:focus,
.form-block .username input:focus {
background-color: rgba(255, 255, 255, 1);
transition: 0.1s ease-in;
border: 2px solid rgba(44, 121, 206, 1);
outline: none;
}
.form-block .confirm-password .confirm-password-label label,
.form-block .new-password .new-password-label label {
left: 0px;
}
.form-block label {
position: relative;
top: -43px;
left: 20px;
padding: 0px 10px 0px 10px;
font-family: Manrope;
font-size: 16px;
font-weight: 400;
line-height: 24px;
transition: 0.5s ease-in;
color: rgba(60, 60, 67, 0.6);
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.form-block .new-password input:valid ~ .new-password-label label[for="new-password"],
.form-block .confirm-password input:valid ~ .confirm-password-label label[for="confirm-password"],
.form-block .new-password #new-password:focus ~ .new-password-label label[for="new-password"],
.form-block .confirm-password #confirm-password:focus ~ .confirm-password-label label[for="confirm-password"] {
left: 0px !important;
}
.form-block .new-password input:valid ~ .new-password-label label[for="new-password"],
.form-block .confirm-password input:valid ~ .confirm-password-label label[for="confirm-password"],
.form-block .new-password #new-password:focus ~ .new-password-label label[for="new-password"],
.form-block .confirm-password #confirm-password:focus ~ .confirm-password-label label[for="confirm-password"],
.form-block .password input:valid ~ label[for="password"],
.form-block .username input:valid ~ label[for="username"],
.form-block .username #username:focus ~ label[for="username"],
.form-block .password #password:focus ~ label[for="password"]{
position: relative;
top: -49px;
left: 20px;
transform: translateY(-18px);
background-color: white;
width: fit-content;
text-overflow: ellipsis;
}
.form-block .new-password input:valid,
.form-block .confirm-password input:valid,
.form-block .password input:valid {
background-color: rgba(255, 255, 255, 1);
transition: 0.1s ease-in;
border: 2px solid rgba(44, 121, 206, 1);
outline: none;
}
.form-block .new-password .new-password-label .fa-solid,
.form-block .confirm-password .confirm-password-label .fa-solid {
right: -89%;
top: -36px;
min-width: 24px;
}
.fa-solid {
right: -89%;
top: -52px;
font-size: 1.2rem;
color: #999;
cursor: pointer;
position: relative;
transform: translateY(-50%);
}
.form-block .new-password .new-password-label .fa-solid:active ~ .new-password-input,
.form-block .confirm-password .confirm-password-label .fa-solid:active ~ .confirm-password-input,
.fa-solid:active ~ .password-input {
type: text;
}
.form-block .email a, .form-block .google a {
width: 444px;
height: 55px;
padding: 8px 0px 8px 16px;
border-radius: 12px;
border: 2px;
background-color: rgba(245, 245, 245, 1);
transition: 0.9s ease-in;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
font-family: Manrope;
font-size: 20px;
font-weight: 400;
text-decoration: none;
color: rgba(0, 0, 0, 0.9);
}
.form-block .email button, .form-block .google button {
width: 444px;
height: 55px;
padding: 8px 0px 8px 16px;
border-radius: 12px;
border: 2px;
background-color: rgba(245, 245, 245, 1);
transition: 0.9s ease-in;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
font-family: Manrope;
font-size: 20px;
font-weight: 400;
}
.form-block .email button .picture, .form-block .google button .picture {
margin-right: 25%;
}
.form-block .email a .picture, .form-block .google a .picture {
margin-right: 25%;
}
.have-account {
display: flex;
flex-direction: row;
justify-content: space-around;
column-gap: 20px;
}
.have-account .text {
color: rgba(0, 0, 0, 0.5);
}
.have-account .link a {
color: rgba(44, 121, 206, 1);
text-decoration: none;
}
.agreement {
color: rgba(0, 0, 0, 0.5);
max-width: 444px;
text-align: center;
}
.agreement a{
color: rgba(0, 0, 0, 0.8);
}
.select {
font-family: Manrope;
font-size: 34px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
margin-bottom: 32px;
}
.password-error {
color: transparent;
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 16px;
}
.password-error.active {
color: red;
}
\ No newline at end of file
forms/signIn/images/arrow-left.svg 0 → 100644
View file @ 8feab482
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
\ No newline at end of file
forms/signIn/images/envelope.svg 0 → 100644
View file @ 8feab482
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
\ No newline at end of file
forms/signIn/js/script.js 0 → 100644
View file @ 8feab482
const passwordInput = document.querySelector(".password input");
const eyeIcon = document.querySelector(".password i");
eyeIcon.addEventListener("click", () => {
eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`;
passwordInput.type = passwordInput.type === "password" ? "text" : "password";
});
forms/signIn/js/updatePassword.js 0 → 100644
View file @ 8feab482
const newPasswordInput = document.querySelector(".new-password input");
const confirmPasswordInput = document.querySelector(".confirm-password input");
const eyeIconNewPassword = document.querySelector(".new-password .new-password-label i");
const eyeIconConfirmPassword = document.querySelector(".confirm-password .confirm-password-label i");
eyeIconNewPassword.addEventListener("click", () => {
eyeIconNewPassword.className = `fa-solid fa-eye${newPasswordInput.type === "password" ? "" : "-slash"}`;
newPasswordInput.type = newPasswordInput.type === "password" ? "text" : "password";
});
eyeIconConfirmPassword.addEventListener("click", () => {
console.log('confirmPasswordInput.type', confirmPasswordInput.type)
eyeIconConfirmPassword.className = `fa-solid fa-eye${confirmPasswordInput.type === "password" ? "" : "-slash"}`;
confirmPasswordInput.type = confirmPasswordInput.type === "password" ? "text" : "password";
});
let passwordValue = document.querySelector(".new-password").value;
let message = document.querySelector(".password-error");
function checkRepeat(repeatPassword) {
if (repeatPassword.value.length) {
if(String(repeatPassword.value) !== String(passwordValue)) {
console.log('message', message)
message.classList.add("active");
}
console.log('repeatPassword.value', repeatPassword.value)
console.log('passwordValue', repeatPassword.value)
console.log('===', repeatPassword.value === passwordValue)
if(String(repeatPassword.value) === String(passwordValue)) {
message.classList.remove("active");
}
} else {
message.classList.remove("active");
}
}
\ No newline at end of file
forms/signIn/loginPage.html 0 → 100644
View file @ 8feab482
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700&display=swap"/>
<link rel="stylesheet" href="../../public/styles.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>AYA Digital, LLC Telehealth</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/script.js" defer></script>
</head>
<body>
<div id="root" style="width:100%">
<div class='header'>
<div class="prevpage">
<a href="#">
<img src="images/arrow-left.svg" width="20px">
</a>
</div>
<div><img src='images/logo.png'></div>
</div>
<div class="base-block">
<div class="sign-in">Sign in</div>
<div class="outer-form-block">
<div class="prevpage-desktop">
<a href="#">
<img src="images/arrow-left.svg" width="20px">
</a>
</div>
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="inner-form-block">
<div class="form-block">
<!--#if !usernameHidden??-->
<div class="username">
<input tabindex="1" id="username" class="username-input" name="username" required value="" type="text" autocomplete="off"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
/>
<label for="username" class="${properties.kcLabelClass!}">Email or phone number</label>
<!--#if messagesPerField.existsError('username','password')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if-->
</div>
<!--/#if-->
<div class="password">
<input tabindex="2" id="password" class="password-input" name="password" required type="password" autocomplete="off"
/>
<label for="password" class="">Enter a temporary Password</label>
<i class="fa-solid fa-eye-slash" id="eye" aria-hidden="true"></i>
<!--#if usernameHidden?? && messagesPerField.existsError('username','password')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if-->
</div>
<div class="forgot-password">
<!--#if realm.resetPasswordAllowed-->
<span>Forgot password?</span>
<span class="link"><a tabindex="5" href="#">Restore</a></span>
<!--/#if-->
</div>
</div>
<div id="kc-form-buttons" class="submit">
<!--input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/-->
<input tabindex="4" class="" name="login" id="kc-login" type="submit" value="Login"/>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
forms/signIn/updatePassword.html 0 → 100644
View file @ 8feab482
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700&display=swap"/>
<link rel="stylesheet" href="../../public/styles.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>AYA Digital, LLC Telehealth</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/updatePassword.js" defer></script>
</head>
<body>
<div id="root" style="width:100%">
<div class='header'>
<div class="prevpage">
<a href="#">
<img src="images/arrow-left.svg" width="20px">
</a>
</div>
<div><img src='images/logo.png'></div>
</div>
<div class="base-block">
<div class="sign-in">Update password</div>
<div class="outer-form-block">
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="inner-form-block">
<div class="form-block">
<!--#if !usernameHidden??-->
<div class="new-password">
<input
tabindex="1"
id="new-password"
class="new-password-input"
name="new-password"
required
value=""
type="password"
autocomplete="off"
aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>"
/>
<div class="new-password-label">
<i class="fa-solid fa-eye-slash" id="eye" aria-hidden="true"></i>
<label for="new-password" class="${properties.kcLabelClass!}">New password</label>
</div>
<!--#if messagesPerField.existsError('username','password')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if-->
</div>
<!--/#if-->
<div class="confirm-password">
<input
tabindex="2"
id="confirm-password"
class="confirm-password"
name="confirm-password"
required
type="password"
autocomplete="off"
onkeyup={checkRepeat(this)}
/>
<div class="confirm-password-label">
<i class="fa-solid fa-eye-slash" id="eye" aria-hidden="true"></i>
<label for="confirm-password" class="">Enter a temporary Password</label>
</div>
<!--#if usernameHidden?? && messagesPerField.existsError('username','password')>
<span id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc}
</span>
</#if-->
</div>
<div class="password-error">Passwords don't match</div>
</div>
<div id="kc-form-buttons" class="submit">
<!--input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/-->
<input tabindex="4" class="" name="submit" id="kc-login" type="submit" value="Submit"/>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
forms/signUp/css/multi-select-tag.css 0 → 100644
View file @ 8feab482
.mult-select-tag{display:flex;width:100%;flex-direction:column;align-items:center;position:relative;--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-color:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);--border-color:rgb(218, 221, 224);font-family:Verdana,sans-serif}.mult-select-tag .wrapper{width:100%}.mult-select-tag .body{display:flex;border:1px solid var(--border-color);background:#fff;min-height:2.15rem;width:100%;min-width:14rem}.mult-select-tag .input-container{display:flex;flex-wrap:wrap;flex:1 1 auto;padding:.1rem}.mult-select-tag .input-body{display:flex;width:100%}.mult-select-tag .input{flex:1;background:0 0;border-radius:.25rem;padding:.45rem;margin:10px;color:#2d3748;outline:0;border:1px solid var(--border-color)}.mult-select-tag .btn-container{color:#e2ebf0;padding:.5rem;display:flex;border-left:1px solid var(--border-color)}.mult-select-tag button{cursor:pointer;width:100%;color:#718096;outline:0;height:100%;border:none;padding:0;background:0 0;background-image:none;-webkit-appearance:none;text-transform:none;margin:0}.mult-select-tag button:first-child{width:1rem;height:90%}.mult-select-tag .drawer{position:absolute;background:#fff;max-height:15rem;z-index:40;top:98%;width:100%;overflow-y:scroll;border:1px solid var(--border-color);border-radius:.25rem}.mult-select-tag ul{list-style-type:none;padding:.5rem;margin:0}.mult-select-tag ul li{padding:.5rem;border-radius:.25rem;cursor:pointer}.mult-select-tag ul li:hover{background:rgb(243 244 246)}.mult-select-tag .item-container{display:flex;justify-content:center;align-items:center;color:#2c7a7b;padding:.2rem .4rem;margin:.2rem;font-weight:500;border:1px solid #81e6d9;background:#e6fffa;border-radius:9999px}.mult-select-tag .item-label{max-width:100%;line-height:1;font-size:.75rem;font-weight:400;flex:0 1 auto;color:#2c7a7b}.mult-select-tag .item-close-container{display:flex;flex:1 1 auto;flex-direction:row-reverse}.mult-select-tag .item-close-svg{width:1rem;margin-left:.5rem;height:1rem;cursor:pointer;border-radius:9999px;display:block}.hidden{display:none}.mult-select-tag .shadow{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.mult-select-tag .rounded{border-radius:.375rem}
\ No newline at end of file
forms/signUp/css/styles-otp.css 0 → 100644
View file @ 8feab482
body {
background-color: rgba(245, 245, 245, 1);
margin: 0px;
width: 100%;
min-height: 100vh;
max-height: 100%;
}
@media screen and (max-width: 568px) {
body .header {
width: 100%;
}
body {
background-color: rgba(255, 255, 255, 1);
}
body .outer-form-block {
display: block;
}
body form .submit input {
width: 86%;
}
body form {
height: 100%;
}
body .header {
padding: 20px 10% 20px 10%;
box-shadow: none;
width: auto;
}
body .base-block .container .buttons-block button {
width: 150px;
}
body .container .userInput input {
width: 20px;
height: 40px;
}
}
body .header .prevpage {
display: none;
}
body .base-block .prevpage-desktop {
position: relative;
left: 25px;
top: -11%;
width: auto;
}
.header {
display: flex;
background-color: rgba(255, 255, 255, 1);
flex-direction: row;
justify-content: space-between;
padding: 20px 256px 20px min(250px, 39%);
box-shadow: 0px 6px 8px 1px rgba(0, 0, 0, 0.08);
margin-bottom: clamp(10px, 8vh, 206px);
box-sizing: border-box;
overflow: hidden;
}
.base-block {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
row-gap: 32px;
border-radius: 16px;
background-color: white;
padding: 32px;
}
.base-block .container .buttons-block button.active {
color: white;
background-color: rgba(44, 121, 206, 1);
border: 1px solid rgba(198, 198, 200, 1);
}
.base-block .container .buttons-block button.resend {
color: white;
background-color: rgba(44, 121, 206, 1);
border: 1px solid rgba(198, 198, 200, 1);
}
.base-block .container .buttons-block button {
width: 200px;
height: 40px;
padding: 9px 24px 12px 24px;
border-radius: 8px;
border: 1px solid;
font-family: Manrope;
font-size: 16px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0px;
text-align: center;
cursor: pointer;
color: rgba(44, 121, 206, 1);
background-color: white;
border: 1px solid rgba(44, 121, 206, 1);
}
.base-block .container .buttons-block {
display: flex;
flex-direction: row;
justify-content: space-around;
column-gap: 16px;
}
.base-block .container .title {
font-family: Manrope;
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
}
.container .userInput input {
width: 80px;
height: 80px;
padding: 8px 8px 8px 16px;
border-radius: 8px;
border: 1px solid rgba(198, 198, 200, 1);
font-family: Manrope;
font-size: 32px;
font-weight: 400;
line-height: 40px;
letter-spacing: 0px;
text-align: center;
}
.container .userInput {
display: flex;
flex-direction: row;
justify-content: space-between;
column-gap: 16px;
}
\ No newline at end of file
forms/signUp/css/styles.css 0 → 100644
View file @ 8feab482
body {
background-color: rgba(245, 245, 245, 1);
margin: 0px;
width: 100%;
min-height: 100vh;
max-height: 100%;
}
@media screen and (max-width: 568px) {
body .form-block .firstName input,
body .form-block .lastName input,
body .form-block .contact input,
body .form-block .insurance input,
body .form-block .password-repeat input,
body .form-block .password input {
width: auto;
}
body .header {
width: 100%;
}
body {
background-color: rgba(255, 255, 255, 1);
}
body .outer-form-block {
display: block;
}
body .sign-in {
text-align: left;
margin-left: 34px;
}
body .form-block label {
max-width: 60vw;
}
body form .submit input {
width: 86%;
}
body form {
height: 100%;
}
body .header {
padding: 20px 10% 20px 10%;
box-shadow: none;
width: auto;
}
body .header .prevpage {
flex-wrap: wrap;
display: flex !important;
align-content: center;
}
body .base-block .prevpage-desktop {
display: none;
}
body .select {
height: 200px;
}
}
body .header .prevpage {
display: none;
}
body .base-block .prevpage-desktop {
position: relative;
left: 25px;
top: -11%;
width: auto;
}
.header {
display: flex;
background-color: rgba(255, 255, 255, 1);
flex-direction: row;
justify-content: space-between;
padding: 20px 256px 20px min(250px, 39%);
box-shadow: 0px 6px 8px 1px rgba(0, 0, 0, 0.08);
margin-bottom: clamp(10px, 8vh, 206px);
box-sizing: border-box;
overflow: hidden;
}
.base-block {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.sign-in {
font-family: Manrope;
font-size: 34px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
margin-bottom: 32px;
}
.outer-form-block {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
font-family: Manrope;
font-size: 16px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0px;
height: clamp(10vh, 71vh, 61vh);
min-height: 100vh;
}
form .submit input {
width: 444px;
height: 44px;
padding: 12px 24px 12px 24px;
border-radius: 8px;
background-color: rgba(44, 121, 206, 1);
color: white;
border: none;
}
form .submit {
margin-top: 32px;
margin-bottom: 32px;
display: flex;
flex-direction: row;
justify-content: center;
}
form {
border-radius: 16px;
background-color: white;
padding-bottom: 32px;
}
form .form-block {
width: 100%;
height: auto;
top: 208px;
left: 706px;
padding: 32px;
box-sizing: border-box;
display: flex;
flex-direction: column;
row-gap: 0px;
}
form .inner-form-block p {
margin: 0;
}
form .inner-form-block {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
form .form-block .forgot-password {
display: flex;
flex-direction: row;
justify-content: flex-end;
column-gap: 20px;
}
form .form-block .forgot-password .link a {
color: rgba(44, 121, 206, 1);
text-decoration: none;
}
.form-block .firstName,
.form-block .lastName,
.form-block .contact,
.form-block .insurance,
.form-block .password-repeat,
.form-block .password {
display: flex;
flex-direction: column;
}
.mult-select-tag .input-container {
background-color: rgba(245, 245, 245, 1);
transition: 0.9s ease-in;
}
.form-block .firstName input,
.form-block .lastName input,
.form-block .contact input,
.form-block .insurance input,
.form-block .password-repeat input,
.form-block .password input {
width: 444px;
height: 55px;
padding: 8px 0px 8px 16px;
border-radius: 12px;
border: 2px;
background-color: rgba(245, 245, 245, 1);
transition: 0.9s ease-in;
box-sizing: border-box;
}
.form-block .firstName input:focus,
.form-block .lastName input:focus,
.form-block .contact input:focus,
.form-block .insurance input:focus,
.form-block .password-repeat input:focus,
.form-block .password input:focus {
background-color: rgba(255, 255, 255, 1);
transition: 0.1s ease-in;
border: 2px solid rgba(44, 121, 206, 1);
outline: none;
}
.form-block .insurance .mult-select-tag button {
z-index: 111;
}
.form-block label {
position: relative;
top: -43px;
left: 20px;
padding: 0px 10px 0px 10px;
font-family: Manrope;
font-size: 16px;
font-weight: 400;
line-height: 24px;
transition: 0.5s ease-in;
color: rgba(60, 60, 67, 0.6);
text-overflow: ellipsis;
max-width: 37vw;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.form-block .password-repeat-label, .form-block .password-label {
display: flex;
flex-direction: row;
}
.form-block .firstName input:valid ~ label[for="firstName"],
.form-block .lastName input:valid ~ label[for="lastName"],
.form-block .contact input:valid ~ label[for="contact"],
.form-block .insurance input:valid ~ label[for="insurance"],
.form-block .password input:valid ~ .password-label label[for="password"],
.form-block .password-repeat input:valid ~ .password-repeat-label label[for="password-repeat"],
.form-block .firstName input:focus ~ label[for="firstName"],
.form-block .lastName input:focus ~ label[for="lastName"],
.form-block .contact input:focus ~ label[for="contact"],
.form-block .insurance select:focus ~ label[for="insurance"],
.form-block .firstName input:focus ~ label[for="firstName"],
.form-block .password input:focus ~ .password-label label[for="password"],
.form-block .password-repeat input:focus ~ .password-repeat-label label[for="password-repeat"]{
color: transparent;
}
.mult-select-tag:has(.wrapper .body .input-container:not(:empty)) ~ label[for="insurance"] {
color: transparent;
z-index: -1;
}
.form-block .password input:valid {
background-color: rgba(255, 255, 255, 1);
transition: 0.1s ease-in;
border: 2px solid rgba(44, 121, 206, 1);
outline: none;
}
.form-block .password-repeat input:valid {
background-color: rgba(255, 255, 255, 1);
transition: 0.1s ease-in;
border: 2px solid rgba(44, 121, 206, 1);
outline: none;
}
.mult-select-tag .body .input-container{
border-radius: 12px 0px 0px 12px;
}
.mult-select-tag .body {
max-width: 444px;
border-radius: 12px;
height: 55px;
}
.mult-select-tag .drawer {
border: none;
}
.form-block .password-repeat-label .fa-solid,
.form-block .password-label .fa-solid {
right: -85%;
top: -26px;
font-size: 1.2rem;
color: #999;
cursor: pointer;
position: relative;
transform: translateY(-50%);
}
.form-block .password-label .fa-solid:active ~ .password-input,
.form-block .password-repeat .password-repeat-label .fa-solid:active ~ .password-repeat-input {
type: text;
}
.have-account {
display: flex;
flex-direction: row;
justify-content: space-around;
column-gap: 20px;
}
.have-account .text {
color: rgba(0, 0, 0, 0.5);
}
.have-account .link a {
color: rgba(44, 121, 206, 1);
text-decoration: none;
}
.agreement {
color: rgba(0, 0, 0, 0.5);
max-width: 444px;
text-align: center;
}
.agreement a{
color: rgba(0, 0, 0, 0.8);
}
.select {
font-family: Manrope;
font-size: 34px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
margin-bottom: 32px;
}
forms/signUp/images/arrow-left.svg 0 → 100644
View file @ 8feab482
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
\ No newline at end of file
forms/signUp/images/envelope.svg 0 → 100644
View file @ 8feab482
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
\ No newline at end of file
forms/signUp/js/multi-select-tag.js 0 → 100644
View file @ 8feab482
// Author: Habib Mhamadi
// Email: habibmhamadi@gmail.com
function MultiSelectTag (el, customs = {shadow: false, rounded:true}) {
var element = null
var options = null
var customSelectContainer = null
var wrapper = null
var btnContainer = null
var body = null
var inputContainer = null
var inputBody = null
var input = null
var button = null
var drawer = null
var ul = null
var domParser = new DOMParser()
init()
function init() {
element = document.getElementById(el)
createElements()
initOptions()
enableItemSelection()
setValues(false)
button.addEventListener('click', () => {
if(drawer.classList.contains('hidden')) {
initOptions()
enableItemSelection()
drawer.classList.remove('hidden')
input.focus()
}
})
input.addEventListener('keyup', (e) => {
initOptions(e.target.value)
enableItemSelection()
})
input.addEventListener('keydown', (e) => {
if(e.key === 'Backspace' && !e.target.value && inputContainer.childElementCount > 1) {
const child = body.children[inputContainer.childElementCount - 2].firstChild
const option = options.find((op) => op.value == child.dataset.value)
option.selected = false
removeTag(child.dataset.value)
setValues()
}
})
window.addEventListener('click', (e) => {
if (!customSelectContainer.contains(e.target)){
drawer.classList.add('hidden')
}
});
}
function createElements() {
// Create custom elements
options = getOptions();
element.classList.add('hidden')
// .multi-select-tag
customSelectContainer = document.createElement('div')
customSelectContainer.classList.add('mult-select-tag')
// .container
wrapper = document.createElement('div')
wrapper.classList.add('wrapper')
// body
body = document.createElement('div')
body.classList.add('body')
if(customs.shadow) {
body.classList.add('shadow')
}
if(customs.rounded) {
body.classList.add('rounded')
}
// .input-container
inputContainer = document.createElement('div')
inputContainer.classList.add('input-container')
// input
input = document.createElement('input')
input.classList.add('input')
input.placeholder = `${customs.placeholder || 'Search...'}`
inputBody = document.createElement('inputBody')
inputBody.classList.add('input-body')
inputBody.append(input)
body.append(inputContainer)
// .btn-container
btnContainer = document.createElement('div')
btnContainer.classList.add('btn-container')
// button
button = document.createElement('button')
button.type = 'button'
btnContainer.append(button)
const icon = domParser.parseFromString(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 21 6 15"></polyline></svg>`, 'image/svg+xml').documentElement
button.append(icon)
body.append(btnContainer)
wrapper.append(body)
drawer = document.createElement('div');
drawer.classList.add(...['drawer', 'hidden'])
if(customs.shadow) {
drawer.classList.add('shadow')
}
if(customs.rounded) {
drawer.classList.add('rounded')
}
drawer.append(inputBody)
ul = document.createElement('ul');
drawer.appendChild(ul)
customSelectContainer.appendChild(wrapper)
customSelectContainer.appendChild(drawer)
// Place TailwindTagSelection after the element
if (element.nextSibling) {
element.parentNode.insertBefore(customSelectContainer, element.nextSibling)
}
else {
element.parentNode.appendChild(customSelectContainer);
}
}
function initOptions(val = null) {
ul.innerHTML = ''
for (var option of options) {
if (option.selected) {
!isTagSelected(option.value) && createTag(option)
}
else {
const li = document.createElement('li')
li.innerHTML = option.label
li.dataset.value = option.value
// For search
if(val && option.label.toLowerCase().startsWith(val.toLowerCase())) {
ul.appendChild(li)
}
else if(!val) {
ul.appendChild(li)
}
}
}
}
function createTag(option) {
// Create and show selected item as tag
const itemDiv = document.createElement('div');
itemDiv.classList.add('item-container');
const itemLabel = document.createElement('div');
itemLabel.classList.add('item-label');
itemLabel.innerHTML = option.label
itemLabel.dataset.value = option.value
const itemClose = new DOMParser().parseFromString(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="item-close-svg">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>`, 'image/svg+xml').documentElement
itemClose.addEventListener('click', (e) => {
const unselectOption = options.find((op) => op.value == option.value)
unselectOption.selected = false
removeTag(option.value)
initOptions()
setValues()
})
itemDiv.appendChild(itemLabel)
itemDiv.appendChild(itemClose)
inputContainer.append(itemDiv)
}
function enableItemSelection() {
// Add click listener to the list items
for(var li of ul.children) {
li.addEventListener('click', (e) => {
options.find((o) => o.value == e.target.dataset.value).selected = true
input.value = null
initOptions()
setValues()
input.focus()
})
}
}
function isTagSelected(val) {
// If the item is already selected
for(var child of inputContainer.children) {
if(!child.classList.contains('input-body') && child.firstChild.dataset.value == val) {
return true
}
}
return false
}
function removeTag(val) {
// Remove selected item
for(var child of inputContainer.children) {
if(!child.classList.contains('input-body') && child.firstChild.dataset.value == val) {
inputContainer.removeChild(child)
}
}
}
function setValues(fireEvent=true) {
// Update element final values
selected_values = []
for(var i = 0; i < options.length; i++) {
element.options[i].selected = options[i].selected
if(options[i].selected) {
selected_values.push({label: options[i].label, value: options[i].value})
}
}
if (fireEvent && customs.hasOwnProperty('onChange')) {
customs.onChange(selected_values)
}
}
function getOptions() {
// Map element options
return [...element.options].map((op) => {
return {
value: op.value,
label: op.label,
selected: op.selected,
}
})
}
}
\ No newline at end of file
forms/signUp/js/script-otp.js 0 → 100644
View file @ 8feab482
let inputs = document.querySelectorAll("input");
let button = document.querySelector(".verify");
let result = [];
function clickEvent(first, next, prev){
console.log('inputs', inputs)
if(first.value.length){
if (next) {
document.getElementById(next).focus();
}
} else if (prev) {
document.getElementById(prev).focus();
}
inputs.forEach((input, index) => {
console.log(input.value);
if (input.value) {
result[index] = input.value;
} else {
delete result[index]
}
})
if (result.join('').length === 6) {
button.classList.add("active");
button.addEventListener('click', () => {
alert(result.join(''));
})
} else {
button.classList.remove("active");
}
}
forms/signUp/js/script.js 0 → 100644
View file @ 8feab482
const passwordInput = document.querySelector(".password input");
const eyeIcon = document.querySelector(".password .password-label i");
eyeIcon.addEventListener("click", () => {
eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`;
passwordInput.type = passwordInput.type === "password" ? "text" : "password";
});
const passwordRepeatInput = document.querySelector(".password-repeat input");
const eyeIconRepeat = document.querySelector(".password-repeat .password-repeat-label i");
eyeIconRepeat.addEventListener("click", () => {
eyeIconRepeat.className = `fa-solid fa-eye${passwordRepeatInput.type === "password" ? "" : "-slash"}`;
passwordRepeatInput.type = passwordRepeatInput.type === "password" ? "text" : "password";
});
new MultiSelectTag('insurance', {
onChange: function(values) {
console.log(values)
}
})
forms/signUp/otpForm.html 0 → 100644
View file @ 8feab482
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700&display=swap"/>
<link rel="stylesheet" href="../../public/styles.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/habibmhamadi/multi-select-tag/dist/css/multi-select-tag.css">
<title>AYA Digital, LLC Telehealth</title>
<link href="css/styles-otp.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/script-otp.js" defer></script>
</head>
<body>
<div class='header'>
<div class="prevpage">
<a href="#">
<img src="images/arrow-left.svg" width="20px">
</a>
</div>
<div><img src='images/logo.png'></div>
</div>
<div class="base-block">
<div class="container">
<div class="title">Enter your verify code</div>
<div class="userInput">
<input type="text" id='first' maxlength="1" onkeyup="clickEvent(this,'sec',null)">
<input type="text" id="sec" maxlength="1" onkeyup="clickEvent(this,'third','first')">
<input type="text" id="third" maxlength="1" onkeyup="clickEvent(this,'fourth', 'sec')">
<input type="text" id="fourth" maxlength="1" onkeyup="clickEvent(this,'fifth', 'third')">
<input type="text" id="fifth" maxlength="1" onkeyup="clickEvent(this,'sixth', 'fourth')">
<input type="text" id="sixth" maxlength="1" onkeyup="clickEvent(this, null, 'fifth')">
</div>
<div class="buttons-block">
<button class='resend'>Resend code</button>
<button class='verify'>Verify profile</button>
</div>
</div>
</div>
</body>
</html>
forms/signUp/signUpPage.html 0 → 100644
View file @ 8feab482
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700&display=swap"/>
<link rel="stylesheet" href="../../public/styles.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>AYA Digital, LLC Telehealth</title>
<link href="css/styles.css" rel="stylesheet">
<link href="css/multi-select-tag.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/multi-select-tag.js" defer></script>
<script src="js/script.js" defer></script>
</head>
<body>
<div class='header'>
<div class="prevpage">
<a href="#">
<img src="images/arrow-left.svg" width="20px">
</a>
</div>
<div><img src='images/logo.png'></div>
</div>
<div class="base-block">
<div class="sign-in">Sign up</div>
<div class="outer-form-block">
<div class="prevpage-desktop">
<a href="#">
<img src="images/arrow-left.svg" width="20px">
</a>
</div>
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="inner-form-block">
<div class="form-block">
<div class="firstName">
<p for="password" class="">First Name</p>
<input tabindex="1" id="firstName" class="firstName-input" name="firstName" required value="" type="text" autocomplete="off"
aria-invalid="<#if messagesPerField.existsError('firstName','lastName')>true</#if>"
/>
<label for="firstName" class="${properties.kcLabelClass!}">Enter your First Name</label>
</div>
<div class="lastName">
<p for="password" class="">Last Name</p>
<input tabindex="2" id="lastName" class="lastName-input" name="lastName" required type="lastName" autocomplete="off"
/>
<label for="lastName" class="">Enter your Last Name</label>
</div>
<div class="contact">
<p for="password" class="">Email or Phone</p>
<input tabindex="2" id="contact" class="contact-input" name="contact" required type="contact" autocomplete="off"
/>
<label for="contact" class="">Enter your email or phone number</label>
</div>
<div class="insurance">
<p for="insurance" class="">Insurance Company</p>
<select id="insurance" class="insurance-input" name="insurance" multiple>
<option value="1">Progressive</option>
<option value="2">MetLife</option>
<option value="3">American International Group</option>
<option value="4">Marsh & McLennan</option>
<option value="5">Gallagher</option>
</select>
<label for="insurance" class="">Choose insurance company</label>
</div>
<div class="password">
<p for="password" class="">Password</p>
<input tabindex="2" id="password" class="password-input" name="password" required type="password" autocomplete="off"
/>
<div class="password-label">
<i class="fa-solid fa-eye-slash" id="eye" aria-hidden="true"></i>
<label for="password" class="">Enter your password</label>
</div>
</div>
<div class="password-repeat">
<p for="password" class="">Duplicate password</p>
<input
tabindex="2"
id="password-repeat"
class="password-repeat-input"
name="password-repeat"
required
type="password-repeat"
autocomplete="off"
/>
<div class="password-repeat-label">
<i class="fa-solid fa-eye-slash" id="eye" aria-hidden="true"></i>
<label for="password-repeat" class="">Duplicate lastName</label>
</div>
</div>
<div class="have-account">
<span class="text">Already heave an account?</span>
<span class="link"><a tabindex="5" href="#">Sign in</a></span>
</div>
</div>
<div id="kc-form-buttons" class="submit">
<input tabindex="4" class="" name="login" id="kc-login" type="submit" value="Login"/>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
public/styles.css 0 → 100644
View file @ 8feab482
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./fonts/500/xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./fonts/500/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./fonts/500/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(./fonts/500/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./fonts/700/xn7gYHE41ni1AdIRggqxSuXd.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./fonts/700/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./fonts/700/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./fonts/700/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment