Magico login: Widok okna logowania magico-page-login.html

This commit is contained in:
2022-01-28 13:13:38 +01:00
parent 0e8fe4c556
commit 7e058176f4
6 changed files with 446 additions and 2 deletions

View File

@@ -503,6 +503,16 @@
</ul> </ul>
<!-- End List --> <!-- End List -->
<div class="dropdown-divider my-3"></div>
<ul class="nav nav-sm nav-tabs nav-vertical">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-building nav-icon"></i> Firmy i organizacje <i class="bi-box-arrow-up-right ms-2"></i>
</a>
</li>
</ul>
<div class="d-lg-none"> <div class="d-lg-none">
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>

View File

@@ -412,7 +412,7 @@
<div class="col-auto"> <div class="col-auto">
<div class="d-none d-lg-block"> <div class="d-none d-lg-block">
<a class="btn btn-soft-light btn-sm" href="#">Wyloguj się</a> <a class="btn btn-soft-light btn-sm" href="./magico-page-login.html">Wyloguj się</a>
</div> </div>
<!-- Responsive Toggle Button --> <!-- Responsive Toggle Button -->
@@ -503,6 +503,16 @@
</ul> </ul>
<!-- End List --> <!-- End List -->
<div class="dropdown-divider my-3"></div>
<ul class="nav nav-sm nav-tabs nav-vertical">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-building nav-icon"></i> Firmy i organizacje <i class="bi-box-arrow-up-right ms-2"></i>
</a>
</li>
</ul>
<div class="d-lg-none"> <div class="d-lg-none">
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>

View File

@@ -0,0 +1,207 @@
<!DOCTYPE html>
<html lang="en" dir="" class="h-100">
<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>Magico Login</title>
<!-- Favicon -->
<link rel="shortcut icon" href="./favicon.ico">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<!-- CSS Implementing Plugins -->
<!-- bundlecss:vendor [.] -->
<link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
<!-- CSS Front Template -->
<!-- bundlecss:theme [.] ?v=1.0 -->
<link rel="stylesheet" href="./assets/css/theme.css">
</head>
<body class="d-flex align-items-center min-h-100">
<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand navbar-light navbar-absolute-top">
<div class="container-fluid">
<nav class="navbar-nav-wrap">
<!-- White Logo -->
<a class="navbar-brand d-none d-lg-flex py-2" href="./index.html" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" width="122.935" height="36.098" viewBox="0 0 122.935 36.098">
<g id="Group_8" data-name="Group 8" transform="translate(-1379.674 -484.063)">
<path id="Path_22" data-name="Path 22" d="M1.674-12.275H3.757v2.083H1.674Zm26.363,2.083H25.954v-9.886a3.7,3.7,0,0,0-1.174-2.86,3.952,3.952,0,0,0-2.765-1.08,3.973,3.973,0,0,0-2.746,1.08,3.67,3.67,0,0,0-1.193,2.86v9.886H15.992v-9.886a3.7,3.7,0,0,0-1.174-2.86,3.952,3.952,0,0,0-2.765-1.08,3.973,3.973,0,0,0-2.746,1.08,3.67,3.67,0,0,0-1.193,2.86v9.886H6.03V-25.684L7.772-24.32a5.836,5.836,0,0,1,4.28-1.78,6.082,6.082,0,0,1,2.879.72,5.533,5.533,0,0,1,2.121,1.894A5.733,5.733,0,0,1,22.014-26.1a5.729,5.729,0,0,1,2.405.492,6.281,6.281,0,0,1,1.856,1.269,6.281,6.281,0,0,1,1.269,1.856,5.729,5.729,0,0,1,.492,2.405Zm15.8-2.083a7.941,7.941,0,0,1-5.909,2.538,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,37.923-26.1a7.941,7.941,0,0,1,5.909,2.538l2.273-2.121v15.492ZM37.923-24.017a5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337,5.894,5.894,0,0,0,1.761,4.337,5.894,5.894,0,0,0,4.337,1.761,5.88,5.88,0,0,0,4.318-1.78,5.88,5.88,0,0,0,1.78-4.318,5.88,5.88,0,0,0-1.78-4.318A5.88,5.88,0,0,0,37.923-24.017ZM50.8-4.4A5.912,5.912,0,0,0,55.84-1.934,6.149,6.149,0,0,0,60.253-3.7,5.949,5.949,0,0,0,62.09-8.184v-4.28a7.887,7.887,0,0,1-6.1,2.727,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,55.991-26.1,7.941,7.941,0,0,1,61.9-23.562l2.273-2.121v17.5a7.979,7.979,0,0,1-2.462,5.909A8.078,8.078,0,0,1,55.84.149a8.01,8.01,0,0,1-6.629-3.258Zm5.189-19.621a5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337,5.894,5.894,0,0,0,1.761,4.337,5.894,5.894,0,0,0,4.337,1.761A5.88,5.88,0,0,0,60.31-13.6a5.88,5.88,0,0,0,1.78-4.318,5.88,5.88,0,0,0-1.78-4.318A5.88,5.88,0,0,0,55.991-24.017Zm10.454-1.667h2.083v15.492H66.446Zm0-6.061h2.083v2.273H66.446Zm18.257,8.6-1.629,1.288a5.888,5.888,0,0,0-4.659-2.159,5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337,5.894,5.894,0,0,0,1.761,4.337,5.894,5.894,0,0,0,4.337,1.761,5.757,5.757,0,0,0,4.545-2.045l1.667,1.288a8.14,8.14,0,0,1-2.765,2.1,8.084,8.084,0,0,1-3.447.739,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,78.416-26.1a8.089,8.089,0,0,1,3.523.758A7.962,7.962,0,0,1,84.7-23.146ZM94.021-26.1a7.89,7.89,0,0,1,5.8,2.386,7.89,7.89,0,0,1,2.386,5.8,7.928,7.928,0,0,1-2.386,5.758,7.828,7.828,0,0,1-5.8,2.424,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,94.021-26.1Zm0,2.083a5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337,5.894,5.894,0,0,0,1.761,4.337,5.894,5.894,0,0,0,4.337,1.761A5.88,5.88,0,0,0,98.34-13.6a5.88,5.88,0,0,0,1.78-4.318,5.88,5.88,0,0,0-1.78-4.318A5.88,5.88,0,0,0,94.021-24.017Z" transform="translate(1400.406 520.012)" fill="#fff"/>
<path id="Path_21" data-name="Path 21" d="M1.674-27.672H3.757v15.492H1.674Zm0-6.061H3.757v2.273H1.674Zm11.97,5.644a7.887,7.887,0,0,1,6.1,2.727V-37.937h2.083v25.757l-2.273-2.083a7.941,7.941,0,0,1-5.909,2.538,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,13.643-28.088Zm0,2.083a5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337A5.894,5.894,0,0,0,9.306-15.57a5.894,5.894,0,0,0,4.337,1.761,5.88,5.88,0,0,0,4.318-1.78,5.88,5.88,0,0,0,1.78-4.318,5.88,5.88,0,0,0-1.78-4.318A5.88,5.88,0,0,0,13.643-26.005Z" transform="translate(1378 522)" fill="#fff"/>
</g>
</svg>
</a>
<!-- End White Logo -->
<!-- Default Logo -->
<a class="navbar-brand d-flex d-lg-none" href="./index.html" aria-label="Magico id">
<svg xmlns="http://www.w3.org/2000/svg" width="110.092" height="32.327" viewBox="0 0 110.092 32.327">
<g id="Group_5" data-name="Group 5" transform="translate(-1379.674 -484.063)">
<path id="Path_22" data-name="Path 22" d="M1.674-14.309H3.539v1.866H1.674Zm23.609,1.866H23.417V-21.3a3.313,3.313,0,0,0-1.052-2.561,3.539,3.539,0,0,0-2.476-.967,3.558,3.558,0,0,0-2.459.967A3.287,3.287,0,0,0,16.362-21.3v8.853H14.5V-21.3a3.313,3.313,0,0,0-1.052-2.561,3.539,3.539,0,0,0-2.476-.967,3.558,3.558,0,0,0-2.459.967A3.287,3.287,0,0,0,7.44-21.3v8.853H5.575V-26.317L7.135-25.1a5.226,5.226,0,0,1,3.833-1.594,5.447,5.447,0,0,1,2.578.645,4.955,4.955,0,0,1,1.9,1.7,5.134,5.134,0,0,1,4.444-2.341,5.131,5.131,0,0,1,2.154.441,5.625,5.625,0,0,1,1.662,1.136,5.625,5.625,0,0,1,1.136,1.662,5.131,5.131,0,0,1,.441,2.154Zm14.145-1.866a7.111,7.111,0,0,1-5.292,2.273,7.044,7.044,0,0,1-5.156-2.171,7.044,7.044,0,0,1-2.171-5.156,7.01,7.01,0,0,1,2.171-5.19,7.1,7.1,0,0,1,5.156-2.137,7.111,7.111,0,0,1,5.292,2.273l2.035-1.9v13.874ZM34.136-24.824a5.278,5.278,0,0,0-3.884,1.577,5.278,5.278,0,0,0-1.577,3.884,5.278,5.278,0,0,0,1.577,3.884A5.278,5.278,0,0,0,34.136-13.9,5.266,5.266,0,0,0,38-15.5,5.266,5.266,0,0,0,39.6-19.363,5.266,5.266,0,0,0,38-23.23,5.266,5.266,0,0,0,34.136-24.824ZM45.67-7.253a5.3,5.3,0,0,0,4.512,2.2,5.507,5.507,0,0,0,3.952-1.577,5.327,5.327,0,0,0,1.645-4.02v-3.833a7.063,7.063,0,0,1-5.461,2.442,7.044,7.044,0,0,1-5.156-2.171,7.044,7.044,0,0,1-2.171-5.156,7.01,7.01,0,0,1,2.171-5.19,7.1,7.1,0,0,1,5.156-2.137,7.111,7.111,0,0,1,5.292,2.273l2.035-1.9v15.672a7.145,7.145,0,0,1-2.2,5.292,7.234,7.234,0,0,1-5.258,2.171A7.173,7.173,0,0,1,44.245-6.1Zm4.647-17.571a5.278,5.278,0,0,0-3.884,1.577,5.278,5.278,0,0,0-1.577,3.884,5.278,5.278,0,0,0,1.577,3.884A5.278,5.278,0,0,0,50.317-13.9,5.266,5.266,0,0,0,54.184-15.5a5.266,5.266,0,0,0,1.594-3.867,5.266,5.266,0,0,0-1.594-3.867A5.266,5.266,0,0,0,50.317-24.824Zm9.362-1.493h1.866v13.874H59.679Zm0-5.427h1.866v2.035H59.679Zm16.35,7.7-1.459,1.153A5.273,5.273,0,0,0,70.4-24.824a5.278,5.278,0,0,0-3.884,1.577,5.278,5.278,0,0,0-1.577,3.884,5.278,5.278,0,0,0,1.577,3.884A5.278,5.278,0,0,0,70.4-13.9a5.156,5.156,0,0,0,4.071-1.832l1.493,1.153A7.29,7.29,0,0,1,73.485-12.7a7.24,7.24,0,0,1-3.087.661,7.044,7.044,0,0,1-5.156-2.171,7.044,7.044,0,0,1-2.171-5.156,7.011,7.011,0,0,1,2.171-5.19A7.1,7.1,0,0,1,70.4-26.69a7.244,7.244,0,0,1,3.155.678A7.13,7.13,0,0,1,76.029-24.044Zm8.345-2.646a7.066,7.066,0,0,1,5.19,2.137,7.066,7.066,0,0,1,2.137,5.19,7.1,7.1,0,0,1-2.137,5.156,7.011,7.011,0,0,1-5.19,2.171,7.044,7.044,0,0,1-5.156-2.171,7.044,7.044,0,0,1-2.171-5.156,7.01,7.01,0,0,1,2.171-5.19A7.1,7.1,0,0,1,84.374-26.69Zm0,1.866a5.278,5.278,0,0,0-3.884,1.577,5.278,5.278,0,0,0-1.577,3.884,5.278,5.278,0,0,0,1.577,3.884A5.278,5.278,0,0,0,84.374-13.9,5.266,5.266,0,0,0,88.241-15.5a5.266,5.266,0,0,0,1.594-3.867,5.266,5.266,0,0,0-1.594-3.867A5.266,5.266,0,0,0,84.374-24.824Z" transform="translate(1398.065 519.573)" fill="#615d5c"/>
<path id="Path_21" data-name="Path 21" d="M1.674-28.744H3.539V-14.87H1.674Zm0-5.427H3.539v2.035H1.674Zm10.719,5.054a7.063,7.063,0,0,1,5.461,2.442V-37.937H19.72V-14.87l-2.035-1.866a7.111,7.111,0,0,1-5.292,2.273,7.044,7.044,0,0,1-5.156-2.171A7.044,7.044,0,0,1,5.066-21.79a7.01,7.01,0,0,1,2.171-5.19A7.1,7.1,0,0,1,12.393-29.117Zm0,1.866a5.278,5.278,0,0,0-3.884,1.577A5.278,5.278,0,0,0,6.932-21.79a5.278,5.278,0,0,0,1.577,3.884,5.278,5.278,0,0,0,3.884,1.577,5.266,5.266,0,0,0,3.867-1.594,5.266,5.266,0,0,0,1.594-3.867,5.266,5.266,0,0,0-1.594-3.867A5.266,5.266,0,0,0,12.393-27.252Z" transform="translate(1378 522)" fill="#cb0071"/>
</g>
</svg>
</a>
<!-- End Default Logo -->
<div class="ms-auto">
<a class="link link-sm link-secondary" href="https://www.magico.pl">
<i class="bi-chevron-left small ms-1"></i> magico.pl
</a>
</div>
</nav>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main" class="flex-grow-1">
<!-- Form -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-xl-4 d-none d-lg-flex justify-content-center align-items-center min-vh-lg-100 position-relative bg-dark" style="background-image: url(./assets/svg/components/wave-pattern-light.svg);">
<div class="flex-grow-1 p-5">
<!-- Blockquote -->
<figure class="text-center">
<blockquote class="blockquote blockquote-light">Jedno konto id.magico do zarządzania wszystkimi aplikacjami.</blockquote>
</figure>
<!-- End Blockquote -->
</div>
</div>
<!-- End Col -->
<div class="col-lg-7 col-xl-8 d-flex justify-content-center align-items-center min-vh-lg-100">
<div class="flex-grow-1 mx-auto" style="max-width: 28rem;">
<!-- Heading -->
<div class="text-center mb-5 mb-md-7">
<h1 class="h2">Logowanie id.magico</h1>
</div>
<!-- End Heading -->
<!-- Form -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="signupModalFormLoginEmail">Adres e-mail</label>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormLoginEmail" placeholder="" aria-label="email@site.com" required>
<span class="invalid-feedback">Wprowadź poprawny adres e-mail</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupModalFormLoginPassword">Hasło</label>
<a class="form-label-link" href="./page-reset-password.html">Nie pamiętam hasła</a>
</div>
<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="signupModalFormLoginPassword" placeholder="" aria-label="8+ characters required" required minlength="8"
data-hs-toggle-password-options='{
"target": "#changePassTarget",
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": "#changePassIcon"
}'>
<a id="changePassTarget" class="input-group-append input-group-text" href="javascript:;">
<i id="changePassIcon" class="bi-eye"></i>
</a>
</div>
<span class="invalid-feedback">Wprowadź poprawne hasło.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary btn-lg">Zaloguj się!</button>
</div>
<div class="text-center">
<p>Nie masz konta id.magico? <a class="link" href="./page-signup.html">Załóż go!</a></p>
</div>
<div class="text-center mt-4">
<div class="btn-group">
<button type="button" class="btn btn-soft-dark btn-xs dropdown-toggle" id="footerSelectLanguage" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
<span class="d-flex align-items-center">
<img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/>
<span>English (US)</span>
</span>
</button>
<div class="dropdown-menu" aria-labelledby="footerSelectLanguage">
<a class="dropdown-item d-flex align-items-center active" href="#">
<img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Image description" width="16"/>
<span>Polski (PL)</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/>
<span>Deutsch</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/>
<span>Español</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cn.svg" alt="Image description" width="16"/>
<span>中文 (繁體)</span>
</a>
</div>
</div>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Form -->
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- JS Global Compulsory hs-builder:build-delete -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [.] -->
<script src="./assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
<!-- JS Front -->
<!-- bundlejs:theme [.] -->
<script src="./assets/js/hs.core.js"></script>
<script src="./assets/js/hs.bs-validation.js"></script>
<!-- JS Plugins Init. -->
<script>
(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')
})()
</script>
</body>
</html>

View File

@@ -61,7 +61,7 @@
<div class="col-auto"> <div class="col-auto">
<div class="d-none d-lg-block"> <div class="d-none d-lg-block">
<a class="btn btn-soft-light btn-sm" href="#">Wyloguj się</a> <a class="btn btn-soft-light btn-sm" href="@@autopath/magico-page-login.html">Wyloguj się</a>
</div> </div>
<!-- Responsive Toggle Button --> <!-- Responsive Toggle Button -->

207
src/magico-page-login.html Normal file
View File

@@ -0,0 +1,207 @@
<!DOCTYPE html>
<html lang="@@languageDirection.lang" dir="@@if(languageDirection.isRTL){rtl}" class="h-100">
<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>Magico Login</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">
<!-- CSS Front Template -->
<!-- bundlecss:theme [@@autopath] @@vars.version -->
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
</head>
<body class="d-flex align-items-center min-h-100">
<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand navbar-light navbar-absolute-top">
<div class="container-fluid">
<nav class="navbar-nav-wrap">
<!-- White Logo -->
<a class="navbar-brand d-none d-lg-flex py-2" href="@@autopath/index.html" aria-label="Front">
<svg xmlns="http://www.w3.org/2000/svg" width="122.935" height="36.098" viewBox="0 0 122.935 36.098">
<g id="Group_8" data-name="Group 8" transform="translate(-1379.674 -484.063)">
<path id="Path_22" data-name="Path 22" d="M1.674-12.275H3.757v2.083H1.674Zm26.363,2.083H25.954v-9.886a3.7,3.7,0,0,0-1.174-2.86,3.952,3.952,0,0,0-2.765-1.08,3.973,3.973,0,0,0-2.746,1.08,3.67,3.67,0,0,0-1.193,2.86v9.886H15.992v-9.886a3.7,3.7,0,0,0-1.174-2.86,3.952,3.952,0,0,0-2.765-1.08,3.973,3.973,0,0,0-2.746,1.08,3.67,3.67,0,0,0-1.193,2.86v9.886H6.03V-25.684L7.772-24.32a5.836,5.836,0,0,1,4.28-1.78,6.082,6.082,0,0,1,2.879.72,5.533,5.533,0,0,1,2.121,1.894A5.733,5.733,0,0,1,22.014-26.1a5.729,5.729,0,0,1,2.405.492,6.281,6.281,0,0,1,1.856,1.269,6.281,6.281,0,0,1,1.269,1.856,5.729,5.729,0,0,1,.492,2.405Zm15.8-2.083a7.941,7.941,0,0,1-5.909,2.538,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,37.923-26.1a7.941,7.941,0,0,1,5.909,2.538l2.273-2.121v15.492ZM37.923-24.017a5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337,5.894,5.894,0,0,0,1.761,4.337,5.894,5.894,0,0,0,4.337,1.761,5.88,5.88,0,0,0,4.318-1.78,5.88,5.88,0,0,0,1.78-4.318,5.88,5.88,0,0,0-1.78-4.318A5.88,5.88,0,0,0,37.923-24.017ZM50.8-4.4A5.912,5.912,0,0,0,55.84-1.934,6.149,6.149,0,0,0,60.253-3.7,5.949,5.949,0,0,0,62.09-8.184v-4.28a7.887,7.887,0,0,1-6.1,2.727,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,55.991-26.1,7.941,7.941,0,0,1,61.9-23.562l2.273-2.121v17.5a7.979,7.979,0,0,1-2.462,5.909A8.078,8.078,0,0,1,55.84.149a8.01,8.01,0,0,1-6.629-3.258Zm5.189-19.621a5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337,5.894,5.894,0,0,0,1.761,4.337,5.894,5.894,0,0,0,4.337,1.761A5.88,5.88,0,0,0,60.31-13.6a5.88,5.88,0,0,0,1.78-4.318,5.88,5.88,0,0,0-1.78-4.318A5.88,5.88,0,0,0,55.991-24.017Zm10.454-1.667h2.083v15.492H66.446Zm0-6.061h2.083v2.273H66.446Zm18.257,8.6-1.629,1.288a5.888,5.888,0,0,0-4.659-2.159,5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337,5.894,5.894,0,0,0,1.761,4.337,5.894,5.894,0,0,0,4.337,1.761,5.757,5.757,0,0,0,4.545-2.045l1.667,1.288a8.14,8.14,0,0,1-2.765,2.1,8.084,8.084,0,0,1-3.447.739,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,78.416-26.1a8.089,8.089,0,0,1,3.523.758A7.962,7.962,0,0,1,84.7-23.146ZM94.021-26.1a7.89,7.89,0,0,1,5.8,2.386,7.89,7.89,0,0,1,2.386,5.8,7.928,7.928,0,0,1-2.386,5.758,7.828,7.828,0,0,1-5.8,2.424,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,94.021-26.1Zm0,2.083a5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337,5.894,5.894,0,0,0,1.761,4.337,5.894,5.894,0,0,0,4.337,1.761A5.88,5.88,0,0,0,98.34-13.6a5.88,5.88,0,0,0,1.78-4.318,5.88,5.88,0,0,0-1.78-4.318A5.88,5.88,0,0,0,94.021-24.017Z" transform="translate(1400.406 520.012)" fill="#fff"/>
<path id="Path_21" data-name="Path 21" d="M1.674-27.672H3.757v15.492H1.674Zm0-6.061H3.757v2.273H1.674Zm11.97,5.644a7.887,7.887,0,0,1,6.1,2.727V-37.937h2.083v25.757l-2.273-2.083a7.941,7.941,0,0,1-5.909,2.538,7.866,7.866,0,0,1-5.758-2.424,7.866,7.866,0,0,1-2.424-5.758,7.828,7.828,0,0,1,2.424-5.8A7.928,7.928,0,0,1,13.643-28.088Zm0,2.083a5.894,5.894,0,0,0-4.337,1.761,5.894,5.894,0,0,0-1.761,4.337A5.894,5.894,0,0,0,9.306-15.57a5.894,5.894,0,0,0,4.337,1.761,5.88,5.88,0,0,0,4.318-1.78,5.88,5.88,0,0,0,1.78-4.318,5.88,5.88,0,0,0-1.78-4.318A5.88,5.88,0,0,0,13.643-26.005Z" transform="translate(1378 522)" fill="#fff"/>
</g>
</svg>
</a>
<!-- End White Logo -->
<!-- Default Logo -->
<a class="navbar-brand d-flex d-lg-none" href="@@autopath/index.html" aria-label="Magico id">
<svg xmlns="http://www.w3.org/2000/svg" width="110.092" height="32.327" viewBox="0 0 110.092 32.327">
<g id="Group_5" data-name="Group 5" transform="translate(-1379.674 -484.063)">
<path id="Path_22" data-name="Path 22" d="M1.674-14.309H3.539v1.866H1.674Zm23.609,1.866H23.417V-21.3a3.313,3.313,0,0,0-1.052-2.561,3.539,3.539,0,0,0-2.476-.967,3.558,3.558,0,0,0-2.459.967A3.287,3.287,0,0,0,16.362-21.3v8.853H14.5V-21.3a3.313,3.313,0,0,0-1.052-2.561,3.539,3.539,0,0,0-2.476-.967,3.558,3.558,0,0,0-2.459.967A3.287,3.287,0,0,0,7.44-21.3v8.853H5.575V-26.317L7.135-25.1a5.226,5.226,0,0,1,3.833-1.594,5.447,5.447,0,0,1,2.578.645,4.955,4.955,0,0,1,1.9,1.7,5.134,5.134,0,0,1,4.444-2.341,5.131,5.131,0,0,1,2.154.441,5.625,5.625,0,0,1,1.662,1.136,5.625,5.625,0,0,1,1.136,1.662,5.131,5.131,0,0,1,.441,2.154Zm14.145-1.866a7.111,7.111,0,0,1-5.292,2.273,7.044,7.044,0,0,1-5.156-2.171,7.044,7.044,0,0,1-2.171-5.156,7.01,7.01,0,0,1,2.171-5.19,7.1,7.1,0,0,1,5.156-2.137,7.111,7.111,0,0,1,5.292,2.273l2.035-1.9v13.874ZM34.136-24.824a5.278,5.278,0,0,0-3.884,1.577,5.278,5.278,0,0,0-1.577,3.884,5.278,5.278,0,0,0,1.577,3.884A5.278,5.278,0,0,0,34.136-13.9,5.266,5.266,0,0,0,38-15.5,5.266,5.266,0,0,0,39.6-19.363,5.266,5.266,0,0,0,38-23.23,5.266,5.266,0,0,0,34.136-24.824ZM45.67-7.253a5.3,5.3,0,0,0,4.512,2.2,5.507,5.507,0,0,0,3.952-1.577,5.327,5.327,0,0,0,1.645-4.02v-3.833a7.063,7.063,0,0,1-5.461,2.442,7.044,7.044,0,0,1-5.156-2.171,7.044,7.044,0,0,1-2.171-5.156,7.01,7.01,0,0,1,2.171-5.19,7.1,7.1,0,0,1,5.156-2.137,7.111,7.111,0,0,1,5.292,2.273l2.035-1.9v15.672a7.145,7.145,0,0,1-2.2,5.292,7.234,7.234,0,0,1-5.258,2.171A7.173,7.173,0,0,1,44.245-6.1Zm4.647-17.571a5.278,5.278,0,0,0-3.884,1.577,5.278,5.278,0,0,0-1.577,3.884,5.278,5.278,0,0,0,1.577,3.884A5.278,5.278,0,0,0,50.317-13.9,5.266,5.266,0,0,0,54.184-15.5a5.266,5.266,0,0,0,1.594-3.867,5.266,5.266,0,0,0-1.594-3.867A5.266,5.266,0,0,0,50.317-24.824Zm9.362-1.493h1.866v13.874H59.679Zm0-5.427h1.866v2.035H59.679Zm16.35,7.7-1.459,1.153A5.273,5.273,0,0,0,70.4-24.824a5.278,5.278,0,0,0-3.884,1.577,5.278,5.278,0,0,0-1.577,3.884,5.278,5.278,0,0,0,1.577,3.884A5.278,5.278,0,0,0,70.4-13.9a5.156,5.156,0,0,0,4.071-1.832l1.493,1.153A7.29,7.29,0,0,1,73.485-12.7a7.24,7.24,0,0,1-3.087.661,7.044,7.044,0,0,1-5.156-2.171,7.044,7.044,0,0,1-2.171-5.156,7.011,7.011,0,0,1,2.171-5.19A7.1,7.1,0,0,1,70.4-26.69a7.244,7.244,0,0,1,3.155.678A7.13,7.13,0,0,1,76.029-24.044Zm8.345-2.646a7.066,7.066,0,0,1,5.19,2.137,7.066,7.066,0,0,1,2.137,5.19,7.1,7.1,0,0,1-2.137,5.156,7.011,7.011,0,0,1-5.19,2.171,7.044,7.044,0,0,1-5.156-2.171,7.044,7.044,0,0,1-2.171-5.156,7.01,7.01,0,0,1,2.171-5.19A7.1,7.1,0,0,1,84.374-26.69Zm0,1.866a5.278,5.278,0,0,0-3.884,1.577,5.278,5.278,0,0,0-1.577,3.884,5.278,5.278,0,0,0,1.577,3.884A5.278,5.278,0,0,0,84.374-13.9,5.266,5.266,0,0,0,88.241-15.5a5.266,5.266,0,0,0,1.594-3.867,5.266,5.266,0,0,0-1.594-3.867A5.266,5.266,0,0,0,84.374-24.824Z" transform="translate(1398.065 519.573)" fill="#615d5c"/>
<path id="Path_21" data-name="Path 21" d="M1.674-28.744H3.539V-14.87H1.674Zm0-5.427H3.539v2.035H1.674Zm10.719,5.054a7.063,7.063,0,0,1,5.461,2.442V-37.937H19.72V-14.87l-2.035-1.866a7.111,7.111,0,0,1-5.292,2.273,7.044,7.044,0,0,1-5.156-2.171A7.044,7.044,0,0,1,5.066-21.79a7.01,7.01,0,0,1,2.171-5.19A7.1,7.1,0,0,1,12.393-29.117Zm0,1.866a5.278,5.278,0,0,0-3.884,1.577A5.278,5.278,0,0,0,6.932-21.79a5.278,5.278,0,0,0,1.577,3.884,5.278,5.278,0,0,0,3.884,1.577,5.266,5.266,0,0,0,3.867-1.594,5.266,5.266,0,0,0,1.594-3.867,5.266,5.266,0,0,0-1.594-3.867A5.266,5.266,0,0,0,12.393-27.252Z" transform="translate(1378 522)" fill="#cb0071"/>
</g>
</svg>
</a>
<!-- End Default Logo -->
<div class="ms-auto">
<a class="link link-sm link-secondary" href="https://www.magico.pl">
<i class="bi-chevron-left small ms-1"></i> magico.pl
</a>
</div>
</nav>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main" class="flex-grow-1">
<!-- Form -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-xl-4 d-none d-lg-flex justify-content-center align-items-center min-vh-lg-100 position-relative bg-dark" style="background-image: url(@@autopath/assets/svg/components/wave-pattern-light.svg);">
<div class="flex-grow-1 p-5">
<!-- Blockquote -->
<figure class="text-center">
<blockquote class="blockquote blockquote-light">Jedno konto id.magico do zarządzania wszystkimi aplikacjami.</blockquote>
</figure>
<!-- End Blockquote -->
</div>
</div>
<!-- End Col -->
<div class="col-lg-7 col-xl-8 d-flex justify-content-center align-items-center min-vh-lg-100">
<div class="flex-grow-1 mx-auto" style="max-width: 28rem;">
<!-- Heading -->
<div class="text-center mb-5 mb-md-7">
<h1 class="h2">Logowanie id.magico</h1>
</div>
<!-- End Heading -->
<!-- Form -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="signupModalFormLoginEmail">Adres e-mail</label>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormLoginEmail" placeholder="" aria-label="email@site.com" required>
<span class="invalid-feedback">Wprowadź poprawny adres e-mail</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupModalFormLoginPassword">Hasło</label>
<a class="form-label-link" href="@@autopath/page-reset-password.html">Nie pamiętam hasła</a>
</div>
<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="signupModalFormLoginPassword" placeholder="" aria-label="8+ characters required" required minlength="8"
data-hs-toggle-password-options='{
"target": "#changePassTarget",
"defaultClass": "bi-eye-slash",
"showClass": "bi-eye",
"classChangeTarget": "#changePassIcon"
}'>
<a id="changePassTarget" class="input-group-append input-group-text" href="javascript:;">
<i id="changePassIcon" class="bi-eye"></i>
</a>
</div>
<span class="invalid-feedback">Wprowadź poprawne hasło.</span>
</div>
<!-- End Form -->
<div class="d-grid mb-3">
<button type="submit" class="btn btn-primary btn-lg">Zaloguj się!</button>
</div>
<div class="text-center">
<p>Nie masz konta id.magico? <a class="link" href="@@autopath/page-signup.html">Załóż go!</a></p>
</div>
<div class="text-center mt-4">
<div class="btn-group">
<button type="button" class="btn btn-soft-dark btn-xs dropdown-toggle" id="footerSelectLanguage" data-bs-toggle="dropdown" aria-expanded="false" data-bs-dropdown-animation>
<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>
</button>
<div class="dropdown-menu" aria-labelledby="footerSelectLanguage">
<a class="dropdown-item d-flex align-items-center active" href="#">
<img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Image description" width="16"/>
<span>Polski (PL)</span>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<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>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<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>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<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>
</a>
</div>
</div>
</div>
</form>
<!-- End Form -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Form -->
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- JS Global Compulsory @@deleteLine:build -->
<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>
<!-- JS Front -->
<!-- bundlejs:theme [@@autopath] -->
<script src="@@autopath/assets/js/hs.core.js"></script>
<script src="@@autopath/assets/js/hs.bs-validation.js"></script>
<!-- JS Plugins Init. -->
<script>
(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')
})()
</script>
</body>
</html>

View File

@@ -45,6 +45,16 @@
</ul> </ul>
<!-- End List --> <!-- End List -->
<div class="dropdown-divider my-3"></div>
<ul class="nav nav-sm nav-tabs nav-vertical">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-building nav-icon"></i> Firmy i organizacje <i class="bi-box-arrow-up-right ms-2"></i>
</a>
</li>
</ul>
<div class="d-lg-none"> <div class="d-lg-none">
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>