Commit 4c981655 authored by Santhanavanich's avatar Santhanavanich
Browse files

update

parent d91dc71e
Pipeline #6783 passed with stage
in 9 seconds
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divider - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item active">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Divider</h3>
<p class="text-subtitle text-muted">Visually separate your content</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Divider</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default</h4>
</div>
<div class="card-body">
<p>You can use default divider with <code>&lt;hr&gt;</code><code><hr></code></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident nostrum numquam
reprehenderit facilis. Dolor blanditiis commodi voluptate esse voluptatum aut natus,
distinctio at, officiis ipsam molestiae doloribus ratione corrupti dolorum.</p>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Divider with Text</h4>
</div>
<div class="card-body">
<p>Use <code>.divider-text</code> and wrapped by <code>.divider</code> to create a divider text
</p>
<div class="divider">
<div class="divider-text">Hello there!</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident nostrum numquam
reprehenderit facilis. Dolor blanditiis commodi voluptate esse voluptatum aut natus,
distinctio at, officiis ipsam molestiae doloribus ratione corrupti dolorum.</p>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Divider Position</h4>
</div>
<div class="card-body">
<p>Use <code>.divider-{left|left-center|right-center|right}</code> and with
<code>.divider</code> to change the text position
</p>
<div class="divider divider-left">
<div class="divider-text">Left</div>
</div>
<div class="divider divider-left-center">
<div class="divider-text">Left Center</div>
</div>
<div class="divider">
<div class="divider-text">Center</div>
</div>
<div class="divider divider-right-center">
<div class="divider-text">Right Center</div>
</div>
<div class="divider divider-right">
<div class="divider-text">Right</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rating - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/pages/rater-js.css">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item active">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Rating</h3>
<p class="text-subtitle text-muted">Rating with <a href="">rater-js</a> - a pure javascript rating library
</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Rating</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic Rating</h4>
</div>
<div class="card-body">
<div id="basic"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">5 Star Rating with Step</h4>
</div>
<div class="card-body">
<div id="step"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Unlimited Number of Stars</h4>
</div>
<div class="card-body">
<div id="unli1"></div>
<br>
<div id="unli2"></div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script src="assets/js/extensions/rater-js.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Alert - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/pages/sweetalert2.css">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item active">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Sweet Alert</h3>
<p class="text-subtitle text-muted">A beautiful replacement for javascript alerts</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Sweet Alert</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic Sweet Alert</h4>
<p class="text-muted">SweetAlert automatically centers itself on the page and looks great no
matter if you're using a desktop computer, mobile or tablet. It's even highly customizable,
as you can see below!</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4 col-12">
<button id="basic" class="btn btn-outline-primary btn-lg btn-block">Basic
Example</button>
</div>
<div class="col-md-4 col-12">
<button id="title" class="btn btn-outline-primary btn-lg btn-block">A title with a text
under</button>
</div>
<div class="col-md-4 col-12">
<button id="footer" class="btn btn-outline-primary btn-lg btn-block">With
Footer</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Types</h4>
<p class='text-muted'>The type of the modal. SweetAlert comes with 5 built-in types which will
show a corresponding icon animation: "warning", "error", "success" and "info". You can also
set it as "input" to get a prompt modal. It can either be put in the object under the key
"icon" or passed as the third parameter of the function.</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4 col-12">
<button id="success" class="btn btn-outline-success btn-lg btn-block">Success</button>
</div>
<div class="col-md-4 col-12">
<button id="error" class="btn btn-outline-danger btn-lg btn-block">Error</button>
</div>
<div class="col-md-4 col-12">
<button id="warning" class="btn btn-outline-warning btn-lg btn-block">Warning</button>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 col-12">
<button id="info" class="btn btn-outline-info btn-lg btn-block">Info</button>
</div>
<div class="col-md-6 col-12">
<button id="question"
class="btn btn-outline-secondary btn-lg btn-block">Question</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Alert Input</h4>
<p class='text-muted'>The type of the modal. SweetAlert comes with 5 built-in types which will
show a corresponding icon animation: "warning", "error", "success" and "info". You can also
set it as "input" to get a prompt modal. It can either be put in the object under the key
"icon" or passed as the third parameter of the function.</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4 col-12">
<button id="text" class="btn btn-outline-success btn-lg btn-block">Text</button>
</div>
<div class="col-md-4 col-12">
<button id="email" class="btn btn-outline-danger btn-lg btn-block">Email</button>
</div>
<div class="col-md-4 col-12">
<button id="url" class="btn btn-outline-warning btn-lg btn-block">URL</button>
</div>
</div>
<div class="row mt-3">
<div class="col-md-4 col-12">
<button id="password" class="btn btn-outline-info btn-lg btn-block">Password</button>
</div>
<div class="col-md-4 col-12">
<button id="textarea"
class="btn btn-outline-secondary btn-lg btn-block">Textarea</button>
</div>
<div class="col-md-4 col-12">
<button id="select" class="btn btn-outline-secondary btn-lg btn-block">Select</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script src="assets/js/extensions/sweetalert2.js"></script>>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toastify - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/pages/toastify.css">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item active">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Toastify</h3>
<p class="text-subtitle text-muted">Better notification messages</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Toastify</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Types</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-4">
<button id="basic" class="btn btn-outline-primary btn-block btn-lg">Basic Toast</button>
</div>
<div class="col-12 col-md-4">
<button id="background" class="btn btn-outline-primary btn-block btn-lg">Custom
Background</button>
</div>
<div class="col-12 col-md-4">
<button id="close" class="btn btn-outline-primary btn-block btn-lg">Close
Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Position</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-4">
<button id="top-left" class="btn btn-outline-primary btn-block btn-lg">Top Left</button>
</div>
<div class="col-12 col-md-4">
<button id="top-center" class="btn btn-outline-primary btn-block btn-lg">Top
Center</button>
</div>
<div class="col-12 col-md-4">
<button id="top-right" class="btn btn-outline-primary btn-block btn-lg">Top
Right</button>
</div>
</div>
<div class="row mt-3">
<div class="col-12 col-md-4">
<button id="bottom-left" class="btn btn-outline-primary btn-block btn-lg">Bottom
Left</button>
</div>
<div class="col-12 col-md-4">
<button id="bottom-center" class="btn btn-outline-primary btn-block btn-lg">Bottom
Center</button>
</div>
<div class="col-12 col-md-4">
<button id="bottom-right" class="btn btn-outline-primary btn-block btn-lg">Bottom
Right</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script src="assets/js/extensions/toastify.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CKEditor - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item active">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>CKEditor </h3>
<p class="text-subtitle text-muted">Allow your users to provide formatted content with a powerful WYSIWYG editor.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">CKEditor</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Classic Editor</h4>
</div>
<div class="card-body">
<div id="editor">
<p>This is some sample content.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script src="assets/js/extensions/ckeditor.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Editor - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/pages/quill.css">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu active">
<li class="submenu-item active">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Quill Form Editor </h3>
<p class="text-subtitle text-muted">Allow your users to provide formatted content with a powerful WYSIWYG editor.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Form Editor</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Quill.js Snow Editor</h4>
</div>
<div class="card-body">
<p>Snow is a clean editor theme</p>
<div id="snow">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Bubble Editor</h4>
</div>
<div class="card-body">
<p>Block some text to display options in poppovers </p>
<div id="bubble">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Full Editor</h4>
</div>
<div class="card-body">
<p>Block some text to display options in poppovers </p>
<div id="full">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script src="assets/js/extensions/quill.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Summernote - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/pages/summernote.css">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item active">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Summernote </h3>
<p class="text-subtitle text-muted">Super simple WYSIWYG editor. But you must include jQuery</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Summernote</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default Editor</h4>
</div>
<div class="card-body">
<div id="summernote"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Word Hints</h4>
</div>
<div class="card-body">
<div id="hint"></div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script src="assets/js/extensions/summernote.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item active">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>TinyMCE </h3>
<p class="text-subtitle text-muted">Allow your users to provide formatted content with a powerful WYSIWYG editor.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">TinyMCE</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default Editor</h4>
</div>
<div class="card-body">
<textarea name="" id="default" cols="30" rows="10"></textarea>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Code Toolbar</h4>
</div>
<div class="card-body">
<textarea id="dark" cols="30" rows="10"></textarea>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script src="assets/js/extensions/tinymce.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item active">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Checkbox</h3>
<p class="text-subtitle text-muted">For users to check their lists</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Checkbox</li>
</ol>
</nav>
</div>
</div>
</div>
<section id="basic-checkbox">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic Checkboxes</h4>
</div>
<div class="card-content">
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="checkbox">
<input type="checkbox" id="checkbox1" class="form-check-input" checked>
<label for="checkbox1">Touch me!</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="checkbox">
<input type="checkbox" class="form-check-input" id="checkbox2">
<label for="checkbox2">Touch me!</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="checkbox">
<input type="checkbox" id="checkbox3" class="form-check-input" disabled
checked>
<label for="checkbox3">Disabled Checked Checkbox</label>
</div>
</div>
</li>
<li class="d-inline-block mb-1">
<div class="form-check">
<div class="checkbox">
<input type="checkbox" id="checkbox4" class="form-check-input" disabled>
<label for="checkbox4">Disabled Unchecked Checkbox</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Basic Checkbox end -->
<!-- Custom Checkbox Colored start -->
<section id="custom-checkbox-colored">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Custom Colored Checkboxes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>To change the color of the Custom CheckBoxes, use the <code>.bg-{colorName}</code> with
<code>.form-check-input</code> class.
</p>
<ul class="list-unstyled mb-0">
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input form-check-primary" checked
name="customCheck" id="customColorCheck1">
<label class="form-check-label" for="customColorCheck1">Primary</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input form-check-secondary" checked
name="customCheck" id="customColorCheck2">
<label class="form-check-label" for="customColorCheck2">Secondary</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input form-check-success" checked
name="customCheck" id="customColorCheck3">
<label class="form-check-label" for="customColorCheck3">Success</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input form-check-danger" checked
name="customCheck" id="customColorCheck4">
<label class="form-check-label" for="customColorCheck4">Danger</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input form-check-info" checked
name="customCheck" id="customColorCheck5">
<label class="form-check-label" for="customColorCheck5">Info</label>
</div>
</div>
</li>
<li class="d-inline-block mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="form-check-input form-check-warning" checked
name="customCheck" id="customColorCheck6">
<label class="form-check-label" for="customColorCheck6">Warning</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Custom Checkbox end -->
<!-- Checkbox Glow start -->
<section id="checkbox-glow">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Checkboxes Glow</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Use class <code>.form-check-glow</code> class with
<code>.form-check-input.form-check-{colorName}</code>
for glow effect to Checkboxes. Glow shadow color will be changed according to Colored
Checkboxes.
</p>
<ul class="list-unstyled mb-0">
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="form-check-input form-check-primary form-check-glow" checked
name="customCheck" id="customColorCheck1">
<label class="form-check-label" for="customColorCheck1">Primary</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="form-check-input form-check-secondary form-check-glow" checked
name="customCheck" id="customColorCheck2">
<label class="form-check-label" for="customColorCheck2">Secondary</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="form-check-input form-check-success form-check-glow" checked
name="customCheck" id="customColorCheck3">
<label class="form-check-label" for="customColorCheck3">Success</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="form-check-input form-check-danger form-check-glow" checked
name="customCheck" id="customColorCheck4">
<label class="form-check-label" for="customColorCheck4">Danger</label>
</div>
</div>
</li>
<li class="d-inline-block me-2 mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="form-check-input form-check-info form-check-glow" checked
name="customCheck" id="customColorCheck5">
<label class="form-check-label" for="customColorCheck5">Info</label>
</div>
</div>
</li>
<li class="d-inline-block mb-1">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="form-check-input form-check-warning form-check-glow" checked
name="customCheck" id="customColorCheck6">
<label class="form-check-label" for="customColorCheck6">Warning</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Checkbox Glow end -->
<!-- Checkbox Sizes start -->
<section id="checkbox-sizes">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Checkboxes Sizes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>To add a checkBox with different sizes, we have the <code>.form-check-sm</code> class for
small
Checkboxes. Add it alongwith <code>.form-check</code> class.</p>
<ul class="list-unstyled mb-0">
<li class="d-inline-block mb-1 me-2">
<div class="form-check form-check-sm">
<div class="custom-control custom-checkbox">
<input type="checkbox"
class="form-check-input form-check-primary form-check-glow" checked
name="customCheck" id="customColorCheck6">
<label class="form-check-label" for="customColorCheck6">Small</label>
</div>
</div>
</li>
<li class="d-inline-block mb-1 me-2">
<div class="form-check">
<input type="checkbox"
class="form-check-input form-check-primary form-check-glow" checked
name="customCheck" id="customColorCheck6">
<label class="form-check-label" for="customColorCheck6">Default</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Checkbox Sizes end -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Group - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item active">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Input Group</h3>
<p class="text-subtitle text-muted">A group for input to display information in before or after input
</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Input Group</li>
</ol>
</nav>
</div>
</div>
</div>
<section id="basic-input-groups">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic Input Groups</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Add span with <code>.input-group-text</code> class <b>before</b>
<code>&lt;input&gt;</code>
for input-group-prepend and add span with <code>.input-group-text</code> class
<b>after</b>
<code>&lt;input&gt;</code> for input-group-append.
</p>
<div class="row">
<div class="col-lg-4 mb-1">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Addon to left"
aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-lg-4 mb-1">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Addon to right"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="col-lg-4 mb-1">
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control"
aria-label="Amount (to the nearest dollar)"
placeholder="Addon on both side">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Basic Inputs Groups end -->
<!-- Multiple Inputs start -->
<section id="multiple-inputs">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Multiple Inputs</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>While multiple <code>&lt;input&gt;</code>s are supported visually, validation styles are
only
available for input groups with a single <code>&lt;input&gt;</code>.</p>
<div class="row">
<div class="col-12">
<fieldset>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input type="text" aria-label="First name" class="form-control"
placeholder="First Name">
<input type="text" aria-label="Last name" class="form-control"
placeholder="Last Name">
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Multiple Inputs end -->
<!-- Multiple addons start -->
<section id="multiple-addons">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Multiple Addons</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
</p>
<div class="row">
<div class="col-sm-6 mb-1">
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control"
aria-label="Dollar amount (with dot and two decimal places)">
</div>
</div>
<div class="col-sm-6 mb-1">
<div class="input-group">
<input type="text" class="form-control"
aria-label="Dollar amount (with dot and two decimal places)">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Multiple addons end -->
<!-- Inputs Group Checkbox and Radio Buttons end -->
<section id="input-group-checkbox-radio">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Groups with Checkboxes and Radios</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Input Groups can use with checkboxes and radio buttons also. For it add code for
<code>.checkbox</code> class and <code>.radio</code> class respectively.
</p>
<div class="row">
<div class="col-sm-6 mb-1">
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input" type="checkbox" value=""
aria-label="Checkbox for following text input">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
</div>
<div class="col-sm-6 mb-1">
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input" type="radio" value=""
aria-label="Radio button for following text input">
</div>
<input type="text" class="form-control"
aria-label="Text input with radio button">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Inputs Group Checkbox and Radio Buttons end -->
<!-- Inputs Group Sizes -->
<section id="input-group-size">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Groups with different sizes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Add <code>.input-group-{lg/sm}</code> class to <code>.input-group</code> for Large/Small
addon/prepend.</p>
<div class="row">
<div class="col-sm-4 mb-1">
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm">
</div>
</div>
<div class="col-sm-4 mb-1">
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default">
</div>
</div>
<div class="col-sm-4 mb-1">
<div class="input-group input-group-lg">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-lg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Inputs Group Sizes end -->
<!-- Inputs Group with Buttons -->
<section id="input-group-buttons">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Groups with Buttons</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Add <code>&lt;button&gt;</code> before or after
<code>&lt;input&gt;</code> tag
</p>
<div class="row">
<div class="col-md-6 mb-1">
<div class="input-group mb-3">
<button class="btn btn-primary" type="button" id="button-addon1">Button</button>
<input type="text" class="form-control" placeholder=""
aria-label="Example text with button addon"
aria-describedby="button-addon1">
</div>
</div>
<div class="col-md-6 mb-1">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><i
class="bi bi-search"></i></span>
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button"
id="button-addon2">Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Inputs Group with Buttons end -->
<!-- Inputs Group with Dropdown -->
<section id="input-group-dropdown">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Groups with Dropdown</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>Add <code>&lt;button&gt;</code> with <code>.dropdown-toggle</code> class and add
dropdown-menu after it to get input group with dropdown.</p>
<div class="row">
<div class="col-md-6 mb-1">
<div class="input-group mb-3">
<button class="btn btn-primary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input type="text" class="form-control"
aria-label="Text input with dropdown button">
</div>
</div>
<div class="col-md-6 mb-1">
<div class="input-group">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action before</a></li>
<li><a class="dropdown-item" href="#">Another action before</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input type="text" class="form-control"
aria-label="Text input with 2 dropdown buttons">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Inputs Group with Dropdown end -->
<!-- Custom file input start -->
<section id="custom-file-input">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Custom file input</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-1">
<div class="input-group mb-3">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01"><i
class="bi bi-upload"></i></label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>
</div>
</fieldset>
</div>
<div class="col-md-6 mb-1">
<fieldset>
<div class="input-group">
<input type="file" class="form-control" id="inputGroupFile04"
aria-describedby="inputGroupFileAddon04" aria-label="Upload">
<button class="btn btn-primary" type="button"
id="inputGroupFileAddon04">Upload</button>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Custom file input end -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu active">
<li class="submenu-item active">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Input</h3>
<p class="text-subtitle text-muted">Give textual form controls like input upgrade with custom styles,
sizing, focus states, and more.</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Input</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic Inputs</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="basicInput">Basic Input</label>
<input type="text" class="form-control" id="basicInput" placeholder="Enter email">
</div>
<div class="form-group">
<label for="helpInputTop">Input text with help</label>
<small class="text-muted">eg.<i>someone@example.com</i></small>
<input type="text" class="form-control" id="helpInputTop">
</div>
<div class="form-group">
<label for="helperText">With Helper Text</label>
<input type="text" id="helperText" class="form-control" placeholder="Name">
<p><small class="text-muted">Find helper text here for given textbox.</small></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="disabledInput">Disabled Input</label>
<input type="text" class="form-control" id="disabledInput" placeholder="Disabled Text"
disabled>
</div>
<div class="form-group">
<label for="disabledInput">Readonly Input</label>
<input type="text" class="form-control" id="readonlyInput" readonly="readonly"
value="You can't update me :P">
</div>
<div class="form-group">
<label for="disabledInput">Static Text</label>
<p class="form-control-static" id="staticInput">email@mazer.com</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Input Style start -->
<section id="input-style">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Styles</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p>To set rounded border to input box, use <code>.round</code> class and
to set square border to input box, use <code>.sqaure</code> class alongwith
<code>.form-control</code> class.
</p>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="roundText">Rounded Input</label>
<input type="text" id="roundText" class="form-control round"
placeholder="Rounded Input">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="squareText">Square Input</label>
<input type="text" id="squareText" class="form-control square"
placeholder="Square Input">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Input Style end -->
<!-- Horizontal Input start -->
<section id="horizontal-input">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Horizontal Input</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p>To make label in center of form-control, use <code>.col-form-label</code> class with
<code>&lt;label&gt;</code> element. This is default bootstrap class.
</p>
</div>
<div class="col-md-6">
<div class="form-group row align-items-center">
<div class="col-lg-2 col-3">
<label class="col-form-label">First Name</label>
</div>
<div class="col-lg-10 col-9">
<input type="text" id="first-name" class="form-control" name="fname"
placeholder="First Name">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row align-items-center">
<div class="col-lg-2 col-3">
<label class="col-form-label">Last Name</label>
</div>
<div class="col-lg-10 col-9">
<input type="text" id="last-name" class="form-control" name="fname"
placeholder="Last Name">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Horizontal Input end -->
<!-- Basic File Browser start -->
<section id="input-file-browser">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">File Input</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input
example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">Disabled file input example</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Basic File Browser end -->
<!-- Input with Icons start -->
<section id="input-with-icons">
<div class="row match-height">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input with Icons</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p>For Input Box with icon use <code>.position-relative</code> class with
<code>.form-group</code> and use class <code>.has-icon-left</code> or
<code>.has-icon-right</code> class for icon on
left side.
</p>
</div>
<div class="col-sm-6">
<h6>Left Icon</h6>
<div class="form-group position-relative has-icon-left">
<input type="text" class="form-control is-invalid" placeholder="Input with icon left">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<h6>Right Icon</h6>
<div class="form-group position-relative has-icon-right">
<input type="text" class="form-control" placeholder="Icon Right, Default Input">
<div class="form-control-icon">
<i class="bi bi-bookmarks"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Input with Icons end -->
<!-- Input Sizing start -->
<section id="input-sizing">
<div class="row match-height">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Control Sizing Option</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p>For different sizes of Input, Use classes like <code>.form-control-lg</code> &amp;
<code>.form-control-sm</code> for Large, Small input box.
</p>
</div>
<div class="col-sm-4">
<h6>Large</h6>
<input class="form-control form-control-lg" type="text" placeholder="Large Input">
</div>
<div class="col-sm-4">
<h6>Default</h6>
<input class="form-control" type="text" placeholder="Default Input">
</div>
<div class="col-sm-4">
<h6>Small</h6>
<input class="form-control form-control-sm" type="text" placeholder="Small Input">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Input Sizing end -->
<!-- validations start -->
<section id="input-validation">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Validation States</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p>You can indicate invalid and valid form fields with <code>.is-invalid</code> and
<code>.is-valid</code>. Note that <code>.invalid-feedback</code> is also supported
with these classes.
</p>
</div>
<div class="col-sm-6">
<label for="valid-state">Valid State</label>
<input type="text" class="form-control is-valid" id="valid-state" placeholder="Valid"
value="Valid" required>
<div class="valid-feedback">
<i class="bx bx-radio-circle"></i>
This is valid state.
</div>
</div>
<div class="col-sm-6">
<label for="invalid-state">Invalid State</label>
<input type="text" class="form-control is-invalid" id="invalid-state"
placeholder="Invalid" value="Invalid" required>
<div class="invalid-feedback">
<i class="bx bx-radio-circle"></i>
This is invalid state.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- validations end -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item active">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Radio</h3>
<p class="text-subtitle text-muted">Choose one from a list with radio buttons</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Radio</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default Radio</h4>
</div>
<div class="card-body">
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"
checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled"
disabled>
<label class="form-check-label" for="flexRadioDisabled">
Disabled radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled"
id="flexRadioCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled">
Disabled checked radio
</label>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Colors</h4>
</div>
<div class="card-body">
<p>Use class <code>.form-check-{color}</code> with <code>.form-check</code> to change radio
color</p>
<div class="form-check form-check-primary">
<input class="form-check-input" type="radio" name="Primary" id="Primary" checked>
<label class="form-check-label" for="Primary">
Primary
</label>
</div>
<div class="form-check form-check-secondary">
<input class="form-check-input" type="radio" name="Secondary" id="Secondary" checked>
<label class="form-check-label" for="Secondary">
Secondary
</label>
</div>
<div class="form-check form-check-warning">
<input class="form-check-input" type="radio" name="Warning" id="Warning" checked>
<label class="form-check-label" for="Warning">
Warning
</label>
</div>
<div class="form-check form-check-danger">
<input class="form-check-input" type="radio" name="Danger" id="Danger" checked>
<label class="form-check-label" for="Danger">
Danger
</label>
</div>
<div class="form-check form-check-success">
<input class="form-check-input" type="radio" name="Success" id="Success" checked>
<label class="form-check-label" for="Success">
Success
</label>
</div>
<div class="form-check form-check-dark">
<input class="form-check-input" type="radio" name="Dark" id="Dark" checked>
<label class="form-check-label" for="Dark">
Dark
</label>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Switches</h4>
</div>
<div class="card-body">
<p>A switch has the markup of a custom checkbox but uses the <code>.form-switch</code> class to
render a toggle switch. Switches also support the disabled attribute.</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox
input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox
input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox
input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked
disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch
checkbox input</label>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">With Buttons</h4>
</div>
<div class="card-body">
<p>A switch has the markup of a custom checkbox but uses the <code>.form-switch</code> class to
render a toggle switch. Switches also support the disabled attribute.</p>
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined"
autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined"
autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/pages/form-element-select.css">
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item active">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Select</h3>
<p class="text-subtitle text-muted">Customize the native &laquo;select&raquo; with custom CSS that
changes the element’s initial appearance..</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Select</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="bootstrap-select">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Bootstrap Select</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-4">
<h6>Basic Select</h6>
<p>Use <code>.form-select</code> class for basic select control.</p>
<fieldset class="form-group">
<select class="form-select" id="basicSelect">
<option>IT</option>
<option>Blade Runner</option>
<option>Thor Ragnarok</option>
</select>
</fieldset>
</div>
<div class="col-md-6 mb-4">
<h6>Disabled Select</h6>
<p>Use <code>disabled</code> attribute for disabled select control.</p>
<fieldset class="form-group">
<select class="form-select" disabled="disabled" id="disabledSelect">
<option>Green</option>
<option>Red</option>
<option>Blue</option>
</select>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap Select end -->
<!-- Input Group Select start -->
<section class="input-group-select">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Group Select</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-4">
<h6>Basic Select with Input Group</h6>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Input group append</h6>
<div class="input-group mb-3">
<select class="form-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap Select end -->
<!-- Basic choices start -->
<section class="basic-choices">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Choices</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="alert alert-light-primary">
<a href="https://github.com/Choices-js/Choices" target="_blank">Click
here</a> for more information
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Basic Choices</h6>
<p>Use <code>.choices</code> class for basic choices control.</p>
<div class="form-group">
<select class="choices form-select">
<option value="square">Square</option>
<option value="rectangle">Rectangle</option>
<option value="rombo">Rombo</option>
<option value="romboid">Romboid</option>
<option value="trapeze">Trapeze</option>
<option value="traible">Triangle</option>
<option value="polygon">Polygon</option>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Single Select with Label</h6>
<p>Use <code>optgroup</code> attribute for basic choices with Label control.</p>
<div class="form-group">
<select class="choices form-select">
<optgroup label="Figures">
<option value="romboid">Romboid</option>
<option value="trapeze">Trapeze</option>
<option value="triangle">Triangle</option>
<option value="polygon">Polygon</option>
</optgroup>
<optgroup label="Colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Basic choices end -->
<!-- Multiple choices start -->
<section class="multiple-choices">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Multiple choices</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-4">
<h6>Basic Multiple choices</h6>
<p>Use <code>.choices</code> class for basic choices control. Use
<code>multiple="multiple"</code>
attribute for multiple select box.
</p>
<div class="form-group">
<select class="choices form-select" multiple="multiple">
<option value="square">Square</option>
<option value="rectangle" selected>Rectangle</option>
<option value="rombo">Rombo</option>
<option value="romboid">Romboid</option>
<option value="trapeze">Trapeze</option>
<option value="traible" selected>Triangle</option>
<option value="polygon">Polygon</option>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Multiple Select with Label</h6>
<p>Use <code>optgroup</code> attribute for multiple select box with Label control.
</p>
<div class="form-group">
<select class="choices form-select" multiple="multiple">
<optgroup label="Figures">
<option value="romboid">Romboid</option>
<option value="trapeze" selected>Trapeze</option>
<option value="triangle">Triangle</option>
<option value="polygon">Polygon</option>
</optgroup>
<optgroup label="Colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue" selected>Blue</option>
<option value="purple">Purple</option>
</optgroup>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>Multiple Select with Remove Button</h6>
<p>Use <code>.multiple-remove</code> attribute for multiple select box with remove
button.</p>
<div class="form-group">
<select class="choices form-select multiple-remove" multiple="multiple">
<optgroup label="Figures">
<option value="romboid">Romboid</option>
<option value="trapeze" selected>Trapeze</option>
<option value="triangle">Triangle</option>
<option value="polygon">Polygon</option>
</optgroup>
<optgroup label="Colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue" selected>Blue</option>
<option value="purple">Purple</option>
</optgroup>
</select>
</div>
</div>
<div class="col-md-6 mb-4">
<h6>choices with Light Background Options</h6>
<p>Use <code>.select-light-{colorName}</code> class for light background to selected
Options.</p>
<div class="form-group">
<select class="choices form-select select-light-danger" multiple="multiple">
<option value="square">Square</option>
<option value="rectangle" selected>Rectangle</option>
<option value="rombo">Rombo</option>
<option value="romboid">Romboid</option>
<option value="trapeze">Trapeze</option>
<option value="traible" selected>Triangle</option>
<option value="polygon">Polygon</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Multiple choices end -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script src="assets/js/extensions/form-element-select.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu active">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item active">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Textarea</h3>
<p class="text-subtitle text-muted">Multi-line input where you can input a lot of text</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Textarea</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
Default Textarea
</div>
<div class="card-body">
<div class="form-group mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
Floating Labels
</div>
<div class="card-body">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here"
id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
Textarea with Title
</div>
<div class="card-body">
<div class="form-group with-title mb-3">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
<label>Your experience</label>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Layout - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item active ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Form Layout</h3>
<p class="text-subtitle text-muted">Multiple form layouts, you can use</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Form Layout</li>
</ol>
</nav>
</div>
</div>
</div>
<!-- Basic Horizontal form layout section start -->
<section id="basic-horizontal-layouts">
<div class="row match-height">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Horizontal Form</h4>
</div>
<div class="card-content">
<div class="card-body">
<form class="form form-horizontal">
<div class="form-body">
<div class="row">
<div class="col-md-4">
<label>First Name</label>
</div>
<div class="col-md-8 form-group">
<input type="text" id="first-name" class="form-control" name="fname"
placeholder="First Name">
</div>
<div class="col-md-4">
<label>Email</label>
</div>
<div class="col-md-8 form-group">
<input type="email" id="email-id" class="form-control" name="email-id"
placeholder="Email">
</div>
<div class="col-md-4">
<label>Mobile</label>
</div>
<div class="col-md-8 form-group">
<input type="number" id="contact-info" class="form-control" name="contact"
placeholder="Mobile">
</div>
<div class="col-md-4">
<label>Password</label>
</div>
<div class="col-md-8 form-group">
<input type="password" id="password" class="form-control" name="password"
placeholder="Password">
</div>
<div class="col-12 col-md-8 offset-md-4 form-group">
<div class='form-check'>
<div class="checkbox">
<input type="checkbox" id="checkbox1" class='form-check-input'
checked>
<label for="checkbox1">Remember Me</label>
</div>
</div>
</div>
<div class="col-sm-12 d-flex justify-content-end">
<button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
<button type="reset"
class="btn btn-light-secondary me-1 mb-1">Reset</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Horizontal Form with Icons</h4>
</div>
<div class="card-content">
<div class="card-body">
<form class="form form-horizontal">
<div class="form-body">
<div class="row">
<div class="col-md-4">
<label>Name</label>
</div>
<div class="col-md-8">
<div class="form-group has-icon-left">
<div class="position-relative">
<input type="text" class="form-control" placeholder="Name"
id="first-name-icon">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<label>Email</label>
</div>
<div class="col-md-8">
<div class="form-group has-icon-left">
<div class="position-relative">
<input type="email" class="form-control" placeholder="Email"
id="first-name-icon">
<div class="form-control-icon">
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<label>Mobile</label>
</div>
<div class="col-md-8">
<div class="form-group has-icon-left">
<div class="position-relative">
<input type="number" class="form-control" placeholder="Mobile">
<div class="form-control-icon">
<i class="bi bi-phone"></i>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<label>Password</label>
</div>
<div class="col-md-8">
<div class="form-group has-icon-left">
<div class="position-relative">
<input type="password" class="form-control" placeholder="Password">
<div class="form-control-icon">
<i class="bi bi-lock"></i>
</div>
</div>
</div>
</div>
<div class="form-group col-md-8 offset-md-4">
<div class='form-check'>
<div class="checkbox">
<input type="checkbox" id="checkbox2" class='form-check-input'
checked>
<label for="checkbox2">Remember Me</label>
</div>
</div>
</div>
<div class="col-12 d-flex justify-content-end">
<button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
<button type="reset"
class="btn btn-light-secondary me-1 mb-1">Reset</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- // Basic Horizontal form layout section end -->
<!-- Basic Vertical form layout section start -->
<section id="basic-vertical-layouts">
<div class="row match-height">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Vertical Form</h4>
</div>
<div class="card-content">
<div class="card-body">
<form class="form form-vertical">
<div class="form-body">
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="first-name-vertical">First Name</label>
<input type="text" id="first-name-vertical" class="form-control"
name="fname" placeholder="First Name">
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="email-id-vertical">Email</label>
<input type="email" id="email-id-vertical" class="form-control"
name="email-id" placeholder="Email">
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="contact-info-vertical">Mobile</label>
<input type="number" id="contact-info-vertical" class="form-control"
name="contact" placeholder="Mobile">
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="password-vertical">Password</label>
<input type="password" id="password-vertical" class="form-control"
name="contact" placeholder="Password">
</div>
</div>
<div class="col-12">
<div class='form-check'>
<div class="checkbox">
<input type="checkbox" id="checkbox3" class='form-check-input'
checked>
<label for="checkbox3">Remember Me</label>
</div>
</div>
</div>
<div class="col-12 d-flex justify-content-end">
<button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
<button type="reset"
class="btn btn-light-secondary me-1 mb-1">Reset</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Vertical Form with Icons</h4>
</div>
<div class="card-content">
<div class="card-body">
<form class="form form-vertical">
<div class="form-body">
<div class="row">
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">First Name</label>
<div class="position-relative">
<input type="text" class="form-control"
placeholder="Input with icon left" id="first-name-icon">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group has-icon-left">
<label for="email-id-icon">Email</label>
<div class="position-relative">
<input type="text" class="form-control" placeholder="Email"
id="email-id-icon">
<div class="form-control-icon">
<i class="bi bi-envelope"></i>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group has-icon-left">
<label for="mobile-id-icon">Mobile</label>
<div class="position-relative">
<input type="text" class="form-control" placeholder="Mobile"
id="mobile-id-icon">
<div class="form-control-icon">
<i class="bi bi-phone"></i>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group has-icon-left">
<label for="password-id-icon">Password</label>
<div class="position-relative">
<input type="password" class="form-control" placeholder="Password"
id="password-id-icon">
<div class="form-control-icon">
<i class="bi bi-lock"></i>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class='form-check'>
<div class="checkbox mt-2">
<input type="checkbox" id="remember-me-v" class='form-check-input'
checked>
<label for="remember-me-v">Remember Me</label>
</div>
</div>
</div>
<div class="col-12 d-flex justify-content-end">
<button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
<button type="reset"
class="btn btn-light-secondary me-1 mb-1">Reset</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- // Basic Vertical form layout section end -->
<!-- // Basic multiple Column Form section start -->
<section id="multiple-column-form">
<div class="row match-height">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Multiple Column</h4>
</div>
<div class="card-content">
<div class="card-body">
<form class="form">
<div class="row">
<div class="col-md-6 col-12">
<div class="form-group">
<label for="first-name-column">First Name</label>
<input type="text" id="first-name-column" class="form-control"
placeholder="First Name" name="fname-column">
</div>
</div>
<div class="col-md-6 col-12">
<div class="form-group">
<label for="last-name-column">Last Name</label>
<input type="text" id="last-name-column" class="form-control"
placeholder="Last Name" name="lname-column">
</div>
</div>
<div class="col-md-6 col-12">
<div class="form-group">
<label for="city-column">City</label>
<input type="text" id="city-column" class="form-control" placeholder="City"
name="city-column">
</div>
</div>
<div class="col-md-6 col-12">
<div class="form-group">
<label for="country-floating">Country</label>
<input type="text" id="country-floating" class="form-control"
name="country-floating" placeholder="Country">
</div>
</div>
<div class="col-md-6 col-12">
<div class="form-group">
<label for="company-column">Company</label>
<input type="text" id="company-column" class="form-control"
name="company-column" placeholder="Company">
</div>
</div>
<div class="col-md-6 col-12">
<div class="form-group">
<label for="email-id-column">Email</label>
<input type="email" id="email-id-column" class="form-control"
name="email-id-column" placeholder="Email">
</div>
</div>
<div class="form-group col-12">
<div class='form-check'>
<div class="checkbox">
<input type="checkbox" id="checkbox5" class='form-check-input' checked>
<label for="checkbox5">Remember Me</label>
</div>
</div>
</div>
<div class="col-12 d-flex justify-content-end">
<button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
<button type="reset" class="btn btn-light-secondary me-1 mb-1">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- // Basic multiple Column Form section end -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IQG4iCity</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/shared/iconly.css">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.91/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link rel="stylesheet" href="../application/assets/css/cesiumCustom.css">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="../img/iCity.jpg" alt="Logo" srcset=""
style="height: 1.5em;"></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20"
height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2"
opacity=".3"></path>
<g transform="translate(-210 -1)">
<path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
<circle cx="220.5" cy="11.5" r="4"></circle>
<path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2">
</path>
</g>
</g>
</svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark">
<label class="form-check-label"></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path fill="currentColor"
d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z">
</path>
</svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li class="sidebar-item active ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item ">
<a href="sensors.html" class='sidebar-link'>
<i class="bi bi-router"></i>
<span>Utility Sensors</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<h3>iCity 2: IQG4iCity </h3>
<h5>(Buildings, Neighborhoods and Infrastructure) </h5>
</div>
<div class="page-content">
<section class="row">
<div class="col-12 col-lg-9">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4><i class="bi bi-globe2"></i> 3D Viewer</h4>
</div>
<div id="cesiumContainer" style="
height: 500px;
width: 100%;
margin: 0;
padding: 0;
"></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card">
<div class="card-header">
<h4>3D Map Tool</h4>
</div>
<div class="card-content pb-4">
<div class="card-body">
<h6>Utility Network</h6>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="util_nw_line">
<label class="form-check-label" for="util_nw_line">
Utility Network Lines (SSH)
<div class="spinner-border spinner-border-sm" role="status"
id="util_nw_line_loading" style="display: none;">
<span class="visually-hidden">Loading...</span>
</div>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="util_nw_point">
<label class="form-check-label" for="util_nw_point">
Utility Network Stations (SSH)
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="util_nw_Enisyst" checked>
<label class="form-check-label" for="util_nw_Enisyst">
Utility Network Stations (Enisyst)
</label>
</div>
<hr>
<h6>Building Style</h6>
<select class="form-select" id="BuildingStyleSelector">
<option value="AllWhite" selected>Default</option>
<option value="transparent">Transparent</option>
<option value="PVPotential">PV Potential</option>
<option value="PVSpecificYield">PV Specific Yield</option>
</select>
<div class="form-check pt-2">
<input class="form-check-input" type="checkbox" value="" id="shadow_check">
<label class="form-check-label" for="shadow_check">
Building Shadow
</label>
</div>
<hr>
</div>
</div>
</div>
</div>
</section>
<section class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4><i class="bi bi-graph-up"></i> Sensor</h4>
</div>
<div class="card-body">
<div id="attribute-table-area">
<p> Click on the utility network station (Enisyst) on the 3D Map to see sensor data.</p>
</div>
<div id="chart_area"></div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2022 &copy; Joe T.S. HFT Stuttgart</p>
</div>
<!-- <div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div> -->
</div>
</footer>
</div>
</div>
<!-- Joe's Application -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="../application/js/drawchart.js"></script>
<script src="../application/js/utility_point_data.js"></script>
<script src="../application/js/staconnector.js"></script>
<script src="../application/js/cesium_00_Main.js"></script>
<script src="../application/js/pipelo_sta.js"></script>
<script src="../application/js/cesium_mouse_handling.js"></script>
<!-- theme template -->
<script src="assets/js/app.js"></script>
<!-- <script src="assets/js/pages/dashboard.js"></script> -->
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/shared/iconly.css">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item active ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<h3>Profile Statistics</h3>
</div>
<div class="page-content">
<section class="row">
<div class="col-12 col-lg-9">
<div class="row">
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4">
<div class="stats-icon purple">
<i class="iconly-boldShow"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Profile Views</h6>
<h6 class="font-extrabold mb-0">112.000</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4">
<div class="stats-icon blue">
<i class="iconly-boldProfile"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Followers</h6>
<h6 class="font-extrabold mb-0">183.000</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4">
<div class="stats-icon green">
<i class="iconly-boldAdd-User"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Following</h6>
<h6 class="font-extrabold mb-0">80.000</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4">
<div class="stats-icon red">
<i class="iconly-boldBookmark"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Saved Post</h6>
<h6 class="font-extrabold mb-0">112</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Profile Visit</h4>
</div>
<div class="card-body">
<div id="chart-profile-visit"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-xl-4">
<div class="card">
<div class="card-header">
<h4>Profile Visit</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="d-flex align-items-center">
<svg class="bi text-primary" width="32" height="32" fill="blue"
style="width:10px">
<use
xlink:href="assets/images/bootstrap-icons.svg#circle-fill" />
</svg>
<h5 class="mb-0 ms-3">Europe</h5>
</div>
</div>
<div class="col-6">
<h5 class="mb-0">862</h5>
</div>
<div class="col-12">
<div id="chart-europe"></div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="d-flex align-items-center">
<svg class="bi text-success" width="32" height="32" fill="blue"
style="width:10px">
<use
xlink:href="assets/images/bootstrap-icons.svg#circle-fill" />
</svg>
<h5 class="mb-0 ms-3">America</h5>
</div>
</div>
<div class="col-6">
<h5 class="mb-0">375</h5>
</div>
<div class="col-12">
<div id="chart-america"></div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="d-flex align-items-center">
<svg class="bi text-danger" width="32" height="32" fill="blue"
style="width:10px">
<use
xlink:href="assets/images/bootstrap-icons.svg#circle-fill" />
</svg>
<h5 class="mb-0 ms-3">Indonesia</h5>
</div>
</div>
<div class="col-6">
<h5 class="mb-0">1025</h5>
</div>
<div class="col-12">
<div id="chart-indonesia"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-8">
<div class="card">
<div class="card-header">
<h4>Latest Comments</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-lg">
<thead>
<tr>
<th>Name</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-3">
<div class="d-flex align-items-center">
<div class="avatar avatar-md">
<img src="assets/images/faces/5.jpg">
</div>
<p class="font-bold ms-3 mb-0">Si Cantik</p>
</div>
</td>
<td class="col-auto">
<p class=" mb-0">Congratulations on your graduation!</p>
</td>
</tr>
<tr>
<td class="col-3">
<div class="d-flex align-items-center">
<div class="avatar avatar-md">
<img src="assets/images/faces/2.jpg">
</div>
<p class="font-bold ms-3 mb-0">Si Ganteng</p>
</div>
</td>
<td class="col-auto">
<p class=" mb-0">Wow amazing design! Can you make another tutorial for
this design?</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card">
<div class="card-body py-4 px-5">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img src="assets/images/faces/1.jpg" alt="Face 1">
</div>
<div class="ms-3 name">
<h5 class="font-bold">John Duck</h5>
<h6 class="text-muted mb-0">@johnducky</h6>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Recent Messages</h4>
</div>
<div class="card-content pb-4">
<div class="recent-message d-flex px-4 py-3">
<div class="avatar avatar-lg">
<img src="assets/images/faces/4.jpg">
</div>
<div class="name ms-4">
<h5 class="mb-1">Hank Schrader</h5>
<h6 class="text-muted mb-0">@johnducky</h6>
</div>
</div>
<div class="recent-message d-flex px-4 py-3">
<div class="avatar avatar-lg">
<img src="assets/images/faces/5.jpg">
</div>
<div class="name ms-4">
<h5 class="mb-1">Dean Winchester</h5>
<h6 class="text-muted mb-0">@imdean</h6>
</div>
</div>
<div class="recent-message d-flex px-4 py-3">
<div class="avatar avatar-lg">
<img src="assets/images/faces/1.jpg">
</div>
<div class="name ms-4">
<h5 class="mb-1">John Dodol</h5>
<h6 class="text-muted mb-0">@dodoljohn</h6>
</div>
</div>
<div class="px-4">
<button class='btn btn-block btn-xl btn-outline-primary font-bold mt-3'>Start Conversation</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Visitors Profile</h4>
</div>
<div class="card-body">
<div id="chart-visitors-profile"></div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
<script src="assets/js/pages/dashboard.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Default - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="stylesheet" href="assets/css/main/app-dark.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
</head>
<body>
<div id="app">
<div id="sidebar" class="active">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--system-uicons" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2" opacity=".3"></path><g transform="translate(-210 -1)"><path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path><circle cx="220.5" cy="11.5" r="4"></circle><path d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"></path></g></g></svg>
<div class="form-check form-switch fs-6">
<input class="form-check-input me-0" type="checkbox" id="toggle-dark" >
<label class="form-check-label" ></label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"></path></svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li
class="sidebar-item ">
<a href="index.html" class='sidebar-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="component-alert.html">Alert</a>
</li>
<li class="submenu-item ">
<a href="component-badge.html">Badge</a>
</li>
<li class="submenu-item ">
<a href="component-breadcrumb.html">Breadcrumb</a>
</li>
<li class="submenu-item ">
<a href="component-button.html">Button</a>
</li>
<li class="submenu-item ">
<a href="component-card.html">Card</a>
</li>
<li class="submenu-item ">
<a href="component-carousel.html">Carousel</a>
</li>
<li class="submenu-item ">
<a href="component-collapse.html">Collapse</a>
</li>
<li class="submenu-item ">
<a href="component-dropdown.html">Dropdown</a>
</li>
<li class="submenu-item ">
<a href="component-list-group.html">List Group</a>
</li>
<li class="submenu-item ">
<a href="component-modal.html">Modal</a>
</li>
<li class="submenu-item ">
<a href="component-navs.html">Navs</a>
</li>
<li class="submenu-item ">
<a href="component-pagination.html">Pagination</a>
</li>
<li class="submenu-item ">
<a href="component-progress.html">Progress</a>
</li>
<li class="submenu-item ">
<a href="component-spinner.html">Spinner</a>
</li>
<li class="submenu-item ">
<a href="component-tooltip.html">Tooltip</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="extra-component-avatar.html">Avatar</a>
</li>
<li class="submenu-item ">
<a href="extra-component-sweetalert.html">Sweet Alert</a>
</li>
<li class="submenu-item ">
<a href="extra-component-toastify.html">Toastify</a>
</li>
<li class="submenu-item ">
<a href="extra-component-rating.html">Rating</a>
</li>
<li class="submenu-item ">
<a href="extra-component-divider.html">Divider</a>
</li>
</ul>
</li>
<li
class="sidebar-item active has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu active">
<li class="submenu-item active">
<a href="layout-default.html">Default Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-1-column.html">1 Column</a>
</li>
<li class="submenu-item ">
<a href="layout-vertical-navbar.html">Vertical Navbar</a>
</li>
<li class="submenu-item ">
<a href="layout-rtl.html">RTL Layout</a>
</li>
<li class="submenu-item ">
<a href="layout-horizontal.html">Horizontal Menu</a>
</li>
</ul>
</li>
<li class="sidebar-title">Forms &amp; Tables</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-element-input.html">Input</a>
</li>
<li class="submenu-item ">
<a href="form-element-input-group.html">Input Group</a>
</li>
<li class="submenu-item ">
<a href="form-element-select.html">Select</a>
</li>
<li class="submenu-item ">
<a href="form-element-radio.html">Radio</a>
</li>
<li class="submenu-item ">
<a href="form-element-checkbox.html">Checkbox</a>
</li>
<li class="submenu-item ">
<a href="form-element-textarea.html">Textarea</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="form-layout.html" class='sidebar-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="form-editor-quill.html">Quill</a>
</li>
<li class="submenu-item ">
<a href="form-editor-ckeditor.html">CKEditor</a>
</li>
<li class="submenu-item ">
<a href="form-editor-summernote.html">Summernote</a>
</li>
<li class="submenu-item ">
<a href="form-editor-tinymce.html">TinyMCE</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="table.html" class='sidebar-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="table-datatable.html">Datatable</a>
</li>
<li class="submenu-item ">
<a href="table-datatable-jquery.html">Datatable (jQuery)</a>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-widgets-chatbox.html">Chatbox</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-pricing.html">Pricing</a>
</li>
<li class="submenu-item ">
<a href="ui-widgets-todolist.html">To-do List</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-icons-bootstrap-icons.html">Bootstrap Icons </a>
</li>
<li class="submenu-item ">
<a href="ui-icons-fontawesome.html">Fontawesome</a>
</li>
<li class="submenu-item ">
<a href="ui-icons-dripicons.html">Dripicons</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-chart-chartjs.html">ChartJS</a>
</li>
<li class="submenu-item ">
<a href="ui-chart-apexcharts.html">Apexcharts</a>
</li>
</ul>
</li>
<li
class="sidebar-item ">
<a href="ui-file-uploader.html" class='sidebar-link'>
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="ui-map-google-map.html">Google Map</a>
</li>
<li class="submenu-item ">
<a href="ui-map-jsvectormap.html">JS Vector Map</a>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li
class="sidebar-item ">
<a href="application-email.html" class='sidebar-link'>
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-chat.html" class='sidebar-link'>
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-gallery.html" class='sidebar-link'>
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="application-checkout.html" class='sidebar-link'>
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="auth-login.html">Login</a>
</li>
<li class="submenu-item ">
<a href="auth-register.html">Register</a>
</li>
<li class="submenu-item ">
<a href="auth-forgot-password.html">Forgot Password</a>
</li>
</ul>
</li>
<li
class="sidebar-item has-sub">
<a href="#" class='sidebar-link'>
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu ">
<li class="submenu-item ">
<a href="error-403.html">403</a>
</li>
<li class="submenu-item ">
<a href="error-404.html">404</a>
</li>
<li class="submenu-item ">
<a href="error-500.html">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li
class="sidebar-item ">
<a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li
class="sidebar-item ">
<a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Layout Default</h3>
<p class="text-subtitle text-muted">The default layout </p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Layout Default</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default Layout</h4>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, commodi? Ullam quaerat similique iusto
temporibus, vero aliquam praesentium, odit deserunt eaque nihil saepe hic deleniti? Placeat delectus
quibusdam ratione ullam!
</div>
</div>
</section>
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Horizontal - Mazer Admin Dashboard</title>
<link rel="stylesheet" href="assets/css/main/app.css">
<link rel="shortcut icon" href="assets/images/logo/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/logo/favicon.png" type="image/png">
<link rel="stylesheet" href="assets/css/shared/iconly.css">
</head>
<body>
<div id="app">
<div id="main" class="layout-horizontal">
<header class="mb-5">
<div class="header-top">
<div class="container">
<div class="logo">
<a href="index.html"><img src="assets/images/logo/logo.svg" alt="Logo" srcset=""></a>
</div>
<div class="header-top-right">
<div class="dropdown">
<a href="#" class="user-dropdown d-flex dropend" data-bs-toggle="dropdown" aria-expanded="false">
<div class="avatar avatar-md2" >
<img src="assets/images/faces/1.jpg" alt="Avatar">
</div>
<div class="text">
<h6 class="user-dropdown-name">John Ducky</h6>
<p class="user-dropdown-status text-sm text-muted">Member</p>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end shadow-lg" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">My Account</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="auth-login.html">Logout</a></li>
</ul>
</div>
<!-- Burger button responsive -->
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</div>
</div>
</div>
<nav class="main-navbar">
<div class="container">
<ul>
<li
class="menu-item ">
<a href="index.html" class='menu-link'>
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li
class="menu-item has-sub">
<a href="#" class='menu-link'>
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<div
class="submenu ">
<!-- Wrap to submenu-group-wrapper if you want 3-level submenu. Otherwise remove it. -->
<div class="submenu-group-wrapper">
<ul class="submenu-group">
<li
class="submenu-item ">
<a href="component-alert.html"
class='submenu-link'>Alert</a>
</li>
<li
class="submenu-item ">
<a href="component-badge.html"
class='submenu-link'>Badge</a>
</li>
<li
class="submenu-item ">
<a href="component-breadcrumb.html"
class='submenu-link'>Breadcrumb</a>
</li>
<li
class="submenu-item ">
<a href="component-button.html"
class='submenu-link'>Button</a>
</li>
<li
class="submenu-item ">
<a href="component-card.html"
class='submenu-link'>Card</a>
</li>
<li
class="submenu-item ">
<a href="component-carousel.html"
class='submenu-link'>Carousel</a>
</li>
<li
class="submenu-item ">
<a href="component-collapse.html"
class='submenu-link'>Collapse</a>
</li>
<li
class="submenu-item ">
<a href="component-dropdown.html"
class='submenu-link'>Dropdown</a>
</li>
</ul>
<ul class="submenu-group">
<li
class="submenu-item ">
<a href="component-list-group.html"
class='submenu-link'>List Group</a>
</li>
<li
class="submenu-item ">
<a href="component-modal.html"
class='submenu-link'>Modal</a>
</li>
<li
class="submenu-item ">
<a href="component-navs.html"
class='submenu-link'>Navs</a>
</li>
<li
class="submenu-item ">
<a href="component-pagination.html"
class='submenu-link'>Pagination</a>
</li>
<li
class="submenu-item ">
<a href="component-progress.html"
class='submenu-link'>Progress</a>
</li>
<li
class="submenu-item ">
<a href="component-spinner.html"
class='submenu-link'>Spinner</a>
</li>
<li
class="submenu-item ">
<a href="component-tooltip.html"
class='submenu-link'>Tooltip</a>
</li>
<li
class="submenu-item has-sub">
<a href="#"
class='submenu-link'>Extra Components</a>
<!-- 3 Level Submenu -->
<ul class="subsubmenu">
<li class="subsubmenu-item ">
<a href="extra-component-avatar.html" class="subsubmenu-link">Avatar</a>
</li>
<li class="subsubmenu-item ">
<a href="extra-component-sweetalert.html" class="subsubmenu-link">Sweet Alert</a>
</li>
<li class="subsubmenu-item ">
<a href="extra-component-toastify.html" class="subsubmenu-link">Toastify</a>
</li>
<li class="subsubmenu-item ">
<a href="extra-component-rating.html" class="subsubmenu-link">Rating</a>
</li>
<li class="subsubmenu-item ">
<a href="extra-component-divider.html" class="subsubmenu-link">Divider</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li
class="menu-item active has-sub">
<a href="#" class='menu-link'>
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<div
class="submenu ">
<!-- Wrap to submenu-group-wrapper if you want 3-level submenu. Otherwise remove it. -->
<div class="submenu-group-wrapper">
<ul class="submenu-group">
<li
class="submenu-item ">
<a href="layout-default.html"
class='submenu-link'>Default Layout</a>
</li>
<li
class="submenu-item ">
<a href="layout-vertical-1-column.html"
class='submenu-link'>1 Column</a>
</li>
<li
class="submenu-item ">
<a href="layout-vertical-navbar.html"
class='submenu-link'>Vertical Navbar</a>
</li>
<li
class="submenu-item ">
<a href="layout-rtl.html"
class='submenu-link'>RTL Layout</a>
</li>
<li
class="submenu-item active ">
<a href="layout-horizontal.html"
class='submenu-link'>Horizontal Menu</a>
</li>
</div>
</div>
</li>
<li
class="menu-item has-sub">
<a href="#" class='menu-link'>
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Forms</span>
</a>
<div
class="submenu ">
<!-- Wrap to submenu-group-wrapper if you want 3-level submenu. Otherwise remove it. -->
<div class="submenu-group-wrapper">
<ul class="submenu-group">
<li
class="submenu-item has-sub">
<a href="#"
class='submenu-link'>Form Elements</a>
<!-- 3 Level Submenu -->
<ul class="subsubmenu">
<li class="subsubmenu-item ">
<a href="form-element-input.html" class="subsubmenu-link">Input</a>
</li>
<li class="subsubmenu-item ">
<a href="form-element-input-group.html" class="subsubmenu-link">Input Group</a>
</li>
<li class="subsubmenu-item ">
<a href="form-element-select.html" class="subsubmenu-link">Select</a>
</li>
<li class="subsubmenu-item ">
<a href="form-element-radio.html" class="subsubmenu-link">Radio</a>
</li>
<li class="subsubmenu-item ">
<a href="form-element-checkbox.html" class="subsubmenu-link">Checkbox</a>
</li>
<li class="subsubmenu-item ">
<a href="form-element-textarea.html" class="subsubmenu-link">Textarea</a>
</li>
</ul>
</li>
<li
class="submenu-item ">
<a href="form-layout.html"
class='submenu-link'>Form Layout</a>
</li>
<li
class="submenu-item has-sub">
<a href="#"
class='submenu-link'>Form Editor</a>
<!-- 3 Level Submenu -->
<ul class="subsubmenu">
<li class="subsubmenu-item ">
<a href="form-editor-quill.html" class="subsubmenu-link">Quill</a>
</li>
<li class="subsubmenu-item ">
<a href="form-editor-ckeditor.html" class="subsubmenu-link">CKEditor</a>
</li>
<li class="subsubmenu-item ">
<a href="form-editor-summernote.html" class="subsubmenu-link">Summernote</a>
</li>
<li class="subsubmenu-item ">
<a href="form-editor-tinymce.html" class="subsubmenu-link">TinyMCE</a>
</li>
</ul>
</li>
</div>
</div>
</li>
<li
class="menu-item has-sub">
<a href="#" class='menu-link'>
<i class="bi bi-table"></i>
<span>Table</span>
</a>
<div
class="submenu ">
<!-- Wrap to submenu-group-wrapper if you want 3-level submenu. Otherwise remove it. -->
<div class="submenu-group-wrapper">
<ul class="submenu-group">
<li
class="submenu-item ">
<a href="table.html"
class='submenu-link'>Table</a>
</li>
<li
class="submenu-item ">
<a href="table-datatable.html"
class='submenu-link'>Datatable</a>
</li>
<li
class="submenu-item ">
<a href="table-datatable-jquery.html"
class='submenu-link'>Datatable (jQuery)</a>
</li>
</div>
</div>
</li>
<li
class="menu-item has-sub">
<a href="#" class='menu-link'>
<i class="bi bi-plus-square-fill"></i>
<span>Extras</span>
</a>
<div
class="submenu ">
<!-- Wrap to submenu-group-wrapper if you want 3-level submenu. Otherwise remove it. -->
<div class="submenu-group-wrapper">
<ul class="submenu-group">
<li
class="submenu-item has-sub">
<a href="#"
class='submenu-link'>Widgets</a>
<!-- 3 Level Submenu -->
<ul class="subsubmenu">
<li class="subsubmenu-item ">
<a href="ui-widgets-chatbox.html" class="subsubmenu-link">Chatbox</a>
</li>
<li class="subsubmenu-item ">
<a href="ui-widgets-pricing.html" class="subsubmenu-link">Pricing</a>
</li>
<li class="subsubmenu-item ">
<a href="ui-widgets-todolist.html" class="subsubmenu-link">To-do List</a>
</li>
</ul>
</li>
<li
class="submenu-item has-sub">
<a href="#"
class='submenu-link'>Icons</a>
<!-- 3 Level Submenu -->
<ul class="subsubmenu">
<li class="subsubmenu-item ">
<a href="ui-icons-bootstrap-icons.html" class="subsubmenu-link">Bootstrap Icons </a>
</li>
<li class="subsubmenu-item ">
<a href="ui-icons-fontawesome.html" class="subsubmenu-link">Fontawesome</a>
</li>
<li class="subsubmenu-item ">
<a href="ui-icons-dripicons.html" class="subsubmenu-link">Dripicons</a>
</li>
</ul>
</li>
<li
class="submenu-item has-sub">
<a href="#"
class='submenu-link'>Charts</a>
<!-- 3 Level Submenu -->
<ul class="subsubmenu">
<li class="subsubmenu-item ">
<a href="ui-chart-chartjs.html" class="subsubmenu-link">ChartJS</a>
</li>
<li class="subsubmenu-item ">
<a href="ui-chart-apexcharts.html" class="subsubmenu-link">Apexcharts</a>
</li>
</ul>
</li>
</div>
</div>
</li>
<li
class="menu-item has-sub">
<a href="#" class='menu-link'>
<i class="bi bi-file-earmark-fill"></i>
<span>Pages</span>
</a>
<div
class="submenu ">
<!-- Wrap to submenu-group-wrapper if you want 3-level submenu. Otherwise remove it. -->
<div class="submenu-group-wrapper">
<ul class="submenu-group">
<li
class="submenu-item has-sub">
<a href="#"
class='submenu-link'>Authentication</a>
<!-- 3 Level Submenu -->
<ul class="subsubmenu">
<li class="subsubmenu-item ">
<a href="auth-login.html" class="subsubmenu-link">Login</a>
</li>
<li class="subsubmenu-item ">
<a href="auth-register.html" class="subsubmenu-link">Register</a>
</li>
<li class="subsubmenu-item ">
<a href="auth-forgot-password.html" class="subsubmenu-link">Forgot Password</a>
</li>
</ul>
</li>
<li
class="submenu-item has-sub">
<a href="#"
class='submenu-link'>Errors</a>
<!-- 3 Level Submenu -->
<ul class="subsubmenu">
<li class="subsubmenu-item ">
<a href="error-403.html" class="subsubmenu-link">403</a>
</li>
<li class="subsubmenu-item ">
<a href="error-404.html" class="subsubmenu-link">404</a>
</li>
<li class="subsubmenu-item ">
<a href="error-500.html" class="subsubmenu-link">500</a>
</li>
</ul>
</li>
<li
class="submenu-item ">
<a href="ui-file-uploader.html"
class='submenu-link'>File Uploader</a>
</li>
<li
class="submenu-item has-sub">
<a href="#"
class='submenu-link'>Maps</a>
<!-- 3 Level Submenu -->
<ul class="subsubmenu">
<li class="subsubmenu-item ">
<a href="ui-map-google-map.html" class="subsubmenu-link">Google Map</a>
</li>
<li class="subsubmenu-item ">
<a href="ui-map-jsvectormap.html" class="subsubmenu-link">JS Vector Map</a>
</li>
</ul>
</li>
<li
class="submenu-item ">
<a href="application-email.html"
class='submenu-link'>Email Application</a>
</li>
<li
class="submenu-item ">
<a href="application-chat.html"
class='submenu-link'>Chat Application</a>
</li>
<li
class="submenu-item ">
<a href="application-gallery.html"
class='submenu-link'>Photo Gallery</a>
</li>
<li
class="submenu-item ">
<a href="application-checkout.html"
class='submenu-link'>Checkout Page</a>
</li>
</ul>
</div>
</div>
</li>
<li
class="menu-item has-sub">
<a href="#" class='menu-link'>
<i class="bi bi-life-preserver"></i>
<span>Support</span>
</a>
<div
class="submenu ">
<!-- Wrap to submenu-group-wrapper if you want 3-level submenu. Otherwise remove it. -->
<div class="submenu-group-wrapper">
<ul class="submenu-group">
<li
class="submenu-item ">
<a href="https://zuramai.github.io/mazer/docs"
class='submenu-link'>Documentation</a>
</li>
<li
class="submenu-item ">
<a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md"
class='submenu-link'>Contribute</a>
</li>
<li
class="submenu-item ">
<a href="https://github.com/zuramai/mazer#donation"
class='submenu-link'>Donate</a>
</li>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
<div class="content-wrapper container">
<div class="page-heading">
<h3>Horizontal Layout</h3>
</div>
<div class="page-content">
<section class="row">
<div class="col-12 col-lg-9">
<div class="row">
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4">
<div class="stats-icon purple">
<i class="iconly-boldShow"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Profile Views</h6>
<h6 class="font-extrabold mb-0">112.000</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4">
<div class="stats-icon blue">
<i class="iconly-boldProfile"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Followers</h6>
<h6 class="font-extrabold mb-0">183.000</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4">
<div class="stats-icon green">
<i class="iconly-boldAdd-User"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Following</h6>
<h6 class="font-extrabold mb-0">80.000</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card">
<div class="card-body px-3 py-4-5">
<div class="row">
<div class="col-md-4">
<div class="stats-icon red">
<i class="iconly-boldBookmark"></i>
</div>
</div>
<div class="col-md-8">
<h6 class="text-muted font-semibold">Saved Post</h6>
<h6 class="font-extrabold mb-0">112</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>Profile Visit</h4>
</div>
<div class="card-body">
<div id="chart-profile-visit"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-xl-4">
<div class="card">
<div class="card-header">
<h4>Profile Visit</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="d-flex align-items-center">
<svg class="bi text-primary" width="32" height="32" fill="blue"
style="width:10px">
<use
xlink:href="assets/images/bootstrap-icons.svg#circle-fill" />
</svg>
<h5 class="mb-0 ms-3">Europe</h5>
</div>
</div>
<div class="col-6">
<h5 class="mb-0">862</h5>
</div>
<div class="col-12">
<div id="chart-europe"></div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="d-flex align-items-center">
<svg class="bi text-success" width="32" height="32" fill="blue"
style="width:10px">
<use
xlink:href="assets/images/bootstrap-icons.svg#circle-fill" />
</svg>
<h5 class="mb-0 ms-3">America</h5>
</div>
</div>
<div class="col-6">
<h5 class="mb-0">375</h5>
</div>
<div class="col-12">
<div id="chart-america"></div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="d-flex align-items-center">
<svg class="bi text-danger" width="32" height="32" fill="blue"
style="width:10px">
<use
xlink:href="assets/images/bootstrap-icons.svg#circle-fill" />
</svg>
<h5 class="mb-0 ms-3">Indonesia</h5>
</div>
</div>
<div class="col-6">
<h5 class="mb-0">1025</h5>
</div>
<div class="col-12">
<div id="chart-indonesia"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-8">
<div class="card">
<div class="card-header">
<h4>Latest Comments</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-lg">
<thead>
<tr>
<th>Name</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-3">
<div class="d-flex align-items-center">
<div class="avatar avatar-md">
<img src="assets/images/faces/5.jpg">
</div>
<p class="font-bold ms-3 mb-0">Cantik</p>
</div>
</td>
<td class="col-auto">
<p class=" mb-0">Congratulations on your graduation!</p>
</td>
</tr>
<tr>
<td class="col-3">
<div class="d-flex align-items-center">
<div class="avatar avatar-md">
<img src="assets/images/faces/2.jpg">
</div>
<p class="font-bold ms-3 mb-0">Ganteng</p>
</div>
</td>
<td class="col-auto">
<p class=" mb-0">Wow amazing design! Can you make another tutorial for
this design?</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card">
<div class="card-body py-4 px-5">
<div class="d-flex align-items-center">
<div class="avatar avatar-xl">
<img src="assets/images/faces/1.jpg" alt="Face 1">
</div>
<div class="ms-3 name">
<h5 class="font-bold">John Duck</h5>
<h6 class="text-muted mb-0">@johnducky</h6>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Recent Messages</h4>
</div>
<div class="card-content pb-4">
<div class="recent-message d-flex px-4 py-3">
<div class="avatar avatar-lg">
<img src="assets/images/faces/4.jpg">
</div>
<div class="name ms-4">
<h5 class="mb-1">Hank Schrader</h5>
<h6 class="text-muted mb-0">@johnducky</h6>
</div>
</div>
<div class="recent-message d-flex px-4 py-3">
<div class="avatar avatar-lg">
<img src="assets/images/faces/5.jpg">
</div>
<div class="name ms-4">
<h5 class="mb-1">Dean Winchester</h5>
<h6 class="text-muted mb-0">@imdean</h6>
</div>
</div>
<div class="recent-message d-flex px-4 py-3">
<div class="avatar avatar-lg">
<img src="assets/images/faces/1.jpg">
</div>
<div class="name ms-4">
<h5 class="mb-1">John Dodol</h5>
<h6 class="text-muted mb-0">@dodoljohn</h6>
</div>
</div>
<div class="px-4">
<button class='btn btn-block btn-xl btn-light-primary font-bold mt-3'>Start
Conversation</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4>Visitors Profile</h4>
</div>
<div class="card-body">
<div id="chart-visitors-profile"></div>
</div>
</div>
</div>
</section>
</div>
</div>
<footer>
<div class="container">
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2021 &copy; Mazer</p>
</div>
<div class="float-end">
<p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
href="https://saugi.me">Saugi</a></p>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/js/pages/dashboard.js"></script>
<script src="assets/js/pages/horizontal-layout.js"></script>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment