INIT
This commit is contained in:
338
src/authentication-signup-cover.html
Normal file
338
src/authentication-signup-cover.html
Normal file
@@ -0,0 +1,338 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="@@languageDirection.lang">
|
||||
<head>
|
||||
<!-- Required Meta Tags Always Come First -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<!-- Title -->
|
||||
<title>Cover Sign Up | Front - Admin & Dashboard Template</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
||||
|
||||
<!-- Font -->
|
||||
<link href="@@vars.themeFont" rel="stylesheet">
|
||||
|
||||
<!-- CSS Implementing Plugins -->
|
||||
<!-- bundlecss:vendor [@@autopath] -->
|
||||
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
|
||||
|
||||
<!-- CSS Front Template -->
|
||||
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
||||
@@if(layoutBuilder.extend.switcherSupport === false) {
|
||||
<link rel="stylesheet" href="@@autopath/assets/css/theme@@if(themeAppearance.layoutSkin === 'dark'){-dark}.css">
|
||||
}
|
||||
|
||||
@@if(layoutBuilder.extend.switcherSupport === true) {
|
||||
<link rel="preload" href="@@autopath/assets/css/theme.css" data-hs-appearance="default" as="style">
|
||||
<link rel="preload" href="@@autopath/assets/css/theme-dark.css" data-hs-appearance="dark" as="style">
|
||||
|
||||
<style data-hs-appearance-onload-styles>
|
||||
* {
|
||||
transition: unset !important;
|
||||
}
|
||||
|
||||
body {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</head>
|
||||
|
||||
<body class="d-flex align-items-center min-h-100">
|
||||
@@if(layoutBuilder.extend.switcherSupport === true) {
|
||||
<script src="@@autopath/assets/js/hs.theme-appearance.js"></script>
|
||||
}
|
||||
|
||||
<!-- ========== HEADER ========== -->
|
||||
<header class="position-absolute top-0 start-0 end-0 mt-3 mx-3">
|
||||
<div class="d-flex d-lg-none justify-content-between">
|
||||
<a href="@@autopath/index.html">
|
||||
<img class="w-100" src="@@autopath/assets/svg/logos/logo.svg" alt="Image Description" data-hs-theme-appearance="default" style="min-width: 7rem; max-width: 7rem;">
|
||||
<img class="w-100" src="@@autopath/assets/svg/logos-light/logo.svg" alt="Image Description" data-hs-theme-appearance="dark" style="min-width: 7rem; max-width: 7rem;">
|
||||
</a>
|
||||
|
||||
<!-- Select -->
|
||||
<div class="tom-select-custom tom-select-custom-end zi-2">
|
||||
<select class="js-select form-select form-select-sm form-select-borderless"
|
||||
data-hs-tom-select-options='{
|
||||
"searchInDropdown": false,
|
||||
"hideSearch": true,
|
||||
"dropdownWidth": "12rem",
|
||||
"placeholder": "Select language"
|
||||
}'>
|
||||
<option label="empty"></option>
|
||||
<option value="language1" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/><span>English (US)</span></span>'>English (US)</option>
|
||||
<option value="language2" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Image description" width="16"/><span>English (UK)</span></span>'>English (UK)</option>
|
||||
<option value="language3" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/><span>Deutsch</span></span>'>Deutsch</option>
|
||||
<option value="language4" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Image description" width="16"/><span>Dansk</span></span>'>Dansk</option>
|
||||
<option value="language5" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/><span>Español</span></span>'>Español</option>
|
||||
<option value="language6" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Image description" width="16"/><span>Nederlands</span></span>'>Nederlands</option>
|
||||
<option value="language7" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/it.svg" alt="Image description" width="16"/><span>Italiano</span></span>'>Italiano</option>
|
||||
<option value="language8" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cn.svg" alt="Image description" width="16"/><span>中文 (繁體)</span></span>'>中文 (繁體)</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- End Select -->
|
||||
</div>
|
||||
</header>
|
||||
<!-- ========== END HEADER ========== -->
|
||||
|
||||
<!-- ========== MAIN CONTENT ========== -->
|
||||
<main id="content" role="main" class="main pt-0">
|
||||
<!-- Content -->
|
||||
<div class="container-fluid px-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 d-none d-lg-flex justify-content-center align-items-center min-vh-lg-100 position-relative bg-light px-0">
|
||||
<!-- Logo & Language -->
|
||||
<div class="position-absolute top-0 start-0 end-0 mt-3 mx-3">
|
||||
<div class="d-none d-lg-flex justify-content-between">
|
||||
<a href="@@autopath/index.html">
|
||||
<img class="w-100" src="@@autopath/assets/svg/logos/logo.svg" alt="Image Description" data-hs-theme-appearance="default" style="min-width: 7rem; max-width: 7rem;">
|
||||
<img class="w-100" src="@@autopath/assets/svg/logos-light/logo.svg" alt="Image Description" data-hs-theme-appearance="dark" style="min-width: 7rem; max-width: 7rem;">
|
||||
</a>
|
||||
|
||||
<!-- Select -->
|
||||
<div class="tom-select-custom tom-select-custom-end tom-select-custom-bg-transparent">
|
||||
<select class="js-select form-select form-select-sm form-select-borderless"
|
||||
data-hs-tom-select-options='{
|
||||
"searchInDropdown": false,
|
||||
"hideSearch": true,
|
||||
"dropdownWidth": "12rem",
|
||||
"placeholder": "Select language"
|
||||
}'>
|
||||
<option label="empty"></option>
|
||||
<option value="language1" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/><span>English (US)</span></span>'>English (US)</option>
|
||||
<option value="language2" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Image description" width="16"/><span>English (UK)</span></span>'>English (UK)</option>
|
||||
<option value="language3" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/><span>Deutsch</span></span>'>Deutsch</option>
|
||||
<option value="language4" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Image description" width="16"/><span>Dansk</span></span>'>Dansk</option>
|
||||
<option value="language5" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/><span>Español</span></span>'>Español</option>
|
||||
<option value="language6" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Image description" width="16"/><span>Nederlands</span></span>'>Nederlands</option>
|
||||
<option value="language7" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/it.svg" alt="Image description" width="16"/><span>Italiano</span></span>'>Italiano</option>
|
||||
<option value="language8" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cn.svg" alt="Image description" width="16"/><span>中文 (繁體)</span></span>'>中文 (繁體)</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- End Select -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Logo & Language -->
|
||||
|
||||
<div style="max-width: 23rem;">
|
||||
<div class="text-center mb-5">
|
||||
<img class="img-fluid" src="@@autopath/assets/svg/illustrations/oc-chatting.svg" alt="Image Description" style="width: 12rem;" data-hs-theme-appearance="default">
|
||||
<img class="img-fluid" src="@@autopath/assets/svg/illustrations-light/oc-chatting.svg" alt="Image Description" style="width: 12rem;" data-hs-theme-appearance="dark">
|
||||
</div>
|
||||
|
||||
<div class="mb-5">
|
||||
<h2 class="display-5">Build digital products with:</h2>
|
||||
</div>
|
||||
|
||||
<!-- List Checked -->
|
||||
<ul class="list-checked list-checked-lg list-checked-primary list-py-2">
|
||||
<li class="list-checked-item">
|
||||
<span class="d-block fw-semi-bold mb-1">All-in-one tool</span>
|
||||
Build, run, and scale your apps - end to end
|
||||
</li>
|
||||
|
||||
<li class="list-checked-item">
|
||||
<span class="d-block fw-semi-bold mb-1">Easily add & manage your services</span>
|
||||
It brings together your tasks, projects, timelines, files and more
|
||||
</li>
|
||||
</ul>
|
||||
<!-- End List Checked -->
|
||||
|
||||
<div class="row justify-content-between mt-5 gx-3">
|
||||
<div class="col">
|
||||
<img class="img-fluid" src="@@autopath/assets/svg/brands/gitlab-gray.svg" alt="Logo">
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
|
||||
<div class="col">
|
||||
<img class="img-fluid" src="@@autopath/assets/svg/brands/fitbit-gray.svg" alt="Logo">
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
|
||||
<div class="col">
|
||||
<img class="img-fluid" src="@@autopath/assets/svg/brands/flow-xo-gray.svg" alt="Logo">
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
|
||||
<div class="col">
|
||||
<img class="img-fluid" src="@@autopath/assets/svg/brands/layar-gray.svg" alt="Logo">
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
</div>
|
||||
<!-- End Row -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
|
||||
<div class="col-lg-6 d-flex justify-content-center align-items-center min-vh-lg-100">
|
||||
<div class="w-100 content-space-t-4 content-space-t-lg-2 content-space-b-1" style="max-width: 25rem;">
|
||||
<!-- Form -->
|
||||
<form class="js-validate needs-validation" novalidate>
|
||||
<div class="text-center">
|
||||
<div class="mb-5">
|
||||
<h1 class="display-5">Create your account</h1>
|
||||
<p>Already have an account? <a class="link" href="@@autopath/authentication-login-cover.html">Sign in here</a></p>
|
||||
</div>
|
||||
|
||||
<div class="d-grid mb-4">
|
||||
<a class="btn btn-white btn-lg" href="#">
|
||||
<span class="d-flex justify-content-center align-items-center">
|
||||
<img class="avatar avatar-xss me-2" src="@@autopath/assets/svg/brands/google-icon.svg" alt="Image Description">
|
||||
Sign up with Google
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="divider-center text-muted mb-4">OR</span>
|
||||
</div>
|
||||
|
||||
<label class="form-label" for="fullNameSrEmail">Full name</label>
|
||||
|
||||
<!-- Form -->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<!-- Form -->
|
||||
<div class="mb-4">
|
||||
<input type="text" class="form-control form-control-lg" name="fullName" id="fullNameSrEmail" placeholder="Mark" aria-label="Mark" required>
|
||||
<span class="invalid-feedback">Please enter your first name.</span>
|
||||
</div>
|
||||
<!-- End Form -->
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<!-- Form -->
|
||||
<div class="mb-4">
|
||||
<input type="text" class="form-control form-control-lg" placeholder="Williams" aria-label="Williams" required>
|
||||
<span class="invalid-feedback">Please enter your last name.</span>
|
||||
</div>
|
||||
<!-- End Form -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Form -->
|
||||
|
||||
<!-- Form -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="signupSrEmail">Your email</label>
|
||||
<input type="email" class="form-control form-control-lg" name="email" id="signupSrEmail" placeholder="Markwilliams@site.com" aria-label="Markwilliams@site.com" required>
|
||||
<span class="invalid-feedback">Please enter a valid email address.</span>
|
||||
</div>
|
||||
<!-- End Form -->
|
||||
|
||||
<!-- Form -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="signupSrPassword">Password</label>
|
||||
|
||||
<div class="input-group input-group-merge" data-hs-validation-validate-class>
|
||||
<input type="password" class="js-toggle-password form-control form-control-lg" name="password" id="signupSrPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8"
|
||||
data-hs-toggle-password-options='{
|
||||
"target": [".js-toggle-password-target-1", ".js-toggle-password-target-2"],
|
||||
"defaultClass": "bi-eye-slash",
|
||||
"showClass": "bi-eye",
|
||||
"classChangeTarget": ".js-toggle-password-show-icon-1"
|
||||
}'>
|
||||
<a class="js-toggle-password-target-1 input-group-append input-group-text" href="javascript:;">
|
||||
<i class="js-toggle-password-show-icon-1 bi-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="invalid-feedback">Your password is invalid. Please try again.</span>
|
||||
</div>
|
||||
<!-- End Form -->
|
||||
|
||||
<!-- Form -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="signupSrConfirmPassword">Confirm password</label>
|
||||
|
||||
<div class="input-group input-group-merge" data-hs-validation-validate-class>
|
||||
<input type="password" class="js-toggle-password form-control form-control-lg" name="confirmPassword" id="signupSrConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required minlength="8"
|
||||
data-hs-toggle-password-options='{
|
||||
"target": [".js-toggle-password-target-1", ".js-toggle-password-target-2"],
|
||||
"defaultClass": "bi-eye-slash",
|
||||
"showClass": "bi-eye",
|
||||
"classChangeTarget": ".js-toggle-password-show-icon-2"
|
||||
}'>
|
||||
<a class="js-toggle-password-target-2 input-group-append input-group-text" href="javascript:;">
|
||||
<i class="js-toggle-password-show-icon-2 bi-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="invalid-feedback">Password does not match the confirm password.</span>
|
||||
</div>
|
||||
<!-- End Form -->
|
||||
|
||||
<!-- Form Check -->
|
||||
<div class="form-check mb-4">
|
||||
<input class="form-check-input" type="checkbox" value="" id="termsCheckbox" required>
|
||||
<label class="form-check-label" for="termsCheckbox">
|
||||
I accept the <a href="#">Terms and Conditions</a>
|
||||
</label>
|
||||
<span class="invalid-feedback">Please accept our Terms and Conditions.</span>
|
||||
</div>
|
||||
<!-- End Form Check -->
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary btn-lg">Create an account</button>
|
||||
|
||||
<button type="submit" class="btn btn-link">
|
||||
or Start your 30-day trial <i class="bu-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- End Form -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
</div>
|
||||
<!-- End Row -->
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</main>
|
||||
<!-- ========== END MAIN CONTENT ========== -->
|
||||
|
||||
<!-- JS Global Compulsory @@deleteLine:build -->
|
||||
<script src="@@autopath/node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="@@autopath/node_modules/jquery-migrate/dist/jquery-migrate.min.js"></script>
|
||||
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- JS Implementing Plugins -->
|
||||
<!-- bundlejs:vendor [@@autopath] -->
|
||||
<script src="@@autopath/assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
|
||||
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
|
||||
|
||||
<!-- JS Front -->
|
||||
<!-- bundlejs:theme [@@autopath] -->
|
||||
<script src="@@autopath/assets/js/hs.core.js"></script>
|
||||
<script src="@@autopath/assets/js/hs.bs-validation.js"></script>
|
||||
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
|
||||
|
||||
<!-- JS Plugins Init. -->
|
||||
<script>
|
||||
(function() {
|
||||
window.onload = function () {
|
||||
// INITIALIZATION OF BOOTSTRAP VALIDATION
|
||||
// =======================================================
|
||||
HSBsValidation.init('.js-validate', {
|
||||
onSubmit: data => {
|
||||
data.event.preventDefault()
|
||||
alert('Submited')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// INITIALIZATION OF TOGGLE PASSWORD
|
||||
// =======================================================
|
||||
new HSTogglePassword('.js-toggle-password')
|
||||
|
||||
|
||||
// INITIALIZATION OF SELECT
|
||||
// =======================================================
|
||||
HSCore.components.HSTomSelect.init('.js-select')
|
||||
}
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user