first change
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
<div class="navbar-brand-box horizontal-logo">
|
||||
<a href="{{ route('dashboard') }}" class="logo logo-dark">
|
||||
<span class="logo-sm">
|
||||
<img src="{{ asset(setting('favicon')) }}" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img src="{{ asset(setting('logo')) }}" alt="" height="17">
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('dashboard') }}" class="logo logo-light">
|
||||
<span class="logo-sm">
|
||||
<img src="{{ asset(setting('favicon')) }}" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img src="{{ asset(setting('logo_white')) }}" alt="" height="17">
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
14
resources/views/components/dashboard/breadcumb.blade.php
Normal file
14
resources/views/components/dashboard/breadcumb.blade.php
Normal file
@@ -0,0 +1,14 @@
|
||||
@props(['title' => 'Dashboard'])
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-sm-0">{{ $title }}</h4>
|
||||
<div class="page-title-right">
|
||||
<ol class="breadcrumb m-0">
|
||||
<li class="breadcrumb-item"><a href="javascript: void(0);">CCMS</a></li>
|
||||
<li class="breadcrumb-item active">{{ $title }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
14
resources/views/components/dashboard/footer.blade.php
Normal file
14
resources/views/components/dashboard/footer.blade.php
Normal file
@@ -0,0 +1,14 @@
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
{{ date('Y') }} © Consultancy All in one solutions.
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="text-sm-end d-none d-sm-block">
|
||||
Design & Develop by Bibhuti Solutions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
183
resources/views/components/dashboard/navbar.blade.php
Normal file
183
resources/views/components/dashboard/navbar.blade.php
Normal file
@@ -0,0 +1,183 @@
|
||||
<header id="page-topbar">
|
||||
<div class="layout-width">
|
||||
<div class="navbar-header">
|
||||
<div class="d-flex">
|
||||
<!-- LOGO -->
|
||||
<x-dashboard.application-logo />
|
||||
|
||||
<button type="button" class="btn btn-sm px-3 fs-16 header-item vertical-menu-btn topnav-hamburger"
|
||||
id="topnav-hamburger-icon">
|
||||
<span class="hamburger-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
|
||||
<div class="dropdown d-none topbar-head-dropdown header-item">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle"
|
||||
id="page-header-search-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i class="bx bx-search fs-22"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
|
||||
aria-labelledby="page-header-search-dropdown">
|
||||
<form class="p-3">
|
||||
<div class="form-group m-0">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search ..."
|
||||
aria-label="Recipient's username">
|
||||
<button class="btn btn-primary" type="submit"><i
|
||||
class="mdi mdi-magnify"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@can('dashboard.toggleDashboard')
|
||||
<livewire:toggle-switch />
|
||||
@endcan
|
||||
<div class="ms-1 header-item d-none d-sm-flex">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle"
|
||||
data-toggle="fullscreen">
|
||||
<i class='bx bx-fullscreen fs-22'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ms-1 header-item d-none d-sm-flex">
|
||||
<button type="button"
|
||||
class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle light-dark-mode">
|
||||
<i class='bx bx-moon fs-22'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown topbar-head-dropdown ms-1 header-item" id="notificationDropdown">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle"
|
||||
id="page-header-notifications-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<i class='bx bx-bell fs-22'></i>
|
||||
<span
|
||||
class="position-absolute topbar-badge fs-10 translate-middle badge rounded-pill bg-danger">3<span
|
||||
class="visually-hidden">unread messages</span></span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
|
||||
aria-labelledby="page-header-notifications-dropdown">
|
||||
|
||||
<div class="dropdown-head bg-primary bg-pattern rounded-top">
|
||||
<div class="p-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h6 class="m-0 fs-16 fw-semibold text-white"> Notifications </h6>
|
||||
</div>
|
||||
<div class="col-auto dropdown-tabs">
|
||||
<span class="badge bg-light-subtle text-body fs-13"> 4 New</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 pt-2">
|
||||
<ul class="nav nav-tabs dropdown-tabs nav-tabs-custom" data-dropdown-tabs="true"
|
||||
id="notificationItemsTab" role="tablist">
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#all-noti-tab"
|
||||
role="tab" aria-selected="true">
|
||||
All (4)
|
||||
</a>
|
||||
</li>
|
||||
{{-- <li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#messages-tab" role="tab"
|
||||
aria-selected="false">
|
||||
Messages
|
||||
</a>
|
||||
</li> --}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-content position-relative" id="notificationItemsTabContent">
|
||||
<div class="tab-pane fade show active py-2 ps-2" id="all-noti-tab" role="tabpanel">
|
||||
<div data-simplebar style="max-height: 300px;" class="pe-2">
|
||||
<div class="text-reset notification-item d-block dropdown-item position-relative">
|
||||
<div class="d-flex">
|
||||
<img src="{{ asset('assets/images/users/avatar-8.jpg') }}"
|
||||
class="me-3 rounded-circle avatar-xs flex-shrink-0" alt="user-pic">
|
||||
<div class="flex-grow-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Maureen Gibson</h6>
|
||||
</a>
|
||||
<div class="fs-13 text-muted">
|
||||
<p class="mb-1">We talked about a project on linkedin.</p>
|
||||
</div>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> 4 hrs ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="all-notification-check04">
|
||||
<label class="form-check-label"
|
||||
for="all-notification-check04"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-3 text-center view-all">
|
||||
<button type="button"
|
||||
class="btn btn-soft-success waves-effect waves-light">View
|
||||
All Notifications <i class="ri-arrow-right-line align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notification-actions" id="notification-actions">
|
||||
<div class="d-flex text-muted justify-content-center">
|
||||
Select <div id="select-content" class="text-body fw-semibold px-1">0</div>
|
||||
Result
|
||||
<button type="button" class="btn btn-link link-danger p-0 ms-3"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#removeNotificationModal">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown ms-sm-3 header-item topbar-user">
|
||||
<button type="button" class="btn" id="page-header-user-dropdown" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="d-flex align-items-center">
|
||||
<img class="rounded-circle header-profile-user"
|
||||
src="{{ asset('assets/images/avatar.png') }}" alt="Header Avatar">
|
||||
<span class="text-start ms-xl-2">
|
||||
<span
|
||||
class="d-none d-xl-inline-block ms-1 fw-medium user-name-text">{{ auth()->user()->name }}</span>
|
||||
<span
|
||||
class="d-none d-xl-block ms-1 fs-12 user-name-sub-text">{{ auth()->user()->roles->map(function ($role) {
|
||||
return $role->name;
|
||||
})->implode(' ') }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<h6 class="dropdown-header">Welcome {{ auth()->user()->name }}!</h6>
|
||||
<a class="dropdown-item" href="javascript:void(0)"
|
||||
onclick="event.preventDefault(); $('#logout-form').submit();"><i
|
||||
class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i> <span
|
||||
class="align-middle" data-key="t-logout">Logout</span></a>
|
||||
<form id="logout-form" method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
7
resources/views/components/dashboard/preloader.blade.php
Normal file
7
resources/views/components/dashboard/preloader.blade.php
Normal file
@@ -0,0 +1,7 @@
|
||||
<div id="preloader">
|
||||
<div id="status">
|
||||
<div class="spinner-border text-primary avatar-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!-- removeNotificationModal -->
|
||||
<div id="removeNotificationModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="NotificationModalbtn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this Notification ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger" id="delete-notification">Yes, Delete It!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
89
resources/views/components/dashboard/sidebar-menu.blade.php
Normal file
89
resources/views/components/dashboard/sidebar-menu.blade.php
Normal file
@@ -0,0 +1,89 @@
|
||||
@php
|
||||
function isMenuVisible($menu)
|
||||
{
|
||||
if (array_key_exists('module', $menu) && !empty($menu['module'])) {
|
||||
if (!Module::isModuleEnabled($menu['module'])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (array_key_exists('can', $menu) && !empty($menu['can'])) {
|
||||
if (
|
||||
!auth()
|
||||
->user()
|
||||
->can($menu['can'])
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (array_key_exists('submenu', $menu) && is_array($menu['submenu'])) {
|
||||
foreach ($menu['submenu'] as $submenu) {
|
||||
if (isSubmenuVisible($submenu)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function isSubmenuVisible($submenu)
|
||||
{
|
||||
return !array_key_exists('can', $submenu) ||
|
||||
empty($submenu['can']) ||
|
||||
auth()
|
||||
->user()
|
||||
->can($submenu['can']);
|
||||
}
|
||||
@endphp
|
||||
|
||||
@foreach ($menus as $menu)
|
||||
@if (isMenuVisible($menu))
|
||||
@if (array_key_exists('menu-title', $menu))
|
||||
<li class="menu-title">
|
||||
<i class="ri-more-fill"></i>
|
||||
<span>{{ $menu['menu-title'] }}</span>
|
||||
</li>
|
||||
@else
|
||||
<li class="nav-item">
|
||||
@if (array_key_exists('submenu', $menu))
|
||||
@php
|
||||
$menuList = array_column($menu['submenu'], 'url');
|
||||
$isActive = in_array(\Request::path(), $menuList);
|
||||
@endphp
|
||||
|
||||
<a class="nav-link menu-link @if ($isActive) collapsed active @endif"
|
||||
data-bs-toggle="collapse" role="button" aria-expanded="false"
|
||||
aria-controls="{{ str()->slug($menu['text']) }}" href="#{{ str()->slug($menu['text']) }}">
|
||||
<i class="{{ $menu['icon'] }}"></i><span
|
||||
data-key="t-{{ str()->slug($menu['text']) }}">{{ $menu['text'] }}</span>
|
||||
</a>
|
||||
|
||||
<div class="menu-dropdown @if ($isActive) show @endif collapse"
|
||||
id="{{ str()->slug($menu['text']) }}">
|
||||
<ul class="nav nav-sm flex-column">
|
||||
@foreach ($menu['submenu'] as $subMenu)
|
||||
@if (isSubmenuVisible($subMenu))
|
||||
<li class="nav-item">
|
||||
<a href="{{ url($subMenu['url']) }}"
|
||||
class="nav-link @if (\Request::is($subMenu['url']) || \Request::is($subMenu['url'] . '/*')) active @endif">
|
||||
{{ $subMenu['text'] }}
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@else
|
||||
<a href="{{ url($menu['url']) ?? '#' }}"
|
||||
class="nav-link @if (\Request::is($menu['url']) || \Request::is($menu['url'] . '/*')) active @endif">
|
||||
<i class="{{ $menu['icon'] }}"></i><span
|
||||
data-key="t-{{ str()->slug($menu['text']) }}">{{ $menu['text'] }}</span>
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
40
resources/views/components/dashboard/sidebar.blade.php
Normal file
40
resources/views/components/dashboard/sidebar.blade.php
Normal file
@@ -0,0 +1,40 @@
|
||||
<div class="app-menu navbar-menu">
|
||||
<!-- LOGO -->
|
||||
<div class="navbar-brand-box">
|
||||
<!-- Dark Logo-->
|
||||
<a href="{{ route('dashboard') }}" class="logo logo-dark">
|
||||
<span class="logo-sm">
|
||||
<img src="{{ asset(setting('favicon')) }}" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img class="dark-login" src="{{ asset(setting('logo')) }}" alt="">
|
||||
</span>
|
||||
</a>
|
||||
<!-- Light Logo-->
|
||||
<a href="{{ route('dashboard') }}" class="logo logo-light">
|
||||
<span class="logo-sm">
|
||||
<img src="{{ asset(setting('favicon')) }}" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img class="light-login" src="{{ asset(setting('logo_white')) }}" alt="">
|
||||
</span>
|
||||
</a>
|
||||
<button type="button" class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover"
|
||||
id="vertical-hover">
|
||||
<i class="ri-record-circle-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="scrollbar">
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="two-column-menu">
|
||||
</div>
|
||||
<ul class="navbar-nav" id="navbar-nav">
|
||||
{!! Module::sidebarMenu(auth()->user()->active_sidebar) !!}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-background"></div>
|
||||
</div>
|
||||
740
resources/views/components/dashboard/theme-changer.blade.php
Normal file
740
resources/views/components/dashboard/theme-changer.blade.php
Normal file
@@ -0,0 +1,740 @@
|
||||
<div class="customizer-setting d-none d-md-block">
|
||||
<div class="btn-info rounded-pill shadow-lg btn btn-icon btn-lg p-2" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas" aria-controls="theme-settings-offcanvas">
|
||||
<i class='mdi mdi-spin mdi-cog-outline fs-22'></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Theme Settings -->
|
||||
<div class="offcanvas offcanvas-end border-0" tabindex="-1" id="theme-settings-offcanvas">
|
||||
<div class="d-flex align-items-center bg-primary bg-gradient p-3 offcanvas-header">
|
||||
<h5 class="m-0 me-2 text-white">Theme Customizer</h5>
|
||||
|
||||
<button type="button" class="btn-close btn-close-white ms-auto" id="customizerclose-btn" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body p-0">
|
||||
<div data-simplebar class="h-100">
|
||||
<div class="p-4">
|
||||
<h6 class="mb-0 fw-semibold text-uppercase">Layout</h6>
|
||||
<p class="text-muted">Choose your layout</p>
|
||||
|
||||
<div class="row gy-3">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout01" name="data-layout" type="radio" value="vertical" class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout01">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Vertical</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout02" name="data-layout" type="radio" value="horizontal" class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout02">
|
||||
<span class="d-flex h-100 flex-column gap-1">
|
||||
<span class="bg-light d-flex p-1 gap-1 align-items-center">
|
||||
<span class="d-block p-1 bg-primary-subtle rounded me-1"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle"></span>
|
||||
</span>
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Horizontal</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout03" name="data-layout" type="radio" value="twocolumn" class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout03">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1">
|
||||
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Two Column</h5>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout04" name="data-layout" type="radio" value="semibox" class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout04">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0 p-1">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column pt-1 pe-2">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Semi Box</h5>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Color Scheme</h6>
|
||||
<p class="text-muted">Choose Light or Dark Scheme.</p>
|
||||
|
||||
<div class="colorscheme-cardradio">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-mode-light" value="light">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="layout-mode-light">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Light</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio dark">
|
||||
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-mode-dark" value="dark">
|
||||
<label class="form-check-label p-0 avatar-md w-100 bg-dark" for="layout-mode-dark">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-white bg-opacity-10 d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-white bg-opacity-10 d-block p-1"></span>
|
||||
<span class="bg-white bg-opacity-10 d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-visibility">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Visibility</h6>
|
||||
<p class="text-muted">Choose show or Hidden sidebar.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-visibility" id="sidebar-visibility-show" value="show">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-visibility-show">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0 p-1">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column pt-1 pe-2">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Show</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-visibility" id="sidebar-visibility-hidden" value="hidden">
|
||||
<label class="form-check-label p-0 avatar-md w-100 px-2" for="sidebar-visibility-hidden">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column pt-1 px-2">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Hidden</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="layout-width">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Layout Width</h6>
|
||||
<p class="text-muted">Choose Fluid or Boxed layout.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-fluid" value="fluid">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="layout-width-fluid">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Fluid</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-boxed" value="boxed">
|
||||
<label class="form-check-label p-0 avatar-md w-100 px-2" for="layout-width-boxed">
|
||||
<span class="d-flex gap-1 h-100 border-start border-end">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Boxed</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="layout-position">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Layout Position</h6>
|
||||
<p class="text-muted">Choose Fixed or Scrollable Layout Position.</p>
|
||||
|
||||
<div class="btn-group radio" role="group">
|
||||
<input type="radio" class="btn-check" name="data-layout-position" id="layout-position-fixed" value="fixed">
|
||||
<label class="btn btn-light w-sm" for="layout-position-fixed">Fixed</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="data-layout-position" id="layout-position-scrollable" value="scrollable">
|
||||
<label class="btn btn-light w-sm ms-0" for="layout-position-scrollable">Scrollable</label>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Topbar Color</h6>
|
||||
<p class="text-muted">Choose Light or Dark Topbar Color.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-light" value="light">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-light">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Light</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-dark" value="dark">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-dark">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-primary d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-size">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Size</h6>
|
||||
<p class="text-muted">Choose a size of Sidebar.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-default" value="lg">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-default">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Default</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-compact" value="md">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-compact">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Compact</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small" value="sm">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1">
|
||||
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Small (Icon View)</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small-hover" value="sm-hover">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small-hover">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1">
|
||||
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Small Hover View</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-view">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar View</h6>
|
||||
<p class="text-muted">Choose Default or Detached Sidebar view.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-style" id="sidebar-view-default" value="default">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-default">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Default</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-style" id="sidebar-view-detached" value="detached">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-detached">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-flex p-1 gap-1 align-items-center px-2">
|
||||
<span class="d-block p-1 bg-primary-subtle rounded me-1"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle"></span>
|
||||
</span>
|
||||
<span class="d-flex gap-1 h-100 p-1 px-2">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="bg-light d-block p-1 mt-auto px-2"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Detached</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar-color">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Color</h6>
|
||||
<p class="text-muted">Choose a color of Sidebar.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-light" value="light">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-light">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-white border-end d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Light</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-dark" value="dark">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-dark">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-primary d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<button class="btn btn-link avatar-md w-100 p-0 overflow-hidden border collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient" aria-expanded="false" aria-controls="collapseBgGradient">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-vertical-gradient d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-white bg-opacity-10 rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-white bg-opacity-10"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<h5 class="fs-13 text-center mt-2">Gradient</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="collapse" id="collapseBgGradient">
|
||||
<div class="d-flex gap-2 flex-wrap img-switch p-2 px-3 bg-light rounded">
|
||||
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient" value="gradient">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-2" value="gradient-2">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-2">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient-2"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-3" value="gradient-3">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-3">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient-3"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-4" value="gradient-4">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-4">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient-4"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-img">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Images</h6>
|
||||
<p class="text-muted">Choose a image of Sidebar.</p>
|
||||
|
||||
<div class="d-flex gap-2 flex-wrap img-switch">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-none" value="none">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-none">
|
||||
<span class="avatar-md w-auto bg-light d-flex align-items-center justify-content-center">
|
||||
<i class="ri-close-fill fs-20"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-01" value="img-1">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-01">
|
||||
<img src="assets/images/sidebar/img-1.jpg" alt="" class="avatar-md w-auto object-fit-cover">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-02" value="img-2">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-02">
|
||||
<img src="assets/images/sidebar/img-2.jpg" alt="" class="avatar-md w-auto object-fit-cover">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-03" value="img-3">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-03">
|
||||
<img src="assets/images/sidebar/img-3.jpg" alt="" class="avatar-md w-auto object-fit-cover">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-04" value="img-4">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-04">
|
||||
<img src="assets/images/sidebar/img-4.jpg" alt="" class="avatar-md w-auto object-fit-cover">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="preloader-menu">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Preloader</h6>
|
||||
<p class="text-muted">Choose a preloader.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-preloader" id="preloader-view-custom" value="enable">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-custom">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<!-- <div id="preloader"> -->
|
||||
<div id="status" class="d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary avatar-xxs m-auto" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Enable</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-preloader" id="preloader-view-none" value="disable">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-none">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Disable</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end preloader-menu -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="offcanvas-footer border-top p-3 text-center">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button type="button" class="btn btn-light w-100" id="reset-layout">Reset</button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<a href="https://1.envato.market/velzon-admin" target="_blank" class="btn btn-primary w-100">Buy Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user