Your IP : 18.117.119.34
<!DOCTYPE html>
<html>
<head>
<!-- Meta data -->
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Zanex – Bootstrap5 Admin & Dashboard Template">
<meta name="author" content="Spruko Technologies Private Limited">
<meta name="keywords" content="admin template,admin dashboard,bootstrap 5 admin template,html template,html admin template,admin,bootstrap 5 html template,html dashboard,dashboard,crm,admin pane,admin dashboard template,html responsive template,crm admin template,dashboard template.">
<!-- Title -->
<title>Zanex – Bootstrap5 Admin & Dashboard Template</title>
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="assets/plugins/iconfonts/icons.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/main.css" rel="stylesheet">
<!---Internal Prism css-->
<link href="assets/plugins/prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism-treeview.css" rel="stylesheet">
<link href="assets/css/themes/all-themes.css" rel="stylesheet" />
</head>
<body class="theme-blush">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-blush">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<!-- #END# Page Loader -->
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->
<!-- Sidebarover lay -->
<div class="sidebar-overlay" data-toggle="sidebar"></div>
<!-- #Top Bar -->
<section>
<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
<!-- User Info -->
<div class="admin-image"> <img src="assets/images/logo-3.png" alt="" > </div>
<!-- Menu -->
<div class="menu main-sidebar">
<ul class="list" id="documenter_nav">
<li class="nav-item"><a class="nav-link" href="index.html"><i class="fe fe-airplay sidemenu-icon"></i><span class="sidemenu-label">Introduction</span></a></li>
<li class="nav-item"><a class="nav-link" href="folder-structure.html"><i class="fe fe-folder sidemenu-icon"></i><span class="sidemenu-label">Folder structure</span></a></li>
<li class="nav-item"><a class="nav-link" href="layouts.html"><i class="fe fe-layout sidemenu-icon"></i><span class="sidemenu-label">Layouts</span></a></li>
<li class="nav-item"><a class="nav-link" href="faqs.html"><i class="fe fe-help-circle sidemenu-icon"></i><span class="sidemenu-label text-primary fw-bold mr-5">Faqs </span><i class="fa fa-star float-right sidemenu-icon-2 text-warning"></i></a></li>
<li class="nav-item"><a class="nav-link" href="switcher.html"><i class="fe fe-grid sidemenu-icon"></i><span class="sidemenu-label">Switcher</span></a></li>
<li class="nav-item"><a class="nav-link" href="gulp.html"><i class="fe fe-settings sidemenu-icon"></i><span class="sidemenu-label">Gulp</span></a></li>
<li class="nav-item"><a class="nav-link" href="html-structure.html"><i class="fe fe-codepen sidemenu-icon"></i><span class="sidemenu-label">html-structure</span></a></li>
<li class="nav-item"><a class="nav-link" href="apps.html"><i class="fe fe-briefcase sidemenu-icon"></i><span class="sidemenu-label">Apps</span></a></li>
<li class="nav-item"><a class="nav-link" href="elements.html"><i class="fe fe-aperture sidemenu-icon"></i><span class="sidemenu-label">Elements</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-elements.html"><i class="fe fe-file-text sidemenu-icon"></i><span class="sidemenu-label">Form-elements</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-advanced.html"><i class="fe fe-cpu sidemenu-icon"></i><span class="sidemenu-label">Form-advanced</span></a></li>
<li class="nav-item"><a class="nav-link" href="treeview.html"><i class="fe fe-lock sidemenu-icon"></i><span class="sidemenu-label">Treeview</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-wizard.html"><i class="fe fe-hard-drive sidemenu-icon"></i><span class="sidemenu-label">Form-wizard</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-editor.html"><i class="fe fe-edit sidemenu-icon"></i><span class="sidemenu-label">Form-editor</span></a></li>
<li class="nav-item"><a class="nav-link" href="form-validation.html"><i class="fe fe-file-plus sidemenu-icon"></i><span class="sidemenu-label">Form-validation</span></a></li>
<li class="nav-item"><a class="nav-link" href="maps.html"><i class="fe fe-map-pin sidemenu-icon"></i><span class="sidemenu-label">Maps</span></a></li>
<li class="nav-item"><a class="nav-link" href="charts.html"><i class="fe fe-pie-chart sidemenu-icon"></i><span class="sidemenu-label">Charts</span></a></li>
<li class="nav-item"><a class="nav-link" href="tables.html"><i class="fe fe-database sidemenu-icon"></i><span class="sidemenu-label">Tables</span></a></li>
<li class="nav-item"><a class="nav-link" href="icons.html"><i class="fe fe-anchor sidemenu-icon"></i><span class="sidemenu-label">Icons</span></a></li>
<li class="nav-item"><a class="nav-link" href="others.html"><i class="fe fe-link sidemenu-icon"></i><span class="sidemenu-label">Others</span></a></li>
<li class="nav-item"><a class="nav-link" href="plugins.html"><i class="fe fe-droplet sidemenu-icon"></i><span class="sidemenu-label">Plugins</span></a></li>
<li class="nav-item"><a class="nav-link" href="theme.html"><i class="fe fe-layers sidemenu-icon"></i><span class="sidemenu-label">Theme Style</span></a></li>
</ul>
</div>
<!-- #Menu -->
</aside>
<!-- #END# Left Sidebar -->
</section>
<section class="content home">
<div class="container-fluid">
<div class="block-header mt-3 ml-3">
<h1>Zanex – Bootstrap 5 Admin & Dashboard HTML Template</h1>
</div>
<div class="">
<div class="alert alert-primary-transparent">
<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Note:-</strong>
<hr class="message-inner-separator">
<p>Please refer <b class="text-primary fs-6">Faq's </b>page in documentation itself for queries like customization like color ,rtl ,dark style..etc.</p>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-12 col-lg-12 col-xl-9">
<div class="card" id="Accordions">
<div class="body">
<h5 class="mt-0">Accordions</h5>
<p>Displays collapsible content panels for presenting information in a limited amount of space. General accordion HTML structure in Zanex template.</p>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#accordion-1" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#accordion-3" class="nav-link" data-toggle="tab">SCSS</a></li>
<li class="nav-item"><a href="#accordion-2" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="accordion-1">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="accordion-3">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<!-- ACCORDION SCSS -->
assets/scss/plugins/_accordion.scss
</script>
</code>
</pre>
</figure>
</div>
<div class="tab-pane fade show" id="accordion-2" role="tabpanel">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- ACCORDION JS -->
<script src="../assets/plugins/accordion/accordion.min.js"></script>
<script src="../assets/plugins/accordion/accordion.js"></script>
</code>
</pre>
</figure>
</div>
<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
</div>
</div>
</div>
</div>
</div>
<div class="card" id="modal-example">
<div class="body">
<h5 class="mt-0">Modals</h5>
<p>General Modals HTML structure in Zanex template.</p>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#flotchart" class="nav-link active" data-toggle="tab">HTML</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="flotchart">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<a class="btn btn-primary" data-bs-target="#modaldemo1" data-bs-toggle="modal" href="">View Live Demo</a>
<!-- BASIC MODAL -->
<div class="modal fade" id="modaldemo1">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-demo">
<div class="modal-header">
<h6 class="modal-title">Message Preview</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<h6>Why We Use Electoral College, Not Popular Vote</h6>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable English.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save changes</button> <button class="btn btn-light" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card" id="sweetalert-example">
<div class="body">
<h5 class="mt-0">Sweet Alert</h5>
<p>General Sweet Alert HTML structure in Zanex template.</p>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#sweetalert" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#sweetalert1" class="nav-link" data-toggle="tab">SCSS</a></li>
<li class="nav-item"><a href="#sweetalert2" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="sweetalert">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<input type='button' class="btn btn-success mt-2" value='success alert' id='click'>
<input type='button' class="btn btn-warning mt-2" value='Warning alert' id='click1'>
<input type='button' class="btn btn-danger mt-2" value='Danger alert' id='click2'>
<input type='button' class="btn btn-info mt-2" value='Info alert' id='click3'>
<div class="card-body">
<div class="form-group">
<label>Title</label>
<input type='text' class="form-control" placeholder='Title text' id='title'>
</div>
<div class="form-group">
<label>Message</label>
<input type='text' class="form-control" placeholder='Your message' id='message'>
</div>
<input type='button' class="btn btn-primary mt-2" value='Simple alert' id='but1'>
<input type='button' class="btn btn-secondary mt-2" value='Alert with title' id='but2'>
<input type='button' class="btn btn-info mt-2" value='Alert with image' id='but3'>
<input type='button' class="btn btn-warning mt-2" value='With timer' id='but4'>
</div>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="sweetalert1">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<!--SWEET ALERT SCSS-->
assets/scss/plugins/_sweetalert.scss
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="sweetalert2">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- SWEET-ALERT JS -->
<script src="../assets/plugins/sweet-alert/sweetalert.min.js"></script>
<script src="../assets/js/sweet-alert.js"></script>
</code>
</pre>
</figure>
</div>
<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
</div>
</div>
</div>
<table class="table table-bordered mt-4 bg-primary-transparent">
<thead>
<tr>
<th>Type</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Plugin Link</strong></td>
<td><a href="https://lipis.github.io/bootstrap-sweetalert/" target="_blank">bootstrap-sweetalert/</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" id="rating-example">
<div class="body">
<h5 class="mt-0">Rating</h5>
<p>General Rating HTML structure in Zanex template.</p>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#rating" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#rating1" class="nav-link" data-toggle="tab">SCSS</a></li>
<li class="nav-item"><a href="#rating2" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="rating">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<div class="my-rating"></div>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="rating1">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<!-- ratings-2 SCSS -->
assets/scss/plugins/_star-rating-svg.scss"
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="rating2">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- Star Rating-1 Js -->
<script src="../assets/plugins/ratings-2/jquery.star-rating.js"></script>
<script src="../assets/plugins/ratings-2/star-rating.js"></script>
</code>
</pre>
</figure>
</div>
<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
</div>
</div>
</div>
<table class="table table-bordered bg-primary-transparent mt-4">
<thead>
<tr>
<th>Type</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Plugin Link</strong></td>
<td><a href="https://github.com/nashio/star-rating-svg/" target="_blank">star-rating-svg</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" id="rating-example1">
<div class="body">
<h5 class="mt-0">Rating style 2</h5>
<p>General Rating HTML structure in Zanex template.</p>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#rating3" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#rating5" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="rating3">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<div class="rating-stars block" id="rating-1" data-stars="2">
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="rating5">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- Star Rating Js -->
<script src="../assets/plugins/rating/jquery-rate-picker.js"></script>
<script src="../assets/plugins/rating/rating-picker.js"></script>
</code>
</pre>
</figure>
</div>
</div>
</div>
</div>
<table class="table table-bordered bg-primary-transparent mt-4">
<thead>
<tr>
<th>Type</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Plugin Link</strong></td>
<td><a href="https://github.com/malambane/jquery-rate-picker" target="_blank">jquery-rate-picker</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" id="DaysHours-example">
<div class="body">
<h5 class="mt-0">Days Hours Sec Counter in Undercontsruction page</h5>
<p>General Days Counters HTML structure in Zanex template.</p>
<div class="bg-primary-transparent">
<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
<li class="nav-item"><a href="#dayshour-counters" class="nav-link active" data-toggle="tab">HTML</a></li>
<li class="nav-item"><a href="#dayshour-counters1" class="nav-link" data-toggle="tab">SCSS</a></li>
<li class="nav-item"><a href="#dayshour-counters2" class="nav-link" data-toggle="tab">JS</a></li>
</ul>
<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
<div class="tab-content">
<div class="tab-pane active" id="dayshour-counters">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<div id="launch_date"></div>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="dayshour-counters1">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0 language-markup p-0 pl-3 m-0">
<code class="language-markup mt-0 pt-0">
<script type="html-Zanex/script">
<!--- JQUERY-COUNTDOWN SCSS -->
assets/scss/plugins/_jquery.countdown.scss
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane" id="dayshour-counters2">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- JQUERY-COUNTDOWN JS -->
<script src="../assets/plugins/jquery-countdown/jquery.plugin.min.js"></script>
<script src="../assets/plugins/jquery-countdown/jquery.countdown.js"></script>
<script src="../assets/plugins/jquery-countdown/countdown.js"></script>
</code>
</pre>
</figure>
</div>
<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-12 d-none d-xl-block custom-leftnav">
<div class="main-content-left-components">
<div class="card custom-card">
<div class="card-body component-item">
<div class="collapse navbar-collapse justify-content-end" id="main-menu">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#Accordions">Accordions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#modal-example">Modals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sweetalert-example">Sweet Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#rating-example">Rating</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#DaysHours-example">Days counter</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer opened -->
<div class="main-footer ht-40">
<div class="pd-t-0-f ht-100p">
<span>Copyright © <span id="year"></span> <a href="javascript:void(0)">Zanex</a>. Designed with <span class="fa fa-heart text-danger"></span> by <a href="javascript:void(0)"> Spruko </a> All rights reserved.</span>
</div>
</div>
<!-- Footer closed -->
</section>
<div class="color-bg">
<div class="sidebar__toggle" data-toggle="sidebar">
<a class="open-toggle" href="javascript:void(0);"><i class="fe fe-menu"></i></a>
</div>
<ul class="nav navbar-nav">
<li class="nav-item mr-8"><a class="btn btn-primary btn-header " href="https://themeforest.net/item/zanex-bootstrap-5-admin-dashboard-template/32984858" target="_blank"><i class="icon-help2"></i> Buy Now</a></li>
<li class="nav-item mr-8"><a class="btn btn-secondary btn-header " href="https://1.envato.market/MGEaN" target="_blank"><i class="icon-bag3"></i> Portfolio</a></li>
<li class="nav-item"><a class="btn btn-danger text-white mr-3 btn-header" href="https://spruko.com/licenses.html" target="_blank"><i class="icon-bag3"></i> Licenses</a></li>
</ul>
</div>
<!-- Jquery Core Js -->
<script src="assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/morphingsearchscripts.bundle.js"></script> <!-- morphing search Js -->
<script src="assets/bundles/vendorscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/mainscripts.bundle.js"></script><!-- Custom Js -->
<script src="assets/bundles/morphingscripts.bundle.js"></script><!-- morphing search page js -->
<!-- Internal Prism js-->
<script src="assets/plugins/prism/prism.js"></script>
<!-- Treeview js-->
<script src="assets/plugins/treeview-prism/prism.js"></script>
<script src="assets/plugins/treeview-prism/prism-treeview.js"></script>
<!-- Perfectscroll js-->
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/p-scroll.js"></script>
<!-- Custom js-->
<script src="assets/js/custom.js"></script>
<script src="assets/js/menuspy.min.js.js"></script>
<script>
var elm = document.querySelector('#main-menu');
var ms = new MenuSpy(elm);
(function () {
if (typeof self === 'undefined' || !self.Prism || !self.document) {
return;
}
/**
* Class name for <pre> which is activating the plugin
* @type {String}
*/
var PLUGIN_CLASS = 'line-numbers';
/**
* Resizes line numbers spans according to height of line of code
* @param {Element} element <pre> element
*/
var _resizeElement = function (element) {
var codeStyles = getStyles(element);
var whiteSpace = codeStyles['white-space'];
if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
var codeElement = element.querySelector('code');
var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
var lineNumberSizer = element.querySelector('.line-numbers-sizer');
var codeLines = element.textContent.split('\n');
if (!lineNumberSizer) {
lineNumberSizer = document.createElement('span');
lineNumberSizer.className = 'line-numbers-sizer';
codeElement.appendChild(lineNumberSizer);
}
lineNumberSizer.style.display = 'block';
codeLines.forEach(function (line, lineNumber) {
lineNumberSizer.textContent = line || '\n';
var lineSize = lineNumberSizer.getBoundingClientRect().height;
lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
});
lineNumberSizer.textContent = '';
lineNumberSizer.style.display = 'none';
}
};
/**
* Returns style declarations for the element
* @param {Element} element
*/
var getStyles = function (element) {
if (!element) {
return null;
}
return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
};
window.addEventListener('resize', function () {
Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_CLASS), _resizeElement);
});
Prism.hooks.add('complete', function (env) {
if (!env.code) {
return;
}
// works only for <code> wrapped inside <pre> (not inline)
var pre = env.element.parentNode;
// Original regex check for class, leaving it here
// for its redundancy check
var clsReg = /\s*\bline-numbers\b\s*/;
// New regex check for opt-out class
var clsRegB = /\s*\bno-line-numbers\b\s*/;
if (env.element.querySelector(".line-numbers-rows")) {
// Abort if line numbers already exists
return;
}
// Added to facilitate opting out
if (clsRegB.test(pre.className)) {
// Respect the opt-out
return;
}
if (clsReg.test(env.element.className)) {
// Remove the class "line-numbers" from the <code>
env.element.className = env.element.className.replace(clsReg, ' ');
}
if (!clsReg.test(pre.className)) {
// Add the class "line-numbers" to the <pre>
pre.className += ' line-numbers';
}
var match = env.code.match(/\n(?!$)/g);
var linesNum = match ? match.length + 1 : 1;
var lineNumbersWrapper;
var lines = new Array(linesNum + 1);
lines = lines.join('<span></span>');
lineNumbersWrapper = document.createElement('span');
lineNumbersWrapper.setAttribute('aria-hidden', 'true');
lineNumbersWrapper.className = 'line-numbers-rows';
lineNumbersWrapper.innerHTML = lines;
if (pre.hasAttribute('data-start')) {
pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
}
env.element.appendChild(lineNumbersWrapper);
_resizeElement(pre);
});
}());
</script>
</body>
</html>