Files
svo/app/themes/svo/views/layout/main.php
2025-07-14 12:15:41 +03:00

893 lines
49 KiB
PHP

<?php
/**
* @var string $content
* @var string $resources
* @var string $title
* @var \kernel\CgView $view
*/
$assets = new \app\themes\custom\assets\CustomThemesAssets($resources);
?>
<!DOCTYPE html>
<html lang="en">
<!-- [Head] start -->
<head>
<title>Compact Layout | Mantis Bootstrap 5 Admin Template</title>
<!-- [Meta] -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Mantis is made using Bootstrap 5 design framework. Download the free admin template & use it for your project.">
<meta name="keywords" content="Mantis, Dashboard UI Kit, Bootstrap 5, Admin Template, Admin Dashboard, CRM, CMS, Bootstrap Admin Template">
<meta name="author" content="CodedThemes">
<!-- [Favicon] icon -->
<link rel="icon" href="../assets/images/favicon.svg" type="image/x-icon"> <!-- [Google Font] Family -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap" id="main-font-link">
<!-- [Tabler Icons] https://tablericons.com -->
<link rel="stylesheet" href="../assets/fonts/tabler-icons.min.css" >
<!-- [Feather Icons] https://feathericons.com -->
<link rel="stylesheet" href="../assets/fonts/feather.css" >
<!-- [Font Awesome Icons] https://fontawesome.com/icons -->
<link rel="stylesheet" href="../assets/fonts/fontawesome.css" >
<!-- [Material Icons] https://fonts.google.com/icons -->
<link rel="stylesheet" href="../assets/fonts/material.css" >
<!-- [Template CSS Files] -->
<link rel="stylesheet" href="../assets/css/style.css" id="main-style-link" >
<link rel="stylesheet" href="../assets/css/style-preset.css" >
</head>
<!-- [Head] end -->
<!-- [Body] Start -->
<body data-pc-preset="preset-1" data-pc-direction="ltr" data-pc-theme="light" data-pc-direction="ltr">
<!-- [ Pre-loader ] start -->
<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>
<!-- [ Pre-loader ] End -->
<!-- [ Sidebar Menu ] start -->
<nav class="pc-sidebar">
<div class="navbar-wrapper">
<div class="m-header">
<a href="../dashboard/index.html" class="b-brand">
<!-- ======== Change your logo from here ============ -->
<img src="../assets/images/logo-dark.svg" alt="" class="logo logo-lg">
<img src="../assets/images/favicon.svg" alt="" class="logo logo-sm">
</a>
</div>
<div class="navbar-content">
<ul class="pc-navbar">
<li class="pc-item">
<a href="../dashboard/index.html" class="pc-link">
<span class="pc-micon"><i class="ti ti-dashboard"></i></span>
<span class="pc-mtext">Dashboard</span>
</a>
</li>
<li class="pc-item pc-caption">
<label>UI Components</label>
<i class="ti ti-dashboard"></i>
</li>
<li class="pc-item">
<a href="../elements/bc_typography.html" class="pc-link">
<span class="pc-micon"><i class="ti ti-typography"></i></span>
<span class="pc-mtext">Typography</span>
</a>
</li>
<li class="pc-item">
<a href="../elements/bc_color.html" class="pc-link">
<span class="pc-micon"><i class="ti ti-color-swatch"></i></span>
<span class="pc-mtext">Color</span>
</a>
</li>
<li class="pc-item">
<a href="../elements/icon-tabler.html" class="pc-link">
<span class="pc-micon"><i class="ti ti-plant-2"></i></span>
<span class="pc-mtext">Icons</span>
</a>
</li>
<li class="pc-item pc-caption">
<label>Pages</label>
<i class="ti ti-news"></i>
</li>
<li class="pc-item">
<a href="../pages/login-v3.html" class="pc-link">
<span class="pc-micon"><i class="ti ti-lock"></i></span>
<span class="pc-mtext">Login</span>
</a>
</li>
<li class="pc-item">
<a href="../pages/register-v3.html" class="pc-link">
<span class="pc-micon"><i class="ti ti-user-plus"></i></span>
<span class="pc-mtext">Register</span>
</a>
</li>
<li class="pc-item pc-caption">
<label>Other</label>
<i class="ti ti-brand-chrome"></i>
</li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-menu"></i></span><span class="pc-mtext">Menu
levels</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 2.1</a></li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Level 2.2<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 3.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Level 3.2</a></li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 4.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Level 4.2</a></li>
</ul>
</li>
</ul>
</li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Level 2.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 3.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Level 3.2</a></li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 4.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Level 4.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pc-item">
<a href="../other/sample-page.html" class="pc-link">
<span class="pc-micon"><i class="ti ti-brand-chrome"></i></span>
<span class="pc-mtext">Sample page</span>
</a>
</li>
</ul>
</div>
<div class="pc-compact-submenu">
<div class="pc-compact-title">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avtar avtar-xs bg-light-primary">
<i class=""></i>
</div>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="mb-0">title</h5>
</div>
</div>
</div>
<div class="pc-compact-list"></div>
</div>
</div>
</nav>
<!-- [ Sidebar Menu ] end -->
<!-- [ Header Topbar ] start -->
<header class="pc-header">
<div class="header-wrapper"> <!-- [Mobile Media Block] start -->
<div class="me-auto pc-mob-drp">
<ul class="list-unstyled">
<!-- ======= Menu collapse Icon ===== -->
<li class="pc-h-item pc-sidebar-collapse">
<a href="#" class="pc-head-link ms-0" id="sidebar-hide">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="pc-h-item pc-sidebar-popup">
<a href="#" class="pc-head-link ms-0" id="mobile-collapse">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="dropdown pc-h-item d-inline-flex d-md-none">
<a
class="pc-head-link dropdown-toggle arrow-none m-0"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-haspopup="false"
aria-expanded="false"
>
<i class="ti ti-search"></i>
</a>
<div class="dropdown-menu pc-h-dropdown drp-search">
<form class="px-3">
<div class="form-group mb-0 d-flex align-items-center">
<i data-feather="search"></i>
<input type="search" class="form-control border-0 shadow-none" placeholder="Search here. . .">
</div>
</form>
</div>
</li>
<li class="pc-h-item d-none d-md-inline-flex">
<form class="header-search">
<i data-feather="search" class="icon-search"></i>
<input type="search" class="form-control" placeholder="Search here. . .">
</form>
</li>
</ul>
</div>
<!-- [Mobile Media Block end] -->
<div class="ms-auto">
<ul class="list-unstyled">
<li class="dropdown pc-h-item pc-mega-menu">
<a
class="pc-head-link dropdown-toggle arrow-none me-0"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-haspopup="false"
aria-expanded="false"
>
<i class="ti ti-layout-grid"></i>
</a>
<div class="dropdown-menu pc-h-dropdown pc-mega-dmenu">
<div class="row g-0">
<div class="col image-block">
<h2 class="text-white">Explore Components</h2>
<p class="text-white my-4">Try our pre made component pages to check how it feels and suits as per your need.</p>
<div class="row align-items-end">
<div class="col-auto">
<div class="btn btn btn-light">View All <i class="ti ti-arrow-narrow-right"></i></div>
</div>
<div class="col">
<img src="../assets/images/mega-menu/chart.svg" alt="image" class="img-fluid img-charts">
</div>
</div>
</div>
<div class="col">
<h6 class="mega-title">UI Components</h6>
<ul class="pc-mega-list">
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Alerts</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Accordions</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Avatars</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Badges</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Breadcrumbs</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Button</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Buttons Groups</a></li
>
</ul>
</div>
<div class="col">
<h6 class="mega-title">UI Components</h6>
<ul class="pc-mega-list">
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Menus</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Media Sliders / Carousel</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Modals</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Pagination</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Progress Bars &amp; Graphs</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Search Bar</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Tabs</a></li
>
</ul>
</div>
<div class="col">
<h6 class="mega-title">Advance Components</h6>
<ul class="pc-mega-list">
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Advanced Stats</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Advanced Cards</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Lightbox</a></li
>
<li
><a href="#!" class="dropdown-item"><i class="ti ti-circle"></i> Notification</a></li
>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown pc-h-item">
<a
class="pc-head-link dropdown-toggle arrow-none me-0"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-haspopup="false"
aria-expanded="false"
>
<i class="ti ti-language"></i>
</a>
<div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
<a href="#!" class="dropdown-item">
<i class="ti ti-user"></i>
<span>My Account</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-settings"></i>
<span>Settings</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-headset"></i>
<span>Support</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-lock"></i>
<span>Lock Screen</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-power"></i>
<span>Logout</span>
</a>
</div>
</li>
<li class="dropdown pc-h-item">
<a
class="pc-head-link dropdown-toggle arrow-none me-0"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-haspopup="false"
aria-expanded="false"
>
<i class="ti ti-bell"></i>
<span class="badge bg-success pc-h-badge">3</span>
</a>
<div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown">
<div class="dropdown-header d-flex align-items-center justify-content-between">
<h5 class="m-0">Notification</h5>
<a href="#!" class="pc-head-link bg-transparent"><i class="ti ti-circle-check text-success"></i></a>
</div>
<div class="dropdown-divider"></div>
<div class="dropdown-header px-0 text-wrap header-notification-scroll position-relative" style="max-height: calc(100vh - 215px)">
<div class="list-group list-group-flush w-100">
<a class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="user-avtar bg-light-success"><i class="ti ti-gift"></i></div>
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">3:00 AM</span>
<p class="text-body mb-1">It's <b>Cristina danny's</b> birthday today.</p>
<span class="text-muted">2 min ago</span>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="user-avtar bg-light-primary"><i class="ti ti-message-circle"></i></div>
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">6:00 PM</span>
<p class="text-body mb-1"><b>Aida Burg</b> commented your post.</p>
<span class="text-muted">5 August</span>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="user-avtar bg-light-danger"><i class="ti ti-settings"></i></div>
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">2:45 PM</span>
<p class="text-body mb-1">Your Profile is Complete &nbsp;<b>60%</b></p>
<span class="text-muted">7 hours ago</span>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="user-avtar bg-light-primary"><i class="ti ti-headset"></i></div>
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">9:10 PM</span>
<p class="text-body mb-1"><b>Cristina Danny </b> invited to join <b> Meeting.</b></p>
<span class="text-muted">Daily scrum meeting time</span>
</div>
</div>
</a>
</div>
</div>
<div class="dropdown-divider"></div>
<div class="text-center py-2">
<a href="#!" class="link-primary">View all</a>
</div>
</div>
</li>
<li class="dropdown pc-h-item">
<a
class="pc-head-link dropdown-toggle arrow-none me-0"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-haspopup="false"
aria-expanded="false"
>
<i class="ti ti-mail"></i>
</a>
<div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown">
<div class="dropdown-header d-flex align-items-center justify-content-between">
<h5 class="m-0">Message</h5>
<a href="#!" class="pc-head-link bg-transparent"><i class="ti ti-x text-danger"></i></a>
</div>
<div class="dropdown-divider"></div>
<div class="dropdown-header px-0 text-wrap header-notification-scroll position-relative" style="max-height: calc(100vh - 215px)">
<div class="list-group list-group-flush w-100">
<a class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="../assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">3:00 AM</span>
<p class="text-body mb-1">It's <b>Cristina danny's</b> birthday today.</p>
<span class="text-muted">2 min ago</span>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="../assets/images/user/avatar-1.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">6:00 PM</span>
<p class="text-body mb-1"><b>Aida Burg</b> commented your post.</p>
<span class="text-muted">5 August</span>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="../assets/images/user/avatar-3.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">2:45 PM</span>
<p class="text-body mb-1"><b>There was a failure to your setup.</b></p>
<span class="text-muted">7 hours ago</span>
</div>
</div>
</a>
<a class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="../assets/images/user/avatar-4.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">9:10 PM</span>
<p class="text-body mb-1"><b>Cristina Danny </b> invited to join <b> Meeting.</b></p>
<span class="text-muted">Daily scrum meeting time</span>
</div>
</div>
</a>
</div>
</div>
<div class="dropdown-divider"></div>
<div class="text-center py-2">
<a href="#!" class="link-primary">View all</a>
</div>
</div>
</li>
<li class="dropdown pc-h-item">
<a class="pc-head-link me-0" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_pc_layout">
<i class="ti ti-settings"></i>
</a>
</li>
<li class="dropdown pc-h-item header-user-profile">
<a
class="pc-head-link dropdown-toggle arrow-none me-0"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-haspopup="false"
data-bs-auto-close="outside"
aria-expanded="false"
>
<img src="../assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
<span>Stebin Ben</span>
</a>
<div class="dropdown-menu dropdown-user-profile dropdown-menu-end pc-h-dropdown">
<div class="dropdown-header">
<div class="d-flex mb-1">
<div class="flex-shrink-0">
<img src="../assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar wid-35">
</div>
<div class="flex-grow-1 ms-3">
<h6 class="mb-1">Stebin Ben</h6>
<span>UI/UX Designer</span>
</div>
<a href="#!" class="pc-head-link bg-transparent"><i class="ti ti-power text-danger"></i></a>
</div>
</div>
<ul class="nav drp-tabs nav-fill nav-tabs" id="mydrpTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="drp-t1"
data-bs-toggle="tab"
data-bs-target="#drp-tab-1"
type="button"
role="tab"
aria-controls="drp-tab-1"
aria-selected="true"
><i class="ti ti-user"></i> Profile</button
>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="drp-t2"
data-bs-toggle="tab"
data-bs-target="#drp-tab-2"
type="button"
role="tab"
aria-controls="drp-tab-2"
aria-selected="false"
><i class="ti ti-settings"></i> Setting</button
>
</li>
</ul>
<div class="tab-content" id="mysrpTabContent">
<div class="tab-pane fade show active" id="drp-tab-1" role="tabpanel" aria-labelledby="drp-t1" tabindex="0">
<a href="#!" class="dropdown-item">
<i class="ti ti-edit-circle"></i>
<span>Edit Profile</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-user"></i>
<span>View Profile</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-clipboard-list"></i>
<span>Social Profile</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-wallet"></i>
<span>Billing</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-power"></i>
<span>Logout</span>
</a>
</div>
<div class="tab-pane fade" id="drp-tab-2" role="tabpanel" aria-labelledby="drp-t2" tabindex="0">
<a href="#!" class="dropdown-item">
<i class="ti ti-help"></i>
<span>Support</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-user"></i>
<span>Account Settings</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-lock"></i>
<span>Privacy Center</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-messages"></i>
<span>Feedback</span>
</a>
<a href="#!" class="dropdown-item">
<i class="ti ti-list"></i>
<span>History</span>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</header>
<!-- [ Header ] end -->
<!-- [ Main Content ] start -->
<div class="pc-container">
<div class="pc-content">
<!-- [ breadcrumb ] start -->
<div class="page-header">
<div class="page-block">
<div class="row align-items-center">
<div class="col-md-12">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="../dashboard/index.html">Home</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0)">Layout</a></li>
<li class="breadcrumb-item" aria-current="page">Compact Layout</li>
</ul>
</div>
<div class="col-md-12">
<div class="page-header-title">
<h2 class="mb-0">Compact Layout</h2>
</div>
</div>
</div>
</div>
</div>
<!-- [ breadcrumb ] end -->
<!-- [ Main Content ] start -->
<div class="row">
<!-- [ sample-page ] start -->
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Hello card</h5>
</div>
<div class="card-body">
<p
>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
<!-- [ sample-page ] end -->
</div>
<!-- [ Main Content ] end -->
</div>
</div>
<!-- [ Main Content ] end -->
<footer class="pc-footer">
<div class="footer-wrapper container-fluid">
<div class="row">
<div class="col-sm my-1">
<p class="m-0"
>Mantis &#9829; crafted by Team <a href="https://themeforest.net/user/codedthemes" target="_blank">Codedthemes</a> Distributed by <a href="https://themewagon.com/">ThemeWagon</a>.</p
>
</div>
<div class="col-auto my-1">
<ul class="list-inline footer-link mb-0">
<li class="list-inline-item"><a href="../index.html">Home</a></li>
<li class="list-inline-item"><a href="https://codedthemes.gitbook.io/mantis-bootstrap" target="_blank">Documentation</a></li>
<li class="list-inline-item"><a href="https://codedthemes.authordesk.app/" target="_blank">Support</a></li>
</ul>
</div>
</div>
</div>
</footer> <!-- Required Js -->
<script src="../assets/js/plugins/popper.min.js"></script>
<script src="../assets/js/plugins/simplebar.min.js"></script>
<script src="../assets/js/plugins/bootstrap.min.js"></script>
<script src="../assets/js/fonts/custom-font.js"></script>
<script src="../assets/js/pcoded.js"></script>
<script src="../assets/js/plugins/feather.min.js"></script>
<script>layout_change('light');</script>
<script>change_box_container('false');</script>
<script>layout_rtl_change('false');</script>
<script>preset_change("preset-1");</script>
<script>font_change("Public-Sans");</script>
<div class="offcanvas pct-offcanvas offcanvas-end" tabindex="-1" id="offcanvas_pc_layout">
<div class="offcanvas-header bg-primary">
<h5 class="offcanvas-title text-white">Mantis Customizer</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="pct-body" style="height: calc(100% - 60px)">
<div class="offcanvas-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse1">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avtar avtar-xs bg-light-primary">
<i class="ti ti-layout-sidebar f-18"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="mb-1">Theme Layout</h6>
<span>Choose your layout</span>
</div>
<i class="ti ti-chevron-down"></i>
</div>
</a>
<div class="collapse show" id="pctcustcollapse1">
<div class="pct-content">
<div class="pc-rtl">
<p class="mb-1">Direction</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="layoutmodertl">
<label class="form-check-label" for="layoutmodertl">RTL</label>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse2">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avtar avtar-xs bg-light-primary">
<i class="ti ti-brush f-18"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="mb-1">Theme Mode</h6>
<span>Choose light or dark mode</span>
</div>
<i class="ti ti-chevron-down"></i>
</div>
</a>
<div class="collapse show" id="pctcustcollapse2">
<div class="pct-content">
<div class="theme-color themepreset-color theme-layout">
<a href="#!" class="active" onclick="layout_change('light')" data-value="false"
><span><img src="../assets/images/customization/default.svg" alt="img"></span><span>Light</span></a
>
<a href="#!" class="" onclick="layout_change('dark')" data-value="true"
><span><img src="../assets/images/customization/dark.svg" alt="img"></span><span>Dark</span></a
>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse3">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avtar avtar-xs bg-light-primary">
<i class="ti ti-color-swatch f-18"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="mb-1">Color Scheme</h6>
<span>Choose your primary theme color</span>
</div>
<i class="ti ti-chevron-down"></i>
</div>
</a>
<div class="collapse show" id="pctcustcollapse3">
<div class="pct-content">
<div class="theme-color preset-color">
<a href="#!" class="active" data-value="preset-1"
><span><img src="../assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 1</span></a
>
<a href="#!" class="" data-value="preset-2"
><span><img src="../assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 2</span></a
>
<a href="#!" class="" data-value="preset-3"
><span><img src="../assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 3</span></a
>
<a href="#!" class="" data-value="preset-4"
><span><img src="../assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 4</span></a
>
<a href="#!" class="" data-value="preset-5"
><span><img src="../assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 5</span></a
>
<a href="#!" class="" data-value="preset-6"
><span><img src="../assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 6</span></a
>
<a href="#!" class="" data-value="preset-7"
><span><img src="../assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 7</span></a
>
<a href="#!" class="" data-value="preset-8"
><span><img src="../assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 8</span></a
>
<a href="#!" class="" data-value="preset-9"
><span><img src="../assets/images/customization/theme-color.svg" alt="img"></span><span>Theme 9</span></a
>
</div>
</div>
</div>
</li>
<li class="list-group-item pc-boxcontainer">
<a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse4">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avtar avtar-xs bg-light-primary">
<i class="ti ti-border-inner f-18"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="mb-1">Layout Width</h6>
<span>Choose fluid or container layout</span>
</div>
<i class="ti ti-chevron-down"></i>
</div>
</a>
<div class="collapse show" id="pctcustcollapse4">
<div class="pct-content">
<div class="theme-color themepreset-color boxwidthpreset theme-container">
<a href="#!" class="active" onclick="change_box_container('false')" data-value="false"><span><img src="../assets/images/customization/default.svg" alt="img"></span><span>Fluid</span></a>
<a href="#!" class="" onclick="change_box_container('true')" data-value="true"><span><img src="../assets/images/customization/container.svg" alt="img"></span><span>Container</span></a>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<a class="btn border-0 text-start w-100" data-bs-toggle="collapse" href="#pctcustcollapse5">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avtar avtar-xs bg-light-primary">
<i class="ti ti-typography f-18"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h6 class="mb-1">Font Family</h6>
<span>Choose your font family.</span>
</div>
<i class="ti ti-chevron-down"></i>
</div>
</a>
<div class="collapse show" id="pctcustcollapse5">
<div class="pct-content">
<div class="theme-color fontpreset-color">
<a href="#!" class="active" onclick="font_change('Public-Sans')" data-value="Public-Sans"
><span>Aa</span><span>Public Sans</span></a
>
<a href="#!" class="" onclick="font_change('Roboto')" data-value="Roboto"><span>Aa</span><span>Roboto</span></a>
<a href="#!" class="" onclick="font_change('Poppins')" data-value="Poppins"><span>Aa</span><span>Poppins</span></a>
<a href="#!" class="" onclick="font_change('Inter')" data-value="Inter"><span>Aa</span><span>Inter</span></a>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="collapse show">
<div class="pct-content">
<div class="d-grid">
<button class="btn btn-light-danger" id="layoutreset">Reset Layout</button>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/layout-compact.js"></script>
</body>
<!-- [Body] end -->
</html>