|
|
<!doctype html>
|
|
|
<html class="no-js" lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
|
<title>Form Components | Notika - Notika Admin Template</title>
|
|
|
<meta name="description" content="">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<!-- favicon
|
|
|
============================================ -->
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
|
|
|
<!-- Google Fonts
|
|
|
============================================ -->
|
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
|
|
|
<!-- Bootstrap CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
|
<!-- font awesome CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/font-awesome.min.css">
|
|
|
<!-- owl.carousel CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/owl.carousel.css">
|
|
|
<link rel="stylesheet" href="css/owl.theme.css">
|
|
|
<link rel="stylesheet" href="css/owl.transitions.css">
|
|
|
<!-- meanmenu CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/meanmenu/meanmenu.min.css">
|
|
|
<!-- animate CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/animate.css">
|
|
|
<!-- summernote CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/summernote/summernote.css">
|
|
|
<!-- Range Slider CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/themesaller-forms.css">
|
|
|
<!-- normalize CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
|
<!-- mCustomScrollbar CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
|
|
|
<!-- Notika icon CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/notika-custom-icon.css">
|
|
|
<!-- bootstrap select CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/bootstrap-select/bootstrap-select.css">
|
|
|
<!-- datapicker CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/datapicker/datepicker3.css">
|
|
|
<!-- Color Picker CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/color-picker/farbtastic.css">
|
|
|
<!-- main CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/chosen/chosen.css">
|
|
|
<!-- notification CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/notification/notification.css">
|
|
|
<!-- dropzone CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/dropzone/dropzone.css">
|
|
|
<!-- wave CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/wave/waves.min.css">
|
|
|
<!-- main CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/main.css">
|
|
|
<!-- style CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
<!-- responsive CSS
|
|
|
============================================ -->
|
|
|
<link rel="stylesheet" href="css/responsive.css">
|
|
|
<!-- modernizr JS
|
|
|
============================================ -->
|
|
|
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!--[if lt IE 8]>
|
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
|
<![endif]-->
|
|
|
<!-- Start Header Top Area -->
|
|
|
<div class="header-top-area">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
|
|
|
<div class="logo-area">
|
|
|
<a href="#"><img src="img/logo/logo.png" alt="" /></a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
|
|
|
<div class="header-top-menu">
|
|
|
<ul class="nav navbar-nav notika-top-nav">
|
|
|
<li class="nav-item dropdown">
|
|
|
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-search"></i></span></a>
|
|
|
<div role="menu" class="dropdown-menu search-dd animated flipInX">
|
|
|
<div class="search-input">
|
|
|
<i class="notika-icon notika-left-arrow"></i>
|
|
|
<input type="text" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="nav-item dropdown">
|
|
|
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-mail"></i></span></a>
|
|
|
<div role="menu" class="dropdown-menu message-dd animated zoomIn">
|
|
|
<div class="hd-mg-tt">
|
|
|
<h2>Messages</h2>
|
|
|
</div>
|
|
|
<div class="hd-message-info">
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/1.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>David Belle</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/2.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>Jonathan Morris</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/4.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>Fredric Mitchell</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/1.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>David Belle</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/2.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>Glenn Jecobs</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="hd-mg-va">
|
|
|
<a href="#">View All</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="nav-item nc-al"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-alarm"></i></span><div class="spinner4 spinner-4"></div><div class="ntd-ctn"><span>3</span></div></a>
|
|
|
<div role="menu" class="dropdown-menu message-dd notification-dd animated zoomIn">
|
|
|
<div class="hd-mg-tt">
|
|
|
<h2>Notification</h2>
|
|
|
</div>
|
|
|
<div class="hd-message-info">
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/1.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>David Belle</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/2.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>Jonathan Morris</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/4.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>Fredric Mitchell</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/1.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>David Belle</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img">
|
|
|
<img src="img/post/2.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>Glenn Jecobs</h3>
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="hd-mg-va">
|
|
|
<a href="#">View All</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-menus"></i></span><div class="spinner4 spinner-4"></div><div class="ntd-ctn"><span>2</span></div></a>
|
|
|
<div role="menu" class="dropdown-menu message-dd task-dd animated zoomIn">
|
|
|
<div class="hd-mg-tt">
|
|
|
<h2>Tasks</h2>
|
|
|
</div>
|
|
|
<div class="hd-message-info hd-task-info">
|
|
|
<div class="skill">
|
|
|
<div class="progress">
|
|
|
<div class="lead-content">
|
|
|
<p>HTML5 Validation Report</p>
|
|
|
</div>
|
|
|
<div class="progress-bar wow fadeInLeft" data-progress="95%" style="width: 95%;" data-wow-duration="1.5s" data-wow-delay="1.2s"> <span>95%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="progress">
|
|
|
<div class="lead-content">
|
|
|
<p>Google Chrome Extension</p>
|
|
|
</div>
|
|
|
<div class="progress-bar wow fadeInLeft" data-progress="85%" style="width: 85%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>85%</span> </div>
|
|
|
</div>
|
|
|
<div class="progress">
|
|
|
<div class="lead-content">
|
|
|
<p>Social Internet Projects</p>
|
|
|
</div>
|
|
|
<div class="progress-bar wow fadeInLeft" data-progress="75%" style="width: 75%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>75%</span> </div>
|
|
|
</div>
|
|
|
<div class="progress">
|
|
|
<div class="lead-content">
|
|
|
<p>Bootstrap Admin</p>
|
|
|
</div>
|
|
|
<div class="progress-bar wow fadeInLeft" data-progress="65%" style="width: 65%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>65%</span> </div>
|
|
|
</div>
|
|
|
<div class="progress progress-bt">
|
|
|
<div class="lead-content">
|
|
|
<p>Youtube App</p>
|
|
|
</div>
|
|
|
<div class="progress-bar wow fadeInLeft" data-progress="55%" style="width: 55%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>55%</span> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="hd-mg-va">
|
|
|
<a href="#">View All</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-chat"></i></span></a>
|
|
|
<div role="menu" class="dropdown-menu message-dd chat-dd animated zoomIn">
|
|
|
<div class="hd-mg-tt">
|
|
|
<h2>Chat</h2>
|
|
|
</div>
|
|
|
<div class="search-people">
|
|
|
<i class="notika-icon notika-left-arrow"></i>
|
|
|
<input type="text" placeholder="Search People" />
|
|
|
</div>
|
|
|
<div class="hd-message-info">
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img chat-img">
|
|
|
<img src="img/post/1.jpg" alt="" />
|
|
|
<div class="chat-avaible"><i class="notika-icon notika-dot"></i></div>
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>David Belle</h3>
|
|
|
<p>Available</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img chat-img">
|
|
|
<img src="img/post/2.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>Jonathan Morris</h3>
|
|
|
<p>Last seen 3 hours ago</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img chat-img">
|
|
|
<img src="img/post/4.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>Fredric Mitchell</h3>
|
|
|
<p>Last seen 2 minutes ago</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img chat-img">
|
|
|
<img src="img/post/1.jpg" alt="" />
|
|
|
<div class="chat-avaible"><i class="notika-icon notika-dot"></i></div>
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>David Belle</h3>
|
|
|
<p>Available</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<a href="#">
|
|
|
<div class="hd-message-sn">
|
|
|
<div class="hd-message-img chat-img">
|
|
|
<img src="img/post/2.jpg" alt="" />
|
|
|
<div class="chat-avaible"><i class="notika-icon notika-dot"></i></div>
|
|
|
</div>
|
|
|
<div class="hd-mg-ctn">
|
|
|
<h3>Glenn Jecobs</h3>
|
|
|
<p>Available</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="hd-mg-va">
|
|
|
<a href="#">View All</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- End Header Top Area -->
|
|
|
<!-- Mobile Menu start -->
|
|
|
<div class="mobile-menu-area">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="mobile-menu">
|
|
|
<nav id="dropdown">
|
|
|
<ul class="mobile-menu-nav">
|
|
|
<li><a data-toggle="collapse" data-target="#Charts" href="#">Home</a>
|
|
|
<ul class="collapse dropdown-header-top">
|
|
|
<li><a href="index.html">Dashboard One</a></li>
|
|
|
<li><a href="index-2.html">Dashboard Two</a></li>
|
|
|
<li><a href="index-3.html">Dashboard Three</a></li>
|
|
|
<li><a href="index-4.html">Dashboard Four</a></li>
|
|
|
<li><a href="analytics.html">Analytics</a></li>
|
|
|
<li><a href="widgets.html">Widgets</a></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li><a data-toggle="collapse" data-target="#demoevent" href="#">Email</a>
|
|
|
<ul id="demoevent" class="collapse dropdown-header-top">
|
|
|
<li><a href="inbox.html">Inbox</a></li>
|
|
|
<li><a href="view-email.html">View Email</a></li>
|
|
|
<li><a href="compose-email.html">Compose Email</a></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li><a data-toggle="collapse" data-target="#democrou" href="#">Interface</a>
|
|
|
<ul id="democrou" class="collapse dropdown-header-top">
|
|
|
<li><a href="animations.html">Animations</a></li>
|
|
|
<li><a href="google-map.html">Google Map</a></li>
|
|
|
<li><a href="data-map.html">Data Maps</a></li>
|
|
|
<li><a href="code-editor.html">Code Editor</a></li>
|
|
|
<li><a href="image-cropper.html">Images Cropper</a></li>
|
|
|
<li><a href="wizard.html">Wizard</a></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li><a data-toggle="collapse" data-target="#demolibra" href="#">Charts</a>
|
|
|
<ul id="demolibra" class="collapse dropdown-header-top">
|
|
|
<li><a href="flot-charts.html">Flot Charts</a></li>
|
|
|
<li><a href="bar-charts.html">Bar Charts</a></li>
|
|
|
<li><a href="line-charts.html">Line Charts</a></li>
|
|
|
<li><a href="area-charts.html">Area Charts</a></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li><a data-toggle="collapse" data-target="#demodepart" href="#">Tables</a>
|
|
|
<ul id="demodepart" class="collapse dropdown-header-top">
|
|
|
<li><a href="normal-table.html">Normal Table</a></li>
|
|
|
<li><a href="data-table.html">Data Table</a></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li><a data-toggle="collapse" data-target="#demo" href="#">Forms</a>
|
|
|
<ul id="demo" class="collapse dropdown-header-top">
|
|
|
<li><a href="form-elements.html">Form Elements</a></li>
|
|
|
<li><a href="form-components.html">Form Components</a></li>
|
|
|
<li><a href="form-examples.html">Form Examples</a></li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li><a data-toggle="collapse" data-target="#Miscellaneousmob" href="#">App views</a>
|
|
|
<ul id="Miscellaneousmob" class="collapse dropdown-header-top">
|
|
|
<li><a href="notification.html">Notifications</a>
|
|
|
</li>
|
|
|
<li><a href="alert.html">Alerts</a>
|
|
|
</li>
|
|
|
<li><a href="modals.html">Modals</a>
|
|
|
</li>
|
|
|
<li><a href="buttons.html">Buttons</a>
|
|
|
</li>
|
|
|
<li><a href="tabs.html">Tabs</a>
|
|
|
</li>
|
|
|
<li><a href="accordion.html">Accordion</a>
|
|
|
</li>
|
|
|
<li><a href="dialog.html">Dialogs</a>
|
|
|
</li>
|
|
|
<li><a href="popovers.html">Popovers</a>
|
|
|
</li>
|
|
|
<li><a href="tooltips.html">Tooltips</a>
|
|
|
</li>
|
|
|
<li><a href="dropdown.html">Dropdowns</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<li><a data-toggle="collapse" data-target="#Pagemob" href="#">Pages</a>
|
|
|
<ul id="Pagemob" class="collapse dropdown-header-top">
|
|
|
<li><a href="contact.html">Contact</a>
|
|
|
</li>
|
|
|
<li><a href="invoice.html">Invoice</a>
|
|
|
</li>
|
|
|
<li><a href="typography.html">Typography</a>
|
|
|
</li>
|
|
|
<li><a href="color.html">Color</a>
|
|
|
</li>
|
|
|
<li><a href="login-register.html">Login Register</a>
|
|
|
</li>
|
|
|
<li><a href="404.html">404 Page</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</nav>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Mobile Menu end -->
|
|
|
<!-- Main Menu area start-->
|
|
|
<div class="main-menu-area mg-tb-40">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<ul class="nav nav-tabs notika-menu-wrap menu-it-icon-pro">
|
|
|
<li><a data-toggle="tab" href="#Home"><i class="notika-icon notika-house"></i> Home</a>
|
|
|
</li>
|
|
|
<li><a data-toggle="tab" href="#mailbox"><i class="notika-icon notika-mail"></i> Email</a>
|
|
|
</li>
|
|
|
<li><a data-toggle="tab" href="#Interface"><i class="notika-icon notika-edit"></i> Interface</a>
|
|
|
</li>
|
|
|
<li><a data-toggle="tab" href="#Charts"><i class="notika-icon notika-bar-chart"></i> Charts</a>
|
|
|
</li>
|
|
|
<li><a data-toggle="tab" href="#Tables"><i class="notika-icon notika-windows"></i> Tables</a>
|
|
|
</li>
|
|
|
<li class="active"><a data-toggle="tab" href="#Forms"><i class="notika-icon notika-form"></i> Forms</a>
|
|
|
</li>
|
|
|
<li><a data-toggle="tab" href="#Appviews"><i class="notika-icon notika-app"></i> App views</a>
|
|
|
</li>
|
|
|
<li><a data-toggle="tab" href="#Page"><i class="notika-icon notika-support"></i> Pages</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class="tab-content custom-menu-content">
|
|
|
<div id="Home" class="tab-pane in notika-tab-menu-bg animated flipInX">
|
|
|
<ul class="notika-main-menu-dropdown">
|
|
|
<li><a href="index.html">Dashboard One</a>
|
|
|
</li>
|
|
|
<li><a href="index-2.html">Dashboard Two</a>
|
|
|
</li>
|
|
|
<li><a href="index-3.html">Dashboard Three</a>
|
|
|
</li>
|
|
|
<li><a href="index-4.html">Dashboard Four</a>
|
|
|
</li>
|
|
|
<li><a href="analytics.html">Analytics</a>
|
|
|
</li>
|
|
|
<li><a href="widgets.html">Widgets</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div id="mailbox" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
|
<ul class="notika-main-menu-dropdown">
|
|
|
<li><a href="inbox.html">Inbox</a>
|
|
|
</li>
|
|
|
<li><a href="view-email.html">View Email</a>
|
|
|
</li>
|
|
|
<li><a href="compose-email.html">Compose Email</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div id="Interface" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
|
<ul class="notika-main-menu-dropdown">
|
|
|
<li><a href="animations.html">Animations</a>
|
|
|
</li>
|
|
|
<li><a href="google-map.html">Google Map</a>
|
|
|
</li>
|
|
|
<li><a href="data-map.html">Data Maps</a>
|
|
|
</li>
|
|
|
<li><a href="code-editor.html">Code Editor</a>
|
|
|
</li>
|
|
|
<li><a href="image-cropper.html">Images Cropper</a>
|
|
|
</li>
|
|
|
<li><a href="wizard.html">Wizard</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div id="Charts" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
|
<ul class="notika-main-menu-dropdown">
|
|
|
<li><a href="flot-charts.html">Flot Charts</a>
|
|
|
</li>
|
|
|
<li><a href="bar-charts.html">Bar Charts</a>
|
|
|
</li>
|
|
|
<li><a href="line-charts.html">Line Charts</a>
|
|
|
</li>
|
|
|
<li><a href="area-charts.html">Area Charts</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div id="Tables" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
|
<ul class="notika-main-menu-dropdown">
|
|
|
<li><a href="normal-table.html">Normal Table</a>
|
|
|
</li>
|
|
|
<li><a href="data-table.html">Data Table</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div id="Forms" class="tab-pane active notika-tab-menu-bg animated flipInX">
|
|
|
<ul class="notika-main-menu-dropdown">
|
|
|
<li><a href="form-elements.html">Form Elements</a>
|
|
|
</li>
|
|
|
<li><a href="form-components.html">Form Components</a>
|
|
|
</li>
|
|
|
<li><a href="form-examples.html">Form Examples</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div id="Appviews" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
|
<ul class="notika-main-menu-dropdown">
|
|
|
<li><a href="notification.html">Notifications</a>
|
|
|
</li>
|
|
|
<li><a href="alert.html">Alerts</a>
|
|
|
</li>
|
|
|
<li><a href="modals.html">Modals</a>
|
|
|
</li>
|
|
|
<li><a href="buttons.html">Buttons</a>
|
|
|
</li>
|
|
|
<li><a href="tabs.html">Tabs</a>
|
|
|
</li>
|
|
|
<li><a href="accordion.html">Accordion</a>
|
|
|
</li>
|
|
|
<li><a href="dialog.html">Dialogs</a>
|
|
|
</li>
|
|
|
<li><a href="popovers.html">Popovers</a>
|
|
|
</li>
|
|
|
<li><a href="tooltips.html">Tooltips</a>
|
|
|
</li>
|
|
|
<li><a href="dropdown.html">Dropdowns</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div id="Page" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
|
<ul class="notika-main-menu-dropdown">
|
|
|
<li><a href="contact.html">Contact</a>
|
|
|
</li>
|
|
|
<li><a href="invoice.html">Invoice</a>
|
|
|
</li>
|
|
|
<li><a href="typography.html">Typography</a>
|
|
|
</li>
|
|
|
<li><a href="color.html">Color</a>
|
|
|
</li>
|
|
|
<li><a href="login-register.html">Login Register</a>
|
|
|
</li>
|
|
|
<li><a href="404.html">404 Page</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Main Menu area End-->
|
|
|
<!-- Breadcomb area Start-->
|
|
|
<div class="breadcomb-area">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="breadcomb-list">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="breadcomb-wp">
|
|
|
<div class="breadcomb-icon">
|
|
|
<i class="notika-icon notika-form"></i>
|
|
|
</div>
|
|
|
<div class="breadcomb-ctn">
|
|
|
<h2>Form Components</h2>
|
|
|
<p>Welcome to Notika <span class="bread-ntd">Admin Template</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-3">
|
|
|
<div class="breadcomb-report">
|
|
|
<button data-toggle="tooltip" data-placement="left" title="Download Report" class="btn"><i class="notika-icon notika-sent"></i></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Breadcomb area End-->
|
|
|
<!-- Form Element area Start-->
|
|
|
<div class="form-element-area">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-element-list">
|
|
|
<div class="basic-tb-hd">
|
|
|
<h2>Input Text</h2>
|
|
|
<p>Text Inputs with different sizes by height and column.</p>
|
|
|
</div>
|
|
|
<div class="cmp-tb-hd bcs-hd">
|
|
|
<h2>Basic Example</h2>
|
|
|
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input. </p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-support"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Full Name">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-mail"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Email Address">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-phone"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Contact Number">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-map"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Location">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-next"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Postal Code">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-mail"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Message">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-star"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Notification">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-travel"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Flight">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-dollar"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Dollar">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int form-elet-mg res-mg-fcs">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-wifi"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Internet">
|
|
|
</div>
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-cloud"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int form-elet-mg res-mg-fcs">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-house"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Home Address">
|
|
|
</div>
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-success"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int form-elet-mg">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-edit"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" placeholder="Layer">
|
|
|
</div>
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-chat"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-element-list mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Floating Labels</h2>
|
|
|
<p>Basic example for input groups with floating labels </p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int float-lb floating-lb">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-support"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control">
|
|
|
<label class="nk-label">Full Name</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int float-lb floating-lb">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-mail"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control">
|
|
|
<label class="nk-label">Email Address</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int float-lb floating-lb">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-phone"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control">
|
|
|
<label class="nk-label">Contact Number</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int float-lb form-elet-mg">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-wifi"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control">
|
|
|
<label class="nk-label">Internet</label>
|
|
|
</div>
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-cloud"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int float-lb form-elet-mg">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-house"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control">
|
|
|
<label class="nk-label">Home Address</label>
|
|
|
</div>
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-success"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int float-lb form-elet-mg">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-edit"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control">
|
|
|
<label class="nk-label">Layer</label>
|
|
|
</div>
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-chat"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-element-list mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Different Sizes</h2>
|
|
|
<p>You may use the extra sizing classes (<code>.input-sm, .input-lg </code>) to change size of the feilds.</p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-wifi"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control input-sm" Placeholder="Internet">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-wifi"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" Placeholder="Internet">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-group ic-cmp-int int-bg-it form-elet-mg">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-wifi"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control input-lg" Placeholder="Internet">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-element-list mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Input Mask</h2>
|
|
|
<p>An input mask helps the user with the input. This can be useful for dates, numerics, phone numbers etc...</p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-int-mk">
|
|
|
<h2>ISBN 1</h2>
|
|
|
</div>
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-support"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-int-mk">
|
|
|
<h2>IPV4</h2>
|
|
|
</div>
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-mail"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" data-mask="999.999.999.9999" placeholder="IPV4">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-int-mk">
|
|
|
<h2>Tax ID</h2>
|
|
|
</div>
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-tax"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" data-mask="99-9999999" placeholder="Tax ID">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-int-mk">
|
|
|
<h2>Phone</h2>
|
|
|
</div>
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-phone"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" data-mask="(999) 999-9999" placeholder="Phone">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-int-mk">
|
|
|
<h2>Currency</h2>
|
|
|
</div>
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-dollar"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" data-mask="$ 999,999,999.99" placeholder="Currency">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-int-mk">
|
|
|
<h2>Date</h2>
|
|
|
</div>
|
|
|
<div class="form-group ic-cmp-int">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-calendar"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" data-mask="99/99/9999" placeholder="dd/mm/yyyy">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-int-mk">
|
|
|
<h2>Postal Code</h2>
|
|
|
</div>
|
|
|
<div class="form-group ic-cmp-int form-elet-mg res-mg-fcs">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-star"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" data-mask="9999" placeholder="Postal Code">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-int-mk">
|
|
|
<h2>IP Address</h2>
|
|
|
</div>
|
|
|
<div class="form-group ic-cmp-int form-elet-mg res-mg-fcs">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-ip-locator"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" data-mask="999.999.999.9999" placeholder="IP">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-int-mk">
|
|
|
<h2>Credit Card</h2>
|
|
|
</div>
|
|
|
<div class="form-group ic-cmp-int form-elet-mg">
|
|
|
<div class="form-ic-cmp">
|
|
|
<i class="notika-icon notika-credit-card"></i>
|
|
|
</div>
|
|
|
<div class="nk-int-st">
|
|
|
<input type="text" class="form-control" data-mask="999 999 999 9999" placeholder="Credit Card">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-element-list mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Bootstrap Seelct - Custom Select</h2>
|
|
|
<p>Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.</p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn">
|
|
|
<h2>Basic Example</h2>
|
|
|
</div>
|
|
|
<div class="bootstrap-select fm-cmp-mg">
|
|
|
<select class="selectpicker">
|
|
|
<option>Drama</option>
|
|
|
<option>Cariska</option>
|
|
|
<option>Cheriska</option>
|
|
|
<option>Malias</option>
|
|
|
<option>Kamines</option>
|
|
|
<option>Austranas</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn sm-res-mg-t-10">
|
|
|
<h2>Serach Option</h2>
|
|
|
</div>
|
|
|
<div class="bootstrap-select fm-cmp-mg">
|
|
|
<select class="selectpicker" data-live-search="true">
|
|
|
<option>Drama</option>
|
|
|
<option>Cariska</option>
|
|
|
<option>Cheriska</option>
|
|
|
<option>Malias</option>
|
|
|
<option>Kamines</option>
|
|
|
<option>Austranas</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn sm-res-mg-t-10">
|
|
|
<h2>Option Groups</h2>
|
|
|
</div>
|
|
|
<div class="bootstrap-select fm-cmp-mg">
|
|
|
<select class="selectpicker">
|
|
|
<optgroup label="Picnic">
|
|
|
<option>Drama</option>
|
|
|
<option>Cariska</option>
|
|
|
<option>Cheriska</option>
|
|
|
</optgroup>
|
|
|
<optgroup label="Camping">
|
|
|
<option>Malias</option>
|
|
|
<option>Kamines</option>
|
|
|
<option>Austranas</option>
|
|
|
</optgroup>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn sm-res-mg-t-10">
|
|
|
<h2>Disabled Options</h2>
|
|
|
</div>
|
|
|
<div class="bootstrap-select fm-cmp-mg">
|
|
|
<select class="selectpicker">
|
|
|
<option disabled="disabled">Drama</option>
|
|
|
<option>Cariska</option>
|
|
|
<option>Kamines</option>
|
|
|
<option disabled="disabled">Malias</option>
|
|
|
<option>Cheriska</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn mg-t-30">
|
|
|
<h2>Multi Select</h2>
|
|
|
</div>
|
|
|
<div class="bootstrap-select">
|
|
|
<select class="selectpicker" multiple>
|
|
|
<option>Drama</option>
|
|
|
<option>Cariska</option>
|
|
|
<option>Cheriska</option>
|
|
|
<option>Malias</option>
|
|
|
<option>Kamines</option>
|
|
|
<option>Austranas</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn mg-t-30">
|
|
|
<h2>Limit Selection - Set to 2</h2>
|
|
|
</div>
|
|
|
<div class="bootstrap-select">
|
|
|
<select class="selectpicker" multiple data-max-options="2" title='Choose some of...'>
|
|
|
<option>Drama</option>
|
|
|
<option>Cariska</option>
|
|
|
<option>Cheriska</option>
|
|
|
<option>Malias</option>
|
|
|
<option>Kamines</option>
|
|
|
<option>Austranas</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn mg-t-30">
|
|
|
<h2>Display Count</h2>
|
|
|
</div>
|
|
|
<div class="bootstrap-select">
|
|
|
<select class="selectpicker" multiple data-selected-text-format="count">
|
|
|
<option>Drama</option>
|
|
|
<option>Cariska</option>
|
|
|
<option>Cheriska</option>
|
|
|
<option>Malias</option>
|
|
|
<option>Kamines</option>
|
|
|
<option>Austranas</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-element-list mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Chosen</h2>
|
|
|
<p>Make long, unwieldy select boxes more user friendly.</p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn">
|
|
|
<h2>Basic Example</h2>
|
|
|
</div>
|
|
|
<div class="chosen-select-act fm-cmp-mg">
|
|
|
<select class="chosen" data-placeholder="Choose a Country...">
|
|
|
<option value="United States">United States</option>
|
|
|
<option value="United Kingdom">United Kingdom</option>
|
|
|
<option value="Afghanistan">Afghanistan</option>
|
|
|
<option value="Aland Islands">Aland Islands</option>
|
|
|
<option value="Albania">Albania</option>
|
|
|
<option value="Algeria">Algeria</option>
|
|
|
<option value="American Samoa">American Samoa</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn sm-res-mg-t-10">
|
|
|
<h2>Disabled Items</h2>
|
|
|
</div>
|
|
|
<div class="chosen-select-act fm-cmp-mg">
|
|
|
<select class="chosen" data-placeholder="Choose a Country...">
|
|
|
<option value="United States">United States</option>
|
|
|
<option value="United Kingdom">United Kingdom</option>
|
|
|
<option disabled value="Afghanistan">Afghanistan</option>
|
|
|
<option disabled value="Aland Islands">Aland Islands</option>
|
|
|
<option value="Albania">Albania</option>
|
|
|
<option disabled value="Algeria">Algeria</option>
|
|
|
<option value="American Samoa">American Samoa</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn sm-res-mg-t-10">
|
|
|
<h2>Multiple Example</h2>
|
|
|
</div>
|
|
|
<div class="chosen-select-act fm-cmp-mg">
|
|
|
<select class="chosen" multiple data-placeholder="Choose a Country...">
|
|
|
<option value="United States">United States</option>
|
|
|
<option value="United Kingdom">United Kingdom</option>
|
|
|
<option value="Afghanistan">Afghanistan</option>
|
|
|
<option value="Aland Islands">Aland Islands</option>
|
|
|
<option value="Albania">Albania</option>
|
|
|
<option value="Algeria">Algeria</option>
|
|
|
<option value="American Samoa">American Samoa</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn sm-res-mg-t-10">
|
|
|
<h2>Option Group</h2>
|
|
|
</div>
|
|
|
<div class="chosen-select-act">
|
|
|
<select class="chosen" data-placeholder="Your Favorite Football Team">
|
|
|
<optgroup label="NFC EAST">
|
|
|
<option>Dallas Cowboys</option>
|
|
|
<option>New York Giants</option>
|
|
|
<option>Philadelphia Eagles</option>
|
|
|
<option>Washington Redskins</option>
|
|
|
</optgroup>
|
|
|
<optgroup label="NFC NORTH">
|
|
|
<option>Chicago Bears</option>
|
|
|
<option>Detroit Lions</option>
|
|
|
<option>Green Bay Packers</option>
|
|
|
<option>Minnesota Vikings</option>
|
|
|
</optgroup>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="form-element-list mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Toggle Switch</h2>
|
|
|
<p>Material Design look alike Toggle Switches based on Radio Box.</p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn tg-dp-mn">
|
|
|
<h2>Option Group</h2>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act fm-cmp-mg">
|
|
|
<div class="nk-toggle-switch">
|
|
|
<label for="ts1" class="ts-label">Toggle Swith Default</label>
|
|
|
<input id="ts1" type="checkbox" hidden="hidden">
|
|
|
<label for="ts1" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act sm-res-mg-t-10">
|
|
|
<div class="nk-toggle-switch disabled">
|
|
|
<label for="tsd" class="ts-label">Toggle Swith Disable</label>
|
|
|
<input id="tsd" type="checkbox" hidden="hidden" checked="checked" disabled="disabled">
|
|
|
<label for="tsd" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="nk-int-mk sl-dp-mn tg-dp-mn mg-t-30">
|
|
|
<h2>Optional Color schemes</h2>
|
|
|
<p>Use the given data attribute to change the color scheme of the Toggle Switch</p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act fm-cmp-mg">
|
|
|
<div class="nk-toggle-switch" data-ts-color="red">
|
|
|
<label for="ts2" class="ts-label">Toggle Swith Red</label>
|
|
|
<input id="ts2" type="checkbox" hidden="hidden">
|
|
|
<label for="ts2" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act sm-res-mg-t-10">
|
|
|
<div class="nk-toggle-switch" data-ts-color="blue">
|
|
|
<label for="ts3" class="ts-label">Toggle Swith Blue</label>
|
|
|
<input id="ts3" type="checkbox" hidden="hidden">
|
|
|
<label for="ts3" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act mg-t-30">
|
|
|
<div class="nk-toggle-switch" data-ts-color="green">
|
|
|
<label for="ts4" class="ts-label">Toggle Swith Green</label>
|
|
|
<input id="ts4" type="checkbox" hidden="hidden">
|
|
|
<label for="ts4" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act mg-t-30">
|
|
|
<div class="nk-toggle-switch" data-ts-color="cyan">
|
|
|
<label for="ts5" class="ts-label">Toggle Swith Cyan</label>
|
|
|
<input id="ts5" type="checkbox" hidden="hidden">
|
|
|
<label for="ts5" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act mg-t-30">
|
|
|
<div class="nk-toggle-switch" data-ts-color="lime">
|
|
|
<label for="ts6" class="ts-label">Toggle Swith Lime</label>
|
|
|
<input id="ts6" type="checkbox" hidden="hidden">
|
|
|
<label for="ts6" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act mg-t-30">
|
|
|
<div class="nk-toggle-switch" data-ts-color="amber">
|
|
|
<label for="ts7" class="ts-label">Toggle Swith Amber</label>
|
|
|
<input id="ts7" type="checkbox" hidden="hidden">
|
|
|
<label for="ts7" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act mg-t-30">
|
|
|
<div class="nk-toggle-switch" data-ts-color="purple">
|
|
|
<label for="ts8" class="ts-label">Toggle Swith Purple</label>
|
|
|
<input id="ts8" type="checkbox" hidden="hidden">
|
|
|
<label for="ts8" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="toggle-select-act mg-t-30">
|
|
|
<div class="nk-toggle-switch" data-ts-color="pink">
|
|
|
<label for="ts9" class="ts-label">Toggle Swith Pink</label>
|
|
|
<input id="ts9" type="checkbox" hidden="hidden">
|
|
|
<label for="ts9" class="ts-helper"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="range-slider-wrap mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Input Slider</h2>
|
|
|
<p>Range slider offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices.</p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="themesaller-forms fm-cmp-mg">
|
|
|
<div class="slider-wrapper purple-slider">
|
|
|
<div id="slider"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="themesaller-forms sm-res-mg-t-10">
|
|
|
<div class="slider-wrapper purple-slider">
|
|
|
<div id="slider1"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="themesaller-forms mg-t-30">
|
|
|
<div class="spacer-b16a">
|
|
|
<label for="amountp">Maximum price:</label>
|
|
|
<input type="text" id="amountp" class="slider-input">
|
|
|
</div>
|
|
|
<div class="slider-wrapper yellow-slider">
|
|
|
<div id="slider2"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="themesaller-forms mg-t-30">
|
|
|
<div class="spacer-b16a">
|
|
|
<label for="bedrooms">Number of bedrooms:</label>
|
|
|
<input type="text" id="bedrooms" class="slider-input">
|
|
|
</div>
|
|
|
<div class="slider-wrapper blue-slider">
|
|
|
<div id="slider3"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="themesaller-forms mg-t-30">
|
|
|
<div class="spacer-b16a">
|
|
|
<label for="budget">Project Budget:</label>
|
|
|
<input type="text" id="budget" class="slider-input">
|
|
|
</div>
|
|
|
<div class="slider-wrapper purple-slider">
|
|
|
<div id="slider8"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="themesaller-forms mg-t-30">
|
|
|
<div class="spacer-b16a">
|
|
|
<label for="amounts">Price range:</label>
|
|
|
<input type="text" id="amounts" class="slider-input">
|
|
|
</div>
|
|
|
<div class="slider-wrapper">
|
|
|
<div id="slider10"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="cmp-tb-hd mg-t-20 bcs-hd">
|
|
|
<h2>Vertical Range Slider</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="themesaller-forms">
|
|
|
<div id="eq" class="slider-group blue-slider">
|
|
|
<div class="sliderv-wrapper"><span>77</span>
|
|
|
</div>
|
|
|
<div class="sliderv-wrapper"><span>55</span>
|
|
|
</div>
|
|
|
<div class="sliderv-wrapper"><span>40</span>
|
|
|
</div>
|
|
|
<div class="sliderv-wrapper"><span>55</span>
|
|
|
</div>
|
|
|
<div class="sliderv-wrapper"><span>77</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
|
<div class="themesaller-forms">
|
|
|
<div id="eq2" class="slider-group purple-slider">
|
|
|
<div class="sliderv-wrapper"><span>77</span>
|
|
|
</div>
|
|
|
<div class="sliderv-wrapper"><span>55</span>
|
|
|
</div>
|
|
|
<div class="sliderv-wrapper"><span>40</span>
|
|
|
</div>
|
|
|
<div class="sliderv-wrapper"><span>55</span>
|
|
|
</div>
|
|
|
<div class="sliderv-wrapper"><span>77</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Form Element area End-->
|
|
|
<!-- Datepicker area Start-->
|
|
|
<div class="datepicker-area">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="datepicker-int mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Date Picker</h2>
|
|
|
<p>Date picker widget based on twitter bootstrap</p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group nk-datapk-ctm form-elet-mg" id="data_1">
|
|
|
<label>Simple data input format</label>
|
|
|
<div class="input-group date nk-int-st">
|
|
|
<span class="input-group-addon"></span>
|
|
|
<input type="text" class="form-control" value="03/19/2018">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group nk-datapk-ctm form-elet-mg" id="data_2">
|
|
|
<label>One Year view</label>
|
|
|
<div class="input-group date nk-int-st">
|
|
|
<span class="input-group-addon"></span>
|
|
|
<input type="text" class="form-control" value="03/19/2018">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="form-group nk-datapk-ctm form-elet-mg" id="data_3">
|
|
|
<label>Decade view</label>
|
|
|
<div class="input-group date nk-int-st">
|
|
|
<span class="input-group-addon"></span>
|
|
|
<input type="text" class="form-control" value="03/19/2018">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Datepicker area End-->
|
|
|
<!-- Color Picker area Start-->
|
|
|
<div class="colorpicker-area">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="colorpicker-int mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Color Picker</h2>
|
|
|
<p>Simplt HEX and HSL color picker with customizable options</p>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-container fm-cmp-mg">
|
|
|
<div class="input-group form-group form-elet-mg">
|
|
|
<span class="input-group-addon"><i class="notika-icon notika-success"></i></span>
|
|
|
<div class="nk-line dropdown nk-int-st">
|
|
|
<input type="text" class="form-control nk-value" value="#00c292" data-toggle="dropdown">
|
|
|
<div class="dropdown-menu">
|
|
|
<div class="color-picker" data-cp-default="#00c292"></div>
|
|
|
</div>
|
|
|
<i class="nk-value"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-container fm-cmp-mg">
|
|
|
<div class="input-group form-group form-elet-mg">
|
|
|
<span class="input-group-addon"><i class="notika-icon notika-success"></i></span>
|
|
|
<div class="nk-line dropdown nk-int-st">
|
|
|
<input type="text" class="form-control nk-value" value="#8BC34A" data-toggle="dropdown">
|
|
|
<div class="dropdown-menu">
|
|
|
<div class="color-picker" data-cp-default="#8BC34A"></div>
|
|
|
</div>
|
|
|
<i class="nk-value"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
|
|
<div class="nk-container">
|
|
|
<div class="input-group form-group form-elet-mg">
|
|
|
<span class="input-group-addon"><i class="notika-icon notika-success"></i></span>
|
|
|
<div class="nk-line dropdown nk-int-st">
|
|
|
<input type="text" class="form-control nk-value" value="#F44336" data-toggle="dropdown">
|
|
|
<div class="dropdown-menu">
|
|
|
<div class="color-picker" data-cp-default="#F44336"></div>
|
|
|
</div>
|
|
|
<i class="nk-value"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Color Picker area End-->
|
|
|
<!-- Summernote area Start-->
|
|
|
<div class="summernote-area">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="summernote-wrap mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>HTML Editor</h2>
|
|
|
<p>Super Simple WYSIWYG Editor on Bootstrap</p>
|
|
|
</div>
|
|
|
<div class="cmp-tb-hd bsc-smp-sm">
|
|
|
<label>Basic Example</label>
|
|
|
</div>
|
|
|
<div class="html-editor"></div>
|
|
|
<div class="cmp-tb-hd mg-t-20">
|
|
|
<h2>Click to edit</h2>
|
|
|
<p>You can edit content on the fly</p>
|
|
|
</div>
|
|
|
<div class="summernote-clickable">
|
|
|
<button class="btn btn-primary btn-sm hec-button">Click here to edit the content
|
|
|
</button>
|
|
|
<button class="btn btn-success btn-sm hec-save" style="display:none;">Save</button>
|
|
|
</div>
|
|
|
<div class="html-editor-click">
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula erat sit amet aliquam vehicula. Aliquam aliquet et risus et consequat. Quisque ultrices nulla eu magna vulputate, quis varius massa tempor. Suspendisse
|
|
|
sed condimentum purus, eget consequat dolor. Fusce aliquet ultricies porta. Nunc semper commodo leo at maximus. Duis maximus maximus leo, id lobortis nisi aliquam sit amet. Nullam vel ex id augue scelerisque congue sit
|
|
|
amet eget urna.</p>
|
|
|
</div>
|
|
|
<div class="cmp-tb-hd mg-t-20 air-mode-ctn">
|
|
|
<h2>Air-mode</h2>
|
|
|
<p>Air-mode gives clearer interface with hiddened toolbar. To reveal toolbar, select a text below where you want to shape up. </p>
|
|
|
</div>
|
|
|
<div class="html-editor-airmod" contenteditable="true">
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod quam vel lacinia facilisis. Sed condimentum nisi vel ante maximus, sit amet vestibulum leo euismod. Curabitur viverra faucibus nisi eu molestie. Donec convallis
|
|
|
finibus felis porttitor tristique. Nulla pretium est et ante dignissim.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Summernote area End-->
|
|
|
<!-- Dropzone area Start-->
|
|
|
<div class="dropzone-area">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="dropdone-nk mg-t-30">
|
|
|
<div class="cmp-tb-hd">
|
|
|
<h2>Drag and Drop File Uploader</h2>
|
|
|
<p>DropzoneJS is an open source library that provides Drag and Drop file uploads with image previews. It’s lightweight, doesn't depend on any other library (like jQuery) and is highly customizable.</p>
|
|
|
</div>
|
|
|
<div id="dropzone1" class="multi-uploader-cs">
|
|
|
<form action="/upload" class="dropzone dropzone-nk needsclick" id="demo1-upload">
|
|
|
<div class="dz-message needsclick download-custom">
|
|
|
<i class="notika-icon notika-cloud"></i>
|
|
|
<h2>Drop files here or click to upload.</h2>
|
|
|
<p><span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Dropzone area End-->
|
|
|
<!-- Start Footer area-->
|
|
|
<div class="footer-copyright-area">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
|
<div class="footer-copy-right">
|
|
|
<p>Copyright © 2018
|
|
|
. All rights reserved. Template by <a href="https://colorlib.com">Colorlib</a>.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- End Footer area-->
|
|
|
<!-- jquery
|
|
|
============================================ -->
|
|
|
<script src="js/vendor/jquery-1.12.4.min.js"></script>
|
|
|
<!-- bootstrap JS
|
|
|
============================================ -->
|
|
|
<script src="js/bootstrap.min.js"></script>
|
|
|
<!-- wow JS
|
|
|
============================================ -->
|
|
|
<script src="js/wow.min.js"></script>
|
|
|
<!-- price-slider JS
|
|
|
============================================ -->
|
|
|
<script src="js/jquery-price-slider.js"></script>
|
|
|
<!-- owl.carousel JS
|
|
|
============================================ -->
|
|
|
<script src="js/owl.carousel.min.js"></script>
|
|
|
<!-- scrollUp JS
|
|
|
============================================ -->
|
|
|
<script src="js/jquery.scrollUp.min.js"></script>
|
|
|
<!-- meanmenu JS
|
|
|
============================================ -->
|
|
|
<script src="js/meanmenu/jquery.meanmenu.js"></script>
|
|
|
<!-- counterup JS
|
|
|
============================================ -->
|
|
|
<script src="js/counterup/jquery.counterup.min.js"></script>
|
|
|
<script src="js/counterup/waypoints.min.js"></script>
|
|
|
<script src="js/counterup/counterup-active.js"></script>
|
|
|
<!-- mCustomScrollbar JS
|
|
|
============================================ -->
|
|
|
<script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
|
|
|
<!-- sparkline JS
|
|
|
============================================ -->
|
|
|
<script src="js/sparkline/jquery.sparkline.min.js"></script>
|
|
|
<script src="js/sparkline/sparkline-active.js"></script>
|
|
|
<!-- flot JS
|
|
|
============================================ -->
|
|
|
<script src="js/flot/jquery.flot.js"></script>
|
|
|
<script src="js/flot/jquery.flot.resize.js"></script>
|
|
|
<script src="js/flot/flot-active.js"></script>
|
|
|
<!-- knob JS
|
|
|
============================================ -->
|
|
|
<script src="js/knob/jquery.knob.js"></script>
|
|
|
<script src="js/knob/jquery.appear.js"></script>
|
|
|
<script src="js/knob/knob-active.js"></script>
|
|
|
<!-- Input Mask JS
|
|
|
============================================ -->
|
|
|
<script src="js/jasny-bootstrap.min.js"></script>
|
|
|
<!-- icheck JS
|
|
|
============================================ -->
|
|
|
<script src="js/icheck/icheck.min.js"></script>
|
|
|
<script src="js/icheck/icheck-active.js"></script>
|
|
|
<!-- rangle-slider JS
|
|
|
============================================ -->
|
|
|
<script src="js/rangle-slider/jquery-ui-1.10.4.custom.min.js"></script>
|
|
|
<script src="js/rangle-slider/jquery-ui-touch-punch.min.js"></script>
|
|
|
<script src="js/rangle-slider/rangle-active.js"></script>
|
|
|
<!-- datapicker JS
|
|
|
============================================ -->
|
|
|
<script src="js/datapicker/bootstrap-datepicker.js"></script>
|
|
|
<script src="js/datapicker/datepicker-active.js"></script>
|
|
|
<!-- bootstrap select JS
|
|
|
============================================ -->
|
|
|
<script src="js/bootstrap-select/bootstrap-select.js"></script>
|
|
|
<!-- color-picker JS
|
|
|
============================================ -->
|
|
|
<script src="js/color-picker/farbtastic.min.js"></script>
|
|
|
<script src="js/color-picker/color-picker.js"></script>
|
|
|
<!-- notification JS
|
|
|
============================================ -->
|
|
|
<script src="js/notification/bootstrap-growl.min.js"></script>
|
|
|
<script src="js/notification/notification-active.js"></script>
|
|
|
<!-- summernote JS
|
|
|
============================================ -->
|
|
|
<script src="js/summernote/summernote-updated.min.js"></script>
|
|
|
<script src="js/summernote/summernote-active.js"></script>
|
|
|
<!-- dropzone JS
|
|
|
============================================ -->
|
|
|
<script src="js/dropzone/dropzone.js"></script>
|
|
|
<!-- wave JS
|
|
|
============================================ -->
|
|
|
<script src="js/wave/waves.min.js"></script>
|
|
|
<script src="js/wave/wave-active.js"></script>
|
|
|
<!-- chosen JS
|
|
|
============================================ -->
|
|
|
<script src="js/chosen/chosen.jquery.js"></script>
|
|
|
<!-- Chat JS
|
|
|
============================================ -->
|
|
|
<script src="js/chat/jquery.chat.js"></script>
|
|
|
<!-- todo JS
|
|
|
============================================ -->
|
|
|
<script src="js/todo/jquery.todo.js"></script>
|
|
|
<!-- plugins JS
|
|
|
============================================ -->
|
|
|
<script src="js/plugins.js"></script>
|
|
|
<!-- main JS
|
|
|
============================================ -->
|
|
|
<script src="js/main.js"></script>
|
|
|
<!-- tawk chat JS
|
|
|
============================================ -->
|
|
|
<script src="js/tawk-chat.js"></script>
|
|
|
</body>
|
|
|
|
|
|
</html> |