<!-- meta tags and other links -->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wowdash - Bootstrap 5 Admin Dashboard HTML Template</title>
<link rel="icon" type="image/png" href="assets/images/favicon.png" sizes="16x16">
<!-- All library css -->
<link rel="stylesheet" href="assets/css/remixicon.css">
<link rel="stylesheet" href="assets/css/plugins.css">
<link rel="stylesheet" href="assets/css/prism.css">
<!-- main css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<aside class="sidebar">
<div>
<a href="index.html" class="sidebar-logo">
<img src="assets/images/logo.png" alt="site logo" class="light-logo">
<img src="assets/images/logo-light.png" alt="site logo" class="dark-logo">
<img src="assets/images/logo-icon.png" alt="site logo" class="logo-icon">
</a>
</div>
<div class="sidebar-menu-area">
<ul class="sidebar-menu" id="sidebar-menu">
<li class="sidebar-menu-group-title">Getting Started</li>
<li>
<a href="index.html">
<iconify-icon icon="solar:document-add-outline" class="menu-icon"></iconify-icon>
<span>Introduction</span>
</a>
</li>
<li>
<a href="started.html">
<iconify-icon icon="hugeicons:start-up-02" class="menu-icon"></iconify-icon>
<span>Gettings Started</span>
</a>
</li>
<li class="sidebar-menu-group-title">Layout Structure</li>
<li>
<a href="html.html">
<iconify-icon icon="icomoon-free:html-five2" class="menu-icon"></iconify-icon>
<span>HTML Structure</span>
</a>
</li>
<li>
<a href="dark.html">
<iconify-icon icon="line-md:moon" class="menu-icon"></iconify-icon>
<span>Dark Layout</span>
</a>
</li>
<li>
<a href="rtl.html">
<iconify-icon icon="mdi:rtl" class="menu-icon"></iconify-icon>
<span>RTL Layout</span>
</a>
</li>
<li class="sidebar-menu-group-title">Folder Structure</li>
<li>
<a href="css.html">
<iconify-icon icon="bi:filetype-css" class="menu-icon"></iconify-icon>
<span>CSS</span>
</a>
</li>
<li>
<a href="scss.html">
<iconify-icon icon="bi:filetype-scss" class="menu-icon"></iconify-icon>
<span>SCSS</span>
</a>
</li>
<li>
<a href="js.html">
<iconify-icon icon="fluent:document-javascript-24-regular" class="menu-icon"></iconify-icon>
<span>JavaScript</span>
</a>
</li>
<li class="sidebar-menu-group-title">Components</li>
<li>
<a href="basic-components.html">
<iconify-icon icon="cil:list" class="menu-icon"></iconify-icon>
<span>Basic Components</span>
</a>
</li>
<li>
<a href="advance-components.html">
<iconify-icon icon="tdesign:tree-list" class="menu-icon"></iconify-icon>
<span>Advance Components</span>
</a>
</li>
<li>
<a href="forms.html">
<iconify-icon icon="fluent:form-48-regular" class="menu-icon"></iconify-icon>
<span>Forms</span>
</a>
</li>
<li>
<a href="tables.html">
<iconify-icon icon="mynaui:table" class="menu-icon"></iconify-icon>
<span>Tables</span>
</a>
</li>
</ul>
</div>
</aside>
<main class="dashboard-main">
<div class="navbar-header">
<div class="row align-items-center justify-content-between">
<div class="col-auto">
<h6 class="text-xl mb-0">Documentation</h6>
</div>
<div class="col-auto">
<div class="d-flex flex-wrap align-items-center gap-3">
<button type="button" data-theme-toggle
class="w-40-px h-40-px bg-neutral-200 rounded-circle d-flex justify-content-center align-items-center"></button>
</div>
</div>
</div>
</div>
<div class="dashboard-main-body">
<div class="row gy-4">
<div class="col-xl-8">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Advance Components</h5>
</div>
<div class="card-body" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true">
<h6 class="text-xl" id="radio">Radio</h6>
<div class="d-flex align-items-center flex-wrap gap-28 mb-24">
<div class="form-switch switch-primary d-flex align-items-center gap-3">
<input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1">Switch Active</label>
</div>
<div class="form-switch switch-purple d-flex align-items-center gap-3">
<input class="form-check-input" type="checkbox" role="switch" id="switch2" checked>
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch2">Switch Active</label>
</div>
<div class="form-switch switch-success d-flex align-items-center gap-3">
<input class="form-check-input" type="checkbox" role="switch" id="switch3" checked>
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch3">Switch Active</label>
</div>
<div class="form-switch switch-warning d-flex align-items-center gap-3">
<input class="form-check-input" type="checkbox" role="switch" id="switch4" checked>
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch4">Switch Active</label>
</div>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#radioCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="radioCode">
<div class="form-switch switch-primary d-flex align-items-center gap-3">
<input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1">Switch Active</label>
</div>
<div class="form-switch switch-purple d-flex align-items-center gap-3">
<input class="form-check-input" type="checkbox" role="switch" id="switch2" checked>
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch2">Switch Active</label>
</div>
<div class="form-switch switch-success d-flex align-items-center gap-3">
<input class="form-check-input" type="checkbox" role="switch" id="switch3" checked>
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch3">Switch Active</label>
</div>
<div class="form-switch switch-warning d-flex align-items-center gap-3">
<input class="form-check-input" type="checkbox" role="switch" id="switch4" checked>
<label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch4">Switch Active</label>
</div>
</code></pre>
</div>
<h6 class="text-xl mt-5" id="carousel">Carousel With Arrows</h6>
<div class="card-body p-0 arrow-carousel">
<div class="gradient-overlay bottom-0 start-0 h-100">
<img src="assets/images/carousel/carousel-img2.png" alt="" class="w-100 h-100 object-fit-cover">
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
<h5 class="card-title text-white text-lg mb-6">Carousel Slide One</h5>
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
</div>
</div>
<div class="gradient-overlay bottom-0 start-0 h-100">
<img src="assets/images/carousel/carousel-img4.png" alt="" class="w-100 h-100 object-fit-cover">
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Two</h5>
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
</div>
</div>
<div class="gradient-overlay bottom-0 start-0 h-100">
<img src="assets/images/carousel/carousel-img3.png" alt="" class="w-100 h-100 object-fit-cover">
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Three</h5>
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
</div>
</div>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#carouselCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="carouselCode">
<div class="arrow-carousel">
<div class="gradient-overlay bottom-0 start-0 h-100">
<img src="assets/images/carousel/carousel-img2.png" alt="" class="w-100 h-100 object-fit-cover">
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
<h5 class="card-title text-white text-lg mb-6">Carousel Slide One</h5>
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
</div>
</div>
<div class="gradient-overlay bottom-0 start-0 h-100">
<img src="assets/images/carousel/carousel-img4.png" alt="" class="w-100 h-100 object-fit-cover">
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Two</h5>
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
</div>
</div>
<div class="gradient-overlay bottom-0 start-0 h-100">
<img src="assets/images/carousel/carousel-img3.png" alt="" class="w-100 h-100 object-fit-cover">
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Three</h5>
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
</div>
</div>
</div>
</code></pre>
</div>
<p>JavaScript</p>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#sliderJsCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-javascript" id="sliderJsCode">
// Arrow Carousel
$('.arrow-carousel').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: false,
infinite: true,
autoplay: false,
autoplaySpeed: 2000,
speed: 600,
prevArrow: '<button type="button" class="slick-prev"><iconify-icon icon="ic:outline-keyboard-arrow-left" class="menu-icon"></iconify-icon></button>',
nextArrow: '<button type="button" class="slick-next"><iconify-icon icon="ic:outline-keyboard-arrow-right" class="menu-icon"></iconify-icon></button>',
});
</code></pre>
</div>
<h6 class="text-xl mt-5" id="video">Videos</h6>
<div class="position-relative">
<img src="assets/images/videos/video-img1.png" class="w-100 h-100 object-fit-cover radius-8" alt="">
<a href="https://www.youtube.com/watch?v=Vr9WoWXkKeE" class="magnific-video bordered-shadow w-56-px h-56-px bg-white rounded-circle d-flex justify-content-center align-items-center position-absolute start-50 top-50 translate-middle z-1">
<iconify-icon icon="ion:play" class="text-primary-600 text-xxl"></iconify-icon>
</a>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#videoHtmlCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="videoHtmlCode">
<div class="position-relative">
<img src="assets/images/videos/video-img1.png" class="w-100 h-100 object-fit-cover radius-8" alt="">
<a href="https://www.youtube.com/watch?v=Vr9WoWXkKeE" class="magnific-video bordered-shadow w-56-px h-56-px bg-white rounded-circle d-flex justify-content-center align-items-center position-absolute start-50 top-50 translate-middle z-1">
<iconify-icon icon="ion:play" class="text-primary-600 text-xxl"></iconify-icon>
</a>
</div>
</code></pre>
</div>
<p>JavaScript</p>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#videoJsCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-javascript" id="videoJsCode">
// ========================= magnific Popup Icon Js Start =====================
$('.magnific-video').magnificPopup({
type:'iframe'
});
// ========================= magnific Popup Icon Js End =====================
</code></pre>
</div>
<h6 class="text-xl mt-5" id="image">Image Upload</h6>
<div class="upload-image-wrapper d-flex align-items-center gap-3 flex-wrap">
<div class="uploaded-imgs-container d-flex gap-3 flex-wrap"></div>
<label class="upload-file-multiple h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1" for="upload-file-multiple">
<iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
<span class="fw-semibold text-secondary-light">Upload</span>
<input id="upload-file-multiple" type="file" hidden multiple/>
</label>
</div>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#imageUploadCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-html" id="imageUploadCode">
<div class="upload-image-wrapper d-flex align-items-center gap-3 flex-wrap">
<div class="uploaded-imgs-container d-flex gap-3 flex-wrap"></div>
<label class="upload-file-multiple h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1" for="upload-file-multiple">
<iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
<span class="fw-semibold text-secondary-light">Upload</span>
<input id="upload-file-multiple" type="file" hidden multiple/>
</label>
</div>
</code></pre>
</div>
<p>JavaScript</p>
<div class="code-area">
<button class="copy-code-btn btn-clipboard" data-clipboard-target="#imageUploadJsCode" title="Copy">
<i class="ri-file-copy-line"></i> Copy
</button>
<pre><code class="language-javascript" id="imageUploadJsCode">
// ================================================ Upload Multiple image js Start here ================================================
const fileInputMultiple = document.getElementById("upload-file-multiple");
const uploadedImgsContainer = document.querySelector(".uploaded-imgs-container");
fileInputMultiple.addEventListener("change", (e) => {
const files = e.target.files;
Array.from(files).forEach(file => {
const src = URL.createObjectURL(file);
const imgContainer = document.createElement('div');
imgContainer.classList.add('position-relative', 'h-120-px', 'w-120-px', 'border', 'input-form-light', 'radius-8', 'overflow-hidden', 'border-dashed', 'bg-neutral-50');
const removeButton = document.createElement('button');
removeButton.type = 'button';
removeButton.classList.add('uploaded-img__remove', 'position-absolute', 'top-0', 'end-0', 'z-1', 'text-2xxl', 'line-height-1', 'me-8', 'mt-8', 'd-flex');
removeButton.innerHTML = '<iconify-icon icon="radix-icons:cross-2" class="text-xl text-danger-600"></iconify-icon>';
const imagePreview = document.createElement('img');
imagePreview.classList.add('w-100', 'h-100', 'object-fit-cover');
imagePreview.src = src;
imgContainer.appendChild(removeButton);
imgContainer.appendChild(imagePreview);
uploadedImgsContainer.appendChild(imgContainer);
removeButton.addEventListener('click', () => {
URL.revokeObjectURL(src);
imgContainer.remove();
});
});
// Clear the file input so the same file(s) can be uploaded again if needed
fileInputMultiple.value = '';
});
// ================================================ Upload Multiple image js End here ================================================
</code></pre>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div id="list-example" class="list-group code-sidebar-menu">
<a href="#radio">Radio</a>
<a href="#carousel">Carousel</a>
<a href="#video">Videos</a>
<a href="#image">Image Upload</a>
</div>
</div>
</div>
</div>
</main>
<!-- All library -->
<script src="assets/js/plugins.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/clipboard.min.js"></script>
<!-- main js -->
<script src="assets/js/app.js"></script>
<script>
$(document).ready(function () {
var clipboard = new ClipboardJS('.btn-clipboard');
clipboard.on('success', function (e) {
e.querySelector();
e.clearSelection();
});
clipboard.on('error', function (e) {
});
});
// Arrow Carousel
$('.arrow-carousel').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: false,
infinite: true,
autoplay: false,
autoplaySpeed: 2000,
speed: 600,
prevArrow: '<button type="button" class="slick-prev"><iconify-icon icon="ic:outline-keyboard-arrow-left" class="menu-icon"></iconify-icon></button>',
nextArrow: '<button type="button" class="slick-next"><iconify-icon icon="ic:outline-keyboard-arrow-right" class="menu-icon"></iconify-icon></button>',
});
// ========================= magnific Popup Icon Js Start =====================
$('.magnific-video').magnificPopup({
type:'iframe'
});
// ========================= magnific Popup Icon Js End =====================
// ================================================ Upload Multiple image js Start here ================================================
const fileInputMultiple = document.getElementById("upload-file-multiple");
const uploadedImgsContainer = document.querySelector(".uploaded-imgs-container");
fileInputMultiple.addEventListener("change", (e) => {
const files = e.target.files;
Array.from(files).forEach(file => {
const src = URL.createObjectURL(file);
const imgContainer = document.createElement('div');
imgContainer.classList.add('position-relative', 'h-120-px', 'w-120-px', 'border', 'input-form-light', 'radius-8', 'overflow-hidden', 'border-dashed', 'bg-neutral-50');
const removeButton = document.createElement('button');
removeButton.type = 'button';
removeButton.classList.add('uploaded-img__remove', 'position-absolute', 'top-0', 'end-0', 'z-1', 'text-2xxl', 'line-height-1', 'me-8', 'mt-8', 'd-flex');
removeButton.innerHTML = '<iconify-icon icon="radix-icons:cross-2" class="text-xl text-danger-600"></iconify-icon>';
const imagePreview = document.createElement('img');
imagePreview.classList.add('w-100', 'h-100', 'object-fit-cover');
imagePreview.src = src;
imgContainer.appendChild(removeButton);
imgContainer.appendChild(imagePreview);
uploadedImgsContainer.appendChild(imgContainer);
removeButton.addEventListener('click', () => {
URL.revokeObjectURL(src);
imgContainer.remove();
});
});
// Clear the file input so the same file(s) can be uploaded again if needed
fileInputMultiple.value = '';
});
// ================================================ Upload Multiple image js End here ================================================
</script>
</body>
</html>