761 lines
35 KiB
HTML
761 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" data-bs-theme="light" data-color-theme="Blue_Theme" data-layout="vertical">
|
|
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!-- Favicon icon-->
|
|
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/favicon.png" />
|
|
|
|
<!-- Core Css -->
|
|
<link rel="stylesheet" href="../assets/css/styles.css" />
|
|
|
|
<title>Modernize Bootstrap Admin</title>
|
|
<link rel="stylesheet" href="../assets/libs/nouislider-orxe/distribute/nouislider.min.css">
|
|
</head>
|
|
|
|
<body class="link-sidebar">
|
|
{{template "components/preloader.html" .}}
|
|
<div id="main-wrapper">
|
|
<!-- Sidebar Start -->
|
|
{{template "components/sidebar.html" .}}
|
|
<!-- Sidebar End -->
|
|
<div class="page-wrapper">
|
|
<!-- Header Start -->
|
|
{{template "components/topbar.html" .}}
|
|
<!-- Header End -->
|
|
<div class="body-wrapper">
|
|
<div class="container-fluid">
|
|
<div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
|
|
<div class="card-body px-4 py-3">
|
|
<div class="row align-items-center">
|
|
<div class="col-9">
|
|
<h4 class="fw-semibold mb-8">Noui-Slider</h4>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a class="text-muted text-decoration-none" href="../main/index.html">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item" aria-current="page">Noui-Slider</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="text-center mb-n5">
|
|
<img src="../assets/images/breadcrumb/ChatBc.png" alt="modernize-img" class="img-fluid mb-n4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Handles</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="slider-handles" class="mt-3 mb-3"></div>
|
|
<p>
|
|
The number of handles can be set using the
|
|
<code>start</code> option.
|
|
</p>
|
|
</div>
|
|
<h4 class="card-title">Stepping in non-linear sliders</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="slider-non-linear-step" class="mt-3 mb-3"></div>
|
|
<p>
|
|
For every subrange in a non-linear slider, stepping can be
|
|
set.
|
|
</p>
|
|
</div>
|
|
<h4 class="card-title">Stepping and snapping to values</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="slider-step" class="mt-3 mb-3"></div>
|
|
<p>
|
|
The amount the slider changes on movement can be set using
|
|
the <code>step</code> option.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Non-linear sliders</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="slider-non-linear" class="mt-3 mb-3"></div>
|
|
<p>
|
|
noUiSlider offers some powerful mechanisms that allow a
|
|
slider to behave in a non-linear fashion.
|
|
</p>
|
|
</div>
|
|
<h4 class="card-title">Range</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="slider-range" class="mt-3 mb-3"></div>
|
|
<p>
|
|
All values on the slider are part of a range. The range
|
|
has a minimum and maximum value.
|
|
</p>
|
|
</div>
|
|
<h4 class="card-title">Snapping between steps</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="slider-snap" class="mt-3 mb-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Tap</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="tap" class="mt-3 mb-3"></div>
|
|
<p>
|
|
A handle snaps to a clicked location. A smooth transition
|
|
is used. This option is <code>default</code>.
|
|
</p>
|
|
</div>
|
|
<h4 class="card-title">Drag</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="drag" class="mt-3 mb-3"></div>
|
|
<p>
|
|
Makes the range draggable. Requires two handles. The
|
|
<code>connect</code> option must be set to
|
|
<code>true</code>.
|
|
</p>
|
|
</div>
|
|
<h4 class="card-title">Fixed dragging</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="drag-fixed" class="mt-3 mb-3"></div>
|
|
<p>
|
|
Keeps the distance between handles fixed when the
|
|
<code>'drag'</code> flag is set.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Snap</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="snap" class="mt-3 mb-3"></div>
|
|
<p>
|
|
A handle snaps to a clicked location. It can immediately
|
|
be moved, without a <code>mouseup</code> +
|
|
<code>mousedown</code>.
|
|
</p>
|
|
</div>
|
|
<h4 class="card-title">Hover</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="hover" class="mt-3 mb-3"></div>
|
|
<p>
|
|
With this option set, the slider fires
|
|
<code>hover</code> events when a mouse or pen user hovers
|
|
over the slider.
|
|
</p>
|
|
</div>
|
|
<h4 class="card-title">Combined options</h4>
|
|
<div class="mb-3 mt-2">
|
|
<div id="combined" class="mt-3 mb-3"></div>
|
|
<p>Most <code>'behavior'</code> flags can be combined.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Left to right</h4>
|
|
<p>
|
|
The <code>range</code> mode uses the slider range to
|
|
determine where the pips should be. A pip is generated for
|
|
every percentage specified.
|
|
</p>
|
|
<div class="mb-3 mt-2">
|
|
<div id="pips-range" class="mt-3 mb-5"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-sm-6 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Right to left</h4>
|
|
<p>
|
|
The <code>range</code> mode uses the slider range to
|
|
determine where the pips should be. A pip is generated for
|
|
every percentage specified.
|
|
</p>
|
|
<div class="mb-3 mt-2">
|
|
<div id="pips-range-rtl" class="mt-3 mb-5"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Steps</h4>
|
|
<p>
|
|
Like <code>range</code>, the <code>steps</code> mode uses
|
|
the slider range. In <code>steps</code> mode, a pip is
|
|
generated for every step. The <code>filter</code> option can
|
|
be used to filter the generated pips. The
|
|
<code>filter</code> function must return <code>0</code> (no
|
|
value), <code>1</code> (large value) or
|
|
<code>2</code> (small value).
|
|
</p>
|
|
<div class="mb-3 mt-2">
|
|
<div id="pips-steps-filter" class="mb-5"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<fieldset>
|
|
<label>Default / Primary Color Slider</label>
|
|
<div class="mb-3 mt-2">
|
|
<div id="default-color-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Success Color Slider</label>
|
|
<div class="mb-3 mt-2">
|
|
<div id="success-color-slider" class="circle-filled slider-success"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Info Color Slider</label>
|
|
<div class="mb-3 mt-2">
|
|
<div id="info-color-slider" class="square slider-info"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<fieldset>
|
|
<label>Warning Color Slider</label>
|
|
<div class="mb-3 mt-2">
|
|
<div id="warning-color-slider" class="slider-warning"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Danger Color Slider</label>
|
|
<div class="mb-3 mt-2">
|
|
<div id="danger-color-slider" class="circle-filled slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Custom Color Slider</label>
|
|
<div class="mb-3 mt-2">
|
|
<div id="custom-color-slider" class="square slider-purple"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Default Handle</h4>
|
|
<fieldset class="mt-3">
|
|
<label>Extra Large Size</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="slider-xl" id="extra-large-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Large Size</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="slider-lg slider-success" id="large-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Default</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="slider-info" id="default-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Small Size</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="slider-sm slider-warning" id="small-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Extra Small</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="slider-xs slider-danger" id="extra-small-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Circle Filled Handle</h4>
|
|
<fieldset class="mt-3">
|
|
<label>Extra Large Size</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="circle-filled slider-xl" id="circle-extra-large-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Large Size</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="circle-filled slider-lg slider-success" id="circle-large-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Default</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="circle-filled slider-info" id="circle-default-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Small Size</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="circle-filled slider-sm slider-warning" id="circle-small-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Extra Small</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="circle-filled slider-xs slider-danger" id="circle-extra-small-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Square Handle</h4>
|
|
<fieldset class="mt-3">
|
|
<label>Extra Large Size</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="square slider-xl" id="square-extra-large-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Large Size</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="square slider-lg slider-success" id="square-large-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Default</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="square slider-info" id="square-default-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Small Size</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="square slider-sm slider-warning" id="square-small-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label>Extra Small</label>
|
|
<div class="mb-3 mt-2">
|
|
<div class="square slider-xs slider-danger" id="square-extra-small-slider"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Default Vertical Slider</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="slider-vertical-1"></div>
|
|
<div id="slider-vertical-2" class="ms-3 slider-info"></div>
|
|
<div id="slider-vertical-3" class="ms-3 slider-success"></div>
|
|
<div id="slider-vertical-4" class="ms-3 slider-warning"></div>
|
|
<div id="slider-vertical-5" class="ms-3 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Connect to lower</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="connect-lower-1"></div>
|
|
<div id="connect-lower-2" class="ms-3 slider-info"></div>
|
|
<div id="connect-lower-3" class="ms-3 slider-success"></div>
|
|
<div id="connect-lower-4" class="ms-3 slider-warning"></div>
|
|
<div id="connect-lower-5" class="ms-3 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Connect to upper</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="connect-upper-1"></div>
|
|
<div id="connect-upper-2" class="ms-3 slider-info"></div>
|
|
<div id="connect-upper-3" class="ms-3 slider-success"></div>
|
|
<div id="connect-upper-4" class="ms-3 slider-warning"></div>
|
|
<div id="connect-upper-5" class="ms-3 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Tooltips</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="slider-tooltips-1" class="me-4"></div>
|
|
<div id="slider-tooltips-2" class="ms-5 me-4 slider-info"></div>
|
|
<div id="slider-tooltips-3" class="ms-5 slider-warning"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Direction Top To Bottom</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="slider-direction-top-bottom-1" class="me-4"></div>
|
|
<div id="slider-direction-top-bottom-2" class="ms-5 me-4 slider-warning"></div>
|
|
<div id="slider-direction-top-bottom-3" class="ms-5 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Direction Bottom To Top</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="slider-direction-bottom-top-1" class="me-4"></div>
|
|
<div id="slider-direction-bottom-top-2" class="ms-5 me-4 slider-info"></div>
|
|
<div id="slider-direction-bottom-top-3" class="ms-5 slider-success"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Margin</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="vertical-margin-1"></div>
|
|
<div id="vertical-margin-2" class="ms-3 slider-info"></div>
|
|
<div id="vertical-margin-3" class="ms-3 slider-success"></div>
|
|
<div id="vertical-margin-4" class="ms-3 slider-warning"></div>
|
|
<div id="vertical-margin-5" class="ms-3 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Limit</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="vertical-limit-1"></div>
|
|
<div id="vertical-limit-2" class="ms-3 slider-info"></div>
|
|
<div id="vertical-limit-3" class="ms-3 slider-success"></div>
|
|
<div id="vertical-limit-4" class="ms-3 slider-warning"></div>
|
|
<div id="vertical-limit-5" class="ms-3 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Steps</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="vertical-steps-1"></div>
|
|
<div id="vertical-steps-2" class="ms-3 slider-info"></div>
|
|
<div id="vertical-steps-3" class="ms-3 slider-success"></div>
|
|
<div id="vertical-steps-4" class="ms-3 slider-warning"></div>
|
|
<div id="vertical-steps-5" class="ms-3 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Default Handle</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="vert-extra-large-slider"></div>
|
|
<div id="vert-large-slider" class="ms-3 slider-info"></div>
|
|
<div id="vert-default-slider" class="ms-3 slider-success"></div>
|
|
<div id="vert-small-slider" class="ms-3 slider-warning"></div>
|
|
<div id="vert-extra-small-slider" class="ms-3 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Circle Filled Handle</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="vert-circle-extra-large-slider" class="circle-filled"></div>
|
|
<div id="vert-circle-large-slider" class="circle-filled ms-3 slider-info"></div>
|
|
<div id="vert-circle-default-slider" class="circle-filled ms-3 slider-success"></div>
|
|
<div id="vert-circle-small-slider" class="circle-filled ms-3 slider-warning"></div>
|
|
<div id="vert-circle-extra-small-slider" class="circle-filled ms-3 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Square Handle</h4>
|
|
<fieldset class="mt-3">
|
|
<div class="form-group text-center">
|
|
<div id="vert-square-extra-large-slider" class="square"></div>
|
|
<div id="vert-square-large-slider" class="square ms-3 slider-info"></div>
|
|
<div id="vert-square-default-slider" class="square ms-3 slider-success"></div>
|
|
<div id="vert-square-small-slider" class="square ms-3 slider-warning"></div>
|
|
<div id="vert-square-extra-small-slider" class="square ms-3 slider-danger"></div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Search Bar -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
|
<div class="modal-content rounded-1">
|
|
<div class="modal-header border-bottom">
|
|
<input type="search" class="form-control fs-3" placeholder="Search here" id="search" />
|
|
<a href="javascript:void(0)" data-bs-dismiss="modal" class="lh-1">
|
|
<i class="ti ti-x fs-5 ms-3"></i>
|
|
</a>
|
|
</div>
|
|
<div class="modal-body message-body" data-simplebar="">
|
|
<h5 class="mb-0 fs-5 p-1">Quick Page Links</h5>
|
|
<ul class="list mb-0 py-2">
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Modern</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard1</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Dashboard</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard2</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Contacts</span>
|
|
<span class="text-muted d-block">/apps/contacts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Posts</span>
|
|
<span class="text-muted d-block">/apps/blog/posts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Detail</span>
|
|
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Shop</span>
|
|
<span class="text-muted d-block">/apps/ecommerce/shop</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Modern</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard1</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Dashboard</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard2</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Contacts</span>
|
|
<span class="text-muted d-block">/apps/contacts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Posts</span>
|
|
<span class="text-muted d-block">/apps/blog/posts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Detail</span>
|
|
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Shop</span>
|
|
<span class="text-muted d-block">/apps/ecommerce/shop</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Shopping Cart -->
|
|
<div class="offcanvas offcanvas-end shopping-cart" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
|
|
<div class="offcanvas-header justify-content-between py-4">
|
|
<h5 class="offcanvas-title fs-5 fw-semibold" id="offcanvasRightLabel">
|
|
Shopping Cart
|
|
</h5>
|
|
<span class="badge bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
|
|
</div>
|
|
<div class="offcanvas-body h-100 px-4 pt-0" data-simplebar>
|
|
<ul class="mb-0">
|
|
<li class="pb-7">
|
|
<div class="d-flex align-items-center">
|
|
<img src="../assets/images/products/product-1.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
|
|
<div>
|
|
<h6 class="mb-1">Supreme toys cooker</h6>
|
|
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
|
|
<div class="d-flex align-items-center justify-content-between mt-2">
|
|
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
|
|
<div class="input-group input-group-sm w-50">
|
|
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add1">
|
|
-
|
|
</button>
|
|
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add1" value="1" />
|
|
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addo2">
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="pb-7">
|
|
<div class="d-flex align-items-center">
|
|
<img src="../assets/images/products/product-2.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
|
|
<div>
|
|
<h6 class="mb-1">Supreme toys cooker</h6>
|
|
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
|
|
<div class="d-flex align-items-center justify-content-between mt-2">
|
|
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
|
|
<div class="input-group input-group-sm w-50">
|
|
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add2">
|
|
-
|
|
</button>
|
|
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add2" value="1" />
|
|
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon34">
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="pb-7">
|
|
<div class="d-flex align-items-center">
|
|
<img src="../assets/images/products/product-3.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
|
|
<div>
|
|
<h6 class="mb-1">Supreme toys cooker</h6>
|
|
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
|
|
<div class="d-flex align-items-center justify-content-between mt-2">
|
|
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
|
|
<div class="input-group input-group-sm w-50">
|
|
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add3">
|
|
-
|
|
</button>
|
|
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add3" value="1" />
|
|
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon3">
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="align-bottom">
|
|
<div class="d-flex align-items-center pb-7">
|
|
<span class="text-dark fs-3">Sub Total</span>
|
|
<div class="ms-auto">
|
|
<span class="text-dark fw-semibold fs-3">$2530</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center pb-7">
|
|
<span class="text-dark fs-3">Total</span>
|
|
<div class="ms-auto">
|
|
<span class="text-dark fw-semibold fs-3">$6830</span>
|
|
</div>
|
|
</div>
|
|
<a href="../main/eco-checkout.html" class="btn btn-outline-primary w-100">Go to shopping cart</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{template "components/footer.html" .}}
|
|
|
|
|
|
<script src="../assets/libs/wnumb/wNumb.min.js"></script>
|
|
<script src="../assets/libs/nouislider-orxe/distribute/nouislider.min.js"></script>
|
|
<script src="../assets/js/plugins/nouislider-init.js"></script>
|