mirror of
https://github.com/stisla/stisla.git
synced 2025-08-30 11:30:07 +02:00
added Nunjucks template engine
This commit is contained in:
Muhamad Nauval Azhar
17
dist/ex.html
vendored
Normal file
17
dist/ex.html
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
This is the default content
|
||||
|
||||
<section class="left">
|
||||
This is the left side!
|
||||
</section>
|
||||
|
||||
<section class="right">
|
||||
This is the right side!
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
296
dist/index-0.html
vendored
296
dist/index-0.html
vendored
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
|
||||
<title>General Dashboard — Stisla</title>
|
||||
<title>General Dashboard — </title>
|
||||
|
||||
<!-- General CSS Files -->
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
@@ -250,153 +250,153 @@
|
||||
<a href="index.html">St</a>
|
||||
</div>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="menu-header">Dashboard</li>
|
||||
<li class="dropdown active">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class=active><a class="nav-link" href="index-0.html">General Dashboard</a></li>
|
||||
<li><a class="nav-link" href="index.html">Ecommerce Dashboard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Starter</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>Layout</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="layout-default.html">Default Layout</a></li>
|
||||
<li><a class="nav-link" href="layout-transparent.html">Transparent Sidebar</a></li>
|
||||
<li><a class="nav-link" href="layout-top-navigation.html">Top Navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>Blank Page</span></a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>Bootstrap</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="bootstrap-alert.html">Alert</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-badge.html">Badge</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-breadcrumb.html">Breadcrumb</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-buttons.html">Buttons</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-card.html">Card</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-carousel.html">Carousel</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-collapse.html">Collapse</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-dropdown.html">Dropdown</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-form.html">Form</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-list-group.html">List Group</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-media-object.html">Media Object</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-modal.html">Modal</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-nav.html">Nav</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-navbar.html">Navbar</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-pagination.html">Pagination</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-popover.html">Popover</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-progress.html">Progress</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-table.html">Table</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-tooltip.html">Tooltip</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Stisla</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>Components</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="components-article.html">Article</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-avatar.html">Avatar</a></li>
|
||||
<li><a class="nav-link" href="components-chat-box.html">Chat Box</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-empty-state.html">Empty State</a></li>
|
||||
<li><a class="nav-link" href="components-gallery.html">Gallery</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-hero.html">Hero</a></li>
|
||||
<li><a class="nav-link" href="components-multiple-upload.html">Multiple Upload</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-pricing.html">Pricing</a></li>
|
||||
<li><a class="nav-link" href="components-statistic.html">Statistic</a></li>
|
||||
<li><a class="nav-link" href="components-tab.html">Tab</a></li>
|
||||
<li><a class="nav-link" href="components-table.html">Table</a></li>
|
||||
<li><a class="nav-link" href="components-user.html">User</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-wizard.html">Wizard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>Forms</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="forms-advanced-form.html">Advanced Form</a></li>
|
||||
<li><a class="nav-link" href="forms-editor.html">Editor</a></li>
|
||||
<li><a class="nav-link" href="forms-validation.html">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-map-marker-alt"></i> <span>Google Maps</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="gmaps-advanced-route.html">Advanced Route</a></li>
|
||||
<li><a href="gmaps-draggable-marker.html">Draggable Marker</a></li>
|
||||
<li><a href="gmaps-geocoding.html">Geocoding</a></li>
|
||||
<li><a href="gmaps-geolocation.html">Geolocation</a></li>
|
||||
<li><a href="gmaps-marker.html">Marker</a></li>
|
||||
<li><a href="gmaps-multiple-marker.html">Multiple Marker</a></li>
|
||||
<li><a href="gmaps-route.html">Route</a></li>
|
||||
<li><a href="gmaps-simple.html">Simple</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>Modules</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="modules-calendar.html">Calendar</a></li>
|
||||
<li><a class="nav-link" href="modules-chartjs.html">ChartJS</a></li>
|
||||
<li><a class="nav-link" href="modules-datatables.html">DataTables</a></li>
|
||||
<li><a class="nav-link" href="modules-flag.html">Flag</a></li>
|
||||
<li><a class="nav-link" href="modules-font-awesome.html">Font Awesome</a></li>
|
||||
<li><a class="nav-link" href="modules-ion-icons.html">Ion Icons</a></li>
|
||||
<li><a class="nav-link" href="modules-owl-carousel.html">Owl Carousel</a></li>
|
||||
<li><a class="nav-link" href="modules-sparkline.html">Sparkline</a></li>
|
||||
<li><a class="nav-link" href="modules-sweet-alert.html">Sweet Alert</a></li>
|
||||
<li><a class="nav-link" href="modules-toastr.html">Toastr</a></li>
|
||||
<li><a class="nav-link" href="modules-vector-map.html">Vector Map</a></li>
|
||||
<li><a class="nav-link" href="modules-weather-icon.html">Weather Icon</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Pages</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>Auth</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="auth-forgot-password.html">Forgot Password</a></li>
|
||||
<li><a href="auth-login.html">Login</a></li>
|
||||
<li><a href="auth-register.html">Register</a></li>
|
||||
<li><a href="auth-reset-password.html">Reset Password</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>Errors</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="errors-503.html">503</a></li>
|
||||
<li><a class="nav-link" href="errors-403.html">403</a></li>
|
||||
<li><a class="nav-link" href="errors-404.html">404</a></li>
|
||||
<li><a class="nav-link" href="errors-500.html">500</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-bicycle"></i> <span>Features</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="features-activities.html">Activities</a></li>
|
||||
<li><a class="nav-link" href="features-post-create.html">Post Create</a></li>
|
||||
<li><a class="nav-link" href="features-posts.html">Posts</a></li>
|
||||
<li><a class="nav-link" href="features-profile.html">Profile</a></li>
|
||||
<li><a class="nav-link" href="features-settings.html">Settings</a></li>
|
||||
<li><a class="nav-link" href="features-setting-detail.html">Setting Detail</a></li>
|
||||
<li><a class="nav-link" href="features-tickets.html">Tickets</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-ellipsis-h"></i> <span>Utilities</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="utilities-contact.html">Contact</a></li>
|
||||
<li><a class="nav-link" href="utilities-invoice.html">Invoice</a></li>
|
||||
<li><a href="utilities-subscribe.html">Subscribe</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>Credits</span></a></li>
|
||||
</ul>
|
||||
<li class="menu-header">Dashboard</li>
|
||||
<li class="nav-item dropdown active">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="active"><a class="nav-link" href="index-0.html">General Dashboard</a></li>
|
||||
<li><a class="nav-link" href="index.html">Ecommerce Dashboard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Starter</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>Layout</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="layout-default.html">Default Layout</a></li>
|
||||
<li><a class="nav-link" href="layout-transparent.html">Transparent Sidebar</a></li>
|
||||
<li><a class="nav-link" href="layout-top-navigation.html">Top Navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>Blank Page</span></a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>Bootstrap</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="bootstrap-alert.html">Alert</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-badge.html">Badge</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-breadcrumb.html">Breadcrumb</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-buttons.html">Buttons</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-card.html">Card</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-carousel.html">Carousel</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-collapse.html">Collapse</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-dropdown.html">Dropdown</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-form.html">Form</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-list-group.html">List Group</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-media-object.html">Media Object</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-modal.html">Modal</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-nav.html">Nav</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-navbar.html">Navbar</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-pagination.html">Pagination</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-popover.html">Popover</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-progress.html">Progress</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-table.html">Table</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-tooltip.html">Tooltip</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Stisla</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>Components</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="components-article.html">Article</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-avatar.html">Avatar</a></li>
|
||||
<li><a class="nav-link" href="components-chat-box.html">Chat Box</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-empty-state.html">Empty State</a></li>
|
||||
<li><a class="nav-link" href="components-gallery.html">Gallery</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-hero.html">Hero</a></li>
|
||||
<li><a class="nav-link" href="components-multiple-upload.html">Multiple Upload</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-pricing.html">Pricing</a></li>
|
||||
<li><a class="nav-link" href="components-statistic.html">Statistic</a></li>
|
||||
<li><a class="nav-link" href="components-tab.html">Tab</a></li>
|
||||
<li><a class="nav-link" href="components-table.html">Table</a></li>
|
||||
<li><a class="nav-link" href="components-user.html">User</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-wizard.html">Wizard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>Forms</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="forms-advanced-form.html">Advanced Form</a></li>
|
||||
<li><a class="nav-link" href="forms-editor.html">Editor</a></li>
|
||||
<li><a class="nav-link" href="forms-validation.html">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-map-marker-alt"></i> <span>Google Maps</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="gmaps-advanced-route.html">Advanced Route</a></li>
|
||||
<li><a href="gmaps-draggable-marker.html">Draggable Marker</a></li>
|
||||
<li><a href="gmaps-geocoding.html">Geocoding</a></li>
|
||||
<li><a href="gmaps-geolocation.html">Geolocation</a></li>
|
||||
<li><a href="gmaps-marker.html">Marker</a></li>
|
||||
<li><a href="gmaps-multiple-marker.html">Multiple Marker</a></li>
|
||||
<li><a href="gmaps-route.html">Route</a></li>
|
||||
<li><a href="gmaps-simple.html">Simple</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>Modules</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="modules-calendar.html">Calendar</a></li>
|
||||
<li><a class="nav-link" href="modules-chartjs.html">ChartJS</a></li>
|
||||
<li><a class="nav-link" href="modules-datatables.html">DataTables</a></li>
|
||||
<li><a class="nav-link" href="modules-flag.html">Flag</a></li>
|
||||
<li><a class="nav-link" href="modules-font-awesome.html">Font Awesome</a></li>
|
||||
<li><a class="nav-link" href="modules-ion-icons.html">Ion Icons</a></li>
|
||||
<li><a class="nav-link" href="modules-owl-carousel.html">Owl Carousel</a></li>
|
||||
<li><a class="nav-link" href="modules-sparkline.html">Sparkline</a></li>
|
||||
<li><a class="nav-link" href="modules-sweet-alert.html">Sweet Alert</a></li>
|
||||
<li><a class="nav-link" href="modules-toastr.html">Toastr</a></li>
|
||||
<li><a class="nav-link" href="modules-vector-map.html">Vector Map</a></li>
|
||||
<li><a class="nav-link" href="modules-weather-icon.html">Weather Icon</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Pages</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>Auth</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="auth-forgot-password.html">Forgot Password</a></li>
|
||||
<li><a href="auth-login.html">Login</a></li>
|
||||
<li><a href="auth-register.html">Register</a></li>
|
||||
<li><a href="auth-reset-password.html">Reset Password</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>Errors</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="errors-503.html">503</a></li>
|
||||
<li><a class="nav-link" href="errors-403.html">403</a></li>
|
||||
<li><a class="nav-link" href="errors-404.html">404</a></li>
|
||||
<li><a class="nav-link" href="errors-500.html">500</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-bicycle"></i> <span>Features</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="features-activities.html">Activities</a></li>
|
||||
<li><a class="nav-link" href="features-post-create.html">Post Create</a></li>
|
||||
<li><a class="nav-link" href="features-posts.html">Posts</a></li>
|
||||
<li><a class="nav-link" href="features-profile.html">Profile</a></li>
|
||||
<li><a class="nav-link" href="features-settings.html">Settings</a></li>
|
||||
<li><a class="nav-link" href="features-setting-detail.html">Setting Detail</a></li>
|
||||
<li><a class="nav-link" href="features-tickets.html">Tickets</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-ellipsis-h"></i> <span>Utilities</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="utilities-contact.html">Contact</a></li>
|
||||
<li><a class="nav-link" href="utilities-invoice.html">Invoice</a></li>
|
||||
<li><a href="utilities-subscribe.html">Subscribe</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>Credits</span></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
|
||||
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
|
||||
<i class="fas fa-rocket"></i> Documentation
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
|
||||
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
|
||||
<i class="fas fa-rocket"></i> Documentation
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -988,7 +988,7 @@
|
||||
Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
|
||||
2.3.0
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
152
dist/index.html
vendored
152
dist/index.html
vendored
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
|
||||
<title>Ecommerce Dashboard — Stisla</title>
|
||||
<title> — </title>
|
||||
|
||||
<!-- General CSS Files -->
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
@@ -249,154 +249,6 @@
|
||||
<div class="sidebar-brand sidebar-brand-sm">
|
||||
<a href="index.html">St</a>
|
||||
</div>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="menu-header">Dashboard</li>
|
||||
<li class="dropdown active">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="index-0.html">General Dashboard</a></li>
|
||||
<li class=active><a class="nav-link" href="index.html">Ecommerce Dashboard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Starter</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>Layout</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="layout-default.html">Default Layout</a></li>
|
||||
<li><a class="nav-link" href="layout-transparent.html">Transparent Sidebar</a></li>
|
||||
<li><a class="nav-link" href="layout-top-navigation.html">Top Navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>Blank Page</span></a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>Bootstrap</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="bootstrap-alert.html">Alert</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-badge.html">Badge</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-breadcrumb.html">Breadcrumb</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-buttons.html">Buttons</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-card.html">Card</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-carousel.html">Carousel</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-collapse.html">Collapse</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-dropdown.html">Dropdown</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-form.html">Form</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-list-group.html">List Group</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-media-object.html">Media Object</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-modal.html">Modal</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-nav.html">Nav</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-navbar.html">Navbar</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-pagination.html">Pagination</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-popover.html">Popover</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-progress.html">Progress</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-table.html">Table</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-tooltip.html">Tooltip</a></li>
|
||||
<li><a class="nav-link" href="bootstrap-typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Stisla</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>Components</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="components-article.html">Article</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-avatar.html">Avatar</a></li>
|
||||
<li><a class="nav-link" href="components-chat-box.html">Chat Box</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-empty-state.html">Empty State</a></li>
|
||||
<li><a class="nav-link" href="components-gallery.html">Gallery</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-hero.html">Hero</a></li>
|
||||
<li><a class="nav-link" href="components-multiple-upload.html">Multiple Upload</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-pricing.html">Pricing</a></li>
|
||||
<li><a class="nav-link" href="components-statistic.html">Statistic</a></li>
|
||||
<li><a class="nav-link" href="components-tab.html">Tab</a></li>
|
||||
<li><a class="nav-link" href="components-table.html">Table</a></li>
|
||||
<li><a class="nav-link" href="components-user.html">User</a></li>
|
||||
<li><a class="nav-link beep beep-sidebar" href="components-wizard.html">Wizard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>Forms</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="forms-advanced-form.html">Advanced Form</a></li>
|
||||
<li><a class="nav-link" href="forms-editor.html">Editor</a></li>
|
||||
<li><a class="nav-link" href="forms-validation.html">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-map-marker-alt"></i> <span>Google Maps</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="gmaps-advanced-route.html">Advanced Route</a></li>
|
||||
<li><a href="gmaps-draggable-marker.html">Draggable Marker</a></li>
|
||||
<li><a href="gmaps-geocoding.html">Geocoding</a></li>
|
||||
<li><a href="gmaps-geolocation.html">Geolocation</a></li>
|
||||
<li><a href="gmaps-marker.html">Marker</a></li>
|
||||
<li><a href="gmaps-multiple-marker.html">Multiple Marker</a></li>
|
||||
<li><a href="gmaps-route.html">Route</a></li>
|
||||
<li><a href="gmaps-simple.html">Simple</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>Modules</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="modules-calendar.html">Calendar</a></li>
|
||||
<li><a class="nav-link" href="modules-chartjs.html">ChartJS</a></li>
|
||||
<li><a class="nav-link" href="modules-datatables.html">DataTables</a></li>
|
||||
<li><a class="nav-link" href="modules-flag.html">Flag</a></li>
|
||||
<li><a class="nav-link" href="modules-font-awesome.html">Font Awesome</a></li>
|
||||
<li><a class="nav-link" href="modules-ion-icons.html">Ion Icons</a></li>
|
||||
<li><a class="nav-link" href="modules-owl-carousel.html">Owl Carousel</a></li>
|
||||
<li><a class="nav-link" href="modules-sparkline.html">Sparkline</a></li>
|
||||
<li><a class="nav-link" href="modules-sweet-alert.html">Sweet Alert</a></li>
|
||||
<li><a class="nav-link" href="modules-toastr.html">Toastr</a></li>
|
||||
<li><a class="nav-link" href="modules-vector-map.html">Vector Map</a></li>
|
||||
<li><a class="nav-link" href="modules-weather-icon.html">Weather Icon</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Pages</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>Auth</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="auth-forgot-password.html">Forgot Password</a></li>
|
||||
<li><a href="auth-login.html">Login</a></li>
|
||||
<li><a href="auth-register.html">Register</a></li>
|
||||
<li><a href="auth-reset-password.html">Reset Password</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>Errors</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="errors-503.html">503</a></li>
|
||||
<li><a class="nav-link" href="errors-403.html">403</a></li>
|
||||
<li><a class="nav-link" href="errors-404.html">404</a></li>
|
||||
<li><a class="nav-link" href="errors-500.html">500</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-bicycle"></i> <span>Features</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="nav-link" href="features-activities.html">Activities</a></li>
|
||||
<li><a class="nav-link" href="features-post-create.html">Post Create</a></li>
|
||||
<li><a class="nav-link" href="features-posts.html">Posts</a></li>
|
||||
<li><a class="nav-link" href="features-profile.html">Profile</a></li>
|
||||
<li><a class="nav-link" href="features-settings.html">Settings</a></li>
|
||||
<li><a class="nav-link" href="features-setting-detail.html">Setting Detail</a></li>
|
||||
<li><a class="nav-link" href="features-tickets.html">Tickets</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-ellipsis-h"></i> <span>Utilities</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="utilities-contact.html">Contact</a></li>
|
||||
<li><a class="nav-link" href="utilities-invoice.html">Invoice</a></li>
|
||||
<li><a href="utilities-subscribe.html">Subscribe</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>Credits</span></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
|
||||
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
|
||||
<i class="fas fa-rocket"></i> Documentation
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -884,7 +736,7 @@
|
||||
Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
|
||||
2.3.0
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
25
gulpfile.js
25
gulpfile.js
@@ -14,6 +14,7 @@ const cssnano = require('cssnano');
|
||||
const uglify = require('gulp-uglify-es').default;
|
||||
const imagemin = require('gulp-imagemin');
|
||||
const imageminMozjpeg = require('imagemin-mozjpeg');
|
||||
const nunjucks = require('gulp-nunjucks');
|
||||
|
||||
/**
|
||||
* Configuration
|
||||
@@ -221,8 +222,32 @@ function watchcss(){
|
||||
watch('./sources/sass/*.scss', minify);
|
||||
}
|
||||
|
||||
function template() {
|
||||
return src('pages/index-0.html')
|
||||
.pipe(nunjucks.compile({
|
||||
version: '2.3.0'
|
||||
}, {
|
||||
trimBlocks: true,
|
||||
lstripBlocks: true,
|
||||
filters: {
|
||||
is_active: (str, reg, page) => {
|
||||
reg = new RegExp(reg, 'gm');
|
||||
reg = reg.exec(page);
|
||||
if(reg != null) {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
.pipe(dest('dist'))
|
||||
.pipe(notify({
|
||||
message: 'File <%= file.relative %> compiled successfully'
|
||||
}));
|
||||
}
|
||||
|
||||
//create folder first
|
||||
// exports.folder = folder;
|
||||
exports.html = template;
|
||||
//then update source
|
||||
exports.update = parallel(bundle_main_css, bundle_modules_css, bundle_components_css);
|
||||
//minify IMG SOURCE
|
||||
|
||||
9217
package-lock.json
generated
Normal file
9217
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -14,13 +14,15 @@
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-imagemin": "^5.0.3",
|
||||
"gulp-notify": "^3.2.0",
|
||||
"gulp-nunjucks": "^4.0.0",
|
||||
"gulp-plumber": "^1.2.1",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-rename": "^1.4.0",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"gulp-uglify": "^3.0.1",
|
||||
"gulp-uglify-es": "^1.0.4",
|
||||
"imagemin-mozjpeg": "^8.0.0"
|
||||
"imagemin-mozjpeg": "^8.0.0",
|
||||
"nunjucks": "^3.1.7"
|
||||
},
|
||||
"scripts": {
|
||||
"postinstall": "cd dist && yarn install"
|
||||
|
||||
41
pages/auth-forgot-password.html
Normal file
41
pages/auth-forgot-password.html
Normal file
@@ -0,0 +1,41 @@
|
||||
{% set title = 'Forgot Password' %}
|
||||
{% set page = 'auth-forgot-password.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
|
||||
<div class="login-brand">
|
||||
<img src="assets/img/stisla-fill.svg" alt="logo" width="100" class="shadow-light rounded-circle">
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h4>Forgot Password</h4></div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">We will send a link to reset your password</p>
|
||||
<form method="POST">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" class="form-control" name="email" tabindex="1" required autofocus>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="4">
|
||||
Forgot Password
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simple-footer">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
88
pages/auth-login.html
Normal file
88
pages/auth-login.html
Normal file
@@ -0,0 +1,88 @@
|
||||
{% set title = 'Login' %}
|
||||
{% set page = 'auth-login.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
|
||||
<div class="login-brand">
|
||||
<img src="assets/img/stisla-fill.svg" alt="logo" width="100" class="shadow-light rounded-circle">
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h4>Login</h4></div>
|
||||
|
||||
<div class="card-body">
|
||||
<form method="POST" action="#" class="needs-validation" novalidate="">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" class="form-control" name="email" tabindex="1" required autofocus>
|
||||
<div class="invalid-feedback">
|
||||
Please fill in your email
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="d-block">
|
||||
<label for="password" class="control-label">Password</label>
|
||||
<div class="float-right">
|
||||
<a href="auth-forgot-password.html" class="text-small">
|
||||
Forgot Password?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<input id="password" type="password" class="form-control" name="password" tabindex="2" required>
|
||||
<div class="invalid-feedback">
|
||||
please fill in your password
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" name="remember" class="custom-control-input" tabindex="3" id="remember-me">
|
||||
<label class="custom-control-label" for="remember-me">Remember Me</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="4">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="text-center mt-4 mb-3">
|
||||
<div class="text-job text-muted">Login With Social</div>
|
||||
</div>
|
||||
<div class="row sm-gutters">
|
||||
<div class="col-6">
|
||||
<a class="btn btn-block btn-social btn-facebook">
|
||||
<span class="fab fa-facebook"></span> Facebook
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<a class="btn btn-block btn-social btn-twitter">
|
||||
<span class="fab fa-twitter"></span> Twitter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 text-muted text-center">
|
||||
Don't have an account? <a href="auth-register.html">Create One</a>
|
||||
</div>
|
||||
<div class="simple-footer">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
121
pages/auth-register.html
Normal file
121
pages/auth-register.html
Normal file
@@ -0,0 +1,121 @@
|
||||
{% set title = 'Register' %}
|
||||
{% set page = 'auth-register.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/selectric/public/selectric.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-xl-8 offset-xl-2">
|
||||
<div class="login-brand">
|
||||
<img src="assets/img/stisla-fill.svg" alt="logo" width="100" class="shadow-light rounded-circle">
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h4>Register</h4></div>
|
||||
|
||||
<div class="card-body">
|
||||
<form method="POST">
|
||||
<div class="row">
|
||||
<div class="form-group col-6">
|
||||
<label for="frist_name">First Name</label>
|
||||
<input id="frist_name" type="text" class="form-control" name="frist_name" autofocus>
|
||||
</div>
|
||||
<div class="form-group col-6">
|
||||
<label for="last_name">Last Name</label>
|
||||
<input id="last_name" type="text" class="form-control" name="last_name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" class="form-control" name="email">
|
||||
<div class="invalid-feedback">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-6">
|
||||
<label for="password" class="d-block">Password</label>
|
||||
<input id="password" type="password" class="form-control pwstrength" data-indicator="pwindicator" name="password">
|
||||
<div id="pwindicator" class="pwindicator">
|
||||
<div class="bar"></div>
|
||||
<div class="label"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-6">
|
||||
<label for="password2" class="d-block">Password Confirmation</label>
|
||||
<input id="password2" type="password" class="form-control" name="password-confirm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-divider">
|
||||
Your Home
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-6">
|
||||
<label>Country</label>
|
||||
<select class="form-control selectric">
|
||||
<option>Indonesia</option>
|
||||
<option>Palestine</option>
|
||||
<option>Syria</option>
|
||||
<option>Malaysia</option>
|
||||
<option>Thailand</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-6">
|
||||
<label>Province</label>
|
||||
<select class="form-control selectric">
|
||||
<option>West Java</option>
|
||||
<option>East Java</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-6">
|
||||
<label>City</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="form-group col-6">
|
||||
<label>Postal Code</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" name="agree" class="custom-control-input" id="agree">
|
||||
<label class="custom-control-label" for="agree">I agree with the terms and conditions</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-block">
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simple-footer">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/jquery-pwstrength/jquery.pwstrength.min.js"></script>
|
||||
<script src="node_modules/selectric/public/jquery.selectric.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/auth-register.js"></script>
|
||||
{% endblock %}
|
||||
55
pages/auth-reset-password.html
Normal file
55
pages/auth-reset-password.html
Normal file
@@ -0,0 +1,55 @@
|
||||
{% set title = 'Reset Password' %}
|
||||
{% set page = 'auth-reset-password.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
|
||||
<div class="login-brand">
|
||||
<img src="assets/img/stisla-fill.svg" alt="logo" width="100" class="shadow-light rounded-circle">
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h4>Reset Password</h4></div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="text-muted">We will send a link to reset your password</p>
|
||||
<form method="POST">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" class="form-control" name="email" tabindex="1" required autofocus>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">New Password</label>
|
||||
<input id="password" type="password" class="form-control pwstrength" data-indicator="pwindicator" name="password" tabindex="2" required>
|
||||
<div id="pwindicator" class="pwindicator">
|
||||
<div class="bar"></div>
|
||||
<div class="label"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password-confirm">Confirm Password</label>
|
||||
<input id="password-confirm" type="password" class="form-control" name="confirm-password" tabindex="2" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="4">
|
||||
Reset Password
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simple-footer">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
14
pages/blank.html
Normal file
14
pages/blank.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{% set title = 'Blank Page' %}
|
||||
{% set page = 'blank.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Blank Page</h1>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
234
pages/bootstrap-alert.html
Normal file
234
pages/bootstrap-alert.html
Normal file
@@ -0,0 +1,234 @@
|
||||
{% set title = 'Bootstrap Components › Alert' %}
|
||||
{% set page = 'bootstrap-alert.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Alert</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Alert</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Alerts</h2>
|
||||
<p class="section-lead">
|
||||
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Default</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-primary">
|
||||
This is a primary alert.
|
||||
</div>
|
||||
<div class="alert alert-secondary">
|
||||
This is a secondary alert.
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
This is a success alert.
|
||||
</div>
|
||||
<div class="alert alert-danger">
|
||||
This is a danger alert.
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
This is a warning alert.
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
This is a info alert.
|
||||
</div>
|
||||
<div class="alert alert-light">
|
||||
This is a light alert.
|
||||
</div>
|
||||
<div class="alert alert-dark">
|
||||
This is a dark alert.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Icon</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-primary alert-has-icon">
|
||||
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
|
||||
<div class="alert-body">
|
||||
<div class="alert-title">Primary</div>
|
||||
This is a primary alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-has-icon">
|
||||
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
|
||||
<div class="alert-body">
|
||||
<div class="alert-title">Secondary</div>
|
||||
This is a secondary alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success alert-has-icon">
|
||||
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
|
||||
<div class="alert-body">
|
||||
<div class="alert-title">Success</div>
|
||||
This is a success alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-has-icon">
|
||||
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
|
||||
<div class="alert-body">
|
||||
<div class="alert-title">Danger</div>
|
||||
This is a danger alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-has-icon">
|
||||
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
|
||||
<div class="alert-body">
|
||||
<div class="alert-title">Warning</div>
|
||||
This is a warning alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info alert-has-icon">
|
||||
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
|
||||
<div class="alert-body">
|
||||
<div class="alert-title">Info</div>
|
||||
This is a info alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-light alert-has-icon">
|
||||
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
|
||||
<div class="alert-body">
|
||||
<div class="alert-title">Light</div>
|
||||
This is a light alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-dark alert-has-icon">
|
||||
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
|
||||
<div class="alert-body">
|
||||
<div class="alert-title">Dark</div>
|
||||
This is a dark alert.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Title</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-primary">
|
||||
<div class="alert-title">Primary</div>
|
||||
This is a primary alert.
|
||||
</div>
|
||||
<div class="alert alert-secondary">
|
||||
<div class="alert-title">Secondary</div>
|
||||
This is a secondary alert.
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<div class="alert-title">Success</div>
|
||||
This is a success alert.
|
||||
</div>
|
||||
<div class="alert alert-danger">
|
||||
<div class="alert-title">Danger</div>
|
||||
This is a danger alert.
|
||||
</div>
|
||||
<div class="alert alert-warning">
|
||||
<div class="alert-title">Warning</div>
|
||||
This is a warning alert.
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<div class="alert-title">Info</div>
|
||||
This is a info alert.
|
||||
</div>
|
||||
<div class="alert alert-light">
|
||||
<div class="alert-title">Light</div>
|
||||
This is a light alert.
|
||||
</div>
|
||||
<div class="alert alert-dark">
|
||||
<div class="alert-title">Dark</div>
|
||||
This is a dark alert.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Dismissable</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-primary alert-dismissible show fade">
|
||||
<div class="alert-body">
|
||||
<button class="close" data-dismiss="alert">
|
||||
<span>×</span>
|
||||
</button>
|
||||
This is a primary alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-dismissible show fade">
|
||||
<div class="alert-body">
|
||||
<button class="close" data-dismiss="alert">
|
||||
<span>×</span>
|
||||
</button>
|
||||
This is a secondary alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success alert-dismissible show fade">
|
||||
<div class="alert-body">
|
||||
<button class="close" data-dismiss="alert">
|
||||
<span>×</span>
|
||||
</button>
|
||||
This is a success alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible show fade">
|
||||
<div class="alert-body">
|
||||
<button class="close" data-dismiss="alert">
|
||||
<span>×</span>
|
||||
</button>
|
||||
This is a danger alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible show fade">
|
||||
<div class="alert-body">
|
||||
<button class="close" data-dismiss="alert">
|
||||
<span>×</span>
|
||||
</button>
|
||||
This is a warning alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible show fade">
|
||||
<div class="alert-body">
|
||||
<button class="close" data-dismiss="alert">
|
||||
<span>×</span>
|
||||
</button>
|
||||
This is a info alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-light alert-dismissible show fade">
|
||||
<div class="alert-body">
|
||||
<button class="close" data-dismiss="alert">
|
||||
<span>×</span>
|
||||
</button>
|
||||
This is a light alert.
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-dark alert-dismissible show fade">
|
||||
<div class="alert-body">
|
||||
<button class="close" data-dismiss="alert">
|
||||
<span>×</span>
|
||||
</button>
|
||||
This is a dark alert.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
115
pages/bootstrap-badge.html
Normal file
115
pages/bootstrap-badge.html
Normal file
@@ -0,0 +1,115 @@
|
||||
{% set title = 'Bootstrap Components › Badge' %}
|
||||
{% set page = 'bootstrap-badge.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Badge</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Badge</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Badges</h2>
|
||||
<p class="section-lead">
|
||||
Examples for badges, our small count and labeling component.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Heading</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1>Heading 1 <span class="badge badge-secondary">New</span></h1>
|
||||
<h2>Heading 2 <span class="badge badge-secondary">New</span></h2>
|
||||
<h3>Heading 3 <span class="badge badge-secondary">New</span></h3>
|
||||
<h4>Heading 4 <span class="badge badge-secondary">New</span></h4>
|
||||
<h5>Heading 5 <span class="badge badge-secondary">New</span></h5>
|
||||
<h6>Heading 6 <span class="badge badge-secondary">New</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Variation</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="badges">
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Button</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="buttons">
|
||||
<div class="section-title mt-0">Simple</div>
|
||||
<button type="button" class="btn btn-primary">
|
||||
Notifications <span class="badge badge-transparent">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger">
|
||||
Notifications <span class="badge badge-transparent">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning">
|
||||
Notifications <span class="badge badge-transparent">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success">
|
||||
Notifications <span class="badge badge-transparent">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-dark">
|
||||
Notifications <span class="badge badge-transparent">4</span>
|
||||
</button>
|
||||
<div class="section-title">Icons</div>
|
||||
<button type="button" class="btn btn-primary btn-icon icon-left">
|
||||
<i class="fas fa-plane"></i> Notifications <span class="badge badge-transparent">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-icon icon-left">
|
||||
<i class="fas fa-plane"></i> Notifications <span class="badge badge-transparent">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-icon icon-left">
|
||||
<i class="fas fa-plane"></i> Notifications <span class="badge badge-transparent">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-icon icon-left">
|
||||
<i class="fas fa-plane"></i> Notifications <span class="badge badge-transparent">4</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Link</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="badges">
|
||||
<a href="#" class="badge badge-primary">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
122
pages/bootstrap-breadcrumb.html
Normal file
122
pages/bootstrap-breadcrumb.html
Normal file
@@ -0,0 +1,122 @@
|
||||
{% set title = 'Bootstrap Components › Breadcrumb' %}
|
||||
{% set page = 'bootstrap-breadcrumb.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Breadcrumb</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Breadcrumb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Breadcrumb</h2>
|
||||
<p class="section-lead">
|
||||
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Default</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Icon</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item active"><i class="fas fa-tachometer-alt"></i> Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Background</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb bg-primary text-white-all">
|
||||
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb bg-warning text-white-all">
|
||||
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb bg-success text-white-all">
|
||||
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb bg-danger text-white-all">
|
||||
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb bg-secondary text-white-all">
|
||||
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb bg-dark text-white-all">
|
||||
<li class="breadcrumb-item"><a href="#"><i class="fas fa-tachometer-alt"></i> Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#"><i class="far fa-file"></i> Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page"><i class="fas fa-list"></i> Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
195
pages/bootstrap-buttons.html
Normal file
195
pages/bootstrap-buttons.html
Normal file
@@ -0,0 +1,195 @@
|
||||
{% set title = 'Bootstrap Components › Buttons' %}
|
||||
{% set page = 'bootstrap-buttons.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Buttons</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Button</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Buttons</h2>
|
||||
<p class="section-lead">
|
||||
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Basic</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use the <code>.btn .btn-{color}</code> classes.</p>
|
||||
<div class="buttons">
|
||||
<a href="#" class="btn btn-primary">Primary</a>
|
||||
<a href="#" class="btn btn-secondary">Secondary</a>
|
||||
<a href="#" class="btn btn-info">Info</a>
|
||||
<a href="#" class="btn btn-warning">Warning</a>
|
||||
<a href="#" class="btn btn-danger">Danger</a>
|
||||
<a href="#" class="btn btn-success">Success</a>
|
||||
<a href="#" class="btn btn-light">Light</a>
|
||||
<a href="#" class="btn btn-dark">Dark</a>
|
||||
<a href="#" class="btn">Link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Buttons <code>.btn-outline</code></h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use the <code>.btn .btn-outline-{color}</code> classes.</p>
|
||||
<div class="buttons">
|
||||
<a href="#" class="btn btn-outline-primary">Primary</a>
|
||||
<a href="#" class="btn btn-outline-secondary">Secondary</a>
|
||||
<a href="#" class="btn btn-outline-info">Info</a>
|
||||
<a href="#" class="btn btn-outline-warning">Warning</a>
|
||||
<a href="#" class="btn btn-outline-danger">Danger</a>
|
||||
<a href="#" class="btn btn-outline-success">Success</a>
|
||||
<a href="#" class="btn btn-outline-light">Light</a>
|
||||
<a href="#" class="btn btn-outline-dark">Dark</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Button Sizes</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use the <code>.btn-lg</code> or <code>.btn-sm</code> classes.</p>
|
||||
<div class="buttons">
|
||||
<a href="#" class="btn btn-sm btn-warning">Small</a>
|
||||
<a href="#" class="btn btn-danger">Normal</a>
|
||||
<a href="#" class="btn btn-lg btn-dark">Large</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Button States</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use the <code>.disabled</code> or <code>.btn-progress</code> classes.</p>
|
||||
<div class="buttons">
|
||||
<a href="#" class="btn btn-primary">Normal</a>
|
||||
<a href="#" class="btn disabled btn-primary">Disabled</a>
|
||||
<a href="#" class="btn disabled btn-primary btn-progress">Progress</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Icon Button</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use the <code>.btn-icon</code> and <code>.icon-left</code> classes.</p>
|
||||
<div class="buttons">
|
||||
<a href="#" class="btn btn-icon icon-left"><i class="far fa-user"></i> Default</a>
|
||||
<a href="#" class="btn btn-icon icon-left btn-primary"><i class="far fa-edit"></i> Primary</a>
|
||||
<a href="#" class="btn btn-icon icon-left btn-secondary"><i class="far fa-user"></i> Secondary</a>
|
||||
<a href="#" class="btn btn-icon icon-left btn-info"><i class="fas fa-info-circle"></i> Info</a>
|
||||
<a href="#" class="btn btn-icon icon-left btn-warning"><i class="fas fa-exclamation-triangle"></i> Warning</a>
|
||||
<a href="#" class="btn btn-icon icon-left btn-danger"><i class="fas fa-times"></i> Danger</a>
|
||||
<a href="#" class="btn btn-icon icon-left btn-success"><i class="fas fa-check"></i> Success</a>
|
||||
<a href="#" class="btn btn-icon icon-left btn-light"><i class="fas fa-star"></i> Light</a>
|
||||
<a href="#" class="btn btn-icon icon-left btn-dark"><i class="far fa-file"></i> Dark</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Only Icon Button</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">Use the <code>.btn-icon</code> class.</p>
|
||||
<div class="buttons">
|
||||
<a href="#" class="btn btn-icon btn-primary"><i class="far fa-edit"></i></a>
|
||||
<a href="#" class="btn btn-icon btn-secondary"><i class="far fa-user"></i></a>
|
||||
<a href="#" class="btn btn-icon btn-info"><i class="fas fa-info-circle"></i></a>
|
||||
<a href="#" class="btn btn-icon btn-warning"><i class="fas fa-exclamation-triangle"></i></a>
|
||||
<a href="#" class="btn btn-icon btn-danger"><i class="fas fa-times"></i></a>
|
||||
<a href="#" class="btn btn-icon btn-success"><i class="fas fa-check"></i></a>
|
||||
<a href="#" class="btn btn-icon btn-light"><i class="fas fa-star"></i></a>
|
||||
<a href="#" class="btn btn-icon btn-dark"><i class="far fa-file"></i></a>
|
||||
</div>
|
||||
<p class="text-muted mt-2">Sizes.</p>
|
||||
<div class="buttons">
|
||||
<a href="#" class="btn btn-icon btn-sm btn-warning"><i class="fas fa-exclamation-triangle"></i></a>
|
||||
<a href="#" class="btn btn-icon btn-danger"><i class="fas fa-times"></i></a>
|
||||
<a href="#" class="btn btn-icon btn-lg btn-success"><i class="fas fa-check"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Button Group</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-group mb-3" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group mb-3" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-danger">Left</button>
|
||||
<button type="button" class="btn btn-warning">Middle</button>
|
||||
<button type="button" class="btn btn-success">Right</button>
|
||||
</div>
|
||||
<div class="btn-group mb-3 btn-group-sm" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-danger">Left</button>
|
||||
<button type="button" class="btn btn-danger">Middle</button>
|
||||
<button type="button" class="btn btn-danger">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Vertical Variation</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
<button type="button" class="btn btn-secondary">Justify</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
419
pages/bootstrap-card.html
Normal file
419
pages/bootstrap-card.html
Normal file
@@ -0,0 +1,419 @@
|
||||
{% set title = 'Bootstrap Components › Card' %}
|
||||
{% set page = 'bootstrap-card.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/chocolat/dist/css/chocolat.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Card</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Card</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Cards</h2>
|
||||
<p class="section-lead">
|
||||
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Card Title</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
This is some text within a card body.
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Footer Card
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Card Action Button</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
This is some text within a card body.
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<button class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Card Title</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Footer <code>bg-whitesmoke</code></h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
This is some text within a card body.
|
||||
</div>
|
||||
<div class="card-footer bg-whitesmoke">
|
||||
Footer Card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Card Variants</h2>
|
||||
<p class="section-lead">
|
||||
Basically, the Bootstrap card can be given a color variant.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-primary</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-secondary</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-danger</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-warning</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-info">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-info</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-success</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-light">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-light</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-dark">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-dark</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Card Button & Input</h2>
|
||||
<p class="section-lead">
|
||||
Also, you can give a button or input on the card header.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#" class="btn btn-primary">
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Write something here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h4>Button Group</h4>
|
||||
<div class="card-header-action">
|
||||
<div class="btn-group">
|
||||
<a href="#" class="btn btn-primary">Home</a>
|
||||
<a href="#" class="btn btn-primary">Profile</a>
|
||||
<a href="#" class="btn btn-primary">Setting</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Write something here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<h4>Input Text</h4>
|
||||
<form class="card-header-form">
|
||||
<input type="text" name="search" class="form-control" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Write something here</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#" class="btn btn-primary">View All</a>
|
||||
<a href="#" class="btn btn-danger">Delete All</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Write something here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h4>Dropdown Button</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#" class="btn btn-primary">View All</a>
|
||||
<div class="dropdown">
|
||||
<a href="#" data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Options</a>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-eye"></i> View</a>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="far fa-edit"></i> Edit</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger"><i class="far fa-trash-alt"></i> Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Write something here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h4>Input Button</h4>
|
||||
<form class="card-header-form">
|
||||
<div class="input-group">
|
||||
<input type="text" name="search" class="form-control" placeholder="Search">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-primary btn-icon"><i class="fas fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Write something here</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Functionality Card</h2>
|
||||
<p class="section-lead">
|
||||
You can provide functionality on the card.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Show/Hide</h4>
|
||||
<div class="card-header-action">
|
||||
<a data-collapse="#mycard-collapse" class="btn btn-icon btn-info" href="#"><i class="fas fa-minus"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse show" id="mycard-collapse">
|
||||
<div class="card-body">
|
||||
You can show or hide this card.
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Card Footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>My Picture</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#" class="btn btn-primary">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-2 text-muted">Click the picture below to see the magic!</div>
|
||||
<div class="chocolat-parent">
|
||||
<a href="assets/img/example-image.jpg" class="chocolat-image" title="Just an example">
|
||||
<div data-crop-image="285">
|
||||
<img alt="image" src="assets/img/example-image.jpg" class="img-fluid">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-6">
|
||||
<div class="card" id="mycard-dimiss">
|
||||
<div class="card-header">
|
||||
<h4>Dismiss</h4>
|
||||
<div class="card-header-action">
|
||||
<a data-dismiss="#mycard-dimiss" class="btn btn-icon btn-danger" href="#"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
You can dimiss this card.
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Card Footer
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" id="sample-login">
|
||||
<form>
|
||||
<div class="card-header">
|
||||
<h4>Login</h4>
|
||||
</div>
|
||||
<div class="card-body pb-0">
|
||||
<p class="text-muted">Click login to change the card to progress mode.</p>
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-lock"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" name="remember" class="custom-control-input" id="remember-me">
|
||||
<label class="custom-control-label" for="remember-me">Remember Me</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer pt-">
|
||||
<button type="submit" onclick="$.cardProgress('#sample-login', {dismiss: true,onDismiss: function() {alert('Dismissed :)')}});return false;" class="btn btn-primary">Login</button>
|
||||
<a href="#" class="ml-2">Create new Account?</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Sortable Card</h2>
|
||||
<p class="section-lead">
|
||||
Other cool cards, this one can be sorted.
|
||||
</p>
|
||||
|
||||
<div class="row sortable-card">
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-primary</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-secondary</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-danger</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h4>Card Header</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Card <code>.card-warning</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
|
||||
<script src="node_modules/jquery-ui-dist/jquery-ui.min.js"></script>
|
||||
{% endblock %}
|
||||
159
pages/bootstrap-carousel.html
Normal file
159
pages/bootstrap-carousel.html
Normal file
@@ -0,0 +1,159 @@
|
||||
{% set title = 'Bootstrap Components › Carousel' %}
|
||||
{% set page = 'bootstrap-carousel.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Carousel</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Carousel</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Carousel</h2>
|
||||
<p class="section-lead">
|
||||
A slideshow component for cycling through elements—images or slides of text—like a carousel.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Simple</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block w-100" src="assets/img/news/img01.jpg" alt="First slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="assets/img/news/img07.jpg" alt="Second slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="assets/img/news/img08.jpg" alt="Third slide">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Navigation & Indicator</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleIndicators3" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carouselExampleIndicators3" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleIndicators3" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleIndicators3" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block w-100" src="assets/img/news/img01.jpg" alt="First slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="assets/img/news/img07.jpg" alt="Second slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="assets/img/news/img08.jpg" alt="Third slide">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleIndicators3" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleIndicators3" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Caption</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
|
||||
<li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block w-100" src="assets/img/news/img01.jpg" alt="First slide">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="assets/img/news/img07.jpg" alt="Second slide">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="assets/img/news/img08.jpg" alt="Third slide">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Crossfade</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block w-100" src="assets/img/news/img01.jpg" alt="First slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="assets/img/news/img07.jpg" alt="Second slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="assets/img/news/img08.jpg" alt="Third slide">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
126
pages/bootstrap-collapse.html
Normal file
126
pages/bootstrap-collapse.html
Normal file
@@ -0,0 +1,126 @@
|
||||
{% set title = 'Bootstrap Components › Collapse' %}
|
||||
{% set page = 'bootstrap-collapse.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Collapse</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Collapse</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Collapse</h2>
|
||||
<p class="section-lead">
|
||||
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Simple</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<p>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Multiple Targets</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="buttons">
|
||||
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<p>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<p>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Accordion</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="accordion">
|
||||
<div class="accordion">
|
||||
<div class="accordion-header" role="button" data-toggle="collapse" data-target="#panel-body-1" aria-expanded="true">
|
||||
<h4>Panel 1</h4>
|
||||
</div>
|
||||
<div class="accordion-body collapse show" id="panel-body-1" data-parent="#accordion">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<div class="accordion-header" role="button" data-toggle="collapse" data-target="#panel-body-2">
|
||||
<h4>Panel 2</h4>
|
||||
</div>
|
||||
<div class="accordion-body collapse" id="panel-body-2" data-parent="#accordion">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<div class="accordion-header" role="button" data-toggle="collapse" data-target="#panel-body-3">
|
||||
<h4>Panel 3</h4>
|
||||
</div>
|
||||
<div class="accordion-body collapse" id="panel-body-3" data-parent="#accordion">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
210
pages/bootstrap-dropdown.html
Normal file
210
pages/bootstrap-dropdown.html
Normal file
@@ -0,0 +1,210 @@
|
||||
{% set title = 'Bootstrap Components › Dropdown' %}
|
||||
{% set page = 'bootstrap-dropdown.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Dropdown</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Dropdown</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Dropdown</h2>
|
||||
<p class="section-lead">
|
||||
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Simple</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="dropdown d-inline mr-2">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Easy Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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>
|
||||
</div>
|
||||
<div class="dropdown d-inline mr-2">
|
||||
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Easy Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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>
|
||||
</div>
|
||||
<div class="dropdown d-inline">
|
||||
<button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Easy Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Split</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Split Dropdown</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Direction</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropup
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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>
|
||||
<div class="btn-group dropright">
|
||||
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropright
|
||||
</button>
|
||||
<div class="dropdown-menu dropright">
|
||||
<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>
|
||||
<div class="btn-group dropleft">
|
||||
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropleft
|
||||
</button>
|
||||
<div class="dropdown-menu dropleft">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Icon</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="dropdown d-inline">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
With Icon
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item has-icon" href="#"><i class="far fa-heart"></i> Action</a>
|
||||
<a class="dropdown-item has-icon" href="#"><i class="far fa-file"></i> Another action</a>
|
||||
<a class="dropdown-item has-icon" href="#"><i class="far fa-clock"></i> Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Size</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-group mb-2">
|
||||
<button class="btn btn-info btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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>
|
||||
<div class="btn-group mb-2">
|
||||
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Normal button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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>
|
||||
<div class="btn-group mb-2">
|
||||
<button class="btn btn-warning btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Title</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Options
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-title">Hi, John!</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
604
pages/bootstrap-form.html
Normal file
604
pages/bootstrap-form.html
Normal file
@@ -0,0 +1,604 @@
|
||||
{% set title = 'Bootstrap Components › Form' %}
|
||||
{% set page = 'bootstrap-form.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Form</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Form</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Forms</h2>
|
||||
<p class="section-lead">
|
||||
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>HTML5 Form Basic</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info">
|
||||
<b>Note!</b> Not all browsers support HTML5 type input.
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Text</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select class="form-control">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select Multiple</label>
|
||||
<select class="form-control" multiple="" data-height="100%">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Textarea</label>
|
||||
<textarea class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="d-block">Checkbox</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="defaultCheck1">
|
||||
<label class="form-check-label" for="defaultCheck1">
|
||||
Checkbox 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="defaultCheck3">
|
||||
<label class="form-check-label" for="defaultCheck3">
|
||||
Checkbox 2
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Color</label>
|
||||
<input type="color" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Date</label>
|
||||
<input type="date" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Datetime Local</label>
|
||||
<input type="datetime-local" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>File</label>
|
||||
<input type="file" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Month</label>
|
||||
<input type="month" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="d-block">Radio</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" checked>
|
||||
<label class="form-check-label" for="exampleRadios1">
|
||||
Radio 1
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" checked>
|
||||
<label class="form-check-label" for="exampleRadios2">
|
||||
Radio 2
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Range</label>
|
||||
<input type="range" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Search</label>
|
||||
<input type="search" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Tel</label>
|
||||
<input type="tel" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Time</label>
|
||||
<input type="time" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Url</label>
|
||||
<input type="url" class="form-control">
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<label>Week</label>
|
||||
<input type="week" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<button class="btn btn-primary mr-1" type="submit">Submit</button>
|
||||
<button class="btn btn-secondary" type="reset">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Inline Forms</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="form-inline">
|
||||
<label class="sr-only" for="inlineFormInputName2">Name</label>
|
||||
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
|
||||
|
||||
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Help Text</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="inputPassword5">Password</label>
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
|
||||
<small id="passwordHelpBlock" class="form-text text-muted">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-inline">
|
||||
<div class="form-group">
|
||||
<label for="inputPassword6">Password</label>
|
||||
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
|
||||
<small id="passwordHelpInline" class="text-muted">
|
||||
Must be 8-20 characters long.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Custom Forms #2</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Select</div>
|
||||
<div class="form-group">
|
||||
<label>Choose One</label>
|
||||
<select class="custom-select">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="section-title">File Browser</div>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="customFile">
|
||||
<label class="custom-file-label" for="customFile">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Input Group Text</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<div class="input-group mb-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group mb-2">
|
||||
<input type="text" class="form-control text-right" id="inlineFormInputGroup2" placeholder="Your URL">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text">.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Input Group #2</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Multiple Addons</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">First and last name</span>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">Button</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" class="form-control" placeholder="" aria-label="">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">Select With Button</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<select class="custom-select" id="inputGroupSelect04">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">Select, Button & Input</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<select class="custom-select" id="inputGroupSelect05">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Sizing</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Text</div>
|
||||
<div class="form-group">
|
||||
<label>Text <code>.form-control-sm</code></label>
|
||||
<input type="text" class="form-control form-control-sm">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Text</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Text <code>.form-control-lg</code></label>
|
||||
<input type="text" class="form-control form-control-lg">
|
||||
</div>
|
||||
|
||||
<div class="section-title">Select</div>
|
||||
<div class="form-group">
|
||||
<label>Select <code>.form-control-sm</code></label>
|
||||
<select class="form-control form-control-sm">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select class="form-control">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select <code>.form-control-lg</code></label>
|
||||
<select class="form-control form-control-lg">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Disabled & Read Only</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Text</div>
|
||||
<div class="form-group">
|
||||
<label>Readonly</label>
|
||||
<input type="text" class="form-control" readonly="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Readonly Plain Text</label>
|
||||
<input type="text" class="form-control-plaintext" readonly="" value="Hello!">
|
||||
</div>
|
||||
|
||||
<div class="section-title">Select</div>
|
||||
<div class="form-group">
|
||||
<label>Select Disabled</label>
|
||||
<select class="form-control" disabled="">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="section-title">Checkbox</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
|
||||
<label class="form-check-label" for="defaultCheck2">
|
||||
Disabled checkbox
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">Radio</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" value="" id="radioDisabled" disabled>
|
||||
<label class="form-check-label" for="radioDisabled">
|
||||
Disabled radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Inline</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="d-block">Inline Checkbox</label>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
|
||||
<label class="form-check-label" for="inlineCheckbox1">1</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
|
||||
<label class="form-check-label" for="inlineCheckbox2">2</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
|
||||
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="d-block">Inline Radio</label>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" id="inlineradio1" value="option1">
|
||||
<label class="form-check-label" for="inlineradio1">1</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" id="inlineradio2" value="option2">
|
||||
<label class="form-check-label" for="inlineradio2">2</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" id="inlineradio3" value="option3" disabled>
|
||||
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Horizontal Form</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="inputEmail4">Email</label>
|
||||
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="inputPassword4">Password</label>
|
||||
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputAddress">Address</label>
|
||||
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputAddress2">Address 2</label>
|
||||
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="inputCity">City</label>
|
||||
<input type="text" class="form-control" id="inputCity">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="inputState">State</label>
|
||||
<select id="inputState" class="form-control">
|
||||
<option selected>Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<label for="inputZip">Zip</label>
|
||||
<input type="text" class="form-control" id="inputZip">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="gridCheck">
|
||||
<label class="form-check-label" for="gridCheck">
|
||||
Check me out
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Horizontal Form</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-3 col-form-label">Email</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-3 col-form-label">Password</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-form-label col-sm-3 pt-0">Radios</div>
|
||||
<div class="col-sm-9">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
|
||||
<label class="form-check-label" for="gridRadios1">
|
||||
First radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
|
||||
<label class="form-check-label" for="gridRadios2">
|
||||
Second radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
|
||||
<label class="form-check-label" for="gridRadios3">
|
||||
Third disabled radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">Checkbox</div>
|
||||
<div class="col-sm-9">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="gridCheck1">
|
||||
<label class="form-check-label" for="gridCheck1">
|
||||
Example checkbox
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Custom Forms</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Checkbox</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="customCheck1">
|
||||
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
|
||||
</div>
|
||||
|
||||
<div class="section-title">Checkbox</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
|
||||
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
|
||||
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
|
||||
</div>
|
||||
|
||||
<div class="section-title">Inline</div>
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
|
||||
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio custom-control-inline">
|
||||
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
|
||||
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
|
||||
</div>
|
||||
|
||||
<div class="section-title">Disabled</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
|
||||
<label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" name="radioDisabled" class="custom-control-input" disabled>
|
||||
<label class="custom-control-label">Toggle this custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Learn More</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="jumbotron text-center">
|
||||
<h2>Learn More</h2>
|
||||
<p class="lead text-muted mt-3">All the above form elements are the default of bootstrap and you can learn them on the official documentation provided by Bootstrap.</p>
|
||||
<a class="btn btn-primary mt-3" href="https://getbootstrap.com/docs/4.0/components/forms/" target="_blank" role="button">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
211
pages/bootstrap-list-group.html
Normal file
211
pages/bootstrap-list-group.html
Normal file
@@ -0,0 +1,211 @@
|
||||
{% set title = 'Bootstrap Components › List Group' %}
|
||||
{% set page = 'bootstrap-list-group.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>List Group</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">List Group</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">List Group</h2>
|
||||
<p class="section-lead">
|
||||
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Basic</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Disabled</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item disabled">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Flush</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Badges</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Cras justo odio
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Dapibus ac facilisis in
|
||||
<span class="badge badge-primary badge-pill">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
Morbi leo risus
|
||||
<span class="badge badge-primary badge-pill">1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>JavaScript Behavior</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="list-group" id="list-tab" role="tablist">
|
||||
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab">Home</a>
|
||||
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab">Profile</a>
|
||||
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab">Messages</a>
|
||||
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
|
||||
Deserunt cupidatat anim ullamco ut dolor anim sint nulla amet incididunt tempor ad ut pariatur officia culpa laboris occaecat. Dolor in nisi aliquip in non magna amet nisi sed commodo proident anim deserunt nulla veniam occaecat reprehenderit esse ut eu culpa fugiat nostrud pariatur adipisicing incididunt consequat nisi non amet.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
|
||||
In quis non esse eiusmod sunt fugiat magna pariatur officia anim ex officia nostrud amet nisi pariatur eu est id ut exercitation ex ad reprehenderit dolore nostrud sit ut culpa consequat magna ad labore proident ad qui et tempor exercitation in aute veniam et velit dolore irure qui ex magna ex culpa enim anim ea mollit consequat ullamco exercitation in.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
|
||||
Lorem ipsum culpa in ad velit dolore anim labore incididunt do aliqua sit veniam commodo elit dolore do labore occaecat laborum sed quis proident fugiat sunt pariatur. Cupidatat ut fugiat anim ut dolore excepteur ut voluptate dolore excepteur mollit commodo.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Active</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item active">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Link</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Contextual Classes</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
|
||||
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
|
||||
<li class="list-group-item list-group-item-success">A simple success list group item</li>
|
||||
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
|
||||
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
|
||||
<li class="list-group-item list-group-item-info">A simple info list group item</li>
|
||||
<li class="list-group-item list-group-item-light">A simple light list group item</li>
|
||||
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Custom Content</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
112
pages/bootstrap-media-object.html
Normal file
112
pages/bootstrap-media-object.html
Normal file
@@ -0,0 +1,112 @@
|
||||
{% set title = 'Bootstrap Components › Media Object' %}
|
||||
{% set page = 'bootstrap-media-object.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Media Object</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Media Object</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Media Object</h2>
|
||||
<p class="section-lead">
|
||||
Examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Simple</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>List</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled">
|
||||
<li class="media">
|
||||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus oringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media my-4">
|
||||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus oringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus oringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Nesting</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<img class="mr-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
|
||||
<div class="media mt-3">
|
||||
<a class="pr-3" href="#">
|
||||
<img src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
<p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Order</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
<img class="ml-3" src="assets/img/example-image-50.jpg" alt="Generic placeholder image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
161
pages/bootstrap-modal.html
Normal file
161
pages/bootstrap-modal.html
Normal file
@@ -0,0 +1,161 @@
|
||||
{% set title = 'Bootstrap Components › Modal' %}
|
||||
{% set page = 'bootstrap-modal.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/prismjs/themes/prism.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Modal</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Modal</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Modal</h2>
|
||||
<p class="section-lead">
|
||||
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="modal-dialog m-0" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal Template</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Modal body text goes here.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-mt">
|
||||
<div class="card-header">
|
||||
<h4>Modal Confirm</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-2">You can easily change the default browser confirmation box with a bootstrap modal.</p>
|
||||
<button class="btn btn-danger" data-confirm="Realy?|Do you want to continue?" data-confirm-yes="alert('Deleted :)');">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>The Bootstrap Way</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-2">Use the Bootstrap method to create modal. You need to create an HTML structure for modal and the following button will trigger it.</p>
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Aw, yeah!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Modal Demo</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-2">We've created a plugin to easily create a bootstrap modal.</p>
|
||||
<button class="btn btn-primary" id="modal-1">Launch Modal</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Modal Center</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-2">You can change the modal position to center.</p>
|
||||
<button class="btn btn-primary" id="modal-2">Launch Modal</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>The Others</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-2">Check the <code>modal.js</code> code in the <code>dist/js/page</code> folder to get the source code.</p>
|
||||
<div class="buttons">
|
||||
<button class="btn btn-primary" id="modal-3">Buttons</button>
|
||||
<button class="btn btn-primary" id="modal-4">Footer Background</button>
|
||||
<button class="btn btn-primary" id="modal-5">Login</button>
|
||||
<button class="btn btn-primary" id="modal-6">Something in the Footer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<form class="modal-part" id="modal-login-part">
|
||||
<p>This login form is taken from elements with <code>#modal-login-part</code> id.</p>
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Email" name="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-lock"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="password" class="form-control" placeholder="Password" name="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" name="remember" class="custom-control-input" id="remember-me">
|
||||
<label class="custom-control-label" for="remember-me">Remember Me</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="modal fade" tabindex="-1" role="dialog" id="exampleModal">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Modal body text goes here.</p>
|
||||
</div>
|
||||
<div class="modal-footer bg-whitesmoke br">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/prismjs/prism.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/bootstrap-modal.js"></script>
|
||||
{% endblock %}
|
||||
127
pages/bootstrap-nav.html
Normal file
127
pages/bootstrap-nav.html
Normal file
@@ -0,0 +1,127 @@
|
||||
{% set title = 'Bootstrap Components › Nav' %}
|
||||
{% set page = 'bootstrap-nav.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Nav</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Nav</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Navs</h2>
|
||||
<p class="section-lead">
|
||||
Examples for how to use Bootstrap’s included navigation components.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Base Nav</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Vertical</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Tabs</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Pills</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Simple</div>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="section-title">Icon</div>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#"><i class="fas fa-home"></i> Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"><i class="fas fa-cog"></i> Setting</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
112
pages/bootstrap-navbar.html
Normal file
112
pages/bootstrap-navbar.html
Normal file
@@ -0,0 +1,112 @@
|
||||
{% set title = 'Bootstrap Components › Navbar' %}
|
||||
{% set page = 'bootstrap-navbar.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Navbar</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Navbar</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Navbar</h2>
|
||||
<p class="section-lead">
|
||||
Examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Brand</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav class="navbar bg-primary">
|
||||
<a class="navbar-brand" href="#">My App</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Items</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav class="navbar navbar-expand-lg bg-primary">
|
||||
<a class="navbar-brand" href="#">My App</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Form</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav class="navbar bg-primary">
|
||||
<a class="navbar-brand" href="#">My App</a>
|
||||
<form class="form-inline">
|
||||
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-dark" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Text</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav class="navbar navbar-expand-lg bg-primary">
|
||||
<a class="navbar-brand" href="#">My App</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarText">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="navbar-text">
|
||||
Navbar text with an inline element
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
121
pages/bootstrap-pagination.html
Normal file
121
pages/bootstrap-pagination.html
Normal file
@@ -0,0 +1,121 @@
|
||||
{% set title = 'Bootstrap Components › Pagination' %}
|
||||
{% set page = 'bootstrap-pagination.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Pagination</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Pagination</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Pagination</h2>
|
||||
<p class="section-lead">
|
||||
Examples for showing pagination to indicate a series of related content exists across multiple pages.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Pagination</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Disabled & Active State</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Icon</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="buttons">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Sizing</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-sm">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1">1</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
82
pages/bootstrap-popover.html
Normal file
82
pages/bootstrap-popover.html
Normal file
@@ -0,0 +1,82 @@
|
||||
{% set title = 'Bootstrap Components › Popover' %}
|
||||
{% set page = 'bootstrap-popover.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Popover</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Popover</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Popovers</h2>
|
||||
<p class="section-lead">
|
||||
Examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Directions</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
On top
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
On right
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
On bottom
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
On left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Disabled Popover</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
|
||||
<button class="btn btn-primary pe-none" type="button" disabled>Disabled button</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Dismiss</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<a tabindex="0" class="btn btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Link</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="buttons">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur <a href="javascript:;" data-toggle="popover" title="Popover Title" data-content="Hello, this is link." data-trigger="focus">adipisicing elit</a>, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
118
pages/bootstrap-progress.html
Normal file
118
pages/bootstrap-progress.html
Normal file
@@ -0,0 +1,118 @@
|
||||
{% set title = 'Bootstrap Components › Progress' %}
|
||||
{% set page = 'bootstrap-progress.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Progress</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Progress</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Progress</h2>
|
||||
<p class="section-lead">
|
||||
Examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Simple</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" data-width="50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" data-width="75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" data-width="100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Label</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" data-width="50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" data-width="75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar" role="progressbar" data-width="100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Height</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-3" data-height="5">
|
||||
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3" data-height="10">
|
||||
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3" data-height="15">
|
||||
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3" data-height="20">
|
||||
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3" data-height="25">
|
||||
<div class="progress-bar" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Background</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-success" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-info" role="progressbar" data-width="50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-warning" role="progressbar" data-width="75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-danger" role="progressbar" data-width="100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-info" role="progressbar" data-width="100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
620
pages/bootstrap-table.html
Normal file
620
pages/bootstrap-table.html
Normal file
@@ -0,0 +1,620 @@
|
||||
{% set title = 'Bootstrap Components › Table' %}
|
||||
{% set page = 'bootstrap-table.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Table</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Table</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Tables</h2>
|
||||
<p class="section-lead">
|
||||
Examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Simple</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>FIt</h4>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Table Head Options</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Light</div>
|
||||
<table class="table">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section-title">Dark</div>
|
||||
<table class="table">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Borderless</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Light</div>
|
||||
<table class="table table-borderless">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section-title">Dark</div>
|
||||
<table class="table table-borderless table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Hover</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Light</div>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section-title">Dark</div>
|
||||
<table class="table table-hover table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Invert</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Striped</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Light</div>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section-title">Dark</div>
|
||||
<table class="table table-striped table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Bordered</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Light</div>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section-title">Dark</div>
|
||||
<table class="table table-bordered table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Small Table, Caption & Responsive</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Light</div>
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section-title">Dark</div>
|
||||
<table class="table table-sm table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section-title">Caption</div>
|
||||
<table class="table">
|
||||
<caption>List of users</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="section-title">Responsive</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
82
pages/bootstrap-tooltip.html
Normal file
82
pages/bootstrap-tooltip.html
Normal file
@@ -0,0 +1,82 @@
|
||||
{% set title = 'Bootstrap Components › Tooltip' %}
|
||||
{% set page = 'bootstrap-tooltip.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Tooltip</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
||||
<div class="breadcrumb-item">Tooltip</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Tooltips</h2>
|
||||
<p class="section-lead">
|
||||
Examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Directions</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
On top
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
On right
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
On bottom
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
On left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Disabled Tooltip</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="d-inline-block" data-toggle="tooltip" data-title="Disabled tooltip">
|
||||
<button class="btn btn-primary pe-none" type="button" disabled>Disabled button</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Link</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<a href="#" data-toggle="tooltip" title="Tooltip, bro!">Hover me!</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Paragraph</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="buttons">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur <b data-toggle="tooltip" title="Hello, this is tooltip.">adipisicing elit</b>, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
200
pages/bootstrap-typography.html
Normal file
200
pages/bootstrap-typography.html
Normal file
@@ -0,0 +1,200 @@
|
||||
{% set title = 'Bootstrap Components › Typography' %}
|
||||
{% set page = 'bootstrap-typography.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/prismjs/themes/prism.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Typography</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">UI Kit</a></div>
|
||||
<div class="breadcrumb-item">Typography</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Typography</h2>
|
||||
<p class="section-lead">
|
||||
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Text</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<h3 class="mt-4">
|
||||
Fancy display heading
|
||||
<small class="text-muted">With faded secondary text</small>
|
||||
</h3>
|
||||
<p class="lead mt-4">
|
||||
Lead — Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
|
||||
</p>
|
||||
<p class="mt-4 mb-4">Paragraph — Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
|
||||
<a href="#">You can click me!</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Text Colors</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="text-primary mb-2">Text Primary</div>
|
||||
<div class="text-secondary mb-2">Text Secondary</div>
|
||||
<div class="text-success mb-2">Text Success</div>
|
||||
<div class="text-info mb-2">Text Info</div>
|
||||
<div class="text-warning mb-2">Text Warning</div>
|
||||
<div class="text-light mb-2">Text Light</div>
|
||||
<div class="text-dark mb-2">Text Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Inline Text Element</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><u>This line of text will render as underlined</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Abbreviations</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><abbr title="attribute">attr</abbr></p>
|
||||
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Color</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="colors">
|
||||
<div class="color bg-primary text-white"><div>Primary</div></div>
|
||||
<div class="color bg-secondary text-white"><div>Secondary</div></div>
|
||||
<div class="color bg-success text-white"><div>Success</div></div>
|
||||
<div class="color bg-info text-white"><div>Info</div></div>
|
||||
<div class="color bg-warning text-white"><div>Warning</div></div>
|
||||
<div class="color bg-danger text-white"><div>Danger</div></div>
|
||||
<div class="color bg-light"><div>Light</div></div>
|
||||
<div class="color bg-dark text-white"><div>Dark</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Text Block</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Blockquote</div>
|
||||
<blockquote>
|
||||
Stisla made with hand
|
||||
</blockquote>
|
||||
<div class="section-title">Inline Code</div>
|
||||
<p>Lorem ipsum dolor sit amet, <code>consectetur</code> adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud <code>exercitation</code> ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.</p>
|
||||
<div class="section-title">Code Block</div>
|
||||
<p>We use PrismJS to do this, you can adjust themes, syntax and more. <a href="http://prismjs.com">Visit their documentation</a>.</p>
|
||||
<pre class="language-javascript"><code>var code = 'Hello';</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Display</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="display-1">Display 1</div>
|
||||
<hr>
|
||||
<div class="display-2">Display 2</div>
|
||||
<hr>
|
||||
<div class="display-3">Display 3</div>
|
||||
<hr>
|
||||
<div class="display-4">Display 4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Naming a Source</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<blockquote class="blockquote">
|
||||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">List</h2>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Unordered List</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum:</p>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>
|
||||
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
|
||||
<li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>
|
||||
<li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
|
||||
<li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>
|
||||
<li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Ordered List</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum:</p>
|
||||
<ol>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>
|
||||
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
|
||||
<li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>
|
||||
<li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
|
||||
<li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>
|
||||
<li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
|
||||
<li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/prismjs/prism.js"></script>
|
||||
{% endblock %}
|
||||
253
pages/components-article.html
Normal file
253
pages/components-article.html
Normal file
@@ -0,0 +1,253 @@
|
||||
{% set title = 'Components › Article' %}
|
||||
{% set page = 'components-article.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Article</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Article</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Articles</h2>
|
||||
<p class="section-lead">This article component is based on card and flexbox.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<article class="article">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img08.jpg">
|
||||
</div>
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-cta">
|
||||
<a href="#" class="btn btn-primary">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<article class="article">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img04.jpg">
|
||||
</div>
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-cta">
|
||||
<a href="#" class="btn btn-primary">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<article class="article">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img09.jpg">
|
||||
</div>
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-cta">
|
||||
<a href="#" class="btn btn-primary">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<article class="article">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img12.jpg">
|
||||
</div>
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-cta">
|
||||
<a href="#" class="btn btn-primary">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Article Style B</h2>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<article class="article article-style-b">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img13.jpg">
|
||||
</div>
|
||||
<div class="article-badge">
|
||||
<div class="article-badge-item bg-danger"><i class="fas fa-fire"></i> Trending</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-cta">
|
||||
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<article class="article article-style-b">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img15.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-cta">
|
||||
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<article class="article article-style-b">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img07.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-cta">
|
||||
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
||||
<article class="article article-style-b">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img02.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-cta">
|
||||
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="section-title">Article Style C</h2>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4 col-lg-4">
|
||||
<article class="article article-style-c">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img13.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<div class="article-category"><a href="#">News</a> <div class="bullet"></div> <a href="#">5 Days</a></div>
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-user">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png">
|
||||
<div class="article-user-details">
|
||||
<div class="user-detail-name">
|
||||
<a href="#">Hasan Basri</a>
|
||||
</div>
|
||||
<div class="text-job">Web Developer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-lg-4">
|
||||
<article class="article article-style-c">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img14.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<div class="article-category"><a href="#">News</a> <div class="bullet"></div> <a href="#">5 Days</a></div>
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-user">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png">
|
||||
<div class="article-user-details">
|
||||
<div class="user-detail-name">
|
||||
<a href="#">Rizal Fakhri</a>
|
||||
</div>
|
||||
<div class="text-job">UX Designer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-lg-4">
|
||||
<article class="article article-style-c">
|
||||
<div class="article-header">
|
||||
<div class="article-image" data-background="assets/img/news/img01.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-details">
|
||||
<div class="article-category"><a href="#">News</a> <div class="bullet"></div> <a href="#">5 Days</a></div>
|
||||
<div class="article-title">
|
||||
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
||||
</div>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. </p>
|
||||
<div class="article-user">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png">
|
||||
<div class="article-user-details">
|
||||
<div class="user-detail-name">
|
||||
<a href="#">Irwansyah Saputra</a>
|
||||
</div>
|
||||
<div class="text-job">Mobile Developer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
120
pages/components-avatar.html
Normal file
120
pages/components-avatar.html
Normal file
@@ -0,0 +1,120 @@
|
||||
{% set title = 'Components › Avatar' %}
|
||||
{% set page = 'components-avatar.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Avatar</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Avatar</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Avatar</h2>
|
||||
<p class="section-lead">Avatars are user profile pictures. Thanks to <a href="https://picturepan2.github.io/spectre/components/avatars.html">Spectre.css</a>.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Avatar</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<figure class="avatar mr-2 avatar-xl">
|
||||
<img src="assets/img/avatar/avatar-1.png" alt="...">
|
||||
</figure>
|
||||
<figure class="avatar mr-2 avatar-lg">
|
||||
<img src="assets/img/avatar/avatar-2.png" alt="...">
|
||||
</figure>
|
||||
<figure class="avatar mr-2">
|
||||
<img src="assets/img/avatar/avatar-5.png" alt="...">
|
||||
</figure>
|
||||
<figure class="avatar mr-2 avatar-sm">
|
||||
<img src="assets/img/avatar/avatar-3.png" alt="...">
|
||||
</figure>
|
||||
<figure class="avatar mr-2 avatar-xs">
|
||||
<img src="assets/img/avatar/avatar-4.png" alt="...">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Avatar Icon</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<figure class="avatar mr-2 avatar-xl">
|
||||
<img src="assets/img/avatar/avatar-1.png" alt="...">
|
||||
<img src="assets/img/avatar/avatar-5.png" class="avatar-icon" alt="...">
|
||||
</figure>
|
||||
<figure class="avatar mr-2 avatar-lg">
|
||||
<img src="assets/img/avatar/avatar-2.png" alt="...">
|
||||
<img src="assets/img/avatar/avatar-4.png" class="avatar-icon" alt="...">
|
||||
</figure>
|
||||
<figure class="avatar mr-2">
|
||||
<img src="assets/img/avatar/avatar-3.png" alt="...">
|
||||
<img src="assets/img/avatar/avatar-3.png" class="avatar-icon" alt="...">
|
||||
</figure>
|
||||
<figure class="avatar mr-2 avatar-sm">
|
||||
<img src="assets/img/avatar/avatar-4.png" alt="...">
|
||||
<img src="assets/img/avatar/avatar-2.png" class="avatar-icon" alt="...">
|
||||
</figure>
|
||||
<figure class="avatar mr-2 avatar-xs">
|
||||
<img src="assets/img/avatar/avatar-5.png" alt="...">
|
||||
<img src="assets/img/avatar/avatar-1.png" class="avatar-icon" alt="...">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Avatar Presence</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<figure class="avatar mr-2 avatar-xl">
|
||||
<img src="assets/img/avatar/avatar-1.png" alt="...">
|
||||
<i class="avatar-presence online"></i>
|
||||
</figure>
|
||||
<figure class="avatar mr-2 avatar-lg">
|
||||
<img src="assets/img/avatar/avatar-2.png" alt="...">
|
||||
<i class="avatar-presence busy"></i>
|
||||
</figure>
|
||||
<figure class="avatar mr-2">
|
||||
<img src="assets/img/avatar/avatar-3.png" alt="...">
|
||||
<i class="avatar-presence away"></i>
|
||||
</figure>
|
||||
<figure class="avatar mr-2 avatar-sm">
|
||||
<img src="assets/img/avatar/avatar-4.png" alt="...">
|
||||
<i class="avatar-presence offline"></i>
|
||||
</figure>
|
||||
<figure class="avatar mr-2 avatar-xs">
|
||||
<img src="assets/img/avatar/avatar-5.png" alt="...">
|
||||
<i class="avatar-presence online"></i>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Avatar Initial</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<figure class="avatar mr-2 avatar-xl" data-initial="UM"></figure>
|
||||
<figure class="avatar mr-2 avatar-lg bg-danger text-white" data-initial="UM"></figure>
|
||||
<figure class="avatar mr-2 bg-warning text-white" data-initial="UM"></figure>
|
||||
<figure class="avatar mr-2 avatar-sm bg-success text-white" data-initial="UM"></figure>
|
||||
<figure class="avatar mr-2 avatar-xs bg-info text-white" data-initial="UM"></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
101
pages/components-chat-box.html
Normal file
101
pages/components-chat-box.html
Normal file
@@ -0,0 +1,101 @@
|
||||
{% set title = 'Components › Chat Box' %}
|
||||
{% set page = 'components-chat-box.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Chat Box</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Chat Box</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Chat Boxes</h2>
|
||||
<p class="section-lead">The chat component and is equipped with a JavaScript API, making it easy for you to integrate with Back-end.</p>
|
||||
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Who's Online?</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled list-unstyled-border">
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-1.png">
|
||||
<div class="media-body">
|
||||
<div class="mt-0 mb-1 font-weight-bold">Hasan Basri</div>
|
||||
<div class="text-success text-small font-600-bold"><i class="fas fa-circle"></i> Online</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-2.png">
|
||||
<div class="media-body">
|
||||
<div class="mt-0 mb-1 font-weight-bold">Bagus Dwi Cahya</div>
|
||||
<div class="text-small font-weight-600 text-muted"><i class="fas fa-circle"></i> Offline</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-3.png">
|
||||
<div class="media-body">
|
||||
<div class="mt-0 mb-1 font-weight-bold">Wildan Ahdian</div>
|
||||
<div class="text-small font-weight-600 text-success"><i class="fas fa-circle"></i> Online</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-4.png">
|
||||
<div class="media-body">
|
||||
<div class="mt-0 mb-1 font-weight-bold">Rizal Fakhri</div>
|
||||
<div class="text-small font-weight-600 text-success"><i class="fas fa-circle"></i> Online</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card chat-box" id="mychatbox">
|
||||
<div class="card-header">
|
||||
<h4>Chat with Rizal</h4>
|
||||
</div>
|
||||
<div class="card-body chat-content">
|
||||
</div>
|
||||
<div class="card-footer chat-form">
|
||||
<form id="chat-form">
|
||||
<input type="text" class="form-control" placeholder="Type a message">
|
||||
<button class="btn btn-primary">
|
||||
<i class="far fa-paper-plane"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card chat-box card-success" id="mychatbox2">
|
||||
<div class="card-header">
|
||||
<h4><i class="fas fa-circle text-success mr-2" title="Online" data-toggle="tooltip"></i> Chat with Ryan</h4>
|
||||
</div>
|
||||
<div class="card-body chat-content">
|
||||
</div>
|
||||
<div class="card-footer chat-form">
|
||||
<form id="chat-form2">
|
||||
<input type="text" class="form-control" placeholder="Type a message">
|
||||
<button class="btn btn-primary">
|
||||
<i class="far fa-paper-plane"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/components-chat-box.js"></script>
|
||||
{% endblock %}
|
||||
64
pages/components-empty-state.html
Normal file
64
pages/components-empty-state.html
Normal file
@@ -0,0 +1,64 @@
|
||||
{% set title = 'Components › Empty State' %}
|
||||
{% set page = 'components-empty-state.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Empty State</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Empty State</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Empty States</h2>
|
||||
<p class="section-lead">Empty state are generally used when there is no data or content.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Empty Data</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="empty-state" data-height="400">
|
||||
<div class="empty-state-icon">
|
||||
<i class="fas fa-question"></i>
|
||||
</div>
|
||||
<h2>We couldn't find any data</h2>
|
||||
<p class="lead">
|
||||
Sorry we can't find any data, to get rid of this message, make at least 1 entry.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary mt-4">Create new One</a>
|
||||
<a href="#" class="mt-4 bb">Need Help?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Request Failed</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="empty-state" data-height="400">
|
||||
<div class="empty-state-icon bg-danger">
|
||||
<i class="fas fa-times"></i>
|
||||
</div>
|
||||
<h2>HTTP Request Failed</h2>
|
||||
<p class="lead">
|
||||
We tried it, but failed when requesting data to the server, sorry. (Code: <a href="#" class="bb">14045</a>)
|
||||
</p>
|
||||
<a href="#" class="btn btn-warning mt-4">Try Again</a>
|
||||
<a href="#" class="mt-4 bb">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
119
pages/components-gallery.html
Normal file
119
pages/components-gallery.html
Normal file
@@ -0,0 +1,119 @@
|
||||
{% set title = 'Components › Gallery' %}
|
||||
{% set page = 'components-gallery.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/chocolat/dist/css/chocolat.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Gallery</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Gallery</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Gallery</h2>
|
||||
<p class="section-lead">Grouping multiple images on one component.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-lg-4">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Gallery</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="gallery">
|
||||
<div class="gallery-item" data-image="assets/img/news/img01.jpg" data-title="Image 1"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img02.jpg" data-title="Image 2"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img03.jpg" data-title="Image 3"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img04.jpg" data-title="Image 4"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img05.jpg" data-title="Image 5"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img06.jpg" data-title="Image 6"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img07.jpg" data-title="Image 7"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img08.jpg" data-title="Image 8"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Gallery</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="gallery">
|
||||
<div class="gallery-item" data-image="assets/img/news/img05.jpg" data-title="Image 1"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img08.jpg" data-title="Image 2"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img04.jpg" data-title="Image 3"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img11.jpg" data-title="Image 4"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img02.jpg" data-title="Image 5"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img05.jpg" data-title="Image 6"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img03.jpg" data-title="Image 7"></div>
|
||||
<div class="gallery-item gallery-more" data-image="assets/img/news/img02.jpg" data-title="Image 8">
|
||||
<div>+2</div>
|
||||
</div>
|
||||
<div class="gallery-item gallery-hide" data-image="assets/img/news/img11.jpg" data-title="Image 9"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Gallery <code>.gallery-md</code></h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="gallery gallery-md">
|
||||
<div class="gallery-item" data-image="assets/img/news/img03.jpg" data-title="Image 1"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img14.jpg" data-title="Image 2"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img08.jpg" data-title="Image 3"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img05.jpg" data-title="Image 4"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img11.jpg" data-title="Image 5"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img09.jpg" data-title="Image 6"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img12.jpg" data-title="Image 8"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img13.jpg" data-title="Image 9"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img14.jpg" data-title="Image 10"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img15.jpg" data-title="Image 11"></div>
|
||||
<div class="gallery-item gallery-more" data-image="assets/img/news/img08.jpg" data-title="Image 12">
|
||||
<div>+2</div>
|
||||
</div>
|
||||
<div class="gallery-item gallery-hide" data-image="assets/img/news/img01.jpg" data-title="Image 9"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Gallery <code>.gallery-fw</code></h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="gallery gallery-fw" data-item-height="100">
|
||||
<div class="gallery-item" data-image="assets/img/news/img09.jpg" data-title="Image 1"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img10.jpg" data-title="Image 2"></div>
|
||||
<div class="gallery-item gallery-more" data-image="assets/img/news/img08.jpg" data-title="Image 3">
|
||||
<div>+2</div>
|
||||
</div>
|
||||
<div class="gallery-item gallery-hide" data-image="assets/img/news/img01.jpg" data-title="Image 4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
|
||||
{% endblock %}
|
||||
76
pages/components-hero.html
Normal file
76
pages/components-hero.html
Normal file
@@ -0,0 +1,76 @@
|
||||
{% set title = 'Components › Hero' %}
|
||||
{% set page = 'components-hero.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Hero</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Hero</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Hero</h2>
|
||||
<p class="section-lead">Components that can be used to make something bigger than the header.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<div class="hero bg-primary text-white">
|
||||
<div class="hero-inner">
|
||||
<h2>Welcome Back, Ujang!</h2>
|
||||
<p class="lead">This page is a place to manage posts, categories and more.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-4">
|
||||
<div class="hero bg-primary text-white">
|
||||
<div class="hero-inner">
|
||||
<h2>Welcome, Ujang!</h2>
|
||||
<p class="lead">You almost arrived, complete the information about your account to complete registration.</p>
|
||||
<div class="mt-4">
|
||||
<a href="#" class="btn btn-outline-white btn-lg btn-icon icon-left"><i class="far fa-user"></i> Setup Account</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-4">
|
||||
<div class="hero align-items-center bg-success text-white">
|
||||
<div class="hero-inner text-center">
|
||||
<h2>Congratulations</h2>
|
||||
<p class="lead">You have successfully registered with our system. Next, you can log in to the dashboard with your account.</p>
|
||||
<div class="mt-4">
|
||||
<a href="#" class="btn btn-outline-white btn-lg btn-icon icon-left"><i class="fas fa-sign-in-alt"></i> Login</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-4">
|
||||
<div class="hero text-white hero-bg-image hero-bg-parallax" style="background-image: url('assets/img/unsplash/andre-benz-1214056-unsplash.jpg');">
|
||||
<div class="hero-inner">
|
||||
<h2>Welcome, Ujang!</h2>
|
||||
<p class="lead">You almost arrived, complete the information about your account to complete registration.</p>
|
||||
<div class="mt-4">
|
||||
<a href="#" class="btn btn-outline-white btn-lg btn-icon icon-left"><i class="far fa-user"></i> Setup Account</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-4">
|
||||
<div class="hero text-white hero-bg-image" style="background-image: url('assets/img/unsplash/eberhard-grossgasteiger-1207565-unsplash.jpg');">
|
||||
<div class="hero-inner">
|
||||
<h2>Welcome, Ujang!</h2>
|
||||
<p class="lead">You almost arrived, complete the information about your account to complete registration.</p>
|
||||
<div class="mt-4">
|
||||
<a href="#" class="btn btn-outline-white btn-lg btn-icon icon-left"><i class="far fa-user"></i> Setup Account</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
52
pages/components-multiple-upload.html
Normal file
52
pages/components-multiple-upload.html
Normal file
@@ -0,0 +1,52 @@
|
||||
{% set title = 'Components › Multiple Upload' %}
|
||||
{% set page = 'components-multiple-upload.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/dropzone/dist/min/dropzone.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Multiple Upload</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Multiple Upload</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Multiple Upload</h2>
|
||||
<p class="section-lead">
|
||||
We use 'Dropzone.js' made by @Dropzone. You can check the full documentation <a href="http://www.dropzonejs.com/">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Multiple Upload</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="#" class="dropzone" id="mydropzone">
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" multiple />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/dropzone/dist/min/dropzone.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/components-multiple-upload.js"></script>
|
||||
{% endblock %}
|
||||
138
pages/components-pricing.html
Normal file
138
pages/components-pricing.html
Normal file
@@ -0,0 +1,138 @@
|
||||
{% set title = 'Components › Pricing' %}
|
||||
{% set page = 'components-pricing.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Pricing</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Pricing</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Pricing</h2>
|
||||
<p class="section-lead">Price components are very important for SaaS projects or other projects.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4 col-lg-4">
|
||||
<div class="pricing">
|
||||
<div class="pricing-title">
|
||||
Developer
|
||||
</div>
|
||||
<div class="pricing-padding">
|
||||
<div class="pricing-price">
|
||||
<div>$19</div>
|
||||
<div>per month</div>
|
||||
</div>
|
||||
<div class="pricing-details">
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">1 user agent</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">Core features</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">1GB storage</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">2 Custom domain</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon bg-danger text-white"><i class="fas fa-times"></i></div>
|
||||
<div class="pricing-item-label">Live Support</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pricing-cta">
|
||||
<a href="#">Subscribe <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-lg-4">
|
||||
<div class="pricing pricing-highlight">
|
||||
<div class="pricing-title">
|
||||
Small Team
|
||||
</div>
|
||||
<div class="pricing-padding">
|
||||
<div class="pricing-price">
|
||||
<div>$60</div>
|
||||
<div>per month</div>
|
||||
</div>
|
||||
<div class="pricing-details">
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">5 user agent</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">Core features</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">10GB storage</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">10 Custom domain</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">24/7 Support</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pricing-cta">
|
||||
<a href="#">Subscribe <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-lg-4">
|
||||
<div class="pricing">
|
||||
<div class="pricing-title">
|
||||
Enterprise
|
||||
</div>
|
||||
<div class="pricing-padding">
|
||||
<div class="pricing-price">
|
||||
<div>$499</div>
|
||||
<div>per month</div>
|
||||
</div>
|
||||
<div class="pricing-details">
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">Unlimited user agent</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">Core features</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">8TB storage</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">Unlimited custom domain</div>
|
||||
</div>
|
||||
<div class="pricing-item">
|
||||
<div class="pricing-item-icon"><i class="fas fa-check"></i></div>
|
||||
<div class="pricing-item-label">Lifetime Support</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pricing-cta">
|
||||
<a href="#">Subscribe <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
290
pages/components-statistic.html
Normal file
290
pages/components-statistic.html
Normal file
@@ -0,0 +1,290 @@
|
||||
{% set title = 'Components › Statistic' %}
|
||||
{% set page = 'components-statistic.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/jqvmap/dist/jqvmap.min.css">
|
||||
<link rel="stylesheet" href="node_modules/flag-icon-css/css/flag-icon.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Statistic</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Statistic</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Statistics</h2>
|
||||
<p class="section-lead">The chat component and is equipped with a JavaScript API, making it easy for you to integrate with Back-end.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Summary</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#summary-chart" data-tab="summary-tab" class="btn active">Chart</a>
|
||||
<a href="#summary-text" data-tab="summary-tab" class="btn">Text</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="summary">
|
||||
<div class="summary-info" data-tab-group="summary-tab" id="summary-text">
|
||||
<h4>$1,858</h4>
|
||||
<div class="text-muted">Sold 4 items on 2 customers</div>
|
||||
<div class="d-block mt-2">
|
||||
<a href="#">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-chart active" data-tab-group="summary-tab" id="summary-chart">
|
||||
<canvas id="myChart" height="180"></canvas>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<h6 class="mt-3">Item List <span class="text-muted">(4 Items)</span></h6>
|
||||
<ul class="list-unstyled list-unstyled-border">
|
||||
<li class="media">
|
||||
<a href="#">
|
||||
<img alt="image" class="mr-3 rounded" width="50" src="assets/img/products/product-4-50.png">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<div class="media-right">$805</div>
|
||||
<div class="media-title"><a href="#">iBook Noob</a></div>
|
||||
<div class="text-small text-muted">by <a href="#">Ahmad Sutisna</a> <div class="bullet"></div> Sunday</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<a href="#">
|
||||
<img alt="image" class="mr-3 rounded" width="50" src="assets/img/products/product-1-50.png">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<div class="media-right">$405</div>
|
||||
<div class="media-title"><a href="#">Headphone Blitz</a></div>
|
||||
<div class="text-small text-muted">by <a href="#">Hasan Basri</a> <div class="bullet"></div> Sunday</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<a href="#">
|
||||
<img alt="image" class="mr-3 rounded" width="50" src="assets/img/products/product-2-50.png">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<div class="media-right">$499</div>
|
||||
<div class="media-title"><a href="#">RocketZ</a></div>
|
||||
<div class="text-muted text-small">by <a href="#">Hasan Basri</a> <div class="bullet"></div> Sunday
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<a href="#">
|
||||
<img alt="image" class="mr-3 rounded" width="50" src="assets/img/products/product-3-50.png">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<div class="media-right">$149</div>
|
||||
<div class="media-title"><a href="#">Xiaomay Readme 4.0</a></div>
|
||||
<div class="text-small text-muted">by <a href="#">Kusnaedi</a> <div class="bullet"></div> Tuesday
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Statistics</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#" class="btn active">Week</a>
|
||||
<a href="#" class="btn">Month</a>
|
||||
<a href="#" class="btn">Year</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myChart2" height="180"></canvas>
|
||||
<div class="statistic-details mt-1">
|
||||
<div class="statistic-details-item">
|
||||
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 7%</div>
|
||||
<div class="detail-value">$243</div>
|
||||
<div class="detail-name">Today</div>
|
||||
</div>
|
||||
<div class="statistic-details-item">
|
||||
<div class="text-small text-muted"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 23%</div>
|
||||
<div class="detail-value">$2,902</div>
|
||||
<div class="detail-name">This Week</div>
|
||||
</div>
|
||||
<div class="statistic-details-item">
|
||||
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span>9%</div>
|
||||
<div class="detail-value">$12,821</div>
|
||||
<div class="detail-name">This Month</div>
|
||||
</div>
|
||||
<div class="statistic-details-item">
|
||||
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 19%</div>
|
||||
<div class="detail-value">$92,142</div>
|
||||
<div class="detail-name">This Year</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4">
|
||||
<div class="card-header">
|
||||
<h4>Popular Browser</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mb-4 mb-lg-0 text-center">
|
||||
<div class="browser browser-chrome"></div>
|
||||
<div class="mt-2 font-weight-bold">Chrome</div>
|
||||
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 48%</div>
|
||||
</div>
|
||||
<div class="col mb-4 mb-lg-0 text-center">
|
||||
<div class="browser browser-firefox"></div>
|
||||
<div class="mt-2 font-weight-bold">Firefox</div>
|
||||
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 26%</div>
|
||||
</div>
|
||||
<div class="col mb-4 mb-lg-0 text-center">
|
||||
<div class="browser browser-safari"></div>
|
||||
<div class="mt-2 font-weight-bold">Safari</div>
|
||||
<div class="text-small text-muted"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 14%</div>
|
||||
</div>
|
||||
<div class="col mb-4 mb-lg-0 text-center">
|
||||
<div class="browser browser-opera"></div>
|
||||
<div class="mt-2 font-weight-bold">Opera</div>
|
||||
<div class="text-small text-muted">7%</div>
|
||||
</div>
|
||||
<div class="col mb-4 mb-lg-0 text-center">
|
||||
<div class="browser browser-internet-explorer"></div>
|
||||
<div class="mt-2 font-weight-bold">IE</div>
|
||||
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 5%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Visitors</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="visitorMap" data-height="190"></div>
|
||||
</div>
|
||||
<div class="card-footer card-footer-grey pt-0">
|
||||
<div class="statistic-details mt-4 align-items-center justify-content-center">
|
||||
<div class="statistic-details-item col-sm-4 col-12">
|
||||
<div class="detail-chart">
|
||||
<div class="sparkline-line-chart"></div>
|
||||
</div>
|
||||
<div class="detail-value">12,329</div>
|
||||
<div class="detail-name">Visits</div>
|
||||
</div>
|
||||
<div class="statistic-details-item col-sm-4 col-12">
|
||||
<div class="detail-chart">
|
||||
<div class="sparkline-line-chart"></div>
|
||||
</div>
|
||||
<div class="detail-value">28%</div>
|
||||
<div class="detail-name">Referral</div>
|
||||
</div>
|
||||
<div class="statistic-details-item col-sm-4 col-12">
|
||||
<div class="detail-chart">
|
||||
<div class="sparkline-line-chart"></div>
|
||||
</div>
|
||||
<div class="detail-value">72%</div>
|
||||
<div class="detail-name">Organic</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-4">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-3 col-6 mb-md-0 mb-4 text-center">
|
||||
<div class="img-shadow flag-icon flag-icon-id"></div>
|
||||
<div class="mt-2 font-weight-bold text-nowrap">Indonesia</div>
|
||||
<div class="text-small text-muted">8,400</div>
|
||||
</div>
|
||||
<div class="col-sm-3 col-6 mb-md-0 mb-4 text-center">
|
||||
<div class="img-shadow flag-icon flag-icon-ps"></div>
|
||||
<div class="mt-2 font-weight-bold text-nowrap">Palestine</div>
|
||||
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 7,328</div>
|
||||
</div>
|
||||
<div class="col-sm-3 col-6 text-center">
|
||||
<div class="img-shadow flag-icon flag-icon-sy"></div>
|
||||
<div class="mt-2 font-weight-bold text-nowrap">Syiria</div>
|
||||
<div class="text-small text-muted"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 5,830</div>
|
||||
</div>
|
||||
<div class="col-sm-3 col-6 text-center">
|
||||
<div class="img-shadow flag-icon flag-icon-my"></div>
|
||||
<div class="mt-2 font-weight-bold text-nowrap">Malaysia</div>
|
||||
<div class="text-small text-muted">4,763</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-lg-6 mt-lg-0 mt-sm-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Referral URL</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myChart3" height="170"></canvas>
|
||||
|
||||
<div class="mb-4 mt-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">558</div>
|
||||
<div class="font-weight-bold mb-1">Google</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">338</div>
|
||||
<div class="font-weight-bold mb-1">Facebook</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="67%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">238</div>
|
||||
<div class="font-weight-bold mb-1">Bing</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="58%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">190</div>
|
||||
<div class="font-weight-bold mb-1">Yahoo</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="36%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/jquery-sparkline/jquery.sparkline.min.js"></script>
|
||||
<script src="node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="node_modules/jqvmap/dist/jquery.vmap.min.js"></script>
|
||||
<script src="node_modules/jqvmap/dist/maps/jquery.vmap.world.js"></script>
|
||||
<script src="node_modules/jqvmap/dist/maps/jquery.vmap.indonesia.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/components-statistic.js"></script>
|
||||
{% endblock %}
|
||||
175
pages/components-tab.html
Normal file
175
pages/components-tab.html
Normal file
@@ -0,0 +1,175 @@
|
||||
{% set title = 'Components › Tab' %}
|
||||
{% set page = 'components-tab.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Tab</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Tab</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Tabs</h2>
|
||||
<p class="section-lead">The tab component for dividing parts of content.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Default Tab</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui. Aliquam convallis neque eget tellus efficitur, eget maximus massa imperdiet. Morbi a mattis velit. Donec hendrerit venenatis justo, eget scelerisque tellus pharetra a.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
||||
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor. Nam malesuada orci non ornare vulputate. Ut ut sollicitudin magna. Vestibulum eget ligula ut ipsum venenatis ultrices. Proin bibendum bibendum augue ut luctus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Bordered Tab</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs" id="myTab2" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab2" data-toggle="tab" href="#home2" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab2" data-toggle="tab" href="#profile2" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab2" data-toggle="tab" href="#contact2" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content tab-bordered" id="myTab3Content">
|
||||
<div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="profile-tab2">
|
||||
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui. Aliquam convallis neque eget tellus efficitur, eget maximus massa imperdiet. Morbi a mattis velit. Donec hendrerit venenatis justo, eget scelerisque tellus pharetra a.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact2" role="tabpanel" aria-labelledby="contact-tab2">
|
||||
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor. Nam malesuada orci non ornare vulputate. Ut ut sollicitudin magna. Vestibulum eget ligula ut ipsum venenatis ultrices. Proin bibendum bibendum augue ut luctus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-5 col-lg-5">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Tab <code>.nav-pills</code></h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-pills" id="myTab3" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab3" data-toggle="tab" href="#home3" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab3" data-toggle="tab" href="#profile3" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab3" data-toggle="tab" href="#contact3" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent2">
|
||||
<div class="tab-pane fade show active" id="home3" role="tabpanel" aria-labelledby="home-tab3">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile3" role="tabpanel" aria-labelledby="profile-tab3">
|
||||
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact3" role="tabpanel" aria-labelledby="contact-tab3">
|
||||
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-7 col-lg-7">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>2 Column</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-4">
|
||||
<ul class="nav nav-pills flex-column" id="myTab4" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab4" data-toggle="tab" href="#home4" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab4" data-toggle="tab" href="#profile4" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab4" data-toggle="tab" href="#contact4" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-8">
|
||||
<div class="tab-content no-padding" id="myTab2Content">
|
||||
<div class="tab-pane fade show active" id="home4" role="tabpanel" aria-labelledby="home-tab4">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile4" role="tabpanel" aria-labelledby="profile-tab4">
|
||||
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui. Aliquam convallis neque eget tellus efficitur, eget maximus massa imperdiet. Morbi a mattis velit. Donec hendrerit venenatis justo, eget scelerisque tellus pharetra a.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact4" role="tabpanel" aria-labelledby="contact-tab4">
|
||||
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor. Nam malesuada orci non ornare vulputate. Ut ut sollicitudin magna. Vestibulum eget ligula ut ipsum venenatis ultrices. Proin bibendum bibendum augue ut luctus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
416
pages/components-table.html
Normal file
416
pages/components-table.html
Normal file
@@ -0,0 +1,416 @@
|
||||
{% set title = 'Components › Table' %}
|
||||
{% set page = 'components-table.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Table</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Table</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Table</h2>
|
||||
<p class="section-lead">Example of some Bootstrap table components.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Simple Table</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-md">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Created At</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Irwansyah Saputra</td>
|
||||
<td>2017-01-09</td>
|
||||
<td><div class="badge badge-success">Active</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Hasan Basri</td>
|
||||
<td>2017-01-09</td>
|
||||
<td><div class="badge badge-success">Active</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Kusnadi</td>
|
||||
<td>2017-01-11</td>
|
||||
<td><div class="badge badge-danger">Not Active</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Rizal Fakhri</td>
|
||||
<td>2017-01-11</td>
|
||||
<td><div class="badge badge-success">Active</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<nav class="d-inline-block">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
|
||||
</li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">2</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Full Width</h4>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-md">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Created At</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Irwansyah Saputra</td>
|
||||
<td>2017-01-09</td>
|
||||
<td><div class="badge badge-success">Active</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Hasan Basri</td>
|
||||
<td>2017-01-09</td>
|
||||
<td><div class="badge badge-success">Active</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Kusnadi</td>
|
||||
<td>2017-01-11</td>
|
||||
<td><div class="badge badge-danger">Not Active</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Rizal Fakhri</td>
|
||||
<td>2017-01-11</td>
|
||||
<td><div class="badge badge-success">Active</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Isnap Kiswandi</td>
|
||||
<td>2017-01-17</td>
|
||||
<td><div class="badge badge-success">Active</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<nav class="d-inline-block">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
|
||||
</li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">2</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Advanced Table</h4>
|
||||
<div class="card-header-form">
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-primary"><i class="fas fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<tr>
|
||||
<th>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" data-checkbox-role="dad" class="custom-control-input" id="checkbox-all">
|
||||
<label for="checkbox-all" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</th>
|
||||
<th>Task Name</th>
|
||||
<th>Progress</th>
|
||||
<th>Members</th>
|
||||
<th>Due Date</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-0 text-center">
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-1">
|
||||
<label for="checkbox-1" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Create a mobile app</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
|
||||
<div class="progress-bar bg-success" data-width="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Wildan Ahdian">
|
||||
</td>
|
||||
<td>2018-01-20</td>
|
||||
<td><div class="badge badge-success">Completed</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-0 text-center">
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-2">
|
||||
<label for="checkbox-2" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Redesign homepage</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="0%">
|
||||
<div class="progress-bar" data-width="0"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Nur Alpiana">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hariono Yusup">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Bagus Dwi Cahya">
|
||||
</td>
|
||||
<td>2018-04-10</td>
|
||||
<td><div class="badge badge-info">Todo</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-0 text-center">
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-3">
|
||||
<label for="checkbox-3" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Backup database</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="70%">
|
||||
<div class="progress-bar bg-warning" data-width="70"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hasan Basri">
|
||||
</td>
|
||||
<td>2018-01-29</td>
|
||||
<td><div class="badge badge-warning">In Progress</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-0 text-center">
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-4">
|
||||
<label for="checkbox-4" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Input data</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
|
||||
<div class="progress-bar bg-success" data-width="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Isnap Kiswandi">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Yudi Nawawi">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Khaerul Anwar">
|
||||
</td>
|
||||
<td>2018-01-16</td>
|
||||
<td><div class="badge badge-success">Completed</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Sortable Table</h4>
|
||||
<div class="card-header-action">
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-primary"><i class="fas fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="sortable-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">
|
||||
<i class="fas fa-th"></i>
|
||||
</th>
|
||||
<th>Task Name</th>
|
||||
<th>Progress</th>
|
||||
<th>Members</th>
|
||||
<th>Due Date</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="sort-handler">
|
||||
<i class="fas fa-th"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td>Create a mobile app</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
|
||||
<div class="progress-bar bg-success" data-width="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Wildan Ahdian">
|
||||
</td>
|
||||
<td>2018-01-20</td>
|
||||
<td><div class="badge badge-success">Completed</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="sort-handler">
|
||||
<i class="fas fa-th"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td>Redesign homepage</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="0%">
|
||||
<div class="progress-bar" data-width="0"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Nur Alpiana">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hariono Yusup">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Bagus Dwi Cahya">
|
||||
</td>
|
||||
<td>2018-04-10</td>
|
||||
<td><div class="badge badge-info">Todo</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="sort-handler">
|
||||
<i class="fas fa-th"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td>Backup database</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="70%">
|
||||
<div class="progress-bar bg-warning" data-width="70"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hasan Basri">
|
||||
</td>
|
||||
<td>2018-01-29</td>
|
||||
<td><div class="badge badge-warning">In Progress</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="sort-handler">
|
||||
<i class="fas fa-th"></i>
|
||||
</div>
|
||||
</td>
|
||||
<td>Input data</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
|
||||
<div class="progress-bar bg-success" data-width="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Isnap Kiswandi">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Yudi Nawawi">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Khaerul Anwar">
|
||||
</td>
|
||||
<td>2018-01-16</td>
|
||||
<td><div class="badge badge-success">Completed</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/jquery-ui-dist/jquery-ui.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/components-table.js"></script>
|
||||
{% endblock %}
|
||||
451
pages/components-user.html
Normal file
451
pages/components-user.html
Normal file
@@ -0,0 +1,451 @@
|
||||
{% set title = 'Components › User' %}
|
||||
{% set page = 'components-user.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
|
||||
<link rel="stylesheet" href="node_modules/owl.carousel/dist/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="node_modules/owl.carousel/dist/assets/owl.theme.default.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>User</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">User</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Users</h2>
|
||||
<p class="section-lead">Components relating to users, lists of users and so on.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-lg-7">
|
||||
<div class="card author-box card-primary">
|
||||
<div class="card-body">
|
||||
<div class="author-box-left">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle author-box-picture">
|
||||
<div class="clearfix"></div>
|
||||
<a href="#" class="btn btn-primary mt-3 follow-btn" data-follow-action="alert('follow clicked');" data-unfollow-action="alert('unfollow clicked');">Follow</a>
|
||||
</div>
|
||||
<div class="author-box-details">
|
||||
<div class="author-box-name">
|
||||
<a href="#">Hasan Basri</a>
|
||||
</div>
|
||||
<div class="author-box-job">Web Developer</div>
|
||||
<div class="author-box-description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.</p>
|
||||
</div>
|
||||
<div class="mb-2 mt-3"><div class="text-small font-weight-bold">Follow Hasan On</div></div>
|
||||
<a href="#" class="btn btn-social-icon mr-1 btn-facebook">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-social-icon mr-1 btn-twitter">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-social-icon mr-1 btn-github">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-social-icon mr-1 btn-instagram">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<div class="w-100 d-sm-none"></div>
|
||||
<div class="float-right mt-sm-0 mt-3">
|
||||
<a href="#" class="btn">View Posts <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h4>Users</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#" class="btn btn-danger btn-icon icon-right">View All <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="owl-carousel owl-theme" id="users-carousel">
|
||||
<div>
|
||||
<div class="user-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="img-fluid">
|
||||
<div class="user-details">
|
||||
<div class="user-name">Hasan Basri</div>
|
||||
<div class="text-job text-muted">Web Developer</div>
|
||||
<div class="user-cta">
|
||||
<button class="btn btn-primary follow-btn" data-follow-action="alert('user1 followed');" data-unfollow-action="alert('user1 unfollowed');">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="user-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="img-fluid">
|
||||
<div class="user-details">
|
||||
<div class="user-name">Kusnaedi</div>
|
||||
<div class="text-job text-muted">Mobile Developer</div>
|
||||
<div class="user-cta">
|
||||
<button class="btn btn-primary follow-btn" data-follow-action="alert('user2 followed');" data-unfollow-action="alert('user2 unfollowed');">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="user-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="img-fluid">
|
||||
<div class="user-details">
|
||||
<div class="user-name">Bagus Dwi Cahya</div>
|
||||
<div class="text-job text-muted">UI Designer</div>
|
||||
<div class="user-cta">
|
||||
<button class="btn btn-danger following-btn" data-unfollow-action="alert('user3 unfollowed');" data-follow-action="alert('user3 followed');">Following</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="user-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="img-fluid">
|
||||
<div class="user-details">
|
||||
<div class="user-name">Wildan Ahdian</div>
|
||||
<div class="text-job text-muted">Project Manager</div>
|
||||
<div class="user-cta">
|
||||
<button class="btn btn-primary follow-btn" data-follow-action="alert('user4 followed');" data-unfollow-action="alert('user4 unfollowed');">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="user-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="img-fluid">
|
||||
<div class="user-details">
|
||||
<div class="user-name">Deden Febriansyah</div>
|
||||
<div class="text-job text-muted">IT Support</div>
|
||||
<div class="user-cta">
|
||||
<button class="btn btn-primary follow-btn" data-follow-action="alert('user5 followed');" data-unfollow-action="alert('user5 unfollowed');">Follow</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-lg-5">
|
||||
<div class="card profile-widget">
|
||||
<div class="profile-widget-header">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle profile-widget-picture">
|
||||
<div class="profile-widget-items">
|
||||
<div class="profile-widget-item">
|
||||
<div class="profile-widget-item-label">Posts</div>
|
||||
<div class="profile-widget-item-value">187</div>
|
||||
</div>
|
||||
<div class="profile-widget-item">
|
||||
<div class="profile-widget-item-label">Followers</div>
|
||||
<div class="profile-widget-item-value">6,8K</div>
|
||||
</div>
|
||||
<div class="profile-widget-item">
|
||||
<div class="profile-widget-item-label">Following</div>
|
||||
<div class="profile-widget-item-value">2,1K</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-widget-description pb-0">
|
||||
<div class="profile-widget-name">Hasan Basri <div class="text-muted d-inline font-weight-normal"><div class="slash"></div> Web Developer</div></div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.</p>
|
||||
</div>
|
||||
<div class="card-footer text-center pt-0">
|
||||
<div class="font-weight-bold mb-2 text-small">Follow Hasan On</div>
|
||||
<a href="#" class="btn btn-social-icon mr-1 btn-facebook">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-social-icon mr-1 btn-twitter">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-social-icon mr-1 btn-github">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-social-icon mr-1 btn-instagram">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-4">
|
||||
<div class="card-header">
|
||||
<h4>Authors</h4>
|
||||
</div>
|
||||
<div class="card-body pb-0">
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="img-fluid" data-toggle="tooltip" title="Syahdan Ubaidillah">
|
||||
<div class="avatar-badge" title="Editor" data-toggle="tooltip"><i class="fas fa-wrench"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="img-fluid" data-toggle="tooltip" title="Danny Stenvenson">
|
||||
<div class="avatar-badge" title="Admin" data-toggle="tooltip"><i class="fas fa-cog"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="img-fluid" data-toggle="tooltip" title="Riko Huang">
|
||||
<div class="avatar-badge" title="Author" data-toggle="tooltip"><i class="fas fa-pencil-alt"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="img-fluid" data-toggle="tooltip" title="Luthfi Hakim">
|
||||
<div class="avatar-badge" title="Author" data-toggle="tooltip"><i class="fas fa-pencil-alt"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="img-fluid" data-toggle="tooltip" title="Alfa Zulkarnain">
|
||||
<div class="avatar-badge" title="Editor" data-toggle="tooltip"><i class="fas fa-wrench"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="img-fluid" data-toggle="tooltip" title="Egi Ferdian">
|
||||
<div class="avatar-badge" title="Admin" data-toggle="tooltip"><i class="fas fa-cog"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="img-fluid" data-toggle="tooltip" title="Jaka Ramadhan">
|
||||
<div class="avatar-badge" title="Author" data-toggle="tooltip"><i class="fas fa-pencil-alt"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="img-fluid" data-toggle="tooltip" title="Ryan">
|
||||
<div class="avatar-badge" title="Admin" data-toggle="tooltip"><i class="fas fa-cog"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Comments</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled list-unstyled-border list-unstyled-noborder">
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="70" src="assets/img/avatar/avatar-1.png">
|
||||
<div class="media-body">
|
||||
<div class="media-right"><div class="text-primary">Approved</div></div>
|
||||
<div class="media-title mb-1">Rizal Fakhri</div>
|
||||
<div class="text-time">Yesterday</div>
|
||||
<div class="media-description text-muted">Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="media-links">
|
||||
<a href="#">View</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Edit</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#" class="text-danger">Trash</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="70" src="assets/img/avatar/avatar-2.png">
|
||||
<div class="media-body">
|
||||
<div class="media-right"><div class="text-warning">Pending</div></div>
|
||||
<div class="media-title mb-1">Bambang Uciha</div>
|
||||
<div class="text-time">Yesterday</div>
|
||||
<div class="media-description text-muted">Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
|
||||
<div class="media-links">
|
||||
<a href="#">View</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Edit</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#" class="text-danger">Trash</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="70" src="assets/img/avatar/avatar-3.png">
|
||||
<div class="media-body">
|
||||
<div class="media-right"><div class="text-primary">Approved</div></div>
|
||||
<div class="media-title mb-1">Ujang Maman</div>
|
||||
<div class="text-time">Yesterday</div>
|
||||
<div class="media-description text-muted">Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident</div>
|
||||
<div class="media-links">
|
||||
<a href="#">View</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Edit</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#" class="text-danger">Trash</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>User Progress</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled user-progress list-unstyled-border list-unstyled-noborder">
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-1.png">
|
||||
<div class="media-body">
|
||||
<div class="media-title">Rizal Fakhri</div>
|
||||
<div class="text-job text-muted">Web Developer</div>
|
||||
</div>
|
||||
<div class="media-progressbar">
|
||||
<div class="progress-text">30%</div>
|
||||
<div class="progress" data-height="6">
|
||||
<div class="progress-bar bg-primary" data-width="30%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-cta">
|
||||
<a href="#" class="btn btn-outline-primary">Detail</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-5.png">
|
||||
<div class="media-body">
|
||||
<div class="media-title">Irwansyah Saputra</div>
|
||||
<div class="text-job text-muted">Web Developer</div>
|
||||
</div>
|
||||
<div class="media-progressbar">
|
||||
<div class="progress-text">67%</div>
|
||||
<div class="progress" data-height="6">
|
||||
<div class="progress-bar bg-primary" data-width="67%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-cta">
|
||||
<a href="#" class="btn btn-outline-primary">Detail</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-4.png">
|
||||
<div class="media-body">
|
||||
<div class="media-title">Hasan Basri</div>
|
||||
<div class="text-job text-muted">Web Developer</div>
|
||||
</div>
|
||||
<div class="media-progressbar">
|
||||
<div class="progress-text">45%</div>
|
||||
<div class="progress" data-height="6">
|
||||
<div class="progress-bar bg-primary" data-width="45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-cta">
|
||||
<a href="#" class="btn btn-outline-primary">Detail</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-4">
|
||||
<div class="card-header">
|
||||
<h4>User Details</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled user-details list-unstyled-border list-unstyled-noborder">
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-1.png">
|
||||
<div class="media-body">
|
||||
<div class="media-title">Rizal Fakhri</div>
|
||||
<div class="text-job text-muted">Web Developer</div>
|
||||
</div>
|
||||
<div class="media-items">
|
||||
<div class="media-item">
|
||||
<div class="media-value">1,239</div>
|
||||
<div class="media-label">Posts</div>
|
||||
</div>
|
||||
<div class="media-item">
|
||||
<div class="media-value">10K</div>
|
||||
<div class="media-label">Followers</div>
|
||||
</div>
|
||||
<div class="media-item">
|
||||
<div class="media-value">2,312</div>
|
||||
<div class="media-label">Following</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-5.png">
|
||||
<div class="media-body">
|
||||
<div class="media-title">Irwansyah Saputra</div>
|
||||
<div class="text-job text-muted">Web Developer</div>
|
||||
</div>
|
||||
<div class="media-items">
|
||||
<div class="media-item">
|
||||
<div class="media-value">4,872</div>
|
||||
<div class="media-label">Posts</div>
|
||||
</div>
|
||||
<div class="media-item">
|
||||
<div class="media-value">43K</div>
|
||||
<div class="media-label">Followers</div>
|
||||
</div>
|
||||
<div class="media-item">
|
||||
<div class="media-value">1,290</div>
|
||||
<div class="media-label">Following</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img alt="image" class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-4.png">
|
||||
<div class="media-body">
|
||||
<div class="media-title">Hasan Basri</div>
|
||||
<div class="text-job text-muted">Web Developer</div>
|
||||
</div>
|
||||
<div class="media-items">
|
||||
<div class="media-item">
|
||||
<div class="media-value">1,821</div>
|
||||
<div class="media-label">Posts</div>
|
||||
</div>
|
||||
<div class="media-item">
|
||||
<div class="media-value">14K</div>
|
||||
<div class="media-label">Followers</div>
|
||||
</div>
|
||||
<div class="media-item">
|
||||
<div class="media-value">2,891</div>
|
||||
<div class="media-label">Following</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/components-user.js"></script>
|
||||
{% endblock %}
|
||||
279
pages/components-wizard.html
Normal file
279
pages/components-wizard.html
Normal file
@@ -0,0 +1,279 @@
|
||||
{% set title = 'Components › Wizard' %}
|
||||
{% set page = 'components-wizard.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Wizard</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
||||
<div class="breadcrumb-item">Wizard</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Wizard</h2>
|
||||
<p class="section-lead">The wizard is a component to simplify a process with a step-by-step method.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Order Status</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mt-4">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
<div class="wizard-steps">
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-tshirt"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Order Placed
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Payment Completed
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Product Shipped
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-success">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Order Completed
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
<div class="wizard-steps">
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-tshirt"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Order Placed
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Payment Completed
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Product Shipped
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-danger">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-times"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Order Canceled
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
<div class="wizard-steps">
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-tshirt"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Order Placed
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Payment Completed
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Product Shipped
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-warning">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-stopwatch"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Order Pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
<div class="wizard-steps">
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-tshirt"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Order Placed
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Payment Completed
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-shipping-fast"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Product Shipped
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step wizard-step-info">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-info"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Order Completed
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Create New App</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mt-4">
|
||||
<div class="col-12 col-lg-8 offset-lg-2">
|
||||
<div class="wizard-steps">
|
||||
<div class="wizard-step wizard-step-active">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="far fa-user"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
User Account
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-box-open"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Create an App
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-step">
|
||||
<div class="wizard-step-icon">
|
||||
<i class="fas fa-server"></i>
|
||||
</div>
|
||||
<div class="wizard-step-label">
|
||||
Server Information
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="wizard-content mt-2">
|
||||
<div class="wizard-pane">
|
||||
<div class="form-group row align-items-center">
|
||||
<label class="col-md-4 text-md-right text-left">Name</label>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<input type="text" name="name" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row align-items-center">
|
||||
<label class="col-md-4 text-md-right text-left">Email</label>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<input type="email" name="email" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-4 text-md-right text-left mt-2">Address</label>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<textarea class="form-control" name="address"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-4 text-md-right text-left mt-2">Role</label>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="developer" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Developer</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="ceo" class="selectgroup-input">
|
||||
<span class="selectgroup-button">CEO</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-4"></div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" name="agree" class="custom-control-input" id="agree">
|
||||
<label class="custom-control-label" for="agree">I agree with the terms and conditions</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-md-4"></div>
|
||||
<div class="col-lg-4 col-md-6 text-right">
|
||||
<a href="#" class="btn btn-icon icon-right btn-primary">Next <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
295
pages/credits.html
Normal file
295
pages/credits.html
Normal file
@@ -0,0 +1,295 @@
|
||||
{% set title = 'Credits' %}
|
||||
{% set page = 'credits.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Credits</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item">Credits</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Thanks To ...</h2>
|
||||
<p class="section-lead">
|
||||
We would like to thank the makers of these cool plugins and images.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Credits</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="list-unstyled list-unstyled-border mt-4">
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Browser Icons</h6>
|
||||
<p>by Marina D</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Bootstrap</h6>
|
||||
<p>by @mdo and @fat</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Bootstrap Color Picker</h6>
|
||||
<p>by Javi Aguilar</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Bootstrap Date Range</h6>
|
||||
<p>by Dan Grossman</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Bootstrap Social Button</h6>
|
||||
<p>by Panayiotis Lipiridis</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Bootstrap Tags Input</h6>
|
||||
<p>by Schlechter</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Timepicker</h6>
|
||||
<p>by @jdewit</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Chocolat</h6>
|
||||
<p>by @nicolas-t</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Cleave.JS</h6>
|
||||
<p>by @nosir</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Codemirror</h6>
|
||||
<p>by Marijn Haverbeke</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>DataTables</h6>
|
||||
<p>by @datatables</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Dropzone.JS</h6>
|
||||
<p>by Matias Meno</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Flag Icon CSS</h6>
|
||||
<p>by Panayiotis Lipiridis</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Font Awesome</h6>
|
||||
<p>by @fontawesome</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Full Calendar</h6>
|
||||
<p>by Adam Shaw</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>IonIcons</h6>
|
||||
<p>by Ionic Framework</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>jQuery</h6>
|
||||
<p>by The jQuery Foundation</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>jQuery PWStrength</h6>
|
||||
<p>by Mato Ilic</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>jQuery Selectric</h6>
|
||||
<p>by Leonardo Santos</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>jQuery UI</h6>
|
||||
<p>by The jQuery Foundation</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>jQuery Vector Map</h6>
|
||||
<p>by Manifest Interactive</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>NiceScroll</h6>
|
||||
<p>by InuYaksa</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>OwlCarousel</h6>
|
||||
<p>by David Deutsch</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Prism</h6>
|
||||
<p>by @PrismJS</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Select2</h6>
|
||||
<p>by Kevin Brown and Igor Vaynberg</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Simple Weather</h6>
|
||||
<p>by James Fleeting</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Summernote</h6>
|
||||
<p>by Alan Hong</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Sweet Alert</h6>
|
||||
<p>by Tristan Edwards</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>iziToast</h6>
|
||||
<p>by Dolce</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Upload Preview</h6>
|
||||
<p>by Opoloo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Weather Icon</h6>
|
||||
<p>by Erik Flowers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Chart.JS</h6>
|
||||
<p>by Nick Downie</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>GMaps.JS</h6>
|
||||
<p>by Gustavo Leon</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Sparkline</h6>
|
||||
<p>by Gareth Watts</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Moment</h6>
|
||||
<p>by @moment</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Popper.JS</h6>
|
||||
<p>by Federico Zivolo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="media-icon"><i class="far fa-circle"></i></div>
|
||||
<div class="media-body">
|
||||
<h6>Tooltip.JS</h6>
|
||||
<p>by Federico Zivolo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
44
pages/errors-403.html
Normal file
44
pages/errors-403.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{% set title = '403' %}
|
||||
{% set page = 'errors-403.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="page-error">
|
||||
<div class="page-inner">
|
||||
<h1>403</h1>
|
||||
<div class="page-description">
|
||||
You do not have access to this page.
|
||||
</div>
|
||||
<div class="page-search">
|
||||
<form>
|
||||
<div class="form-group floating-addon floating-addon-not-append">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary btn-lg">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<a href="index.html">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simple-footer mt-5">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
44
pages/errors-404.html
Normal file
44
pages/errors-404.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{% set title = '404' %}
|
||||
{% set page = 'errors-404.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="page-error">
|
||||
<div class="page-inner">
|
||||
<h1>404</h1>
|
||||
<div class="page-description">
|
||||
The page you were looking for could not be found.
|
||||
</div>
|
||||
<div class="page-search">
|
||||
<form>
|
||||
<div class="form-group floating-addon floating-addon-not-append">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary btn-lg">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<a href="index.html">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simple-footer mt-5">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
44
pages/errors-500.html
Normal file
44
pages/errors-500.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{% set title = '500' %}
|
||||
{% set page = 'errors-500.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="page-error">
|
||||
<div class="page-inner">
|
||||
<h1>500</h1>
|
||||
<div class="page-description">
|
||||
Whoopps, something went wrong.
|
||||
</div>
|
||||
<div class="page-search">
|
||||
<form>
|
||||
<div class="form-group floating-addon floating-addon-not-append">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary btn-lg">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<a href="index.html">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simple-footer mt-5">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
44
pages/errors-503.html
Normal file
44
pages/errors-503.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{% set title = '503' %}
|
||||
{% set page = 'errors-503.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="page-error">
|
||||
<div class="page-inner">
|
||||
<h1>503</h1>
|
||||
<div class="page-description">
|
||||
Be right back.
|
||||
</div>
|
||||
<div class="page-search">
|
||||
<form>
|
||||
<div class="form-group floating-addon floating-addon-not-append">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary btn-lg">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-3">
|
||||
<a href="index.html">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simple-footer mt-5">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
162
pages/features-activities.html
Normal file
162
pages/features-activities.html
Normal file
@@ -0,0 +1,162 @@
|
||||
{% set title = 'Activities' %}
|
||||
{% set page = 'features-activities.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Activities</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item">Activities</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">September 2018</h2>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="activities">
|
||||
<div class="activity">
|
||||
<div class="activity-icon bg-primary text-white shadow-primary">
|
||||
<i class="fas fa-comment-alt"></i>
|
||||
</div>
|
||||
<div class="activity-detail">
|
||||
<div class="mb-2">
|
||||
<span class="text-job text-primary">2 min ago</span>
|
||||
<span class="bullet"></span>
|
||||
<a class="text-job" href="#">View</a>
|
||||
<div class="float-right dropdown">
|
||||
<a href="#" data-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-title">Options</div>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-eye"></i> View</a>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-list"></i> Detail</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger" data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?" data-confirm-text-yes="Yes, IDC"><i class="fas fa-trash-alt"></i> Archive</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Have commented on the task of "<a href="#">Responsive design</a>".</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity">
|
||||
<div class="activity-icon bg-primary text-white shadow-primary">
|
||||
<i class="fas fa-arrows-alt"></i>
|
||||
</div>
|
||||
<div class="activity-detail">
|
||||
<div class="mb-2">
|
||||
<span class="text-job">1 hour ago</span>
|
||||
<span class="bullet"></span>
|
||||
<a class="text-job" href="#">View</a>
|
||||
<div class="float-right dropdown">
|
||||
<a href="#" data-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-title">Options</div>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-eye"></i> View</a>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-list"></i> Detail</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger" data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?" data-confirm-text-yes="Yes, IDC"><i class="fas fa-trash-alt"></i> Archive</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Moved the task "<a href="#">Fix some features that are bugs in the master module</a>" from Progress to Finish.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity">
|
||||
<div class="activity-icon bg-primary text-white shadow-primary">
|
||||
<i class="fas fa-unlock"></i>
|
||||
</div>
|
||||
<div class="activity-detail">
|
||||
<div class="mb-2">
|
||||
<span class="text-job">4 hour ago</span>
|
||||
<span class="bullet"></span>
|
||||
<a class="text-job" href="#">View</a>
|
||||
<div class="float-right dropdown">
|
||||
<a href="#" data-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-title">Options</div>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-eye"></i> View</a>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-list"></i> Detail</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger" data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?" data-confirm-text-yes="Yes, IDC"><i class="fas fa-trash-alt"></i> Archive</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Login to the system with ujang@maman.com email and location in Bogor.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity">
|
||||
<div class="activity-icon bg-primary text-white shadow-primary">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
</div>
|
||||
<div class="activity-detail">
|
||||
<div class="mb-2">
|
||||
<span class="text-job">12 hour ago</span>
|
||||
<span class="bullet"></span>
|
||||
<a class="text-job" href="#">View</a>
|
||||
<div class="float-right dropdown">
|
||||
<a href="#" data-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-title">Options</div>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-eye"></i> View</a>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-list"></i> Detail</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger" data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?" data-confirm-text-yes="Yes, IDC"><i class="fas fa-trash-alt"></i> Archive</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Log out of the system after 6 hours using the system.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity">
|
||||
<div class="activity-icon bg-primary text-white shadow-primary">
|
||||
<i class="fas fa-trash"></i>
|
||||
</div>
|
||||
<div class="activity-detail">
|
||||
<div class="mb-2">
|
||||
<span class="text-job">Yesterday</span>
|
||||
<span class="bullet"></span>
|
||||
<a class="text-job" href="#">View</a>
|
||||
<div class="float-right dropdown">
|
||||
<a href="#" data-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-title">Options</div>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-eye"></i> View</a>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-list"></i> Detail</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger" data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?" data-confirm-text-yes="Yes, IDC"><i class="fas fa-trash-alt"></i> Archive</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Removing task "Delete all unwanted selectors in CSS files".</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity">
|
||||
<div class="activity-icon bg-primary text-white shadow-primary">
|
||||
<i class="fas fa-trash"></i>
|
||||
</div>
|
||||
<div class="activity-detail">
|
||||
<div class="mb-2">
|
||||
<span class="text-job">Yesterday</span>
|
||||
<span class="bullet"></span>
|
||||
<a class="text-job" href="#">View</a>
|
||||
<div class="float-right dropdown">
|
||||
<a href="#" data-toggle="dropdown"><i class="fas fa-ellipsis-h"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-title">Options</div>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-eye"></i> View</a>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="fas fa-list"></i> Detail</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger" data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?" data-confirm-text-yes="Yes, IDC"><i class="fas fa-trash-alt"></i> Archive</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Assign the task of "<a href="#">Redesigning website header and make it responsive AF</a>" to <a href="#">Syahdan Ubaidilah</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
108
pages/features-post-create.html
Normal file
108
pages/features-post-create.html
Normal file
@@ -0,0 +1,108 @@
|
||||
{% set title = 'Post Create' %}
|
||||
{% set page = 'features-post-create.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/summernote/dist/summernote-bs4.css">
|
||||
<link rel="stylesheet" href="node_modules/selectric/public/selectric.css">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-header-back">
|
||||
<a href="features-posts.html" class="btn btn-icon"><i class="fas fa-arrow-left"></i></a>
|
||||
</div>
|
||||
<h1>Create New Post</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Posts</a></div>
|
||||
<div class="breadcrumb-item">Create New Post</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Create New Post</h2>
|
||||
<p class="section-lead">
|
||||
On this page you can create a new post and fill in all fields.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Write Your Post</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Title</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Category</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<select class="form-control selectric">
|
||||
<option>Tech</option>
|
||||
<option>News</option>
|
||||
<option>Political</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Content</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<textarea class="summernote-simple"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Thumbnail</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<div id="image-preview" class="image-preview">
|
||||
<label for="image-upload" id="image-label">Choose File</label>
|
||||
<input type="file" name="image" id="image-upload" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Tags</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<input type="text" class="form-control inputtags">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Status</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<select class="form-control selectric">
|
||||
<option>Publish</option>
|
||||
<option>Draft</option>
|
||||
<option>Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3"></label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<button class="btn btn-primary">Create Post</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/summernote/dist/summernote-bs4.js"></script>
|
||||
<script src="node_modules/selectric/public/jquery.selectric.min.js"></script>
|
||||
<script src="node_modules/jquery_upload_preview/assets/js/jquery.uploadPreview.min.js"></script>
|
||||
<script src="node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/features-post-create.js"></script>
|
||||
{% endblock %}
|
||||
276
pages/features-posts.html
Normal file
276
pages/features-posts.html
Normal file
@@ -0,0 +1,276 @@
|
||||
{% set title = 'Posts' %}
|
||||
{% set page = 'features-posts.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/selectric/public/selectric.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Posts</h1>
|
||||
<div class="section-header-button">
|
||||
<a href="features-post-create.html" class="btn btn-primary">Add New</a>
|
||||
</div>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Posts</a></div>
|
||||
<div class="breadcrumb-item">All Posts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Posts</h2>
|
||||
<p class="section-lead">
|
||||
You can manage all posts, such as editing, deleting and more.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card mb-0">
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">All <span class="badge badge-white">5</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Draft <span class="badge badge-primary">1</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pending <span class="badge badge-primary">1</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Trash <span class="badge badge-primary">0</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>All Posts</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="float-left">
|
||||
<select class="form-control selectric">
|
||||
<option>Action For Selected</option>
|
||||
<option>Move to Draft</option>
|
||||
<option>Move to Pending</option>
|
||||
<option>Delete Pemanently</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary"><i class="fas fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="clearfix mb-3"></div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<tr>
|
||||
<th class="text-center pt-2">
|
||||
<div class="custom-checkbox custom-checkbox-table custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" data-checkbox-role="dad" class="custom-control-input" id="checkbox-all">
|
||||
<label for="checkbox-all" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</th>
|
||||
<th>Title</th>
|
||||
<th>Category</th>
|
||||
<th>Author</th>
|
||||
<th>Created At</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-2">
|
||||
<label for="checkbox-2" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Laravel 5 Tutorial: Introduction
|
||||
<div class="table-links">
|
||||
<a href="#">View</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Edit</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#" class="text-danger">Trash</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Web Developer</a>,
|
||||
<a href="#">Tutorial</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="title" title=""> <div class="d-inline-block ml-1">Rizal Fakhri</div>
|
||||
</a>
|
||||
</td>
|
||||
<td>2018-01-20</td>
|
||||
<td><div class="badge badge-primary">Published</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-3">
|
||||
<label for="checkbox-3" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Laravel 5 Tutorial: Installing
|
||||
<div class="table-links">
|
||||
<a href="#">View</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Edit</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#" class="text-danger">Trash</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Web Developer</a>,
|
||||
<a href="#">Tutorial</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="title" title=""> <div class="d-inline-block ml-1">Rizal Fakhri</div>
|
||||
</a>
|
||||
</td>
|
||||
<td>2018-01-20</td>
|
||||
<td><div class="badge badge-primary">Published</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-4">
|
||||
<label for="checkbox-4" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Laravel 5 Tutorial: MVC
|
||||
<div class="table-links">
|
||||
<a href="#">View</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Edit</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#" class="text-danger">Trash</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Web Developer</a>,
|
||||
<a href="#">Tutorial</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="title" title=""> <div class="d-inline-block ml-1">Rizal Fakhri</div>
|
||||
</a>
|
||||
</td>
|
||||
<td>2018-01-20</td>
|
||||
<td><div class="badge badge-primary">Published</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-5">
|
||||
<label for="checkbox-5" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Laravel 5 Tutorial: CRUD
|
||||
<div class="table-links">
|
||||
<a href="#">View</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Edit</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#" class="text-danger">Trash</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Web Developer</a>,
|
||||
<a href="#">Tutorial</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="title" title=""> <div class="d-inline-block ml-1">Rizal Fakhri</div>
|
||||
</a>
|
||||
</td>
|
||||
<td>2018-01-20</td>
|
||||
<td><div class="badge badge-danger">Draft</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-1">
|
||||
<label for="checkbox-1" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Laravel 5 Tutorial: Deployment
|
||||
<div class="table-links">
|
||||
<a href="#">View</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">Edit</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#" class="text-danger">Trash</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">Web Developer</a>,
|
||||
<a href="#">Tutorial</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="title" title=""> <div class="d-inline-block ml-1">Rizal Fakhri</div>
|
||||
</a>
|
||||
</td>
|
||||
<td>2018-01-20</td>
|
||||
<td><div class="badge badge-warning">Pending</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="#">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="#" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/selectric/public/jquery.selectric.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/features-posts.js"></script>
|
||||
{% endblock %}
|
||||
133
pages/features-profile.html
Normal file
133
pages/features-profile.html
Normal file
@@ -0,0 +1,133 @@
|
||||
{% set title = 'Profile' %}
|
||||
{% set page = 'features-profile.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
|
||||
<link rel="stylesheet" href="node_modules/summernote/dist/summernote-bs4.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Profile</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item">Profile</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Hi, Ujang!</h2>
|
||||
<p class="section-lead">
|
||||
Change information about yourself on this page.
|
||||
</p>
|
||||
|
||||
<div class="row mt-sm-4">
|
||||
<div class="col-12 col-md-12 col-lg-5">
|
||||
<div class="card profile-widget">
|
||||
<div class="profile-widget-header">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle profile-widget-picture">
|
||||
<div class="profile-widget-items">
|
||||
<div class="profile-widget-item">
|
||||
<div class="profile-widget-item-label">Posts</div>
|
||||
<div class="profile-widget-item-value">187</div>
|
||||
</div>
|
||||
<div class="profile-widget-item">
|
||||
<div class="profile-widget-item-label">Followers</div>
|
||||
<div class="profile-widget-item-value">6,8K</div>
|
||||
</div>
|
||||
<div class="profile-widget-item">
|
||||
<div class="profile-widget-item-label">Following</div>
|
||||
<div class="profile-widget-item-value">2,1K</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-widget-description">
|
||||
<div class="profile-widget-name">Ujang Maman <div class="text-muted d-inline font-weight-normal"><div class="slash"></div> Web Developer</div></div>
|
||||
Ujang maman is a superhero name in <b>Indonesia</b>, especially in my family. He is not a fictional character but an original hero in my family, a hero for his children and for his wife. So, I use the name as a user in this template. Not a tribute, I'm just bored with <b>'John Doe'</b>.
|
||||
</div>
|
||||
<div class="card-footer text-center">
|
||||
<div class="font-weight-bold mb-2">Follow Ujang On</div>
|
||||
<a href="#" class="btn btn-social-icon btn-facebook mr-1">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-social-icon btn-twitter mr-1">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-social-icon btn-github mr-1">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="#" class="btn btn-social-icon btn-instagram">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-12 col-lg-7">
|
||||
<div class="card">
|
||||
<form method="post" class="needs-validation" novalidate="">
|
||||
<div class="card-header">
|
||||
<h4>Edit Profile</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6 col-12">
|
||||
<label>First Name</label>
|
||||
<input type="text" class="form-control" value="Ujang" required="">
|
||||
<div class="invalid-feedback">
|
||||
Please fill in the first name
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-6 col-12">
|
||||
<label>Last Name</label>
|
||||
<input type="text" class="form-control" value="Maman" required="">
|
||||
<div class="invalid-feedback">
|
||||
Please fill in the last name
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-7 col-12">
|
||||
<label>Email</label>
|
||||
<input type="email" class="form-control" value="ujang@maman.com" required="">
|
||||
<div class="invalid-feedback">
|
||||
Please fill in the email
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-5 col-12">
|
||||
<label>Phone</label>
|
||||
<input type="tel" class="form-control" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-12">
|
||||
<label>Bio</label>
|
||||
<textarea class="form-control summernote-simple">Ujang maman is a superhero name in <b>Indonesia</b>, especially in my family. He is not a fictional character but an original hero in my family, a hero for his children and for his wife. So, I use the name as a user in this template. Not a tribute, I'm just bored with <b>'John Doe'</b>.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group mb-0 col-12">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" name="remember" class="custom-control-input" id="newsletter">
|
||||
<label class="custom-control-label" for="newsletter">Subscribe to newsletter</label>
|
||||
<div class="text-muted form-text">
|
||||
You will get new information about products, offers and promotions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<button class="btn btn-primary">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/summernote/dist/summernote-bs4.js"></script>
|
||||
{% endblock %}
|
||||
115
pages/features-setting-detail.html
Normal file
115
pages/features-setting-detail.html
Normal file
@@ -0,0 +1,115 @@
|
||||
{% set title = 'General Settings' %}
|
||||
{% set page = 'features-setting-detail.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
|
||||
<link rel="stylesheet" href="node_modules/codemirror/theme/duotone-dark.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-header-back">
|
||||
<a href="features-settings.html" class="btn btn-icon"><i class="fas fa-arrow-left"></i></a>
|
||||
</div>
|
||||
<h1>General Settings</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item active"><a href="#">Settings</a></div>
|
||||
<div class="breadcrumb-item">General Settings</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">All About General Settings</h2>
|
||||
<p class="section-lead">
|
||||
You can adjust all general settings here
|
||||
</p>
|
||||
|
||||
<div id="output-status"></div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Jump To</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item"><a href="#" class="nav-link active">General</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">SEO</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Email</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">System</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Security</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Automation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<form id="setting-form">
|
||||
<div class="card" id="settings-card">
|
||||
<div class="card-header">
|
||||
<h4>General Settings</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted">General settings such as, site title, site description, address and so on.</p>
|
||||
<div class="form-group row align-items-center">
|
||||
<label for="site-title" class="form-control-label col-sm-3 text-md-right">Site Title</label>
|
||||
<div class="col-sm-6 col-md-9">
|
||||
<input type="text" name="site_title" class="form-control" id="site-title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row align-items-center">
|
||||
<label for="site-description" class="form-control-label col-sm-3 text-md-right">Site Description</label>
|
||||
<div class="col-sm-6 col-md-9">
|
||||
<textarea class="form-control" name="site_description" id="site-description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row align-items-center">
|
||||
<label class="form-control-label col-sm-3 text-md-right">Site Logo</label>
|
||||
<div class="col-sm-6 col-md-9">
|
||||
<div class="custom-file">
|
||||
<input type="file" name="site_logo" class="custom-file-input" id="site-logo">
|
||||
<label class="custom-file-label">Choose File</label>
|
||||
</div>
|
||||
<div class="form-text text-muted">The image must have a maximum size of 1MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row align-items-center">
|
||||
<label class="form-control-label col-sm-3 text-md-right">Favicon</label>
|
||||
<div class="col-sm-6 col-md-9">
|
||||
<div class="custom-file">
|
||||
<input type="file" name="site_favicon" class="custom-file-input" id="site-favicon">
|
||||
<label class="custom-file-label">Choose File</label>
|
||||
</div>
|
||||
<div class="form-text text-muted">The image must have a maximum size of 1MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="form-control-label col-sm-3 mt-3 text-md-right">Google Analytics Code</label>
|
||||
<div class="col-sm-6 col-md-9">
|
||||
<textarea class="form-control codeeditor" name="google_analytics_code"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-whitesmoke text-md-right">
|
||||
<button class="btn btn-primary" id="save-btn">Save Changes</button>
|
||||
<button class="btn btn-secondary" type="button">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/codemirror/lib/codemirror.js"></script>
|
||||
<script src="node_modules/codemirror/mode/javascript/javascript.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/features-setting-detail.js"></script>
|
||||
{% endblock %}
|
||||
97
pages/features-settings.html
Normal file
97
pages/features-settings.html
Normal file
@@ -0,0 +1,97 @@
|
||||
{% set title = 'Settings' %}
|
||||
{% set page = 'features-settings.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Settings</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item">Settings</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Overview</h2>
|
||||
<p class="section-lead">
|
||||
Organize and adjust all settings about this site.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-large-icons">
|
||||
<div class="card-icon bg-primary text-white">
|
||||
<i class="fas fa-cog"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>General</h4>
|
||||
<p>General settings such as, site title, site description, address and so on.</p>
|
||||
<a href="features-setting-detail.html" class="card-cta">Change Setting <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-large-icons">
|
||||
<div class="card-icon bg-primary text-white">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>SEO</h4>
|
||||
<p>Search engine optimization settings, such as meta tags and social media.</p>
|
||||
<a href="features-setting-detail.html" class="card-cta">Change Setting <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-large-icons">
|
||||
<div class="card-icon bg-primary text-white">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Email</h4>
|
||||
<p>Email SMTP settings, notifications and others related to email.</p>
|
||||
<a href="features-setting-detail.html" class="card-cta">Change Setting <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-large-icons">
|
||||
<div class="card-icon bg-primary text-white">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>System</h4>
|
||||
<p>PHP version settings, time zones and other environments.</p>
|
||||
<a href="features-setting-detail.html" class="card-cta">Change Setting <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-large-icons">
|
||||
<div class="card-icon bg-primary text-white">
|
||||
<i class="fas fa-lock"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Security</h4>
|
||||
<p>Security settings such as firewalls, server accounts and others.</p>
|
||||
<a href="features-setting-detail.html" class="card-cta">Change Setting <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-large-icons">
|
||||
<div class="card-icon bg-primary text-white">
|
||||
<i class="fas fa-stopwatch"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Automation</h4>
|
||||
<p>Settings about automation such as cron job, backup automation and so on.</p>
|
||||
<a href="features-setting-detail.html" class="card-cta text-primary">Change Setting <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
136
pages/features-tickets.html
Normal file
136
pages/features-tickets.html
Normal file
@@ -0,0 +1,136 @@
|
||||
{% set title = 'Tickets' %}
|
||||
{% set page = 'features-tickets.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/summernote/dist/summernote-bs4.css">
|
||||
<link rel="stylesheet" href="node_modules/chocolat/dist/css/chocolat.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Tickets</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item">Tickets</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Help Your Customer</h2>
|
||||
<p class="section-lead">
|
||||
Some customers need your help.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Tickets</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<a href="#" class="btn btn-primary btn-icon icon-left btn-lg btn-block mb-4 d-md-none" data-toggle-slide="#ticket-items">
|
||||
<i class="fas fa-list"></i> All Tickets
|
||||
</a>
|
||||
<div class="tickets">
|
||||
<div class="ticket-items" id="ticket-items">
|
||||
<div class="ticket-item active">
|
||||
<div class="ticket-title">
|
||||
<h4>Technical problem</h4>
|
||||
</div>
|
||||
<div class="ticket-desc">
|
||||
<div>Farhan A. Mujib</div>
|
||||
<div class="bullet"></div>
|
||||
<div>2 min ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ticket-item">
|
||||
<div class="ticket-title">
|
||||
<h4>Cancel my order please!</h4>
|
||||
</div>
|
||||
<div class="ticket-desc">
|
||||
<div>Amanda Aprilia Azmi</div>
|
||||
<div class="bullet"></div>
|
||||
<div>Yesterday</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ticket-item">
|
||||
<div class="ticket-title">
|
||||
<h4>Where is my mother?</h4>
|
||||
</div>
|
||||
<div class="ticket-desc">
|
||||
<div>Irwansyah Saputra</div>
|
||||
<div class="bullet"></div>
|
||||
<div>July 18, 2018</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ticket-content">
|
||||
<div class="ticket-header">
|
||||
<div class="ticket-sender-picture img-shadow">
|
||||
<img src="assets/img/avatar/avatar-5.png" alt="image">
|
||||
</div>
|
||||
<div class="ticket-detail">
|
||||
<div class="ticket-title">
|
||||
<h4>Technical Problem</h4>
|
||||
</div>
|
||||
<div class="ticket-info">
|
||||
<div class="font-weight-600">Farhan A. Mujib</div>
|
||||
<div class="bullet"></div>
|
||||
<div class="text-primary font-weight-600">2 min ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ticket-description">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<div class="gallery">
|
||||
<div class="gallery-item" data-image="assets/img/news/img01.jpg" data-title="Image 1"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img02.jpg" data-title="Image 2"></div>
|
||||
<div class="gallery-item" data-image="assets/img/news/img03.jpg" data-title="Image 3"></div>
|
||||
<div class="gallery-item gallery-more" data-image="assets/img/news/img04.jpg" data-title="Image 4">
|
||||
<div>+2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ticket-divider"></div>
|
||||
|
||||
<div class="ticket-form">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<textarea class="summernote form-control" placeholder="Type a reply ..."></textarea>
|
||||
</div>
|
||||
<div class="form-group text-right">
|
||||
<button class="btn btn-primary btn-lg">
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/summernote/dist/summernote-bs4.js"></script>
|
||||
<script src="node_modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
|
||||
{% endblock %}
|
||||
512
pages/forms-advanced-form.html
Normal file
512
pages/forms-advanced-form.html
Normal file
@@ -0,0 +1,512 @@
|
||||
{% set title = 'Forms › Advanced Forms' %}
|
||||
{% set page = 'forms-advanced-form.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/bootstrap-daterangepicker/daterangepicker.css">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
|
||||
<link rel="stylesheet" href="node_modules/select2/dist/css/select2.min.css">
|
||||
<link rel="stylesheet" href="node_modules/selectric/public/selectric.css">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Advanced Forms</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Forms</a></div>
|
||||
<div class="breadcrumb-item">Advanced Forms</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Advanced Forms</h2>
|
||||
<p class="section-lead">We provide advanced input fields, such as date picker, color picker, and so on.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Input Text</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label>Default Input Text</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Phone Number (US Format)</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-phone"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control phone-number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password Strength</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-lock"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="password" class="form-control pwstrength" data-indicator="pwindicator">
|
||||
</div>
|
||||
<div id="pwindicator" class="pwindicator">
|
||||
<div class="bar"></div>
|
||||
<div class="label"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Currency</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
$
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control currency">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Purchase Code</label>
|
||||
<input type="text" class="form-control purchase-code" placeholder="ASDF-GHIJ-KLMN-OPQR">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Invoice</label>
|
||||
<input type="text" class="form-control invoice-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Date</label>
|
||||
<input type="text" class="form-control datemask" placeholder="YYYY/MM/DD">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Credit Card</label>
|
||||
<input type="text" class="form-control creditcard">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Tags</label>
|
||||
<input type="text" class="form-control inputtags">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Toggle Switches</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<div class="control-label">Toggle switches</div>
|
||||
<div class="custom-switches-stacked mt-2">
|
||||
<label class="custom-switch">
|
||||
<input type="radio" name="option" value="1" class="custom-switch-input" checked>
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description">Option 1</span>
|
||||
</label>
|
||||
<label class="custom-switch">
|
||||
<input type="radio" name="option" value="2" class="custom-switch-input">
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description">Option 2</span>
|
||||
</label>
|
||||
<label class="custom-switch">
|
||||
<input type="radio" name="option" value="3" class="custom-switch-input">
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="control-label">Toggle switch single</div>
|
||||
<label class="custom-switch mt-2">
|
||||
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description">I agree with terms and conditions</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Image Check</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Image Check</label>
|
||||
<div class="row gutters-sm">
|
||||
<div class="col-6 col-sm-4">
|
||||
<label class="imagecheck mb-4">
|
||||
<input name="imagecheck" type="checkbox" value="1" class="imagecheck-input" />
|
||||
<figure class="imagecheck-figure">
|
||||
<img src="assets/img/news/img01.jpg" alt="}" class="imagecheck-image">
|
||||
</figure>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<label class="imagecheck mb-4">
|
||||
<input name="imagecheck" type="checkbox" value="2" class="imagecheck-input" checked />
|
||||
<figure class="imagecheck-figure">
|
||||
<img src="assets/img/news/img02.jpg" alt="}" class="imagecheck-image">
|
||||
</figure>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<label class="imagecheck mb-4">
|
||||
<input name="imagecheck" type="checkbox" value="3" class="imagecheck-input" />
|
||||
<figure class="imagecheck-figure">
|
||||
<img src="assets/img/news/img03.jpg" alt="}" class="imagecheck-image">
|
||||
</figure>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<label class="imagecheck mb-4">
|
||||
<input name="imagecheck" type="checkbox" value="4" class="imagecheck-input" checked />
|
||||
<figure class="imagecheck-figure">
|
||||
<img src="assets/img/news/img04.jpg" alt="}" class="imagecheck-image">
|
||||
</figure>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<label class="imagecheck mb-4">
|
||||
<input name="imagecheck" type="checkbox" value="5" class="imagecheck-input" />
|
||||
<figure class="imagecheck-figure">
|
||||
<img src="assets/img/news/img05.jpg" alt="}" class="imagecheck-image">
|
||||
</figure>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
<label class="imagecheck mb-4">
|
||||
<input name="imagecheck" type="checkbox" value="6" class="imagecheck-input" />
|
||||
<figure class="imagecheck-figure">
|
||||
<img src="assets/img/news/img06.jpg" alt="}" class="imagecheck-image">
|
||||
</figure>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Color</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label>Simple</label>
|
||||
<input type="text" class="form-control colorpickerinput">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Pick Your Color</label>
|
||||
<div class="input-group colorpickerinput">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-fill-drip"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Color Input</label>
|
||||
<div class="row gutters-xs">
|
||||
<div class="col-auto">
|
||||
<label class="colorinput">
|
||||
<input name="color" type="checkbox" value="primary" class="colorinput-input" />
|
||||
<span class="colorinput-color bg-primary"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="colorinput">
|
||||
<input name="color" type="checkbox" value="secondary" class="colorinput-input" />
|
||||
<span class="colorinput-color bg-secondary"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="colorinput">
|
||||
<input name="color" type="checkbox" value="danger" class="colorinput-input" />
|
||||
<span class="colorinput-color bg-danger"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="colorinput">
|
||||
<input name="color" type="checkbox" value="warning" class="colorinput-input" />
|
||||
<span class="colorinput-color bg-warning"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="colorinput">
|
||||
<input name="color" type="checkbox" value="info" class="colorinput-input" />
|
||||
<span class="colorinput-color bg-info"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="colorinput">
|
||||
<input name="color" type="checkbox" value="success" class="colorinput-input" />
|
||||
<span class="colorinput-color bg-success"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Select</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="section-title mt-0">Default</div>
|
||||
<div class="form-group">
|
||||
<label>Default Select</label>
|
||||
<select class="form-control">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="section-title">Select 2</div>
|
||||
<div class="form-group">
|
||||
<label>Select2</label>
|
||||
<select class="form-control select2">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select2 Multiple</label>
|
||||
<select class="form-control select2" multiple="">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
<option>Option 4</option>
|
||||
<option>Option 5</option>
|
||||
<option>Option 6</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="section-title">jQuery Selectric</div>
|
||||
<div class="form-group">
|
||||
<label>jQuery Selectric</label>
|
||||
<select class="form-control selectric">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
<option>Option 4</option>
|
||||
<option>Option 5</option>
|
||||
<option>Option 6</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>jQuery Selectric Multiple</label>
|
||||
<select class="form-control selectric" multiple="">
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
<option>Option 4</option>
|
||||
<option>Option 5</option>
|
||||
<option>Option 6</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="section-title">Select Group Button</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Size</label>
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="50" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button">S</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="100" class="selectgroup-input">
|
||||
<span class="selectgroup-button">M</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="150" class="selectgroup-input">
|
||||
<span class="selectgroup-button">L</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="value" value="200" class="selectgroup-input">
|
||||
<span class="selectgroup-button">XL</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Icons input</label>
|
||||
<div class="selectgroup w-100">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="2" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-mobile"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-tablet"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="6" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-laptop"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="transportation" value="6" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-times"></i></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Icon input</label>
|
||||
<div class="selectgroup selectgroup-pills">
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-sun"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="2" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-moon"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="3" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-cloud-rain"></i></span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="radio" name="icon-input" value="4" class="selectgroup-input">
|
||||
<span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-cloud"></i></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Your skills</label>
|
||||
<div class="selectgroup selectgroup-pills">
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="HTML" class="selectgroup-input" checked="">
|
||||
<span class="selectgroup-button">HTML</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="CSS" class="selectgroup-input">
|
||||
<span class="selectgroup-button">CSS</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="PHP" class="selectgroup-input">
|
||||
<span class="selectgroup-button">PHP</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="JavaScript" class="selectgroup-input">
|
||||
<span class="selectgroup-button">JavaScript</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Ruby</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
|
||||
<span class="selectgroup-button">Ruby</span>
|
||||
</label>
|
||||
<label class="selectgroup-item">
|
||||
<input type="checkbox" name="value" value="C++" class="selectgroup-input">
|
||||
<span class="selectgroup-button">C++</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Toggle Switches</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<div class="control-label">Toggle switches</div>
|
||||
<div class="custom-switches-stacked mt-2">
|
||||
<label class="custom-switch">
|
||||
<input type="radio" name="option" value="1" class="custom-switch-input" checked>
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description">Option 1</span>
|
||||
</label>
|
||||
<label class="custom-switch">
|
||||
<input type="radio" name="option" value="2" class="custom-switch-input">
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description">Option 2</span>
|
||||
</label>
|
||||
<label class="custom-switch">
|
||||
<input type="radio" name="option" value="3" class="custom-switch-input">
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description">Option 3</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="control-label">Toggle switch single</div>
|
||||
<label class="custom-switch mt-2">
|
||||
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
|
||||
<span class="custom-switch-indicator"></span>
|
||||
<span class="custom-switch-description">I agree with terms and conditions</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Date & Time Picker</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label class="d-block">Date Range Picker With Button</label>
|
||||
<a href="javascript:;" class="btn btn-primary daterange-btn icon-left btn-icon"><i class="fas fa-calendar"></i> Choose Date
|
||||
</a>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Date Picker</label>
|
||||
<input type="text" class="form-control datepicker">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Date Time Picker</label>
|
||||
<input type="text" class="form-control datetimepicker">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Date Range Picker</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-calendar"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control daterange-cus">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Time Picker</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control timepicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/cleave.js/dist/cleave.min.js"></script>
|
||||
<script src="node_modules/cleave.js/dist/addons/cleave-phone.us.js"></script>
|
||||
<script src="node_modules/jquery-pwstrength/jquery.pwstrength.min.js"></script>
|
||||
<script src="node_modules/bootstrap-daterangepicker/daterangepicker.js"></script>
|
||||
<script src="node_modules/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
|
||||
<script src="node_modules/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
|
||||
<script src="node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
|
||||
<script src="node_modules/select2/dist/js/select2.full.min.js"></script>
|
||||
<script src="node_modules/selectric/public/jquery.selectric.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/forms-advanced-forms.js"></script>
|
||||
{% endblock %}
|
||||
152
pages/forms-editor.html
Normal file
152
pages/forms-editor.html
Normal file
@@ -0,0 +1,152 @@
|
||||
{% set title = 'Forms › Editor' %}
|
||||
{% set page = 'forms-editor.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/summernote/dist/summernote-bs4.css">
|
||||
<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
|
||||
<link rel="stylesheet" href="node_modules/codemirror/theme/duotone-dark.css">
|
||||
<link rel="stylesheet" href="node_modules/selectric/public/selectric.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Editor</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Forms</a></div>
|
||||
<div class="breadcrumb-item">Editor</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Editor</h2>
|
||||
<p class="section-lead">WYSIWYG editor and code editor.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Simple Summernote</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Title</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Category</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<select class="form-control selectric">
|
||||
<option>Tech</option>
|
||||
<option>News</option>
|
||||
<option>Political</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Content</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<textarea class="summernote-simple"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3"></label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<button class="btn btn-primary">Publish</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Full Summernote</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Title</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Category</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<select class="form-control selectric">
|
||||
<option>Tech</option>
|
||||
<option>News</option>
|
||||
<option>Political</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Content</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<textarea class="summernote"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3"></label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<button class="btn btn-primary">Publish</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Code Editor</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Files</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<select class="form-control selectric">
|
||||
<option>life.js</option>
|
||||
<option>afterlife.js</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Code</label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<textarea class="codeeditor">var yourTimeout = undefined;
|
||||
|
||||
setTimeout(function() {
|
||||
Person.die(you);
|
||||
}, yourTimeout);</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-4">
|
||||
<label class="col-form-label text-md-right col-12 col-md-3 col-lg-3"></label>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<button class="btn btn-primary">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/summernote/dist/summernote-bs4.js"></script>
|
||||
<script src="node_modules/codemirror/lib/codemirror.js"></script>
|
||||
<script src="node_modules/codemirror/mode/javascript/javascript.js"></script>
|
||||
<script src="node_modules/selectric/public/jquery.selectric.min.js"></script>
|
||||
{% endblock %}
|
||||
183
pages/forms-validation.html
Normal file
183
pages/forms-validation.html
Normal file
@@ -0,0 +1,183 @@
|
||||
{% set title = 'Forms › Form Validation' %}
|
||||
{% set page = 'forms-validation.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Form Validation</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Forms</a></div>
|
||||
<div class="breadcrumb-item">Form Validation</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Form Validation</h2>
|
||||
<p class="section-lead">
|
||||
Form validation using default from Bootstrap 4
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<form>
|
||||
<div class="card-header">
|
||||
<h4>Default Validation</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label>Your Name</label>
|
||||
<input type="text" class="form-control" required="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" class="form-control" required="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Subject</label>
|
||||
<input type="email" class="form-control">
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<label>Message</label>
|
||||
<textarea class="form-control" required=""></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<button class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card">
|
||||
<form class="needs-validation" novalidate="">
|
||||
<div class="card-header">
|
||||
<h4>JavaScript Validation</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label>Your Name</label>
|
||||
<input type="text" class="form-control" required="">
|
||||
<div class="invalid-feedback">
|
||||
What's your name?
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" class="form-control" required="">
|
||||
<div class="invalid-feedback">
|
||||
Oh no! Email is invalid.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Subject</label>
|
||||
<input type="email" class="form-control">
|
||||
<div class="valid-feedback">
|
||||
Good job!
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<label>Message</label>
|
||||
<textarea class="form-control" required=""></textarea>
|
||||
<div class="invalid-feedback">
|
||||
What do you wanna say?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<button class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<form>
|
||||
<div class="card-header">
|
||||
<h4>Server-side Validation</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label>Your Name</label>
|
||||
<input type="text" class="form-control is-valid" value="Rizal Fakhri" required="">
|
||||
<div class="valid-feedback">
|
||||
Good job!
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" class="form-control is-invalid" required="" value="rizal@fakhri">
|
||||
<div class="invalid-feedback">
|
||||
Oh no! Email is invalid.
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Subject</label>
|
||||
<input type="email" class="form-control">
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<label>Message</label>
|
||||
<textarea class="form-control is-invalid" required="">Hello, i'm handsome!</textarea>
|
||||
<div class="invalid-feedback">
|
||||
Oh no! You entered an inappropriate word.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<button class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card">
|
||||
<form class="needs-validation" novalidate="">
|
||||
<div class="card-header">
|
||||
<h4>JavaScript Validation (Horizontal Form)</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3 col-form-label">Your Name</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" required="">
|
||||
<div class="invalid-feedback">
|
||||
What's your name?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3 col-form-label">Email</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="email" class="form-control" required="">
|
||||
<div class="invalid-feedback">
|
||||
Oh no! Email is invalid.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3 col-form-label">Subject</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="email" class="form-control">
|
||||
<div class="valid-feedback">
|
||||
Good job!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-0 row">
|
||||
<label class="col-sm-3 col-form-label">Message</label>
|
||||
<div class="col-sm-9">
|
||||
<textarea class="form-control" required=""></textarea>
|
||||
<div class="invalid-feedback">
|
||||
What do you wanna say?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-right">
|
||||
<button class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
53
pages/gmaps-advanced-route.html
Normal file
53
pages/gmaps-advanced-route.html
Normal file
@@ -0,0 +1,53 @@
|
||||
{% set title = 'Google Maps › Advanced Route' %}
|
||||
{% set page = 'gmaps-advanced-route.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Advanced Route</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Google Maps</a></div>
|
||||
<div class="breadcrumb-item">Advanced Route</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Advanced Route</h2>
|
||||
<p class="section-lead">
|
||||
The same as the 'route' example, but in this example it will be a bit cooler. Click the 'Start Travel' button to start seeing magic.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Advanced Routes</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="map" data-height="300"></div>
|
||||
<div class="text-center mt-4">
|
||||
<a href="javascript:;" class="btn btn-primary btn-icon icon-left" id="start-travel">
|
||||
<i class="fas fa-play"></i> Start Travel
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<ul id="instructions" class="list-unstyled list-unstyled-border"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB55Np3_WsZwUQ9NS7DP-HnneleZLYZDNw&sensor=true"></script>
|
||||
<script src="node_modules/gmaps/gmaps.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/gmaps-advanced-route.js"></script>
|
||||
{% endblock %}
|
||||
56
pages/gmaps-draggable-marker.html
Normal file
56
pages/gmaps-draggable-marker.html
Normal file
@@ -0,0 +1,56 @@
|
||||
{% set title = 'Google Maps › Draggable Marker' %}
|
||||
{% set page = 'gmaps-draggable-marker.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Draggable Marker</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Google Maps</a></div>
|
||||
<div class="breadcrumb-item">Draggable Marker</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Draggable Marker</h2>
|
||||
<p class="section-lead">
|
||||
Here is a simple example using the map, we use the plugin <code>gmaps.js</code> made by <a href="https://github.com/hpneo" target="_blank">@hpneo</a>. You can learn more about this plugin <a href="https://github.com/hpneo/gmaps" target="_blank">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Draggable Marker</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="input-lat" placeholder="Latitude">
|
||||
<input type="text" class="form-control" id="input-lng" placeholder="Longitude">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
You can drag the marker, change the value of longitude and latitude at the above input and click on the desired position on the map to change the position of the marker.
|
||||
</div>
|
||||
<div id="map" data-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB55Np3_WsZwUQ9NS7DP-HnneleZLYZDNw&sensor=true"></script>
|
||||
<script src="node_modules/gmaps/gmaps.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/gmaps-draggable-marker.js"></script>
|
||||
{% endblock %}
|
||||
60
pages/gmaps-geocoding.html
Normal file
60
pages/gmaps-geocoding.html
Normal file
@@ -0,0 +1,60 @@
|
||||
{% set title = 'Google Maps › Geocoding' %}
|
||||
{% set page = 'gmaps-geocoding.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Geocoding</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Google Maps</a></div>
|
||||
<div class="breadcrumb-item">Geocoding</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Geocoding</h2>
|
||||
<p class="section-lead">
|
||||
Here is a simple example using the map, we use the plugin <code>gmaps.js</code> made by <a href="https://github.com/hpneo" target="_blank">@hpneo</a>. You can learn more about this plugin <a href="https://github.com/hpneo/gmaps" target="_blank">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Geocoding</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-4">
|
||||
<div class="col-4 col-12 col-md-6 col-lg-4">
|
||||
<form id="search-form">
|
||||
<div class="input-group">
|
||||
<input type="text" id="address" class="form-control" placeholder="Enter your address">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
You can type the destination address in the form above then the marker will appear on the map according to your address.
|
||||
</div>
|
||||
<div id="map" data-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB55Np3_WsZwUQ9NS7DP-HnneleZLYZDNw&sensor=true"></script>
|
||||
<script src="node_modules/gmaps/gmaps.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/gmaps-geocoding.js"></script>
|
||||
{% endblock %}
|
||||
48
pages/gmaps-geolocation.html
Normal file
48
pages/gmaps-geolocation.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{% set title = 'Google Maps › Geolocation' %}
|
||||
{% set page = 'gmaps-geolocation.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Geolocation</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Google Maps</a></div>
|
||||
<div class="breadcrumb-item">Geolocation</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Geolocation</h2>
|
||||
<p class="section-lead">
|
||||
Here is a simple example using the map, we use the plugin <code>gmaps.js</code> made by <a href="https://github.com/hpneo" target="_blank">@hpneo</a>. You can learn more about this plugin <a href="https://github.com/hpneo/gmaps" target="_blank">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Geolocation</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info">
|
||||
In this example there will be a marker on the map located in accordance with your position. Click 'allow' in the popup that appears in your browser.
|
||||
</div>
|
||||
<div id="map" data-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB55Np3_WsZwUQ9NS7DP-HnneleZLYZDNw&sensor=true"></script>
|
||||
<script src="node_modules/gmaps/gmaps.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/gmaps-geolocation.js"></script>
|
||||
{% endblock %}
|
||||
45
pages/gmaps-marker.html
Normal file
45
pages/gmaps-marker.html
Normal file
@@ -0,0 +1,45 @@
|
||||
{% set title = 'Google Maps › Marker' %}
|
||||
{% set page = 'gmaps-marker.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Marker</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Google Maps</a></div>
|
||||
<div class="breadcrumb-item">Marker</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Marker</h2>
|
||||
<p class="section-lead">
|
||||
Here is a simple example using the map, we use the plugin <code>gmaps.js</code> made by <a href="https://github.com/hpneo" target="_blank">@hpneo</a>. You can learn more about this plugin <a href="https://github.com/hpneo/gmaps" target="_blank">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Marker</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="map" data-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB55Np3_WsZwUQ9NS7DP-HnneleZLYZDNw&sensor=true"></script>
|
||||
<script src="node_modules/gmaps/gmaps.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/gmaps-marker.js"></script>
|
||||
{% endblock %}
|
||||
45
pages/gmaps-multiple-marker.html
Normal file
45
pages/gmaps-multiple-marker.html
Normal file
@@ -0,0 +1,45 @@
|
||||
{% set title = 'Google Maps › Multiple Marker' %}
|
||||
{% set page = 'gmaps-multiple-marker.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Multiple Marker</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Google Maps</a></div>
|
||||
<div class="breadcrumb-item">Multiple Marker</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Multiple Marker</h2>
|
||||
<p class="section-lead">
|
||||
Here is a simple example using the map, we use the plugin <code>gmaps.js</code> made by <a href="https://github.com/hpneo" target="_blank">@hpneo</a>. You can learn more about this plugin <a href="https://github.com/hpneo/gmaps" target="_blank">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Multiple Marker</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="map" data-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB55Np3_WsZwUQ9NS7DP-HnneleZLYZDNw&sensor=true"></script>
|
||||
<script src="node_modules/gmaps/gmaps.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/gmaps-multiple-marker.js"></script>
|
||||
{% endblock %}
|
||||
48
pages/gmaps-route.html
Normal file
48
pages/gmaps-route.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{% set title = 'Google Maps › Route' %}
|
||||
{% set page = 'gmaps-route.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Route</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Google Maps</a></div>
|
||||
<div class="breadcrumb-item">Route</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Route</h2>
|
||||
<p class="section-lead">
|
||||
Here is a simple example using the map, we use the plugin <code>gmaps.js</code> made by <a href="https://github.com/hpneo" target="_blank">@hpneo</a>. You can learn more about this plugin <a href="https://github.com/hpneo/gmaps" target="_blank">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Map</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info">
|
||||
In this example you will see the route from point 1 with point 2.
|
||||
</div>
|
||||
<div id="map" data-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB55Np3_WsZwUQ9NS7DP-HnneleZLYZDNw&sensor=true"></script>
|
||||
<script src="node_modules/gmaps/gmaps.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/gmaps-route.js"></script>
|
||||
{% endblock %}
|
||||
45
pages/gmaps-simple.html
Normal file
45
pages/gmaps-simple.html
Normal file
@@ -0,0 +1,45 @@
|
||||
{% set title = 'Google Maps › Simple Map' %}
|
||||
{% set page = 'gmaps-simple.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Simple Map</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Google Maps</a></div>
|
||||
<div class="breadcrumb-item">Simple Map</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Simple Map</h2>
|
||||
<p class="section-lead">
|
||||
Here is a simple example using the map, we use the plugin <code>gmaps.js</code> made by <a href="https://github.com/hpneo" target="_blank">@hpneo</a>. You can learn more about this plugin <a href="https://github.com/hpneo/gmaps" target="_blank">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Map</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="simple-map" data-height="400"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB55Np3_WsZwUQ9NS7DP-HnneleZLYZDNw&sensor=true"></script>
|
||||
<script src="node_modules/gmaps/gmaps.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/gmaps-simple.js"></script>
|
||||
{% endblock %}
|
||||
606
pages/index-0.html
Normal file
606
pages/index-0.html
Normal file
@@ -0,0 +1,606 @@
|
||||
{% set title = 'General Dashboard' %}
|
||||
{% set page = 'index-0.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/jqvmap/dist/jqvmap.min.css">
|
||||
<link rel="stylesheet" href="node_modules/weathericons/css/weather-icons.min.css">
|
||||
<link rel="stylesheet" href="node_modules/weathericons/css/weather-icons-wind.min.css">
|
||||
<link rel="stylesheet" href="node_modules/summernote/dist/summernote-bs4.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Dashboard</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
|
||||
<div class="card card-statistic-1">
|
||||
<div class="card-icon bg-primary">
|
||||
<i class="far fa-user"></i>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<div class="card-header">
|
||||
<h4>Total Admin</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
10
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
|
||||
<div class="card card-statistic-1">
|
||||
<div class="card-icon bg-danger">
|
||||
<i class="far fa-newspaper"></i>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<div class="card-header">
|
||||
<h4>News</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
42
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
|
||||
<div class="card card-statistic-1">
|
||||
<div class="card-icon bg-warning">
|
||||
<i class="far fa-file"></i>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<div class="card-header">
|
||||
<h4>Reports</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
1,201
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
|
||||
<div class="card card-statistic-1">
|
||||
<div class="card-icon bg-success">
|
||||
<i class="fas fa-circle"></i>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<div class="card-header">
|
||||
<h4>Online Users</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
47
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-12 col-12 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Statistics</h4>
|
||||
<div class="card-header-action">
|
||||
<div class="btn-group">
|
||||
<a href="#" class="btn btn-primary">Week</a>
|
||||
<a href="#" class="btn">Month</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myChart" height="182"></canvas>
|
||||
<div class="statistic-details mt-sm-4">
|
||||
<div class="statistic-details-item">
|
||||
<span class="text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 7%</span>
|
||||
<div class="detail-value">$243</div>
|
||||
<div class="detail-name">Today's Sales</div>
|
||||
</div>
|
||||
<div class="statistic-details-item">
|
||||
<span class="text-muted"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 23%</span>
|
||||
<div class="detail-value">$2,902</div>
|
||||
<div class="detail-name">This Week's Sales</div>
|
||||
</div>
|
||||
<div class="statistic-details-item">
|
||||
<span class="text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span>9%</span>
|
||||
<div class="detail-value">$12,821</div>
|
||||
<div class="detail-name">This Month's Sales</div>
|
||||
</div>
|
||||
<div class="statistic-details-item">
|
||||
<span class="text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 19%</span>
|
||||
<div class="detail-value">$92,142</div>
|
||||
<div class="detail-name">This Year's Sales</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-12 col-12 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Recent Activities</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled list-unstyled-border">
|
||||
<li class="media">
|
||||
<img class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-1.png" alt="avatar">
|
||||
<div class="media-body">
|
||||
<div class="float-right text-primary">Now</div>
|
||||
<div class="media-title">Farhan A Mujib</div>
|
||||
<span class="text-small text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-2.png" alt="avatar">
|
||||
<div class="media-body">
|
||||
<div class="float-right">12m</div>
|
||||
<div class="media-title">Ujang Maman</div>
|
||||
<span class="text-small text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-3.png" alt="avatar">
|
||||
<div class="media-body">
|
||||
<div class="float-right">17m</div>
|
||||
<div class="media-title">Rizal Fakhri</div>
|
||||
<span class="text-small text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-4.png" alt="avatar">
|
||||
<div class="media-body">
|
||||
<div class="float-right">21m</div>
|
||||
<div class="media-title">Alfa Zulkarnain</div>
|
||||
<span class="text-small text-muted">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="text-center pt-1 pb-1">
|
||||
<a href="#" class="btn btn-primary btn-lg btn-round">
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-12 col-12 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-body pt-2 pb-2">
|
||||
<div id="myWeather">Please wait</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12 col-12 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Authors</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row pb-2">
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item mb-0">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="img-fluid" data-toggle="tooltip" title="Alfa Zulkarnain">
|
||||
<div class="avatar-badge" title="Editor" data-toggle="tooltip"><i class="fas fa-wrench"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item mb-0">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="img-fluid" data-toggle="tooltip" title="Egi Ferdian">
|
||||
<div class="avatar-badge" title="Admin" data-toggle="tooltip"><i class="fas fa-cog"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item mb-0">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="img-fluid" data-toggle="tooltip" title="Jaka Ramadhan">
|
||||
<div class="avatar-badge" title="Author" data-toggle="tooltip"><i class="fas fa-pencil-alt"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-3 col-lg-3 mb-4 mb-md-0">
|
||||
<div class="avatar-item mb-0">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="img-fluid" data-toggle="tooltip" title="Ryan">
|
||||
<div class="avatar-badge" title="Admin" data-toggle="tooltip"><i class="fas fa-cog"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Referral URL</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">2,100</div>
|
||||
<div class="font-weight-bold mb-1">Google</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">1,880</div>
|
||||
<div class="font-weight-bold mb-1">Facebook</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="67%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">1,521</div>
|
||||
<div class="font-weight-bold mb-1">Bing</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="58%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">884</div>
|
||||
<div class="font-weight-bold mb-1">Yahoo</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="36%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">473</div>
|
||||
<div class="font-weight-bold mb-1">Kodinger</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="28%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="text-small float-right font-weight-bold text-muted">418</div>
|
||||
<div class="font-weight-bold mb-1">Multinity</div>
|
||||
<div class="progress" data-height="3">
|
||||
<div class="progress-bar" role="progressbar" data-width="20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Popular Browser</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<div class="browser browser-chrome"></div>
|
||||
<div class="mt-2 font-weight-bold">Chrome</div>
|
||||
<div class="text-muted text-small"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 48%</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="browser browser-firefox"></div>
|
||||
<div class="mt-2 font-weight-bold">Firefox</div>
|
||||
<div class="text-muted text-small"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 26%</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="browser browser-safari"></div>
|
||||
<div class="mt-2 font-weight-bold">Safari</div>
|
||||
<div class="text-muted text-small"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 14%</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="browser browser-opera"></div>
|
||||
<div class="mt-2 font-weight-bold">Opera</div>
|
||||
<div class="text-muted text-small">7%</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="browser browser-internet-explorer"></div>
|
||||
<div class="mt-2 font-weight-bold">IE</div>
|
||||
<div class="text-muted text-small"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 5%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-sm-5 mt-md-0">
|
||||
<div class="card-header">
|
||||
<h4>Visitors</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="visitorMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>This Week Stats</h4>
|
||||
<div class="card-header-action">
|
||||
<div class="dropdown">
|
||||
<a href="#" class="dropdown-toggle btn btn-primary" data-toggle="dropdown">Filter</a>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a href="#" class="dropdown-item has-icon"><i class="far fa-circle"></i> Electronic</a>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="far fa-circle"></i> T-shirt</a>
|
||||
<a href="#" class="dropdown-item has-icon"><i class="far fa-circle"></i> Hat</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="summary">
|
||||
<div class="summary-info">
|
||||
<h4>$1,053</h4>
|
||||
<div class="text-muted">Sold 3 items on 2 customers</div>
|
||||
<div class="d-block mt-2">
|
||||
<a href="#">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<h6>Item List <span class="text-muted">(3 Items)</span></h6>
|
||||
<ul class="list-unstyled list-unstyled-border">
|
||||
<li class="media">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="50" src="assets/img/products/product-1-50.png" alt="product">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<div class="media-right">$405</div>
|
||||
<div class="media-title"><a href="#">PlayStation 9</a></div>
|
||||
<div class="text-muted text-small">by <a href="#">Hasan Basri</a> <div class="bullet"></div> Sunday</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="50" src="assets/img/products/product-2-50.png" alt="product">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<div class="media-right">$499</div>
|
||||
<div class="media-title"><a href="#">RocketZ</a></div>
|
||||
<div class="text-muted text-small">by <a href="#">Hasan Basri</a> <div class="bullet"></div> Sunday
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="50" src="assets/img/products/product-3-50.png" alt="product">
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<div class="media-right">$149</div>
|
||||
<div class="media-title"><a href="#">Xiaomay Readme 4.0</a></div>
|
||||
<div class="text-muted text-small">by <a href="#">Kusnaedi</a> <div class="bullet"></div> Tuesday
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="d-inline">Tasks</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#" class="btn btn-primary">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled list-unstyled-border">
|
||||
<li class="media">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="cbx-1">
|
||||
<label class="custom-control-label" for="cbx-1"></label>
|
||||
</div>
|
||||
<img class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-4.png" alt="avatar">
|
||||
<div class="media-body">
|
||||
<div class="badge badge-pill badge-danger mb-1 float-right">Not Finished</div>
|
||||
<h6 class="media-title"><a href="#">Redesign header</a></h6>
|
||||
<div class="text-small text-muted">Alfa Zulkarnain <div class="bullet"></div> <span class="text-primary">Now</span></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="cbx-2" checked="">
|
||||
<label class="custom-control-label" for="cbx-2"></label>
|
||||
</div>
|
||||
<img class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-5.png" alt="avatar">
|
||||
<div class="media-body">
|
||||
<div class="badge badge-pill badge-primary mb-1 float-right">Completed</div>
|
||||
<h6 class="media-title"><a href="#">Add a new component</a></h6>
|
||||
<div class="text-small text-muted">Serj Tankian <div class="bullet"></div> 4 Min</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="cbx-3" >
|
||||
<label class="custom-control-label" for="cbx-3"></label>
|
||||
</div>
|
||||
<img class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-2.png" alt="avatar">
|
||||
<div class="media-body">
|
||||
<div class="badge badge-pill badge-warning mb-1 float-right">Progress</div>
|
||||
<h6 class="media-title"><a href="#">Fix modal window</a></h6>
|
||||
<div class="text-small text-muted">Ujang Maman <div class="bullet"></div> 8 Min</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="cbx-4">
|
||||
<label class="custom-control-label" for="cbx-4"></label>
|
||||
</div>
|
||||
<img class="mr-3 rounded-circle" width="50" src="assets/img/avatar/avatar-1.png" alt="avatar">
|
||||
<div class="media-body">
|
||||
<div class="badge badge-pill badge-danger mb-1 float-right">Not Finished</div>
|
||||
<h6 class="media-title"><a href="#">Remove unwanted classes</a></h6>
|
||||
<div class="text-small text-muted">Farhan A Mujib <div class="bullet"></div> 21 Min</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12 col-12 col-sm-12">
|
||||
<form method="post" class="needs-validation" novalidate="">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Quick Draft</h4>
|
||||
</div>
|
||||
<div class="card-body pb-0">
|
||||
<div class="form-group">
|
||||
<label>Title</label>
|
||||
<input type="text" name="title" class="form-control" required>
|
||||
<div class="invalid-feedback">
|
||||
Please fill in the title
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Content</label>
|
||||
<textarea class="summernote-simple"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer pt-0">
|
||||
<button class="btn btn-primary">Save Draft</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-12 col-12 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Latest Posts</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#" class="btn btn-primary">View All</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Author</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Introduction Laravel 5
|
||||
<div class="table-links">
|
||||
in <a href="#">Web Development</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">View</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="font-weight-600"><img src="assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle mr-1"> Bagus Dwi Cahya</a>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-primary btn-action mr-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
|
||||
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="alert('Deleted')"><i class="fas fa-trash"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Laravel 5 Tutorial - Installation
|
||||
<div class="table-links">
|
||||
in <a href="#">Web Development</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">View</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="font-weight-600"><img src="assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle mr-1"> Bagus Dwi Cahya</a>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-primary btn-action mr-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
|
||||
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="alert('Deleted')"><i class="fas fa-trash"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Laravel 5 Tutorial - MVC
|
||||
<div class="table-links">
|
||||
in <a href="#">Web Development</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">View</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="font-weight-600"><img src="assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle mr-1"> Bagus Dwi Cahya</a>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-primary btn-action mr-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
|
||||
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="alert('Deleted')"><i class="fas fa-trash"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Laravel 5 Tutorial - Migration
|
||||
<div class="table-links">
|
||||
in <a href="#">Web Development</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">View</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="font-weight-600"><img src="assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle mr-1"> Bagus Dwi Cahya</a>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-primary btn-action mr-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
|
||||
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="alert('Deleted')"><i class="fas fa-trash"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Laravel 5 Tutorial - Deploy
|
||||
<div class="table-links">
|
||||
in <a href="#">Web Development</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">View</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="font-weight-600"><img src="assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle mr-1"> Bagus Dwi Cahya</a>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-primary btn-action mr-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
|
||||
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="alert('Deleted')"><i class="fas fa-trash"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Laravel 5 Tutorial - Closing
|
||||
<div class="table-links">
|
||||
in <a href="#">Web Development</a>
|
||||
<div class="bullet"></div>
|
||||
<a href="#">View</a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" class="font-weight-600"><img src="assets/img/avatar/avatar-1.png" alt="avatar" width="30" class="rounded-circle mr-1"> Bagus Dwi Cahya</a>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-primary btn-action mr-1" data-toggle="tooltip" title="Edit"><i class="fas fa-pencil-alt"></i></a>
|
||||
<a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="alert('Deleted')"><i class="fas fa-trash"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/simpleweather/jquery.simpleWeather.min.js"></script>
|
||||
<script src="node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="node_modules/jqvmap/dist/jquery.vmap.min.js"></script>
|
||||
<script src="node_modules/jqvmap/dist/maps/jquery.vmap.world.js"></script>
|
||||
<script src="node_modules/summernote/dist/summernote-bs4.js"></script>
|
||||
<script src="node_modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/index-0.js"></script>
|
||||
{% endblock %}
|
||||
501
pages/index.html
Normal file
501
pages/index.html
Normal file
@@ -0,0 +1,501 @@
|
||||
{% set title = 'Ecommerce Dashboard' %}
|
||||
{% set page = 'index.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/jqvmap/dist/jqvmap.min.css">
|
||||
<link rel="stylesheet" href="node_modules/summernote/dist/summernote-bs4.css">
|
||||
<link rel="stylesheet" href="node_modules/owl.carousel/dist/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="node_modules/owl.carousel/dist/assets/owl.theme.default.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-4 col-sm-12">
|
||||
<div class="card card-statistic-2">
|
||||
<div class="card-stats">
|
||||
<div class="card-stats-title">Order Statistics -
|
||||
<div class="dropdown d-inline">
|
||||
<a class="font-weight-600 dropdown-toggle" data-toggle="dropdown" href="#" id="orders-month">August</a>
|
||||
<ul class="dropdown-menu dropdown-menu-sm">
|
||||
<li class="dropdown-title">Select Month</li>
|
||||
<li><a href="#" class="dropdown-item">January</a></li>
|
||||
<li><a href="#" class="dropdown-item">February</a></li>
|
||||
<li><a href="#" class="dropdown-item">March</a></li>
|
||||
<li><a href="#" class="dropdown-item">April</a></li>
|
||||
<li><a href="#" class="dropdown-item">May</a></li>
|
||||
<li><a href="#" class="dropdown-item">June</a></li>
|
||||
<li><a href="#" class="dropdown-item">July</a></li>
|
||||
<li><a href="#" class="dropdown-item active">August</a></li>
|
||||
<li><a href="#" class="dropdown-item">September</a></li>
|
||||
<li><a href="#" class="dropdown-item">October</a></li>
|
||||
<li><a href="#" class="dropdown-item">November</a></li>
|
||||
<li><a href="#" class="dropdown-item">December</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-stats-items">
|
||||
<div class="card-stats-item">
|
||||
<div class="card-stats-item-count">24</div>
|
||||
<div class="card-stats-item-label">Pending</div>
|
||||
</div>
|
||||
<div class="card-stats-item">
|
||||
<div class="card-stats-item-count">12</div>
|
||||
<div class="card-stats-item-label">Shipping</div>
|
||||
</div>
|
||||
<div class="card-stats-item">
|
||||
<div class="card-stats-item-count">23</div>
|
||||
<div class="card-stats-item-label">Completed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-icon shadow-primary bg-primary">
|
||||
<i class="fas fa-archive"></i>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<div class="card-header">
|
||||
<h4>Total Orders</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
59
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-12">
|
||||
<div class="card card-statistic-2">
|
||||
<div class="card-chart">
|
||||
<canvas id="balance-chart" height="80"></canvas>
|
||||
</div>
|
||||
<div class="card-icon shadow-primary bg-primary">
|
||||
<i class="fas fa-dollar-sign"></i>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<div class="card-header">
|
||||
<h4>Balance</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
$187,13
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-12">
|
||||
<div class="card card-statistic-2">
|
||||
<div class="card-chart">
|
||||
<canvas id="sales-chart" height="80"></canvas>
|
||||
</div>
|
||||
<div class="card-icon shadow-primary bg-primary">
|
||||
<i class="fas fa-shopping-bag"></i>
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<div class="card-header">
|
||||
<h4>Sales</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
4,732
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Budget vs Sales</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myChart" height="158"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card gradient-bottom">
|
||||
<div class="card-header">
|
||||
<h4>Top 5 Products</h4>
|
||||
<div class="card-header-action dropdown">
|
||||
<a href="#" data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Month</a>
|
||||
<ul class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
|
||||
<li class="dropdown-title">Select Period</li>
|
||||
<li><a href="#" class="dropdown-item">Today</a></li>
|
||||
<li><a href="#" class="dropdown-item">Week</a></li>
|
||||
<li><a href="#" class="dropdown-item active">Month</a></li>
|
||||
<li><a href="#" class="dropdown-item">This Year</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" id="top-5-scroll">
|
||||
<ul class="list-unstyled list-unstyled-border">
|
||||
<li class="media">
|
||||
<img class="mr-3 rounded" width="55" src="assets/img/products/product-3-50.png" alt="product">
|
||||
<div class="media-body">
|
||||
<div class="float-right"><div class="font-weight-600 text-muted text-small">86 Sales</div></div>
|
||||
<div class="media-title">oPhone S9 Limited</div>
|
||||
<div class="mt-1">
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-primary" data-width="64%"></div>
|
||||
<div class="budget-price-label">$68,714</div>
|
||||
</div>
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-danger" data-width="43%"></div>
|
||||
<div class="budget-price-label">$38,700</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="mr-3 rounded" width="55" src="assets/img/products/product-4-50.png" alt="product">
|
||||
<div class="media-body">
|
||||
<div class="float-right"><div class="font-weight-600 text-muted text-small">67 Sales</div></div>
|
||||
<div class="media-title">iBook Pro 2018</div>
|
||||
<div class="mt-1">
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-primary" data-width="84%"></div>
|
||||
<div class="budget-price-label">$107,133</div>
|
||||
</div>
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-danger" data-width="60%"></div>
|
||||
<div class="budget-price-label">$91,455</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="mr-3 rounded" width="55" src="assets/img/products/product-1-50.png" alt="product">
|
||||
<div class="media-body">
|
||||
<div class="float-right"><div class="font-weight-600 text-muted text-small">63 Sales</div></div>
|
||||
<div class="media-title">Headphone Blitz</div>
|
||||
<div class="mt-1">
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-primary" data-width="34%"></div>
|
||||
<div class="budget-price-label">$3,717</div>
|
||||
</div>
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-danger" data-width="28%"></div>
|
||||
<div class="budget-price-label">$2,835</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="mr-3 rounded" width="55" src="assets/img/products/product-3-50.png" alt="product">
|
||||
<div class="media-body">
|
||||
<div class="float-right"><div class="font-weight-600 text-muted text-small">28 Sales</div></div>
|
||||
<div class="media-title">oPhone X Lite</div>
|
||||
<div class="mt-1">
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-primary" data-width="45%"></div>
|
||||
<div class="budget-price-label">$13,972</div>
|
||||
</div>
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-danger" data-width="30%"></div>
|
||||
<div class="budget-price-label">$9,660</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="mr-3 rounded" width="55" src="assets/img/products/product-5-50.png" alt="product">
|
||||
<div class="media-body">
|
||||
<div class="float-right"><div class="font-weight-600 text-muted text-small">19 Sales</div></div>
|
||||
<div class="media-title">Old Camera</div>
|
||||
<div class="mt-1">
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-primary" data-width="35%"></div>
|
||||
<div class="budget-price-label">$7,391</div>
|
||||
</div>
|
||||
<div class="budget-price">
|
||||
<div class="budget-price-square bg-danger" data-width="28%"></div>
|
||||
<div class="budget-price-label">$5,472</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer pt-3 d-flex justify-content-center">
|
||||
<div class="budget-price justify-content-center">
|
||||
<div class="budget-price-square bg-primary" data-width="20"></div>
|
||||
<div class="budget-price-label">Selling Price</div>
|
||||
</div>
|
||||
<div class="budget-price justify-content-center">
|
||||
<div class="budget-price-square bg-danger" data-width="20"></div>
|
||||
<div class="budget-price-label">Budget Price</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Best Products</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="owl-carousel owl-theme" id="products-carousel">
|
||||
<div>
|
||||
<div class="product-item pb-3">
|
||||
<div class="product-image">
|
||||
<img alt="image" src="assets/img/products/product-4-50.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="product-details">
|
||||
<div class="product-name">iBook Pro 2018</div>
|
||||
<div class="product-review">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="text-muted text-small">67 Sales</div>
|
||||
<div class="product-cta">
|
||||
<a href="#" class="btn btn-primary">Detail</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="product-item">
|
||||
<div class="product-image">
|
||||
<img alt="image" src="assets/img/products/product-3-50.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="product-details">
|
||||
<div class="product-name">oPhone S9 Limited</div>
|
||||
<div class="product-review">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star-half"></i>
|
||||
</div>
|
||||
<div class="text-muted text-small">86 Sales</div>
|
||||
<div class="product-cta">
|
||||
<a href="#" class="btn btn-primary">Detail</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="product-item">
|
||||
<div class="product-image">
|
||||
<img alt="image" src="assets/img/products/product-1-50.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="product-details">
|
||||
<div class="product-name">Headphone Blitz</div>
|
||||
<div class="product-review">
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="fas fa-star"></i>
|
||||
<i class="far fa-star"></i>
|
||||
</div>
|
||||
<div class="text-muted text-small">63 Sales</div>
|
||||
<div class="product-cta">
|
||||
<a href="#" class="btn btn-primary">Detail</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Top Countries</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="text-title mb-2">July</div>
|
||||
<ul class="list-unstyled list-unstyled-border list-unstyled-noborder mb-0">
|
||||
<li class="media">
|
||||
<img class="img-fluid mt-1 img-shadow" src="node_modules/flag-icon-css/flags/4x3/id.svg" alt="image" width="40">
|
||||
<div class="media-body ml-3">
|
||||
<div class="media-title">Indonesia</div>
|
||||
<div class="text-small text-muted">3,282 <i class="fas fa-caret-down text-danger"></i></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="img-fluid mt-1 img-shadow" src="node_modules/flag-icon-css/flags/4x3/my.svg" alt="image" width="40">
|
||||
<div class="media-body ml-3">
|
||||
<div class="media-title">Malaysia</div>
|
||||
<div class="text-small text-muted">2,976 <i class="fas fa-caret-down text-danger"></i></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="img-fluid mt-1 img-shadow" src="node_modules/flag-icon-css/flags/4x3/us.svg" alt="image" width="40">
|
||||
<div class="media-body ml-3">
|
||||
<div class="media-title">United States</div>
|
||||
<div class="text-small text-muted">1,576 <i class="fas fa-caret-up text-success"></i></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-sm-6 mt-sm-0 mt-4">
|
||||
<div class="text-title mb-2">August</div>
|
||||
<ul class="list-unstyled list-unstyled-border list-unstyled-noborder mb-0">
|
||||
<li class="media">
|
||||
<img class="img-fluid mt-1 img-shadow" src="node_modules/flag-icon-css/flags/4x3/id.svg" alt="image" width="40">
|
||||
<div class="media-body ml-3">
|
||||
<div class="media-title">Indonesia</div>
|
||||
<div class="text-small text-muted">3,486 <i class="fas fa-caret-up text-success"></i></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="img-fluid mt-1 img-shadow" src="node_modules/flag-icon-css/flags/4x3/ps.svg" alt="image" width="40">
|
||||
<div class="media-body ml-3">
|
||||
<div class="media-title">Palestine</div>
|
||||
<div class="text-small text-muted">3,182 <i class="fas fa-caret-up text-success"></i></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<img class="img-fluid mt-1 img-shadow" src="node_modules/flag-icon-css/flags/4x3/de.svg" alt="image" width="40">
|
||||
<div class="media-body ml-3">
|
||||
<div class="media-title">Germany</div>
|
||||
<div class="text-small text-muted">2,317 <i class="fas fa-caret-down text-danger"></i></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Invoices</h4>
|
||||
<div class="card-header-action">
|
||||
<a href="#" class="btn btn-danger">View More <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive table-invoice">
|
||||
<table class="table table-striped">
|
||||
<tr>
|
||||
<th>Invoice ID</th>
|
||||
<th>Customer</th>
|
||||
<th>Status</th>
|
||||
<th>Due Date</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">INV-87239</a></td>
|
||||
<td class="font-weight-600">Kusnadi</td>
|
||||
<td><div class="badge badge-warning">Unpaid</div></td>
|
||||
<td>July 19, 2018</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-primary">Detail</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">INV-48574</a></td>
|
||||
<td class="font-weight-600">Hasan Basri</td>
|
||||
<td><div class="badge badge-success">Paid</div></td>
|
||||
<td>July 21, 2018</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-primary">Detail</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">INV-76824</a></td>
|
||||
<td class="font-weight-600">Muhamad Nuruzzaki</td>
|
||||
<td><div class="badge badge-warning">Unpaid</div></td>
|
||||
<td>July 22, 2018</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-primary">Detail</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">INV-84990</a></td>
|
||||
<td class="font-weight-600">Agung Ardiansyah</td>
|
||||
<td><div class="badge badge-warning">Unpaid</div></td>
|
||||
<td>July 22, 2018</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-primary">Detail</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">INV-87320</a></td>
|
||||
<td class="font-weight-600">Ardian Rahardiansyah</td>
|
||||
<td><div class="badge badge-success">Paid</div></td>
|
||||
<td>July 28, 2018</td>
|
||||
<td>
|
||||
<a href="#" class="btn btn-primary">Detail</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card card-hero">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">
|
||||
<i class="far fa-question-circle"></i>
|
||||
</div>
|
||||
<h4>14</h4>
|
||||
<div class="card-description">Customers need help</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="tickets-list">
|
||||
<a href="#" class="ticket-item">
|
||||
<div class="ticket-title">
|
||||
<h4>My order hasn't arrived yet</h4>
|
||||
</div>
|
||||
<div class="ticket-info">
|
||||
<div>Laila Tazkiah</div>
|
||||
<div class="bullet"></div>
|
||||
<div class="text-primary">1 min ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="ticket-item">
|
||||
<div class="ticket-title">
|
||||
<h4>Please cancel my order</h4>
|
||||
</div>
|
||||
<div class="ticket-info">
|
||||
<div>Rizal Fakhri</div>
|
||||
<div class="bullet"></div>
|
||||
<div>2 hours ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="ticket-item">
|
||||
<div class="ticket-title">
|
||||
<h4>Do you see my mother?</h4>
|
||||
</div>
|
||||
<div class="ticket-info">
|
||||
<div>Syahdan Ubaidillah</div>
|
||||
<div class="bullet"></div>
|
||||
<div>6 hours ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="features-tickets.html" class="ticket-item ticket-more">
|
||||
View All <i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/jquery-sparkline/jquery.sparkline.min.js"></script>
|
||||
<script src="node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
<script src="node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
|
||||
<script src="node_modules/summernote/dist/summernote-bs4.js"></script>
|
||||
<script src="node_modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/index.js"></script>
|
||||
{% endblock %}
|
||||
37
pages/layout-default.html
Normal file
37
pages/layout-default.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{% set title = 'Layout › Default' %}
|
||||
{% set page = 'layout-default.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Default Layout</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Layout</a></div>
|
||||
<div class="breadcrumb-item">Default Layout</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">This is Example Page</h2>
|
||||
<p class="section-lead">This page is just an example for you to create your own page.</p>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Example Card</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div class="card-footer bg-whitesmoke">
|
||||
This is card footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
37
pages/layout-top-navigation.html
Normal file
37
pages/layout-top-navigation.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{% set title = 'Layout › Top Navigation' %}
|
||||
{% set page = 'layout-top-navigation.html' %}
|
||||
{% extends 'layouts/master-3.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Top Navigation</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Layout</a></div>
|
||||
<div class="breadcrumb-item">Top Navigation</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">This is Example Page</h2>
|
||||
<p class="section-lead">This page is just an example for you to create your own page.</p>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Example Card</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div class="card-footer bg-whitesmoke">
|
||||
This is card footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
37
pages/layout-transparent.html
Normal file
37
pages/layout-transparent.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{% set title = 'Layout › Transprent Sidebar' %}
|
||||
{% set page = 'layout-transparent.html' %}
|
||||
{% extends 'layouts/master-2.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Transprent Sidebar</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Layout</a></div>
|
||||
<div class="breadcrumb-item">Transprent Sidebar</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">This is Example Page</h2>
|
||||
<p class="section-lead">This page is just an example for you to create your own page.</p>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Example Card</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div class="card-footer bg-whitesmoke">
|
||||
This is card footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
299
pages/layouts/master-2.html
Normal file
299
pages/layouts/master-2.html
Normal file
@@ -0,0 +1,299 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
|
||||
<title>{{ title }} — {{ site_name }}</title>
|
||||
|
||||
<!-- General CSS Files -->
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
|
||||
<!-- CSS Libraries -->
|
||||
{% block plugins_css %}{% endblock %}
|
||||
|
||||
<!-- Template CSS -->
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/components.css">
|
||||
</head>
|
||||
|
||||
<body class="layout-2">
|
||||
<div id="app">
|
||||
{% if body == false %}
|
||||
{% block content_2 %}{% endblock %}
|
||||
{% else %}
|
||||
<div class="main-wrapper">
|
||||
<div class="navbar-bg"></div>
|
||||
<nav class="navbar navbar-expand-lg main-navbar">
|
||||
<a href="index.html" class="navbar-brand sidebar-gone-hide">Stisla</a>
|
||||
<a href="#" class="nav-link sidebar-gone-show" data-toggle="sidebar"><i class="fas fa-bars"></i></a>
|
||||
<div class="nav-collapse">
|
||||
<a class="sidebar-gone-show nav-collapse-toggle nav-link" href="#">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active"><a href="#" class="nav-link">Application</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Report Something</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Server Status</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<form class="form-inline ml-auto">
|
||||
<ul class="navbar-nav">
|
||||
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
|
||||
</ul>
|
||||
<div class="search-element">
|
||||
<input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="250">
|
||||
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
|
||||
<div class="search-backdrop"></div>
|
||||
<div class="search-result">
|
||||
<div class="search-header">
|
||||
Histories
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">How to hack NASA using CSS</a>
|
||||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">Kodinger.com</a>
|
||||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">#Stisla</a>
|
||||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
<div class="search-header">
|
||||
Result
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-3-50.png" alt="product">
|
||||
oPhone S9 Limited Edition
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-2-50.png" alt="product">
|
||||
Drone X2 New Gen-7
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-1-50.png" alt="product">
|
||||
Headphone Blitz
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-header">
|
||||
Projects
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<div class="search-icon bg-danger text-white mr-3">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
Stisla Admin Template
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<div class="search-icon bg-primary text-white mr-3">
|
||||
<i class="fas fa-laptop"></i>
|
||||
</div>
|
||||
Create a new Homepage Design
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav navbar-right">
|
||||
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
|
||||
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
||||
<div class="dropdown-header">Messages
|
||||
<div class="float-right">
|
||||
<a href="#">Mark All As Read</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-list-content dropdown-list-message">
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle">
|
||||
<div class="is-online"></div>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Kusnaedi</b>
|
||||
<p>Hello, Bro!</p>
|
||||
<div class="time">10 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle">
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Dedik Sugiharto</b>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
|
||||
<div class="time">12 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle">
|
||||
<div class="is-online"></div>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Agung Ardiansyah</b>
|
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<div class="time">12 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle">
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Ardian Rahardiansyah</b>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit ess</p>
|
||||
<div class="time">16 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle">
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Alfa Zulkarnain</b>
|
||||
<p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
|
||||
<div class="time">Yesterday</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-footer text-center">
|
||||
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
|
||||
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
||||
<div class="dropdown-header">Notifications
|
||||
<div class="float-right">
|
||||
<a href="#">Mark All As Read</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-list-content dropdown-list-icons">
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-icon bg-primary text-white">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
Template update is available now!
|
||||
<div class="time text-primary">2 Min Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-info text-white">
|
||||
<i class="far fa-user"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>You</b> and <b>Dedik Sugiharto</b> are now friends
|
||||
<div class="time">10 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-success text-white">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
|
||||
<div class="time">12 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-danger text-white">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
Low disk space. Let's clean it!
|
||||
<div class="time">17 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-info text-white">
|
||||
<i class="fas fa-bell"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
Welcome to Stisla template!
|
||||
<div class="time">Yesterday</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-footer text-center">
|
||||
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
|
||||
<div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<div class="dropdown-title">Logged in 5 min ago</div>
|
||||
<a href="features-profile.html" class="dropdown-item has-icon">
|
||||
<i class="far fa-user"></i> Profile
|
||||
</a>
|
||||
<a href="features-activities.html" class="dropdown-item has-icon">
|
||||
<i class="fas fa-bolt"></i> Activities
|
||||
</a>
|
||||
<a href="features-settings.html" class="dropdown-item has-icon">
|
||||
<i class="fas fa-cog"></i> Settings
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger">
|
||||
<i class="fas fa-sign-out-alt"></i> Logout
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="main-sidebar">
|
||||
<aside id="sidebar-wrapper">
|
||||
<div class="sidebar-brand sidebar-gone-show"><a href="index.html">Stisla</a></div>
|
||||
{% set layout = 'layout-2' %}
|
||||
{% include 'layouts/menu.html' %}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<footer class="main-footer">
|
||||
<div class="footer-left">
|
||||
Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
{{ version }}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- General JS Scripts -->
|
||||
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
|
||||
<script src="node_modules/tooltip.js/dist/umd/tooltip.min.js"></script>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="node_modules/nicescroll/dist/jquery.nicescroll.min.js"></script>
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
<script src="assets/js/stisla.js"></script>
|
||||
|
||||
<!-- JS Libraies -->
|
||||
<script src="node_modules/sticky-kit/dist/sticky-kit.min.js"></script>
|
||||
{% block plugins_js %}{% endblock %}
|
||||
|
||||
<!-- Page Specific JS File -->
|
||||
{% block page_js %}{% endblock %}
|
||||
|
||||
<!-- Template JS File -->
|
||||
<script src="assets/js/scripts.js"></script>
|
||||
<script src="assets/js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
327
pages/layouts/master-3.html
Normal file
327
pages/layouts/master-3.html
Normal file
@@ -0,0 +1,327 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
|
||||
<title>{{ title }} — {{ site_name }}</title>
|
||||
|
||||
<!-- General CSS Files -->
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
|
||||
<!-- CSS Libraries -->
|
||||
{% block plugins_css %}{% endblock %}
|
||||
|
||||
<!-- Template CSS -->
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/components.css">
|
||||
</head>
|
||||
|
||||
<body class="layout-3">
|
||||
<div id="app">
|
||||
{% if body == false %}
|
||||
{% block content_2 %}{% endblock %}
|
||||
{% else %}
|
||||
<div class="main-wrapper container">
|
||||
<div class="navbar-bg"></div>
|
||||
<nav class="navbar navbar-expand-lg main-navbar">
|
||||
<a href="index.html" class="navbar-brand sidebar-gone-hide">Stisla</a>
|
||||
<a href="#" class="nav-link sidebar-gone-show" data-toggle="sidebar"><i class="fas fa-bars"></i></a>
|
||||
<div class="nav-collapse">
|
||||
<a class="sidebar-gone-show nav-collapse-toggle nav-link" href="#">
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active"><a href="#" class="nav-link">Application</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Report Something</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Server Status</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<form class="form-inline ml-auto">
|
||||
<ul class="navbar-nav">
|
||||
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
|
||||
</ul>
|
||||
<div class="search-element">
|
||||
<input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="250">
|
||||
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
|
||||
<div class="search-backdrop"></div>
|
||||
<div class="search-result">
|
||||
<div class="search-header">
|
||||
Histories
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">How to hack NASA using CSS</a>
|
||||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">Kodinger.com</a>
|
||||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">#Stisla</a>
|
||||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
<div class="search-header">
|
||||
Result
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-3-50.png" alt="product">
|
||||
oPhone S9 Limited Edition
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-2-50.png" alt="product">
|
||||
Drone X2 New Gen-7
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-1-50.png" alt="product">
|
||||
Headphone Blitz
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-header">
|
||||
Projects
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<div class="search-icon bg-danger text-white mr-3">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
Stisla Admin Template
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<div class="search-icon bg-primary text-white mr-3">
|
||||
<i class="fas fa-laptop"></i>
|
||||
</div>
|
||||
Create a new Homepage Design
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav navbar-right">
|
||||
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
|
||||
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
||||
<div class="dropdown-header">Messages
|
||||
<div class="float-right">
|
||||
<a href="#">Mark All As Read</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-list-content dropdown-list-message">
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle">
|
||||
<div class="is-online"></div>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Kusnaedi</b>
|
||||
<p>Hello, Bro!</p>
|
||||
<div class="time">10 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle">
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Dedik Sugiharto</b>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
|
||||
<div class="time">12 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle">
|
||||
<div class="is-online"></div>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Agung Ardiansyah</b>
|
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<div class="time">12 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle">
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Ardian Rahardiansyah</b>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit ess</p>
|
||||
<div class="time">16 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle">
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Alfa Zulkarnain</b>
|
||||
<p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
|
||||
<div class="time">Yesterday</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-footer text-center">
|
||||
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
|
||||
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
||||
<div class="dropdown-header">Notifications
|
||||
<div class="float-right">
|
||||
<a href="#">Mark All As Read</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-list-content dropdown-list-icons">
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-icon bg-primary text-white">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
Template update is available now!
|
||||
<div class="time text-primary">2 Min Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-info text-white">
|
||||
<i class="far fa-user"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>You</b> and <b>Dedik Sugiharto</b> are now friends
|
||||
<div class="time">10 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-success text-white">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
|
||||
<div class="time">12 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-danger text-white">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
Low disk space. Let's clean it!
|
||||
<div class="time">17 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-info text-white">
|
||||
<i class="fas fa-bell"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
Welcome to Stisla template!
|
||||
<div class="time">Yesterday</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-footer text-center">
|
||||
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
|
||||
<div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<div class="dropdown-title">Logged in 5 min ago</div>
|
||||
<a href="features-profile.html" class="dropdown-item has-icon">
|
||||
<i class="far fa-user"></i> Profile
|
||||
</a>
|
||||
<a href="features-activities.html" class="dropdown-item has-icon">
|
||||
<i class="fas fa-bolt"></i> Activities
|
||||
</a>
|
||||
<a href="features-settings.html" class="dropdown-item has-icon">
|
||||
<i class="fas fa-cog"></i> Settings
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger">
|
||||
<i class="fas fa-sign-out-alt"></i> Logout
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-secondary navbar-expand-lg">
|
||||
<div class="container">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a href="index-0.html" class="nav-link">General Dashboard</a></li>
|
||||
<li class="nav-item"><a href="index.html" class="nav-link">Ecommerce Dashboard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link"><i class="far fa-heart"></i><span>Top Navigation</span></a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" data-toggle="dropdown" class="nav-link has-dropdown"><i class="far fa-clone"></i><span>Multiple Dropdown</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a href="#" class="nav-link">Not Dropdown Link</a></li>
|
||||
<li class="nav-item dropdown"><a href="#" class="nav-link has-dropdown">Hover Me</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
|
||||
<li class="nav-item dropdown"><a href="#" class="nav-link has-dropdown">Link 2</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<footer class="main-footer">
|
||||
<div class="footer-left">
|
||||
Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
{{ version }}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- General JS Scripts -->
|
||||
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
|
||||
<script src="node_modules/tooltip.js/dist/umd/tooltip.min.js"></script>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="node_modules/nicescroll/dist/jquery.nicescroll.min.js"></script>
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
<script src="assets/js/stisla.js"></script>
|
||||
|
||||
<!-- JS Libraies -->
|
||||
{% block plugins_js %}{% endblock %}
|
||||
|
||||
<!-- Page Specific JS File -->
|
||||
{% block page_js %}{% endblock %}
|
||||
|
||||
<!-- Template JS File -->
|
||||
<script src="assets/js/scripts.js"></script>
|
||||
<script src="assets/js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
291
pages/layouts/master.html
Normal file
291
pages/layouts/master.html
Normal file
@@ -0,0 +1,291 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
|
||||
<title>{{ title }} — {{ site_name }}</title>
|
||||
|
||||
<!-- General CSS Files -->
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
|
||||
<!-- CSS Libraries -->
|
||||
{% block plugins_css %}{% endblock %}
|
||||
|
||||
<!-- Template CSS -->
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/components.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
{% if body == false %}
|
||||
{% block content_2 %}{% endblock %}
|
||||
{% else %}
|
||||
<div class="main-wrapper main-wrapper-1">
|
||||
<div class="navbar-bg"></div>
|
||||
<nav class="navbar navbar-expand-lg main-navbar">
|
||||
<form class="form-inline mr-auto">
|
||||
<ul class="navbar-nav mr-3">
|
||||
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
|
||||
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
|
||||
</ul>
|
||||
<div class="search-element">
|
||||
<input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="250">
|
||||
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
|
||||
<div class="search-backdrop"></div>
|
||||
<div class="search-result">
|
||||
<div class="search-header">
|
||||
Histories
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">How to hack NASA using CSS</a>
|
||||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">Kodinger.com</a>
|
||||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">#Stisla</a>
|
||||
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
||||
</div>
|
||||
<div class="search-header">
|
||||
Result
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-3-50.png" alt="product">
|
||||
oPhone S9 Limited Edition
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-2-50.png" alt="product">
|
||||
Drone X2 New Gen-7
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<img class="mr-3 rounded" width="30" src="assets/img/products/product-1-50.png" alt="product">
|
||||
Headphone Blitz
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-header">
|
||||
Projects
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<div class="search-icon bg-danger text-white mr-3">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
Stisla Admin Template
|
||||
</a>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a href="#">
|
||||
<div class="search-icon bg-primary text-white mr-3">
|
||||
<i class="fas fa-laptop"></i>
|
||||
</div>
|
||||
Create a new Homepage Design
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav navbar-right">
|
||||
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
|
||||
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
||||
<div class="dropdown-header">Messages
|
||||
<div class="float-right">
|
||||
<a href="#">Mark All As Read</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-list-content dropdown-list-message">
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle">
|
||||
<div class="is-online"></div>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Kusnaedi</b>
|
||||
<p>Hello, Bro!</p>
|
||||
<div class="time">10 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle">
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Dedik Sugiharto</b>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
|
||||
<div class="time">12 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle">
|
||||
<div class="is-online"></div>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Agung Ardiansyah</b>
|
||||
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<div class="time">12 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle">
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Ardian Rahardiansyah</b>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit ess</p>
|
||||
<div class="time">16 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-avatar">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle">
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Alfa Zulkarnain</b>
|
||||
<p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
|
||||
<div class="time">Yesterday</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-footer text-center">
|
||||
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
|
||||
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
||||
<div class="dropdown-header">Notifications
|
||||
<div class="float-right">
|
||||
<a href="#">Mark All As Read</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-list-content dropdown-list-icons">
|
||||
<a href="#" class="dropdown-item dropdown-item-unread">
|
||||
<div class="dropdown-item-icon bg-primary text-white">
|
||||
<i class="fas fa-code"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
Template update is available now!
|
||||
<div class="time text-primary">2 Min Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-info text-white">
|
||||
<i class="far fa-user"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>You</b> and <b>Dedik Sugiharto</b> are now friends
|
||||
<div class="time">10 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-success text-white">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
<b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
|
||||
<div class="time">12 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-danger text-white">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
Low disk space. Let's clean it!
|
||||
<div class="time">17 Hours Ago</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
<div class="dropdown-item-icon bg-info text-white">
|
||||
<i class="fas fa-bell"></i>
|
||||
</div>
|
||||
<div class="dropdown-item-desc">
|
||||
Welcome to Stisla template!
|
||||
<div class="time">Yesterday</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-footer text-center">
|
||||
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
|
||||
<div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<div class="dropdown-title">Logged in 5 min ago</div>
|
||||
<a href="features-profile.html" class="dropdown-item has-icon">
|
||||
<i class="far fa-user"></i> Profile
|
||||
</a>
|
||||
<a href="features-activities.html" class="dropdown-item has-icon">
|
||||
<i class="fas fa-bolt"></i> Activities
|
||||
</a>
|
||||
<a href="features-settings.html" class="dropdown-item has-icon">
|
||||
<i class="fas fa-cog"></i> Settings
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item has-icon text-danger">
|
||||
<i class="fas fa-sign-out-alt"></i> Logout
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="main-sidebar sidebar-style-2">
|
||||
<aside id="sidebar-wrapper">
|
||||
<div class="sidebar-brand">
|
||||
<a href="index.html">Stisla</a>
|
||||
</div>
|
||||
<div class="sidebar-brand sidebar-brand-sm">
|
||||
<a href="index.html">St</a>
|
||||
</div>
|
||||
{% include "layouts/menu.html" %}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<footer class="main-footer">
|
||||
<div class="footer-left">
|
||||
Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
{{ version }}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- General JS Scripts -->
|
||||
<script src="node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
|
||||
<script src="node_modules/tooltip.js/dist/umd/tooltip.min.js"></script>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="node_modules/nicescroll/dist/jquery.nicescroll.min.js"></script>
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
<script src="assets/js/stisla.js"></script>
|
||||
|
||||
<!-- JS Libraies -->
|
||||
{% block plugins_js %}{% endblock %}
|
||||
|
||||
<!-- Page Specific JS File -->
|
||||
{% block page_js %}{% endblock %}
|
||||
|
||||
<!-- Template JS File -->
|
||||
<script src="assets/js/scripts.js"></script>
|
||||
<script src="assets/js/custom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
148
pages/layouts/menu.html
Normal file
148
pages/layouts/menu.html
Normal file
@@ -0,0 +1,148 @@
|
||||
<ul class="sidebar-menu">
|
||||
<li class="menu-header">Dashboard</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^index(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li{{ ' class="active"'|is_active('^index-0.html', page)|safe }}><a class="nav-link" href="index-0.html">General Dashboard</a></li>
|
||||
<li{{ ' class="active"'|is_active('^index.html(.*)', page)|safe }}><a class="nav-link" href="index.html">Ecommerce Dashboard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Starter</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^layout-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>Layout</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li{{ ' class="active"'|is_active('^layout-default(.*)', page)|safe }}><a class="nav-link" href="layout-default.html">Default Layout</a></li>
|
||||
<li{{ ' class="active"'|is_active('^layout-transparent(.*)', page)|safe }}><a class="nav-link" href="layout-transparent.html">Transparent Sidebar</a></li>
|
||||
<li{{ ' class="active"'|is_active('^layout-top(.*)', page)|safe }}><a class="nav-link" href="layout-top-navigation.html">Top Navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li{{ ' class="active"'|is_active('^blank(.*)', page)|safe }}><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>Blank Page</span></a></li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^bootstrap-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>Bootstrap</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-alert(.*)', page)|safe }}><a class="nav-link" href="bootstrap-alert.html">Alert</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-badge(.*)', page)|safe }}><a class="nav-link" href="bootstrap-badge.html">Badge</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-breadcrumb(.*)', page)|safe }}><a class="nav-link" href="bootstrap-breadcrumb.html">Breadcrumb</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-buttons(.*)', page)|safe }}><a class="nav-link" href="bootstrap-buttons.html">Buttons</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-card(.*)', page)|safe }}><a class="nav-link" href="bootstrap-card.html">Card</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-carousel(.*)', page)|safe }}><a class="nav-link" href="bootstrap-carousel.html">Carousel</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-collapse(.*)', page)|safe }}><a class="nav-link" href="bootstrap-collapse.html">Collapse</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-dropdown(.*)', page)|safe }}><a class="nav-link" href="bootstrap-dropdown.html">Dropdown</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-form(.*)', page)|safe }}><a class="nav-link" href="bootstrap-form.html">Form</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-list(.*)', page)|safe }}><a class="nav-link" href="bootstrap-list-group.html">List Group</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-media(.*)', page)|safe }}><a class="nav-link" href="bootstrap-media-object.html">Media Object</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-modal(.*)', page)|safe }}><a class="nav-link" href="bootstrap-modal.html">Modal</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-nav.html(.*)', page)|safe }}><a class="nav-link" href="bootstrap-nav.html">Nav</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-navbar(.*)', page)|safe }}><a class="nav-link" href="bootstrap-navbar.html">Navbar</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-pagination(.*)', page)|safe }}><a class="nav-link" href="bootstrap-pagination.html">Pagination</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-popover(.*)', page)|safe }}><a class="nav-link" href="bootstrap-popover.html">Popover</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-progress(.*)', page)|safe }}><a class="nav-link" href="bootstrap-progress.html">Progress</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-table(.*)', page)|safe }}><a class="nav-link" href="bootstrap-table.html">Table</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-tooltip(.*)', page)|safe }}><a class="nav-link" href="bootstrap-tooltip.html">Tooltip</a></li>
|
||||
<li{{ ' class="active"'|is_active('^bootstrap-typography(.*)', page)|safe }}><a class="nav-link" href="bootstrap-typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Stisla</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^components-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>Components</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li{{ ' class="active"'|is_active('^components-article(.*)', page)|safe }}><a class="nav-link" href="components-article.html">Article</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-avatar(.*)', page)|safe }}><a class="nav-link beep beep-sidebar" href="components-avatar.html">Avatar</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-chat(.*)', page)|safe }}><a class="nav-link" href="components-chat-box.html">Chat Box</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-empty-state(.*)', page)|safe }}><a class="nav-link beep beep-sidebar" href="components-empty-state.html">Empty State</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-gallery(.*)', page)|safe }}><a class="nav-link" href="components-gallery.html">Gallery</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-hero(.*)', page)|safe }}><a class="nav-link beep beep-sidebar" href="components-hero.html">Hero</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-multiple(.*)', page)|safe }}><a class="nav-link" href="components-multiple-upload.html">Multiple Upload</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-pricing(.*)', page)|safe }}><a class="nav-link beep beep-sidebar" href="components-pricing.html">Pricing</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-statistic(.*)', page)|safe }}><a class="nav-link" href="components-statistic.html">Statistic</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-tab.html(.*)', page)|safe }}><a class="nav-link" href="components-tab.html">Tab</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-table(.*)', page)|safe }}><a class="nav-link" href="components-table.html">Table</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-user(.*)', page)|safe }}><a class="nav-link" href="components-user.html">User</a></li>
|
||||
<li{{ ' class="active"'|is_active('^components-wizard(.*)', page)|safe }}><a class="nav-link beep beep-sidebar" href="components-wizard.html">Wizard</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^forms-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>Forms</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li{{ ' class="active"'|is_active('^forms-advanced(.*)', page)|safe }}><a class="nav-link" href="forms-advanced-form.html">Advanced Form</a></li>
|
||||
<li{{ ' class="active"'|is_active('^forms-editor(.*)', page)|safe }}><a class="nav-link" href="forms-editor.html">Editor</a></li>
|
||||
<li{{ ' class="active"'|is_active('^forms-validation(.*)', page)|safe }}><a class="nav-link" href="forms-validation.html">Validation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^gmaps-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-map-marker-alt"></i> <span>Google Maps</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li{{ ' class="active"'|is_active('^gmaps-advanced-route(.*)', page)|safe }}><a href="gmaps-advanced-route.html">Advanced Route</a></li>
|
||||
<li{{ ' class="active"'|is_active('^gmaps-draggable-marker(.*)', page)|safe }}><a href="gmaps-draggable-marker.html">Draggable Marker</a></li>
|
||||
<li{{ ' class="active"'|is_active('^gmaps-geocoding.html(.*)', page)|safe }}><a href="gmaps-geocoding.html">Geocoding</a></li>
|
||||
<li{{ ' class="active"'|is_active('^gmaps-geolocation.html(.*)', page)|safe }}><a href="gmaps-geolocation.html">Geolocation</a></li>
|
||||
<li{{ ' class="active"'|is_active('^gmaps-marker.html(.*)', page)|safe }}><a href="gmaps-marker.html">Marker</a></li>
|
||||
<li{{ ' class="active"'|is_active('^gmaps-multiple-marker(.*)', page)|safe }}><a href="gmaps-multiple-marker.html">Multiple Marker</a></li>
|
||||
<li{{ ' class="active"'|is_active('^gmaps-route.html(.*)', page)|safe }}><a href="gmaps-route.html">Route</a></li>
|
||||
<li{{ ' class="active"'|is_active('^gmaps-simple.html(.*)', page)|safe }}><a href="gmaps-simple.html">Simple</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^modules-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>Modules</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li{{ ' class="active"'|is_active('^modules-calendar(.*)', page)|safe }}><a class="nav-link" href="modules-calendar.html">Calendar</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-chartjs(.*)', page)|safe }}><a class="nav-link" href="modules-chartjs.html">ChartJS</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-datatables(.*)', page)|safe }}><a class="nav-link" href="modules-datatables.html">DataTables</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-flag(.*)', page)|safe }}><a class="nav-link" href="modules-flag.html">Flag</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-font(.*)', page)|safe }}><a class="nav-link" href="modules-font-awesome.html">Font Awesome</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-ion(.*)', page)|safe }}><a class="nav-link" href="modules-ion-icons.html">Ion Icons</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-owl(.*)', page)|safe }}><a class="nav-link" href="modules-owl-carousel.html">Owl Carousel</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-sparkline(.*)', page)|safe }}><a class="nav-link" href="modules-sparkline.html">Sparkline</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-sweet(.*)', page)|safe }}><a class="nav-link" href="modules-sweet-alert.html">Sweet Alert</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-toastr(.*)', page)|safe }}><a class="nav-link" href="modules-toastr.html">Toastr</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-vector(.*)', page)|safe }}><a class="nav-link" href="modules-vector-map.html">Vector Map</a></li>
|
||||
<li{{ ' class="active"'|is_active('^modules-weather(.*)', page)|safe }}><a class="nav-link" href="modules-weather-icon.html">Weather Icon</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu-header">Pages</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^auth-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>Auth</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="auth-forgot-password.html">Forgot Password</a></li>
|
||||
<li><a href="auth-login.html">Login</a></li>
|
||||
<li><a href="auth-register.html">Register</a></li>
|
||||
<li><a href="auth-reset-password.html">Reset Password</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^errors-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>Errors</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li{{ ' class="active"'|is_active('^errors-503(.*)', page)|safe }}><a class="nav-link" href="errors-503.html">503</a></li>
|
||||
<li{{ ' class="active"'|is_active('^errors-403(.*)', page)|safe }}><a class="nav-link" href="errors-403.html">403</a></li>
|
||||
<li{{ ' class="active"'|is_active('^errors-404(.*)', page)|safe }}><a class="nav-link" href="errors-404.html">404</a></li>
|
||||
<li{{ ' class="active"'|is_active('^errors-500(.*)', page)|safe }}><a class="nav-link" href="errors-500.html">500</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^features-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-bicycle"></i> <span>Features</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li{{ ' class="active"'|is_active('^features-activities(.*)', page)|safe }}><a class="nav-link" href="features-activities.html">Activities</a></li>
|
||||
<li{{ ' class="active"'|is_active('^features-post-create(.*)', page)|safe }}><a class="nav-link" href="features-post-create.html">Post Create</a></li>
|
||||
<li{{ ' class="active"'|is_active('^features-posts(.*)', page)|safe }}><a class="nav-link" href="features-posts.html">Posts</a></li>
|
||||
<li{{ ' class="active"'|is_active('^features-profile(.*)', page)|safe }}><a class="nav-link" href="features-profile.html">Profile</a></li>
|
||||
<li{{ ' class="active"'|is_active('^features-settings(.*)', page)|safe }}><a class="nav-link" href="features-settings.html">Settings</a></li>
|
||||
<li{{ ' class="active"'|is_active('^features-setting-detail(.*)', page)|safe }}><a class="nav-link" href="features-setting-detail.html">Setting Detail</a></li>
|
||||
<li{{ ' class="active"'|is_active('^features-tickets(.*)', page)|safe }}><a class="nav-link" href="features-tickets.html">Tickets</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown{{ ' active'|is_active('^utilities-(.*)', page)|safe }}">
|
||||
<a href="#" class="nav-link has-dropdown"><i class="fas fa-ellipsis-h"></i> <span>Utilities</span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="utilities-contact.html">Contact</a></li>
|
||||
<li{{ ' class="active"'|is_active('^utilities-invoice(.*)', page)|safe }}><a class="nav-link" href="utilities-invoice.html">Invoice</a></li>
|
||||
<li><a href="utilities-subscribe.html">Subscribe</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li{{ ' class="active"'|is_active('^credits(.*)', page)|safe }}><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>Credits</span></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
|
||||
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
|
||||
<i class="fas fa-rocket"></i> Documentation
|
||||
</a>
|
||||
</div>
|
||||
50
pages/modules-calendar.html
Normal file
50
pages/modules-calendar.html
Normal file
@@ -0,0 +1,50 @@
|
||||
{% set title = 'Modules › Calendar' %}
|
||||
{% set page = 'modules-calendar.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/fullcalendar/dist/fullcalendar.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Calendar</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">Calendar</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Calendar</h2>
|
||||
<p class="section-lead">
|
||||
We use 'Full Calendar' made by @fullcalendar. You can check the full documentation <a href="https://fullcalendar.io/">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Calendar</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="fc-overflow">
|
||||
<div id="myEvent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/fullcalendar/dist/fullcalendar.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/modules-calendar.js"></script>
|
||||
{% endblock %}
|
||||
76
pages/modules-chartjs.html
Normal file
76
pages/modules-chartjs.html
Normal file
@@ -0,0 +1,76 @@
|
||||
{% set title = 'Modules › Chart.js' %}
|
||||
{% set page = 'modules-chartjs.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Chart.JS</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">Chart.js</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Chart.js</h2>
|
||||
<p class="section-lead">
|
||||
We use 'Chart.JS' made by @chartjs. You can check the full documentation <a href="http://www.chartjs.org/">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Line Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Bar Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myChart2"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Doughnut Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myChart3"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Pie Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myChart4"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/chart.js/dist/Chart.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/modules-chartjs.js"></script>
|
||||
{% endblock %}
|
||||
262
pages/modules-datatables.html
Normal file
262
pages/modules-datatables.html
Normal file
@@ -0,0 +1,262 @@
|
||||
{% set title = 'Modules › DataTables' %}
|
||||
{% set page = 'modules-datatables.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
|
||||
<link rel="stylesheet" href="node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>DataTables</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">DataTables</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">DataTables</h2>
|
||||
<p class="section-lead">
|
||||
We use 'DataTables' made by @SpryMedia. You can check the full documentation <a href="https://datatables.net/">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Basic DataTables</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="table-1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">
|
||||
#
|
||||
</th>
|
||||
<th>Task Name</th>
|
||||
<th>Progress</th>
|
||||
<th>Members</th>
|
||||
<th>Due Date</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
1
|
||||
</td>
|
||||
<td>Create a mobile app</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
|
||||
<div class="progress-bar bg-success" data-width="100%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Wildan Ahdian">
|
||||
</td>
|
||||
<td>2018-01-20</td>
|
||||
<td><div class="badge badge-success">Completed</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
2
|
||||
</td>
|
||||
<td>Redesign homepage</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="0%">
|
||||
<div class="progress-bar" data-width="0"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Nur Alpiana">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hariono Yusup">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Bagus Dwi Cahya">
|
||||
</td>
|
||||
<td>2018-04-10</td>
|
||||
<td><div class="badge badge-info">Todo</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
3
|
||||
</td>
|
||||
<td>Backup database</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="70%">
|
||||
<div class="progress-bar bg-warning" data-width="70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hasan Basri">
|
||||
</td>
|
||||
<td>2018-01-29</td>
|
||||
<td><div class="badge badge-warning">In Progress</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
4
|
||||
</td>
|
||||
<td>Input data</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
|
||||
<div class="progress-bar bg-success" data-width="100%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Isnap Kiswandi">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Yudi Nawawi">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Khaerul Anwar">
|
||||
</td>
|
||||
<td>2018-01-16</td>
|
||||
<td><div class="badge badge-success">Completed</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Advanced Table</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped" id="table-2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" data-checkbox-role="dad" class="custom-control-input" id="checkbox-all">
|
||||
<label for="checkbox-all" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</th>
|
||||
<th>Task Name</th>
|
||||
<th>Progress</th>
|
||||
<th>Members</th>
|
||||
<th>Due Date</th>
|
||||
<th>Status</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-1">
|
||||
<label for="checkbox-1" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Create a mobile app</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
|
||||
<div class="progress-bar bg-success" data-width="100%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Wildan Ahdian">
|
||||
</td>
|
||||
<td>2018-01-20</td>
|
||||
<td><div class="badge badge-success">Completed</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-2">
|
||||
<label for="checkbox-2" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Redesign homepage</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="0%">
|
||||
<div class="progress-bar" data-width="0"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Nur Alpiana">
|
||||
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hariono Yusup">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Bagus Dwi Cahya">
|
||||
</td>
|
||||
<td>2018-04-10</td>
|
||||
<td><div class="badge badge-info">Todo</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-3">
|
||||
<label for="checkbox-3" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Backup database</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="70%">
|
||||
<div class="progress-bar bg-warning" data-width="70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Hasan Basri">
|
||||
</td>
|
||||
<td>2018-01-29</td>
|
||||
<td><div class="badge badge-warning">In Progress</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="custom-checkbox custom-control">
|
||||
<input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-4">
|
||||
<label for="checkbox-4" class="custom-control-label"> </label>
|
||||
</div>
|
||||
</td>
|
||||
<td>Input data</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress" data-height="4" data-toggle="tooltip" title="100%">
|
||||
<div class="progress-bar bg-success" data-width="100%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Rizal Fakhri">
|
||||
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Isnap Kiswandi">
|
||||
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Yudi Nawawi">
|
||||
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle" width="35" data-toggle="tooltip" title="Khaerul Anwar">
|
||||
</td>
|
||||
<td>2018-01-16</td>
|
||||
<td><div class="badge badge-success">Completed</div></td>
|
||||
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/datatables/media/js/jquery.dataTables.min.js"></script>
|
||||
<script src="node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
|
||||
<script src="node_modules/datatables.net-select-bs4/js/select.bootstrap4.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/modules-datatables.js"></script>
|
||||
{% endblock %}
|
||||
2250
pages/modules-flag.html
Normal file
2250
pages/modules-flag.html
Normal file
File diff suppressed because it is too large
Load Diff
46
pages/modules-font-awesome.html
Normal file
46
pages/modules-font-awesome.html
Normal file
@@ -0,0 +1,46 @@
|
||||
{% set title = 'Modules › Font Awesome' %}
|
||||
{% set page = 'modules-font-awesome.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Font Awesome</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">Font Awesome</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Font Awesome</h2>
|
||||
<p class="section-lead">
|
||||
For icons, we use 'Font Awesome 5' made by @fontawesome. You can check the full documentation <a href="http://fontawesome.com/">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Uh! Why?</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-primary alert-has-icon p-4">
|
||||
<div class="alert-icon"><i class="far fa-lightbulb"></i></div>
|
||||
<div class="alert-body">
|
||||
<div class="alert-title">Oh, no!</div>
|
||||
<p>Font Awesome 5 has many icons and we can not load it on this page, but you can still go to the official page to see the available icons.</p>
|
||||
<p>Font Awesome Free by @fontawesome</p>
|
||||
<p class="mt-3">
|
||||
<a href="https://fontawesome.com/icons" target="_blank" class="btn bg-white text-dark">Let's Go</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
774
pages/modules-ion-icons.html
Normal file
774
pages/modules-ion-icons.html
Normal file
@@ -0,0 +1,774 @@
|
||||
{% set title = 'Modules › Ion Icons' %}
|
||||
{% set page = 'modules-ion-icons.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/ionicons201/css/ionicons.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Ion Icons</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">Ion Icons</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Ion Icons</h2>
|
||||
<p class="section-lead">
|
||||
In addition to Font Awesome 5, we also use the <a href="http://ionicons.com/" target="_blank">Ion Icons</a> created by Ionic Framework to make it easier for you to use the icon.
|
||||
</p>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Ion Icons</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul id="icons" class="ionicons">
|
||||
<li class="ion ion-ionic" data-pack="default" data-tags="badass, framework, sexy, hawt"></li>
|
||||
<li class="ion ion-arrow-up-a" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-right-a" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-down-a" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-left-a" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-up-b" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-right-b" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-down-b" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-left-b" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-up-c" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-right-c" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-down-c" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-left-c" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-return-right" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-return-left" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-arrow-swap" data-pack="default" data-tags="switch, flip"></li>
|
||||
<li class="ion ion-arrow-shrink" data-pack="default" data-tags="pinch"></li>
|
||||
<li class="ion ion-arrow-expand" data-pack="default" data-tags="fullscreen"></li>
|
||||
<li class="ion ion-arrow-move" data-pack="default" data-tags="drag"></li>
|
||||
<li class="ion ion-arrow-resize" data-pack="default" data-tags="drag"></li>
|
||||
<li class="ion ion-chevron-up" data-pack="default" data-tags="arrow, up"></li>
|
||||
<li class="ion ion-chevron-right" data-pack="default" data-tags="arrow, right"></li>
|
||||
<li class="ion ion-chevron-down" data-pack="default" data-tags="arrow, down"></li>
|
||||
<li class="ion ion-chevron-left" data-pack="default" data-tags="arrow, left"></li>
|
||||
<li class="ion ion-navicon-round" data-pack="default" data-tags="menu, hamburger, slide menu"></li>
|
||||
<li class="ion ion-navicon" data-pack="default" data-tags="menu, hamburger, slide menu"></li>
|
||||
<li class="ion ion-drag" data-pack="default" data-tags="reorder, move, drag"></li>
|
||||
<li class="ion ion-log-in" data-pack="default" data-tags="sign in, "></li>
|
||||
<li class="ion ion-log-out" data-pack="default" data-tags="sign out"></li>
|
||||
<li class="ion ion-checkmark-round" data-pack="default" data-tags="complete, finished, success, on"></li>
|
||||
<li class="ion ion-checkmark" data-pack="default" data-tags="complete, finished, success, on"></li>
|
||||
<li class="ion ion-checkmark-circled" data-pack="default" data-tags="complete, finished, success, on"></li>
|
||||
<li class="ion ion-close-round" data-pack="default" data-tags="delete, trash, kill, x"></li>
|
||||
<li class="ion ion-close" data-pack="default" data-tags="delete, trash, kill, x"></li>
|
||||
<li class="ion ion-close-circled" data-pack="default" data-tags="delete, trash, kill, x"></li>
|
||||
<li class="ion ion-plus-round" data-pack="default" data-tags="add, include, new, invite, +"></li>
|
||||
<li class="ion ion-plus" data-pack="default" data-tags="add, include, new, invite, +"></li>
|
||||
<li class="ion ion-plus-circled" data-pack="default" data-tags="add, include, new, invite, +"></li>
|
||||
<li class="ion ion-minus-round" data-pack="default" data-tags="hide, remove, minimize, -"></li>
|
||||
<li class="ion ion-minus" data-pack="default" data-tags="hide, remove, minimize, -"></li>
|
||||
<li class="ion ion-minus-circled" data-pack="default" data-tags="hide, remove, minimize, -"></li>
|
||||
<li class="ion ion-information" data-pack="default" data-tags="help, more, tooltip"></li>
|
||||
<li class="ion ion-information-circled" data-pack="default" data-tags="help, more, tooltip"></li>
|
||||
<li class="ion ion-help" data-pack="default" data-tags="question, ?"></li>
|
||||
<li class="ion ion-help-circled" data-pack="default" data-tags="question, ?"></li>
|
||||
<li class="ion ion-backspace-outline" data-pack="default" data-tags="delete, remove, back"></li>
|
||||
<li class="ion ion-backspace" data-pack="default" data-tags="delete, remove, back"></li>
|
||||
<li class="ion ion-help-buoy" data-pack="default" data-tags="question, ?"></li>
|
||||
<li class="ion ion-asterisk" data-pack="default" data-tags="favorite, mark, star"></li>
|
||||
<li class="ion ion-alert" data-pack="default" data-tags="attention, warning, notice, !, exclamation"></li>
|
||||
<li class="ion ion-alert-circled" data-pack="default" data-tags="attention, warning, notice, !, exclamation"></li>
|
||||
<li class="ion ion-refresh" data-pack="default" data-tags="reload, renew"></li>
|
||||
<li class="ion ion-loop" data-pack="default" data-tags="refresh"></li>
|
||||
<li class="ion ion-shuffle" data-pack="default" data-tags="random"></li>
|
||||
<li class="ion ion-home" data-pack="default" data-tags="house"></li>
|
||||
<li class="ion ion-search" data-pack="default" data-tags="magnifying glass"></li>
|
||||
<li class="ion ion-flag" data-pack="default" data-tags="favorite, mark, star"></li>
|
||||
<li class="ion ion-star" data-pack="default" data-tags="favorite"></li>
|
||||
<li class="ion ion-heart" data-pack="default" data-tags="love"></li>
|
||||
<li class="ion ion-heart-broken" data-pack="default" data-tags="love"></li>
|
||||
<li class="ion ion-gear-a" data-pack="default" data-tags="settings, options, cog"></li>
|
||||
<li class="ion ion-gear-b" data-pack="default" data-tags="settings, options, cog"></li>
|
||||
<li class="ion ion-toggle-filled" data-pack="default" data-tags="settings, options, switch"></li>
|
||||
<li class="ion ion-toggle" data-pack="default" data-tags="settings, options, switch"></li>
|
||||
<li class="ion ion-settings" data-pack="default" data-tags="options, tools"></li>
|
||||
<li class="ion ion-wrench" data-pack="default" data-tags="settings, options, tools"></li>
|
||||
<li class="ion ion-hammer" data-pack="default" data-tags="settings, options, tools"></li>
|
||||
<li class="ion ion-edit" data-pack="default" data-tags="change, update, write, type, pencil"></li>
|
||||
<li class="ion ion-trash-a" data-pack="default" data-tags="delete, remove, dump"></li>
|
||||
<li class="ion ion-trash-b" data-pack="default" data-tags="delete, remove, dump"></li>
|
||||
<li class="ion ion-document" data-pack="default" data-tags="paper, file"></li>
|
||||
<li class="ion ion-document-text" data-pack="default" data-tags="paper, file"></li>
|
||||
<li class="ion ion-clipboard" data-pack="default" data-tags="write"></li>
|
||||
<li class="ion ion-scissors" data-pack="default" data-tags="cut"></li>
|
||||
<li class="ion ion-funnel" data-pack="default" data-tags="sort"></li>
|
||||
<li class="ion ion-bookmark" data-pack="default" data-tags="favorite, tag, save"></li>
|
||||
<li class="ion ion-email" data-pack="default" data-tags="snail, mail, inbox"></li>
|
||||
<li class="ion ion-email-unread" data-pack="default" data-tags="snail, mail, inbox"></li>
|
||||
<li class="ion ion-folder" data-pack="default" data-tags="snail, mail"></li>
|
||||
<li class="ion ion-filing" data-pack="default" data-tags="mail"></li>
|
||||
<li class="ion ion-archive" data-pack="default" data-tags="mail"></li>
|
||||
<li class="ion ion-reply" data-pack="default" data-tags="mail, undo"></li>
|
||||
<li class="ion ion-reply-all" data-pack="default" data-tags="mail"></li>
|
||||
<li class="ion ion-forward" data-pack="default" data-tags="mail, redo"></li>
|
||||
<li class="ion ion-share" data-pack="default" data-tags="outbound"></li>
|
||||
<li class="ion ion-paper-airplane" data-pack="default" data-tags="outbound, mail, letter, send"></li>
|
||||
<li class="ion ion-link" data-pack="default" data-tags="chain, anchor, href, attach"></li>
|
||||
<li class="ion ion-paperclip" data-pack="default" data-tags="attach"></li>
|
||||
<li class="ion ion-compose" data-pack="default" data-tags="write, compose, type"></li>
|
||||
<li class="ion ion-briefcase" data-pack="default" data-tags="store, organize"></li>
|
||||
<li class="ion ion-medkit" data-pack="default" data-tags="health"></li>
|
||||
<li class="ion ion-at" data-pack="default" data-tags="@"></li>
|
||||
<li class="ion ion-pound" data-pack="default" data-tags="hashtag, #"></li>
|
||||
<li class="ion ion-quote" data-pack="default" data-tags="chat, quotation"></li>
|
||||
<li class="ion ion-cloud" data-pack="default" data-tags="storage"></li>
|
||||
<li class="ion ion-upload" data-pack="default" data-tags="storage, cloud"></li>
|
||||
<li class="ion ion-more" data-pack="default" data-tags="circles"></li>
|
||||
<li class="ion ion-grid" data-pack="default" data-tags="menu"></li>
|
||||
<li class="ion ion-calendar" data-pack="default" data-tags="date, time, month, year"></li>
|
||||
<li class="ion ion-clock" data-pack="default" data-tags="time, watch, hours, minutes, seconds"></li>
|
||||
<li class="ion ion-compass" data-pack="default" data-tags="location, directions, navigation"></li>
|
||||
<li class="ion ion-pinpoint" data-pack="default" data-tags="gps, navigation"></li>
|
||||
<li class="ion ion-pin" data-pack="default" data-tags="gps, navigation"></li>
|
||||
<li class="ion ion-navigate" data-pack="default" data-tags="gps, location pin"></li>
|
||||
<li class="ion ion-location" data-pack="default" data-tags="gps, navigation, pin"></li>
|
||||
<li class="ion ion-map" data-pack="default" data-tags="gps, navigation, pin"></li>
|
||||
<li class="ion ion-lock-combination" data-pack="default" data-tags="padlock, security"></li>
|
||||
<li class="ion ion-locked" data-pack="default" data-tags="padlock, security"></li>
|
||||
<li class="ion ion-unlocked" data-pack="default" data-tags="padlock, security"></li>
|
||||
<li class="ion ion-key" data-pack="default" data-tags="access"></li>
|
||||
<li class="ion ion-arrow-graph-up-right" data-pack="default" data-tags="stats"></li>
|
||||
<li class="ion ion-arrow-graph-down-right" data-pack="default" data-tags="stats"></li>
|
||||
<li class="ion ion-arrow-graph-up-left" data-pack="default" data-tags="stats"></li>
|
||||
<li class="ion ion-arrow-graph-down-left" data-pack="default" data-tags="stats"></li>
|
||||
<li class="ion ion-stats-bars" data-pack="default" data-tags="data"></li>
|
||||
<li class="ion ion-connection-bars" data-pack="default" data-tags="data, stats"></li>
|
||||
<li class="ion ion-pie-graph" data-pack="default" data-tags="stats"></li>
|
||||
<li class="ion ion-chatbubble" data-pack="default" data-tags="talk"></li>
|
||||
<li class="ion ion-chatbubble-working" data-pack="default" data-tags="talk"></li>
|
||||
<li class="ion ion-chatbubbles" data-pack="default" data-tags="talk"></li>
|
||||
<li class="ion ion-chatbox" data-pack="default" data-tags="talk"></li>
|
||||
<li class="ion ion-chatbox-working" data-pack="default" data-tags="talk"></li>
|
||||
<li class="ion ion-chatboxes" data-pack="default" data-tags="talk"></li>
|
||||
<li class="ion ion-person" data-pack="default" data-tags="users, staff, head, human"></li>
|
||||
<li class="ion ion-person-add" data-pack="default" data-tags="users, staff, head, human, member, new"></li>
|
||||
<li class="ion ion-person-stalker" data-pack="default" data-tags="people, human, users, staff"></li>
|
||||
<li class="ion ion-woman" data-pack="default" data-tags="female, lady, girl, dudette"></li>
|
||||
<li class="ion ion-man" data-pack="default" data-tags="male, guy, boy, dude"></li>
|
||||
<li class="ion ion-female" data-pack="default" data-tags="lady, girl, dudette"></li>
|
||||
<li class="ion ion-male" data-pack="default" data-tags="male, guy, boy, dude"></li>
|
||||
<li class="ion ion-transgender" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-fork" data-pack="default" data-tags="food, drink, eat"></li>
|
||||
<li class="ion ion-knife" data-pack="default" data-tags="food, drink, eat"></li>
|
||||
<li class="ion ion-spoon" data-pack="default" data-tags="food, drink, eat"></li>
|
||||
<li class="ion ion-soup-can-outline" data-pack="default" data-tags="food, drink, eat"></li>
|
||||
<li class="ion ion-soup-can" data-pack="default" data-tags="food, drink, eat"></li>
|
||||
<li class="ion ion-beer" data-pack="default" data-tags="food, drink, eat"></li>
|
||||
<li class="ion ion-wineglass" data-pack="default" data-tags="food, drink, eat"></li>
|
||||
<li class="ion ion-coffee" data-pack="default" data-tags="food, drink, eat, caffeine"></li>
|
||||
<li class="ion ion-icecream" data-pack="default" data-tags="food, drink, eat"></li>
|
||||
<li class="ion ion-pizza" data-pack="default" data-tags="food, drink, eat"></li>
|
||||
<li class="ion ion-power" data-pack="default" data-tags="on, off"></li>
|
||||
<li class="ion ion-mouse" data-pack="default" data-tags="computer"></li>
|
||||
<li class="ion ion-battery-full" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-battery-half" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-battery-low" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-battery-empty" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-battery-charging" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-wifi" data-pack="default" data-tags="internet, connection"></li>
|
||||
<li class="ion ion-bluetooth" data-pack="default" data-tags="connection, cloud"></li>
|
||||
<li class="ion ion-calculator" data-pack="default" data-tags="math, arithmatic, numbers, addition, subtraction"></li>
|
||||
<li class="ion ion-camera" data-pack="default" data-tags="photo"></li>
|
||||
<li class="ion ion-eye" data-pack="default" data-tags="view, see, creeper"></li>
|
||||
<li class="ion ion-eye-disabled" data-pack="default" data-tags="view, see, creeper"></li>
|
||||
<li class="ion ion-flash" data-pack="default" data-tags="lightning, weather, whether"></li>
|
||||
<li class="ion ion-flash-off" data-pack="default" data-tags=""></li>
|
||||
<li class="ion ion-qr-scanner" data-pack="default" data-tags="reader"></li>
|
||||
<li class="ion ion-image" data-pack="default" data-tags="photo"></li>
|
||||
<li class="ion ion-images" data-pack="default" data-tags="photo"></li>
|
||||
<li class="ion ion-wand" data-pack="default" data-tags="images, levels, light, dark, settings"></li>
|
||||
<li class="ion ion-contrast" data-pack="default" data-tags="images, levels, light, dark, settings"></li>
|
||||
<li class="ion ion-aperture" data-pack="default" data-tags="images, levels, light, dark, settings"></li>
|
||||
<li class="ion ion-crop" data-pack="default" data-tags="images, levels, light, dark, settings"></li>
|
||||
<li class="ion ion-easel" data-pack="default" data-tags="images, art, create, color"></li>
|
||||
<li class="ion ion-paintbrush" data-pack="default" data-tags="images, art, create, color"></li>
|
||||
<li class="ion ion-paintbucket" data-pack="default" data-tags="images, art, create, color"></li>
|
||||
<li class="ion ion-monitor" data-pack="default" data-tags="thunderbolt, screen"></li>
|
||||
<li class="ion ion-laptop" data-pack="default" data-tags="macbook, apple, osx"></li>
|
||||
<li class="ion ion-ipad" data-pack="default" data-tags="tablet, mobile, apple, retina, device"></li>
|
||||
<li class="ion ion-iphone" data-pack="default" data-tags="smartphone, mobile, apple, retina, device"></li>
|
||||
<li class="ion ion-ipod" data-pack="default" data-tags="music, player, apple, retina, device"></li>
|
||||
<li class="ion ion-printer" data-pack="default" data-tags="paper"></li>
|
||||
<li class="ion ion-usb" data-pack="default" data-tags="digital, computer"></li>
|
||||
<li class="ion ion-outlet" data-pack="default" data-tags="digital, computer, electricity"></li>
|
||||
<li class="ion ion-bug" data-pack="default" data-tags="develop, program, hacker, error"></li>
|
||||
<li class="ion ion-code" data-pack="default" data-tags="develop, program, hacker"></li>
|
||||
<li class="ion ion-code-working" data-pack="default" data-tags="develop, program, hacker"></li>
|
||||
<li class="ion ion-code-download" data-pack="default" data-tags="develop, program, hacker"></li>
|
||||
<li class="ion ion-fork-repo" data-pack="default" data-tags="develop, program, hacker, github"></li>
|
||||
<li class="ion ion-network" data-pack="default" data-tags="develop, program, hacker, github"></li>
|
||||
<li class="ion ion-pull-request" data-pack="default" data-tags="develop, program, hacker, github"></li>
|
||||
<li class="ion ion-merge" data-pack="default" data-tags="develop, program, hacker, github"></li>
|
||||
<li class="ion ion-xbox" data-pack="default" data-tags="fun, games"></li>
|
||||
<li class="ion ion-playstation" data-pack="default" data-tags="fun, games"></li>
|
||||
<li class="ion ion-steam" data-pack="default" data-tags="fun, games"></li>
|
||||
<li class="ion ion-closed-captioning" data-pack="default" data-tags="movie, film, television"></li>
|
||||
<li class="ion ion-videocamera" data-pack="default" data-tags="movie, film, television"></li>
|
||||
<li class="ion ion-film-marker" data-pack="default" data-tags="film, cut, action"></li>
|
||||
<li class="ion ion-disc" data-pack="default" data-tags="cd, vinyl"></li>
|
||||
<li class="ion ion-headphone" data-pack="default" data-tags="music, earbuds, beats"></li>
|
||||
<li class="ion ion-music-note" data-pack="default" data-tags="songs"></li>
|
||||
<li class="ion ion-radio-waves" data-pack="default" data-tags="music, sound, speaker"></li>
|
||||
<li class="ion ion-speakerphone" data-pack="default" data-tags="sound, speaker, loud, amplify"></li>
|
||||
<li class="ion ion-mic-a" data-pack="default" data-tags="sound, talk, speaker"></li>
|
||||
<li class="ion ion-mic-b" data-pack="default" data-tags="sound, talk, speaker"></li>
|
||||
<li class="ion ion-mic-c" data-pack="default" data-tags="sound, talk, speaker"></li>
|
||||
<li class="ion ion-volume-high" data-pack="default" data-tags="sound, noise"></li>
|
||||
<li class="ion ion-volume-medium" data-pack="default" data-tags="sound"></li>
|
||||
<li class="ion ion-volume-low" data-pack="default" data-tags="sound"></li>
|
||||
<li class="ion ion-volume-mute" data-pack="default" data-tags="sound"></li>
|
||||
<li class="ion ion-levels" data-pack="default" data-tags="options, toggles, sound, mixer"></li>
|
||||
<li class="ion ion-play" data-pack="default" data-tags="music, watch, arrow, right"></li>
|
||||
<li class="ion ion-pause" data-pack="default" data-tags="music, break, hold, freeze"></li>
|
||||
<li class="ion ion-stop" data-pack="default" data-tags="music, square, hold, freeze"></li>
|
||||
<li class="ion ion-record" data-pack="default" data-tags="music, circle"></li>
|
||||
<li class="ion ion-skip-forward" data-pack="default" data-tags="music, next"></li>
|
||||
<li class="ion ion-skip-backward" data-pack="default" data-tags="music, previous"></li>
|
||||
<li class="ion ion-eject" data-pack="default" data-tags="music, dvd, remove"></li>
|
||||
<li class="ion ion-bag" data-pack="default" data-tags="shopping, price, cart, money, container, $"></li>
|
||||
<li class="ion ion-card" data-pack="default" data-tags="credit, price, debit, money, shopping, cash, dollars, $"></li>
|
||||
<li class="ion ion-cash" data-pack="default" data-tags="credit, price, debit, money, shopping, dollars, $"></li>
|
||||
<li class="ion ion-pricetag" data-pack="default" data-tags="credit, debit, money, shopping, cash, dollars, $"></li>
|
||||
<li class="ion ion-pricetags" data-pack="default" data-tags="credit, debit, money, shopping, cash, dollars, $"></li>
|
||||
<li class="ion ion-thumbsup" data-pack="default" data-tags="like, fun, yes"></li>
|
||||
<li class="ion ion-thumbsdown" data-pack="default" data-tags="dislike, boring, no"></li>
|
||||
<li class="ion ion-happy-outline" data-pack="default" data-tags="good, like, fun, yes"></li>
|
||||
<li class="ion ion-happy" data-pack="default" data-tags="good, like, fun, yes"></li>
|
||||
<li class="ion ion-sad-outline" data-pack="default" data-tags="cry, bad, no"></li>
|
||||
<li class="ion ion-sad" data-pack="default" data-tags="cry, bad, no"></li>
|
||||
<li class="ion ion-bowtie" data-pack="default" data-tags="tie, shirt, dress, clothing"></li>
|
||||
<li class="ion ion-tshirt-outline" data-pack="default" data-tags="tie, shirt, dress, clothing"></li>
|
||||
<li class="ion ion-tshirt" data-pack="default" data-tags="tie, shirt, dress, clothing"></li>
|
||||
<li class="ion ion-trophy" data-pack="default" data-tags="competition, compete, win, lose, award"></li>
|
||||
<li class="ion ion-podium" data-pack="default" data-tags="competition, compete, win, lose, award"></li>
|
||||
<li class="ion ion-ribbon-a" data-pack="default" data-tags="competition, compete, win, lose, award, trophy"></li>
|
||||
<li class="ion ion-ribbon-b" data-pack="default" data-tags="competition, compete, win, lose, award, trophy"></li>
|
||||
<li class="ion ion-university" data-pack="default" data-tags="graduate, education, school, tassle"></li>
|
||||
<li class="ion ion-magnet" data-pack="default" data-tags="sticky, attraction"></li>
|
||||
<li class="ion ion-beaker" data-pack="default" data-tags="mixture, potion, flask"></li>
|
||||
<li class="ion ion-erlenmeyer-flask" data-pack="default" data-tags="mixture, potion, beaker, potion"></li>
|
||||
<li class="ion ion-egg" data-pack="default" data-tags="birth, twitter, bird, baby"></li>
|
||||
<li class="ion ion-earth" data-pack="default" data-tags="nature, globe, home, planet"></li>
|
||||
<li class="ion ion-planet" data-pack="default" data-tags="nature, globe, home, planet, space"></li>
|
||||
<li class="ion ion-lightbulb" data-pack="default" data-tags="idea, new, aha!"></li>
|
||||
<li class="ion ion-cube" data-pack="default" data-tags="box, square, container"></li>
|
||||
<li class="ion ion-leaf" data-pack="default" data-tags="green, recycle, plant, nature"></li>
|
||||
<li class="ion ion-waterdrop" data-pack="default" data-tags="nature, clean, recycle, fresh, wet, rain"></li>
|
||||
<li class="ion ion-flame" data-pack="default" data-tags="fire, hot, heat"></li>
|
||||
<li class="ion ion-fireball" data-pack="default" data-tags="hot, heat"></li>
|
||||
<li class="ion ion-bonfire" data-pack="default" data-tags="hot, heat"></li>
|
||||
<li class="ion ion-umbrella" data-pack="default" data-tags="wet, rain, dry, shelter"></li>
|
||||
<li class="ion ion-nuclear" data-pack="default" data-tags="danger, warning, hazard"></li>
|
||||
<li class="ion ion-no-smoking" data-pack="default" data-tags="danger, warning, cigarette, cancer"></li>
|
||||
<li class="ion ion-thermometer" data-pack="default" data-tags="hot, cold, heat, temperature, mercury"></li>
|
||||
<li class="ion ion-speedometer" data-pack="default" data-tags="travel, accelerate"></li>
|
||||
<li class="ion ion-model-s" data-pack="default" data-tags="navigation, car, drive, transportation, tesla, sexy"></li>
|
||||
<li class="ion ion-plane" data-pack="default" data-tags="fly, jet"></li>
|
||||
<li class="ion ion-jet" data-pack="default" data-tags="fly, plane"></li>
|
||||
<li class="ion ion-load-a" data-pack="default" data-tags="spinner, waiting, refresh"></li>
|
||||
<li class="ion ion-load-b" data-pack="default" data-tags="spinner, waiting, refresh"></li>
|
||||
<li class="ion ion-load-c" data-pack="default" data-tags="spinner, waiting, refresh"></li>
|
||||
<li class="ion ion-load-d" data-pack="default" data-tags="spinner, waiting, refresh"></li>
|
||||
|
||||
<li class="ion ion-ios-ionic-outline" data-pack="ios" data-tags="badass, framework, sexy"></li>
|
||||
<li class="ion ion-ios-arrow-back" data-pack="ios" data-tags="chevron, left"></li>
|
||||
<li class="ion ion-ios-arrow-forward" data-pack="ios" data-tags="chevron, right"></li>
|
||||
<li class="ion ion-ios-arrow-up" data-pack="ios" data-tags="chevron"></li>
|
||||
<li class="ion ion-ios-arrow-right" data-pack="ios" data-tags="chevron"></li>
|
||||
<li class="ion ion-ios-arrow-down" data-pack="ios" data-tags="chevron"></li>
|
||||
<li class="ion ion-ios-arrow-left" data-pack="ios" data-tags="chevron"></li>
|
||||
<li class="ion ion-ios-arrow-thin-up" data-pack="ios" data-tags="chevron"></li>
|
||||
<li class="ion ion-ios-arrow-thin-right" data-pack="ios" data-tags="chevron"></li>
|
||||
<li class="ion ion-ios-arrow-thin-down" data-pack="ios" data-tags="chevron"></li>
|
||||
<li class="ion ion-ios-arrow-thin-left" data-pack="ios" data-tags="chevron"></li>
|
||||
<li class="ion ion-ios-circle-filled" data-pack="ios" data-tags="checkmark, radio, dot, on, selected, button"></li>
|
||||
<li class="ion ion-ios-circle-outline" data-pack="ios" data-tags="checkmark, radio, dot, off, button"></li>
|
||||
<li class="ion ion-ios-checkmark-empty" data-pack="ios" data-tags="success, confirmed, on, finished, complete"></li>
|
||||
<li class="ion ion-ios-checkmark-outline" data-pack="ios" data-tags="success, confirmed, on, finished, complete"></li>
|
||||
<li class="ion ion-ios-checkmark" data-pack="ios" data-tags="success, confirmed, on, finished, complete"></li>
|
||||
<li class="ion ion-ios-plus-empty" data-pack="ios" data-tags="add, include, new, invite, +"></li>
|
||||
<li class="ion ion-ios-plus-outline" data-pack="ios" data-tags="add, include, new, invite, +"></li>
|
||||
<li class="ion ion-ios-plus" data-pack="ios" data-tags="add, include, new, invite, +"></li>
|
||||
<li class="ion ion-ios-close-empty" data-pack="ios" data-tags="delete, remove, trash, end, stop, x"></li>
|
||||
<li class="ion ion-ios-close-outline" data-pack="ios" data-tags="delete, remove, trash, end, stop, x"></li>
|
||||
<li class="ion ion-ios-close" data-pack="ios" data-tags="delete, remove, trash, end, stop, x"></li>
|
||||
<li class="ion ion-ios-minus-empty" data-pack="ios" data-tags="hide, remove, minimize, -"></li>
|
||||
<li class="ion ion-ios-minus-outline" data-pack="ios" data-tags="hide, remove, minimize, -"></li>
|
||||
<li class="ion ion-ios-minus" data-pack="ios" data-tags="hide, remove, minimize, -"></li>
|
||||
<li class="ion ion-ios-information-empty" data-pack="ios" data-tags="help, question"></li>
|
||||
<li class="ion ion-ios-information-outline" data-pack="ios" data-tags="help, question"></li>
|
||||
<li class="ion ion-ios-information" data-pack="ios" data-tags="help, question"></li>
|
||||
<li class="ion ion-ios-help-empty" data-pack="ios" data-tags="question, information, ?"></li>
|
||||
<li class="ion ion-ios-help-outline" data-pack="ios" data-tags="question, information, ?"></li>
|
||||
<li class="ion ion-ios-help" data-pack="ios" data-tags="question, information, ?"></li>
|
||||
<li class="ion ion-ios-search" data-pack="ios" data-tags="find, seek, look, magnifying glass"></li>
|
||||
<li class="ion ion-ios-search-strong" data-pack="ios" data-tags="find, seek, look, magnifying glass"></li>
|
||||
<li class="ion ion-ios-star" data-pack="ios" data-tags="favorite, rate"></li>
|
||||
<li class="ion ion-ios-star-half" data-pack="ios" data-tags="favorite, rate"></li>
|
||||
<li class="ion ion-ios-star-outline" data-pack="ios" data-tags="favorite, rate"></li>
|
||||
<li class="ion ion-ios-heart" data-pack="ios" data-tags="love"></li>
|
||||
<li class="ion ion-ios-heart-outline" data-pack="ios" data-tags="love"></li>
|
||||
<li class="ion ion-ios-more" data-pack="ios" data-tags="menu"></li>
|
||||
<li class="ion ion-ios-more-outline" data-pack="ios" data-tags="menu"></li>
|
||||
<li class="ion ion-ios-home" data-pack="ios" data-tags="house"></li>
|
||||
<li class="ion ion-ios-home-outline" data-pack="ios" data-tags="house"></li>
|
||||
<li class="ion ion-ios-cloud" data-pack="ios" data-tags="storage, weather, whether"></li>
|
||||
<li class="ion ion-ios-cloud-outline" data-pack="ios" data-tags="storage, weather, whether"></li>
|
||||
<li class="ion ion-ios-cloud-upload" data-pack="ios" data-tags="storage"></li>
|
||||
<li class="ion ion-ios-cloud-upload-outline" data-pack="ios" data-tags="storage"></li>
|
||||
<li class="ion ion-ios-cloud-download" data-pack="ios" data-tags="storage"></li>
|
||||
<li class="ion ion-ios-cloud-download-outline" data-pack="ios" data-tags="storage"></li>
|
||||
<li class="ion ion-ios-upload" data-pack="ios" data-tags="share, import"></li>
|
||||
<li class="ion ion-ios-upload-outline" data-pack="ios" data-tags="share, import"></li>
|
||||
<li class="ion ion-ios-download" data-pack="ios" data-tags="save, export"></li>
|
||||
<li class="ion ion-ios-download-outline" data-pack="ios" data-tags="save, export"></li>
|
||||
<li class="ion ion-ios-refresh" data-pack="ios" data-tags="reload, renew, reset"></li>
|
||||
<li class="ion ion-ios-refresh-outline" data-pack="ios" data-tags="reload, renew, reset"></li>
|
||||
<li class="ion ion-ios-refresh-empty" data-pack="ios" data-tags="reload, renew"></li>
|
||||
<li class="ion ion-ios-reload" data-pack="ios" data-tags="renew, reset"></li>
|
||||
<li class="ion ion-ios-loop-strong" data-pack="ios" data-tags="reload, renew, reset"></li>
|
||||
<li class="ion ion-ios-loop" data-pack="ios" data-tags="reload, renew, reset"></li>
|
||||
<li class="ion ion-ios-bookmarks" data-pack="ios" data-tags="favorite"></li>
|
||||
<li class="ion ion-ios-bookmarks-outline" data-pack="ios" data-tags="favorite"></li>
|
||||
<li class="ion ion-ios-book" data-pack="ios" data-tags="favorite, read, literature"></li>
|
||||
<li class="ion ion-ios-book-outline" data-pack="ios" data-tags="favorite, read, literature"></li>
|
||||
<li class="ion ion-ios-flag" data-pack="ios" data-tags="marker, favorite"></li>
|
||||
<li class="ion ion-ios-flag-outline" data-pack="ios" data-tags="marker, favorite"></li>
|
||||
<li class="ion ion-ios-glasses" data-pack="ios" data-tags="steve, reading, look, see"></li>
|
||||
<li class="ion ion-ios-glasses-outline" data-pack="ios" data-tags="steve, reading, look, see"></li>
|
||||
<li class="ion ion-ios-browsers" data-pack="ios" data-tags="square"></li>
|
||||
<li class="ion ion-ios-browsers-outline" data-pack="ios" data-tags="square"></li>
|
||||
<li class="ion ion-ios-at" data-pack="ios" data-tags="@"></li>
|
||||
<li class="ion ion-ios-at-outline" data-pack="ios" data-tags="@"></li>
|
||||
<li class="ion ion-ios-pricetag" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
|
||||
<li class="ion ion-ios-pricetag-outline" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
|
||||
<li class="ion ion-ios-pricetags" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
|
||||
<li class="ion ion-ios-pricetags-outline" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
|
||||
<li class="ion ion-ios-cart" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
|
||||
<li class="ion ion-ios-cart-outline" data-pack="ios" data-tags="shopping, money, items, commerce, $"></li>
|
||||
<li class="ion ion-ios-chatboxes" data-pack="ios" data-tags="talk"></li>
|
||||
<li class="ion ion-ios-chatboxes-outline" data-pack="ios" data-tags="talk"></li>
|
||||
<li class="ion ion-ios-chatbubble" data-pack="ios" data-tags="talk"></li>
|
||||
<li class="ion ion-ios-chatbubble-outline" data-pack="ios" data-tags="talk"></li>
|
||||
<li class="ion ion-ios-cog" data-pack="ios" data-tags="settings, gear, options"></li>
|
||||
<li class="ion ion-ios-cog-outline" data-pack="ios" data-tags="settings, gear, options"></li>
|
||||
<li class="ion ion-ios-gear" data-pack="ios" data-tags="cog, settings, options"></li>
|
||||
<li class="ion ion-ios-gear-outline" data-pack="ios" data-tags="cog, settings, options"></li>
|
||||
<li class="ion ion-ios-settings" data-pack="ios" data-tags="cog, settings, options"></li>
|
||||
<li class="ion ion-ios-settings-strong" data-pack="ios" data-tags="cog, settings, options"></li>
|
||||
<li class="ion ion-ios-toggle" data-pack="ios" data-tags="settings, options, switch"></li>
|
||||
<li class="ion ion-ios-toggle-outline" data-pack="ios" data-tags="settings, options, switch"></li>
|
||||
<li class="ion ion-ios-analytics" data-pack="ios" data-tags="metrics, track, data"></li>
|
||||
<li class="ion ion-ios-analytics-outline" data-pack="ios" data-tags="metrics, track, data"></li>
|
||||
<li class="ion ion-ios-pie" data-pack="ios" data-tags="cog, settings, options"></li>
|
||||
<li class="ion ion-ios-pie-outline" data-pack="ios" data-tags="cog, settings, options"></li>
|
||||
<li class="ion ion-ios-pulse" data-pack="ios" data-tags="live, hot, rate"></li>
|
||||
<li class="ion ion-ios-pulse-strong" data-pack="ios" data-tags="live, hot, rate"></li>
|
||||
<li class="ion ion-ios-filing" data-pack="ios" data-tags="archive"></li>
|
||||
<li class="ion ion-ios-filing-outline" data-pack="ios" data-tags="archive"></li>
|
||||
<li class="ion ion-ios-box" data-pack="ios" data-tags="archive"></li>
|
||||
<li class="ion ion-ios-box-outline" data-pack="ios" data-tags="archive"></li>
|
||||
<li class="ion ion-ios-compose" data-pack="ios" data-tags="write, type, create"></li>
|
||||
<li class="ion ion-ios-compose-outline" data-pack="ios" data-tags="write, type, create"></li>
|
||||
<li class="ion ion-ios-trash" data-pack="ios" data-tags="delete, remove, dispose, waste, basket, dump, kill"></li>
|
||||
<li class="ion ion-ios-trash-outline" data-pack="ios" data-tags="delete, remove, dispose, waste, basket, dump, kill"></li>
|
||||
<li class="ion ion-ios-copy" data-pack="ios" data-tags="duplicate, paper"></li>
|
||||
<li class="ion ion-ios-copy-outline" data-pack="ios" data-tags="duplicate, paper"></li>
|
||||
<li class="ion ion-ios-email" data-pack="ios" data-tags="snail, mail"></li>
|
||||
<li class="ion ion-ios-email-outline" data-pack="ios" data-tags="snail, mail"></li>
|
||||
<li class="ion ion-ios-undo" data-pack="ios" data-tags="reply"></li>
|
||||
<li class="ion ion-ios-undo-outline" data-pack="ios" data-tags="reply"></li>
|
||||
<li class="ion ion-ios-redo" data-pack="ios" data-tags="forward"></li>
|
||||
<li class="ion ion-ios-redo-outline" data-pack="ios" data-tags="forward"></li>
|
||||
<li class="ion ion-ios-paperplane" data-pack="ios" data-tags="send"></li>
|
||||
<li class="ion ion-ios-paperplane-outline" data-pack="ios" data-tags="send"></li>
|
||||
<li class="ion ion-ios-folder" data-pack="ios" data-tags="file"></li>
|
||||
<li class="ion ion-ios-folder-outline" data-pack="ios" data-tags="file"></li>
|
||||
<li class="ion ion-ios-paper" data-pack="ios" data-tags="feed, paper"></li>
|
||||
<li class="ion ion-ios-paper-outline" data-pack="ios" data-tags="feed, paper"></li>
|
||||
<li class="ion ion-ios-list" data-pack="ios" data-tags="todo, feed, paper"></li>
|
||||
<li class="ion ion-ios-list-outline" data-pack="ios" data-tags="todo, feed, paper"></li>
|
||||
<li class="ion ion-ios-world" data-pack="ios" data-tags="globe, earth"></li>
|
||||
<li class="ion ion-ios-world-outline" data-pack="ios" data-tags="globe, earth"></li>
|
||||
<li class="ion ion-ios-alarm" data-pack="ios" data-tags="wake, ring"></li>
|
||||
<li class="ion ion-ios-alarm-outline" data-pack="ios" data-tags="wake, ring"></li>
|
||||
<li class="ion ion-ios-speedometer" data-pack="ios" data-tags="speed, drive, level"></li>
|
||||
<li class="ion ion-ios-speedometer-outline" data-pack="ios" data-tags="speed, drive, level"></li>
|
||||
<li class="ion ion-ios-stopwatch" data-pack="ios" data-tags="time, speed"></li>
|
||||
<li class="ion ion-ios-stopwatch-outline" data-pack="ios" data-tags="time, speed"></li>
|
||||
<li class="ion ion-ios-timer" data-pack="ios" data-tags="cooking, alarm, buzz"></li>
|
||||
<li class="ion ion-ios-timer-outline" data-pack="ios" data-tags="cooking, alarm, buzz"></li>
|
||||
<li class="ion ion-ios-clock" data-pack="ios" data-tags="time, date, hours, minutes, seconds, watch"></li>
|
||||
<li class="ion ion-ios-clock-outline" data-pack="ios" data-tags="time, date, hours, minutes, seconds, watch"></li>
|
||||
<li class="ion ion-ios-time" data-pack="ios" data-tags="clock, watch, hour, minute, second"></li>
|
||||
<li class="ion ion-ios-time-outline" data-pack="ios" data-tags="clock, watch, hour, minute, second"></li>
|
||||
<li class="ion ion-ios-calendar" data-pack="ios" data-tags="date, time, month, year"></li>
|
||||
<li class="ion ion-ios-calendar-outline" data-pack="ios" data-tags="date, time, month, year"></li>
|
||||
<li class="ion ion-ios-photos" data-pack="ios" data-tags="images, stills, square"></li>
|
||||
<li class="ion ion-ios-photos-outline" data-pack="ios" data-tags="images, stills, square"></li>
|
||||
<li class="ion ion-ios-albums" data-pack="ios" data-tags="square, boxes, slides"></li>
|
||||
<li class="ion ion-ios-albums-outline" data-pack="ios" data-tags="square, boxes, slides"></li>
|
||||
<li class="ion ion-ios-camera" data-pack="ios" data-tags="picture"></li>
|
||||
<li class="ion ion-ios-camera-outline" data-pack="ios" data-tags="picture"></li>
|
||||
<li class="ion ion-ios-reverse-camera" data-pack="ios" data-tags="picture"></li>
|
||||
<li class="ion ion-ios-reverse-camera-outline" data-pack="ios" data-tags="picture"></li>
|
||||
<li class="ion ion-ios-eye" data-pack="ios" data-tags="view, see, exposed, look"></li>
|
||||
<li class="ion ion-ios-eye-outline" data-pack="ios" data-tags="view, see, exposed, look"></li>
|
||||
<li class="ion ion-ios-bolt" data-pack="ios" data-tags="flash, lightning"></li>
|
||||
<li class="ion ion-ios-bolt-outline" data-pack="ios" data-tags="flash, lightning"></li>
|
||||
<li class="ion ion-ios-color-wand" data-pack="ios" data-tags="camera, picture, edit, magic"></li>
|
||||
<li class="ion ion-ios-color-wand-outline" data-pack="ios" data-tags="camera, picture, edit, magic"></li>
|
||||
<li class="ion ion-ios-color-filter" data-pack="ios" data-tags="camera, picture"></li>
|
||||
<li class="ion ion-ios-color-filter-outline" data-pack="ios" data-tags="camera, picture"></li>
|
||||
<li class="ion ion-ios-grid-view" data-pack="ios" data-tags="camera, picture"></li>
|
||||
<li class="ion ion-ios-grid-view-outline" data-pack="ios" data-tags="camera, picture"></li>
|
||||
<li class="ion ion-ios-crop-strong" data-pack="ios" data-tags="camera, picture, edit"></li>
|
||||
<li class="ion ion-ios-crop" data-pack="ios" data-tags="camera, picture, edit"></li>
|
||||
<li class="ion ion-ios-barcode" data-pack="ios" data-tags="reader, camera"></li>
|
||||
<li class="ion ion-ios-barcode-outline" data-pack="ios" data-tags="reader, camera"></li>
|
||||
<li class="ion ion-ios-briefcase" data-pack="ios" data-tags="organize, folder"></li>
|
||||
<li class="ion ion-ios-briefcase-outline" data-pack="ios" data-tags="organize, folder"></li>
|
||||
<li class="ion ion-ios-medkit" data-pack="ios" data-tags="health, case, first aid, sick, disease"></li>
|
||||
<li class="ion ion-ios-medkit-outline" data-pack="ios" data-tags="health, case, first aid, sick, disease"></li>
|
||||
<li class="ion ion-ios-medical" data-pack="ios" data-tags="health, case, first aid, sick, disease"></li>
|
||||
<li class="ion ion-ios-medical-outline" data-pack="ios" data-tags="health, case, first aid, sick, disease"></li>
|
||||
<li class="ion ion-ios-infinite" data-pack="ios" data-tags="forever, loop"></li>
|
||||
<li class="ion ion-ios-infinite-outline" data-pack="ios" data-tags="forever, loop"></li>
|
||||
<li class="ion ion-ios-calculator" data-pack="ios" data-tags="math, arithmatic"></li>
|
||||
<li class="ion ion-ios-calculator-outline" data-pack="ios" data-tags="math, arithmatic"></li>
|
||||
<li class="ion ion-ios-keypad" data-pack="ios" data-tags="type, grid, circle"></li>
|
||||
<li class="ion ion-ios-keypad-outline" data-pack="ios" data-tags="type, grid, circle"></li>
|
||||
<li class="ion ion-ios-telephone" data-pack="ios" data-tags="oldschool, call"></li>
|
||||
<li class="ion ion-ios-telephone-outline" data-pack="ios" data-tags="oldschool, call"></li>
|
||||
<li class="ion ion-ios-drag" data-pack="ios" data-tags="reorder, move, drag"></li>
|
||||
<li class="ion ion-ios-location" data-pack="ios" data-tags="navigation, map, gps, pin"></li>
|
||||
<li class="ion ion-ios-location-outline" data-pack="ios" data-tags="navigation, map, gps, pin"></li>
|
||||
<li class="ion ion-ios-navigate" data-pack="ios" data-tags="location, map, gps, pin"></li>
|
||||
<li class="ion ion-ios-navigate-outline" data-pack="ios" data-tags="location, map, gps, pin"></li>
|
||||
<li class="ion ion-ios-locked" data-pack="ios" data-tags="security, padlock, safe"></li>
|
||||
<li class="ion ion-ios-locked-outline" data-pack="ios" data-tags="security, padlock, safe"></li>
|
||||
<li class="ion ion-ios-unlocked" data-pack="ios" data-tags="security, padlock, safe"></li>
|
||||
<li class="ion ion-ios-unlocked-outline" data-pack="ios" data-tags="security, padlock, safe"></li>
|
||||
<li class="ion ion-ios-monitor" data-pack="ios" data-tags="thunderbolt, display, screen"></li>
|
||||
<li class="ion ion-ios-monitor-outline" data-pack="ios" data-tags="thunderbolt, display, screen"></li>
|
||||
<li class="ion ion-ios-printer" data-pack="ios" data-tags="paper"></li>
|
||||
<li class="ion ion-ios-printer-outline" data-pack="ios" data-tags="paper"></li>
|
||||
<li class="ion ion-ios-game-controller-a" data-pack="ios" data-tags="gaming, nintendo, play"></li>
|
||||
<li class="ion ion-ios-game-controller-a-outline" data-pack="ios" data-tags="gaming, nintendo, play"></li>
|
||||
<li class="ion ion-ios-game-controller-b" data-pack="ios" data-tags="gaming, nintendo, play"></li>
|
||||
<li class="ion ion-ios-game-controller-b-outline" data-pack="ios" data-tags="gaming, nintendo, play"></li>
|
||||
<li class="ion ion-ios-americanfootball" data-pack="ios" data-tags="nfl, games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-americanfootball-outline" data-pack="ios" data-tags="nfl, games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-baseball" data-pack="ios" data-tags="mlb, games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-baseball-outline" data-pack="ios" data-tags="mlb, games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-basketball" data-pack="ios" data-tags="nba, games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-basketball-outline" data-pack="ios" data-tags="nba, games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-tennisball" data-pack="ios" data-tags="games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-tennisball-outline" data-pack="ios" data-tags="games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-football" data-pack="ios" data-tags="mls, soccer, games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-football-outline" data-pack="ios" data-tags="mls, soccer, games, sports, fun, play"></li>
|
||||
<li class="ion ion-ios-body" data-pack="ios" data-tags="person, users, staff, head, human"></li>
|
||||
<li class="ion ion-ios-body-outline" data-pack="ios" data-tags="person, users, staff, head, human"></li>
|
||||
<li class="ion ion-ios-person" data-pack="ios" data-tags="users, staff, head, human"></li>
|
||||
<li class="ion ion-ios-person-outline" data-pack="ios" data-tags="users, staff, head, human"></li>
|
||||
<li class="ion ion-ios-personadd" data-pack="ios" data-tags="users, staff, head, human, new, invite"></li>
|
||||
<li class="ion ion-ios-personadd-outline" data-pack="ios" data-tags="users, staff, head, human, new, invite"></li>
|
||||
<li class="ion ion-ios-people" data-pack="ios" data-tags="stalker, person, users, head, human"></li>
|
||||
<li class="ion ion-ios-people-outline" data-pack="ios" data-tags="stalker, person, users, head, human"></li>
|
||||
<li class="ion ion-ios-musical-notes" data-pack="ios" data-tags="sound, noise, listening, play"></li>
|
||||
<li class="ion ion-ios-musical-note" data-pack="ios" data-tags="sound, noise, listening, play"></li>
|
||||
<li class="ion ion-ios-bell" data-pack="ios" data-tags="right, noise, alarm, sound, music"></li>
|
||||
<li class="ion ion-ios-bell-outline" data-pack="ios" data-tags="right, noise, alarm, sound, music"></li>
|
||||
<li class="ion ion-ios-mic" data-pack="ios" data-tags="sound, noise, speaker, talk"></li>
|
||||
<li class="ion ion-ios-mic-outline" data-pack="ios" data-tags="sound, noise, speaker, talk"></li>
|
||||
<li class="ion ion-ios-mic-off" data-pack="ios" data-tags="sound, noise, speaker, talk"></li>
|
||||
<li class="ion ion-ios-volume-high" data-pack="ios" data-tags="sound, noise, listen, music"></li>
|
||||
<li class="ion ion-ios-volume-low" data-pack="ios" data-tags="sound, noise, listen, music"></li>
|
||||
<li class="ion ion-ios-play" data-pack="ios" data-tags="music, watch, arrow, right"></li>
|
||||
<li class="ion ion-ios-play-outline" data-pack="ios" data-tags="music, watch, arrow, right"></li>
|
||||
<li class="ion ion-ios-pause" data-pack="ios" data-tags="music, break, hold, freeze"></li>
|
||||
<li class="ion ion-ios-pause-outline" data-pack="ios" data-tags="music, break, hold, freeze"></li>
|
||||
<li class="ion ion-ios-recording" data-pack="ios" data-tags="film, tape, voicemail"></li>
|
||||
<li class="ion ion-ios-recording-outline" data-pack="ios" data-tags="film, tape, voicemail"></li>
|
||||
<li class="ion ion-ios-fastforward" data-pack="ios" data-tags="next, skip, jump"></li>
|
||||
<li class="ion ion-ios-fastforward-outline" data-pack="ios" data-tags="next, skip, jump"></li>
|
||||
<li class="ion ion-ios-rewind" data-pack="ios" data-tags="music, previous, back"></li>
|
||||
<li class="ion ion-ios-rewind-outline" data-pack="ios" data-tags="music, previous, back"></li>
|
||||
<li class="ion ion-ios-skipbackward" data-pack="ios" data-tags="music, previous"></li>
|
||||
<li class="ion ion-ios-skipbackward-outline" data-pack="ios" data-tags="music, previous"></li>
|
||||
<li class="ion ion-ios-skipforward" data-pack="ios" data-tags="music, next"></li>
|
||||
<li class="ion ion-ios-skipforward-outline" data-pack="ios" data-tags="music, next"></li>
|
||||
<li class="ion ion-ios-shuffle-strong" data-pack="ios" data-tags="music, next"></li>
|
||||
<li class="ion ion-ios-shuffle" data-pack="ios" data-tags="music, next"></li>
|
||||
<li class="ion ion-ios-videocam" data-pack="ios" data-tags="film, movie, camera"></li>
|
||||
<li class="ion ion-ios-videocam-outline" data-pack="ios" data-tags="film, movie, camera"></li>
|
||||
<li class="ion ion-ios-film" data-pack="ios" data-tags="film, movie, camera"></li>
|
||||
<li class="ion ion-ios-film-outline" data-pack="ios" data-tags="film, movie, camera"></li>
|
||||
<li class="ion ion-ios-flask" data-pack="ios" data-tags="options, mixer, liquid"></li>
|
||||
<li class="ion ion-ios-flask-outline" data-pack="ios" data-tags="options, mixer, liquid"></li>
|
||||
<li class="ion ion-ios-lightbulb" data-pack="ios" data-tags="idea, new, bright, aha!"></li>
|
||||
<li class="ion ion-ios-lightbulb-outline" data-pack="ios" data-tags="idea, new, bright, aha!"></li>
|
||||
<li class="ion ion-ios-wineglass" data-pack="ios" data-tags="alcohol, drink, food, glass, drunk, cheers"></li>
|
||||
<li class="ion ion-ios-wineglass-outline" data-pack="ios" data-tags="alcohol, drink, food, glass, drunk, cheers"></li>
|
||||
<li class="ion ion-ios-pint" data-pack="ios" data-tags="alcohol, drink, food, beer, drunk, cheers"></li>
|
||||
<li class="ion ion-ios-pint-outline" data-pack="ios" data-tags="alcohol, drink, food, beer, drunk, cheers"></li>
|
||||
<li class="ion ion-ios-nutrition" data-pack="ios" data-tags="health, carrot, food"></li>
|
||||
<li class="ion ion-ios-nutrition-outline" data-pack="ios" data-tags="health, carrot, food"></li>
|
||||
<li class="ion ion-ios-flower" data-pack="ios" data-tags="nature, spring, leaf, garden"></li>
|
||||
<li class="ion ion-ios-flower-outline" data-pack="ios" data-tags="nature, spring, leaf, garden"></li>
|
||||
<li class="ion ion-ios-rose" data-pack="ios" data-tags="nature, spring, leaf, garden, flower"></li>
|
||||
<li class="ion ion-ios-rose-outline" data-pack="ios" data-tags="nature, spring, leaf, garden, flower"></li>
|
||||
<li class="ion ion-ios-paw" data-pack="ios" data-tags="nature, animal, pet, outdoor, track"></li>
|
||||
<li class="ion ion-ios-paw-outline" data-pack="ios" data-tags="nature, animal, pet, outdoor, track"></li>
|
||||
<li class="ion ion-ios-flame" data-pack="ios" data-tags="fire, hot, burn"></li>
|
||||
<li class="ion ion-ios-flame-outline" data-pack="ios" data-tags="fire, hot, burn"></li>
|
||||
<li class="ion ion-ios-sunny" data-pack="ios" data-tags="weather, whether, light, sky"></li>
|
||||
<li class="ion ion-ios-sunny-outline" data-pack="ios" data-tags="weather, whether, light, sky"></li>
|
||||
<li class="ion ion-ios-partlysunny" data-pack="ios" data-tags="light, weather, whether, cloudy"></li>
|
||||
<li class="ion ion-ios-partlysunny-outline" data-pack="ios" data-tags="light, weather, whether, cloudy"></li>
|
||||
<li class="ion ion-ios-cloudy" data-pack="ios" data-tags="weather, whether, overcast"></li>
|
||||
<li class="ion ion-ios-cloudy-outline" data-pack="ios" data-tags="weather, whether, overcast"></li>
|
||||
<li class="ion ion-ios-rainy" data-pack="ios" data-tags="whether, weather, water, cloud"></li>
|
||||
<li class="ion ion-ios-rainy-outline" data-pack="ios" data-tags="whether, weather, water, cloud"></li>
|
||||
<li class="ion ion-ios-thunderstorm" data-pack="ios" data-tags="whether, weather, sky, lightning, rain, cloudy, overcast, storm"></li>
|
||||
<li class="ion ion-ios-thunderstorm-outline" data-pack="ios" data-tags="whether, weather, sky, lightning, rain, cloudy, overcast, storm"></li>
|
||||
<li class="ion ion-ios-snowy" data-pack="ios" data-tags="cold, weather, whether, overcast"></li>
|
||||
<li class="ion ion-ios-moon" data-pack="ios" data-tags="sky, night, dark"></li>
|
||||
<li class="ion ion-ios-moon-outline" data-pack="ios" data-tags="sky, night, dark"></li>
|
||||
<li class="ion ion-ios-cloudy-night" data-pack="ios" data-tags="weather, whether, overcast"></li>
|
||||
<li class="ion ion-ios-cloudy-night-outline" data-pack="ios" data-tags="weather, whether, overcast"></li>
|
||||
|
||||
<li class="ion ion-android-arrow-up" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-forward" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-down" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-back" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-dropup" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-dropup-circle" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-dropright" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-dropright-circle" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-dropdown" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-dropdown-circle" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-dropleft" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-arrow-dropleft-circle" data-pack="android" data-tags="chevron, navigation"></li>
|
||||
<li class="ion ion-android-add" data-pack="android" data-tags="plus, include, invite"></li>
|
||||
<li class="ion ion-android-add-circle" data-pack="android" data-tags="plus, include, invite"></li>
|
||||
<li class="ion ion-android-remove" data-pack="android" data-tags="minus, subtract, delete"></li>
|
||||
<li class="ion ion-android-remove-circle" data-pack="android" data-tags="minus, subtract, delete"></li>
|
||||
<li class="ion ion-android-close" data-pack="android" data-tags="delete, remove"></li>
|
||||
<li class="ion ion-android-cancel" data-pack="android" data-tags="delete, remove"></li>
|
||||
<li class="ion ion-android-radio-button-off" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-radio-button-on" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-checkmark-circle" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-checkbox-outline-blank" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-checkbox-outline" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-checkbox-blank" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-checkbox" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-done" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-done-all" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-menu" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-more-horizontal" data-pack="android" data-tags="options, menu"></li>
|
||||
<li class="ion ion-android-more-vertical" data-pack="android" data-tags="options, menu"></li>
|
||||
<li class="ion ion-android-refresh" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-sync" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-wifi" data-pack="android" data-tags="internet,connection, bars"></li>
|
||||
<li class="ion ion-android-call" data-pack="android" data-tags="telephone"></li>
|
||||
<li class="ion ion-android-apps" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-settings" data-pack="android" data-tags="options"></li>
|
||||
<li class="ion ion-android-options" data-pack="android" data-tags="settings, mixer"></li>
|
||||
<li class="ion ion-android-funnel" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-search" data-pack="android" data-tags="magnifying glass"></li>
|
||||
<li class="ion ion-android-home" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-cloud-outline" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-cloud" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-download" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-upload" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-cloud-done" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-cloud-circle" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-favorite-outline" data-pack="android" data-tags="favorite, like, rate"></li>
|
||||
<li class="ion ion-android-favorite" data-pack="android" data-tags="favorite, like, rate"></li>
|
||||
<li class="ion ion-android-star-outline" data-pack="android" data-tags="favorite, like, rate"></li>
|
||||
<li class="ion ion-android-star-half" data-pack="android" data-tags="favorite, like, rate"></li>
|
||||
<li class="ion ion-android-star" data-pack="android" data-tags="favorite, like, rate"></li>
|
||||
<li class="ion ion-android-calendar" data-pack="android" data-tags="clock"></li>
|
||||
<li class="ion ion-android-alarm-clock" data-pack="android" data-tags="clock"></li>
|
||||
<li class="ion ion-android-time" data-pack="android" data-tags="clock"></li>
|
||||
<li class="ion ion-android-stopwatch" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-watch" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-locate" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-navigate" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-pin" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-compass" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-map" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-walk" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-bicycle" data-pack="android" data-tags="move, bike, transportation, maps"></li>
|
||||
<li class="ion ion-android-car" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-bus" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-subway" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-train" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-boat" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-plane" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-restaurant" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-bar" data-pack="android" data-tags="wine, drink, food, dinner"></li>
|
||||
<li class="ion ion-android-cart" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-camera" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-image" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-film" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-color-palette" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-create" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-mail" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-drafts" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-send" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-archive" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-delete" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-attach" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-share" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-share-alt" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-bookmark" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-document" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-clipboard" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-list" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-folder-open" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-folder" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-print" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-open" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-exit" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-contract" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-expand" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-globe" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-chat" data-pack="android" data-tags="talk, text"></li>
|
||||
<li class="ion ion-android-textsms" data-pack="android" data-tags="talk, text"></li>
|
||||
<li class="ion ion-android-hangout" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-happy" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-sad" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-person" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-people" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-person-add" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-contact" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-contacts" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-playstore" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-lock" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-unlock" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-microphone" data-pack="android" data-tags="recorder, speak, noise, music, sound"></li>
|
||||
<li class="ion ion-android-microphone-off" data-pack="android" data-tags="recorder, speak, noise, music, sound, mute"></li>
|
||||
<li class="ion ion-android-notifications-none" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-notifications" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-notifications-off" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-volume-mute" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-volume-down" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-volume-up" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-volume-off" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-hand" data-pack="android" data-tags="stop"></li>
|
||||
<li class="ion ion-android-desktop" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-laptop" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-phone-portrait" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-phone-landscape" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-bulb" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-sunny" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-alert" data-pack="android" data-tags=""></li>
|
||||
<li class="ion ion-android-warning" data-pack="android" data-tags=""></li>
|
||||
|
||||
<li class="ion ion-social-twitter" data-pack="social" data-tags="follow, post, share"></li>
|
||||
<li class="ion ion-social-twitter-outline" data-pack="social" data-tags="follow, post, share"></li>
|
||||
<li class="ion ion-social-facebook" data-pack="social" data-tags="like, post, share"></li>
|
||||
<li class="ion ion-social-facebook-outline" data-pack="social" data-tags="like, post, share"></li>
|
||||
<li class="ion ion-social-googleplus" data-pack="social" data-tags="follow, post, share"></li>
|
||||
<li class="ion ion-social-googleplus-outline" data-pack="social" data-tags="follow, post, share"></li>
|
||||
<li class="ion ion-social-google" data-pack="social" data-tags="follow, post, share"></li>
|
||||
<li class="ion ion-social-google-outline" data-pack="social" data-tags="follow, post, share"></li>
|
||||
<li class="ion ion-social-dribbble" data-pack="social" data-tags="design"></li>
|
||||
<li class="ion ion-social-dribbble-outline" data-pack="social" data-tags="design"></li>
|
||||
<li class="ion ion-social-octocat" data-pack="social" data-tags="code, github, fork, merge, clone"></li>
|
||||
<li class="ion ion-social-github" data-pack="social" data-tags="code, fork, merge, clone"></li>
|
||||
<li class="ion ion-social-github-outline" data-pack="social" data-tags="code, fork, merge, clone"></li>
|
||||
<li class="ion ion-social-instagram" data-pack="social" data-tags="photo, camera, facebook"></li>
|
||||
<li class="ion ion-social-instagram-outline" data-pack="social" data-tags="photo, camera, facebook"></li>
|
||||
<li class="ion ion-social-whatsapp" data-pack="social" data-tags="text, sharing, private, facebook"></li>
|
||||
<li class="ion ion-social-whatsapp-outline" data-pack="social" data-tags="text, sharing, private, facebook"></li>
|
||||
<li class="ion ion-social-snapchat" data-pack="social" data-tags="photos, app"></li>
|
||||
<li class="ion ion-social-snapchat-outline" data-pack="social" data-tags="photos, app"></li>
|
||||
<li class="ion ion-social-foursquare" data-pack="social" data-tags="checkin"></li>
|
||||
<li class="ion ion-social-foursquare-outline" data-pack="social" data-tags="checkin"></li>
|
||||
<li class="ion ion-social-pinterest" data-pack="social" data-tags="social"></li>
|
||||
<li class="ion ion-social-pinterest-outline" data-pack="social" data-tags="social"></li>
|
||||
<li class="ion ion-social-rss" data-pack="social" data-tags="blogging"></li>
|
||||
<li class="ion ion-social-rss-outline" data-pack="social" data-tags="blogging"></li>
|
||||
<li class="ion ion-social-tumblr" data-pack="social" data-tags="blogging"></li>
|
||||
<li class="ion ion-social-tumblr-outline" data-pack="social" data-tags="blogging"></li>
|
||||
<li class="ion ion-social-wordpress" data-pack="social" data-tags="blogging"></li>
|
||||
<li class="ion ion-social-wordpress-outline" data-pack="social" data-tags="blogging"></li>
|
||||
<li class="ion ion-social-reddit" data-pack="social" data-tags="news, upvotes, karma"></li>
|
||||
<li class="ion ion-social-reddit-outline" data-pack="social" data-tags="news, upvotes, karma"></li>
|
||||
<li class="ion ion-social-hackernews" data-pack="social" data-tags="discuss, upvotes, karma"></li>
|
||||
<li class="ion ion-social-hackernews-outline" data-pack="social" data-tags="discuss, upvotes, karma"></li>
|
||||
<li class="ion ion-social-designernews" data-pack="social" data-tags="design, post"></li>
|
||||
<li class="ion ion-social-designernews-outline" data-pack="social" data-tags="design, post"></li>
|
||||
<li class="ion ion-social-yahoo" data-pack="social" data-tags=""></li>
|
||||
<li class="ion ion-social-yahoo-outline" data-pack="social" data-tags=""></li>
|
||||
<li class="ion ion-social-buffer" data-pack="social" data-tags="share"></li>
|
||||
<li class="ion ion-social-buffer-outline" data-pack="social" data-tags="share"></li>
|
||||
<li class="ion ion-social-skype" data-pack="social" data-tags="call"></li>
|
||||
<li class="ion ion-social-skype-outline" data-pack="social" data-tags="call"></li>
|
||||
<li class="ion ion-social-linkedin" data-pack="social" data-tags="connect"></li>
|
||||
<li class="ion ion-social-linkedin-outline" data-pack="social" data-tags="connect"></li>
|
||||
<li class="ion ion-social-vimeo" data-pack="social" data-tags="video, watch, share, view"></li>
|
||||
<li class="ion ion-social-vimeo-outline" data-pack="social" data-tags="video, watch, share, view"></li>
|
||||
<li class="ion ion-social-twitch" data-pack="social" data-tags="gaming, games, live, streaming, video, watch, share, view"></li>
|
||||
<li class="ion ion-social-twitch-outline" data-pack="social" data-tags="gaming, games, live, streaming, video, watch, share, view"></li>
|
||||
<li class="ion ion-social-youtube" data-pack="social" data-tags="video, watch, share, view"></li>
|
||||
<li class="ion ion-social-youtube-outline" data-pack="social" data-tags="video, watch, share, view"></li>
|
||||
<li class="ion ion-social-dropbox" data-pack="social" data-tags="upload"></li>
|
||||
<li class="ion ion-social-dropbox-outline" data-pack="social" data-tags="upload"></li>
|
||||
<li class="ion ion-social-apple" data-pack="social" data-tags="mac, mobile"></li>
|
||||
<li class="ion ion-social-apple-outline" data-pack="social" data-tags="mac, mobile"></li>
|
||||
<li class="ion ion-social-android" data-pack="social" data-tags="mobile"></li>
|
||||
<li class="ion ion-social-android-outline" data-pack="social" data-tags="mobile"></li>
|
||||
<li class="ion ion-social-windows" data-pack="social" data-tags="pc"></li>
|
||||
<li class="ion ion-social-windows-outline" data-pack="social" data-tags="pc"></li>
|
||||
<li class="ion ion-social-html5" data-pack="social" data-tags="code, html, css, js, developer"></li>
|
||||
<li class="ion ion-social-html5-outline" data-pack="social" data-tags="code, html, css, js, developer"></li>
|
||||
<li class="ion ion-social-css3" data-pack="social" data-tags="code, html, css, js, developer"></li>
|
||||
<li class="ion ion-social-css3-outline" data-pack="social" data-tags="code, html, css, js, developer"></li>
|
||||
<li class="ion ion-social-javascript" data-pack="social" data-tags="code, html, css, js, developer"></li>
|
||||
<li class="ion ion-social-javascript-outline" data-pack="social" data-tags="code, html, css, js, developer"></li>
|
||||
<li class="ion ion-social-angular" data-pack="social" data-tags="code, mobile, js, angularjs, ionic"></li>
|
||||
<li class="ion ion-social-angular-outline" data-pack="social" data-tags="code, mobile, js, angularjs, ionic"></li>
|
||||
<li class="ion ion-social-nodejs" data-pack="social" data-tags="code, js, javascript, developer"></li>
|
||||
<li class="ion ion-social-sass" data-pack="social" data-tags="code, css"></li>
|
||||
<li class="ion ion-social-python" data-pack="social" data-tags="code"></li>
|
||||
<li class="ion ion-social-chrome" data-pack="social" data-tags="code, mobile, js, angularjs, ionic"></li>
|
||||
<li class="ion ion-social-chrome-outline" data-pack="social" data-tags="code, mobile, js, angularjs, ionic"></li>
|
||||
<li class="ion ion-social-codepen" data-pack="social" data-tags="testing, js, developer"></li>
|
||||
<li class="ion ion-social-codepen-outline" data-pack="social" data-tags="testing, js, developer"></li>
|
||||
<li class="ion ion-social-markdown" data-pack="social" data-tags="code, testing, text, developer"></li>
|
||||
<li class="ion ion-social-tux" data-pack="social" data-tags="code, linux, opensource"></li>
|
||||
<li class="ion ion-social-freebsd-devil" data-pack="social" data-tags="code, opensource, unix"></li>
|
||||
<li class="ion ion-social-usd" data-pack="social" data-tags="currency, trade, money, cash"></li>
|
||||
<li class="ion ion-social-usd-outline" data-pack="social" data-tags="currency, trade, money, cash"></li>
|
||||
<li class="ion ion-social-bitcoin" data-pack="social" data-tags="currency, trade, money"></li>
|
||||
<li class="ion ion-social-bitcoin-outline" data-pack="social" data-tags="currency, trade, money"></li>
|
||||
<li class="ion ion-social-yen" data-pack="social" data-tags="currency, trade, money, japanese"></li>
|
||||
<li class="ion ion-social-yen-outline" data-pack="social" data-tags="currency, trade, money, japanese"></li>
|
||||
<li class="ion ion-social-euro" data-pack="social" data-tags="currency, trade, money, europe"></li>
|
||||
<li class="ion ion-social-euro-outline" data-pack="social" data-tags="currency, trade, money, europe"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/modules-ion-icons.js"></script>
|
||||
{% endblock %}
|
||||
91
pages/modules-owl-carousel.html
Normal file
91
pages/modules-owl-carousel.html
Normal file
@@ -0,0 +1,91 @@
|
||||
{% set title = 'Modules › Owl Carousel' %}
|
||||
{% set page = 'modules-owl-carousel.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/owl.carousel/dist/assets/owl.carousel.min.css">
|
||||
<link rel="stylesheet" href="node_modules/owl.carousel/dist/assets/owl.theme.default.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Owl Carousel</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">Owl Carousel</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Owl Carousel</h2>
|
||||
<p class="section-lead">Display multiple images alternately within a few seconds.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Sliders</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="owl-carousel owl-theme slider" id="slider1">
|
||||
<div><img alt="image" src="assets/img/news/img01.jpg"></div>
|
||||
<div><img alt="image" src="assets/img/news/img08.jpg"></div>
|
||||
<div><img alt="image" src="assets/img/news/img10.jpg"></div>
|
||||
<div><img alt="image" src="assets/img/news/img09.jpg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Sliders (Caption)</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="owl-carousel owl-theme slider" id="slider2">
|
||||
<div><img alt="image" src="assets/img/news/img01.jpg">
|
||||
<div class="slider-caption">
|
||||
<div class="slider-title">Image 1</div>
|
||||
<div class="slider-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><img alt="image" src="assets/img/news/img08.jpg">
|
||||
<div class="slider-caption">
|
||||
<div class="slider-title">Image 2</div>
|
||||
<div class="slider-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><img alt="image" src="assets/img/news/img10.jpg">
|
||||
<div class="slider-caption">
|
||||
<div class="slider-title">Image 3</div>
|
||||
<div class="slider-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div><img alt="image" src="assets/img/news/img09.jpg">
|
||||
<div class="slider-caption">
|
||||
<div class="slider-title">Image 4</div>
|
||||
<div class="slider-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/modules-slider.js"></script>
|
||||
{% endblock %}
|
||||
78
pages/modules-sparkline.html
Normal file
78
pages/modules-sparkline.html
Normal file
@@ -0,0 +1,78 @@
|
||||
{% set title = 'Modules › Sparkline' %}
|
||||
{% set page = 'modules-sparkline.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Sparkline</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">Sparkline</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Sparkline</h2>
|
||||
<p class="section-lead">
|
||||
We use 'Sparkline' made by 'Gareth Watts'. You can check the full documentation <a href="https://omnipotent.net/jquery.sparkline/">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Line Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="sparkline-inline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Bar Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="sparkline-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Line Chart #2</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="sparkline-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Pie Chart</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="text-center">
|
||||
<div class="sparkline-pie d-inline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/jquery-sparkline/jquery.sparkline.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/modules-sparkline.js"></script>
|
||||
{% endblock %}
|
||||
100
pages/modules-sweet-alert.html
Normal file
100
pages/modules-sweet-alert.html
Normal file
@@ -0,0 +1,100 @@
|
||||
{% set title = 'Modules › Sweet Alert' %}
|
||||
{% set page = 'modules-toastr.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Sweet Alert</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">Sweet Alert</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Sweet Alert</h2>
|
||||
<p class="section-lead">
|
||||
We use 'Sweet Alert 2' made by 'Tristan Edwards'. You can check the full documentation <a href="https://sweetalert.js.org/">here</a>.
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Simple Sweet Alert</div>
|
||||
<button class="btn btn-primary" id="swal-1">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Success Message</div>
|
||||
<button class="btn btn-primary" id="swal-2">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Warning Message</div>
|
||||
<button class="btn btn-primary" id="swal-3">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Info Message</div>
|
||||
<button class="btn btn-primary" id="swal-4">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Error Message</div>
|
||||
<button class="btn btn-primary" id="swal-5">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Confirmation</div>
|
||||
<button class="btn btn-primary" id="swal-6">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Input Text</div>
|
||||
<button class="btn btn-primary" id="swal-7">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Auto Hide</div>
|
||||
<button class="btn btn-primary" id="swal-8">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/sweetalert/dist/sweetalert.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/modules-sweetalert.js"></script>
|
||||
{% endblock %}
|
||||
102
pages/modules-toastr.html
Normal file
102
pages/modules-toastr.html
Normal file
@@ -0,0 +1,102 @@
|
||||
{% set title = 'Modules › Toastr' %}
|
||||
{% set page = 'modules-toastr.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/izitoast/dist/css/iziToast.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Toastr</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">Toastr</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Toastr</h2>
|
||||
<p class="section-lead">
|
||||
We use 'iziToast' made by @Dolce. You can check the full documentation <a href="http://izitoast.marcelodolce.com/">here</a>.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Info Message</div>
|
||||
<button class="btn btn-primary" id="toastr-1">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Success Message</div>
|
||||
<button class="btn btn-primary" id="toastr-2">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Warning Message</div>
|
||||
<button class="btn btn-primary" id="toastr-3">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Error Message</div>
|
||||
<button class="btn btn-primary" id="toastr-4">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Toastr Right Bottom</div>
|
||||
<button class="btn btn-primary" id="toastr-5">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Toastr Center Bottom</div>
|
||||
<button class="btn btn-primary" id="toastr-6">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Toastr Left Bottom</div>
|
||||
<button class="btn btn-primary" id="toastr-7">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-2">Toastr Top Center</div>
|
||||
<button class="btn btn-primary" id="toastr-8">Launch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/izitoast/dist/js/iziToast.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/modules-toastr.js"></script>
|
||||
{% endblock %}
|
||||
88
pages/modules-vector-map.html
Normal file
88
pages/modules-vector-map.html
Normal file
@@ -0,0 +1,88 @@
|
||||
{% set title = 'Modules › Vector Map' %}
|
||||
{% set page = 'modules-vector-map.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block plugins_css %}
|
||||
<link rel="stylesheet" href="node_modules/izitoast/dist/css/iziToast.min.css">
|
||||
<link rel="stylesheet" href="node_modules/jqvmap/dist/jqvmap.min.css">
|
||||
<link rel="stylesheet" href="node_modules/flag-icon-css/css/flag-icon.min.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Vector Map</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
||||
<div class="breadcrumb-item">Vector Map</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<h2 class="section-title">Vector Map</h2>
|
||||
<p class="section-lead">
|
||||
We use the 'jQuery Vector Map Library' plugin to create vector maps. This plugin is created by @manifestinteractive
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Vector Map</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="visitorMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Vector Map With Flag Icon</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-primary">
|
||||
Click on the map below to change the icon
|
||||
</div>
|
||||
<div class="row align-items-center mb-4">
|
||||
<div class="col-6 text-right">
|
||||
<div class="font-weight-bold">You Choose: </div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<span class="flag-icon flag-icon-id flag-icon-shadow" id="flag-icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="visitorMap2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4>Indonesian Map</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="visitorMap3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="node_modules/izitoast/dist/js/iziToast.min.js"></script>
|
||||
<script src="node_modules/jqvmap/dist/jquery.vmap.min.js"></script>
|
||||
<script src="node_modules/jqvmap/dist/maps/jquery.vmap.world.js"></script>
|
||||
<script src="node_modules/jqvmap/dist/maps/jquery.vmap.indonesia.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/modules-vector-map.js"></script>
|
||||
{% endblock %}
|
||||
1600
pages/modules-weather-icon.html
Normal file
1600
pages/modules-weather-icon.html
Normal file
File diff suppressed because it is too large
Load Diff
79
pages/utilities-contact.html
Normal file
79
pages/utilities-contact.html
Normal file
@@ -0,0 +1,79 @@
|
||||
{% set title = 'Contact' %}
|
||||
{% set page = 'utilities-contact.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-10 offset-lg-1">
|
||||
<div class="login-brand">
|
||||
Stisla
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="row m-0">
|
||||
<div class="col-12 col-md-12 col-lg-5 p-0">
|
||||
<div class="card-header text-center"><h4>Contact Us</h4></div>
|
||||
<div class="card-body">
|
||||
<form method="POST">
|
||||
<div class="form-group floating-addon">
|
||||
<label>Name</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="far fa-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input id="name" type="text" class="form-control" name="name" autofocus placeholder="Name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group floating-addon">
|
||||
<label>Email</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input id="email" type="email" class="form-control" name="email" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Message</label>
|
||||
<textarea class="form-control" placeholder="Type your message" data-height="150"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-right">
|
||||
<button type="submit" class="btn btn-round btn-lg btn-primary">
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-12 col-lg-7 p-0">
|
||||
<div id="map" class="contact-map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simple-footer">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block plugins_js %}
|
||||
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB55Np3_WsZwUQ9NS7DP-HnneleZLYZDNw&sensor=true"></script>
|
||||
<script src="node_modules/gmaps/gmaps.min.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_js %}
|
||||
<script src="assets/js/page/utilities-contact.js"></script>
|
||||
{% endblock %}
|
||||
140
pages/utilities-invoice.html
Normal file
140
pages/utilities-invoice.html
Normal file
@@ -0,0 +1,140 @@
|
||||
{% set title = 'Invoice' %}
|
||||
{% set page = 'utilities-invoice.html' %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<h1>Invoice</h1>
|
||||
<div class="section-header-breadcrumb">
|
||||
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
||||
<div class="breadcrumb-item">Invoice</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-body">
|
||||
<div class="invoice">
|
||||
<div class="invoice-print">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="invoice-title">
|
||||
<h2>Invoice</h2>
|
||||
<div class="invoice-number">Order #12345</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<address>
|
||||
<strong>Billed To:</strong><br>
|
||||
Ujang Maman<br>
|
||||
1234 Main<br>
|
||||
Apt. 4B<br>
|
||||
Bogor Barat, Indonesia
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-right">
|
||||
<address>
|
||||
<strong>Shipped To:</strong><br>
|
||||
Muhamad Nauval Azhar<br>
|
||||
1234 Main<br>
|
||||
Apt. 4B<br>
|
||||
Bogor Barat, Indonesia
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<address>
|
||||
<strong>Payment Method:</strong><br>
|
||||
Visa ending **** 4242<br>
|
||||
ujang@maman.com
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-right">
|
||||
<address>
|
||||
<strong>Order Date:</strong><br>
|
||||
September 19, 2018<br><br>
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="section-title">Order Summary</div>
|
||||
<p class="section-lead">All items here cannot be deleted.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover table-md">
|
||||
<tr>
|
||||
<th data-width="40">#</th>
|
||||
<th>Item</th>
|
||||
<th class="text-center">Price</th>
|
||||
<th class="text-center">Quantity</th>
|
||||
<th class="text-right">Totals</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Mouse Wireless</td>
|
||||
<td class="text-center">$10.99</td>
|
||||
<td class="text-center">1</td>
|
||||
<td class="text-right">$10.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Keyboard Wireless</td>
|
||||
<td class="text-center">$20.00</td>
|
||||
<td class="text-center">3</td>
|
||||
<td class="text-right">$60.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Headphone Blitz TDR-3000</td>
|
||||
<td class="text-center">$600.00</td>
|
||||
<td class="text-center">1</td>
|
||||
<td class="text-right">$600.00</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="section-title">Payment Method</div>
|
||||
<p class="section-lead">The payment method that we provide is to make it easier for you to pay invoices.</p>
|
||||
<div class="images">
|
||||
<img src="assets/img/visa.png" alt="visa">
|
||||
<img src="assets/img/jcb.png" alt="jcb">
|
||||
<img src="assets/img/mastercard.png" alt="mastercard">
|
||||
<img src="assets/img/paypal.png" alt="paypal">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 text-right">
|
||||
<div class="invoice-detail-item">
|
||||
<div class="invoice-detail-name">Subtotal</div>
|
||||
<div class="invoice-detail-value">$670.99</div>
|
||||
</div>
|
||||
<div class="invoice-detail-item">
|
||||
<div class="invoice-detail-name">Shipping</div>
|
||||
<div class="invoice-detail-value">$15</div>
|
||||
</div>
|
||||
<hr class="mt-2 mb-2">
|
||||
<div class="invoice-detail-item">
|
||||
<div class="invoice-detail-name">Total</div>
|
||||
<div class="invoice-detail-value invoice-detail-value-lg">$685.99</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="text-md-right">
|
||||
<div class="float-lg-left mb-lg-0 mb-3">
|
||||
<button class="btn btn-primary btn-icon icon-left"><i class="fas fa-credit-card"></i> Process Payment</button>
|
||||
<button class="btn btn-danger btn-icon icon-left"><i class="fas fa-times"></i> Cancel</button>
|
||||
</div>
|
||||
<button class="btn btn-warning btn-icon icon-left"><i class="fas fa-print"></i> Print</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
46
pages/utilities-subscribe.html
Normal file
46
pages/utilities-subscribe.html
Normal file
@@ -0,0 +1,46 @@
|
||||
{% set title = 'Subscribe' %}
|
||||
{% set page = 'utilities-subscribe.html' %}
|
||||
{% set body = false %}
|
||||
{% extends 'layouts/master.html' %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
<div class="login-brand">
|
||||
Stisla
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h4>Subscribe Our Newsletters</h4></div>
|
||||
|
||||
<div class="card-body">
|
||||
<form method="POST">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input id="email" type="email" class="form-control" name="email" autofocus placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-center">
|
||||
<button type="submit" class="btn btn-lg btn-round btn-primary">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="simple-footer">
|
||||
Copyright © Stisla 2018
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user