THEME: Zbudowanie widoków acoount home i personal info
This commit is contained in:
319
src/magico-account-home.html
Normal file
319
src/magico-account-home.html
Normal file
@@ -0,0 +1,319 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="@@languageDirection.lang" dir="@@if(languageDirection.isRTL){rtl}">
|
||||
<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 ID</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/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
|
||||
<link rel="stylesheet" href="@@autopath/node_modules/quill/dist/quill.snow.css">
|
||||
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
|
||||
|
||||
<!-- CSS Front Template -->
|
||||
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
||||
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- ========== HEADER ========== -->
|
||||
@@include("@@autopath/magico-partials/magico-topbar.html", {
|
||||
"topbarcategory": "demos",
|
||||
"topbarlink": "main",
|
||||
"category": "account",
|
||||
"subcategory": "",
|
||||
"link": "account-overview.html"
|
||||
})
|
||||
<!-- ========== END HEADER ========== -->
|
||||
|
||||
<!-- ========== MAIN CONTENT ========== -->
|
||||
<main id="content" role="main" class="bg-light">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="navbar-dark bg-dark" style="background-image: url(@@autopath/assets/svg/components/wave-pattern-light.svg);">
|
||||
<div class="container content-space-1 content-space-b-lg-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="d-none d-lg-block">
|
||||
<h1 class="h2 text-white">Cześć, Bartłomiej Banaczyk</h1>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-light mb-0">
|
||||
<li class="breadcrumb-item">id.magico</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Strona główna</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<!-- End Breadcrumb -->
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
|
||||
<div class="col-auto">
|
||||
<div class="d-none d-lg-block">
|
||||
<a class="btn btn-soft-light btn-sm" href="#">Wyloguj się</a>
|
||||
</div>
|
||||
|
||||
<!-- Responsive Toggle Button -->
|
||||
<button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarNav" aria-controls="sidebarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-default">
|
||||
<i class="bi-list"></i>
|
||||
</span>
|
||||
<span class="navbar-toggler-toggled">
|
||||
<i class="bi-x"></i>
|
||||
</span>
|
||||
</button>
|
||||
<!-- End Responsive Toggle Button -->
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
</div>
|
||||
<!-- End Row -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Breadcrumb -->
|
||||
|
||||
<!-- Content -->
|
||||
<div class="container content-space-1 content-space-t-lg-0 content-space-b-lg-2 mt-lg-n10">
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<!-- Navbar -->
|
||||
<div class="navbar-expand-lg navbar-light">
|
||||
<div id="sidebarNav" class="collapse navbar-collapse navbar-vertical">
|
||||
<!-- Card -->
|
||||
<div class="card flex-grow-1 mb-5">
|
||||
<div class="card-body">
|
||||
<!-- Avatar -->
|
||||
<div class="d-none d-lg-block text-center mb-5">
|
||||
<div class="avatar avatar-xxl avatar-circle mb-3">
|
||||
<img class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
||||
<img class="avatar-status avatar-lg-status" src="@@autopath/assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user">
|
||||
</div>
|
||||
|
||||
<h4 class="card-title mb-0">Jan Kowalski</h4>
|
||||
<p class="card-text small">natalie@example.com</p>
|
||||
</div>
|
||||
<!-- End Avatar -->
|
||||
|
||||
<!-- Nav -->
|
||||
@@include("@@autopath/magico-partials/magico-account-menu.html", {
|
||||
"link": "magico-account-home.html"
|
||||
})
|
||||
<!-- End Nav -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Navbar -->
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
|
||||
<div class="col-lg-9">
|
||||
<div class="d-grid gap-3 gap-lg-5">
|
||||
<!-- Card -->
|
||||
<div class="card">
|
||||
<div class="card-header border-bottom">
|
||||
<h4 class="card-header-title">Strona główna</h4>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<a class="card card-sm card-bordered card-transition h-100" href="#" target="_blank">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h5 class="card-title text-inherit">Aplikacje Android</h5>
|
||||
<p class="card-text text-body small">Lista aplikacji dla Ciebie i Twojego zespołu</p>
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
|
||||
<div class="col-auto">
|
||||
<span class="text-muted">
|
||||
<i class="bi-chevron-right small"></i>
|
||||
</span>
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
</div>
|
||||
<!-- End Row -->
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<a class="card card-sm card-bordered card-transition h-100" href="#" target="_blank">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h5 class="card-title text-inherit">Aplikacje Android</h5>
|
||||
<p class="card-text text-body small">Lista aplikacji dla Ciebie i Twojego zespołu</p>
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
|
||||
<div class="col-auto">
|
||||
<span class="text-muted">
|
||||
<i class="bi-chevron-right small"></i>
|
||||
</span>
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
</div>
|
||||
<!-- End Row -->
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- End Body -->
|
||||
|
||||
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Col -->
|
||||
</div>
|
||||
<!-- End Row -->
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
</main>
|
||||
<!-- ========== END MAIN CONTENT ========== -->
|
||||
|
||||
<!-- ========== FOOTER ========== -->
|
||||
@@include("@@autopath/magico-partials/magico-footer.html")
|
||||
<!-- ========== END FOOTER ========== -->
|
||||
|
||||
<!-- ========== SECONDARY CONTENTS ========== -->
|
||||
<!-- Sign Up -->
|
||||
@@include("@@autopath/partials/modal/signup.html")
|
||||
|
||||
<!-- Go To -->
|
||||
@@include("@@autopath/partials/layouts-components/go-to.html")
|
||||
<!-- ========== END SECONDARY CONTENTS ========== -->
|
||||
|
||||
<!-- 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-header/dist/hs-header.min.js"></script>
|
||||
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
|
||||
<script src="@@autopath/assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
|
||||
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
||||
<script src="@@autopath/assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
|
||||
<script src="@@autopath/assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
|
||||
<script src="@@autopath/node_modules/imask/dist/imask.min.js"></script>
|
||||
<script src="@@autopath/node_modules/quill/dist/quill.min.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-dropdown.js"></script>
|
||||
<script src="@@autopath/assets/js/hs.bs-validation.js"></script>
|
||||
<script src="@@autopath/assets/js/hs.imask.js"></script>
|
||||
<script src="@@autopath/assets/js/hs.quill.js"></script>
|
||||
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
|
||||
|
||||
<!-- JS Plugins Init. -->
|
||||
<script>
|
||||
(function() {
|
||||
// INITIALIZATION OF HEADER
|
||||
// =======================================================
|
||||
new HSHeader('#header').init()
|
||||
|
||||
|
||||
// INITIALIZATION OF MEGA MENU
|
||||
// =======================================================
|
||||
new HSMegaMenu('.js-mega-menu', {
|
||||
desktop: {
|
||||
position: 'left'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// INITIALIZATION OF SHOW ANIMATIONS
|
||||
// =======================================================
|
||||
new HSShowAnimation('.js-animation-link')
|
||||
|
||||
|
||||
// INITIALIZATION OF BOOTSTRAP VALIDATION
|
||||
// =======================================================
|
||||
HSBsValidation.init('.js-validate', {
|
||||
onSubmit: data => {
|
||||
data.event.preventDefault()
|
||||
alert('Submited')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
||||
// =======================================================
|
||||
HSBsDropdown.init()
|
||||
|
||||
|
||||
// INITIALIZATION OF GO TO
|
||||
// =======================================================
|
||||
new HSGoTo('.js-go-to')
|
||||
|
||||
|
||||
// INITIALIZATION OF FILE ATTACH
|
||||
// =======================================================
|
||||
new HSFileAttach('.js-file-attach')
|
||||
|
||||
|
||||
// INITIALIZATION OF ADD FIELD
|
||||
// =======================================================
|
||||
new HSAddField('.js-add-field', {
|
||||
addedField: el => {
|
||||
el.querySelectorAll('.js-select-dynamic').forEach(item => {
|
||||
HSCore.components.HSTomSelect.init(item)
|
||||
})
|
||||
|
||||
HSCore.components.HSMask.init('.js-input-mask-dynamic')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// INITIALIZATION OF INPUT MASK
|
||||
// =======================================================
|
||||
HSCore.components.HSMask.init('.js-input-mask')
|
||||
|
||||
|
||||
// INITIALIZATION OF QUILLJS EDITOR
|
||||
// =======================================================
|
||||
HSCore.components.HSQuill.init('.js-quill')
|
||||
|
||||
|
||||
// INITIALIZATION OF SELECT
|
||||
// =======================================================
|
||||
HSCore.components.HSTomSelect.init('.js-select', {
|
||||
render: {
|
||||
'option': function(data, escape) {
|
||||
return data.optionTemplate || `<div>${data.text}</div>>`
|
||||
},
|
||||
'item': function(data, escape) {
|
||||
return data.optionTemplate || `<div>${data.text}</div>>`
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user