|
Server IP : 162.214.80.37 / Your IP : 216.73.216.68 Web Server : Apache System : Linux sh013.webhostingservices.com 4.19.286-203.ELK.el7.x86_64 #1 SMP Wed Jun 14 04:33:55 CDT 2023 x86_64 User : imyrqtmy ( 2189) PHP Version : 8.2.18 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON Directory (0755) : /home2/imyrqtmy/public_html/zugadu/AdminPanel/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>Agroxa - Responsive Bootstrap 4 Admin Dashboard</title>
<meta content="Admin Dashboard" name="description" />
<meta content="Themesbrand" name="author" />
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Plugins css -->
<link href="../plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<link href="../plugins/bootstrap-md-datetimepicker/css/bootstrap-material-datetimepicker.css" rel="stylesheet">
<link href="../plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/bootstrap-touchspin/css/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/metismenu.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/icons.css" rel="stylesheet" type="text/css">
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Begin page -->
<div id="wrapper">
<!-- Top Bar Start -->
<div class="topbar">
<!-- LOGO -->
<div class="topbar-left">
<a href="index.html" class="logo">
<span>
<img src="assets/images/logo.png" alt="" height="24">
</span>
<i>
<img src="assets/images/logo-sm.png" alt="" height="22">
</i>
</a>
</div>
<nav class="navbar-custom">
<ul class="navbar-right d-flex list-inline float-right mb-0">
<li class="dropdown notification-list d-none d-sm-block">
<form role="search" class="app-search">
<div class="form-group mb-0">
<input type="text" class="form-control" placeholder="Search..">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="mdi mdi-bell noti-icon"></i>
<span class="badge badge-pill badge-info noti-icon-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg">
<!-- item-->
<h6 class="dropdown-item-text">
Notifications (37)
</h6>
<div class="slimscroll notification-item-list">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item active">
<div class="notify-icon bg-success"><i class="mdi mdi-cart-outline"></i></div>
<p class="notify-details">Your order is placed<span class="text-muted">Dummy text of the printing and typesetting industry.</span></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-warning"><i class="mdi mdi-message"></i></div>
<p class="notify-details">New Message received<span class="text-muted">You have 87 unread messages</span></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-info"><i class="mdi mdi-flag"></i></div>
<p class="notify-details">Your item is shipped<span class="text-muted">It is a long established fact that a reader will</span></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary"><i class="mdi mdi-cart-outline"></i></div>
<p class="notify-details">Your order is placed<span class="text-muted">Dummy text of the printing and typesetting industry.</span></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-danger"><i class="mdi mdi-message"></i></div>
<p class="notify-details">New Message received<span class="text-muted">You have 87 unread messages</span></p>
</a>
</div>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item text-center text-primary">
View all <i class="fi-arrow-right"></i>
</a>
</div>
</li>
<li class="dropdown notification-list">
<div class="dropdown notification-list nav-pro-img">
<a class="dropdown-toggle nav-link arrow-none waves-effect nav-user waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/users/user-4.jpg" alt="user" class="rounded-circle">
</a>
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
<!-- item-->
<a class="dropdown-item" href="#"><i class="mdi mdi-account-circle m-r-5"></i> Profile</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-wallet m-r-5"></i> My Wallet</a>
<a class="dropdown-item d-block" href="#"><span class="badge badge-success float-right">11</span><i class="mdi mdi-settings m-r-5"></i> Settings</a>
<a class="dropdown-item" href="#"><i class="mdi mdi-lock-open-outline m-r-5"></i> Lock screen</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#"><i class="mdi mdi-power text-danger"></i> Logout</a>
</div>
</div>
</li>
</ul>
<ul class="list-inline menu-left mb-0">
<li class="float-left">
<button class="button-menu-mobile open-left waves-effect waves-light">
<i class="mdi mdi-menu"></i>
</button>
</li>
<li class="d-none d-sm-block">
<div class="dropdown pt-3 d-inline-block">
<a class="btn btn-header waves-effect waves-light dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Create New
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</li>
</ul>
</nav>
</div>
<!-- Top Bar End -->
<!-- ========== Left Sidebar Start ========== -->
<div class="left side-menu">
<div class="slimscroll-menu" id="remove-scroll">
<!--- Sidemenu -->
<div id="sidebar-menu">
<!-- Left Menu Start -->
<ul class="metismenu" id="side-menu">
<li class="menu-title">Main</li>
<li>
<a href="index.html" class="waves-effect">
<i class="mdi mdi-home"></i><span class="badge badge-primary float-right">3</span> <span> Dashboard </span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-email"></i><span> Email <span class="float-right menu-arrow"><i class="mdi mdi-plus"></i></span> </span></a>
<ul class="submenu">
<li><a href="email-inbox.html">Inbox</a></li>
<li><a href="email-read.html">Email Read</a></li>
<li><a href="email-compose.html">Email Compose</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-buffer"></i> <span> UI Elements <span class="float-right menu-arrow"><i class="mdi mdi-plus"></i></span> </span> </a>
<ul class="submenu">
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-badge.html">Badge</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-popover-tooltips.html">Popover & Tooltips</a></li>
<li><a href="ui-progressbars.html">Progress Bars</a></li>
<li><a href="ui-tabs-accordions.html">Tabs & Accordions</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-video.html">Video</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-black-mesa"></i> <span> Components <span class="float-right menu-arrow"><i class="mdi mdi-plus"></i></span> </span> </a>
<ul class="submenu">
<li><a href="components-lightbox.html">Lightbox</a></li>
<li><a href="components-rangeslider.html">Range Slider</a></li>
<li><a href="components-session-timeout.html">Session Timeout</a></li>
<li><a href="components-sweet-alert.html">Sweet-Alert</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-clipboard"></i><span> Forms <span class="badge badge-success float-right">6</span> </span></a>
<ul class="submenu">
<li><a href="form-elements.html">Form Elements</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-advanced.html">Form Advanced</a></li>
<li><a href="form-editors.html">Form Editors</a></li>
<li><a href="form-uploads.html">Form File Upload</a></li>
<li><a href="form-xeditable.html">Form Xeditable</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-finance"></i><span> Charts <span class="float-right menu-arrow"><i class="mdi mdi-plus"></i></span> </span></a>
<ul class="submenu">
<li><a href="charts-chartist.html">Chartist Chart</a></li>
<li><a href="charts-chartjs.html">Chartjs Chart</a></li>
<li><a href="charts-flot.html">Flot Chart</a></li>
<li><a href="charts-c3.html">C3 Chart</a></li>
<li><a href="charts-morris.html">Morris Chart</a></li>
<li><a href="charts-other.html">Jquery Knob Chart</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-table-settings"></i><span> Tables <span class="float-right menu-arrow"><i class="mdi mdi-plus"></i></span> </span></a>
<ul class="submenu">
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Table</a></li>
<li><a href="tables-responsive.html">Responsive Table</a></li>
<li><a href="tables-editable.html">Editable Table</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-album"></i> <span> Icons <span class="float-right menu-arrow"><i class="mdi mdi-plus"></i></span></span> </a>
<ul class="submenu">
<li><a href="icons-material.html">Material Design</a></li>
<li><a href="icons-ion.html">Ion Icons</a></li>
<li><a href="icons-fontawesome.html">Font Awesome</a></li>
<li><a href="icons-themify.html">Themify Icons</a></li>
<li><a href="icons-dripicons.html">Dripicons</a></li>
<li><a href="icons-typicons.html">Typicons Icons</a></li>
</ul>
</li>
<li>
<a href="calendar.html" class="waves-effect"><i class="mdi mdi-calendar-check"></i><span> Calendar </span></a>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-google-maps"></i><span> Maps <span class="float-right menu-arrow"><i class="mdi mdi-plus"></i></span></span></a>
<ul class="submenu">
<li><a href="maps-google.html"> Google Map</a></li>
<li><a href="maps-vector.html"> Vector Map</a></li>
</ul>
</li>
<li class="menu-title">Extras</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-page-layout-sidebar-left"></i><span> Layouts <span class="badge badge-warning float-right">NEW</span> </span></a>
<ul class="submenu">
<li><a href="layouts-dark-sidebar.html">Dark Sidebar</a></li>
<li><a href="layouts-sidebar-user.html">Sidebar with User</a></li>
<li><a href="layouts-collapsed.html">Collpased Sidenav</a></li>
<li><a href="layouts-small.html">Small Sidebar</a></li>
<li><a href="layouts-title2.html">Page Title 2</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-google-pages"></i><span> Pages <span class="float-right menu-arrow"><i class="mdi mdi-plus"></i></span> </span></a>
<ul class="submenu">
<li><a href="pages-login.html">Login</a></li>
<li><a href="pages-register.html">Register</a></li>
<li><a href="pages-recoverpw.html">Recover Password</a></li>
<li><a href="pages-lock-screen.html">Lock Screen</a></li>
<li><a href="pages-timeline.html">Timeline</a></li>
<li><a href="pages-invoice.html">Invoice</a></li>
<li><a href="pages-directory.html">Directory</a></li>
<li><a href="pages-blank.html">Blank Page</a></li>
<li><a href="pages-404.html">Error 404</a></li>
<li><a href="pages-500.html">Error 500</a></li>
</ul>
</li>
</ul>
</div>
<!-- Sidebar -->
<div class="clearfix"></div>
</div>
<!-- Sidebar -left -->
</div>
<!-- Left Sidebar End -->
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<h4 class="page-title">Form Advanced</h4>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">Agroxa</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0);">Forms</a></li>
<li class="breadcrumb-item active">Form Advanced</li>
</ol>
<div class="state-information d-none d-sm-block">
<div class="state-graph">
<div id="header-chart-1"></div>
<div class="info">Balance $ 2,317</div>
</div>
<div class="state-graph">
<div id="header-chart-2"></div>
<div class="info">Item Sold 1230</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
<div class="page-content-wrapper">
<div class="row">
<div class="col-lg-6">
<div class="card m-b-20">
<div class="card-body">
<h4 class="mt-0 header-title">Colorpicker</h4>
<p class="text-muted m-b-30">Fancy and customizable colorpicker
plugin for Twitter Bootstrap.</p>
<div class="color-picker-inputs">
<form action="#">
<div class="form-group">
<label>Simple input field</label>
<input type="text" class="colorpicker-default form-control" value="#8fff00">
</div>
<div class="form-group">
<label>With custom options - RGBA</label>
<input type="text" class="colorpicker-rgba form-control" value="rgb(0,194,255,0.78)" data-color-format="rgba">
</div>
<div class="form-group m-b-0">
<label>As a component</label>
<div data-color-format="rgb" data-color="rgb(255, 146, 180)" class="colorpicker-default input-group">
<input type="text" readonly="readonly" value="" class="form-control">
<span class="input-group-append add-on">
<button class="btn btn-white" type="button">
<i style="background-color: rgb(124, 66, 84);margin-top: 2px;"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<label>Horizontal mode</label>
<input type="text" class="form-control" id="colorpicker-horizontal">
</div>
<div class="form-group">
<label>Aliased color palette</label>
<div id="colorpicker-color-pattern" data-format="alias" class="input-group colorpicker-component">
<input type="text" value="primary" class="form-control" />
<span class="input-group-append add-on">
<button class="btn btn-white" type="button">
<i style="background-color: #337ab7;margin-top: 2px;"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<label>Customized widget size</label>
<input type="text" class="colorpicker-large form-control" value="pink">
</div>
</form>
</div>
</div>
</div>
<div class="card m-b-20">
<div class="card-body">
<h4 class="mt-0 header-title">Bootstrap MaxLength</h4>
<p class="text-muted m-b-30">This plugin integrates by default with
Twitter bootstrap using badges to display the maximum lenght of the
field where the user is inserting text. </p>
<label class="text-muted">Default usage</label>
<p class="text-muted m-b-15">
The badge will show up by default when the remaining chars are 10 or less:
</p>
<input type="text" class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig" />
<div class="m-t-20">
<label class="text-muted">Threshold value</label>
<p class="text-muted m-b-15">
Do you want the badge to show up when there are 20 chars or less? Use the <code>threshold</code> option:
</p>
<input type="text" maxlength="25" name="thresholdconfig" class="form-control" id="thresholdconfig" />
</div>
<div class="m-t-20">
<label class="text-muted">All the options</label>
<p class="text-muted m-b-15">
Please note: if the <code>alwaysShow</code> option is enabled, the <code>threshold</code> option is ignored.
</p>
<input type="text" class="form-control" maxlength="25" name="alloptions" id="alloptions" />
</div>
<div class="m-t-20">
<label class="text-muted">Position</label>
<p class="text-muted m-b-15">
All you need to do is specify the <code>placement</code> option, with one of those strings. If none
is specified, the positioning will be defauted to 'bottom'.
</p>
<input type="text" class="form-control" maxlength="25" name="placement" id="placement" />
</div>
<div class="m-t-20">
<label class="text-muted">textareas</label>
<p class="text-muted m-b-15">
Bootstrap maxlength supports textarea as well as inputs. Even on old IE.
</p>
<textarea id="textarea" class="form-control" maxlength="225" rows="3" placeholder="This textarea has a limit of 225 chars."></textarea>
</div>
</div>
</div>
<div class="card m-b-20">
<div class="card-body">
<h4 class="mt-0 header-title">Select2</h4>
<p class="text-muted m-b-30">A mobile and touch friendly input spinner component for Bootstrap</p>
<form>
<div class="form-group">
<label class="control-label">Single Select</label>
<select class="form-control select2">
<option>Select</option>
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label class="control-label">Multiple Select</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
</form>
</div>
</div>
</div> <!-- end col -->
<div class="col-lg-6">
<div class="card m-b-20">
<div class="card-body">
<h4 class="mt-0 header-title">Material DatePicker</h4>
<p class="text-muted m-b-30">Examples of twitter bootstrap datepicker.</p>
<form action="#">
<div class="form-group">
<label>DatePicker</label>
<div>
<input type="text" class="form-control floating-label" placeholder="Date" id="date">
</div>
<!-- input-group -->
</div>
<div class="form-group">
<label>Time Picker</label>
<div>
<input type="text" id="time" class="form-control floating-label" placeholder="Time">
</div>
</div>
<div class="form-group">
<label>Date Time Picker</label>
<div>
<input type="text" id="date-format" class="form-control floating-label" placeholder="Begin Date Time">
</div>
</div>
<div class="form-group">
<label>French Locales (Week starts at Monday)</label>
<div>
<input type="text" id="date-fr" class="form-control floating-label" value="18/03/2018 08:00" placeholder="Date de début">
</div>
</div>
<div class="form-group">
<label>Min Date set</label>
<div>
<input type="text" id="min-date" class="form-control floating-label" placeholder="Start Date">
</div>
</div>
<div class="form-group">
<label>Events</label>
<div>
<div class="input-group">
<input type="text" id="date-start" class="form-control floating-label" placeholder="Start Date">
<input type="text" id="date-end" class="form-control floating-label" placeholder="End Date">
</div>
</div>
</div>
</form>
</div>
</div>
<div class="card m-b-20">
<div class="card-body">
<h4 class="mt-0 header-title">Bootstrap TouchSpin</h4>
<p class="text-muted m-b-30">A mobile and touch friendly input spinner component for Bootstrap</p>
<form>
<div class="form-group">
<label class="control-label">Using data attributes</label>
<input id="demo0" type="text" value="55" name="demo0" data-bts-min="0" data-bts-max="100" data-bts-init-val="" data-bts-step="1" data-bts-decimal="0" data-bts-step-interval="100" data-bts-force-step-divisibility="round" data-bts-step-interval-delay="500" data-bts-prefix="" data-bts-postfix="" data-bts-prefix-extra-class="" data-bts-postfix-extra-class="" data-bts-booster="true" data-bts-boostat="10" data-bts-max-boosted-step="false" data-bts-mousewheel="true" data-bts-button-down-class="btn btn-default" data-bts-button-up-class="btn btn-default"/>
</div>
<div class="form-group">
<label class="control-label">Example with postfix (large)</label>
<input id="demo1" type="text" value="55" name="demo1">
</div>
<div class="form-group">
<label class="control-label">With prefix </label>
<input id="demo2" type="text" value="0" name="demo2" class=" form-control">
</div>
<div class="form-group">
<label class="control-label">Init with empty value:</label>
<input id="demo3" type="text" value="" name="demo3">
</div>
<div class="form-group">
<label class="control-label">Value attribute is not set (applying settings.initval)</label>
<input id="demo3_21" type="text" value="" name="demo3_21">
</div>
<div class="form-group">
<label class="control-label">Value is set explicitly to 33 (skipping settings.initval) </label>
<input id="demo3_22" type="text" value="33" name="demo3_22">
</div>
</form>
</div>
</div>
<div class="card m-b-20">
<div class="card-body">
<h4 class="mt-0 header-title">Css Switch</h4>
<p class="text-muted m-b-30">Here are a few types of switches. </p>
<div>
<input type="checkbox" id="switch1" switch="none" checked/>
<label for="switch1" data-on-label="On"
data-off-label="Off"></label>
<input type="checkbox" id="switch2" switch="default" checked/>
<label for="switch2" data-on-label=""
data-off-label=""></label>
<input type="checkbox" id="switch3" switch="bool" checked/>
<label for="switch3" data-on-label="Yes"
data-off-label="No"></label>
<input type="checkbox" id="switch6" switch="primary" checked/>
<label for="switch6" data-on-label="Yes"
data-off-label="No"></label>
<input type="checkbox" id="switch4" switch="success" checked/>
<label for="switch4" data-on-label="Yes"
data-off-label="No"></label>
<input type="checkbox" id="switch7" switch="info" checked/>
<label for="switch7" data-on-label="Yes"
data-off-label="No"></label>
<input type="checkbox" id="switch5" switch="warning" checked/>
<label for="switch5" data-on-label="Yes"
data-off-label="No"></label>
<input type="checkbox" id="switch8" switch="danger" checked/>
<label for="switch8" data-on-label="Yes"
data-off-label="No"></label>
<input type="checkbox" id="switch9" switch="dark" checked/>
<label for="switch9" data-on-label="Yes"
data-off-label="No"></label>
</div>
</div>
</div>
<div class="card m-b-20">
<div class="card-body">
<h4 class="mt-0 header-title">Bootstrap FileStyle</h4>
<p class="text-muted m-b-30">Examples of bootstrap fileStyle.</p>
<form action="#">
<div class="form-group">
<label>Default file input</label>
<input type="file" class="filestyle" data-buttonname="btn-secondary">
</div>
<div class="form-group">
<label>File style without input</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</form>
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
</div>
<!-- end page content-->
</div> <!-- container-fluid -->
</div> <!-- content -->
<footer class="footer">
© 2018 Agroxa <span class="d-none d-sm-inline-block">- Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand.</span>
</footer>
</div>
<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/metisMenu.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/waves.min.js"></script>
<script src="../plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="../plugins/bootstrap-md-datetimepicker/js/moment-with-locales.min.js"></script>
<script src="../plugins/bootstrap-md-datetimepicker/js/bootstrap-material-datetimepicker.js"></script>
<!-- Plugins js -->
<script src="../plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<script src="../plugins/select2/js/select2.min.js"></script>
<script src="../plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>
<script src="../plugins/bootstrap-filestyle/js/bootstrap-filestyle.min.js"></script>
<script src="../plugins/bootstrap-touchspin/js/jquery.bootstrap-touchspin.min.js"></script>
<!-- Plugins Init js -->
<script src="assets/pages/form-advanced.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
</body>
</html>