definicao de layout
This commit is contained in:
22
public/assets/pug/components/bookmark.pug
Normal file
22
public/assets/pug/components/bookmark.pug
Normal file
@@ -0,0 +1,22 @@
|
||||
// Bookmark Start
|
||||
.bookmark
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)' data-container='body', data-bs-toggle='popover', data-placement='top', title='', data-original-title='Tables')
|
||||
i(data-feather='inbox')
|
||||
li
|
||||
a(href='javascript:void(0)' data-container='body', data-bs-toggle='popover', data-placement='top', title='', data-original-title='Chat')
|
||||
i(data-feather='message-square')
|
||||
li
|
||||
a(href='javascript:void(0)' data-container='body', data-bs-toggle='popover', data-placement='top', title='', data-original-title='Icons')
|
||||
i(data-feather='command')
|
||||
li
|
||||
a(href='javascript:void(0)' data-container='body', data-bs-toggle='popover', data-placement='top', title='', data-original-title='Learning')
|
||||
i(data-feather='layers')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.bookmark-search(data-feather='star')
|
||||
form.form-inline.search-form
|
||||
.form-group.form-control-search
|
||||
input(type='text', placeholder='Search..')
|
||||
// Bookmark Ends
|
||||
14
public/assets/pug/components/document-changelog-sidebar.pug
Normal file
14
public/assets/pug/components/document-changelog-sidebar.pug
Normal file
@@ -0,0 +1,14 @@
|
||||
// Page Sidebar Start
|
||||
- var status = (sidebar_open ? 'open' : '');
|
||||
|
||||
#myScrollspy.page-sidebar.custom-scrollbar(class=status)
|
||||
.logo-wrapper
|
||||
a(href='index.html')
|
||||
img(src='../assets/images/logo/logo.png', alt='')
|
||||
ul.document-menu.custom-scrollbar
|
||||
h4.mb-2.pb-2 Table of contents
|
||||
li.nav-item
|
||||
a.nav-link.menu-title.active(href='#section1', data-original-title='', title='')
|
||||
| Changelog
|
||||
|
||||
// Page Sidebar Ends
|
||||
31
public/assets/pug/components/document-header.pug
Normal file
31
public/assets/pug/components/document-header.pug
Normal file
@@ -0,0 +1,31 @@
|
||||
// Page Header Start
|
||||
- var status = (sidebar_open ? 'open' : '');
|
||||
|
||||
.page-main-header.document-header(class=status)
|
||||
.nav-right.col.document-right-nav
|
||||
nav.navbar.navbar-expand-md
|
||||
.row
|
||||
.col-12.d-flex.align-items-center
|
||||
.main-header-left.d-lg-none
|
||||
.logo-wrapper
|
||||
a.navbar-brand(href='index.html')
|
||||
img.img-fluid(src='../assets/images/logo/logo.png', alt='')
|
||||
.mobile-sidebar.ms-3(class=header_status)
|
||||
.media-body.text-end.switch-sm
|
||||
label.switch
|
||||
a(href='javascript:void(0)')
|
||||
i#sidebar-toggle(data-feather='align-left')
|
||||
button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#collapsibleNavbar')
|
||||
span
|
||||
i(data-feather='align-justify')
|
||||
#collapsibleNavbar.collapse.navbar-collapse
|
||||
ul.navbar-nav
|
||||
li.nav-item
|
||||
a.nav-link(href='../template/index.html', data-original-title='', title='') Preview
|
||||
li.nav-item
|
||||
a.nav-link(href='index.html', data-original-title='', title='') Docs
|
||||
li.nav-item
|
||||
a.nav-link(href='review.html', data-original-title='', title='') Reviews
|
||||
li.nav-item
|
||||
a.nav-link(href='change-log.html', data-original-title='', title='') Changelog
|
||||
// Page Header Ends
|
||||
13
public/assets/pug/components/document-review-sidebar.pug
Normal file
13
public/assets/pug/components/document-review-sidebar.pug
Normal file
@@ -0,0 +1,13 @@
|
||||
// Page Sidebar Start
|
||||
- var status = (sidebar_open ? 'open' : '');
|
||||
|
||||
#myScrollspy.page-sidebar.custom-scrollbar(class=status)
|
||||
.logo-wrapper
|
||||
a(href='index.html')
|
||||
img(src='../assets/images/logo/logo.png', alt='')
|
||||
ul.document-menu.custom-scrollbar
|
||||
h4.mb-2.pb-2 Table of contents
|
||||
li.nav-item
|
||||
a.nav-link.menu-title.active(href='#section1', data-original-title='', title='')
|
||||
| Review
|
||||
// Page Sidebar Ends
|
||||
132
public/assets/pug/components/document-sidebar.pug
Normal file
132
public/assets/pug/components/document-sidebar.pug
Normal file
@@ -0,0 +1,132 @@
|
||||
// Page Sidebar Start
|
||||
- var status = (sidebar_open ? 'open' : '');
|
||||
- var themify = true;
|
||||
|
||||
#myScrollspy.page-sidebar.document-sidebar.custom-scrollbar(class=status)
|
||||
.logo-wrapper
|
||||
a(href='index.html')
|
||||
img.img-fluid(src='../assets/images/logo/logo.png', alt='')
|
||||
ul.custom-scrollbar.document-menu
|
||||
li.nav-item
|
||||
a.nav-link.menu-title.active(href='#section1', data-original-title='', title='') Introduction
|
||||
li.nav-item
|
||||
a.nav-link.menu-title(href='#section2', data-original-title='', title='') Getting started
|
||||
li.nav-item
|
||||
a.nav-link.menu-title(href='#section3', data-original-title='', title='') Options
|
||||
li.nav-item
|
||||
a.nav-link.menu-title(href='#section4', data-original-title='', title='') Components
|
||||
ul.nav-submenu.set-padding
|
||||
li.nav-item
|
||||
a.nav-link(href='#section41', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Basic
|
||||
| UI Elements
|
||||
li.nav-item
|
||||
a.nav-link(href='#section42', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Advance
|
||||
| UI Elements
|
||||
li.nav-item
|
||||
a.nav-link(href='#section43', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Animations
|
||||
li.nav-item
|
||||
a.nav-link(href='#section44', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Icons
|
||||
li.nav-item
|
||||
a.nav-link(href='#section45', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Forms
|
||||
li.nav-item
|
||||
a.nav-link(href='#section46', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Tables
|
||||
li.nav-item
|
||||
a.nav-link(href='#section47', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Cards
|
||||
li.nav-item
|
||||
a.nav-link(href='#section48', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Timeline
|
||||
li.nav-item
|
||||
a.nav-link(href='#section49', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Charts
|
||||
li.nav-item
|
||||
a.nav-link(href='#section410', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| maps
|
||||
li.nav-item
|
||||
a.nav-link(href='#section411', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Editors
|
||||
li.nav-item
|
||||
a.nav-link.menu-title(href='#section5', data-original-title='', title='') Apps
|
||||
ul.nav-submenu.set-padding
|
||||
li.nav-item
|
||||
a.nav-link(href='#section51', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Users
|
||||
li.nav-item
|
||||
a.nav-link(href='#section52', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Calenders
|
||||
li.nav-item
|
||||
a.nav-link(href='#section53', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Galllery
|
||||
li.nav-item
|
||||
a.nav-link(href='#section54', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Email
|
||||
li.nav-item
|
||||
a.nav-link(href='#section55', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Blog
|
||||
li.nav-item
|
||||
a.nav-link(href='#section56', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Chat
|
||||
li.nav-item
|
||||
a.nav-link(href='#section57', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Support Ticket
|
||||
li.nav-item
|
||||
a.nav-link(href='#section58', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| To-Do
|
||||
li.nav-item
|
||||
a.nav-link(href='#section59', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Landing Page
|
||||
li.nav-item
|
||||
a.nav-link(href='#section510', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Ecommerce
|
||||
li.nav-item
|
||||
a.nav-link(href='#section511', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Pricing
|
||||
li.nav-item
|
||||
a.nav-link.menu-title(href='#section6', data-original-title='', title='') Builder
|
||||
ul.nav-submenu.set-padding
|
||||
li.nav-item
|
||||
a.nav-link(href='#section61', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Page
|
||||
| builder
|
||||
li.nav-item
|
||||
a.nav-link(href='#section62', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Form
|
||||
| Builder
|
||||
li.nav-item
|
||||
a.nav-link(href='#section63', data-original-title='', title='')
|
||||
i.fa.fa-angle-right.pull-left
|
||||
| Button builder
|
||||
li.nav-item
|
||||
a.nav-link.menu-title(href='#section7', data-original-title='', title='') Credits
|
||||
|
||||
// Page Sidebar Ends
|
||||
510
public/assets/pug/components/footer-files.pug
Normal file
510
public/assets/pug/components/footer-files.pug
Normal file
@@ -0,0 +1,510 @@
|
||||
|
||||
// latest jquery
|
||||
script(src='../assets/js/jquery-3.5.1.min.js')
|
||||
// feather icon js
|
||||
script(src='../assets/js/icons/feather-icon/feather.min.js')
|
||||
script(src='../assets/js/icons/feather-icon/feather-icon.js')
|
||||
// Sidebar jquery
|
||||
script(src='../assets/js/sidebar-menu.js')
|
||||
script(src='../assets/js/config.js')
|
||||
|
||||
// Bootstrap js
|
||||
script(src='../assets/js/bootstrap/popper.min.js')
|
||||
script(src='../assets/js/bootstrap/bootstrap.min.js')
|
||||
|
||||
|
||||
// Plugins JS start
|
||||
if bootstrap_bundle
|
||||
script(src='../assets/js/bootstrap_bundle.js')
|
||||
if ckeditor
|
||||
script(src='../assets/js/editor/ckeditor/ckeditor.js')
|
||||
script(src='../assets/js/editor/ckeditor/adapters/jquery.js')
|
||||
if page_ckeditor
|
||||
script(src='../assets/js/editor/ckeditor/styles.js')
|
||||
script(src='../assets/js/editor/ckeditor/ckeditor.custom.js')
|
||||
if isotope
|
||||
script(src='../assets/js/isotope.pkgd.js')
|
||||
if jquery_ui
|
||||
script(src='../assets/js/jquery.ui.min.js')
|
||||
if bookmark_page
|
||||
script(src='../assets/js/bookmark/jquery.validate.min.js')
|
||||
script(src='../assets/js/bookmark/custom.js')
|
||||
if aos
|
||||
script(src='../assets/js/animation/aos/aos.js')
|
||||
if page_aos
|
||||
script(src='../assets/js/animation/aos/aos-init.js')
|
||||
if tilt
|
||||
script(src='../assets/js/animation/tilt/tilt.jquery.js')
|
||||
if page_tilt
|
||||
script(src='../assets/js/animation/tilt/tilt-custom.js')
|
||||
|
||||
if page_animate
|
||||
script(src='../assets/js/animation/animate-custom.js')
|
||||
|
||||
if button_builder
|
||||
script(src='../assets/js/button-builder/colorpicker.js')
|
||||
script(src='../assets/js/button-builder/clipboard.min.js')
|
||||
script(src='../assets/js/button-builder/generator.js')
|
||||
script(src='../assets/js/button-builder/extend-1.0.js')
|
||||
|
||||
if jkanban
|
||||
script(src='../assets/js/jkanban/jkanban.js')
|
||||
script(src='../assets/js/jkanban/custom.js')
|
||||
|
||||
|
||||
if dragable_ui
|
||||
script(src='../assets/js/jquery.ui.min.js')
|
||||
|
||||
if calendar
|
||||
script(src="../assets/js/calendar/tui-code-snippet.min.js")
|
||||
script(src="../assets/js/calendar/tui-time-picker.min.js")
|
||||
script(src="../assets/js/calendar/tui-date-picker.min.js")
|
||||
script(src="../assets/js/calendar/moment.min.js")
|
||||
script(src="../assets/js/calendar/chance.min.js")
|
||||
script(src="../assets/js/calendar/tui-calendar.js")
|
||||
script(src="../assets/js/calendar/calendars.js")
|
||||
script(src="../assets/js/calendar/schedules.js")
|
||||
|
||||
if calendar_basic
|
||||
script(src="../assets/js/calendar/app.js")
|
||||
|
||||
if calendar_init
|
||||
script(src="../assets/js/calendar/inital.js")
|
||||
|
||||
if chartjs
|
||||
script(src='../assets/js/chart/chartjs/chart.min.js')
|
||||
if chartist
|
||||
script(src='../assets/js/chart/chartist/chartist.js')
|
||||
script(src='../assets/js/chart/chartist/chartist-plugin-tooltip.js')
|
||||
if page_chartist
|
||||
script(src='../assets/js/chart/chartist/chartist-custom.js')
|
||||
if morrischart
|
||||
script(src='../assets/js/chart/morris-chart/raphael.js')
|
||||
script(src='../assets/js/chart/morris-chart/morris.js')
|
||||
script(src='../assets/js/chart/morris-chart/prettify.min.js')
|
||||
script(src='../assets/js/chart/morris-chart/morris.min.js')
|
||||
if page_chartjs
|
||||
script(src='../assets/js/chart/chartjs/chart.custom.js')
|
||||
if flotchart
|
||||
script(src='../assets/js/chart/flot-chart/excanvas.js')
|
||||
script(src='../assets/js/chart/flot-chart/jquery.flot.js')
|
||||
script(src='../assets/js/chart/flot-chart/jquery.flot.time.js')
|
||||
script(src='../assets/js/chart/flot-chart/jquery.flot.categories.js')
|
||||
script(src='../assets/js/chart/flot-chart/jquery.flot.stack.js')
|
||||
script(src='../assets/js/chart/flot-chart/jquery.flot.pie.js')
|
||||
script(src='../assets/js/chart/flot-chart/jquery.flot.symbol.js')
|
||||
if page_flotchart
|
||||
script(src='../assets/js/chart/flot-chart/flot-script.js')
|
||||
if googlechart
|
||||
script(src='../assets/js/chart/google/google-chart-loader.js')
|
||||
if page_googlechart
|
||||
script(src='../assets/js/chart/google/google-chart.js')
|
||||
if knobchart
|
||||
script(src='../assets/js/chart/knob/knob.min.js')
|
||||
if page_knobchart
|
||||
script(src='../assets/js/chart/knob/knob-chart.js')
|
||||
if page_morrischart
|
||||
script(src='../assets/js/chart/morris-chart/morris-script.js')
|
||||
if peitychart
|
||||
script(src='../assets/js/chart/peity-chart/peity.jquery.js')
|
||||
if page_peitychart
|
||||
script(src='../assets/js/chart/peity-chart/peity-custom.js')
|
||||
if sparkline
|
||||
script(src='../assets/js/chart/sparkline/sparkline.js')
|
||||
if page_sparkline
|
||||
script(src='../assets/js/chart/sparkline/sparkline-script.js')
|
||||
if apex_widget
|
||||
script(src='../assets/js/chart/apex-chart/moment.min.js')
|
||||
if apex
|
||||
script(src='../assets/js/chart/apex-chart/apex-chart.js')
|
||||
script(src='../assets/js/chart/apex-chart/stock-prices.js')
|
||||
if page_apex
|
||||
script(src='../assets/js/chart/apex-chart/chart-custom.js')
|
||||
if todo
|
||||
script(src='../assets/js/todo/todo.js')
|
||||
if prism
|
||||
script(src='../assets/js/prism/prism.min.js')
|
||||
if clipboard
|
||||
script(src='../assets/js/clipboard/clipboard.min.js')
|
||||
if page_clipboard
|
||||
script(src='../assets/js/clipboard/clipboard-script.js')
|
||||
if counter
|
||||
script(src='../assets/js/counter/jquery.waypoints.min.js')
|
||||
script(src='../assets/js/counter/jquery.counterup.min.js')
|
||||
script(src='../assets/js/counter/counter-custom.js')
|
||||
if customcard
|
||||
script(src='../assets/js/custom-card/custom-card.js')
|
||||
if notify
|
||||
script(src='../assets/js/notify/bootstrap-notify.min.js')
|
||||
if icon_notify
|
||||
script(src='../assets/js/icons/icons-notify.js')
|
||||
if vector_map
|
||||
script(src='../assets/js/vector-map/jquery-jvectormap-2.0.2.min.js')
|
||||
script(src='../assets/js/vector-map/map/jquery-jvectormap-world-mill-en.js')
|
||||
script(src='../assets/js/vector-map/map/jquery-jvectormap-us-aea-en.js')
|
||||
script(src='../assets/js/vector-map/map/jquery-jvectormap-uk-mill-en.js')
|
||||
script(src='../assets/js/vector-map/map/jquery-jvectormap-au-mill.js')
|
||||
script(src='../assets/js/vector-map/map/jquery-jvectormap-chicago-mill-en.js')
|
||||
script(src='../assets/js/vector-map/map/jquery-jvectormap-in-mill.js')
|
||||
script(src='../assets/js/vector-map/map/jquery-jvectormap-asia-mill.js')
|
||||
if dashboard_default
|
||||
script(src='../assets/js/dashboard/default.js')
|
||||
script(src='../assets/js/notify/index.js')
|
||||
if datatable
|
||||
script(src='../assets/js/datatable/datatables/jquery.dataTables.min.js')
|
||||
if page_datatable
|
||||
script(src='../assets/js/datatable/datatables/datatable.custom.js')
|
||||
if datatable_extension
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.buttons.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/jszip.min.js')
|
||||
script(src="../assets/js/datatable/datatable-extension/buttons.colVis.min.js")
|
||||
script(src='../assets/js/datatable/datatable-extension/pdfmake.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/vfs_fonts.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.autoFill.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.select.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/buttons.bootstrap4.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/buttons.html5.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/buttons.print.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.bootstrap4.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.responsive.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/responsive.bootstrap4.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.keyTable.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.colReorder.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.fixedHeader.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.rowReorder.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/dataTables.scroller.min.js')
|
||||
script(src='../assets/js/datatable/datatable-extension/custom.js')
|
||||
if date_picker
|
||||
script(src='../assets/js/datepicker/date-picker/datepicker.js')
|
||||
script(src='../assets/js/datepicker/date-picker/datepicker.en.js')
|
||||
script(src='../assets/js/datepicker/date-picker/datepicker.custom.js')
|
||||
if date_rangepicker
|
||||
script(src='../assets/js/datepicker/daterange-picker/moment.min.js')
|
||||
script(src='../assets/js/datepicker/daterange-picker/daterangepicker.js')
|
||||
script(src='../assets/js/datepicker/daterange-picker/daterange-picker.custom.js')
|
||||
if date_time_picker
|
||||
script(src='../assets/js/datepicker/date-time-picker/moment.min.js')
|
||||
script(src='../assets/js/datepicker/date-time-picker/tempusdominus-bootstrap-4.min.js')
|
||||
script(src='../assets/js/datepicker/date-time-picker/datetimepicker.custom.js')
|
||||
if dragable
|
||||
script(src='../assets/js/dragable/sortable.js')
|
||||
script(src='../assets/js/dragable/sortable-custom.js')
|
||||
if ace_editor
|
||||
script(src='../assets/js/editor/ace-editor/ace.js')
|
||||
script(src='../assets/js/editor/ace-editor/ace-custom.js')
|
||||
script(src='../assets/js/editor/ace-editor/mode-css.js')
|
||||
script(src='../assets/js/editor/ace-editor/mode-html.js')
|
||||
script(src='../assets/js/editor/ace-editor/mode-javascript.js')
|
||||
script(src='../assets/js/editor/ace-editor/mode-php.js')
|
||||
script(src='../assets/js/editor/ace-editor/theme-monokai.js')
|
||||
script(src='../assets/js/editor/ace-editor/worker-css.js')
|
||||
script(src='../assets/js/editor/ace-editor/worker-html.js')
|
||||
script(src='../assets/js/editor/ace-editor/worker-javascript.js')
|
||||
script(src='../assets/js/editor/ace-editor/worker-php.js')
|
||||
if dropzone
|
||||
script(src='../assets/js/dropzone/dropzone.js')
|
||||
script(src='../assets/js/dropzone/dropzone-script.js')
|
||||
if simple_mde
|
||||
script(src='../assets/js/editor/simple-mde/simplemde.min.js')
|
||||
script(src='../assets/js/editor/simple-mde/simplemde.custom.js')
|
||||
if summernote
|
||||
script(src='../assets/js/editor/summernote/summernote.js')
|
||||
script(src='../assets/js/editor/summernote/summernote.custom.js')
|
||||
|
||||
if form_builder_2
|
||||
script(src='../assets/js/form-builder/form-builder-2/beautifyhtml.js')
|
||||
script(src='../assets/js/form-builder/form-builder-2/form-builder-2.js')
|
||||
if form_wizard
|
||||
script(src='../assets/js/form-wizard/form-wizard.js')
|
||||
if form_wizard_two
|
||||
script(src='../assets/js/form-wizard/form-wizard-two.js')
|
||||
if form_wizard_three
|
||||
script(src='../assets/js/form-wizard/form-wizard-three.js')
|
||||
script(src='../assets/js/form-wizard/jquery.backstretch.min.js')
|
||||
if form_wizard_four
|
||||
script(src='../assets/js/form-wizard/form-wizard-five.js')
|
||||
if page_feather_icon
|
||||
script(src='../assets/js/icons/feather-icon/feather-icon-clipart.js')
|
||||
if page_flag_icon
|
||||
script(src='../assets/js/icons/flag-icon-clipart.js')
|
||||
if page_icon
|
||||
script(src='../assets/js/icons/icon-clipart.js')
|
||||
if page_whether_icon
|
||||
script(src='../assets/js/icons/whether-icon-clipart.js')
|
||||
if image_cropper
|
||||
script(src='../assets/js/image-cropper/cropper.js')
|
||||
script(src='../assets/js/image-cropper/cropper-main.js')
|
||||
if jsgrid
|
||||
script(src='../assets/js/jsgrid/jsgrid.min.js')
|
||||
script(src='../assets/js/jsgrid/griddata.js')
|
||||
script(src='../assets/js/jsgrid/jsgrid.js')
|
||||
if page_notify
|
||||
script(src='../assets/js/notify/notify-script.js')
|
||||
if page_builder
|
||||
script(src='../assets/js/page-builder/jquery.grideditor.min.js')
|
||||
script(src='../assets/js/page-builder/page-builder-custom.js')
|
||||
if photo_swipe
|
||||
script(src='../assets/js/photoswipe/photoswipe.min.js')
|
||||
script(src='../assets/js/photoswipe/photoswipe-ui-default.min.js')
|
||||
script(src='../assets/js/photoswipe/photoswipe.js')
|
||||
if scrollreveal
|
||||
script(src='../assets/js/animation/scroll-reveal/scrollreveal.min.js')
|
||||
script(src='../assets/js/modernizr.js')
|
||||
if pages_crollreveal
|
||||
script(src='../assets/js/animation/scroll-reveal/reveal-custom.js')
|
||||
|
||||
if range_slider
|
||||
script(src='../assets/js/range-slider/ion.rangeSlider.min.js')
|
||||
if page_range_slider
|
||||
script(src='../assets/js/range-slider/rangeslider-script.js')
|
||||
if rating
|
||||
script(src='../assets/js/rating/jquery.barrating.js')
|
||||
script(src='../assets/js/rating/rating-script.js')
|
||||
if scrollable
|
||||
script(src='../assets/js/scrollable/perfect-scrollbar.min.js')
|
||||
script(src='../assets/js/scrollable/scrollable-custom.js')
|
||||
if sticky
|
||||
script(src='../assets/js/sticky/sticky.js')
|
||||
if sweetalert2
|
||||
script(src='../assets/js/sweet-alert/sweetalert.min.js')
|
||||
if page_sweetalert2
|
||||
script(src='../assets/js/sweet-alert/app.js')
|
||||
if timeline_1
|
||||
script(src='../assets/js/timeline/timeline-v-1/main.js')
|
||||
if timeline_2
|
||||
script(src='../assets/js/timeline/timeline-v-2/jquery.timeliny.min.js')
|
||||
script(src='../assets/js/timeline/timeline-v-2/timeline-v-2-custom.js')
|
||||
if time_picker
|
||||
script(src='../assets/js/time-picker/jquery-clockpicker.min.js')
|
||||
script(src='../assets/js/time-picker/highlight.min.js')
|
||||
script(src='../assets/js/time-picker/clockpicker.js')
|
||||
if touchspin
|
||||
script(src='../assets/js/touchspin/vendors.min.js')
|
||||
script(src='../assets/js/touchspin/touchspin.js')
|
||||
script(src='../assets/js/touchspin/input-groups.min.js')
|
||||
if owlcarousel
|
||||
script(src='../assets/js/owlcarousel/owl.carousel.js')
|
||||
if page_owlcarousel
|
||||
script(src='../assets/js/owlcarousel/owl-custom.js')
|
||||
if slick
|
||||
script(src='../assets/js/slick-slider/slick.min.js')
|
||||
script(src='../assets/js/slick-slider/slick-theme.js')
|
||||
if select2
|
||||
script(src='../assets/js/select2/select2.full.min.js')
|
||||
if page_select2
|
||||
script(src='../assets/js/select2/select2-custom.js')
|
||||
if tour
|
||||
script(src='../assets/js/tour/intro.js')
|
||||
script(src='../assets/js/tour/intro-init.js')
|
||||
if tree
|
||||
script(src='../assets/js/tree/jstree.min.js')
|
||||
script(src='../assets/js/tree/tree.js')
|
||||
if typeahead
|
||||
script(src='../assets/js/typeahead/handlebars.js')
|
||||
script(src='../assets/js/typeahead/typeahead.bundle.js')
|
||||
script(src='../assets/js/typeahead/typeahead.custom.js')
|
||||
if page_vector_map
|
||||
script(src='../assets/js/vector-map/map-vector.js')
|
||||
if chart_widget
|
||||
script(src='../assets/js/chart-widget.js')
|
||||
if comapct_menu
|
||||
script(src='../assets/js/comapct-menu.js')
|
||||
if compact_small_button
|
||||
script(src='../assets/js/compact-small-button.js')
|
||||
if countdown
|
||||
script(src='../assets/js/countdown.js')
|
||||
if dashboard_2
|
||||
script(src='../assets/js/dashboard/dashboard_2.js')
|
||||
if dashboard_3
|
||||
script(src='../assets/js/dashboard/dashboard_3.js')
|
||||
if dashboard_4
|
||||
script(src='../assets/js/dashboard/dashboard_4.js')
|
||||
if ecommerce
|
||||
script(src='../assets/js/ecommerce.js')
|
||||
if email_app
|
||||
script(src='../assets/js/email-app.js')
|
||||
if form_validation_custom
|
||||
script(src='../assets/js/form-validation-custom.js')
|
||||
if contact_page
|
||||
script(src='../assets/js/bookmark/jquery.validate.min.js')
|
||||
script(src='../assets/js/contacts/custom.js')
|
||||
if task_page
|
||||
script(src='../assets/js/task/custom.js')
|
||||
if fullscreen
|
||||
script(src='../assets/js/fullscreen.js')
|
||||
if general_widget
|
||||
script(src='../assets/js/general-widget.js')
|
||||
if height_equal
|
||||
script(src='../assets/js/height-equal.js')
|
||||
if page_masonry
|
||||
script(src='../assets/js/masonry-gallery.js')
|
||||
if modal_animated
|
||||
script(src='../assets/js/modal-animated.js')
|
||||
if modernizr
|
||||
script(src='../assets/js/modernizr.js')
|
||||
if popover_custom
|
||||
script(src='../assets/js/popover-custom.js')
|
||||
if print
|
||||
script(src='../assets/js/print.js')
|
||||
if product_list
|
||||
script(src='../assets/js/product-list-custom.js')
|
||||
if radial_chart_tooltip
|
||||
script(src='../assets/js/radial-chart-tooltip.js')
|
||||
if support_ticket_custom
|
||||
script(src='../assets/js/support-ticket-custom.js')
|
||||
if tooltip
|
||||
script(src='../assets/js/tooltip-init.js')
|
||||
if wow
|
||||
script(src='../assets/js/animation/wow/wow.min.js')
|
||||
if page_wow
|
||||
script(src='../assets/js/animation/wow/wow-init.js')
|
||||
if internationalization
|
||||
script(src='../assets/js/internationalization/language-picker.js')
|
||||
if map_js
|
||||
script(src='../assets/js/map-js/mapsjs-core.js')
|
||||
script(src='../assets/js/map-js/mapsjs-service.js')
|
||||
script(src='../assets/js/map-js/mapsjs-ui.js')
|
||||
script(src='../assets/js/map-js/mapsjs-mapevents.js')
|
||||
script(src='../assets/js/map-js/custom.js')
|
||||
if product_tab
|
||||
script(src='../assets/js/product-tab.js')
|
||||
if login
|
||||
script(src='../assets/js/login.js')
|
||||
if landing_sticky
|
||||
script(src='../assets/js/landing_sticky.js')
|
||||
script(src='../assets/js/landing.js')
|
||||
if jarallax_libs
|
||||
script(src='../assets/js/jarallax_libs/libs.min.js')
|
||||
if scrollpy_landing
|
||||
script(src='../assets/js/scrollpy_landing.js')
|
||||
|
||||
// Plugins JS Ends
|
||||
|
||||
|
||||
// Theme js
|
||||
script(src='../assets/js/script.js')
|
||||
if theme_customizer
|
||||
script(src='../assets/js/theme-customizer/customizer.js')
|
||||
if drilldown
|
||||
script(src='../assets/js/jquery.drilldown.js')
|
||||
if megamenu
|
||||
script(src='../assets/js/megamenu.js')
|
||||
|
||||
if form_builder_1
|
||||
script(src='../assets/js/form-builder/form-builder-1/require.js')
|
||||
script(src='../assets/js/form-builder/form-builder-1/main-built.js')
|
||||
|
||||
|
||||
|
||||
// login js
|
||||
|
||||
|
||||
|
||||
// Plugin used
|
||||
- var animate = false
|
||||
- var aos = false
|
||||
- var button_builder = false
|
||||
- var calendar = false
|
||||
- var chartist = false
|
||||
- var datatable_extension = false
|
||||
- var datatable = false
|
||||
- var date_picker = false
|
||||
- var date_rangepicker = false
|
||||
- var dropzone = false
|
||||
- var image_cropper = false
|
||||
- var jsgrid = false
|
||||
- var owlcarousel = false
|
||||
- var page_builder = false
|
||||
- var photo_swipe = false
|
||||
|
||||
- var prism = false
|
||||
- var range_slider = false
|
||||
- var rating = false
|
||||
- var scrollable = false
|
||||
- var select2 = false
|
||||
- var simple_mde = false
|
||||
- var sticky = false
|
||||
- var summernote = false
|
||||
- var svg_icon = false
|
||||
- var sweetalert2 = false
|
||||
- var time_picker = false
|
||||
- var todo = false
|
||||
- var tour = false
|
||||
- var tree = false
|
||||
- var vector_map = false
|
||||
|
||||
- var whether_icon = false
|
||||
- var page_aos = false
|
||||
- var scrollreveal = false
|
||||
- var page_scrollreveal = false
|
||||
- var tilt = false
|
||||
- var page_tilt = false
|
||||
- var wow = false
|
||||
- var page_wow = false
|
||||
- var page_animate = false
|
||||
- var page_chartist = false
|
||||
- var chartjs = false
|
||||
- var page_chartjs = false
|
||||
- var flotchart = false
|
||||
- var page_flotchart = false
|
||||
- var googlechart = false
|
||||
- var page_googlechart = false
|
||||
- var knobchart = false
|
||||
- var page_knobchart = false
|
||||
- var morrischart = false
|
||||
- var page_morrischart = false
|
||||
- var peitychart = false
|
||||
- var page_peitychart = false
|
||||
- var sparkline = false
|
||||
- var page_sparkline = false
|
||||
- var apex = false
|
||||
- var page_apex = false
|
||||
- var clipboard = false
|
||||
- var counter = false
|
||||
- var customcard = false
|
||||
- var dashboard_default = false
|
||||
- var date_time_picker = false
|
||||
- var dragable = false
|
||||
- var ace_editor = false
|
||||
- var form_builder_1 = false
|
||||
- var form_builder_2 = false
|
||||
- var form_wizard = false
|
||||
- var form_wizard_two = false
|
||||
- var form_wizard_three = false
|
||||
- var form_wizard_four = false
|
||||
- var page_feather_icon = false
|
||||
- var page_flag_icon = false
|
||||
- var page_icon = false
|
||||
- var page_whether_icon = false
|
||||
- var notify = false
|
||||
- var page_range_slider = false
|
||||
- var page_select2 = false
|
||||
- var page_sweetalert2 = false
|
||||
- var timeline_1 = false
|
||||
- var timeline_2 = false
|
||||
- var touchspin = false
|
||||
- var touchspin = false
|
||||
- var chart_widget = false
|
||||
- var chat_menu = false
|
||||
- var comapct_menu = false
|
||||
- var compact_small_button = false
|
||||
- var countdown = false
|
||||
- var ecommerce = false
|
||||
- var email_app = false
|
||||
- var form_validation_custom= false
|
||||
- var fullscreen = false
|
||||
- var general_widget = false
|
||||
- var height_equal = false
|
||||
- var isotope = false
|
||||
- var drilldown = false
|
||||
- var jquery_ui = false
|
||||
- var page_masonry = false
|
||||
- var megamenu = false
|
||||
- var modal_animated = false
|
||||
- var modernizr = false
|
||||
- var popover_custom = false
|
||||
- var product_list = false
|
||||
- var radial_chart_tooltip = false
|
||||
- var support_ticket_custom = false
|
||||
- var tooltip = false
|
||||
|
||||
31
public/assets/pug/components/footer.pug
Normal file
31
public/assets/pug/components/footer.pug
Normal file
@@ -0,0 +1,31 @@
|
||||
// footer start
|
||||
if footer_dark
|
||||
footer.footer.footer-dark
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-6.footer-copyright
|
||||
p.mb-0 Copyright 2023-24 © viho All rights reserved.
|
||||
.col-md-6
|
||||
p.pull-right.mb-0
|
||||
| Hand crafted & made with
|
||||
i.fa.fa-heart.font-secondary
|
||||
else if footer_fix
|
||||
footer.footer.footer-fix
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-6.footer-copyright
|
||||
p.mb-0 Copyright 2023-24 © viho All rights reserved.
|
||||
.col-md-6
|
||||
p.pull-right.mb-0
|
||||
| Hand crafted & made with
|
||||
i.fa.fa-heart.font-secondary
|
||||
else
|
||||
footer.footer
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-6.footer-copyright
|
||||
p.mb-0 Copyright 2023-24 © viho All rights reserved.
|
||||
.col-md-6
|
||||
p.pull-right.mb-0
|
||||
| Hand crafted & made with
|
||||
i.fa.fa-heart.font-secondary
|
||||
110
public/assets/pug/components/header-files.pug
Normal file
110
public/assets/pug/components/header-files.pug
Normal file
@@ -0,0 +1,110 @@
|
||||
|
||||
head
|
||||
meta(http-equiv='Content-Type', content='text/html; charset=UTF-8')
|
||||
meta(http-equiv='X-UA-Compatible', content='IE=edge')
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
||||
meta(name='description', content='viho admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.')
|
||||
meta(name='keywords', content='admin template, viho admin template, dashboard template, flat admin template, responsive admin template, web app')
|
||||
meta(name='author', content='pixelstrap')
|
||||
link(rel='icon', href='../assets/images/favicon.png', type='image/x-icon')
|
||||
link(rel='shortcut icon', href='../assets/images/favicon.png', type='image/x-icon')
|
||||
title viho - Premium Admin Template
|
||||
|
||||
// Google font
|
||||
link(rel="preconnect" href="https://fonts.gstatic.com")
|
||||
link(href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet")
|
||||
link(href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet")
|
||||
link(href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet")
|
||||
|
||||
// Font Awesome
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/fontawesome.css')
|
||||
// ico-font
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/icofont.css')
|
||||
// Themify icon
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/themify.css')
|
||||
// Flag icon
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/flag-icon.css')
|
||||
// Feather icon
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/feather-icon.css')
|
||||
|
||||
// Plugins css start
|
||||
if jsgrid
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/jsgrid.css')
|
||||
if animate
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/animate.css')
|
||||
if aos
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/aos.css')
|
||||
if button_builder
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/button-builder.css')
|
||||
if calendar
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/calendar.css')
|
||||
if jkanban
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/jkanban.css')
|
||||
if chartist
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/chartist.css')
|
||||
if datatable
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/datatables.css')
|
||||
if datatable_extension
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/datatable-extension.css')
|
||||
if select2
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/select2.css')
|
||||
if date_picker
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/date-picker.css')
|
||||
if date_rangepicker
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/daterange-picker.css')
|
||||
if dropzone
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/dropzone.css')
|
||||
if image_cropper
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/image-cropper.css')
|
||||
if owlcarousel
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/owlcarousel.css')
|
||||
if slick
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/slick.css')
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/slick-theme.css')
|
||||
if page_builder
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/page-builder.css')
|
||||
if photo_swipe
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/photoswipe.css')
|
||||
if prism
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/prism.css')
|
||||
if range_slider
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/range-slider.css')
|
||||
if rating
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/rating.css')
|
||||
if scrollable
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/scrollable.css')
|
||||
if simple_mde
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/simple-mde.css')
|
||||
if sticky
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/sticky.css')
|
||||
if summernote
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/summernote.css')
|
||||
if svg_icon
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/svg-icon.css')
|
||||
if sweetalert2
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/sweetalert2.css')
|
||||
if time_picker
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/timepicker.css')
|
||||
if todo
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/todo.css')
|
||||
if tour
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/tour.css')
|
||||
if tree
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/tree.css')
|
||||
if vector_map
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/vector-map.css')
|
||||
if whether_icon
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/whether-icon.css')
|
||||
if map_js
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/mapsjs-ui.css')
|
||||
|
||||
// Plugins css Ends
|
||||
|
||||
// Bootstrap css
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/bootstrap.css')
|
||||
|
||||
// App css
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/style.css')
|
||||
link#color(rel='stylesheet', href='../assets/css/color-1.css', media='screen')
|
||||
// Responsive css
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/responsive.css')
|
||||
135
public/assets/pug/components/header.pug
Normal file
135
public/assets/pug/components/header.pug
Normal file
@@ -0,0 +1,135 @@
|
||||
// Page Header Start
|
||||
.page-main-header
|
||||
.main-header-right.row.m-0
|
||||
.main-header-left
|
||||
.logo-wrapper
|
||||
a(href='index.html')
|
||||
img.img-fluid(src='../assets/images/logo/logo.png', alt='')
|
||||
.dark-logo-wrapper
|
||||
a(href='index.html')
|
||||
img.img-fluid(src='../assets/images/logo/dark-logo.png', alt='')
|
||||
.toggle-sidebar
|
||||
i.status_toggle.middle(data-feather='align-center')#sidebar-toggle
|
||||
.left-menu-header.col
|
||||
ul
|
||||
li
|
||||
form.form-inline.search-form
|
||||
.search-bg
|
||||
i.fa.fa-search
|
||||
input.form-control-plaintext(placeholder='Search here.....')
|
||||
span.d-sm-none.mobile-search.search-bg
|
||||
i.fa.fa-search
|
||||
.nav-right.col.pull-right.right-menu.p-0.box-col-6
|
||||
if megamenu
|
||||
include megamenu
|
||||
ul.nav-menus
|
||||
li
|
||||
a.text-dark(href='#!', onclick='javascript:toggleFullScreen()')
|
||||
i(data-feather='maximize')
|
||||
li.onhover-dropdown
|
||||
.bookmark-box
|
||||
i(data-feather="star")
|
||||
.bookmark-dropdown.onhover-show-div
|
||||
.form-group.mb-0
|
||||
.input-group
|
||||
.input-group-prepend
|
||||
span.input-group-text
|
||||
i.fa.fa-search
|
||||
input.form-control(type="text", placeholder="Search for bookmark...")
|
||||
ul.m-t-5
|
||||
li.add-to-bookmark
|
||||
i.bookmark-icon(data-feather='inbox')
|
||||
| Email
|
||||
span.pull-right
|
||||
i(data-feather="star")
|
||||
li.add-to-bookmark
|
||||
i.bookmark-icon(data-feather='message-square')
|
||||
| Chat
|
||||
span.pull-right
|
||||
i(data-feather="star")
|
||||
li.add-to-bookmark
|
||||
i.bookmark-icon(data-feather='command')
|
||||
| Feather Icon
|
||||
span.pull-right
|
||||
i(data-feather="star")
|
||||
li.add-to-bookmark
|
||||
i.bookmark-icon(data-feather='airplay')
|
||||
| Widgets
|
||||
span.pull-right
|
||||
i(data-feather="star")
|
||||
li.onhover-dropdown
|
||||
.notification-box
|
||||
i(data-feather='bell')
|
||||
span.dot-animated
|
||||
ul.notification-dropdown.onhover-show-div
|
||||
li
|
||||
p.f-w-700.mb-0 You have 3 Notifications
|
||||
span.pull-right.badge.badge-primary.badge-pill 4
|
||||
li.noti-primary
|
||||
.media
|
||||
span.notification-bg.bg-light-primary
|
||||
i(data-feather='activity')
|
||||
.media-body
|
||||
p Delivery processing
|
||||
span 10 minutes ago
|
||||
li.noti-secondary
|
||||
.media
|
||||
span.notification-bg.bg-light-secondary
|
||||
i(data-feather='check-circle')
|
||||
.media-body
|
||||
p Order Complete
|
||||
span 1 hour ago
|
||||
li.noti-success
|
||||
.media
|
||||
span.notification-bg.bg-light-success
|
||||
i(data-feather='file-text')
|
||||
.media-body
|
||||
p Tickets Generated
|
||||
span 3 hour ago
|
||||
li.noti-danger
|
||||
.media
|
||||
span.notification-bg.bg-light-danger
|
||||
i(data-feather='user-check')
|
||||
.media-body
|
||||
p Delivery Complete
|
||||
span 6 hour ago
|
||||
li
|
||||
.mode
|
||||
i.fa.fa-moon-o
|
||||
|
||||
//- i.mode-moon(data-feather='moon')
|
||||
//- i.mode-sun(data-feather='sun')
|
||||
li.onhover-dropdown
|
||||
i(data-feather='message-square')
|
||||
ul.chat-dropdown.onhover-show-div
|
||||
li
|
||||
.media
|
||||
img.img-fluid.rounded-circle.me-3(src='../assets/images/user/4.jpg', alt='')
|
||||
.media-body
|
||||
span Ain Chavez
|
||||
p.f-12.light-font Do you want to go see movie?
|
||||
p.f-12 32 mins ago
|
||||
li
|
||||
.media
|
||||
img.img-fluid.rounded-circle.me-3(src='../assets/images/user/1.jpg', alt='')
|
||||
.media-body
|
||||
span Erica Hughes
|
||||
p.f-12.light-font Thank you for rating us.
|
||||
p.f-12 58 mins ago
|
||||
li
|
||||
.media
|
||||
img.img-fluid.rounded-circle.me-3(src='../assets/images/user/2.jpg', alt='')
|
||||
.media-body
|
||||
span Kori Thomas
|
||||
p.f-12.light-font What`s the project report update?
|
||||
p.f-12 1 hr ago
|
||||
li.text-center
|
||||
a.f-w-700(href="../template/chat.html") See All
|
||||
li.onhover-dropdown.p-0
|
||||
button.btn.btn-primary-light(type="button")
|
||||
a(href="../template/login_two.html")
|
||||
i(data-feather="log-out")
|
||||
| Log out
|
||||
.d-lg-none.mobile-toggle.pull-right.w-auto
|
||||
i(data-feather='more-horizontal')
|
||||
// Page Header Ends
|
||||
5
public/assets/pug/components/loader.pug
Normal file
5
public/assets/pug/components/loader.pug
Normal file
@@ -0,0 +1,5 @@
|
||||
// Loader starts
|
||||
.loader-wrapper
|
||||
.theme-loader
|
||||
.loader-p
|
||||
// Loader ends
|
||||
193
public/assets/pug/components/megamenu.pug
Normal file
193
public/assets/pug/components/megamenu.pug
Normal file
@@ -0,0 +1,193 @@
|
||||
// vertical menu start
|
||||
.mega-menu-header
|
||||
.vertical-menu-main
|
||||
nav#main-nav
|
||||
// Sample menu definition
|
||||
ul#main-menu.sm.pixelstrap
|
||||
li
|
||||
.text-end.mobile-back
|
||||
| Back
|
||||
i.fa.fa-angle-right.ps-2(aria-hidden='true')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.mt-0(data-feather='command')
|
||||
| Mega menu
|
||||
ul.mega-menu
|
||||
li
|
||||
.card-body
|
||||
.row
|
||||
.col-xl-3.list-unstyled
|
||||
div
|
||||
p.title
|
||||
| Builder [BS4+]
|
||||
span.badge.badge-success.ms-2 New
|
||||
div
|
||||
a(href='javascript:;') Page Builder
|
||||
div
|
||||
a(href='javascript:;') Form Builder
|
||||
div
|
||||
a(href='javascript:;') Button Builder
|
||||
.mt-3
|
||||
p.title Accordion
|
||||
div
|
||||
#accordionoc.default-according.style-1
|
||||
.card
|
||||
div
|
||||
h5.mb-0
|
||||
button.btn.btn-link.p-2(data-bs-toggle='collapse', data-bs-target='#collapseicon', aria-expanded='true', aria-controls='collapseicon')
|
||||
| Accordion 1
|
||||
#collapseicon.collapse.show(data-parent='#accordionoc')
|
||||
.card-body.p-2
|
||||
| Anim pariatur cliche reprehenderit.
|
||||
.card
|
||||
div
|
||||
h5.mb-0
|
||||
button.btn.btn-link.text-muted.collapsed.p-1(data-bs-toggle='collapse', data-bs-target='#collapseicon1', aria-expanded='false', aria-controls='collapseicon1')
|
||||
| Accordion 2
|
||||
#collapseicon1.collapse(data-parent='#accordionoc')
|
||||
.card-body.p-2
|
||||
| Anim pariatur cliche reprehenderit.
|
||||
.card
|
||||
div
|
||||
h5.mb-0
|
||||
button.btn.btn-link.text-muted.collapsed.p-1(data-bs-toggle='collapse', data-bs-target='#collapseicon2', aria-expanded='false', aria-controls='collapseicon2')
|
||||
| Accordion 3
|
||||
#collapseicon2.collapse(data-parent='#accordionoc')
|
||||
.card-body.p-2
|
||||
| Anim pariatur cliche reprehenderit.
|
||||
.col-xl-2.list-unstyled.xs-mt
|
||||
div
|
||||
p.title Drill Down
|
||||
.drilldown
|
||||
.drilldown-container
|
||||
.drilldown-root
|
||||
div
|
||||
a.font-primary.mt-0(href='javascript:void(0)') First Level Menu
|
||||
div
|
||||
a.ps-0(href='javascript:void(0)')
|
||||
i.icon-support
|
||||
| Base
|
||||
span.float-end →
|
||||
.drilldown-sub
|
||||
.drilldown-back
|
||||
a.font-primary.f-w-100(href='javascript:void(0)')
|
||||
span ←
|
||||
| Second Level Menu
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| State color
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Tabs
|
||||
span.float-end →
|
||||
.drilldown-sub
|
||||
.drilldown-back
|
||||
a.font-primary.f-w-100(href='javascript:void(0)')
|
||||
span ←
|
||||
| Third Level Menu
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Bootstrap Tabs
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Line Tabs
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Typography
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Progress
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Model
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Alert
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Popover
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-dropbox
|
||||
| Advanced
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-spin.fa-spinner
|
||||
| Animation
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-package
|
||||
| Icons
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-cloud-down
|
||||
| Buttons
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-notepad
|
||||
| Forms
|
||||
div
|
||||
a.mb-0(href='javascript:void(0)')
|
||||
i.icon-harddrives
|
||||
| Tables
|
||||
.col-xl-3.galleria-list.clearfix.lg-mt
|
||||
div
|
||||
p.title Galleria
|
||||
div
|
||||
.galleria.row
|
||||
.col-6
|
||||
a(href='javascript:void(0)')
|
||||
img(src='../assets/images/slider/1.jpg', alt='')
|
||||
h4.username.text-ellipsis
|
||||
| Airi Satou
|
||||
small Algerian
|
||||
.col-6
|
||||
a(href='javascript:void(0)')
|
||||
img(src='../assets/images/slider/2.jpg', alt='')
|
||||
h4.username.text-ellipsis
|
||||
| Fiona Green
|
||||
small Korean
|
||||
.col-6.mb-0
|
||||
a(href='javascript:void(0)')
|
||||
img(src='../assets/images/slider/3.jpg', alt='')
|
||||
h4.username.text-ellipsis.mb-0
|
||||
| Gavin Joyce
|
||||
small Indian
|
||||
.col-6.mb-0
|
||||
a(href='javascript:void(0)')
|
||||
img(src='../assets/images/slider/4.jpg', alt='')
|
||||
h4.username.text-ellipsis.mb-0
|
||||
| Howard Hatfield
|
||||
small Japanese
|
||||
.col-xl-4.list-unstyled.custom-nav-img.lg-mt
|
||||
div
|
||||
p.title Contact Form
|
||||
div
|
||||
form.theme-form
|
||||
.form-group
|
||||
label.col-form-label.pt-0
|
||||
i.icon-user.pe-2
|
||||
| Your Name
|
||||
input.form-control(type='text', placeholder='Enter your name')
|
||||
.form-group
|
||||
label.col-form-label
|
||||
i.icon-email.pe-2
|
||||
| Your Email
|
||||
input.form-control(type='email', placeholder='Enter your emailid')
|
||||
.form-group
|
||||
label.col-form-label
|
||||
i.icon-comment.pe-2
|
||||
| Your Message
|
||||
textarea.form-control(placeholder='Enter your message', rows='2')
|
||||
.form-group.mb-0
|
||||
button.btn.btn-primary Send
|
||||
// vertical menu ends
|
||||
672
public/assets/pug/components/sidebar.pug
Normal file
672
public/assets/pug/components/sidebar.pug
Normal file
@@ -0,0 +1,672 @@
|
||||
- var status_toggle = (sidebar_open ? undefined : 'checked');
|
||||
// Page Sidebar Start
|
||||
header.main-nav
|
||||
.sidebar-user.text-center
|
||||
a(href="javascript:void(0)").setting-primary
|
||||
i(data-feather='settings')
|
||||
img.img-90.rounded-circle(src='../assets/images/dashboard/1.png', alt='')
|
||||
.badge-bottom
|
||||
span.badge.badge-primary New
|
||||
a(href="user-profile.html")
|
||||
h6.mt-3.f-14.f-w-600 Emay Walter
|
||||
p.mb-0.font-roboto Human Resources Department
|
||||
ul
|
||||
li
|
||||
span
|
||||
span.counter 19.8
|
||||
| k
|
||||
p Follow
|
||||
li
|
||||
span 2 year
|
||||
p Experince
|
||||
li
|
||||
span
|
||||
span.counter 95.2
|
||||
| k
|
||||
p Follower
|
||||
nav
|
||||
.main-navbar
|
||||
.left-arrow#left-arrow
|
||||
i(data-feather='arrow-left')
|
||||
#mainnav
|
||||
ul.nav-menu.custom-scrollbar
|
||||
li.back-btn
|
||||
.mobile-back.text-end
|
||||
span Back
|
||||
i.fa.fa-angle-right.ps-2(aria-hidden='true')
|
||||
li.sidebar-main-title
|
||||
div
|
||||
h6 General
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='home')
|
||||
span Dashboard
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='index.html')
|
||||
| Default
|
||||
li
|
||||
a(href='dashboard-02.html') Ecommerce
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='airplay')
|
||||
span Widgets
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='general-widget.html') General
|
||||
li
|
||||
a(href='chart-widget.html') Chart
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='layout')
|
||||
span Page layout
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='box-layout.html') Boxed
|
||||
li
|
||||
a(href='layout-rtl.html') RTL
|
||||
li
|
||||
a(href='layout-dark.html') Dark
|
||||
li
|
||||
a(href='footer-light.html') Footer Light
|
||||
li
|
||||
a(href='footer-dark.html') Footer Dark
|
||||
li
|
||||
a(href='footer-fixed.html') Footer Fixed
|
||||
li.sidebar-main-title
|
||||
div
|
||||
h6 Components
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='box')
|
||||
span Ui Kits
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='typography.html') Typography
|
||||
li
|
||||
a(href='avatars.html') Avatars
|
||||
li
|
||||
a(href='helper-classes.html') helper classes
|
||||
li
|
||||
a(href='grid.html') Grid
|
||||
li
|
||||
a(href='tag-pills.html') Tag & pills
|
||||
li
|
||||
a(href='progress-bar.html') Progress
|
||||
li
|
||||
a(href='modal.html') Modal
|
||||
li
|
||||
a(href='alert.html') Alert
|
||||
li
|
||||
a(href='popover.html') Popover
|
||||
li
|
||||
a(href='tooltip.html') Tooltip
|
||||
li
|
||||
a(href='dropdown.html') Dropdown
|
||||
li
|
||||
a(href='according.html') Accordion
|
||||
li
|
||||
a.submenu-title(href='javascript:void(0)')
|
||||
| Tabs
|
||||
span.sub-arrow
|
||||
i.fa.fa-chevron-right
|
||||
ul.nav-sub-childmenu.submenu-content
|
||||
li
|
||||
a(href='tab-bootstrap.html') Bootstrap Tabs
|
||||
li
|
||||
a(href='tab-material.html') Line Tabs
|
||||
li
|
||||
a(href='list.html') Lists
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='folder-plus')
|
||||
span Bonus Ui
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='scrollable.html') Scrollable
|
||||
li
|
||||
a(href='tree.html') Tree view
|
||||
li
|
||||
a(href='bootstrap-notify.html') Bootstrap Notify
|
||||
li
|
||||
a(href='rating.html') Rating
|
||||
li
|
||||
a(href='dropzone.html') dropzone
|
||||
li
|
||||
a(href='tour.html') Tour
|
||||
li
|
||||
a(href='sweet-alert2.html') SweetAlert2
|
||||
li
|
||||
a(href='modal-animated.html') Animated Modal
|
||||
li
|
||||
a(href='owl-carousel.html') Owl Carousel
|
||||
li
|
||||
a(href='ribbons.html') Ribbons
|
||||
li
|
||||
a(href='pagination.html') Pagination
|
||||
li
|
||||
a(href='breadcrumb.html') Breadcrumb
|
||||
li
|
||||
a(href='range-slider.html') Range Slider
|
||||
li
|
||||
a(href='image-cropper.html') Image cropper
|
||||
li
|
||||
a(href='basic-card.html') Basic Card
|
||||
li
|
||||
a(href='creative-card.html') Creative Card
|
||||
li
|
||||
a(href='dragable-card.html') Draggable Card
|
||||
li
|
||||
a.submenu-title(href='javascript:void(0)')
|
||||
| Timeline
|
||||
span.sub-arrow
|
||||
i.fa.fa-chevron-right
|
||||
ul.nav-sub-childmenu.submenu-content
|
||||
li
|
||||
a(href='timeline-v-1.html') Timeline 1
|
||||
li
|
||||
a(href='timeline-v-2.html') Timeline 2
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='cloud-drizzle')
|
||||
span Animation
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='animate.html') Animate
|
||||
li
|
||||
a(href='scroll-reval.html') Scroll Reveal
|
||||
li
|
||||
a(href='AOS.html') AOS animation
|
||||
li
|
||||
a(href='tilt.html') Tilt Animation
|
||||
li
|
||||
a(href='wow.html') Wow Animation
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='command')
|
||||
span Icons
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='flag-icon.html') Flag icon
|
||||
li
|
||||
a(href='font-awesome.html') Fontawesome Icon
|
||||
li
|
||||
a(href='ico-icon.html') Ico Icon
|
||||
li
|
||||
a(href='themify-icon.html') Thimify Icon
|
||||
li
|
||||
a(href='feather-icon.html') Feather icon
|
||||
li
|
||||
a(href='whether-icon.html') Whether Icon
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='cloud')
|
||||
span Buttons
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='buttons.html') Default Style
|
||||
li
|
||||
a(href='buttons-flat.html') Flat Style
|
||||
li
|
||||
a(href='buttons-edge.html') Edge Style
|
||||
li
|
||||
a(href='raised-button.html') Raised Style
|
||||
li
|
||||
a(href='button-group.html') Button Group
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='bar-chart')
|
||||
span Charts
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='chart-apex.html') Apex Chart
|
||||
li
|
||||
a(href='chart-google.html') Google Chart
|
||||
li
|
||||
a(href='chart-sparkline.html') Sparkline chart
|
||||
li
|
||||
a(href='chart-flot.html') Flot Chart
|
||||
li
|
||||
a(href='chart-knob.html') Knob Chart
|
||||
li
|
||||
a(href='chart-morris.html') Morris Chart
|
||||
li
|
||||
a(href='chartjs.html') Chatjs Chart
|
||||
li
|
||||
a(href='chartist.html') Chartist Chart
|
||||
li
|
||||
a(href='chart-peity.html') Peity Chart
|
||||
|
||||
li.sidebar-main-title
|
||||
div
|
||||
h6 Forms
|
||||
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='sliders')
|
||||
span Form Controls
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='form-validation.html') Form Validation
|
||||
li
|
||||
a(href='base-input.html') Base Inputs
|
||||
li
|
||||
a(href='radio-checkbox-control.html') Checkbox & Radio
|
||||
li
|
||||
a(href='input-group.html') Input Groups
|
||||
li
|
||||
a(href='megaoptions.html') Mega Options
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='package')
|
||||
span Form Widgets
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='datepicker.html') Datepicker
|
||||
li
|
||||
a(href='time-picker.html') Timepicker
|
||||
li
|
||||
a(href='datetimepicker.html') Datetimepicker
|
||||
li
|
||||
a(href='daterangepicker.html') Daterangepicker
|
||||
li
|
||||
a(href='touchspin.html') Touchspin
|
||||
li
|
||||
a(href='select2.html') Select2
|
||||
li
|
||||
a(href='switch.html') Switch
|
||||
li
|
||||
a(href='typeahead.html') Typeahead
|
||||
li
|
||||
a(href='clipboard.html') Clipboard
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='layout')
|
||||
span Form layout
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='default-form.html') Default Forms
|
||||
li
|
||||
a(href='form-wizard.html') Form Wizard 1
|
||||
li
|
||||
a(href='form-wizard-two.html') Form Wizard 2
|
||||
li
|
||||
a(href='form-wizard-three.html') Form Wizard 3
|
||||
|
||||
li.sidebar-main-title
|
||||
div
|
||||
h6 Table
|
||||
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='server')
|
||||
span Bootstrap Tables
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='bootstrap-basic-table.html') Basic Tables
|
||||
li
|
||||
a(href='bootstrap-sizing-table.html') Sizing Tables
|
||||
li
|
||||
a(href='bootstrap-border-table.html') Border Tables
|
||||
li
|
||||
a(href='bootstrap-styling-table.html') Styling Tables
|
||||
li
|
||||
a(href='table-components.html') Table components
|
||||
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='database')
|
||||
span Data Tables
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='datatable-basic-init.html') Basic Init
|
||||
li
|
||||
a(href='datatable-advance.html') Advance Init
|
||||
li
|
||||
a(href='datatable-styling.html') Styling
|
||||
li
|
||||
a(href='datatable-AJAX.html') AJAX
|
||||
li
|
||||
a(href='datatable-server-side.html') Server Side
|
||||
li
|
||||
a(href='datatable-plugin.html') Plug-in
|
||||
li
|
||||
a(href='datatable-API.html') API
|
||||
li
|
||||
a(href='datatable-data-source.html') Data Sources
|
||||
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='hard-drive')
|
||||
span Ex. Data Tables
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='datatable-ext-autofill.html') Auto Fill
|
||||
li
|
||||
a(href='datatable-ext-basic-button.html') Basic Button
|
||||
li
|
||||
a(href='datatable-ext-col-reorder.html') Column Reorder
|
||||
li
|
||||
a(href='datatable-ext-fixed-header.html') Fixed Header
|
||||
li
|
||||
a(href='datatable-ext-key-table.html') Key Table
|
||||
li
|
||||
a(href='datatable-ext-responsive.html') Responsive
|
||||
li
|
||||
a(href='datatable-ext-row-reorder.html') Row Reorder
|
||||
li
|
||||
a(href='datatable-ext-scroller.html') Scroller
|
||||
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='jsgrid-table.html')
|
||||
i(data-feather='file-text')
|
||||
span Js Grid Table
|
||||
li.sidebar-main-title
|
||||
div
|
||||
h6 Applications
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='box')
|
||||
span Project
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='projects.html') Project List
|
||||
li
|
||||
a(href='projectcreate.html') Create new
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='file-manager.html')
|
||||
i(data-feather='git-pull-request')
|
||||
span File manager
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='kanban.html')
|
||||
i(data-feather='monitor')
|
||||
span kanban Board
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='shopping-bag')
|
||||
span Ecommerce
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='product.html') Product
|
||||
li
|
||||
a(href='product-page.html') Product page
|
||||
li
|
||||
a(href='list-products.html') Product list
|
||||
li
|
||||
a(href='payment-details.html') Payment Details
|
||||
li
|
||||
a(href='order-history.html') Order History
|
||||
li
|
||||
a(href='invoice-template.html') Invoice
|
||||
li
|
||||
a(href='cart.html') Cart
|
||||
li
|
||||
a(href='list-wish.html') Wishlist
|
||||
li
|
||||
a(href='checkout.html') Checkout
|
||||
li
|
||||
a(href='pricing.html') Pricing
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='mail')
|
||||
span Email
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='email_inbox.html') Mail Inbox
|
||||
li
|
||||
a(href='email_read.html') Read mail
|
||||
li
|
||||
a(href='email_compose.html') Compose
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='message-circle')
|
||||
span Chat
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='chat.html') Chat App
|
||||
li
|
||||
a(href='chat-video.html') Video chat
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='users')
|
||||
span Users
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='user-profile.html') Users Profile
|
||||
li
|
||||
a(href='edit-profile.html') Users Edit
|
||||
li
|
||||
a(href='user-cards.html') Users Cards
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='bookmark.html')
|
||||
i(data-feather='heart')
|
||||
span Bookmarks
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='contacts.html')
|
||||
i(data-feather='list')
|
||||
span Contacts
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='task.html')
|
||||
i(data-feather='check-square')
|
||||
span Tasks
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='calendar-basic.html')
|
||||
i(data-feather='calendar')
|
||||
span Calender
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='social-app.html')
|
||||
i(data-feather='zap')
|
||||
span Social App
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='to-do.html')
|
||||
i(data-feather='clock')
|
||||
span To-Do
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='search.html')
|
||||
i(data-feather='search')
|
||||
span Search Result
|
||||
li.sidebar-main-title
|
||||
div
|
||||
h6 Pages
|
||||
li
|
||||
a.nav-link.menu-title.link-nav(href='landing-page.html')
|
||||
i(data-feather='navigation-2')
|
||||
span Landing page
|
||||
li
|
||||
a.nav-link.menu-title.link-nav(href='sample-page.html')
|
||||
i(data-feather='file')
|
||||
span Sample page
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='internationalization.html')
|
||||
i(data-feather='aperture')
|
||||
span Internationalization
|
||||
li.dropdown
|
||||
a.nav-link.menu-title.link-nav(href='../starter-kit/index.html')
|
||||
i(data-feather='anchor')
|
||||
span Starter kit
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='layers')
|
||||
span Others
|
||||
ul.mega-menu-container.menu-content
|
||||
.container
|
||||
.row
|
||||
.col.mega-box
|
||||
.link-section
|
||||
.submenu-title
|
||||
h5 Error Page
|
||||
.submenu-content.opensubmegamenu
|
||||
ul
|
||||
li
|
||||
a(href='error-page1.html' target="_blank") Error page 1
|
||||
li
|
||||
a(href='error-page2.html' target="_blank") Error page 2
|
||||
li
|
||||
a(href='error-page3.html' target="_blank") Error page 3
|
||||
li
|
||||
a(href='error-page4.html' target="_blank") Error page 4
|
||||
|
||||
.col.mega-box
|
||||
.link-section
|
||||
.submenu-title
|
||||
h5 Authentication
|
||||
.submenu-content.opensubmegamenu
|
||||
ul
|
||||
li
|
||||
a(href='login.html' target="_blank") Login Simple
|
||||
li
|
||||
a(href='login_one.html' target="_blank") Login with bg image
|
||||
li
|
||||
a(href='login_two.html' target="_blank") Login with image two
|
||||
li
|
||||
a(href='login-bs-validation.html' target="_blank") Login With validation
|
||||
li
|
||||
a(href='login-bs-tt-validation.html' target="_blank") Login with tooltip
|
||||
li
|
||||
a(href='login-sa-validation.html' target="_blank") Login with sweetalert
|
||||
li
|
||||
a(href='sign-up.html' target="_blank") Register Simple
|
||||
li
|
||||
a(href='sign-up-one.html' target="_blank")
|
||||
| Register with Bg Image
|
||||
li
|
||||
a(href='sign-up-two.html' target="_blank") Register with Bg video
|
||||
li
|
||||
a(href='unlock.html') Unlock User
|
||||
li
|
||||
a(href='forget-password.html') Forget Password
|
||||
li
|
||||
a(href='creat-password.html') Creat Password
|
||||
li
|
||||
a(href='maintenance.html') Maintenance
|
||||
.col.mega-box
|
||||
.link-section
|
||||
.submenu-title
|
||||
h5 Coming Soon
|
||||
.submenu-content.opensubmegamenu
|
||||
ul
|
||||
li
|
||||
a(href='comingsoon.html') Coming Simple
|
||||
li
|
||||
a(href='comingsoon-bg-video.html') Coming with Bg video
|
||||
li
|
||||
a(href='comingsoon-bg-img.html') Coming with Bg Image
|
||||
.col.mega-box
|
||||
.link-section
|
||||
.submenu-title
|
||||
h5 Email templates
|
||||
.submenu-content.opensubmegamenu
|
||||
ul
|
||||
li
|
||||
a(href='basic-template.html')
|
||||
| Basic Email
|
||||
li
|
||||
a(href='email-header.html')
|
||||
| Basic With Header
|
||||
li
|
||||
a(href='template-email.html')
|
||||
| Ecomerce Template
|
||||
li
|
||||
a(href='template-email-2.html')
|
||||
| Email Template 2
|
||||
li
|
||||
a(href='ecommerce-templates.html')
|
||||
| Ecommerce Email
|
||||
li
|
||||
a(href='email-order-success.html')
|
||||
| Order Success
|
||||
li.sidebar-main-title
|
||||
div
|
||||
h6 Miscellaneous
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='image')
|
||||
span Gallery
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='gallery.html') Gallery Grid
|
||||
li
|
||||
a(href='gallery-with-description.html') Gallery Grid Desc
|
||||
li
|
||||
a(href='gallery-masonry.html') Masonry Gallery
|
||||
li
|
||||
a(href='masonry-gallery-with-disc.html') Masonry with Desc
|
||||
li
|
||||
a(href='gallery-hover.html') Hover Effects
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='edit')
|
||||
span Blog
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='blog.html') Blog Details
|
||||
li
|
||||
a(href='blog-single.html') Blog Single
|
||||
li
|
||||
a(href='add-post.html') Add Post
|
||||
li
|
||||
a.nav-link.menu-title.link-nav(href='faq.html')
|
||||
i(data-feather='help-circle')
|
||||
span FAQ
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='user-check')
|
||||
span Job Search
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='job-cards-view.html') Cards view
|
||||
li
|
||||
a(href='job-list-view.html') List View
|
||||
li
|
||||
a(href='job-details.html') Job Details
|
||||
li
|
||||
a(href='job-apply.html') Apply
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='layers')
|
||||
span Learning
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='learning-list-view.html') Learning List
|
||||
li
|
||||
a(href='learning-detailed.html') Detailed Course
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='map')
|
||||
span Maps
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='map-js.html') Maps JS
|
||||
li
|
||||
a(href='vector-map.html') Vector Maps
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='git-pull-request')
|
||||
span Editors
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='summernote.html') Summer Note
|
||||
li
|
||||
a(href='ckeditor.html') CK editor
|
||||
li
|
||||
a(href='simple-MDE.html') MDE editor
|
||||
li
|
||||
a(href='ace-code-editor.html') ACE code editor
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='database')
|
||||
span Knowledgebase
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a(href='knowledgebase.html') Knowledgebase
|
||||
li
|
||||
a(href='knowledge-category.html') Knowledge category
|
||||
li
|
||||
a(href='knowledge-detail.html') Knowledge detail
|
||||
li
|
||||
a.nav-link.menu-title.link-nav(href='support-ticket.html')
|
||||
i(data-feather='headphones')
|
||||
span Support Ticket
|
||||
.right-arrow#right-arrow
|
||||
i(data-feather='arrow-right')
|
||||
// Page Sidebar Ends
|
||||
60
public/assets/pug/components/starter-kit-sidebar.pug
Normal file
60
public/assets/pug/components/starter-kit-sidebar.pug
Normal file
@@ -0,0 +1,60 @@
|
||||
// Page Sidebar Start
|
||||
header.main-nav
|
||||
nav
|
||||
.main-navbar
|
||||
#mainnav
|
||||
ul.nav-menu.custom-scrollbar
|
||||
li.back-btn
|
||||
.mobile-back.text-end
|
||||
span Back
|
||||
i.fa.fa-angle-right.ps-2(aria-hidden='true')
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='../template/index.html', target='_blank')
|
||||
i(data-feather='home')
|
||||
span Dashboard
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='javascript:void(0)')
|
||||
i(data-feather='anchor')
|
||||
span Starter kit
|
||||
ul.nav-submenu.menu-content
|
||||
li
|
||||
a.submenu-title(href='javascript:void(0)')
|
||||
| color version
|
||||
span.sub-arrow
|
||||
i.fa.fa-chevron-right
|
||||
ul.nav-sub-childmenu.submenu-content
|
||||
li
|
||||
a(href='index.html') Layout Light
|
||||
li
|
||||
a(href='layout-dark.html') Layout Dark
|
||||
li
|
||||
a.submenu-title(href='javascript:void(0)')
|
||||
| Page layout
|
||||
span.sub-arrow
|
||||
i.fa.fa-chevron-right
|
||||
ul.nav-sub-childmenu.submenu-content
|
||||
li
|
||||
a(href='boxed.html') Boxed
|
||||
li
|
||||
a(href='layout-rtl.html') RTL
|
||||
li
|
||||
a.submenu-title(href='javascript:void(0)')
|
||||
| Footers
|
||||
span.sub-arrow
|
||||
i.fa.fa-chevron-right
|
||||
ul.nav-sub-childmenu.submenu-content
|
||||
li
|
||||
a(href='footer-light.html') Footer Light
|
||||
li
|
||||
a(href='footer-dark.html') Footer Dark
|
||||
li
|
||||
a(href='footer-fixed.html') Footer Fixed
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='https://support.pixelstrap.com/portal/en/signin', target='_blank')
|
||||
i(data-feather='headphones')
|
||||
span Raise Support
|
||||
li.dropdown
|
||||
a.nav-link.menu-title(href='https://docs.pixelstrap.com/viho/document/', target='_blank')
|
||||
i(data-feather='file-text')
|
||||
span Documentation
|
||||
// Page Sidebar Ends
|
||||
4
public/assets/pug/components/taptop.pug
Normal file
4
public/assets/pug/components/taptop.pug
Normal file
@@ -0,0 +1,4 @@
|
||||
// tap on top starts
|
||||
.tap-top
|
||||
i(data-feather="chevrons-up")
|
||||
// tap on tap ends
|
||||
728
public/assets/pug/components/vertical.pug
Normal file
728
public/assets/pug/components/vertical.pug
Normal file
@@ -0,0 +1,728 @@
|
||||
// vertical menu start
|
||||
.vertical-menu-main
|
||||
nav#main-nav
|
||||
// Sample menu definition
|
||||
ul#main-menu.sm.pixelstrap
|
||||
li
|
||||
.text-end.mobile-back
|
||||
| Back
|
||||
i.fa.fa-angle-right.ps-2(aria-hidden='true')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.font-primary(data-feather='home')
|
||||
| Dashboard
|
||||
ul
|
||||
li
|
||||
a(href='index.html') Default
|
||||
li
|
||||
a(href='dashboard-crm') Crm
|
||||
li
|
||||
a(href='dashboard-crypto.html')
|
||||
| Crypto
|
||||
li
|
||||
a(href='dashboard-hospital.html')
|
||||
| Hospital
|
||||
li
|
||||
a(href='dashboard-sass.html')
|
||||
| Sass
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.font-primary(data-feather='airplay')
|
||||
| Widgets
|
||||
ul
|
||||
li
|
||||
a(href='general-widget.html') General
|
||||
li
|
||||
a(href='chart-widget.html') Chart
|
||||
li
|
||||
a.sidebar-header(href='../starter-kit/layout-light.html')
|
||||
i.font-primary(data-feather='anchor')
|
||||
span Starter kit
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.font-primary(data-feather='layout')
|
||||
| Layouts
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)') Color Version
|
||||
ul
|
||||
li
|
||||
a(href='layout-light.html') Layout Light
|
||||
li
|
||||
a(href='layout-dark.html') Layout Dark
|
||||
li
|
||||
a(href='javascript:void(0)') Sidebar
|
||||
ul
|
||||
li
|
||||
a(href='compact.html') Compact Sidebar
|
||||
li
|
||||
a(href='sidebar-fixed.html') Sidebar Fixed
|
||||
li
|
||||
a.disabled(href='') Disable
|
||||
li
|
||||
a(href='javascript:void(0)') Page Layout
|
||||
ul
|
||||
li
|
||||
a(href='box-layout.html') Boxed
|
||||
li
|
||||
a(href='layout-rtl.html') RTL
|
||||
li.active
|
||||
a(href='javascript:void(0)') Menu Options
|
||||
ul
|
||||
li
|
||||
a.current(href='vertical.html') Vertical Menu
|
||||
li
|
||||
a(href='mega-menu.html') Mega Menu
|
||||
li
|
||||
a(href='fix-header.html') Fix header
|
||||
li
|
||||
a(href='javascript:void(0)') Footers
|
||||
ul
|
||||
li
|
||||
a(href='footer-light.html') Footer Light
|
||||
li
|
||||
a(href='footer-dark.html') Footer Dark
|
||||
li
|
||||
a(href='footer-fixed.html') Footer Fixed
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.font-primary(data-feather='edit')
|
||||
| Builder
|
||||
ul
|
||||
li
|
||||
a(href='pagebuild.html') Page Builder
|
||||
li
|
||||
a(href='form-builder-1.html') Form Builder 1
|
||||
li
|
||||
a(href='form-builder-2.html') Form Builder 2
|
||||
li
|
||||
a(href='button-builder.html') Button Builder
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.font-primary(data-feather='folder')
|
||||
| Components
|
||||
ul
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Base
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='state-color.html') State color
|
||||
li
|
||||
a(href='typography.html') Typography
|
||||
li
|
||||
a(href='helper-classes.html') helper classes
|
||||
li
|
||||
a(href='grid.html') Grid
|
||||
li
|
||||
a(href='tag-pills.html') Tag & pills
|
||||
li
|
||||
a(href='progress-bar.html') Progress
|
||||
li
|
||||
a(href='modal.html') Modal
|
||||
li
|
||||
a(href='alert.html') Alert
|
||||
li
|
||||
a(href='popover.html') Popover
|
||||
li
|
||||
a(href='tooltip.html') Tooltip
|
||||
li
|
||||
a(href='loader.html') Spinners
|
||||
li
|
||||
a(href='dropdown.html') Dropdown
|
||||
li
|
||||
a(href='crm.html') Tabs
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='tab-bootstrap.html') Bootstrap Tabs
|
||||
li
|
||||
a(href='tab-material.html') Line Tabs
|
||||
li
|
||||
a(href='according.html') According
|
||||
li
|
||||
a(href='navs.html') Navs
|
||||
li
|
||||
a(href='box-shadow.html') Shadow
|
||||
li
|
||||
a(href='list.html') Lists
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Advance
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='scrollable.html') Scrollable
|
||||
li
|
||||
a(href='tree.html') Tree view
|
||||
li
|
||||
a(href='bootstrap-notify.html') Bootstrap Notify
|
||||
li
|
||||
a(href='rating.html') Rating
|
||||
li
|
||||
a(href='dropzone.html') dropzone
|
||||
li
|
||||
a(href='tour.html') Tour
|
||||
li
|
||||
a(href='sweet-alert2.html') SweetAlert2
|
||||
li
|
||||
a(href='modal-animated.html') Animated Modal
|
||||
li
|
||||
a(href='owl-carousel.html') Owl Carousel
|
||||
li
|
||||
a(href='ribbons.html') Ribbons
|
||||
li
|
||||
a(href='pagination.html') Pagination
|
||||
li
|
||||
a(href='steps.html') Steps
|
||||
li
|
||||
a(href='breadcrumb.html') Breadcrumb
|
||||
li
|
||||
a(href='range-slider.html') Range Slider
|
||||
li
|
||||
a(href='image-cropper.html') Image cropper
|
||||
li
|
||||
a(href='sticky.html') Sticky
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Animation
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='animate.html') Animate
|
||||
li
|
||||
a(href='scroll-reval.html') Scroll Reveal
|
||||
li
|
||||
a(href='AOS.html') AOS animation
|
||||
li
|
||||
a(href='tilt.html') Tilt Animation
|
||||
li
|
||||
a(href='wow.html') Wow Animation
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Icons
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='flag-icon.html') Flag icon
|
||||
li
|
||||
a(href='font-awesome.html') Fontawesome Icon
|
||||
li
|
||||
a(href='ico-icon.html') Ico Icon
|
||||
li
|
||||
a(href='themify-icon.html') Thimify Icon
|
||||
li
|
||||
a(href='whether-icon.html') Whether Icon
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Buttons
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='buttons.html') Default Style
|
||||
li
|
||||
a(href='buttons-flat.html') Flat Style
|
||||
li
|
||||
a(href='buttons-edge.html') Edge Style
|
||||
li
|
||||
a(href='raised-button.html') Raised Style
|
||||
li
|
||||
a(href='button-group.html') Button Group
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Forms
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='flag-icon.html') Form Controls
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='form-validation.html') Form Validation
|
||||
li
|
||||
a(href='base-input.html') Base Inputs
|
||||
li
|
||||
a(href='radio-checkbox-control.html') Checkbox & Radio
|
||||
li
|
||||
a(href='input-group.html') Input Groups
|
||||
li
|
||||
a(href='megaoptions.html') Mega Options
|
||||
li
|
||||
a(href='font-awesome.html') Form Widgets
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='datepicker.html') Datepicker
|
||||
li
|
||||
a(href='time-picker.html') Timepicker
|
||||
li
|
||||
a(href='datetimepicker.html') Datetimepicker
|
||||
li
|
||||
a(href='daterangepicker.html') Daterangepicker
|
||||
li
|
||||
a(href='touchspin.html') Touchspin
|
||||
li
|
||||
a(href='select2.html') Select2
|
||||
li
|
||||
a(href='switch.html') Switch
|
||||
li
|
||||
a(href='typeahead.html') Typeahead
|
||||
li
|
||||
a(href='clipboard.html') Clipboard
|
||||
li
|
||||
a(href='font-awesome.html') Form Layout
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='default-form.html') Default Forms
|
||||
li
|
||||
a(href='form-wizard.html') Form Wizard 1
|
||||
li
|
||||
a(href='form-wizard-two.html') Form Wizard 2
|
||||
li
|
||||
a(href='form-wizard-three.html') Form Wizard 3
|
||||
li
|
||||
a(href='form-wizard-four.html') Form Wizard 4
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Tables
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='javascript:void(0)') Bootstrap Tables
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='bootstrap-basic-table.html') Basic Tables
|
||||
li
|
||||
a(href='bootstrap-sizing-table.html') Sizing Tables
|
||||
li
|
||||
a(href='bootstrap-border-table.html') Border Tables
|
||||
li
|
||||
a(href='bootstrap-styling-table.html') Styling Tables
|
||||
li
|
||||
a(href='table-components.html') Table components
|
||||
li
|
||||
a(href='javascript:void(0)') Data Tables
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='datatable-basic-init.html') Basic Init
|
||||
li
|
||||
a(href='datatable-advance.html') Advance Init
|
||||
li
|
||||
a(href='datatable-styling.html') Styling
|
||||
li
|
||||
a(href='datatable-AJAX.html') AJAX
|
||||
li
|
||||
a(href='datatable-server-side.html') Server Side
|
||||
li
|
||||
a(href='datatable-plugin.html') Plug-in
|
||||
li
|
||||
a(href='datatable-API.html') API
|
||||
li
|
||||
a(href='datatable-data-source.html') Data Sources
|
||||
li
|
||||
a(href='javascript:void(0)') Extension Data Tables
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='datatable-ext-autofill.html') Auto Fill
|
||||
li
|
||||
a(href='datatable-ext-basic-button.html') Basic Button
|
||||
li
|
||||
a(href='datatable-ext-col-reorder.html') Column Reorder
|
||||
li
|
||||
a(href='datatable-ext-fixed-header.html') Fixed Header
|
||||
li
|
||||
a(href='datatable-ext-htms-5-data-export.html') HTML 5 Export
|
||||
li
|
||||
a(href='datatable-ext-key-table.html') Key Table
|
||||
li
|
||||
a(href='datatable-ext-responsive.html') Responsive
|
||||
li
|
||||
a(href='datatable-ext-row-reorder.html') Row Reorder
|
||||
li
|
||||
a(href='datatable-ext-scroller.html') Scroller
|
||||
li
|
||||
a(href='../default/jsgrid-table.html') Js Grid Tables
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Cards
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='basic-card.html') Basic Card
|
||||
li
|
||||
a(href='viho-card.html') viho Card
|
||||
li
|
||||
a(href='tabbed-card.html') Tabbed Card
|
||||
li
|
||||
a(href='dragable-card.html') Draggable Card
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Charts
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='chart-google.html') Google Chart
|
||||
li
|
||||
a(href='chart-sparkline.html') sparkline chart
|
||||
li
|
||||
a(href='chart-flot.html') Flot Chart
|
||||
li
|
||||
a(href='chart-radial.html') Radial Chart
|
||||
li
|
||||
a(href='chart-morris.html') Morris Chart
|
||||
li
|
||||
a(href='chartjs.html') chatjs Chart
|
||||
li
|
||||
a(href='chartist.html') chatjs Chart
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Maps
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='map-js.html') Map Js
|
||||
li
|
||||
a(href='vector-map.html') Vector Maps
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Editors
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='summernote.html') Summer Note
|
||||
li
|
||||
a(href='ckeditor.html') CK editor
|
||||
li
|
||||
a(href='simple-MDE.html') MDE editor
|
||||
li
|
||||
a(href='ace-code-editor.html') ACE code editor
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.font-primary(data-feather='briefcase')
|
||||
| Apps
|
||||
ul
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Users
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='user-profile.html') Users Profile
|
||||
li
|
||||
a(href='edit-profile.html') Users Edit
|
||||
li
|
||||
a(href='user-cards.html') Users Cards
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Calender
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='calendar.html') Full Calender Basic
|
||||
li
|
||||
a(href='calendar-event.html') Full Calender Events
|
||||
li
|
||||
a(href='calendar-advanced.html') Full Calender Advance
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Gallery
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='gallery.html') Gallery Grid
|
||||
li
|
||||
a(href='gallery-with-description.html') Gallery Grid with Desc
|
||||
li
|
||||
a(href='gallery-masonry.html') Masonry Gallery
|
||||
li
|
||||
a(href='masonry-gallery-with-disc.html') Masonry Gallery Desc
|
||||
li
|
||||
a(href='gallery-hover.html') Hover Effects
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Email
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='email-application.html') Email App
|
||||
li
|
||||
a(href='email-compose.html') Email Compose
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Blog
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='blog.html') Blog Details
|
||||
li
|
||||
a(href='blog-single.html') Blog Single
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span chat
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='chat.html') Chat App
|
||||
li
|
||||
a(href='chat-video.html') Video chat
|
||||
li
|
||||
a(href='friend-list.html') Friend List
|
||||
li
|
||||
a.sidebar-header(href='support-ticket.html')
|
||||
span Support Ticket
|
||||
li
|
||||
a.sidebar-header(href='to-do.html')
|
||||
span To-Do
|
||||
li
|
||||
a.sidebar-header(href='../index.html')
|
||||
span Landing page
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Ecommerce
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='product.html') Product
|
||||
li
|
||||
a(href='product-page.html') Product page
|
||||
li
|
||||
a(href='product-list.html') Product list
|
||||
li
|
||||
a(href='payment-details.html') Payment Details
|
||||
li
|
||||
a(href='invoice-template.html') Invoice
|
||||
li
|
||||
a.sidebar-header(href='pricing.html')
|
||||
span Pricing
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.font-primary(data-feather='file-plus')
|
||||
| Pages
|
||||
ul
|
||||
li
|
||||
a.sidebar-header(href='sample-page.html')
|
||||
span Sample page
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Search Pages
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='search.html') Search Website
|
||||
li
|
||||
a(href='search-images.html') Search Images
|
||||
li
|
||||
a(href='search-video.html') Search Video
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Error Page
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='error-400.html') Error 400
|
||||
li
|
||||
a(href='error-401.html') Error 401
|
||||
li
|
||||
a(href='error-403.html') Error 403
|
||||
li
|
||||
a(href='error-404.html') Error 404
|
||||
li
|
||||
a(href='error-500.html') Error 500
|
||||
li
|
||||
a(href='error-503.html') Error 503
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Authentication
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='login.html') Login Simple
|
||||
li
|
||||
a(href='login-image.html') Login with Bg Image
|
||||
li
|
||||
a(href='login-video.html') Login with Bg video
|
||||
li
|
||||
a(href='signup.html') Register Simple
|
||||
li
|
||||
a(href='signup-image.html') Register with Bg Image
|
||||
li
|
||||
a(href='signup-video.html') Register with Bg video
|
||||
li
|
||||
a(href='unlock.html') Unlock User
|
||||
li
|
||||
a(href='forget-password.html') Forget Password
|
||||
li
|
||||
a(href='reset-password.html') Reset Password
|
||||
li
|
||||
a.sidebar-header(href='javascript:void(0)')
|
||||
span Coming Soon
|
||||
ul.sidebar-submenu
|
||||
li
|
||||
a(href='comingsoon.html') Coming Simple
|
||||
li
|
||||
a(href='comingsoon-bg-img.html') Coming with Bg video
|
||||
li
|
||||
a(href='comingsoon-bg-video.html') Coming with Bg Image
|
||||
li
|
||||
a.sidebar-header(href='maintenance.html')
|
||||
span Maintenance
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.font-primary(data-feather='command')
|
||||
| Mega menu
|
||||
ul.mega-menu
|
||||
li
|
||||
.card-body
|
||||
.row
|
||||
.col-xl-3.list-unstyled
|
||||
div
|
||||
p.title
|
||||
| Builder [BS4+]
|
||||
span.badge.badge-success.ms-2 New
|
||||
div
|
||||
a(href='javascript:;') Page Builder
|
||||
div
|
||||
a(href='javascript:;') Form Builder
|
||||
div
|
||||
a(href='javascript:;') Button Builder
|
||||
.mt-3
|
||||
p.title Accordion
|
||||
div
|
||||
#accordionoc.default-according.style-1
|
||||
.card
|
||||
div
|
||||
h5.mb-0
|
||||
button.btn.btn-link.p-2(data-bs-toggle='collapse', data-bs-target='#collapseicon', aria-expanded='true', aria-controls='collapseicon')
|
||||
| Accordion 1
|
||||
#collapseicon.collapse.show(data-parent='#accordionoc')
|
||||
.card-body.p-2
|
||||
| Anim pariatur cliche reprehenderit.
|
||||
.card
|
||||
div
|
||||
h5.mb-0
|
||||
button.btn.btn-link.text-muted.collapsed.p-1(data-bs-toggle='collapse', data-bs-target='#collapseicon1', aria-expanded='false', aria-controls='collapseicon1')
|
||||
| Accordion 2
|
||||
#collapseicon1.collapse(data-parent='#accordionoc')
|
||||
.card-body.p-2
|
||||
| Anim pariatur cliche reprehenderit.
|
||||
.card
|
||||
div
|
||||
h5.mb-0
|
||||
button.btn.btn-link.text-muted.collapsed.p-1(data-bs-toggle='collapse', data-bs-target='#collapseicon2', aria-expanded='false', aria-controls='collapseicon2')
|
||||
| Accordion 3
|
||||
#collapseicon2.collapse(data-parent='#accordionoc')
|
||||
.card-body.p-2
|
||||
| Anim pariatur cliche reprehenderit.
|
||||
.col-xl-2.list-unstyled.xs-mt
|
||||
div
|
||||
p.title Drill Down
|
||||
.drilldown
|
||||
.drilldown-container
|
||||
.drilldown-root
|
||||
div
|
||||
a.font-primary.mt-0(href='javascript:void(0)') First Level Menu
|
||||
div
|
||||
a.ps-0(href='javascript:void(0)')
|
||||
i.icon-support
|
||||
| Base
|
||||
span.float-end →
|
||||
.drilldown-sub
|
||||
.drilldown-back
|
||||
a.font-primary.f-w-100(href='javascript:void(0)')
|
||||
span ←
|
||||
| Second Level Menu
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| State color
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Tabs
|
||||
span.float-end →
|
||||
.drilldown-sub
|
||||
.drilldown-back
|
||||
a.font-primary.f-w-100(href='javascript:void(0)')
|
||||
span ←
|
||||
| Third Level Menu
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Bootstrap Tabs
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Line Tabs
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Typography
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Progress
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Model
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Alert
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-angle-right
|
||||
| Popover
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-dropbox
|
||||
| Advanced
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-spin.fa-spinner
|
||||
| Animation
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-package
|
||||
| Icons
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-cloud-down
|
||||
| Buttons
|
||||
div
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-notepad
|
||||
| Forms
|
||||
div
|
||||
a.mb-0(href='javascript:void(0)')
|
||||
i.icon-harddrives
|
||||
| Tables
|
||||
.col-xl-3.galleria-list.clearfix.lg-mt
|
||||
div
|
||||
p.title Galleria
|
||||
div
|
||||
.galleria.row
|
||||
.col-6
|
||||
a(href='javascript:void(0)')
|
||||
img(src='../assets/images/slider/1.jpg', alt='')
|
||||
h4.username.text-ellipsis
|
||||
| Airi Satou
|
||||
small Algerian
|
||||
.col-6
|
||||
a(href='javascript:void(0)')
|
||||
img(src='../assets/images/slider/2.jpg', alt='')
|
||||
h4.username.text-ellipsis
|
||||
| Fiona Green
|
||||
small Korean
|
||||
.col-6.mb-0
|
||||
a(href='javascript:void(0)')
|
||||
img(src='../assets/images/slider/3.jpg', alt='')
|
||||
h4.username.text-ellipsis.mb-0
|
||||
| Gavin Joyce
|
||||
small Indian
|
||||
.col-6.mb-0
|
||||
a(href='javascript:void(0)')
|
||||
img(src='../assets/images/slider/4.jpg', alt='')
|
||||
h4.username.text-ellipsis.mb-0
|
||||
| Howard Hatfield
|
||||
small Japanese
|
||||
.col-xl-4.list-unstyled.custom-nav-img.lg-mt
|
||||
div
|
||||
p.title Contact Form
|
||||
div
|
||||
form.theme-form
|
||||
.form-group
|
||||
label.col-form-label.pt-0
|
||||
i.icon-user.pe-2
|
||||
| Your Name
|
||||
input.form-control(type='text', placeholder='Enter your name')
|
||||
.form-group
|
||||
label.col-form-label
|
||||
i.icon-email.pe-2
|
||||
| Your Email
|
||||
input.form-control(type='email', placeholder='Enter your emailid')
|
||||
.form-group
|
||||
label.col-form-label
|
||||
i.icon-comment.pe-2
|
||||
| Your Message
|
||||
textarea.form-control(placeholder='Enter your message', rows='2')
|
||||
.form-group.mb-0
|
||||
button.btn.btn-primary Send
|
||||
// vertical menu ends
|
||||
259
public/assets/pug/pages/starter-kit/boxed.pug
Normal file
259
public/assets/pug/pages/starter-kit/boxed.pug
Normal file
@@ -0,0 +1,259 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body.box-layout
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/starter-kit-sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Box Layout
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='../ltr/index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Starter Kit
|
||||
li.breadcrumb-item Page layout
|
||||
li.breadcrumb-item.active Boxed
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row.starter-main
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 Kick start your project development !
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !
|
||||
ul
|
||||
li
|
||||
p
|
||||
| viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.
|
||||
li
|
||||
p
|
||||
| Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.
|
||||
li
|
||||
p
|
||||
| It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !</p>
|
||||
| <ul>
|
||||
| <li><p>viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.</p></li>
|
||||
| <li><p>Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.</p></li>
|
||||
| <li><p>It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 What is starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time.
|
||||
ul
|
||||
li
|
||||
p Each layout includes basic components only.
|
||||
li
|
||||
p
|
||||
| Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.
|
||||
li
|
||||
p
|
||||
| Using template engine to generate whole template quickly with your selected layout and other custom changes.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time. </p>
|
||||
| <ul>
|
||||
| <li><p>Each layout includes basic components only.</p></li>
|
||||
| <li><p>Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.</p></li>
|
||||
| <li><p>Using template engine to generate whole template quickly with your selected layout and other custom changes.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 How to use starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
span.f-w-600 HTML
|
||||
p
|
||||
| If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.
|
||||
p
|
||||
span.f-w-600 PUG
|
||||
p
|
||||
| To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.
|
||||
.alert.alert-primary.inverse(role='alert')
|
||||
i.icon-info-alt
|
||||
h5 Tips!
|
||||
p
|
||||
| Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p><span class="f-w-600">HTML</span></p>
|
||||
| <p>If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.</p>
|
||||
| <p><span class="f-w-600">PUG</span></p>
|
||||
| <p>To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.</p>
|
||||
| <div class="alert alert-primary inverse" role="alert">
|
||||
| <i class="icon-info-alt"></i>
|
||||
| <h5>Tips!</h5>
|
||||
| <p>Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.</p>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Simple Card
|
||||
.card-body
|
||||
h6 HTML Ipsum Presents
|
||||
p
|
||||
strong Pellentesque habitant morbi tristique
|
||||
| senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
|
||||
| semper.
|
||||
em Aenean ultricies mi vitae est.
|
||||
| Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
|
||||
code commodo vitae
|
||||
| , ornare sit amet, wisi. Aenean
|
||||
| fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
|
||||
a(href='javascript:void(0)') Donec non enim
|
||||
| in turpis pulvinar facilisis. Ut felis.
|
||||
h6 Header Level 2
|
||||
ol
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
blockquote
|
||||
p
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada
|
||||
| tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
|
||||
h4
|
||||
| Header Level
|
||||
span.digits 3
|
||||
ul
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
pre.
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
dl
|
||||
dt Definition list
|
||||
dd
|
||||
| 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.
|
||||
dt Lorem ipsum dolor sit amet
|
||||
dd
|
||||
| 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.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 With Header
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0.card-no-border
|
||||
h5 With Header & No Border
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class & without header border
|
||||
code .border-bottom-0
|
||||
| class.
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Gingerbread brownie sweet roll cheesecake chocolate cake jelly beans marzipan gummies dessert. Jelly beans sugar plum cheesecake cookie oat cake soufflé.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
261
public/assets/pug/pages/starter-kit/footer-dark.pug
Normal file
261
public/assets/pug/pages/starter-kit/footer-dark.pug
Normal file
@@ -0,0 +1,261 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var footer_dark = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/starter-kit-sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-lg-6
|
||||
h3
|
||||
| Footer Dark
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='../ltr/index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Starter Kit
|
||||
li.breadcrumb-item Footers
|
||||
li.breadcrumb-item.active Footer Dark
|
||||
.col-lg-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row.starter-main
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 Kick start your project development !
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !
|
||||
ul
|
||||
li
|
||||
p
|
||||
| viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.
|
||||
li
|
||||
p
|
||||
| Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.
|
||||
li
|
||||
p
|
||||
| It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !</p>
|
||||
| <ul>
|
||||
| <li><p>viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.</p></li>
|
||||
| <li><p>Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.</p></li>
|
||||
| <li><p>It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 What is starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time.
|
||||
ul
|
||||
li
|
||||
p Each layout includes basic components only.
|
||||
li
|
||||
p
|
||||
| Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.
|
||||
li
|
||||
p
|
||||
| Using template engine to generate whole template quickly with your selected layout and other custom changes.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time. </p>
|
||||
| <ul>
|
||||
| <li><p>Each layout includes basic components only.</p></li>
|
||||
| <li><p>Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.</p></li>
|
||||
| <li><p>Using template engine to generate whole template quickly with your selected layout and other custom changes.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 How to use starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
span.f-w-600 HTML
|
||||
p
|
||||
| If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.
|
||||
p
|
||||
span.f-w-600 PUG
|
||||
p
|
||||
| To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.
|
||||
.alert.alert-primary.inverse(role='alert')
|
||||
i.icon-info-alt
|
||||
h5 Tips!
|
||||
p
|
||||
| Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p><span class="f-w-600">HTML</span></p>
|
||||
| <p>If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.</p>
|
||||
| <p><span class="f-w-600">PUG</span></p>
|
||||
| <p>To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.</p>
|
||||
| <div class="alert alert-primary inverse" role="alert">
|
||||
| <i class="icon-info-alt"></i>
|
||||
| <h5>Tips!</h5>
|
||||
| <p>Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.</p>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 Simple Card
|
||||
.card-body
|
||||
h6 HTML Ipsum Presents
|
||||
p
|
||||
strong Pellentesque habitant morbi tristique
|
||||
| senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
|
||||
| semper.
|
||||
em Aenean ultricies mi vitae est.
|
||||
| Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
|
||||
code commodo vitae
|
||||
| , ornare sit amet, wisi. Aenean
|
||||
| fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
|
||||
a(href='javascript:void(0)') Donec non enim
|
||||
| in turpis pulvinar facilisis. Ut felis.
|
||||
h6 Header Level 2
|
||||
ol
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
blockquote
|
||||
p
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada
|
||||
| tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
|
||||
h4
|
||||
| Header Level
|
||||
span.digits 3
|
||||
ul
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
pre.
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
dl
|
||||
dt Definition list
|
||||
dd
|
||||
| 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.
|
||||
dt Lorem ipsum dolor sit amet
|
||||
dd
|
||||
| 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.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 With Header
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0.card-no-border
|
||||
h5 With Header & No Border
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class & without header border
|
||||
code .border-bottom-0
|
||||
| class.
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Gingerbread brownie sweet roll cheesecake chocolate cake jelly beans marzipan gummies dessert. Jelly beans sugar plum cheesecake cookie oat cake soufflé.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
261
public/assets/pug/pages/starter-kit/footer-fixed.pug
Normal file
261
public/assets/pug/pages/starter-kit/footer-fixed.pug
Normal file
@@ -0,0 +1,261 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
-var footer_fix = true;
|
||||
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu.starter-kit-fix
|
||||
include ../../components/starter-kit-sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-lg-6
|
||||
h3
|
||||
| Footer Fix
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='../ltr/index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Starter Kit
|
||||
li.breadcrumb-item Footers
|
||||
li.breadcrumb-item.active Footer Fix
|
||||
.col-lg-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row.starter-main
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 Kick start your project development !
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !
|
||||
ul
|
||||
li
|
||||
p
|
||||
| viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.
|
||||
li
|
||||
p
|
||||
| Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.
|
||||
li
|
||||
p
|
||||
| It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !</p>
|
||||
| <ul>
|
||||
| <li><p>viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.</p></li>
|
||||
| <li><p>Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.</p></li>
|
||||
| <li><p>It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 What is starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time.
|
||||
ul
|
||||
li
|
||||
p Each layout includes basic components only.
|
||||
li
|
||||
p
|
||||
| Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.
|
||||
li
|
||||
p
|
||||
| Using template engine to generate whole template quickly with your selected layout and other custom changes.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time. </p>
|
||||
| <ul>
|
||||
| <li><p>Each layout includes basic components only.</p></li>
|
||||
| <li><p>Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.</p></li>
|
||||
| <li><p>Using template engine to generate whole template quickly with your selected layout and other custom changes.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 How to use starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
span.f-w-600 HTML
|
||||
p
|
||||
| If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.
|
||||
p
|
||||
span.f-w-600 PUG
|
||||
p
|
||||
| To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.
|
||||
.alert.alert-primary.inverse(role='alert')
|
||||
i.icon-info-alt
|
||||
h5 Tips!
|
||||
p
|
||||
| Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p><span class="f-w-600">HTML</span></p>
|
||||
| <p>If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.</p>
|
||||
| <p><span class="f-w-600">PUG</span></p>
|
||||
| <p>To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.</p>
|
||||
| <div class="alert alert-primary inverse" role="alert">
|
||||
| <i class="icon-info-alt"></i>
|
||||
| <h5>Tips!</h5>
|
||||
| <p>Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.</p>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 Simple Card
|
||||
.card-body
|
||||
h6 HTML Ipsum Presents
|
||||
p
|
||||
strong Pellentesque habitant morbi tristique
|
||||
| senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
|
||||
| semper.
|
||||
em Aenean ultricies mi vitae est.
|
||||
| Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
|
||||
code commodo vitae
|
||||
| , ornare sit amet, wisi. Aenean
|
||||
| fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
|
||||
a(href='javascript:void(0)') Donec non enim
|
||||
| in turpis pulvinar facilisis. Ut felis.
|
||||
h6 Header Level 2
|
||||
ol
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
blockquote
|
||||
p
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada
|
||||
| tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
|
||||
h4
|
||||
| Header Level
|
||||
span.digits 3
|
||||
ul
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
pre.
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
dl
|
||||
dt Definition list
|
||||
dd
|
||||
| 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.
|
||||
dt Lorem ipsum dolor sit amet
|
||||
dd
|
||||
| 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.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 With Header
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0.card-no-border
|
||||
h5 With Header & No Border
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class & without header border
|
||||
code .border-bottom-0
|
||||
| class.
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Gingerbread brownie sweet roll cheesecake chocolate cake jelly beans marzipan gummies dessert. Jelly beans sugar plum cheesecake cookie oat cake soufflé.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
259
public/assets/pug/pages/starter-kit/footer-light.pug
Normal file
259
public/assets/pug/pages/starter-kit/footer-light.pug
Normal file
@@ -0,0 +1,259 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/starter-kit-sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Footer Light
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='../ltr/index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Starter Kit
|
||||
li.breadcrumb-item Footers
|
||||
li.breadcrumb-item.active Footer Light
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row.starter-main
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 Kick start your project development !
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !
|
||||
ul
|
||||
li
|
||||
p
|
||||
| viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.
|
||||
li
|
||||
p
|
||||
| Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.
|
||||
li
|
||||
p
|
||||
| It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !</p>
|
||||
| <ul>
|
||||
| <li><p>viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.</p></li>
|
||||
| <li><p>Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.</p></li>
|
||||
| <li><p>It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 What is starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time.
|
||||
ul
|
||||
li
|
||||
p Each layout includes basic components only.
|
||||
li
|
||||
p
|
||||
| Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.
|
||||
li
|
||||
p
|
||||
| Using template engine to generate whole template quickly with your selected layout and other custom changes.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time. </p>
|
||||
| <ul>
|
||||
| <li><p>Each layout includes basic components only.</p></li>
|
||||
| <li><p>Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.</p></li>
|
||||
| <li><p>Using template engine to generate whole template quickly with your selected layout and other custom changes.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 How to use starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
span.f-w-600 HTML
|
||||
p
|
||||
| If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.
|
||||
p
|
||||
span.f-w-600 PUG
|
||||
p
|
||||
| To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.
|
||||
.alert.alert-primary.inverse(role='alert')
|
||||
i.icon-info-alt
|
||||
h5 Tips!
|
||||
p
|
||||
| Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p><span class="f-w-600">HTML</span></p>
|
||||
| <p>If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.</p>
|
||||
| <p><span class="f-w-600">PUG</span></p>
|
||||
| <p>To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.</p>
|
||||
| <div class="alert alert-primary inverse" role="alert">
|
||||
| <i class="icon-info-alt"></i>
|
||||
| <h5>Tips!</h5>
|
||||
| <p>Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.</p>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 Simple Card
|
||||
.card-body
|
||||
h6 HTML Ipsum Presents
|
||||
p
|
||||
strong Pellentesque habitant morbi tristique
|
||||
| senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
|
||||
| semper.
|
||||
em Aenean ultricies mi vitae est.
|
||||
| Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
|
||||
code commodo vitae
|
||||
| , ornare sit amet, wisi. Aenean
|
||||
| fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
|
||||
a(href='javascript:void(0)') Donec non enim
|
||||
| in turpis pulvinar facilisis. Ut felis.
|
||||
h6 Header Level 2
|
||||
ol
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
blockquote
|
||||
p
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada
|
||||
| tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
|
||||
h4
|
||||
| Header Level
|
||||
span.digits 3
|
||||
ul
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
pre.
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
dl
|
||||
dt Definition list
|
||||
dd
|
||||
| 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.
|
||||
dt Lorem ipsum dolor sit amet
|
||||
dd
|
||||
| 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.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 With Header
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0.card-no-border
|
||||
h5 With Header & No Border
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class & without header border
|
||||
code .border-bottom-0
|
||||
| class.
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Gingerbread brownie sweet roll cheesecake chocolate cake jelly beans marzipan gummies dessert. Jelly beans sugar plum cheesecake cookie oat cake soufflé.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
260
public/assets/pug/pages/starter-kit/index.pug
Normal file
260
public/assets/pug/pages/starter-kit/index.pug
Normal file
@@ -0,0 +1,260 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/starter-kit-sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Layout Light
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='../ltr/index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Starter Kit
|
||||
li.breadcrumb-item Color Version
|
||||
li.breadcrumb-item.active Layout Light
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row.starter-main
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Kick start your project development !
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !
|
||||
ul
|
||||
li
|
||||
p
|
||||
| viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.
|
||||
li
|
||||
p
|
||||
| Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.
|
||||
li
|
||||
p
|
||||
| It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !</p>
|
||||
| <ul>
|
||||
| <li><p>viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.</p></li>
|
||||
| <li><p>Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.</p></li>
|
||||
| <li><p>It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 What is starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time.
|
||||
ul
|
||||
li
|
||||
p Each layout includes basic components only.
|
||||
li
|
||||
p
|
||||
| Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.
|
||||
li
|
||||
p
|
||||
| Using template engine to generate whole template quickly with your selected layout and other custom changes.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time. </p>
|
||||
| <ul>
|
||||
| <li><p>Each layout includes basic components only.</p></li>
|
||||
| <li><p>Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.</p></li>
|
||||
| <li><p>Using template engine to generate whole template quickly with your selected layout and other custom changes.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 How to use starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
span.f-w-600 HTML
|
||||
p
|
||||
| If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.
|
||||
p
|
||||
span.f-w-600 PUG
|
||||
p
|
||||
| To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.
|
||||
.alert.alert-primary.inverse(role='alert')
|
||||
i.icon-info-alt
|
||||
h5 Tips!
|
||||
p
|
||||
| Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p><span class="f-w-600">HTML</span></p>
|
||||
| <p>If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.</p>
|
||||
| <p><span class="f-w-600">PUG</span></p>
|
||||
| <p>To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.</p>
|
||||
| <div class="alert alert-primary inverse" role="alert">
|
||||
| <i class="icon-info-alt"></i>
|
||||
| <h5>Tips!</h5>
|
||||
| <p>Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.</p>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Simple Card
|
||||
.card-body
|
||||
h6 HTML Ipsum Presents
|
||||
p
|
||||
strong Pellentesque habitant morbi tristique
|
||||
| senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
|
||||
| semper.
|
||||
em Aenean ultricies mi vitae est.
|
||||
| Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
|
||||
code commodo vitae
|
||||
| , ornare sit amet, wisi. Aenean
|
||||
| fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
|
||||
a(href='#') Donec non enim
|
||||
| in turpis pulvinar facilisis. Ut felis.
|
||||
h6 Header Level 2
|
||||
ol
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
.figure.d-block
|
||||
blockquote.blockquote
|
||||
p
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada
|
||||
| tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
|
||||
h4
|
||||
| Header Level
|
||||
span 3
|
||||
ul
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
pre.
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
dl
|
||||
dt Definition list
|
||||
dd
|
||||
| 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.
|
||||
dt Lorem ipsum dolor sit amet
|
||||
dd
|
||||
| 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.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 With Header
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.pb-0.card-no-border
|
||||
h5 With Header & No Border
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header.pb-0
|
||||
| class & without header border
|
||||
code .border-bottom-0
|
||||
| class.
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header.pb-0
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Gingerbread brownie sweet roll cheesecake chocolate cake jelly beans marzipan gummies dessert. Jelly beans sugar plum cheesecake cookie oat cake soufflé.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
260
public/assets/pug/pages/starter-kit/layout-dark.pug
Normal file
260
public/assets/pug/pages/starter-kit/layout-dark.pug
Normal file
@@ -0,0 +1,260 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body.dark-only
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/starter-kit-sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Layout dark
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='../ltr/index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Starter Kit
|
||||
li.breadcrumb-item Color Version
|
||||
li.breadcrumb-item.active Layout dark
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row.starter-main
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.d-flex.align-items-center.justify-content-between
|
||||
h5 Kick start your project development !
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-white
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !
|
||||
ul
|
||||
li
|
||||
p
|
||||
| viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.
|
||||
li
|
||||
p
|
||||
| Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.
|
||||
li
|
||||
p
|
||||
| It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !</p>
|
||||
| <ul>
|
||||
| <li><p>viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.</p></li>
|
||||
| <li><p>Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.</p></li>
|
||||
| <li><p>It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.d-flex.align-items-center.justify-content-between
|
||||
h5 What is starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-white
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time.
|
||||
ul
|
||||
li
|
||||
p Each layout includes basic components only.
|
||||
li
|
||||
p
|
||||
| Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.
|
||||
li
|
||||
p
|
||||
| Using template engine to generate whole template quickly with your selected layout and other custom changes.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time. </p>
|
||||
| <ul>
|
||||
| <li><p>Each layout includes basic components only.</p></li>
|
||||
| <li><p>Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.</p></li>
|
||||
| <li><p>Using template engine to generate whole template quickly with your selected layout and other custom changes.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.d-flex.align-items-center.justify-content-between
|
||||
h5 How to use starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-white
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
span.f-w-600 HTML
|
||||
p
|
||||
| If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.
|
||||
p
|
||||
span.f-w-600 PUG
|
||||
p
|
||||
| To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.
|
||||
.alert.alert-primary.inverse(role='alert')
|
||||
i.icon-info-alt
|
||||
h5 Tips!
|
||||
p
|
||||
| Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p><span class="f-w-600">HTML</span></p>
|
||||
| <p>If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.</p>
|
||||
| <p><span class="f-w-600">PUG</span></p>
|
||||
| <p>To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.</p>
|
||||
| <div class="alert alert-primary inverse" role="alert">
|
||||
| <i class="icon-info-alt"></i>
|
||||
| <h5>Tips!</h5>
|
||||
| <p>Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.</p>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Simple Card
|
||||
.card-body
|
||||
h6 HTML Ipsum Presents
|
||||
p
|
||||
strong Pellentesque habitant morbi tristique
|
||||
| senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
|
||||
| semper.
|
||||
em Aenean ultricies mi vitae est.
|
||||
| Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
|
||||
code commodo vitae
|
||||
| , ornare sit amet, wisi. Aenean
|
||||
| fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
|
||||
a(href='#') Donec non enim
|
||||
| in turpis pulvinar facilisis. Ut felis.
|
||||
h6 Header Level 2
|
||||
ol
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
.figure.d-block
|
||||
blockquote.blockquote
|
||||
p
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada
|
||||
| tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
|
||||
h4
|
||||
| Header Level
|
||||
span 3
|
||||
ul
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
pre.
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
dl
|
||||
dt Definition list
|
||||
dd
|
||||
| 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.
|
||||
dt Lorem ipsum dolor sit amet
|
||||
dd
|
||||
| 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.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header
|
||||
h5 With Header
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header
|
||||
| class
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.card-no-border
|
||||
h5 With Header & No Border
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header
|
||||
| class & without header border
|
||||
code .border-bottom-0
|
||||
| class.
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Gingerbread brownie sweet roll cheesecake chocolate cake jelly beans marzipan gummies dessert. Jelly beans sugar plum cheesecake cookie oat cake soufflé.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
259
public/assets/pug/pages/starter-kit/layout-rtl.pug
Normal file
259
public/assets/pug/pages/starter-kit/layout-rtl.pug
Normal file
@@ -0,0 +1,259 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en' , dir='rtl')
|
||||
include ../../components/header-files
|
||||
body.rtl
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/starter-kit-sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-lg-6
|
||||
h3
|
||||
| Layout RTL
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='../ltr/index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Starter Kit
|
||||
li.breadcrumb-item Page layout
|
||||
li.breadcrumb-item.active Layout RTL
|
||||
.col-lg-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row.starter-main
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Kick start your project development !
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !
|
||||
ul
|
||||
li
|
||||
p
|
||||
| viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.
|
||||
li
|
||||
p
|
||||
| Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.
|
||||
li
|
||||
p
|
||||
| It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, viho Admin provides useful features to kick start your project development with no efforts !</p>
|
||||
| <ul>
|
||||
| <li><p>viho Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.</p></li>
|
||||
| <li><p>Every components in viho Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.</p></li>
|
||||
| <li><p>It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 What is starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time.
|
||||
ul
|
||||
li
|
||||
p Each layout includes basic components only.
|
||||
li
|
||||
p
|
||||
| Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.
|
||||
li
|
||||
p
|
||||
| Using template engine to generate whole template quickly with your selected layout and other custom changes.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p>Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time. </p>
|
||||
| <ul>
|
||||
| <li><p>Each layout includes basic components only.</p></li>
|
||||
| <li><p>Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.</p></li>
|
||||
| <li><p>Using template engine to generate whole template quickly with your selected layout and other custom changes.</p></li>
|
||||
| </ul>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 How to use starter kit ?
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
span.f-w-600 HTML
|
||||
p
|
||||
| If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.
|
||||
p
|
||||
span.f-w-600 PUG
|
||||
p
|
||||
| To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.
|
||||
.alert.alert-primary.inverse(role='alert')
|
||||
i.icon-info-alt
|
||||
h5 Tips!
|
||||
p
|
||||
| Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p><span class="f-w-600">HTML</span></p>
|
||||
| <p>If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.</p>
|
||||
| <p><span class="f-w-600">PUG</span></p>
|
||||
| <p>To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.</p>
|
||||
| <div class="alert alert-primary inverse" role="alert">
|
||||
| <i class="icon-info-alt"></i>
|
||||
| <h5>Tips!</h5>
|
||||
| <p>Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.</p>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Simple Card
|
||||
.card-body
|
||||
h6 HTML Ipsum Presents
|
||||
p
|
||||
strong Pellentesque habitant morbi tristique
|
||||
| senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
|
||||
| semper.
|
||||
em Aenean ultricies mi vitae est.
|
||||
| Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
|
||||
code commodo vitae
|
||||
| , ornare sit amet, wisi. Aenean
|
||||
| fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
|
||||
a(href='javascript:void(0)') Donec non enim
|
||||
| in turpis pulvinar facilisis. Ut felis.
|
||||
h6 Header Level 2
|
||||
ol
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
blockquote
|
||||
p
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada
|
||||
| tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
|
||||
h4
|
||||
| Header Level
|
||||
span.digits 3
|
||||
ul
|
||||
li Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
li Aliquam tincidunt mauris eu risus.
|
||||
pre.
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
dl
|
||||
dt Definition list
|
||||
dd
|
||||
| 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.
|
||||
dt Lorem ipsum dolor sit amet
|
||||
dd
|
||||
| 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.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header
|
||||
h5 With Header
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header
|
||||
| class
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
|
||||
.col-md-6
|
||||
.card
|
||||
.card-header.card-no-border
|
||||
h5 With Header & No Border
|
||||
.card-body
|
||||
h5 Content title
|
||||
p
|
||||
| Add a heading to card with
|
||||
code .card-header
|
||||
| class & without header border
|
||||
code .border-bottom-0
|
||||
| class.
|
||||
p
|
||||
| You may also include any <h1>-<h6> with a
|
||||
code .card-header
|
||||
| &
|
||||
code .card-title
|
||||
| class to add heading.
|
||||
p
|
||||
| Gingerbread brownie sweet roll cheesecake chocolate cake jelly beans marzipan gummies dessert. Jelly beans sugar plum cheesecake cookie oat cake soufflé.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
391
public/assets/pug/pages/template/AOS.pug
Normal file
391
public/assets/pug/pages/template/AOS.pug
Normal file
@@ -0,0 +1,391 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var photo_swipe = true;
|
||||
- var isotope = true;
|
||||
- var aos = true;
|
||||
- var page_aos = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| AOS Animation
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Animation
|
||||
li.breadcrumb-item.active AOS Animation
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 AOS Example animation
|
||||
.card-body
|
||||
#aniimated-thumbnials.row.gallery.grid.my-gallery
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-down')
|
||||
a(href='../assets/images/big-masonry/1.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/1.jpg', alt='Image description')
|
||||
figcaption Image caption 1
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out-down')
|
||||
a(href='../assets/images/big-masonry/2.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/2.jpg', alt='Image description')
|
||||
figcaption Image caption 2
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/3.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/3.jpg', alt='Image description')
|
||||
figcaption Image caption 3
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
|
||||
a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
|
||||
figcaption Image caption 4
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
|
||||
figcaption Image caption 5
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
|
||||
a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
|
||||
figcaption Image caption 6
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
|
||||
figcaption Image caption 7
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
|
||||
a(href='../assets/images/big-masonry/8.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description')
|
||||
figcaption Image caption 8
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
|
||||
figcaption Image caption 9
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
|
||||
a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
|
||||
figcaption Image caption 10
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/11.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description')
|
||||
figcaption Image caption 11
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
|
||||
a(href='../assets/images/big-masonry/12.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description')
|
||||
figcaption Image caption 12
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/14.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description')
|
||||
figcaption Image caption 13
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-left')
|
||||
a(href='../assets/images/big-masonry/15.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description')
|
||||
figcaption Image caption 14
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/13.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description')
|
||||
figcaption Image caption 15
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out')
|
||||
a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
|
||||
figcaption Image caption 16
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-right')
|
||||
a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
|
||||
figcaption Image caption 17
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out')
|
||||
a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
|
||||
figcaption Image caption 18
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out-up')
|
||||
a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
|
||||
figcaption Image caption 19
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out-down')
|
||||
a(href='../assets/images/big-masonry/8.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description')
|
||||
figcaption Image caption 20
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
|
||||
figcaption Image caption 21
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='slide-up')
|
||||
a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
|
||||
figcaption Image caption 22
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
|
||||
figcaption Image caption 23
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
|
||||
a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
|
||||
figcaption Image caption 24
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/11.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description')
|
||||
figcaption Image caption 25
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='fade-up')
|
||||
a(href='../assets/images/big-masonry/12.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description')
|
||||
figcaption Image caption 26
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/14.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description')
|
||||
figcaption Image caption 27
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-left')
|
||||
a(href='../assets/images/big-masonry/15.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description')
|
||||
figcaption Image caption 28
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-down')
|
||||
a(href='../assets/images/big-masonry/13.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description')
|
||||
figcaption Image caption 29
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out')
|
||||
a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
|
||||
figcaption Image caption 30
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='flip-right')
|
||||
a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
|
||||
figcaption Image caption 31
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out')
|
||||
a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
|
||||
figcaption Image caption 32
|
||||
figure.grid-item.col-sm-4.col-md-3(data-aos='zoom-out-up')
|
||||
a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950')
|
||||
img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
|
||||
figcaption Image caption 33
|
||||
// Root element of PhotoSwipe. Must have class pswp.
|
||||
.pswp(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
//
|
||||
Background of PhotoSwipe.
|
||||
It's a separate element, as animating opacity is faster than rgba().
|
||||
.pswp__bg
|
||||
// Slides wrapper with overflow:hidden.
|
||||
.pswp__scroll-wrap
|
||||
// Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory.
|
||||
// don't modify these 3 pswp__item elements, data is added later on.
|
||||
.pswp__container
|
||||
.pswp__item
|
||||
.pswp__item
|
||||
.pswp__item
|
||||
// Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.
|
||||
.pswp__ui.pswp__ui--hidden
|
||||
.pswp__top-bar
|
||||
// Controls are self-explanatory. Order can be changed.
|
||||
.pswp__counter
|
||||
button.pswp__button.pswp__button--close(title='Close (Esc)')
|
||||
button.pswp__button.pswp__button--share(title='Share')
|
||||
button.pswp__button.pswp__button--fs(title='Toggle fullscreen')
|
||||
button.pswp__button.pswp__button--zoom(title='Zoom in/out')
|
||||
// Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR
|
||||
.pswp__preloader
|
||||
.pswp__preloader__icn
|
||||
.pswp__preloader__cut
|
||||
.pswp__preloader__donut
|
||||
.pswp__share-modal.pswp__share-modal--hidden.pswp__single-tap
|
||||
.pswp__share-tooltip
|
||||
button.pswp__button.pswp__button--arrow--left(title='Previous (arrow left)')
|
||||
button.pswp__button.pswp__button--arrow--right(title='Next (arrow right)')
|
||||
.pswp__caption
|
||||
.pswp__caption__center
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Init AOS
|
||||
.card-body
|
||||
div
|
||||
span.comment
|
||||
| // The Below Function is example of how to initlize reveal
|
||||
.line
|
||||
span
|
||||
| <script>
|
||||
span
|
||||
br
|
||||
code AOS.init();
|
||||
br
|
||||
span <
|
||||
| /script
|
||||
span >
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 How to use it?
|
||||
span
|
||||
| All you have to do is to add
|
||||
code data-aos
|
||||
| attribute to html element, like so:
|
||||
.card-body
|
||||
.txt-primary
|
||||
span <
|
||||
| div data-aos="animation_name"
|
||||
span >
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Advanced settings
|
||||
span
|
||||
| These settings can be set both on certain elements, or as default while initializing script (in options object without
|
||||
code data- part).
|
||||
.card-body.table-responsive
|
||||
table.table.table-bordered.table-striped
|
||||
thead
|
||||
tr
|
||||
th Attribute
|
||||
th Description
|
||||
th Example value
|
||||
th Default value
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
em
|
||||
code data-aos-offset
|
||||
td Change offset to trigger animations sooner or later (px)
|
||||
td 200
|
||||
td 120
|
||||
tr
|
||||
td
|
||||
em
|
||||
code data-aos-duration
|
||||
td *Duration of animation (ms)
|
||||
td 600
|
||||
td 400
|
||||
tr
|
||||
td
|
||||
em
|
||||
code data-aos-easing
|
||||
td Choose timing function to ease elements in different ways
|
||||
td ease-in-sine
|
||||
td ease
|
||||
tr
|
||||
td
|
||||
em
|
||||
code data-aos-delay
|
||||
td Delay animation (ms)
|
||||
td 300
|
||||
td 0
|
||||
tr
|
||||
td
|
||||
em
|
||||
code data-aos-anchor
|
||||
td
|
||||
| Anchor element, whose offset will be counted to trigger animation instead of actual elements offset
|
||||
td #selector
|
||||
td null
|
||||
tr
|
||||
td
|
||||
em
|
||||
code data-aos-anchor-placement
|
||||
td
|
||||
| Anchor placement - which one position of element on the screen should trigger animation
|
||||
td top-center
|
||||
td top-bottom
|
||||
tr
|
||||
td
|
||||
em
|
||||
code data-aos-once
|
||||
td
|
||||
| Choose wheter animation should fire once, or every time you scroll up/down to element
|
||||
td true
|
||||
td false
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Animation
|
||||
span There are serveral predefined animations you can use already:
|
||||
.card-body
|
||||
ul.line
|
||||
li
|
||||
h5 Fade animations:
|
||||
ul.ps-4.mb-4.list-circle
|
||||
li fade
|
||||
li fade-up
|
||||
li fade-down
|
||||
li fade-left
|
||||
li fade-right
|
||||
li fade-up-right
|
||||
li fade-up-left
|
||||
li fade-down-right
|
||||
li fade-down-left
|
||||
li
|
||||
h5 Flip animations:
|
||||
ul.ps-4.mb-4.list-circle
|
||||
li flip-up
|
||||
li flip-down
|
||||
li flip-left
|
||||
li flip-right
|
||||
li
|
||||
h5 Slide animations:
|
||||
ul.ps-4.mb-4.list-circle
|
||||
li slide-up
|
||||
li slide-down
|
||||
li slide-left
|
||||
li slide-right
|
||||
li
|
||||
h5 Zoom animations:
|
||||
ul.ps-4.list-circle
|
||||
li zoom-in
|
||||
li zoom-in-up
|
||||
li zoom-in-down
|
||||
li zoom-in-left
|
||||
li zoom-in-right
|
||||
li zoom-out
|
||||
li zoom-out-up
|
||||
li zoom-out-down
|
||||
li zoom-out-left
|
||||
li zoom-out-right
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Anchor placement:
|
||||
.card-body
|
||||
ul.ps-4.list-circle.line
|
||||
li top-bottom
|
||||
li top-center
|
||||
li top-top
|
||||
li center-bottom
|
||||
li center-center
|
||||
li center-top
|
||||
li bottom-bottom
|
||||
li bottom-center
|
||||
li bottom-top
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Easing functions:
|
||||
.card-body
|
||||
ul.ps-4.list-circle.line
|
||||
li linear
|
||||
li ease
|
||||
li ease-in
|
||||
li ease-out
|
||||
li ease-in-out
|
||||
li ease-in-back
|
||||
li ease-out-back
|
||||
li ease-in-out-back
|
||||
li ease-in-sine
|
||||
li ease-out-sine
|
||||
li ease-in-out-sine
|
||||
li ease-in-quad
|
||||
li ease-out-quad
|
||||
li ease-in-out-quad
|
||||
li ease-in-cubic
|
||||
li ease-out-cubic
|
||||
li ease-in-out-cubic
|
||||
li ease-in-quart
|
||||
li ease-out-quart
|
||||
li ease-in-out-quart
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
282
public/assets/pug/pages/template/according.pug
Normal file
282
public/assets/pug/pages/template/according.pug
Normal file
@@ -0,0 +1,282 @@
|
||||
- var theme_customizer = true;
|
||||
- var sidebar = true;
|
||||
- var scrollbar = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Accordion
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Base
|
||||
li.breadcrumb-item.active Accordion
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-lg-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Basic Accordion
|
||||
span
|
||||
| Using the
|
||||
a(href='#') card
|
||||
| component, you can extend the default collapse behavior to create an accordion.
|
||||
.card-body
|
||||
#accordion.default-according
|
||||
.card
|
||||
#headingOne.card-header
|
||||
h5.mb-0
|
||||
button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseOne', aria-expanded='true', aria-controls='collapseOne')
|
||||
| Collapsible Group Item #
|
||||
span 1
|
||||
#collapseOne.collapse.show(aria-labelledby='headingOne', data-bs-parent='#accordion')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
||||
.card
|
||||
#headingTwo.card-header
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed(data-bs-toggle='collapse', data-bs-target='#collapseTwo', aria-expanded='false', aria-controls='collapseTwo')
|
||||
| Collapsible Group Item #
|
||||
span 2
|
||||
#collapseTwo.collapse(aria-labelledby='headingTwo', data-bs-parent='#accordion')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
||||
.card
|
||||
#headingThree.card-header
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed(data-bs-toggle='collapse', data-bs-target='#collapseThree', aria-expanded='false', aria-controls='collapseThree')
|
||||
| Collapsible Group Item #
|
||||
span 3
|
||||
#collapseThree.collapse(aria-labelledby='headingThree', data-bs-parent='#accordion')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
|
||||
.col-sm-12.col-lg-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 All Close Accordion
|
||||
span
|
||||
| Using the
|
||||
a(href='#') card
|
||||
| component, you can extend the default collapse behavior to create an accordion.
|
||||
.card-body
|
||||
#accordionclose.default-according
|
||||
.card
|
||||
#heading1.card-header
|
||||
h5.mb-0
|
||||
button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapse1', aria-expanded='true', aria-controls='heading1')
|
||||
| Collapsible Group Item #
|
||||
span 1
|
||||
#collapse1.collapse(aria-labelledby='heading1', data-bs-parent='#accordionclose')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#heading2.card-header
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed(data-bs-toggle='collapse', data-bs-target='#collapse2', aria-expanded='false', aria-controls='heading2')
|
||||
| Collapsible Group Item #
|
||||
span 2
|
||||
#collapse2.collapse(aria-labelledby='heading2', data-bs-parent='#accordionclose')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#heading3.card-header
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed(data-bs-toggle='collapse', data-bs-target='#collapse3', aria-expanded='false', aria-controls='collapse3')
|
||||
| Collapsible Group Item #
|
||||
span 3
|
||||
#collapse3.collapse(aria-labelledby='heading3', data-bs-parent='#accordionclose')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#heading4.card-header
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed(data-bs-toggle='collapse', data-bs-target='#collapse4', aria-expanded='false', aria-controls='collapse4')
|
||||
| Collapsible Group Item #
|
||||
span 4
|
||||
#collapse4.collapse(aria-labelledby='heading4', data-bs-parent='#accordionclose')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#heading5.card-header
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed(data-bs-toggle='collapse', data-bs-target='#collapse5', aria-expanded='false', aria-controls='collapse5')
|
||||
| Collapsible Group Item #
|
||||
span 5
|
||||
#collapse5.collapse(aria-labelledby='heading5', data-bs-parent='#accordionclose')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.col-sm-12.col-lg-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Color Accordion
|
||||
span
|
||||
| Add
|
||||
code .bg-*
|
||||
| class to add background color with card-header.
|
||||
.card-body
|
||||
#accordion1.default-according
|
||||
.card
|
||||
#headingFour.card-header.bg-primary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.text-white(data-bs-toggle='collapse', data-bs-target='#collapseFour', aria-expanded='true', aria-controls='collapseFour')
|
||||
| Collapsible Group Item #
|
||||
span 1
|
||||
#collapseFour.collapse.show(aria-labelledby='headingOne', data-bs-parent='#accordion1')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#headingFive.card-header.bg-primary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed.text-white(data-bs-toggle='collapse', data-bs-target='#collapseFive', aria-expanded='false', aria-controls='collapseFive')
|
||||
| Collapsible Group Item #
|
||||
span 2
|
||||
#collapseFive.collapse(aria-labelledby='headingFive', data-bs-parent='#accordion1')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#headingSix.card-header.bg-primary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed.text-white(data-bs-toggle='collapse', data-bs-target='#collapseSix', aria-expanded='false', aria-controls='collapseSix')
|
||||
| Collapsible Group Item #
|
||||
span 3
|
||||
#collapseSix.collapse(aria-labelledby='headingSix', data-bs-parent='#accordion1')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.col-sm-12.col-lg-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Color Accordion
|
||||
span
|
||||
| Add
|
||||
code .bg-*
|
||||
| class to add background color with card-header.
|
||||
.card-body
|
||||
#accordion2.default-according
|
||||
.card
|
||||
#headingseven.card-header.bg-secondary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.text-white(data-bs-toggle='collapse', data-bs-target='#collapseseven', aria-expanded='true')
|
||||
| Collapsible Group Item #
|
||||
span 1
|
||||
#collapseseven.collapse.show(aria-labelledby='headingOne', data-bs-parent='#accordion2')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#headingeight.card-header.bg-secondary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed.text-white(data-bs-toggle='collapse', data-bs-target='#collapseeight', aria-expanded='false', aria-controls='collapseeight')
|
||||
| Collapsible Group Item #
|
||||
span 2
|
||||
#collapseeight.collapse(aria-labelledby='headingeight', data-bs-parent='#accordion2')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#headingnine.card-header.bg-secondary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed.text-white(data-bs-toggle='collapse', data-bs-target='#collapsenine', aria-expanded='false', aria-controls='collapsenine')
|
||||
| Collapsible Group Item #
|
||||
span 3
|
||||
#collapsenine.collapse(aria-labelledby='headingnine', data-bs-parent='#accordion2')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.col-sm-12.col-lg-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Accordion With Icon on Title
|
||||
span
|
||||
| Add
|
||||
code <i></i>
|
||||
| tag Along with icon class before title text.
|
||||
.card-body
|
||||
#accordionicon.default-according
|
||||
.card
|
||||
#heading11.card-header.bg-primary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.text-white(data-bs-toggle='collapse', data-bs-target='#collapse11', aria-expanded='true', aria-controls='collapse11')
|
||||
i.icofont.icofont-briefcase-alt-2
|
||||
| Collapsible Group Item #
|
||||
span 1
|
||||
#collapse11.collapse.show(aria-labelledby='headingOne', data-bs-parent='#accordionicon')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#heading22.card-header.bg-primary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed.text-white(data-bs-toggle='collapse', data-bs-target='#collapse22', aria-expanded='false', aria-controls='collapse22')
|
||||
i.icofont.icofont-support
|
||||
| Collapsible Group Item #
|
||||
span 2
|
||||
#collapse22.collapse(aria-labelledby='headingeight', data-bs-parent='#accordionicon')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
#heading33.card-header.bg-primary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed.text-white(data-bs-toggle='collapse', data-bs-target='#collapse44', aria-expanded='false', aria-controls='collapse44')
|
||||
i.icofont.icofont-tasks-alt
|
||||
| Collapsible Group Item #
|
||||
span 3
|
||||
#collapse44.collapse(data-bs-parent='#accordionicon')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.col-sm-12.col-lg-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Accordion open close icon
|
||||
span
|
||||
| Add
|
||||
code <i></i>
|
||||
| tag Along with icon class before title text.
|
||||
.card-body
|
||||
#accordionoc.default-according.style-1
|
||||
.card
|
||||
.card-header.bg-primary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.text-white(data-bs-toggle='collapse', data-bs-target='#collapseicon', aria-expanded='true', aria-controls='collapse11')
|
||||
i.icofont.icofont-briefcase-alt-2
|
||||
| Collapsible Group Item #
|
||||
span 1
|
||||
#collapseicon.collapse.show(aria-labelledby='collapseicon', data-bs-parent='#accordionoc')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
.card-header.bg-primary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed.text-white(data-bs-toggle='collapse', data-bs-target='#collapseicon1', aria-expanded='false')
|
||||
i.icofont.icofont-support
|
||||
| Collapsible Group Item #
|
||||
span 2
|
||||
#collapseicon1.collapse(aria-labelledby='headingeight', data-bs-parent='#accordionoc')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
.card
|
||||
.card-header.bg-primary
|
||||
h5.mb-0
|
||||
button.btn.btn-link.collapsed.text-white(data-bs-toggle='collapse', data-bs-target='#collapseicon2', aria-expanded='false', aria-controls='collapseicon2')
|
||||
i.icofont.icofont-tasks-alt
|
||||
| Collapsible Group Item #
|
||||
span 3
|
||||
#collapseicon2.collapse(data-bs-parent='#accordionoc')
|
||||
.card-body
|
||||
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
146
public/assets/pug/pages/template/ace-code-editor.pug
Normal file
146
public/assets/pug/pages/template/ace-code-editor.pug
Normal file
@@ -0,0 +1,146 @@
|
||||
- var theme_customizer = true;
|
||||
- var ace_editor = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| ACE Code Editor
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Editors
|
||||
li.breadcrumb-item.active ACE Code Editor
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Javascript Mode
|
||||
.card-body
|
||||
#editor.ace-editor
|
||||
| /* Sample JavaScript edit source */
|
||||
| // Define a module
|
||||
| var app = angular.module('app', ['ui.bootstrap']);
|
||||
| // Define a conroller.
|
||||
| app.controller('GrokController', ['$scope', '$filter',
|
||||
| function($scope, $filter) {
|
||||
| $scope.today = function() {
|
||||
| $scope.dt = new Date();
|
||||
| };
|
||||
| $scope.today();
|
||||
| $scope.isOpened = false;
|
||||
| $scope.open = function($event) {
|
||||
| $event.preventDefault();
|
||||
| $event.stopPropagation();
|
||||
| $scope.isOpened = true;
|
||||
| };
|
||||
| }]);
|
||||
| /* End of sample edit source */
|
||||
.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Html Mode
|
||||
.card-body
|
||||
#html-editor.ace-editor
|
||||
| <!--Page header start-->
|
||||
| <div class="page-header">
|
||||
| <div class="row">
|
||||
| <div class="col-xl-6">
|
||||
| <h3>Ace Text editor</h3>
|
||||
| <small>viho Admin panel</small>
|
||||
| </div>
|
||||
| <div class="col-xl-6">
|
||||
| <ol class="breadcrumb pull-right">
|
||||
| <li class="breadcrumb-item">
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-home
|
||||
| </li>
|
||||
| <li class="breadcrumb-item">Editor </li>
|
||||
| <li class="breadcrumb-item active">Ace Text editor</li>
|
||||
| </ol>
|
||||
| </div>
|
||||
| </div>
|
||||
| </div>
|
||||
| <!--Page header end-->
|
||||
.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 css Mode
|
||||
.card-body
|
||||
#css-editor.ace-editor
|
||||
| .text-layer
|
||||
| {
|
||||
| font: 12px Monaco, "Courier New", monospace;
|
||||
| font-size: 3vmin;
|
||||
| cursor: text;
|
||||
| }
|
||||
| .blinker {
|
||||
| animation: blink 1s linear infinite alternate;
|
||||
| }
|
||||
| @keyframes blink {
|
||||
| 0%, 40% {
|
||||
| opacity: 1
|
||||
| }
|
||||
| 40.5%, 100% {
|
||||
| opacity: 1
|
||||
| }
|
||||
| }
|
||||
| @document url(http://c9.io/), url-prefix(http://ace.c9.io/build/),
|
||||
| domain(c9.io), regexp("https:.*") /**/
|
||||
| {
|
||||
| /**/
|
||||
| img[title]:before
|
||||
| {
|
||||
| content: attr(title) "\AImage \retrieved from" attr(src); /**/
|
||||
| white-space: pre;
|
||||
| display: block;
|
||||
| background: url(asdasd); "err
|
||||
| }
|
||||
| }
|
||||
| @viewport {
|
||||
| min-zoom: 1;
|
||||
| max-zoom: 200%;
|
||||
| user-zoom: fixed;
|
||||
| }
|
||||
.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 php Mode
|
||||
.card-body
|
||||
#php-editor.ace-editor
|
||||
| <?php
|
||||
| function nfact($n) {
|
||||
| if ($n == 0) {
|
||||
| return 1;
|
||||
| }
|
||||
| else {
|
||||
| return $n * nfact($n - 1);
|
||||
| }
|
||||
| }
|
||||
| echo "\n\nPlease enter a whole number ... ";
|
||||
| $num = trim(fgets(STDIN));
|
||||
| // ===== PROCESS - Determing the factorial of the input number =====
|
||||
| $output = "\n\nFactorial " . $num . " = " . nfact($num) . "\n\n";
|
||||
| echo $output;
|
||||
| ?>
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
86
public/assets/pug/pages/template/add-post.pug
Normal file
86
public/assets/pug/pages/template/add-post.pug
Normal file
@@ -0,0 +1,86 @@
|
||||
- var theme_customizer = true;
|
||||
- var form_validation_custom= true;
|
||||
- var select2 = true;
|
||||
- var page_select2 = true;
|
||||
- var dropzone = true;
|
||||
- var ckeditor = true;
|
||||
- var email_app = true;
|
||||
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Add Post
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Blog
|
||||
li.breadcrumb-item.active Add Post
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Post Edit
|
||||
.card-body.add-post
|
||||
form.row.needs-validation(novalidate='')
|
||||
.col-sm-12
|
||||
.form-group
|
||||
label(for='validationCustom01') Title:
|
||||
input#validationCustom01.form-control(type='text', placeholder='Post Title', required='')
|
||||
.valid-feedback
|
||||
| Looks good!
|
||||
.form-group
|
||||
label Type:
|
||||
.m-checkbox-inline
|
||||
label.f-w-500(for='edo-ani')
|
||||
input#edo-ani.radio_animated(type='radio', name='rdo-ani', checked='')
|
||||
| Text
|
||||
label.f-w-500(for='edo-ani1')
|
||||
input#edo-ani1.radio_animated(type='radio', name='rdo-ani')
|
||||
| Image
|
||||
label.f-w-500(for='edo-ani2')
|
||||
input#edo-ani2.radio_animated(type='radio', name='rdo-ani', checked='')
|
||||
| Audio
|
||||
label.f-w-500(for='edo-ani3')
|
||||
input#edo-ani3.radio_animated(type='radio', name='rdo-ani')
|
||||
| Video
|
||||
.form-group
|
||||
label.d-block Category:
|
||||
select.js-example-placeholder-multiple.col-sm-12(multiple='multiple')
|
||||
option(value='AL') Lifestyle
|
||||
option(value='WY') Travel
|
||||
.email-wrapper
|
||||
.theme-form
|
||||
.form-group
|
||||
label Content:
|
||||
textarea#text-box(name='text-box', cols='10', rows='2')
|
||||
|
||||
form#singleFileUpload.dropzone.digits(action='/upload.php')
|
||||
.m-0.dz-message.needsclick
|
||||
i.icon-cloud-up
|
||||
h6.mb-0 Drop files here or click to upload.
|
||||
.btn-showcase
|
||||
button.btn.btn-primary(type='submit') Post
|
||||
input.btn.btn-light(type='reset', value='Discard')
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
565
public/assets/pug/pages/template/alert.pug
Normal file
565
public/assets/pug/pages/template/alert.pug
Normal file
@@ -0,0 +1,565 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var height_equal = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Alert
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Base
|
||||
li.breadcrumb-item.active Alert
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Theme Color Alerts
|
||||
span
|
||||
| Theme color Archive just adding class
|
||||
code .dark
|
||||
.card-body
|
||||
.alert.alert-primary.dark(role='alert')
|
||||
p This is a info alert—check it out!
|
||||
.alert.alert-secondary.dark(role='alert')
|
||||
p This is a light alert—check it out!
|
||||
.alert.alert-success.dark(role='alert')
|
||||
p This is a success alert—check it out!
|
||||
.alert.alert-info.dark(role='alert')
|
||||
p This is a info alert—check it out!
|
||||
.alert.alert-warning.dark(role='alert')
|
||||
p This is a warning alert—check it out!
|
||||
.alert.alert-danger.dark(role='alert')
|
||||
p This is a danger alert—check it out!
|
||||
.alert.alert-light.dark(role='alert')
|
||||
p This is a light alert—check it out!
|
||||
.alert.alert-dark.dark(role='alert')
|
||||
p This is a dark alert—check it out!
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Link color in theme-color
|
||||
span
|
||||
| Use the
|
||||
code .alert-link
|
||||
| utility class to quickly provide matching colored links within any alert
|
||||
.card-body
|
||||
.alert.alert-primary.dark(role='alert')
|
||||
p
|
||||
| This is a primary alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-secondary.dark(role='alert')
|
||||
p
|
||||
| This is a secondary alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-success.dark(role='alert')
|
||||
p
|
||||
| This is a success alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-info.dark(role='alert')
|
||||
p
|
||||
| This is a info alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-warning.dark(role='alert')
|
||||
p
|
||||
| This is a warning alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-danger.dark(role='alert')
|
||||
p
|
||||
| This is a danger alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-light.dark(role='alert')
|
||||
p
|
||||
| This is a light alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-dark.dark(role='alert')
|
||||
p
|
||||
| This is a light alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.col-sm-12.col-xl-6
|
||||
.card.height-equal
|
||||
.card-header.pb-0
|
||||
h5 Dismissing
|
||||
span
|
||||
| To animate alerts when dismissing them, be sure to add the .fade and .show classes.
|
||||
.card-body
|
||||
.alert.alert-primary.dark.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-secondary.dark.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-success.dark.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-info.dark.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-warning.dark.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-danger.dark.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-light.dark.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-dark.dark.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.col-sm-12.col-xl-6
|
||||
.card.height-equal
|
||||
.card-header.pb-0
|
||||
h5 Alert With Icon
|
||||
span Just add Any icon before text
|
||||
.card-body
|
||||
.alert.alert-primary.dark.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='clock')
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-secondary.dark.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='heart')
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-success.dark.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='thumbs-up')
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-info.dark.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='help-circle')
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-warning.dark.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='bell')
|
||||
p can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-danger.dark.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='thumbs-down')
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-light.dark.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='alert-triangle')
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-dark.dark.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='alert-circle')
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Light Alerts
|
||||
span
|
||||
| Alerts are available for any length of text, as well as an optional dismiss button.
|
||||
.card-body
|
||||
.alert.alert-primary(role='alert')
|
||||
p This is a primary alert—check it out!
|
||||
.alert.alert-secondary(role='alert')
|
||||
p This is a secondary alert—check it out!
|
||||
.alert.alert-success(role='alert')
|
||||
p This is a success alert—check it out!
|
||||
.alert.alert-info(role='alert')
|
||||
p This is a info alert—check it out!
|
||||
.alert.alert-warning(role='alert')
|
||||
p This is a warning alert—check it out!
|
||||
.alert.alert-danger(role='alert')
|
||||
p This is a danger alert—check it out!
|
||||
.alert.alert-light(role='alert')
|
||||
p This is a light alert—check it out!
|
||||
.alert.alert-dark(role='alert')
|
||||
p This is a light alert—check it out!
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Link color
|
||||
span
|
||||
| Use the
|
||||
code .alert-link
|
||||
| utility class to quickly provide matching colored links within any alert
|
||||
.card-body
|
||||
.alert.alert-primary(role='alert')
|
||||
p
|
||||
| This is a primary alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-secondary(role='alert')
|
||||
p
|
||||
| This is a secondary alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-success(role='alert')
|
||||
p
|
||||
| This is a success alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-info(role='alert')
|
||||
p
|
||||
| This is a info alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-warning(role='alert')
|
||||
p
|
||||
| This is a warning alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-danger(role='alert')
|
||||
p
|
||||
| This is a danger alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-light(role='alert')
|
||||
p
|
||||
| This is a light alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.alert.alert-dark(role='alert')
|
||||
p
|
||||
| This is a light alert with
|
||||
a.alert-link(href='#') an example link
|
||||
| .Click It
|
||||
.col-sm-12.col-xl-6
|
||||
.card.height-equal
|
||||
.card-header.pb-0
|
||||
h5 Dismissing
|
||||
span
|
||||
| To animate alerts when dismissing them, be sure to add the .fade and .show classes.
|
||||
.card-body
|
||||
.alert.alert-primary.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-secondary.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-success.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-info.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-warning.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-danger.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-light.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-dark.alert-dismissible.fade.show(role='alert')
|
||||
strong Holy !
|
||||
| You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.col-sm-12.col-xl-6
|
||||
.card.height-equal
|
||||
.card-header.pb-0
|
||||
h5 Outline Alerts
|
||||
span
|
||||
| Outline Archive just adding class
|
||||
code .outline
|
||||
.card-body
|
||||
.alert.alert-primary.outline(role='alert')
|
||||
p This is a primary alert—check it out!
|
||||
.alert.alert-secondary.outline(role='alert')
|
||||
p This is a secondary alert—check it out!
|
||||
.alert.alert-success.outline(role='alert')
|
||||
p This is a success alert—check it out!
|
||||
.alert.alert-info.outline(role='alert')
|
||||
p This is a info alert—check it out!
|
||||
.alert.alert-warning.outline(role='alert')
|
||||
p This is a warning alert—check it out!
|
||||
.alert.alert-danger.outline(role='alert')
|
||||
p This is a danger alert—check it out!
|
||||
.alert.alert-light.outline(role='alert')
|
||||
p This is a light alert—check it out!
|
||||
.alert.alert-dark.outline(role='alert')
|
||||
p This is a light alert—check it out!
|
||||
.col-sm-12.col-xl-6
|
||||
.card.height-equal
|
||||
.card-header.pb-0
|
||||
h5 Outline Dark Alerts
|
||||
span
|
||||
| Outline Archive just adding class
|
||||
code .outline-2x
|
||||
.card-body
|
||||
.alert.alert-primary.outline-2x(role='alert')
|
||||
p This is a primary alert—check it out!
|
||||
.alert.alert-secondary.outline-2x(role='alert')
|
||||
p This is a secondary alert—check it out!
|
||||
.alert.alert-success.outline-2x(role='alert')
|
||||
p This is a success alert—check it out!
|
||||
.alert.alert-info.outline-2x(role='alert')
|
||||
p This is a info alert—check it out!
|
||||
.alert.alert-warning.outline-2x(role='alert')
|
||||
p This is a warning alert—check it out!
|
||||
.alert.alert-danger.outline-2x(role='alert')
|
||||
p This is a danger alert—check it out!
|
||||
.alert.alert-light.outline-2x(role='alert')
|
||||
p This is a light alert—check it out!
|
||||
.alert.alert-dark.outline-2x(role='alert')
|
||||
p This is a light alert—check it out!
|
||||
.col-sm-12.col-xl-6
|
||||
.card.height-equal
|
||||
.card-header.pb-0
|
||||
h5 Alert With Icon outline
|
||||
span Just add Any icon before text
|
||||
.card-body
|
||||
.alert.alert-primary.outline.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='clock')
|
||||
p
|
||||
| Your time Over after
|
||||
b 5
|
||||
| miniute
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-secondary.outline.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='heart')
|
||||
p Oh snap! Change a few things up and submit again.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-success.outline.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='thumbs-up')
|
||||
p
|
||||
b Well done!
|
||||
| You successfully read this important alert message.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-info.outline.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='help-circle')
|
||||
p
|
||||
b welcome!
|
||||
| Start your day with some alerts.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-warning.outline.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='bell')
|
||||
p
|
||||
b Congratulation!
|
||||
| Your Product Added in Like List
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-danger.outline.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='thumbs-down')
|
||||
p
|
||||
| Your
|
||||
b Perfomance
|
||||
| is down on this week
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-light.outline.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='alert-triangle')
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-dark.outline.alert-dismissible.fade.show(role='alert')
|
||||
i(data-feather='alert-circle')
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Alert With Icon inverse
|
||||
span
|
||||
| Use the
|
||||
code .inverse
|
||||
| class to quickly provide matching colored links within any alert
|
||||
.card-body
|
||||
.alert.alert-primary.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-timer
|
||||
p
|
||||
| Your time Over after
|
||||
b 5
|
||||
| miniute
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-secondary.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-heart
|
||||
p Oh snap! Change a few things up and submit again.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-success.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-thumb-up.alert-center
|
||||
p
|
||||
b Well done!
|
||||
| You successfully read this important alert message.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-info.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-help-alt
|
||||
p
|
||||
b welcome!
|
||||
| Start your day with some alerts.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-warning.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-bell
|
||||
p
|
||||
b Congratulation!
|
||||
| Your Product Added in Like List
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-danger.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-thumb-down
|
||||
p
|
||||
| Your
|
||||
b Perfomance
|
||||
| is down on this week
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-light.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-alert.txt-dark
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close.txt-light(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.alert.alert-dark.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-info-alt
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Text as action
|
||||
span
|
||||
| Use the
|
||||
code .action-text
|
||||
| class to add dismiss text instead of icon
|
||||
.card-body.dismiss-text
|
||||
.alert.alert-primary.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-timer
|
||||
p
|
||||
| Your time Over after
|
||||
b 5
|
||||
| miniute
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
span.bg-primary(aria-hidden='true') dismiss
|
||||
.alert.alert-secondary.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-heart
|
||||
p Oh snap! Change a few things up and submit again.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
span.bg-secondary(aria-hidden='true') dismiss
|
||||
.alert.alert-success.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-thumb-up.alert-center
|
||||
p
|
||||
b Well done!
|
||||
| You successfully read this important alert message.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
span.bg-success(aria-hidden='true') dismiss
|
||||
.alert.alert-info.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-help-alt
|
||||
p
|
||||
b welcome!
|
||||
| Start your day with some alerts.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
span.bg-info(aria-hidden='true') dismiss
|
||||
.alert.alert-warning.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-bell
|
||||
p
|
||||
b Congratulation!
|
||||
| Your Product Added in Like List
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
span.bg-warning(aria-hidden='true') dismiss
|
||||
.alert.alert-danger.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-thumb-down
|
||||
p
|
||||
| Your
|
||||
b Perfomance
|
||||
| is down on this week
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
span.bg-danger(aria-hidden='true') dismiss
|
||||
.alert.alert-light.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-alert.txt-dark
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
span.bg-light.txt-dark(aria-hidden='true') dismiss
|
||||
.alert.alert-dark.inverse.alert-dismissible.fade.show(role='alert')
|
||||
i.icon-info-alt
|
||||
p You can check in on some of those fields below.
|
||||
button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
|
||||
span.bg-light.txt-dark(aria-hidden='true') dismiss
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Additional content
|
||||
span
|
||||
| Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
|
||||
.card-body
|
||||
.alert.alert-primary(role='alert')
|
||||
h4.alert-heading Well done!
|
||||
p
|
||||
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
||||
hr
|
||||
p.mb-0
|
||||
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
.alert.alert-secondary(role='alert')
|
||||
h4.alert-heading Well done!
|
||||
p
|
||||
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
||||
hr
|
||||
p.mb-0
|
||||
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
.alert.alert-success(role='alert')
|
||||
h4.alert-heading Well done!
|
||||
p
|
||||
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
||||
hr
|
||||
p.mb-0
|
||||
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
.alert.alert-danger(role='alert')
|
||||
h4.alert-heading Well done!
|
||||
p
|
||||
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
||||
hr
|
||||
p.mb-0
|
||||
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
.alert.alert-info(role='alert')
|
||||
h4.alert-heading Well done!
|
||||
p
|
||||
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
||||
hr
|
||||
p.mb-0
|
||||
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
.alert.alert-light(role='alert')
|
||||
h4.alert-heading Well done!
|
||||
p
|
||||
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
||||
hr
|
||||
p.mb-0
|
||||
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
.alert.alert-dark(role='alert')
|
||||
h4.alert-heading Well done!
|
||||
p
|
||||
| Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
|
||||
hr
|
||||
p.mb-0
|
||||
| Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
223
public/assets/pug/pages/template/animate.pug
Normal file
223
public/assets/pug/pages/template/animate.pug
Normal file
@@ -0,0 +1,223 @@
|
||||
- var animate = true;
|
||||
- var page_animate = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Animate
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Animation
|
||||
li.breadcrumb-item.active Animate
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-body
|
||||
.row
|
||||
.col-xl-6.col-md-8.offset-xl-3.offset-md-2
|
||||
#animation-box
|
||||
.card
|
||||
.animate-widget
|
||||
div
|
||||
img.img-fluid(src='../assets/images/banner/3.jpg', alt='')
|
||||
.text-center.p-25
|
||||
p.text-muted.mb-0
|
||||
| Denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings
|
||||
form.theme-form.text-center
|
||||
.form-group
|
||||
select.form-control.input.input--dropdown.js-animations
|
||||
optgroup(label='Attention Seekers')
|
||||
option(value='bounce') bounce
|
||||
option(value='flash') flash
|
||||
option(value='pulse') pulse
|
||||
option(value='rubberBand') rubberBand
|
||||
option(value='shake') shake
|
||||
option(value='swing') swing
|
||||
option(value='tada') tada
|
||||
option(value='wobble') wobble
|
||||
option(value='jello') jello
|
||||
optgroup(label='Bouncing Entrances')
|
||||
option(value='bounceIn') bounceIn
|
||||
option(value='bounceInDown') bounceInDown
|
||||
option(value='bounceInLeft') bounceInLeft
|
||||
option(value='bounceInRight') bounceInRight
|
||||
option(value='bounceInUp') bounceInUp
|
||||
optgroup(label='Bouncing Exits')
|
||||
option(value='bounceOut') bounceOut
|
||||
option(value='bounceOutDown') bounceOutDown
|
||||
option(value='bounceOutLeft') bounceOutLeft
|
||||
option(value='bounceOutRight') bounceOutRight
|
||||
option(value='bounceOutUp') bounceOutUp
|
||||
optgroup(label='Fading Entrances')
|
||||
option(value='fadeIn') fadeIn
|
||||
option(value='fadeInDown') fadeInDown
|
||||
option(value='fadeInDownBig') fadeInDownBig
|
||||
option(value='fadeInLeft') fadeInLeft
|
||||
option(value='fadeInLeftBig') fadeInLeftBig
|
||||
option(value='fadeInRight') fadeInRight
|
||||
option(value='fadeInRightBig') fadeInRightBig
|
||||
option(value='fadeInUp') fadeInUp
|
||||
option(value='fadeInUpBig') fadeInUpBig
|
||||
optgroup(label='Fading Exits')
|
||||
option(value='fadeOut') fadeOut
|
||||
option(value='fadeOutDown') fadeOutDown
|
||||
option(value='fadeOutDownBig') fadeOutDownBig
|
||||
option(value='fadeOutLeft') fadeOutLeft
|
||||
option(value='fadeOutLeftBig') fadeOutLeftBig
|
||||
option(value='fadeOutRight') fadeOutRight
|
||||
option(value='fadeOutRightBig') fadeOutRightBig
|
||||
option(value='fadeOutUp') fadeOutUp
|
||||
option(value='fadeOutUpBig') fadeOutUpBig
|
||||
optgroup(label='Flippers')
|
||||
option(value='flip') flip
|
||||
option(value='flipInX') flipInX
|
||||
option(value='flipInY') flipInY
|
||||
option(value='flipOutX') flipOutX
|
||||
option(value='flipOutY') flipOutY
|
||||
optgroup(label='Lightspeed')
|
||||
option(value='lightSpeedIn') lightSpeedIn
|
||||
option(value='lightSpeedOut') lightSpeedOut
|
||||
optgroup(label='Rotating Entrances')
|
||||
option(value='rotateIn') rotateIn
|
||||
option(value='rotateInDownLeft') rotateInDownLeft
|
||||
option(value='rotateInDownRight') rotateInDownRight
|
||||
option(value='rotateInUpLeft') rotateInUpLeft
|
||||
option(value='rotateInUpRight') rotateInUpRight
|
||||
optgroup(label='Rotating Exits')
|
||||
option(value='rotateOut') rotateOut
|
||||
option(value='rotateOutDownLeft') rotateOutDownLeft
|
||||
option(value='rotateOutDownRight') rotateOutDownRight
|
||||
option(value='rotateOutUpLeft') rotateOutUpLeft
|
||||
option(value='rotateOutUpRight') rotateOutUpRight
|
||||
optgroup(label='Sliding Entrances')
|
||||
option(value='slideInUp') slideInUp
|
||||
option(value='slideInDown') slideInDown
|
||||
option(value='slideInLeft') slideInLeft
|
||||
option(value='slideInRight') slideInRight
|
||||
optgroup(label='Sliding Exits')
|
||||
option(value='slideOutUp') slideOutUp
|
||||
option(value='slideOutDown') slideOutDown
|
||||
option(value='slideOutLeft') slideOutLeft
|
||||
option(value='slideOutRight') slideOutRight
|
||||
optgroup(label='Zoom Entrances')
|
||||
option(value='zoomIn') zoomIn
|
||||
option(value='zoomInDown') zoomInDown
|
||||
option(value='zoomInLeft') zoomInLeft
|
||||
option(value='zoomInRight') zoomInRight
|
||||
option(value='zoomInUp') zoomInUp
|
||||
optgroup(label='Zoom Exits')
|
||||
option(value='zoomOut') zoomOut
|
||||
option(value='zoomOutDown') zoomOutDown
|
||||
option(value='zoomOutLeft') zoomOutLeft
|
||||
option(value='zoomOutRight') zoomOutRight
|
||||
option(value='zoomOutUp') zoomOutUp
|
||||
optgroup(label='Specials')
|
||||
option(value='hinge') hinge
|
||||
option(value='jackInTheBox') jackInTheBox
|
||||
option(value='rollIn') rollIn
|
||||
option(value='rollOut') rollOut
|
||||
button.js-triggeraNimation.btn.btn-primary Animate it
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 How to use it?
|
||||
span
|
||||
| All you have to do is to add animation name class attribute to html element, like :
|
||||
code Fade
|
||||
.card-body.options.animat-md-center
|
||||
div flash
|
||||
div pulse
|
||||
div rubberBand
|
||||
div shake
|
||||
div swing
|
||||
div tada
|
||||
div wobble
|
||||
div jello
|
||||
div bounceIn
|
||||
div bounceInDown
|
||||
div bounceInLeft
|
||||
div bounceInRight
|
||||
div bounceInUp
|
||||
div bounceOut
|
||||
div bounceOutDown
|
||||
div bounceOutLeft
|
||||
div bounceOutRight
|
||||
div bounceOutUp
|
||||
div bounceOut
|
||||
div bounceOutDown
|
||||
div bounceOutLeft
|
||||
div bounceOutRight
|
||||
div bounceOutUp
|
||||
div fadeOut
|
||||
div fadeOutDown
|
||||
div fadeOutDownBig
|
||||
div fadeOutLeft
|
||||
div fadeOutLeftBig
|
||||
div fadeOutRight
|
||||
div fadeOutRightBig
|
||||
div fadeOutUp
|
||||
div fadeOutUpBig
|
||||
div flip
|
||||
div flipInX
|
||||
div flipInY
|
||||
div flipOutX
|
||||
div flipOutY
|
||||
div lightSpeedIn
|
||||
div lightSpeedOut
|
||||
div rotateIn
|
||||
div rotateInDownLeft
|
||||
div rotateInDownRight
|
||||
div rotateInUpLeft
|
||||
div rotateInUpRight
|
||||
div rotateOut
|
||||
div rotateOutDownLeft
|
||||
div rotateOutDownRight
|
||||
div rotateOutUpLeft
|
||||
div rotateOutUpRight
|
||||
div slideInUp
|
||||
div slideInDown
|
||||
div slideInLeft
|
||||
div slideInRight
|
||||
div slideOutUp
|
||||
div slideOutDown
|
||||
div slideOutLeft
|
||||
div slideOutRight
|
||||
div zoomIn
|
||||
div zoomInDown
|
||||
div zoomInLeft
|
||||
div zoomInRight
|
||||
div zoomInUp
|
||||
div zoomOut
|
||||
div zoomOutDown
|
||||
div zoomOutLeft
|
||||
div zoomOutRight
|
||||
div zoomOutUp
|
||||
div hinge
|
||||
div jackInTheBox
|
||||
div rollIn
|
||||
div rollOut
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
164
public/assets/pug/pages/template/avatars.pug
Normal file
164
public/assets/pug/pages/template/avatars.pug
Normal file
@@ -0,0 +1,164 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Avatars
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Base
|
||||
li.breadcrumb-item.active Avatars
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.user-profile
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Sizing
|
||||
.card-body.avatar-showcase
|
||||
.avatars
|
||||
div.avatar
|
||||
img.img-100.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-90.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-80.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-70.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-60.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-50.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-40.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-30.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-20.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Status Indicator
|
||||
.card-body.avatar-showcase
|
||||
.avatars
|
||||
div.avatar
|
||||
img.img-100.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
.status.status-100.bg-primary
|
||||
div.avatar
|
||||
img.img-90.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
.status.status-90.bg-primary
|
||||
div.avatar
|
||||
img.img-80.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
.status.status-80.bg-primary
|
||||
div.avatar
|
||||
img.img-70.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
.status.status-70.bg-primary
|
||||
div.avatar
|
||||
img.img-60.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
.status.status-60.bg-primary
|
||||
div.avatar
|
||||
img.img-50.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
.status.status-50.bg-primary
|
||||
div.avatar
|
||||
img.img-40.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
.status.status-40.bg-primary
|
||||
div.avatar
|
||||
img.img-30.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
.status.status-30.bg-primary
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Initials
|
||||
.card-body.avatar-showcase
|
||||
.avatars
|
||||
div.avatar
|
||||
img.img-100.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
div.avatar
|
||||
img.img-90.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
div.avatar
|
||||
img.img-80.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
div.avatar
|
||||
img.img-70.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
div.avatar
|
||||
img.img-60.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
div.avatar
|
||||
img.img-50.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
div.avatar
|
||||
img.img-40.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
div.avatar
|
||||
img.img-30.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
div.avatar
|
||||
img.img-20.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
div.avatar
|
||||
img.img-10.rounded-circle(src='../assets/images/user/16.png', alt='#')
|
||||
.col-xl-12.xl-100
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Shape
|
||||
.card-body.avatar-showcase
|
||||
.avatars
|
||||
div.avatar
|
||||
img.img-100.b-r-8(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-90.b-r-30(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-80.b-r-35(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-70.rounded-circle(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-60.b-r-25(src='../assets/images/user/1.jpg', alt='#')
|
||||
div.avatar
|
||||
img.img-50.b-r-15(src='../assets/images/user/1.jpg', alt='#')
|
||||
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Groups
|
||||
.card-body.avatar-showcase
|
||||
.customers.d-inline-block.avatar-group
|
||||
ul
|
||||
li.d-inline-block
|
||||
img.img-70.rounded-circle(src='../assets/images/user/3.jpg', alt='')
|
||||
li.d-inline-block
|
||||
img.img-70.rounded-circle(src='../assets/images/user/5.jpg', alt='')
|
||||
li.d-inline-block
|
||||
img.img-70.rounded-circle(src='../assets/images/user/1.jpg', alt='')
|
||||
.customers.d-inline-block.avatar-group
|
||||
ul
|
||||
li.d-inline-block
|
||||
img.img-50.rounded-circle(src='../assets/images/user/3.jpg', alt='')
|
||||
li.d-inline-block
|
||||
img.img-50.rounded-circle(src='../assets/images/user/5.jpg', alt='')
|
||||
li.d-inline-block
|
||||
img.img-50.rounded-circle(src='../assets/images/user/1.jpg', alt='')
|
||||
.customers.d-inline-block.avatar-group
|
||||
ul
|
||||
li.d-inline-block
|
||||
img.img-40.rounded-circle(src='../assets/images/user/3.jpg', alt='')
|
||||
li.d-inline-block
|
||||
img.img-40.rounded-circle(src='../assets/images/user/5.jpg', alt='')
|
||||
li.d-inline-block
|
||||
img.img-40.rounded-circle(src='../assets/images/user/1.jpg', alt='')
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
409
public/assets/pug/pages/template/base-input.pug
Normal file
409
public/assets/pug/pages/template/base-input.pug
Normal file
@@ -0,0 +1,409 @@
|
||||
- var theme_customizer = true;
|
||||
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Base inputs
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Forms
|
||||
li.breadcrumb-item Form Controls
|
||||
li.breadcrumb-item.active Base Inputs
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Basic form control
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput1') Email address
|
||||
input#exampleFormControlInput1.form-control(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword2') Password
|
||||
input#exampleInputPassword2.form-control(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect9') Example select
|
||||
select#exampleFormControlSelect9.form-select.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect3') Example multiple select
|
||||
select#exampleFormControlSelect3.form-select.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea4') Example textarea
|
||||
textarea#exampleFormControlTextarea4.form-control(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Basic HTML input control
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Simple Input
|
||||
.col-sm-9
|
||||
input.form-control(type='text')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Placeholder
|
||||
.col-sm-9
|
||||
input.form-control(type='text', placeholder='Type your title in Placeholder')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Password
|
||||
.col-sm-9
|
||||
input.form-control(type='password', placeholder='Password input')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Number
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='number', placeholder='Number')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Telephone
|
||||
.col-sm-9
|
||||
input.form-control.m-input.digits(type='tel', value='91-(999)-999-999')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label URL
|
||||
.col-sm-9
|
||||
input.form-control(type='url', value='https://getbootstrap.com')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Date and time
|
||||
.col-sm-9
|
||||
input#example-datetime-local-input.form-control.digits(type='datetime-local', value='2018-01-19T18:45:00')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Date
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='date', value='2018-01-01')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Month
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='month', value='2018-01')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Week
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='week', value='2018-W09')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Time
|
||||
.col-sm-9
|
||||
input.form-control.digits(type='time', value='21:45:00')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label.pt-0 Color picker
|
||||
.col-sm-9
|
||||
input.form-control.form-control-color(type='color', value='#24695c')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label
|
||||
| Maximum
|
||||
| Length
|
||||
.col-sm-9
|
||||
input.form-control(type='text', placeholder='Content must be in 6 characters', maxlength='6')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label.pt-0 Static Text
|
||||
.col-sm-9
|
||||
.form-control-static
|
||||
| Hello !... This is
|
||||
| static text
|
||||
.row
|
||||
label.col-sm-3.col-form-label Textarea
|
||||
.col-sm-9
|
||||
textarea.form-control(rows='5', cols='5', placeholder='Default textarea')
|
||||
.card-footer.text-end
|
||||
.col-sm-9.offset-sm-3
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Edges input style
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput5') Email address
|
||||
input#exampleFormControlInput5.form-control.btn-pill(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword6') Password
|
||||
input#exampleInputPassword6.form-control.btn-pill(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect7') Example select
|
||||
select#exampleFormControlSelect7.form-select.btn-pill.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect8') Example multiple select
|
||||
select#exampleFormControlSelect8.form-select.btn-pill.p-l-45.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea9') Example textarea
|
||||
textarea#exampleFormControlTextarea9.form-control.btn-pill(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Flat input style
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput10') Email address
|
||||
input#exampleFormControlInput10.form-control.btn-square(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword11') Password
|
||||
input#exampleInputPassword11.form-control.btn-square(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect12') Example select
|
||||
select#exampleFormControlSelect12.form-select.btn-square.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect13') Example multiple select
|
||||
select#exampleFormControlSelect13.form-select.btn-square.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea14') Example textarea
|
||||
textarea#exampleFormControlTextarea14.form-control.btn-square(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Raise input style
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput15') Email address
|
||||
input#exampleFormControlInput15.form-control.input-air-primary(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword16') Password
|
||||
input#exampleInputPassword16.form-control.input-air-primary(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect17') Example select
|
||||
select#exampleFormControlSelect17.form-select.input-air-primary.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect18') Example multiple select
|
||||
select#exampleFormControlSelect18.form-select.input-air-primary.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea19') Example textarea
|
||||
textarea#exampleFormControlTextarea19.form-control.input-air-primary(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Solid input style
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlInput20') Email address
|
||||
input#exampleFormControlInput20.form-control(type='email', placeholder='name@example.com')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword21') Password
|
||||
input#exampleInputPassword21.form-control(type='password', placeholder='Password')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword22') Disabled
|
||||
input#exampleInputPassword22.form-control(type='text', disabled='', placeholder='Disabled')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect23') Example select
|
||||
select#exampleFormControlSelect23.form-select.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect24') Example multiple select
|
||||
select#exampleFormControlSelect24.form-select.digits(multiple='')
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlTextarea25') Example textarea
|
||||
textarea#exampleFormControlTextarea25.form-control(rows='3')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Input sizing
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='colFormLabelSm26') Large input
|
||||
input#colFormLabelSm26.form-control.form-control-lg(type='text', placeholder='col-form-label-lg')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleInputPassword27') Default input
|
||||
input#exampleInputPassword27.form-control(type='text', placeholder='form-control')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='colFormLabelSm28') Small input
|
||||
input#colFormLabelSm28.form-control.form-control-sm(type='text', placeholder='col-form-label-sm')
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect29') Large select
|
||||
select#exampleFormControlSelect29.form-select.form-control-lg.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
.mb-3
|
||||
label.form-label(for='exampleFormControlSelect30') Default select
|
||||
select#exampleFormControlSelect30.form-select.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.row
|
||||
.col
|
||||
div
|
||||
label.form-label(for='exampleFormControlSelect31') Small select
|
||||
select#exampleFormControlSelect31.form-select.form-control-sm.digits
|
||||
option 1
|
||||
option 2
|
||||
option 3
|
||||
option 4
|
||||
option 5
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Custom controls
|
||||
form.form.theme-form
|
||||
.card-body
|
||||
.row
|
||||
.col
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label Upload File
|
||||
.col-sm-9
|
||||
input.form-control(type='file')
|
||||
.row
|
||||
.col
|
||||
.row
|
||||
label.col-sm-3.col-form-label Custom select
|
||||
.col-sm-9
|
||||
select.custom-select.form-select
|
||||
option(selected='') Open this select menu
|
||||
option(value='1') One
|
||||
option(value='2') Two
|
||||
option(value='3') Three
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
input.btn.btn-light(type='reset', value='Cancel')
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
304
public/assets/pug/pages/template/basic-card.pug
Normal file
304
public/assets/pug/pages/template/basic-card.pug
Normal file
@@ -0,0 +1,304 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var height_equal = true;
|
||||
- var theme_customizer = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Basic Card
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Cards
|
||||
li.breadcrumb-item.active Basic Card
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.d-flex.justify-content-between.align-items-center.pb-0
|
||||
h5 Basic Card
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <p class="mb-0"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. </p>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.d-flex.justify-content-between.align-items-center.pb-0
|
||||
h5
|
||||
i.icofont.icofont-truck.me-2
|
||||
| Icon in Heading
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card.height-equal
|
||||
.card-header.pb-0
|
||||
h5 Card sub Title
|
||||
span
|
||||
| Using the
|
||||
a(href='javascript:void(0)') card
|
||||
| component, you can extend the default collapse behavior to create an accordion.
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card.height-equal
|
||||
.card-header.pb-0
|
||||
h5 Card With Footer
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the the industry's standard dummy text ever.
|
||||
.card-footer
|
||||
h6.mb-0 Card Footer
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.d-flex.justify-content-between.align-items-center.pb-0.bg-primary
|
||||
h5 Primary Color Card
|
||||
.setting-list.bg-primary
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-white
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body.bg-primary
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
.card-footer.bg-primary
|
||||
h6.mb-0 Card Footer
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.bg-secondary.d-flex.justify-content-between.align-items-center.pb-0
|
||||
h5 Secondary Color Card
|
||||
.setting-list.bg-secondary
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-white
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body.bg-secondary
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
.card-footer.bg-secondary
|
||||
h6.mb-0.text-white Card Footer
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.bg-success.d-flex.justify-content-between.align-items-center.pb-0
|
||||
h5 Success color Card
|
||||
.setting-list.bg-success
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-white
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body.bg-success
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
.card-footer.bg-success
|
||||
h6.mb-0 Card Footer
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.bg-danger.d-flex.justify-content-between.align-items-center.pb-0
|
||||
h5 Danger color Card
|
||||
.setting-list.bg-danger
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-white
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body.bg-danger
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
.card-footer.bg-danger
|
||||
h6.mb-0 Card Footer
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.bg-warning.d-flex.justify-content-between.align-items-center
|
||||
h5 Warning color Card
|
||||
.setting-list.bg-warning
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-white
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body.bg-warning
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
.card-footer.bg-warning
|
||||
h6.mb-0 Card Footer
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.bg-primary.d-flex.justify-content-between.align-items-center
|
||||
h5.text-white Primary Color Header
|
||||
.setting-list.bg-primary
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-white
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
.card-footer
|
||||
h6.mb-0 Card Footer
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.d-flex.justify-content-between.align-items-center
|
||||
h5 Primary Color Body
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body.bg-primary
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
.card-footer
|
||||
h6.mb-0 Card Footer
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.d-flex.justify-content-between.align-items-center
|
||||
h5 Primary Color Footer
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
.card-footer.bg-primary
|
||||
h6.mb-0 Card Footer
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
70
public/assets/pug/pages/template/basic-template.pug
Normal file
70
public/assets/pug/pages/template/basic-template.pug
Normal file
@@ -0,0 +1,70 @@
|
||||
doctype html
|
||||
html(lang='en')
|
||||
head
|
||||
meta(http-equiv='Content-Type', content='text/html; charset=UTF-8')
|
||||
meta(http-equiv='X-UA-Compatible', content='IE=edge')
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
||||
meta(name='description', content='viho admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.')
|
||||
meta(name='keywords', content='admin template, viho admin template, dashboard template, flat admin template, responsive admin template, web app')
|
||||
meta(name='author', content='pixelstrap')
|
||||
link(rel='icon', href='../assets/images/favicon.png', type='image/x-icon')
|
||||
link(rel='shortcut icon', href='../assets/images/favicon.png', type='image/x-icon')
|
||||
title viho - Premium Admin Template
|
||||
link(href='https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900', rel='stylesheet')
|
||||
link(href='https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i', rel='stylesheet')
|
||||
link(href='https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i', rel='stylesheet')
|
||||
style.
|
||||
body{
|
||||
width: 650px;
|
||||
font-family: work-Sans, sans-serif;
|
||||
background-color: #f6f7fb;
|
||||
display: block;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
letter-spacing: 0.7px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.text-center{
|
||||
text-align: center
|
||||
}
|
||||
body(style='margin: 30px auto;')
|
||||
table(style='width: 100%')
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
table(style='background-color: #f6f7fb; width: 100%')
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
table(style='width: 650px; margin: 0 auto; margin-bottom: 30px')
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
img(src='../assets/images/logo/logo.png', alt='')
|
||||
td(style='text-align: right; color:#999')
|
||||
span Some Description
|
||||
table(style='width: 650px; margin: 0 auto; background-color: #fff; border-radius: 8px')
|
||||
tbody
|
||||
tr
|
||||
td(style='padding: 30px')
|
||||
p Hi There,
|
||||
p Sometimes you just want to send a simple HTML email with a simple design and clear call to action.
|
||||
a(href='javascript:void(0)' style='padding: 10px; background-color: #24695c; color: #ffffff; display: inline-block; border-radius: 4px; margin-bottom: 18px') Call To Action
|
||||
p This is a really simple email template. It's sole purpose is to get the recipient to click the button with no distractions.
|
||||
p(style='margin-bottom: 0') Good luck! Hope it works.
|
||||
table(style='width: 650px; margin: 0 auto; margin-top: 30px')
|
||||
tbody
|
||||
tr(style='text-align: center')
|
||||
td
|
||||
p(style='color: #999; margin-bottom: 0') 333 Woodland Rd. Baldwinsville, NY 13027
|
||||
p(style='color: #999; margin-bottom: 0') Don't Like These Emails?
|
||||
a(href='javascript:void(0)', style='color: #24695c') Unsubscribe
|
||||
p(style='color: #999; margin-bottom: 0') Powered By viho Admin
|
||||
159
public/assets/pug/pages/template/blog-single.pug
Normal file
159
public/assets/pug/pages/template/blog-single.pug
Normal file
@@ -0,0 +1,159 @@
|
||||
- var theme_customizer = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Blog Single
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Blog
|
||||
li.breadcrumb-item.active Blog Single
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.blog-single
|
||||
.blog-box.blog-details
|
||||
.banner-wrraper
|
||||
img.img-fluid.w-100.bg-img-cover(src='../assets/images/blog/blog-single.jpg', alt='blog-main')
|
||||
.card
|
||||
.card-body
|
||||
.blog-details
|
||||
ul.blog-social
|
||||
li 25 July 2024
|
||||
li
|
||||
i.icofont.icofont-user
|
||||
| Mark
|
||||
span Jecno
|
||||
li
|
||||
i.icofont.icofont-thumbs-up
|
||||
| 02
|
||||
span Hits
|
||||
li
|
||||
i.icofont.icofont-ui-chat
|
||||
| 598 Comments
|
||||
h4
|
||||
| The Harpeth rises in the westernmost part of Rutherford County, just to the east of the community of College Grove in eastern Williamson County. Internet.
|
||||
.single-blog-content-top
|
||||
p
|
||||
| From the east coast to the west, each river has its own beauty and character. Each river has its own story. Take a look at some America’s best rivers and some of the rivers we’re working to protect. And learn some facts about your favorite rivers. The Harpeth River and its tributaries are home to rich freshwater biodiversity, including more than 50 species of fish and 30 species of mussels
|
||||
p
|
||||
| The Harpeth River flows through the heart of downtown Franklin, the 14th fastest growing city in the United States, and traverses Williamson County, one of the fastest growing counties in Tennessee. This rapid development has already caused harm to the river from adding treated sewage, increasing stormwater runoff, and withdrawing water.The river’s impairment is caused by dangerously low levels of dissolved oxygen driven by high concentrations of nutrients – particularly phosphorus – that fuel oxygen-hungry algal blooms that can lead to toxic conditions.
|
||||
.card.comment-box
|
||||
.card-body
|
||||
h4 Comment
|
||||
ul
|
||||
li
|
||||
.media.align-self-center
|
||||
img.align-self-center(src='../assets/images/blog/comment.jpg', alt='Generic placeholder image')
|
||||
.media-body
|
||||
.row
|
||||
.col-md-4
|
||||
a(href="user-profile.html")
|
||||
h6.mt-0
|
||||
| Jolio Mark
|
||||
span ( Designer )
|
||||
.col-md-8
|
||||
ul.comment-social
|
||||
li
|
||||
i.icofont.icofont-thumbs-up
|
||||
| 02 Hits
|
||||
li
|
||||
i.icofont.icofont-ui-chat
|
||||
| 598 Comments
|
||||
p
|
||||
| The best thing is location and drive through the forest. The resort is 35km from Ramnagar. The gardens are well kept and maintained. Its a good place for relaxation away from the city noise. The staff is very friendly and overall we had a really good & fun time, thanks to staff member - Bhairav, Rajat, Gunanand, Lokesh & everyone else. And also we went for an adventurous night safari and saw barking deers, tuskar elephant.
|
||||
li
|
||||
ul
|
||||
li
|
||||
.media
|
||||
img.align-self-center(src='../assets/images/blog/9.jpg', alt='Generic placeholder image')
|
||||
.media-body
|
||||
.row
|
||||
.col-xl-12
|
||||
a(href="user-profile.html")
|
||||
h6.mt-0
|
||||
| Jolio Mark
|
||||
span ( Designer )
|
||||
p
|
||||
| There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
|
||||
li
|
||||
.media
|
||||
img.align-self-center(src='../assets/images/blog/4.jpg', alt='Generic placeholder image')
|
||||
.media-body
|
||||
.row
|
||||
.col-md-4
|
||||
a(href="user-profile.html")
|
||||
h6.mt-0
|
||||
| Jolio Mark
|
||||
span ( Designer )
|
||||
.col-md-8
|
||||
ul.comment-social
|
||||
li
|
||||
i.icofont.icofont-thumbs-up
|
||||
| 02 Hits
|
||||
li
|
||||
i.icofont.icofont-ui-chat
|
||||
| 598 Comments
|
||||
p
|
||||
| From the east coast to the west, each river has its own beauty and character. Each river has its own story. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
|
||||
li
|
||||
.media
|
||||
img.align-self-center(src='../assets/images/blog/12.png', alt='Generic placeholder image')
|
||||
.media-body
|
||||
.row
|
||||
.col-md-4
|
||||
a(href="user-profile.html")
|
||||
h6.mt-0
|
||||
| Jolio Mark
|
||||
span ( Designer )
|
||||
.col-md-8
|
||||
ul.comment-social
|
||||
li
|
||||
i.icofont.icofont-thumbs-up
|
||||
| 02 Hits
|
||||
li
|
||||
i.icofont.icofont-ui-chat
|
||||
| 598 Comments
|
||||
p
|
||||
| Clean resort with maintained garden but rooms are average Lack of communication between the staff members. Receptionsit full of attitude. Arrogant staff. Except good view there is nothing great in this property.Resort is 35 kms away from Ramnagar Town.
|
||||
li
|
||||
.media
|
||||
img.align-self-center(src='../assets/images/blog/14.png', alt='Generic placeholder image')
|
||||
.media-body
|
||||
.row
|
||||
.col-md-4
|
||||
a(href="user-profile.html")
|
||||
h6.mt-0.text-start
|
||||
| Jolio Mark
|
||||
span ( Designer )
|
||||
.col-md-8
|
||||
ul.comment-social
|
||||
li
|
||||
i.icofont.icofont-thumbs-up
|
||||
| 02 Hits
|
||||
li
|
||||
i.icofont.icofont-ui-chat
|
||||
| 598 Comments
|
||||
p
|
||||
| Harpeth rises in the westernmost part of Rutherford County, just to the east of the community of College Grove in eastern Williamson County.but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
191
public/assets/pug/pages/template/blog.pug
Normal file
191
public/assets/pug/pages/template/blog.pug
Normal file
@@ -0,0 +1,191 @@
|
||||
|
||||
- var theme_customizer = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Blog Details
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Blog
|
||||
li.breadcrumb-item.active Blog Details
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid.blog-page
|
||||
.row
|
||||
.col-xxl-6.set-col-12.box-col-12.xl-40
|
||||
.card
|
||||
.blog-box.blog-shadow
|
||||
img.img-fluid.bg-img-cover(src='../assets/images/blog/blog.jpg', alt='')
|
||||
.blog-details
|
||||
p 25 July 2024
|
||||
h4 People just don't do it anymore. We have to change that. Sometimes the simplest things are the most profound.
|
||||
ul.blog-social
|
||||
li
|
||||
i.icofont.icofont-user
|
||||
| Mark Jecno
|
||||
li
|
||||
i.icofont.icofont-thumbs-up
|
||||
| 02 Hits
|
||||
li
|
||||
i.icofont.icofont-ui-chat
|
||||
| 598 Comments
|
||||
.col-xxl-6.set-col-12.box-col-12.xl-60
|
||||
.row
|
||||
.col-xl-12.col-md-6
|
||||
.card
|
||||
.blog-box.blog-list.row
|
||||
.col-xl-6.col-12
|
||||
.blog-wrraper
|
||||
a(href="blog-single.html")
|
||||
img.img-fluid.sm-100-wp.p-0(src='../assets/images/blog/blog-2.jpg', alt='')
|
||||
.col-xl-6.col-12
|
||||
.blog-details
|
||||
.blog-date
|
||||
span 02
|
||||
| January 2024
|
||||
a(href="learning-detailed.html")
|
||||
h6 Encounter every day.
|
||||
.blog-bottom-content
|
||||
ul.blog-social
|
||||
li by: Admin
|
||||
li 12 Hits
|
||||
hr
|
||||
p.mt-0
|
||||
| A huge part of it is the incomparable beauty you can encounter every day.
|
||||
.col-xl-12.col-md-6
|
||||
.card
|
||||
.blog-box.blog-list.row
|
||||
.col-xl-6.col-12
|
||||
.blog-wrraper
|
||||
a(href="blog-single.html")
|
||||
img.img-fluid.sm-100-w.p-0(src='../assets/images/blog/blog-3.jpg', alt='')
|
||||
.col-xl-6.col-12
|
||||
.blog-details
|
||||
.blog-date
|
||||
span 03
|
||||
| January 2024
|
||||
a(href="learning-detailed.html")
|
||||
h6 Denim Jacket is important.
|
||||
.blog-bottom-content
|
||||
ul.blog-social
|
||||
li by: Admin
|
||||
li 5 Hits
|
||||
hr
|
||||
p.mt-0
|
||||
| The simplest things are the most profound. People just don't do it anymore.
|
||||
.col-sm-6.col-xl-3.box-col-6.des-xl-50
|
||||
.card
|
||||
.blog-box.blog-grid
|
||||
.blog-wrraper
|
||||
a(href="blog-single.html")
|
||||
img.img-fluid.top-radius-blog(src='../assets/images/blog/blog-5.jpg', alt='')
|
||||
.blog-details-second
|
||||
.blog-post-date
|
||||
span.blg-month apr
|
||||
span.blg-date 10
|
||||
a(href="blog-single.html")
|
||||
h6.blog-bottom-details Encounter every day.
|
||||
p A huge part of it is the incomparable beauty you can encounter every day.
|
||||
.detail-footer
|
||||
ul.sociyal-list
|
||||
li
|
||||
i.fa.fa-user-o
|
||||
| admin
|
||||
li
|
||||
i.fa.fa-comments-o
|
||||
| 5
|
||||
li
|
||||
i.fa.fa-thumbs-o-up
|
||||
| 2 like
|
||||
.col-sm-6.col-xl-3.box-col-6.des-xl-50
|
||||
.card
|
||||
.blog-box.blog-grid
|
||||
.blog-wrraper
|
||||
a(href="blog-single.html")
|
||||
img.img-fluid.top-radius-blog(src='../assets/images/blog/blog-6.jpg', alt='')
|
||||
.blog-details-second
|
||||
.blog-post-date
|
||||
span.blg-month apr
|
||||
span.blg-date 10
|
||||
a(href="blog-single.html")
|
||||
h6.blog-bottom-details Denim Jacket is important.
|
||||
p The simplest things are the most profound. People just don't do it anymore.
|
||||
.detail-footer
|
||||
ul.sociyal-list
|
||||
li
|
||||
i.fa.fa-user-o
|
||||
| admin
|
||||
li
|
||||
i.fa.fa-comments-o
|
||||
| 5
|
||||
li
|
||||
i.fa.fa-thumbs-o-up
|
||||
| 2 like
|
||||
.col-sm-6.col-xl-3.box-col-6.des-xl-50
|
||||
.card
|
||||
.blog-box.blog-grid
|
||||
.blog-wrraper
|
||||
a(href="blog-single.html")
|
||||
img.img-fluid.top-radius-blog(src='../assets/images/blog/blog-5.jpg', alt='')
|
||||
.blog-details-second
|
||||
.blog-post-date
|
||||
span.blg-month apr
|
||||
span.blg-date 10
|
||||
a(href="blog-single.html")
|
||||
h6.blog-bottom-details Encounter every day.
|
||||
p A huge part of it is the incomparable beauty you can encounter every day.
|
||||
.detail-footer
|
||||
ul.sociyal-list
|
||||
li
|
||||
i.fa.fa-user-o
|
||||
| admin
|
||||
li
|
||||
i.fa.fa-comments-o
|
||||
| 5
|
||||
li
|
||||
i.fa.fa-thumbs-o-up
|
||||
| 2 like
|
||||
.col-sm-6.col-xl-3.box-col-6.des-xl-50
|
||||
.card
|
||||
.blog-box.blog-grid
|
||||
.blog-wrraper
|
||||
a(href="blog-single.html")
|
||||
img.img-fluid.top-radius-blog(src='../assets/images/blog/blog-6.jpg', alt='')
|
||||
.blog-details-second
|
||||
.blog-post-date
|
||||
span.blg-month apr
|
||||
span.blg-date 10
|
||||
a(href="blog-single.html")
|
||||
h6.blog-bottom-details Denim Jacket is important.
|
||||
p The simplest things are the most profound. People just don't do it anymore.
|
||||
.detail-footer
|
||||
ul.sociyal-list
|
||||
li
|
||||
i.fa.fa-user-o
|
||||
| admin
|
||||
li
|
||||
i.fa.fa-comments-o
|
||||
| 5
|
||||
li
|
||||
i.fa.fa-thumbs-o-up
|
||||
| 2 like
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
636
public/assets/pug/pages/template/bookmark.pug
Normal file
636
public/assets/pug/pages/template/bookmark.pug
Normal file
@@ -0,0 +1,636 @@
|
||||
- var theme_customizer = true;
|
||||
- var select2 = true;
|
||||
- var page_select2 = true;
|
||||
- var form_validation_custom = true;
|
||||
- var bookmark_page = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Bookmarks
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Apps
|
||||
li.breadcrumb-item.active Bookmarks
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.email-wrap.bookmark-wrap
|
||||
.row
|
||||
.col-xl-3.xl-30.box-col-4
|
||||
.email-sidebar
|
||||
a.btn.btn-primary.email-aside-toggle(href="javascript:void(0)")
|
||||
| bookmark filter
|
||||
.email-left-aside
|
||||
.card
|
||||
.card-body
|
||||
.email-app-sidebar.left-bookmark
|
||||
.media
|
||||
.media-size-email
|
||||
img.me-3.rounded-circle(src='../assets/images/user/user.png', alt='')
|
||||
.media-body
|
||||
h6.f-w-600 MARK JENCO
|
||||
p Markjecno@gmail.com
|
||||
ul.nav.main-menu(role='tablist')
|
||||
li.nav-item
|
||||
button.badge-light.btn-block.btn-mail(type='button', data-bs-toggle='modal', data-bs-target='#exampleModal')
|
||||
i.me-2(data-feather='bookmark')
|
||||
| New Bookmark
|
||||
#exampleModal.modal.fade.modal-bookmark(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
|
||||
.modal-dialog.modal-lg(role='document')
|
||||
.modal-content
|
||||
.modal-header
|
||||
h5#exampleModalLabel.modal-title Add Bookmark
|
||||
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
||||
.modal-body
|
||||
form.form-bookmark#bookmark-form.needs-validation(novalidate='')
|
||||
.form-row
|
||||
.form-group.col-md-12
|
||||
label(for='bm-weburl') Web Url
|
||||
input#bm-weburl.form-control(type='text', required='', autocomplete='off')
|
||||
.form-group.col-md-12
|
||||
label(for='bm-title') Title
|
||||
input#bm-title.form-control(type='text', required='', autocomplete='off')
|
||||
.form-group.col-md-12
|
||||
label Description
|
||||
textarea#bm-desc.form-control(required='', autocomplete='off')
|
||||
.row
|
||||
.form-group.col.mb-0
|
||||
label Group
|
||||
select.js-example-basic-single#bm-group
|
||||
option(value='bookmark') My Bookmarks
|
||||
.form-group.col.mb-0
|
||||
label Collection
|
||||
select.js-example-disabled-results#bm-collection
|
||||
option(value='general') General
|
||||
option(value='fs') fs
|
||||
|
||||
input#index_var(type='hidden', value='6' )
|
||||
button#Bookmark.btn.btn-secondary(onclick='submitBookMark()', type='submit') Save
|
||||
button.btn.btn-primary(type='button', data-bs-dismiss='modal') Cancel
|
||||
li.nav-item
|
||||
span.main-title
|
||||
| Views
|
||||
li
|
||||
a#pills-created-tab(data-bs-toggle='pill', href='#pills-created', role='tab', aria-controls='pills-created', aria-selected='true')
|
||||
span.title
|
||||
| Created by me
|
||||
li
|
||||
a#pills-favourites-tab.show(data-bs-toggle='pill', href='#pills-favourites', role='tab', aria-controls='pills-favourites', aria-selected='false')
|
||||
span.title
|
||||
| Favourites
|
||||
li
|
||||
a#pills-shared-tab.show(data-bs-toggle='pill', href='#pills-shared', role='tab', aria-controls='pills-shared', aria-selected='false')
|
||||
span.title
|
||||
| Shared with me
|
||||
li
|
||||
a#pills-bookmark-tab.show(data-bs-toggle='pill', href='#pills-bookmark', role='tab', aria-controls='pills-bookmark', aria-selected='false')
|
||||
span.title
|
||||
| My bookmark
|
||||
li
|
||||
hr
|
||||
li
|
||||
span.main-title
|
||||
| Tags
|
||||
span.pull-right
|
||||
a(href='javascript:void(0)', data-bs-toggle='modal', data-bs-target='#createtag')
|
||||
i(data-feather='plus-circle')
|
||||
li
|
||||
a#pills-notification-tab.show(data-bs-toggle='pill', href='#pills-notification', role='tab', aria-controls='pills-notification', aria-selected='false')
|
||||
span.title
|
||||
| Notification
|
||||
li
|
||||
a#pills-newsletter-tab.show(data-bs-toggle='pill', href='#pills-newsletter', role='tab', aria-controls='pills-newsletter', aria-selected='false')
|
||||
span.title
|
||||
| Newsletter
|
||||
.col-xl-9.col-md-12.box-col-8.xl-70
|
||||
.email-right-aside.bookmark-tabcontent
|
||||
.card.email-body.radius-left
|
||||
.ps-0
|
||||
.tab-content
|
||||
#pills-created.tab-pane.fade.active.show(role='tabpanel', aria-labelledby='pills-created-tab')
|
||||
.card.mb-0
|
||||
.card-header.d-flex
|
||||
h6.mb-0 Created by me
|
||||
ul
|
||||
li
|
||||
a.grid-bookmark-view(href='javascript:void(0)')
|
||||
i(data-feather='grid')
|
||||
li
|
||||
a.list-layout-view(href='javascript:void(0)')
|
||||
i(data-feather='list')
|
||||
.card-body.pb-0
|
||||
.details-bookmark.text-center
|
||||
.row#bookmarkData
|
||||
.col-xl-3.col-lg-6.col-md-4.col-sm-6.xl-50.box-col-6
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/01.jpg', alt='')
|
||||
.favourite-icon.favourite_0(onclick='setFavourite(0)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_0 Admin Template
|
||||
p.weburl_0 http://admin.pixelstrap.com/endless/ltr/landing-page.html
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(0)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_0 Endless is beautifully crafted, clean and modern designed admin theme with 6 different demos and light - dark versions.
|
||||
span.collection_0 General
|
||||
.col-xl-3.col-lg-6.col-md-4.col-sm-6.xl-50.box-col-6
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/02.jpg', alt='')
|
||||
.favourite-icon.favourite_1(onclick='setFavourite(1)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_1 Universal Template
|
||||
p.weburl_1 https://angular.pixelstrap.com/universal/landing
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(1)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_1 Universal is beautifully crafted, clean and modern designed admin theme
|
||||
span.collection_1 General
|
||||
.col-xl-3.col-lg-6.col-md-4.col-sm-6.xl-50.box-col-6
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/03.jpg', alt='')
|
||||
.favourite-icon.favourite_2(onclick='setFavourite(2)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_2 Angular Theme
|
||||
p.weburl_2 https://angular.pixelstrap.com/endless/landing
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(2)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_2 Endless is beautifully crafted, clean and modern designed admin theme
|
||||
span.collection_2 Fs
|
||||
.col-xl-3.col-lg-6.col-md-4.col-sm-6.xl-50.box-col-6
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/04.jpg', alt='')
|
||||
.favourite-icon.favourite_3(onclick='setFavourite(3)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_3 Multikart Admin
|
||||
p.weburl_3 http://themes.pixelstrap.com/multikart/back-end/index.html
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(3)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_3 Multikart Admin is modern designed admin theme
|
||||
span.collection_3 General
|
||||
.col-xl-3.col-lg-6.col-md-4.col-sm-6.xl-50.box-col-6
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/05.jpg', alt='')
|
||||
.favourite-icon.favourite_4(onclick='setFavourite(4)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_4 Ecommerece theme
|
||||
p.weburl_4 http://themes.pixelstrap.com/multikart
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(4)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_4 Multikart HTML template is an apparently simple but highly functional tempalate designed for creating a flourisahing online business.
|
||||
span.collection_4 General
|
||||
.col-xl-3.col-lg-6.col-md-4.col-sm-6.xl-50.box-col-6
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/06.jpg', alt='')
|
||||
.favourite-icon.favourite_5(onclick='setFavourite(5)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_5 Tovo app landing page
|
||||
p.weburl_5 http://vue.pixelstrap.com/tovo/home-one
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(5)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_5 Amazing Landing Page With Easy Customization
|
||||
span.collection_5 Fs
|
||||
#pills-favourites.fade.tab-pane(role='tabpanel', aria-labelledby='pills-favourites-tab')
|
||||
.card.mb-0
|
||||
.card-header.d-flex
|
||||
h6.mb-0 Favourites
|
||||
ul
|
||||
li
|
||||
a.grid-bookmark-view(href='javascript:void(0)')
|
||||
i(data-feather='grid')
|
||||
li
|
||||
a.list-layout-view(href='javascript:void(0)')
|
||||
i(data-feather='list')
|
||||
.card-body
|
||||
.details-bookmark.text-center
|
||||
.row#favouriteData
|
||||
.no-favourite
|
||||
span No Bookmarks Found.
|
||||
#pills-shared.fade.tab-pane(role='tabpanel', aria-labelledby='pills-shared-tab')
|
||||
.card.mb-0
|
||||
.card-header.d-flex
|
||||
h6.mb-0 Shared with me
|
||||
ul
|
||||
li
|
||||
a.grid-bookmark-view(href='javascript:void(0)')
|
||||
i(data-feather='grid')
|
||||
li
|
||||
a.list-layout-view(href='javascript:void(0)')
|
||||
i(data-feather='list')
|
||||
.card-body
|
||||
.details-bookmark.text-center
|
||||
span No Bookmarks Found.
|
||||
#pills-bookmark.fade.tab-pane(role='tabpanel', aria-labelledby='pills-bookmark-tab')
|
||||
.card.mb-0
|
||||
.card-header.d-flex
|
||||
h6.mb-0 My bookmark
|
||||
ul
|
||||
li
|
||||
a.grid-bookmark-view(href='javascript:void(0)')
|
||||
i(data-feather='grid')
|
||||
li
|
||||
a.list-layout-view(href='javascript:void(0)')
|
||||
i(data-feather='list')
|
||||
.card-body
|
||||
.details-bookmark.text-center
|
||||
.row#bookmarkData1
|
||||
.col-xl-3.col-md-4.xl-50
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/07.jpg', alt='')
|
||||
.favourite-icon.favourite_0(onclick='setFavourite(0)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_0 Admin Template
|
||||
p.weburl_0 http://admin.pixelstrap.com/endless/ltr/landing-page.html
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(0)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_0 Endless is beautifully crafted, clean and modern designed admin theme with 6 different demos and light - dark versions.
|
||||
span.collection_0 General
|
||||
.col-xl-3.col-md-4.xl-50
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/07.jpg', alt='')
|
||||
.favourite-icon.favourite_1(onclick='setFavourite(1)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_1 Universal Template
|
||||
p.weburl_1 https://angular.pixelstrap.com/universal/landing
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(1)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_1 Universal is beautifully crafted, clean and modern designed admin theme
|
||||
span.collection_1 General
|
||||
.col-xl-3.col-md-4.xl-50
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/01.jpg', alt='')
|
||||
.favourite-icon.favourite_2(onclick='setFavourite(2)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_2 Angular Theme
|
||||
p.weburl_2 https://angular.pixelstrap.com/endless/landing
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(2)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_2 Endless is beautifully crafted, clean and modern designed admin theme
|
||||
span.collection_2 Fs
|
||||
.col-xl-3.col-md-4.xl-50
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/07.jpg', alt='')
|
||||
.favourite-icon.favourite_3(onclick='setFavourite(3)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_3 Multikart Admin
|
||||
p.weburl_3 http://themes.pixelstrap.com/multikart/back-end/index.html
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(3)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_3 Multikart Admin is modern designed admin theme
|
||||
span.collection_3 General
|
||||
.col-xl-3.col-md-4.xl-50
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/07.jpg', alt='')
|
||||
.favourite-icon.favourite_4(onclick='setFavourite(4)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_4 Ecommerece theme
|
||||
p.weburl_4 http://themes.pixelstrap.com/multikart
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(4)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_4 Multikart HTML template is an apparently simple but highly functional tempalate designed for creating a flourisahing online business.
|
||||
span.collection_4 General
|
||||
.col-xl-3.col-md-4.xl-50
|
||||
.card.bookmark-card.o-hidden
|
||||
.details-website
|
||||
img.img-fluid(src='../assets/images/lightgallry/07.jpg', alt='')
|
||||
.favourite-icon.favourite_5(onclick='setFavourite(5)')
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-star
|
||||
.desciption-data
|
||||
.title-bookmark
|
||||
h6.title_5 Tovo app landing page
|
||||
p.weburl_5 http://vue.pixelstrap.com/tovo/home-one
|
||||
.hover-block
|
||||
ul
|
||||
li
|
||||
a(href='', onclick='editBookmark(5)', data-bs-toggle='modal', data-bs-target='#edit-bookmark')
|
||||
i(data-feather='edit-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='link')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='share-2')
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='trash-2')
|
||||
li.pull-right.text-end
|
||||
a(href='javascript:void(0)')
|
||||
i(data-feather='tag')
|
||||
.content-general
|
||||
p.desc_5 Amazing Landing Page With Easy Customization
|
||||
span.collection_5 Fs
|
||||
#pills-notification.fade.tab-pane(role='tabpanel', aria-labelledby='pills-notification-tab')
|
||||
.card.mb-0
|
||||
.card-header.d-flex
|
||||
h6.mb-0 Notification
|
||||
ul
|
||||
li
|
||||
a.grid-bookmark-view(href='javascript:void(0)')
|
||||
i(data-feather='grid')
|
||||
li
|
||||
a.list-layout-view(href='javascript:void(0)')
|
||||
i(data-feather='list')
|
||||
.card-body
|
||||
.details-bookmark.text-center
|
||||
span No Bookmarks Found.
|
||||
#pills-newsletter.fade.tab-pane(role='tabpanel', aria-labelledby='pills-newsletter-tab')
|
||||
.card.mb-0
|
||||
.card-header.d-flex
|
||||
h6.mb-0 Newsletter
|
||||
ul
|
||||
li
|
||||
a.grid-bookmark-view(href='javascript:void(0)')
|
||||
i(data-feather='grid')
|
||||
li
|
||||
a.list-layout-view(href='javascript:void(0)')
|
||||
i(data-feather='list')
|
||||
.card-body
|
||||
.details-bookmark.text-center
|
||||
span No Bookmarks Found.
|
||||
#edit-bookmark.modal.fade.modal-bookmark(tabindex='-1', role='dialog' aria-hidden='true')
|
||||
.modal-dialog.modal-lg(role='document')
|
||||
.modal-content
|
||||
.modal-header
|
||||
h5.modal-title Edit Bookmark
|
||||
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
||||
.modal-body
|
||||
form.form-bookmark.needs-validation(novalidate='')
|
||||
.form-row
|
||||
.form-group.col-md-12
|
||||
label Web Url
|
||||
input.form-control#editurl(type='text', required='', autocomplete='off', value='http://admin.pixelstrap.com/endless/ltr/landing-page.html')
|
||||
.form-group.col-md-12
|
||||
label Title
|
||||
input.form-control#edittitle(type='text', required='', autocomplete='off', value='Admin Template')
|
||||
.form-group.col-md-12
|
||||
label Description
|
||||
textarea.form-control#editdesc(required='', autocomplete='off')
|
||||
| Endless is beautifully crafted, clean and modern designed admin theme with 6 different demos and light - dark versions.
|
||||
.row
|
||||
.form-group.col.mb-0
|
||||
label Group
|
||||
select.js-example-basic-single
|
||||
option(value='AL') My Bookmarks
|
||||
.form-group.col.mb-0
|
||||
label Collection
|
||||
select.js-example-disabled-results
|
||||
option(value='general') General
|
||||
option(value='fs') fs
|
||||
button.btn.btn-secondary(type='button') Save
|
||||
button.btn.btn-primary(type='button', data-bs-dismiss='modal') Cancel
|
||||
#createtag.modal.fade.modal-bookmark(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
.modal-dialog.modal-lg(role='document')
|
||||
.modal-content
|
||||
.modal-header
|
||||
h5.modal-title Create Tag
|
||||
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
||||
.modal-body
|
||||
form.form-bookmark.needs-validation(novalidate='')
|
||||
.form-row
|
||||
.form-group.col-md-12
|
||||
label Tag Name
|
||||
input.form-control(type='text', required='', autocomplete='off')
|
||||
.form-group.col-md-12.mb-0
|
||||
label Tag color
|
||||
input.form-control.fill-color(type='color', value='#24695c')
|
||||
button.btn.btn-secondary(type='button') Save
|
||||
button.btn.btn-primary(type='button', data-bs-dismiss='modal') Cancel
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
779
public/assets/pug/pages/template/bootstrap-basic-table.pug
Normal file
779
public/assets/pug/pages/template/bootstrap-basic-table.pug
Normal file
@@ -0,0 +1,779 @@
|
||||
- var theme_customizer = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Bootstrap Basic Tables
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Tables
|
||||
li.breadcrumb-item Bootstrap Tables
|
||||
li.breadcrumb-item.active Basic Tables
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Basic Table
|
||||
span
|
||||
| Use a class
|
||||
code table
|
||||
| to any table.
|
||||
.table-responsive
|
||||
table.table
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
th(scope='col') Role
|
||||
th(scope='col') Country
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Alexander
|
||||
td Orton
|
||||
td @mdorton
|
||||
td Admin
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td John Deo
|
||||
td Deo
|
||||
td @johndeo
|
||||
td User
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Randy Orton
|
||||
td the Bird
|
||||
td @twitter
|
||||
td admin
|
||||
td UK
|
||||
tr
|
||||
th(scope='row') 4
|
||||
td Randy Mark
|
||||
td Ottandy
|
||||
td @mdothe
|
||||
td user
|
||||
td AUS
|
||||
tr
|
||||
th(scope='row') 5
|
||||
td Ram Jacob
|
||||
td Thornton
|
||||
td @twitter
|
||||
td admin
|
||||
td IND
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Inverse Table
|
||||
span
|
||||
| Use a class
|
||||
code table-inverse
|
||||
| inside table element.
|
||||
.table-responsive
|
||||
table.table.table-inverse
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
th(scope='col') Role
|
||||
th(scope='col') Country
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Alexander
|
||||
td Orton
|
||||
td @mdorton
|
||||
td Admin
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td John Deo
|
||||
td Deo
|
||||
td @johndeo
|
||||
td User
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Randy Orton
|
||||
td the Bird
|
||||
td @twitter
|
||||
td admin
|
||||
td UK
|
||||
tr
|
||||
th(scope='row') 4
|
||||
td Randy Mark
|
||||
td Ottandy
|
||||
td @mdothe
|
||||
td user
|
||||
td AUS
|
||||
tr
|
||||
th(scope='row') 5
|
||||
td Ram Jacob
|
||||
td Thornton
|
||||
td @twitter
|
||||
td admin
|
||||
td IND
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Inverse Table with Primary background
|
||||
span
|
||||
| Use a class
|
||||
code .bg-info, .bg-success, .bg-warning and .bg-danger classes.
|
||||
| with light text on dark backgrounds inside table element.
|
||||
br
|
||||
| To set the light background color use .bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be .bg-teal
|
||||
.table-responsive
|
||||
table.table.table-striped.bg-primary
|
||||
thead.tbl-strip-thad-bdr
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
th(scope='col') Role
|
||||
th(scope='col') Country
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Alexander
|
||||
td Orton
|
||||
td @mdorton
|
||||
td Admin
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td John Deo
|
||||
td Deo
|
||||
td @johndeo
|
||||
td User
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Randy Orton
|
||||
td the Bird
|
||||
td @twitter
|
||||
td admin
|
||||
td UK
|
||||
tr
|
||||
th(scope='row') 4
|
||||
td Randy Mark
|
||||
td Ottandy
|
||||
td @mdothe
|
||||
td user
|
||||
td AUS
|
||||
tr
|
||||
th(scope='row') 5
|
||||
td Ram Jacob
|
||||
td Thornton
|
||||
td @twitter
|
||||
td admin
|
||||
td IND
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Hoverable rows
|
||||
span
|
||||
| Use a class
|
||||
code table-hover
|
||||
| to enable a hover state on table rows within a
|
||||
code tbody
|
||||
| .
|
||||
.table-responsive
|
||||
table.table.table-hover
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
th(scope='col') Role
|
||||
th(scope='col') Country
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Alexander
|
||||
td Orton
|
||||
td @mdorton
|
||||
td Admin
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td John Deo
|
||||
td Deo
|
||||
td @johndeo
|
||||
td User
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Randy Orton
|
||||
td the Bird
|
||||
td @twitter
|
||||
td admin
|
||||
td UK
|
||||
tr
|
||||
th(scope='row') 4
|
||||
td Randy Mark
|
||||
td Ottandy
|
||||
td @mdothe
|
||||
td user
|
||||
td AUS
|
||||
tr
|
||||
th(scope='row') 5
|
||||
td Ram Jacob
|
||||
td Thornton
|
||||
td @twitter
|
||||
td admin
|
||||
td IND
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Contextual classes
|
||||
span
|
||||
| Use contextual classes to color table rows or individual cells. you may use Classes
|
||||
code table-primary
|
||||
| ,
|
||||
code table-secondary
|
||||
| ,
|
||||
code table-success
|
||||
| ,
|
||||
code table-info
|
||||
| ,
|
||||
code table-warning
|
||||
| ,
|
||||
code table-danger
|
||||
| ,
|
||||
code table-light
|
||||
| ,
|
||||
code table-active
|
||||
| in
|
||||
code tr
|
||||
.table-responsive
|
||||
table.table
|
||||
thead
|
||||
tr
|
||||
th(scope='col') Class
|
||||
th(scope='col') Heading
|
||||
th(scope='col') Heading
|
||||
tbody
|
||||
tr.table-primary
|
||||
th(scope='row') Primary
|
||||
td Cell
|
||||
td Cell
|
||||
tr.table-secondary
|
||||
th(scope='row') Secondary
|
||||
td Cell
|
||||
td Cell
|
||||
tr.table-success
|
||||
th(scope='row') Success
|
||||
td Cell
|
||||
td Cell
|
||||
tr.table-info
|
||||
th(scope='row') Info
|
||||
td Cell
|
||||
td Cell
|
||||
tr.table-warning
|
||||
th(scope='row') Warning
|
||||
td Cell
|
||||
td Cell
|
||||
tr.table-danger
|
||||
th(scope='row') Danger
|
||||
td Cell
|
||||
td Cell
|
||||
tr.table-light
|
||||
th(scope='row') Light
|
||||
td Cell
|
||||
td Cell
|
||||
tr.table-active
|
||||
th(scope='row') Active
|
||||
td Cell
|
||||
td Cell
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Text or background utilities
|
||||
span
|
||||
| Regular table background variants are not available with the inverse table, however, you may use Classes
|
||||
code bg-dark
|
||||
| ,
|
||||
code bg-warning
|
||||
| ,
|
||||
code bg-success
|
||||
| ,
|
||||
code bg-info
|
||||
| ,
|
||||
code bg-danger
|
||||
| ,
|
||||
code bg-primary
|
||||
| ,
|
||||
code bg-secondary
|
||||
| ,
|
||||
code bg-light
|
||||
| in
|
||||
code td
|
||||
.table-responsive
|
||||
table.table.table-borderedfor
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') Heading
|
||||
th(scope='col') Heading
|
||||
tbody
|
||||
tr.table-active
|
||||
td.bg-primary 1
|
||||
td.bg-primary primary
|
||||
td.bg-primary primary
|
||||
tr.table-active
|
||||
td.bg-secondary 2
|
||||
td.bg-secondary secondary
|
||||
td.bg-secondary secondary
|
||||
tr
|
||||
td.bg-success 3
|
||||
td.bg-success success
|
||||
td.bg-success success
|
||||
tr
|
||||
td.bg-info 4
|
||||
td.bg-info info
|
||||
td.bg-info info
|
||||
tr
|
||||
td.bg-warning 5
|
||||
td.bg-warning warning
|
||||
td.bg-warning warning
|
||||
tr
|
||||
td.bg-danger 6
|
||||
td.bg-danger danger
|
||||
td.bg-danger danger
|
||||
tr.table-active
|
||||
td.bg-light 7
|
||||
td.bg-light light
|
||||
td.bg-light light
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Table head options
|
||||
span
|
||||
| Similar to tables and dark tables, use the modifier classes
|
||||
code .thead-dark
|
||||
| to make
|
||||
code thead
|
||||
| appear light or dark gray.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table
|
||||
thead.thead-dark
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Table head options
|
||||
span
|
||||
| Similar to tables and dark tables, use the modifier classes
|
||||
code .bg-*
|
||||
| and
|
||||
code .thead-light
|
||||
| to make
|
||||
code thead
|
||||
| appear light or dark gray.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table
|
||||
thead.thead-light
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Striped Row
|
||||
span
|
||||
| Use
|
||||
code .table-striped
|
||||
| to add zebra-striping to any table row within the
|
||||
code
|
||||
| . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table.table-striped
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Striped Row with Inverse Table
|
||||
span
|
||||
| Use
|
||||
code .table-striped
|
||||
| to add zebra-striping to any table row within the
|
||||
code
|
||||
| . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table.table-inverse.table-striped
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Caption
|
||||
span
|
||||
| A
|
||||
code <caption>
|
||||
| functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table
|
||||
caption List of users
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Responsive Tables
|
||||
span
|
||||
| A
|
||||
code <caption>
|
||||
| functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Breckpoint Specific
|
||||
span
|
||||
| Use
|
||||
code .table-responsive{-sm|-md|-lg|-xl}
|
||||
| functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table.table-responsive-sm
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table.table-responsive-sm
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table.table-responsive-sm
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table.table-responsive-sm
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
th(scope='col') Table heading
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
td Table cell
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
482
public/assets/pug/pages/template/bootstrap-border-table.pug
Normal file
482
public/assets/pug/pages/template/bootstrap-border-table.pug
Normal file
@@ -0,0 +1,482 @@
|
||||
- var theme_customizer = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Bootstrap Border Table
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Tables
|
||||
li.breadcrumb-item Bootstrap Tables
|
||||
li.breadcrumb-item.active Border Tables
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Horizontal Borders
|
||||
span
|
||||
| Example of
|
||||
code horizontal
|
||||
| table borders. This is a default table border style attached to
|
||||
code .table
|
||||
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
|
||||
code .table-border-horizontal
|
||||
| class added to the table with
|
||||
code .table
|
||||
| class.
|
||||
.table-responsive
|
||||
table.table.table-border-horizontal
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
th(scope='col') Role
|
||||
th(scope='col') Country
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Alexander
|
||||
td Orton
|
||||
td @mdorton
|
||||
td Admin
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td John Deo
|
||||
td Deo
|
||||
td @johndeo
|
||||
td User
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Randy Orton
|
||||
td the Bird
|
||||
td @twitter
|
||||
td admin
|
||||
td UK
|
||||
tr
|
||||
th(scope='row') 4
|
||||
td Randy Mark
|
||||
td Ottandy
|
||||
td @mdothe
|
||||
td user
|
||||
td AUS
|
||||
tr
|
||||
th(scope='row') 5
|
||||
td Ram Jacob
|
||||
td Thornton
|
||||
td @twitter
|
||||
td admin
|
||||
td IND
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Vertical Borders
|
||||
span
|
||||
| Example of
|
||||
code Vertical
|
||||
| table borders. This is a default table border style attached to
|
||||
code .table
|
||||
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
|
||||
code .table-border-vertical
|
||||
| class added to the table with
|
||||
code .table
|
||||
| class.
|
||||
.table-responsive
|
||||
table.table.table-border-vertical
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
th(scope='col') Role
|
||||
th(scope='col') Country
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Alexander
|
||||
td Orton
|
||||
td @mdorton
|
||||
td Admin
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td John Deo
|
||||
td Deo
|
||||
td @johndeo
|
||||
td User
|
||||
td USA
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Randy Orton
|
||||
td the Bird
|
||||
td @twitter
|
||||
td admin
|
||||
td UK
|
||||
tr
|
||||
th(scope='row') 4
|
||||
td Randy Mark
|
||||
td Ottandy
|
||||
td @mdothe
|
||||
td user
|
||||
td AUS
|
||||
tr
|
||||
th(scope='row') 5
|
||||
td Ram Jacob
|
||||
td Thornton
|
||||
td @twitter
|
||||
td admin
|
||||
td IND
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Both Bordeds
|
||||
span
|
||||
| Example of
|
||||
code horizontal
|
||||
| table borders. This is a default table border style attached to
|
||||
code .table
|
||||
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
|
||||
code .table-bordered
|
||||
| class added to the table with
|
||||
code .table
|
||||
| class.
|
||||
.table-responsive
|
||||
table.table.table-bordered
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Mark
|
||||
td Otto
|
||||
td @TwBootstrap
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Borderless Table
|
||||
span
|
||||
| Example of
|
||||
code horizontal
|
||||
| table borders. This is a default table border style attached to
|
||||
code .table
|
||||
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
|
||||
code .table-bordernone
|
||||
| class added to the table with
|
||||
code .table
|
||||
| class.
|
||||
.table-responsive
|
||||
table.table.table-bordernone
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th.bd-t-none(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th.bd-t-none(scope='row') 2
|
||||
td Mark
|
||||
td Otto
|
||||
td @TwBootstrap
|
||||
tr
|
||||
th.bd-t-none(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Default Table Border
|
||||
span
|
||||
| Example of
|
||||
code Default Table Border
|
||||
| .This is a default table border style attached to
|
||||
code .table
|
||||
| class.All borders have the same grey color and style, table itself doesn't have a border, but you can add this border using
|
||||
code .table
|
||||
| class added to the table with
|
||||
code .table
|
||||
| class.
|
||||
.table-responsive
|
||||
table.table
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Mark
|
||||
td Otto
|
||||
td @TwBootstrap
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Solid Border
|
||||
span
|
||||
| Example of a
|
||||
code solid
|
||||
| border inside table
|
||||
code thead
|
||||
| . This border inherits all styling options from the default border style, the only difference is it has
|
||||
code 2px
|
||||
| width. Sometimes it could be useful for visual separation and addition highlight. To use this border add
|
||||
code .border-solid
|
||||
| to the table head row. This border style works only with row borders.
|
||||
.table-responsive
|
||||
table.table
|
||||
thead
|
||||
tr.border-solid
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Mark
|
||||
td Otto
|
||||
td @TwBootstrap
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Double Border
|
||||
span
|
||||
| Example of a
|
||||
code double
|
||||
| border inside table head. This border has
|
||||
code 3px
|
||||
| width,
|
||||
code double
|
||||
| style and inherits all styling options from the default border style. Visually it displays table
|
||||
code head
|
||||
| and
|
||||
code body
|
||||
| as 2 separated table areas. To use this border add
|
||||
code .border-double
|
||||
| to the table head row.
|
||||
.table-responsive
|
||||
table.table
|
||||
thead
|
||||
tr.double
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr.double
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr.double
|
||||
th(scope='row') 2
|
||||
td Mark
|
||||
td Otto
|
||||
td @TwBootstrap
|
||||
tr.double
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Dotted Border
|
||||
span
|
||||
| Example of a
|
||||
code dotted
|
||||
| border inside table head. This border has
|
||||
code 3px
|
||||
| width,
|
||||
code dotted
|
||||
| style and inherits all styling options from the default border style. Visually it displays table
|
||||
code head
|
||||
| and
|
||||
code body
|
||||
| as 2 separated table areas. To use this border add
|
||||
code .border-dotted
|
||||
| to the table head row.
|
||||
.table-responsive
|
||||
table.table
|
||||
thead
|
||||
tr.dotted
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr.dotted
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr.dotted
|
||||
th(scope='row') 2
|
||||
td Mark
|
||||
td Otto
|
||||
td @TwBootstrap
|
||||
tr.dotted
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Dashed Border
|
||||
span
|
||||
| Example of a
|
||||
code dashed
|
||||
| border inside table head. This border has
|
||||
code 3px
|
||||
| width,
|
||||
code dashed
|
||||
| style and inherits all styling options from the default border style. Visually it displays table
|
||||
code head
|
||||
| and
|
||||
code body
|
||||
| as 2 separated table areas. To use this border add
|
||||
code .border-dashed
|
||||
| to the table head row.
|
||||
.table-responsive
|
||||
table.table
|
||||
thead
|
||||
tr.dashed
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr.dashed
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr.dashed
|
||||
th(scope='row') 2
|
||||
td Mark
|
||||
td Otto
|
||||
td @TwBootstrap
|
||||
tr.dashed
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Border Bottom Color
|
||||
span
|
||||
| EExample of a table head border with
|
||||
code custom
|
||||
| color. According to the custom color system options, you can set any of predefined colors by adding
|
||||
code .border-bottom-*
|
||||
| class to the table head row. This technique works with all border styles demonstrated above.
|
||||
.table-responsive
|
||||
table.table
|
||||
thead
|
||||
tr.border-bottom-primary
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr.border-bottom-secondary
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr.border-bottom-success
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr.border-bottom-info
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr.border-bottom-warning
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr.border-bottom-danger
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
350
public/assets/pug/pages/template/bootstrap-notify.pug
Normal file
350
public/assets/pug/pages/template/bootstrap-notify.pug
Normal file
@@ -0,0 +1,350 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var notify = true;
|
||||
- var page_notify = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Bootstrap Notify
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Advance
|
||||
li.breadcrumb-item.active Bootstrap Notify
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Bootstrap Notify
|
||||
span lorem ipsum dolor sit amet, consectetur adipisicing elit
|
||||
.card-body
|
||||
.m-portlet__body
|
||||
.row
|
||||
.col-xl-5
|
||||
form.theme-form.sm-form
|
||||
.mb-3
|
||||
.row
|
||||
label.col-xl-2.col-sm-12.col-md-12.col-form-label Placement
|
||||
.col-xl-4.col-sm-12.col-md-12.mb-4
|
||||
select.form-select#bootstrap-notify-placement-from.form-control
|
||||
option(value='top') Top
|
||||
option(value='bottom') Bottom
|
||||
.col-xl-4.col-md-12.col-sm-12.mb-4
|
||||
select.form-select#bootstrap-notify-placement-align.form-control
|
||||
option(value='left') Left
|
||||
option(value='right', select.form-selected='') Right
|
||||
option(value='center') Center
|
||||
.row
|
||||
label.col-xl-2.col-sm-12.col-md-12.col-form-label Animation
|
||||
.col-xl-4.col-md-12.col-sm-12.mb-4
|
||||
select.form-select#bootstrap-notify-enter.form-control
|
||||
optgroup(label='Attention Seekers')
|
||||
option(value='bounce') bounce
|
||||
option(value='flash') flash
|
||||
option(value='pulse') pulse
|
||||
option(value='rubberBand') rubberBand
|
||||
option(value='shake') shake
|
||||
option(value='swing') swing
|
||||
option(value='tada') tada
|
||||
option(value='wobble') wobble
|
||||
option(value='jello') jello
|
||||
optgroup(label='Bouncing Entrances')
|
||||
option(value='bounceIn') bounceIn
|
||||
option(value='bounceInDown') bounceInDown
|
||||
option(value='bounceInLeft') bounceInLeft
|
||||
option(value='bounceInRight') bounceInRight
|
||||
option(value='bounceInUp') bounceInUp
|
||||
optgroup(label='Bouncing Exits')
|
||||
option(value='bounceOut') bounceOut
|
||||
option(value='bounceOutDown') bounceOutDown
|
||||
option(value='bounceOutLeft') bounceOutLeft
|
||||
option(value='bounceOutRight') bounceOutRight
|
||||
option(value='bounceOutUp') bounceOutUp
|
||||
optgroup(label='Fading Entrances')
|
||||
option(value='fadeIn') fadeIn
|
||||
option(value='fadeInDown') fadeInDown
|
||||
option(value='fadeInDownBig') fadeInDownBig
|
||||
option(value='fadeInLeft') fadeInLeft
|
||||
option(value='fadeInLeftBig') fadeInLeftBig
|
||||
option(value='fadeInRight') fadeInRight
|
||||
option(value='fadeInRightBig') fadeInRightBig
|
||||
option(value='fadeInUp') fadeInUp
|
||||
option(value='fadeInUpBig') fadeInUpBig
|
||||
optgroup(label='Fading Exits')
|
||||
option(value='fadeOut') fadeOut
|
||||
option(value='fadeOutDown') fadeOutDown
|
||||
option(value='fadeOutDownBig') fadeOutDownBig
|
||||
option(value='fadeOutLeft') fadeOutLeft
|
||||
option(value='fadeOutLeftBig') fadeOutLeftBig
|
||||
option(value='fadeOutRight') fadeOutRight
|
||||
option(value='fadeOutRightBig') fadeOutRightBig
|
||||
option(value='fadeOutUp') fadeOutUp
|
||||
option(value='fadeOutUpBig') fadeOutUpBig
|
||||
optgroup(label='Flippers')
|
||||
option(value='flip') flip
|
||||
option(value='flipInX') flipInX
|
||||
option(value='flipInY') flipInY
|
||||
option(value='flipOutX') flipOutX
|
||||
option(value='flipOutY') flipOutY
|
||||
optgroup(label='Lightspeed')
|
||||
option(value='lightSpeedIn') lightSpeedIn
|
||||
option(value='lightSpeedOut') lightSpeedOut
|
||||
optgroup(label='Rotating Entrances')
|
||||
option(value='rotateIn') rotateIn
|
||||
option(value='rotateInDownLeft') rotateInDownLeft
|
||||
option(value='rotateInDownRight') rotateInDownRight
|
||||
option(value='rotateInUpLeft') rotateInUpLeft
|
||||
option(value='rotateInUpRight') rotateInUpRight
|
||||
optgroup(label='Rotating Exits')
|
||||
option(value='rotateOut') rotateOut
|
||||
option(value='rotateOutDownLeft') rotateOutDownLeft
|
||||
option(value='rotateOutDownRight') rotateOutDownRight
|
||||
option(value='rotateOutUpLeft') rotateOutUpLeft
|
||||
option(value='rotateOutUpRight') rotateOutUpRight
|
||||
optgroup(label='Sliding Entrances')
|
||||
option(value='slideInUp') slideInUp
|
||||
option(value='slideInDown') slideInDown
|
||||
option(value='slideInLeft') slideInLeft
|
||||
option(value='slideInRight') slideInRight
|
||||
optgroup(label='Sliding Exits')
|
||||
option(value='slideOutUp') slideOutUp
|
||||
option(value='slideOutDown') slideOutDown
|
||||
option(value='slideOutLeft') slideOutLeft
|
||||
option(value='slideOutRight') slideOutRight
|
||||
optgroup(label='Zoom Entrances')
|
||||
option(value='zoomIn') zoomIn
|
||||
option(value='zoomInDown') zoomInDown
|
||||
option(value='zoomInLeft') zoomInLeft
|
||||
option(value='zoomInRight') zoomInRight
|
||||
option(value='zoomInUp') zoomInUp
|
||||
optgroup(label='Zoom Exits')
|
||||
option(value='zoomOut') zoomOut
|
||||
option(value='zoomOutDown') zoomOutDown
|
||||
option(value='zoomOutLeft') zoomOutLeft
|
||||
option(value='zoomOutRight') zoomOutRight
|
||||
option(value='zoomOutUp') zoomOutUp
|
||||
optgroup(label='Specials')
|
||||
option(value='hinge') hinge
|
||||
option(value='rollIn') rollIn
|
||||
option(value='rollOut') rollOut
|
||||
.col-xl-4.col-md-12.col-sm-12.mb-4
|
||||
select.form-select#bootstrap-notify-exit.form-control
|
||||
optgroup(label='Attention Seekers')
|
||||
option(value='bounce') bounce
|
||||
option(value='flash') flash
|
||||
option(value='pulse') pulse
|
||||
option(value='rubberBand') rubberBand
|
||||
option(value='shake') shake
|
||||
option(value='swing') swing
|
||||
option(value='tada') tada
|
||||
option(value='wobble') wobble
|
||||
option(value='jello') jello
|
||||
optgroup(label='Bouncing Entrances')
|
||||
option(value='bounceIn') bounceIn
|
||||
option(value='bounceInDown') bounceInDown
|
||||
option(value='bounceInLeft') bounceInLeft
|
||||
option(value='bounceInRight') bounceInRight
|
||||
option(value='bounceInUp') bounceInUp
|
||||
optgroup(label='Bouncing Exits')
|
||||
option(value='bounceOut') bounceOut
|
||||
option(value='bounceOutDown') bounceOutDown
|
||||
option(value='bounceOutLeft') bounceOutLeft
|
||||
option(value='bounceOutRight') bounceOutRight
|
||||
option(value='bounceOutUp') bounceOutUp
|
||||
optgroup(label='Fading Entrances')
|
||||
option(value='fadeIn') fadeIn
|
||||
option(value='fadeInDown') fadeInDown
|
||||
option(value='fadeInDownBig') fadeInDownBig
|
||||
option(value='fadeInLeft') fadeInLeft
|
||||
option(value='fadeInLeftBig') fadeInLeftBig
|
||||
option(value='fadeInRight') fadeInRight
|
||||
option(value='fadeInRightBig') fadeInRightBig
|
||||
option(value='fadeInUp') fadeInUp
|
||||
option(value='fadeInUpBig') fadeInUpBig
|
||||
optgroup(label='Fading Exits')
|
||||
option(value='fadeOut') fadeOut
|
||||
option(value='fadeOutDown') fadeOutDown
|
||||
option(value='fadeOutDownBig') fadeOutDownBig
|
||||
option(value='fadeOutLeft') fadeOutLeft
|
||||
option(value='fadeOutLeftBig') fadeOutLeftBig
|
||||
option(value='fadeOutRight') fadeOutRight
|
||||
option(value='fadeOutRightBig') fadeOutRightBig
|
||||
option(value='fadeOutUp') fadeOutUp
|
||||
option(value='fadeOutUpBig') fadeOutUpBig
|
||||
optgroup(label='Flippers')
|
||||
option(value='flip') flip
|
||||
option(value='flipInX') flipInX
|
||||
option(value='flipInY') flipInY
|
||||
option(value='flipOutX') flipOutX
|
||||
option(value='flipOutY') flipOutY
|
||||
optgroup(label='Lightspeed')
|
||||
option(value='lightSpeedIn') lightSpeedIn
|
||||
option(value='lightSpeedOut') lightSpeedOut
|
||||
optgroup(label='Rotating Entrances')
|
||||
option(value='rotateIn') rotateIn
|
||||
option(value='rotateInDownLeft') rotateInDownLeft
|
||||
option(value='rotateInDownRight') rotateInDownRight
|
||||
option(value='rotateInUpLeft') rotateInUpLeft
|
||||
option(value='rotateInUpRight') rotateInUpRight
|
||||
optgroup(label='Rotating Exits')
|
||||
option(value='rotateOut') rotateOut
|
||||
option(value='rotateOutDownLeft') rotateOutDownLeft
|
||||
option(value='rotateOutDownRight') rotateOutDownRight
|
||||
option(value='rotateOutUpLeft') rotateOutUpLeft
|
||||
option(value='rotateOutUpRight') rotateOutUpRight
|
||||
optgroup(label='Sliding Entrances')
|
||||
option(value='slideInUp') slideInUp
|
||||
option(value='slideInDown') slideInDown
|
||||
option(value='slideInLeft') slideInLeft
|
||||
option(value='slideInRight') slideInRight
|
||||
optgroup(label='Sliding Exits')
|
||||
option(value='slideOutUp') slideOutUp
|
||||
option(value='slideOutDown') slideOutDown
|
||||
option(value='slideOutLeft') slideOutLeft
|
||||
option(value='slideOutRight') slideOutRight
|
||||
optgroup(label='Zoom Entrances')
|
||||
option(value='zoomIn') zoomIn
|
||||
option(value='zoomInDown') zoomInDown
|
||||
option(value='zoomInLeft') zoomInLeft
|
||||
option(value='zoomInRight') zoomInRight
|
||||
option(value='zoomInUp') zoomInUp
|
||||
optgroup(label='Zoom Exits')
|
||||
option(value='zoomOut') zoomOut
|
||||
option(value='zoomOutDown') zoomOutDown
|
||||
option(value='zoomOutLeft') zoomOutLeft
|
||||
option(value='zoomOutRight') zoomOutRight
|
||||
option(value='zoomOutUp') zoomOutUp
|
||||
optgroup(label='Specials')
|
||||
option(value='hinge') hinge
|
||||
option(value='rollIn') rollIn
|
||||
option(value='rollOut') rollOut
|
||||
.row
|
||||
label.col-xl-2.col-sm-12.col-md-12.col-form-label Icon
|
||||
.col-xl-4.col-md-12.col-sm-12.mb-4
|
||||
select.form-select#bootstrap-notify-icon.form-control
|
||||
option(value='') None
|
||||
option(value='fa fa-check-square') fa fa-check-square
|
||||
option(value='fa fa-warning') fa fa-warning
|
||||
option(value='fa fa-cloud-download') fa fa-cloud-download
|
||||
option(value='fa fa-unlock-alt') fa fa-unlock-alt
|
||||
option(value='fa fa-spin fa-circle-o-notch') fa fa-spin fa-circle-o-notch
|
||||
option(value='fa fa-spin fa-refresh') fa fa-spin fa-refresh
|
||||
.row
|
||||
.mb-3.row
|
||||
.row
|
||||
.col-lg-6
|
||||
.mb-3.row
|
||||
label.col-sm-4.col-6.col-form-label URL Clickable
|
||||
.col-sm-8.col-6
|
||||
.media-body.text-start.icon-state
|
||||
label.switch
|
||||
input#bootstrap-notify-url(type='checkbox')
|
||||
span.switch-state
|
||||
.mb-3.row
|
||||
label.col-sm-4.col-6.col-form-label Allow dismiss
|
||||
.col-sm-8.col-6
|
||||
.media-body.text-start.icon-state
|
||||
label.switch
|
||||
input#bootstrap-notify-dismiss(type='checkbox')
|
||||
span.switch-state
|
||||
.mb-3.row
|
||||
label.col-sm-4.col-6.col-form-label Pause on hover
|
||||
.col-sm-8.col-6
|
||||
.media-body.text-start.icon-state
|
||||
label.switch
|
||||
input#bootstrap-notify-pause(type='checkbox')
|
||||
span.switch-state
|
||||
.mb-3.row
|
||||
label.col-sm-4.col-6.col-form-label Newest on top
|
||||
.col-sm-8.col-6
|
||||
.media-body.text-start.icon-state
|
||||
label.switch
|
||||
input#bootstrap-notify-top(type='checkbox')
|
||||
span.switch-state
|
||||
.mb-3.row
|
||||
label.col-sm-4.col-6.col-form-label Show Title
|
||||
.col-sm-8.col-6
|
||||
.media-body.text-start.icon-state
|
||||
label.switch
|
||||
input#bootstrap-notify-title(type='checkbox')
|
||||
span.switch-state
|
||||
.mb-3.row
|
||||
label.col-sm-4.col-6.col-form-label Show Progress
|
||||
.col-sm-8.col-6
|
||||
.media-body.text-start.icon-state
|
||||
label.switch
|
||||
input#bootstrap-notify-progress(type='checkbox')
|
||||
span.switch-state
|
||||
.col-lg-6.theme-form.sm-form
|
||||
.mb-3.row
|
||||
label.col-form-label.col-lg-3.col-sm-12 Spacing
|
||||
.col-lg-4.col-md-12.col-sm-12
|
||||
input#bootstrap-notify-spacing.form-control.digits(type='number', value='10')
|
||||
.mb-3.row
|
||||
label.col-form-label.col-lg-3.col-sm-12 Offset X
|
||||
.col-lg-4.col-md-12.col-sm-12
|
||||
input#bootstrap-notify-offset-x.form-control.digits(type='number', value='30')
|
||||
.mb-3.row
|
||||
label.col-form-label.col-lg-3.col-sm-12 Offset Y
|
||||
.col-lg-4.col-md-9.col-sm-12
|
||||
input#bootstrap-notify-offset-y.form-control.digits(type='number', value='30')
|
||||
.mb-3.row
|
||||
label.col-form-label.col-lg-3.col-sm-12 Delay
|
||||
.col-lg-4.col-md-12.col-sm-12
|
||||
input#bootstrap-notify-delay.form-control.digits(type='number', value='1000')
|
||||
.mb-3.row
|
||||
label.col-form-label.col-lg-3.col-sm-12 Timer
|
||||
.col-lg-4.col-md-12.col-sm-12
|
||||
input#bootstrap-notify-timer.form-control.digits(type='number', value='2000')
|
||||
.mb-3.row
|
||||
label.col-form-label.col-lg-3.col-sm-12 Z-Index
|
||||
.col-lg-4.col-md-12.col-sm-12
|
||||
input#bootstrap-notify-z-index.form-control.digits(type='number', value='10000')
|
||||
.mb-3.row
|
||||
label.col-form-label.col-lg-3.col-sm-12 State
|
||||
.col-lg-4.col-md-12.col-sm-12
|
||||
select.form-select#bootstrap-notify-state.form-control.height-35
|
||||
option(value='primary') Primary
|
||||
option(value='secondary') Secondary
|
||||
option(value='success') Success
|
||||
option(value='info') Info
|
||||
option(value='warning') Warning
|
||||
option(value='danger') Danger
|
||||
option(value='light') light
|
||||
option(value='dark') dark
|
||||
.card-footer
|
||||
.col-sm-12
|
||||
button#bootstrap-notify-gen-btn.btn.btn-primary Display Notify
|
||||
button.btn.btn-light(type='reset') Reset
|
||||
.card
|
||||
.card-body
|
||||
.row
|
||||
.col-sm-12
|
||||
h5 Example Of How To Use Bootstrap Notify
|
||||
span
|
||||
| Click Display Notify button to show different notify demo's & display script of different Notify demo below
|
||||
pre.mb-0
|
||||
code#notify-code-show
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
210
public/assets/pug/pages/template/bootstrap-sizing-table.pug
Normal file
210
public/assets/pug/pages/template/bootstrap-sizing-table.pug
Normal file
@@ -0,0 +1,210 @@
|
||||
- var theme_customizer = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Bootstrap Table Sizes
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Tables
|
||||
li.breadcrumb-item Bootstrap Tables
|
||||
li.breadcrumb-item.active Sizing Tables
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Extra Large Tables
|
||||
span
|
||||
| Example of Extra large table, Add
|
||||
code .table-xl
|
||||
| class to the
|
||||
code .table
|
||||
| to create a table with extra large spacing. Extra larger table all rows have
|
||||
code 1.25rem
|
||||
| height.
|
||||
.table-responsive
|
||||
table.table.table-xl
|
||||
thead
|
||||
tr
|
||||
th #
|
||||
th First Name
|
||||
th Last Name
|
||||
th Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Large Table
|
||||
span
|
||||
| Example of large table, Add
|
||||
code .table-lg
|
||||
| class to the
|
||||
code .table
|
||||
| to create a table with large spacing. larger table all rows have
|
||||
code 0.9rem
|
||||
| height.
|
||||
.table-responsive
|
||||
table.table.table-lg
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First
|
||||
th(scope='col') Last
|
||||
th(scope='col') Handle
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td(colspan='2') Larry the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Default Table
|
||||
span
|
||||
| Example of large table, Add
|
||||
code .table-de
|
||||
| class to the
|
||||
code .table
|
||||
| to create a table with large spacing. larger table all rows have
|
||||
code 0.75rem
|
||||
| height.
|
||||
.table-responsive
|
||||
table.table.table-de
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First
|
||||
th(scope='col') Last
|
||||
th(scope='col') Handle
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td(colspan='2') Larry the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Small table
|
||||
span
|
||||
| Example of small table, Add
|
||||
code .table-sm
|
||||
| class to the
|
||||
code .table
|
||||
| to create a table with small spacing. Small table all rows have
|
||||
code 0.3rem
|
||||
| height
|
||||
.table-responsive
|
||||
table.table.table-sm
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First
|
||||
th(scope='col') Last
|
||||
th(scope='col') Handle
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td(colspan='2') Larry the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Extra Small table
|
||||
span
|
||||
| Example of small table, Add
|
||||
code .table-xs
|
||||
| class to the
|
||||
code .table
|
||||
| to create a table with extra small spacing. Small table all rows have
|
||||
code 1.5rem
|
||||
| height
|
||||
.table-responsive
|
||||
table.table.table-xs
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First
|
||||
th(scope='col') Last
|
||||
th(scope='col') Handle
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td(colspan='2') Larry the Bird
|
||||
td @twitter
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
326
public/assets/pug/pages/template/bootstrap-styling-table.pug
Normal file
326
public/assets/pug/pages/template/bootstrap-styling-table.pug
Normal file
@@ -0,0 +1,326 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Bootstrap Styling Tables
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Tables
|
||||
li.breadcrumb-item Bootstrap Tables
|
||||
li.breadcrumb-item.active Styling Tables
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Defult Styling
|
||||
span
|
||||
| use class
|
||||
code table table-styling
|
||||
| inside table element
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table.table-styling
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Table head options
|
||||
span
|
||||
| Use class
|
||||
code .table-primary
|
||||
| inside thead tr element.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table
|
||||
thead.table-primary
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Table head options With Primary Background
|
||||
span
|
||||
| Use background classes
|
||||
code .bg-*
|
||||
| and
|
||||
code table-primary
|
||||
| ,
|
||||
code table-secondary
|
||||
| ,
|
||||
code table-success
|
||||
| ,
|
||||
code table-danger
|
||||
| ,
|
||||
code table-info
|
||||
| ,
|
||||
code table-warning
|
||||
| to make custom
|
||||
code thead
|
||||
| background. You can also use Stack Admin color palette classes for background.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table
|
||||
thead.bg-primary
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive
|
||||
table.table
|
||||
thead.table-success
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Table Footer Styling
|
||||
span
|
||||
| Use class
|
||||
code table-info
|
||||
| ,
|
||||
code table-success
|
||||
| ,
|
||||
code table-success
|
||||
| ,
|
||||
code table-info
|
||||
| ,
|
||||
code table-danger
|
||||
| ,
|
||||
code table-primary
|
||||
| ,
|
||||
code table-secondary
|
||||
| ,
|
||||
code table-light
|
||||
| ,
|
||||
code table-active
|
||||
| and also use
|
||||
code bg-*
|
||||
| inside tfoot element.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive.table-border-radius
|
||||
table.table
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tfoot.table-success
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Custom Table Color
|
||||
span
|
||||
| Use class
|
||||
code table-*
|
||||
| inside table element.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive.table-border-radius
|
||||
table.table.table-styling.table-primary
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Custom Table Color with Hover and Stripped
|
||||
span
|
||||
| Use class
|
||||
code table-hover, table-striped table-*
|
||||
code table-info
|
||||
| ,
|
||||
code table-success
|
||||
| ,
|
||||
code table-success
|
||||
| ,
|
||||
code table-info
|
||||
| ,
|
||||
code table-danger
|
||||
| ,
|
||||
code table-primary
|
||||
| ,
|
||||
code table-secondary
|
||||
| ,
|
||||
code table-light
|
||||
| ,
|
||||
code table-active
|
||||
| inside table element.
|
||||
.card-block.row
|
||||
.col-sm-12.col-lg-12.col-xl-12
|
||||
.table-responsive.table-border-radius
|
||||
table.table.table-styling.table-hover.table-striped.table-primary
|
||||
thead
|
||||
tr
|
||||
th(scope='col') #
|
||||
th(scope='col') First Name
|
||||
th(scope='col') Last Name
|
||||
th(scope='col') Username
|
||||
tbody
|
||||
tr
|
||||
th(scope='row') 1
|
||||
td Mark
|
||||
td Otto
|
||||
td @mdo
|
||||
tr
|
||||
th(scope='row') 2
|
||||
td Jacob
|
||||
td Thornton
|
||||
td @fat
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
tr
|
||||
th(scope='row') 3
|
||||
td Larry
|
||||
td the Bird
|
||||
td @twitter
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
78
public/assets/pug/pages/template/box-layout.pug
Normal file
78
public/assets/pug/pages/template/box-layout.pug
Normal file
@@ -0,0 +1,78 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body.box-layout
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper.box-layout
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Box Layout
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Page Layout
|
||||
li.breadcrumb-item.active Boxed
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card.alert.alert-primary(role='alert')
|
||||
h4.alert-heading Tip!
|
||||
p
|
||||
| Add class="box-layout" attribute to get this layout. The boxed layout is helpful when working on
|
||||
| large screens because it prevents the site from stretching very wide.
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0.d-flex.align-items-center.justify-content-between
|
||||
h5 Title
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
.card-body
|
||||
span Start creating your amazing application!
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <div class="card-body">
|
||||
| <span>Start creating your amazing application!
|
||||
| </span>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card-footer
|
||||
h6.mb-0 Card Footer
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
129
public/assets/pug/pages/template/breadcrumb.pug
Normal file
129
public/assets/pug/pages/template/breadcrumb.pug
Normal file
@@ -0,0 +1,129 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Breadcrumb
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Advance
|
||||
li.breadcrumb-item.active Breadcrumb
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
// default breadcrumb start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Default bootstrap breadcrumb
|
||||
span
|
||||
| use class
|
||||
code .breadcrumb to ol
|
||||
.card-body
|
||||
ol.breadcrumb.p-t-0.p-l-0
|
||||
li.breadcrumb-item.active Home
|
||||
ol.breadcrumb.p-l-0
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item.active Library
|
||||
ol.breadcrumb.p-l-0
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Library
|
||||
li.breadcrumb-item.active Data
|
||||
ol.breadcrumb.m-b-0.p-b-0.p-l-0
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-home
|
||||
li.breadcrumb-item Library
|
||||
li.breadcrumb-item.active Data
|
||||
// default breadcrumb ends
|
||||
// Nav breadcrumb start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Nav breadcrumb
|
||||
span
|
||||
| use class
|
||||
code .breadcrumb to nav
|
||||
| similar to navigation
|
||||
.card-body
|
||||
nav.breadcrumb
|
||||
a.breadcrumb-item(href='javascript:void(0)') Home
|
||||
a.breadcrumb-item(href='javascript:void(0)') Library
|
||||
span.breadcrumb-item.active Bootstrap
|
||||
nav.breadcrumb.breadcrumb-icon
|
||||
a.breadcrumb-item(href='javascript:void(0)') Home
|
||||
a.breadcrumb-item(href='javascript:void(0)') Library
|
||||
span.breadcrumb-item.active Bootstrap
|
||||
nav.breadcrumb.breadcrumb-no-divider.mb-0
|
||||
a.breadcrumb-item(href='javascript:void(0)') Home
|
||||
a.breadcrumb-item(href='javascript:void(0)') Library
|
||||
span.breadcrumb-item.active Bootstrap
|
||||
// Nav breadcrumb ends
|
||||
// colored navigation start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Colored breadcrumb
|
||||
span
|
||||
| use class
|
||||
code .breadcrumb-colored .bg-primary
|
||||
.card-body
|
||||
ol.breadcrumb.breadcrumb-colored.m-b-30.bg-primary
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item.active Library
|
||||
ol.breadcrumb.breadcrumb-colored.m-b-30.bg-secondary
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item.active Library
|
||||
ol.breadcrumb.breadcrumb-colored.m-b-30.bg-success
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item.active Library
|
||||
ol.breadcrumb.breadcrumb-colored.m-b-30.bg-info
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item.active Library
|
||||
ol.breadcrumb.breadcrumb-colored.m-b-30.bg-warning
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item.active Library
|
||||
ol.breadcrumb.breadcrumb-colored.m-b-30.bg-danger
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item.active Library
|
||||
ol.breadcrumb.breadcrumb-colored.m-b-30.bg-light
|
||||
li.breadcrumb-item
|
||||
a.txt-dark(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item.txt-dark.active Library
|
||||
ol.breadcrumb.breadcrumb-colored.m-b-0.bg-dark
|
||||
li.breadcrumb-item
|
||||
a(href='javascript:void(0)') Home
|
||||
li.breadcrumb-item.active Library
|
||||
// Container-fluid Ends
|
||||
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
5422
public/assets/pug/pages/template/button-builder.pug
Normal file
5422
public/assets/pug/pages/template/button-builder.pug
Normal file
File diff suppressed because it is too large
Load Diff
740
public/assets/pug/pages/template/button-group.pug
Normal file
740
public/assets/pug/pages/template/button-group.pug
Normal file
@@ -0,0 +1,740 @@
|
||||
- var height_equal = true;
|
||||
- var theme_customizer = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Button Group
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Buttons
|
||||
li.breadcrumb-item.active Button Group
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Basic button group
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-primary(type='button') Left
|
||||
button.btn.btn-primary(type='button') Middle
|
||||
button.btn.btn-primary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-secondary(type='button') Left
|
||||
button.btn.btn-secondary(type='button') Middle
|
||||
button.btn.btn-secondary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-success(type='button') Left
|
||||
button.btn.btn-success(type='button') Middle
|
||||
button.btn.btn-success(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-info(type='button') Left
|
||||
button.btn.btn-info(type='button') Middle
|
||||
button.btn.btn-info(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-warning(type='button') Left
|
||||
button.btn.btn-warning(type='button') Middle
|
||||
button.btn.btn-warning(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-danger(type='button') Left
|
||||
button.btn.btn-danger(type='button') Middle
|
||||
button.btn.btn-danger(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-light(type='button') Left
|
||||
button.btn.btn-light(type='button') Middle
|
||||
button.btn.btn-light(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-dark(type='button') Left
|
||||
button.btn.btn-dark(type='button') Middle
|
||||
button.btn.btn-dark(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Edges button group
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-primary(type='button') Left
|
||||
button.btn.btn-primary(type='button') Middle
|
||||
button.btn.btn-primary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-secondary(type='button') Left
|
||||
button.btn.btn-secondary(type='button') Middle
|
||||
button.btn.btn-secondary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-success(type='button') Left
|
||||
button.btn.btn-success(type='button') Middle
|
||||
button.btn.btn-success(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-info(type='button') Left
|
||||
button.btn.btn-info(type='button') Middle
|
||||
button.btn.btn-info(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-warning(type='button') Left
|
||||
button.btn.btn-warning(type='button') Middle
|
||||
button.btn.btn-warning(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-danger(type='button') Left
|
||||
button.btn.btn-danger(type='button') Middle
|
||||
button.btn.btn-danger(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-light(type='button') Left
|
||||
button.btn.btn-light(type='button') Middle
|
||||
button.btn.btn-light(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-dark(type='button') Left
|
||||
button.btn.btn-dark(type='button') Middle
|
||||
button.btn.btn-dark(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Flat button group
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-primary(type='button') Left
|
||||
button.btn.btn-primary(type='button') Middle
|
||||
button.btn.btn-primary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-secondary(type='button') Left
|
||||
button.btn.btn-secondary(type='button') Middle
|
||||
button.btn.btn-secondary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-success(type='button') Left
|
||||
button.btn.btn-success(type='button') Middle
|
||||
button.btn.btn-success(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-info(type='button') Left
|
||||
button.btn.btn-info(type='button') Middle
|
||||
button.btn.btn-info(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-dark(type='button') Left
|
||||
button.btn.btn-dark(type='button') Middle
|
||||
button.btn.btn-dark(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-warning(type='button') Left
|
||||
button.btn.btn-warning(type='button') Middle
|
||||
button.btn.btn-warning(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-danger(type='button') Left
|
||||
button.btn.btn-danger(type='button') Middle
|
||||
button.btn.btn-danger(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-light(type='button') Left
|
||||
button.btn.btn-light(type='button') Middle
|
||||
button.btn.btn-light(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-dark(type='button') Left
|
||||
button.btn.btn-dark(type='button') Middle
|
||||
button.btn.btn-dark(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 large Button group
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-primary.btn-lg(type='button') Left
|
||||
button.btn.btn-primary.btn-lg(type='button') Middle
|
||||
button.btn.btn-primary.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-secondary.btn-lg(type='button') Left
|
||||
button.btn.btn-secondary.btn-lg(type='button') Middle
|
||||
button.btn.btn-secondary.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-success.btn-lg(type='button') Left
|
||||
button.btn.btn-success.btn-lg(type='button') Middle
|
||||
button.btn.btn-success.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-info.btn-lg(type='button') Left
|
||||
button.btn.btn-info.btn-lg(type='button') Middle
|
||||
button.btn.btn-info.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-warning.btn-lg(type='button') Left
|
||||
button.btn.btn-warning.btn-lg(type='button') Middle
|
||||
button.btn.btn-warning.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-danger.btn-lg(type='button') Left
|
||||
button.btn.btn-danger.btn-lg(type='button') Middle
|
||||
button.btn.btn-danger.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-light.btn-lg(type='button') Left
|
||||
button.btn.btn-light.btn-lg(type='button') Middle
|
||||
button.btn.btn-light.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-dark.btn-lg(type='button') Left
|
||||
button.btn.btn-dark.btn-lg(type='button') Middle
|
||||
button.btn.btn-dark.btn-lg(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 large Edges Button group
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-primary.btn-lg(type='button') Left
|
||||
button.btn.btn-primary.btn-lg(type='button') Middle
|
||||
button.btn.btn-primary.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-secondary.btn-lg(type='button') Left
|
||||
button.btn.btn-secondary.btn-lg(type='button') Middle
|
||||
button.btn.btn-secondary.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-success.btn-lg(type='button') Left
|
||||
button.btn.btn-success.btn-lg(type='button') Middle
|
||||
button.btn.btn-success.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-info.btn-lg(type='button') Left
|
||||
button.btn.btn-info.btn-lg(type='button') Middle
|
||||
button.btn.btn-info.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-warning.btn-lg(type='button') Left
|
||||
button.btn.btn-warning.btn-lg(type='button') Middle
|
||||
button.btn.btn-warning.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-danger.btn-lg(type='button') Left
|
||||
button.btn.btn-danger.btn-lg(type='button') Middle
|
||||
button.btn.btn-danger.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-light.btn-lg(type='button') Left
|
||||
button.btn.btn-light.btn-lg(type='button') Middle
|
||||
button.btn.btn-light.btn-lg(type='button') Right
|
||||
.col-xl-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-dark.btn-lg(type='button') Left
|
||||
button.btn.btn-dark.btn-lg(type='button') Middle
|
||||
button.btn.btn-dark.btn-lg(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Outline Custom button group
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-primary(type='button') Left
|
||||
button.btn.btn-primary(type='button') Middle
|
||||
button.btn.btn-outline-primary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-secondary(type='button') Left
|
||||
button.btn.btn-secondary(type='button') Middle
|
||||
button.btn.btn-outline-secondary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-success(type='button') Left
|
||||
button.btn.btn-success(type='button') Middle
|
||||
button.btn.btn-outline-success(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-info(type='button') Left
|
||||
button.btn.btn-info(type='button') Middle
|
||||
button.btn.btn-outline-info(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-warning(type='button') Left
|
||||
button.btn.btn-warning(type='button') Middle
|
||||
button.btn.btn-outline-warning(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-danger(type='button') Left
|
||||
button.btn.btn-danger(type='button') Middle
|
||||
button.btn.btn-outline-danger(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Left
|
||||
button.btn.btn-light(type='button') Middle
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-dark(type='button') Left
|
||||
button.btn.btn-dark(type='button') Middle
|
||||
button.btn.btn-outline-dark(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Outline custom button group
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-primary(type='button') Left
|
||||
button.btn.btn-outline-primary(type='button') Middle
|
||||
button.btn.btn-primary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-secondary(type='button') Left
|
||||
button.btn.btn-outline-secondary(type='button') Middle
|
||||
button.btn.btn-secondary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-success(type='button') Left
|
||||
button.btn.btn-outline-success(type='button') Middle
|
||||
button.btn.btn-success(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-info(type='button') Left
|
||||
button.btn.btn-outline-info(type='button') Middle
|
||||
button.btn.btn-info(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-warning(type='button') Left
|
||||
button.btn.btn-outline-warning(type='button') Middle
|
||||
button.btn.btn-warning(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-danger(type='button') Left
|
||||
button.btn.btn-outline-danger(type='button') Middle
|
||||
button.btn.btn-danger(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-light(type='button') Left
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Middle
|
||||
button.btn.btn-light(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-dark(type='button') Left
|
||||
button.btn.btn-outline-dark(type='button') Middle
|
||||
button.btn.btn-dark(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Outline button group
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-primary(type='button') Left
|
||||
button.btn.btn-outline-primary(type='button') Middle
|
||||
button.btn.btn-outline-primary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-secondary(type='button') Left
|
||||
button.btn.btn-outline-secondary(type='button') Middle
|
||||
button.btn.btn-outline-secondary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-success(type='button') Left
|
||||
button.btn.btn-outline-success(type='button') Middle
|
||||
button.btn.btn-outline-success(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-info(type='button') Left
|
||||
button.btn.btn-outline-info(type='button') Middle
|
||||
button.btn.btn-outline-info(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-warning(type='button') Left
|
||||
button.btn.btn-outline-warning(type='button') Middle
|
||||
button.btn.btn-outline-warning(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-danger(type='button') Left
|
||||
button.btn.btn-outline-danger(type='button') Middle
|
||||
button.btn.btn-outline-danger(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Left
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Middle
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-dark(type='button') Left
|
||||
button.btn.btn-outline-dark(type='button') Middle
|
||||
button.btn.btn-outline-dark(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Outline Edges button
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-primary(type='button') Left
|
||||
button.btn.btn-outline-primary(type='button') Middle
|
||||
button.btn.btn-outline-primary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-secondary(type='button') Left
|
||||
button.btn.btn-outline-secondary(type='button') Middle
|
||||
button.btn.btn-outline-secondary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-success(type='button') Left
|
||||
button.btn.btn-outline-success(type='button') Middle
|
||||
button.btn.btn-outline-success(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-info(type='button') Left
|
||||
button.btn.btn-outline-info(type='button') Middle
|
||||
button.btn.btn-outline-info(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-warning(type='button') Left
|
||||
button.btn.btn-outline-warning(type='button') Middle
|
||||
button.btn.btn-outline-warning(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-danger(type='button') Left
|
||||
button.btn.btn-outline-danger(type='button') Middle
|
||||
button.btn.btn-outline-danger(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Left
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Middle
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-dark(type='button') Left
|
||||
button.btn.btn-outline-dark(type='button') Middle
|
||||
button.btn.btn-outline-dark(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Outline flat button
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-primary(type='button') Left
|
||||
button.btn.btn-outline-primary(type='button') Middle
|
||||
button.btn.btn-outline-primary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-secondary(type='button') Left
|
||||
button.btn.btn-outline-secondary(type='button') Middle
|
||||
button.btn.btn-outline-secondary(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-success(type='button') Left
|
||||
button.btn.btn-outline-success(type='button') Middle
|
||||
button.btn.btn-outline-success(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-info(type='button') Left
|
||||
button.btn.btn-outline-info(type='button') Middle
|
||||
button.btn.btn-outline-info(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-warning(type='button') Left
|
||||
button.btn.btn-outline-warning(type='button') Middle
|
||||
button.btn.btn-outline-warning(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-danger(type='button') Left
|
||||
button.btn.btn-outline-danger(type='button') Middle
|
||||
button.btn.btn-outline-danger(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Left
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Middle
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Right
|
||||
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group.btn-group-square(role='group', aria-label='Basic example')
|
||||
button.btn.btn-outline-dark(type='button') Left
|
||||
button.btn.btn-outline-dark(type='button') Middle
|
||||
button.btn.btn-outline-dark(type='button') Right
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Radio button group
|
||||
span
|
||||
| Add
|
||||
code .active
|
||||
| for active state and
|
||||
code .disabled
|
||||
| class or
|
||||
code disabled="disabled"
|
||||
| attribute
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-radio
|
||||
.btn-group(data-bs-toggle='buttons')
|
||||
div.btn.btn-primary
|
||||
.radio.radio-primary
|
||||
input#radio7(type='radio', name='radio1', value='option1')
|
||||
label(for='radio7') Option 1
|
||||
div.btn.btn-primary.active
|
||||
.radio.radio-primary
|
||||
input#radio8(type='radio', name='radio1', value='option1', checked='')
|
||||
label(for='radio8') Option 2
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-radio
|
||||
.btn-group(data-bs-toggle='buttons')
|
||||
div.btn.btn-secondary
|
||||
.radio.radio-secondary
|
||||
input#radio11(type='radio', name='radio2', value='option1')
|
||||
label(for='radio11') Option 1
|
||||
div.btn.btn-secondary.active
|
||||
.radio.radio-secondary
|
||||
input#radio12(type='radio', name='radio2', value='option1', checked='')
|
||||
label(for='radio12') Option 2
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-radio
|
||||
.btn-group(data-bs-toggle='buttons')
|
||||
div.btn.btn-success
|
||||
.radio.radio-success
|
||||
input#radio13(type='radio', name='radio3', value='option1')
|
||||
label(for='radio13') Option 1
|
||||
div.btn.btn-success.active
|
||||
.radio.radio-success
|
||||
input#radio14(type='radio', name='radio3', value='option1', checked='')
|
||||
label(for='radio14') Option 2
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-radio
|
||||
.btn-group(data-bs-toggle='buttons')
|
||||
div.btn.btn-info
|
||||
.radio.radio-info
|
||||
input#radio15(type='radio', name='radio4', value='option1')
|
||||
label(for='radio15') Option 1
|
||||
div.btn.btn-info.active
|
||||
.radio.radio-info
|
||||
input#radio16(type='radio', name='radio4', value='option1', checked='')
|
||||
label(for='radio16') Option 2
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-radio
|
||||
.btn-group(data-bs-toggle='buttons')
|
||||
div.btn.btn-warning
|
||||
.radio.radio-warning
|
||||
input#radio17(type='radio', name='radio5', value='option1')
|
||||
label(for='radio17') Option 1
|
||||
div.btn.btn-warning.active
|
||||
.radio.radio-warning
|
||||
input#radio18(type='radio', name='radio5', value='option1', checked='')
|
||||
label(for='radio18') Option 2
|
||||
.col-xxl-4.col-md-6.col-sm-12
|
||||
.btn-radio
|
||||
.btn-group(data-bs-toggle='buttons')
|
||||
div.btn.btn-danger
|
||||
.radio.radio-danger
|
||||
input#radio20(type='radio', name='radio6', value='option1')
|
||||
label(for='radio20') Option 1
|
||||
div.btn.btn-danger.active
|
||||
.radio.radio-danger
|
||||
input#radio22(type='radio', name='radio6', value='option1', checked='')
|
||||
label(for='radio22') Option 2
|
||||
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
|
||||
.btn-radio
|
||||
.btn-group(data-bs-toggle='buttons')
|
||||
div.btn.btn-light.txt-dark
|
||||
.radio.radio-light
|
||||
input#radio23(type='radio', name='radio7', value='option1')
|
||||
label(for='radio23') Option 1
|
||||
div.btn.btn-light.active.txt-dark
|
||||
.radio.radio-light
|
||||
input#radio24(type='radio', name='radio7', value='option1', checked='')
|
||||
label(for='radio24') Option 2
|
||||
.col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Check Box button group
|
||||
span
|
||||
| Add
|
||||
code .active
|
||||
| for active state and
|
||||
code .disabled
|
||||
| class or
|
||||
code disabled="disabled"
|
||||
| attribute
|
||||
.card-body.btn-group-showcase
|
||||
.row
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-option(data-bs-toggle='buttons')
|
||||
div.btn.btn-primary
|
||||
.checkbox.checkbox-primary
|
||||
input#checkbox-primary-1(type='checkbox')
|
||||
label(for='checkbox-primary-1') Option 1
|
||||
div.btn.btn-primary
|
||||
.checkbox.checkbox-primary
|
||||
input#checkbox-primary-2(type='checkbox')
|
||||
label(for='checkbox-primary-2') Option 2
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-option(data-bs-toggle='buttons')
|
||||
div.btn.btn-secondary
|
||||
.checkbox.checkbox-secondary
|
||||
input#checkbox-primary-3(type='checkbox')
|
||||
label(for='checkbox-primary-3') Option 1
|
||||
div.btn.btn-secondary
|
||||
.checkbox.checkbox-secondary
|
||||
input#checkbox-primary-4(type='checkbox')
|
||||
label(for='checkbox-primary-4') Option 2
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-option(data-bs-toggle='buttons')
|
||||
div.btn.btn-success
|
||||
.checkbox.checkbox-success
|
||||
input#checkbox-primary-5(type='checkbox')
|
||||
label(for='checkbox-primary-5') Option 1
|
||||
div.btn.btn-success
|
||||
.checkbox.checkbox-success
|
||||
input#checkbox-primary-6(type='checkbox')
|
||||
label(for='checkbox-primary-6') Option 2
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-option(data-bs-toggle='buttons')
|
||||
div.btn.btn-info
|
||||
.checkbox.checkbox-info
|
||||
input#checkbox-primary-7(type='checkbox')
|
||||
label(for='checkbox-primary-7') Option 1
|
||||
div.btn.btn-info
|
||||
.checkbox.checkbox-info
|
||||
input#checkbox-primary-8(type='checkbox')
|
||||
label(for='checkbox-primary-8') Option 2
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-option(data-bs-toggle='buttons')
|
||||
div.btn.btn-warning
|
||||
.checkbox.checkbox-warning
|
||||
input#checkbox-warning-9(type='checkbox')
|
||||
label(for='checkbox-warning-9') Option 1
|
||||
div.btn.btn-warning
|
||||
.checkbox.checkbox-warning
|
||||
input#checkbox-warning-10(type='checkbox')
|
||||
label(for='checkbox-warning-10') Option 2
|
||||
.col-xl-6.col-sm-12
|
||||
.btn-group.btn-option(data-bs-toggle='buttons')
|
||||
div.btn.btn-danger
|
||||
.checkbox.checkbox-danger
|
||||
input#checkbox-danger-11(type='checkbox')
|
||||
label(for='checkbox-danger-11') Option 1
|
||||
div.btn.btn-danger
|
||||
.checkbox.checkbox-danger
|
||||
input#checkbox-danger-12(type='checkbox')
|
||||
label(for='checkbox-danger-12') Option 2
|
||||
.col-xl-6.col-sm-12.button-group-mb-sm
|
||||
.btn-group.btn-option(data-bs-toggle='buttons')
|
||||
div.btn.btn-light.txt-dark
|
||||
.checkbox.checkbox-light
|
||||
input#checkbox-light-13(type='checkbox')
|
||||
label(for='checkbox-light-13') Option 1
|
||||
div.btn.btn-light.txt-dark
|
||||
.checkbox.checkbox-light
|
||||
input#checkbox-light-14(type='checkbox')
|
||||
label(for='checkbox-light-14') Option 2
|
||||
.col-lg-6
|
||||
.card.height-equal
|
||||
.card-header
|
||||
h5 Nesting
|
||||
span Make nesting buttons
|
||||
.card-body.btn-group-wrapper
|
||||
.m-b-30
|
||||
.btn-group(role='group', aria-label='Button group with nested dropdown')
|
||||
button.btn.btn-primary
|
||||
i.fa.fa-bold
|
||||
button.btn.btn-secondary
|
||||
i.fa.fa.fa-italic
|
||||
.btn-group(role='group')
|
||||
button#btnGroupDrop1.btn.btn-light.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Dropdown
|
||||
.dropdown-menu(aria-labelledby='btnGroupDrop1')
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
.m-b-30
|
||||
.btn-group
|
||||
button.btn.btn-primary
|
||||
i.fa.fa-bold
|
||||
button.btn.btn-secondary
|
||||
i.fa.fa.fa-italic
|
||||
button.btn.btn-success
|
||||
i.fa.fa-file-image-o
|
||||
button.btn.btn-info
|
||||
i.fa.fa-paperclip
|
||||
.m-b-30
|
||||
.btn-group
|
||||
button.btn.btn-primary.btn-lg
|
||||
i.fa.fa-bold
|
||||
button.btn.btn-secondary.btn-lg
|
||||
i.fa.fa.fa-italic
|
||||
button.btn.btn-success.btn-lg
|
||||
i.fa.fa-file-image-o
|
||||
button.btn.btn-info.btn-lg
|
||||
i.fa.fa-paperclip
|
||||
.col-lg-6
|
||||
.card.height-equal
|
||||
.card-header
|
||||
h5 Vertical
|
||||
span Make vertical buttons
|
||||
.card-body.btn-group-wrapper
|
||||
.btn-group-vertical(role='group', aria-label='Vertical button group')
|
||||
button.btn.btn-primary(type='button') Button
|
||||
button.btn.btn-secondary(type='button') Button
|
||||
.btn-group(role='group')
|
||||
button#btnGroupVerticalDrop1.btn.btn-success.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Dropdown
|
||||
.dropdown-menu(aria-labelledby='btnGroupVerticalDrop1')
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
button.btn.btn-info(type='button') Button
|
||||
button.btn.btn-warning(type='button') Button
|
||||
.btn-group(role='group')
|
||||
button#btnGroupVerticalDrop2.btn.btn-danger.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Dropdown
|
||||
.dropdown-menu(aria-labelledby='btnGroupVerticalDrop2')
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
.btn-group(role='group')
|
||||
button#btnGroupVerticalDrop3.btn.btn-light.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Dropdown
|
||||
.dropdown-menu(aria-labelledby='btnGroupVerticalDrop3')
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
a.dropdown-item(href='#') Dropdown link
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
639
public/assets/pug/pages/template/buttons-edge.pug
Normal file
639
public/assets/pug/pages/template/buttons-edge.pug
Normal file
@@ -0,0 +1,639 @@
|
||||
- var prism = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var sidebar = true;
|
||||
- var scrollbar = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Edge Buttons
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Buttons
|
||||
li.breadcrumb-item.active Edge Style
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Default buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-pill
|
||||
| class for edge button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-primary(type='button') Primary Button
|
||||
button.btn.btn-pill.btn-secondary(type='button') Secondary Button
|
||||
button.btn.btn-pill.btn-success(type='button') Success Button
|
||||
button.btn.btn-pill.btn-info(type='button') Info Button
|
||||
button.btn.btn-pill.btn-warning(type='button') Warning Button
|
||||
button.btn.btn-pill.btn-danger(type='button') Danger Button
|
||||
button.btn.btn-pill.btn-light(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-primary">primary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-secondary">secondary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-success">Success button</button>
|
||||
| <button type="button" class="btn btn-pill btn-info">Info button</button>
|
||||
| <button type="button" class="btn btn-pill btn-warning">warning button</button>
|
||||
| <button type="button" class="btn btn-pill btn-danger">danger button</button>
|
||||
| <button type="button" class="btn btn-pill btn-light">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Large buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-pill
|
||||
| and
|
||||
code .btn-lg
|
||||
| class for large button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-primary.btn-lg(type='button') Primary Button
|
||||
button.btn.btn-pill.btn-secondary.btn-lg(type='button') Secondary Button
|
||||
button.btn.btn-pill.btn-success.btn-lg(type='button') Success Button
|
||||
button.btn.btn-pill.btn-info.btn-lg(type='button') Info Button
|
||||
button.btn.btn-pill.btn-warning.btn-lg(type='button') Warning Button
|
||||
button.btn.btn-pill.btn-danger.btn-lg(type='button') Danger Button
|
||||
button.btn.btn-pill.btn-light.btn-lg(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-primary btn-lg">primary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-secondary btn-lg">secondary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-success btn-lg">Success button</button>
|
||||
| <button type="button" class="btn btn-pill btn-info btn-lg">Info button</button>
|
||||
| <button type="button" class="btn btn-pill btn-warning btn-lg">warning button</button>
|
||||
| <button type="button" class="btn btn-pill btn-danger btn-lg">danger button</button>
|
||||
| <button type="button" class="btn btn-pill btn-light btn-lg">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-pill
|
||||
| and
|
||||
code .btn-sm
|
||||
| class for small button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-primary.btn-sm(type='button') Primary Button
|
||||
button.btn.btn-pill.btn-secondary.btn-sm(type='button') Secondary Button
|
||||
button.btn.btn-pill.btn-success.btn-sm(type='button') Success Button
|
||||
button.btn.btn-pill.btn-info.btn-sm(type='button') Info Button
|
||||
button.btn.btn-pill.btn-warning.btn-sm(type='button') Warning Button
|
||||
button.btn.btn-pill.btn-danger.btn-sm(type='button') Danger Button
|
||||
button.btn.btn-pill.btn-light.btn-sm(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-primary btn-sm">primary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-secondary btn-sm">secondary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-success btn-sm">Success button</button>
|
||||
| <button type="button" class="btn btn-pill btn-info btn-sm">Info button</button>
|
||||
| <button type="button" class="btn btn-pill btn-warning btn-sm">warning button</button>
|
||||
| <button type="button" class="btn btn-pill btn-danger btn-sm">danger button</button>
|
||||
| <button type="button" class="btn btn-pill btn-light btn-sm">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Active Buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .active
|
||||
| for active state
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-primary.active(type='button') Active
|
||||
button.btn.btn-pill.btn-secondary.active(type='button') Active
|
||||
button.btn.btn-pill.btn-success.active(type='button') Active
|
||||
button.btn.btn-pill.btn-info.active(type='button') Active
|
||||
button.btn.btn-pill.btn-warning.active(type='button') Active
|
||||
button.btn.btn-pill.btn-danger.active(type='button') Active
|
||||
button.btn.btn-pill.btn-light.active.txt-dark(type='button') Active
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head3
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-primary active">Active</button>
|
||||
| <button type="button" class="btn btn-pill btn-secondary active">Active</button>
|
||||
| <button type="button" class="btn btn-pill btn-success active">Active</button>
|
||||
| <button type="button" class="btn btn-pill btn-info active">Active</button>
|
||||
| <button type="button" class="btn btn-pill btn-warning active">Active</button>
|
||||
| <button type="button" class="btn btn-pill btn-danger active">Active</button>
|
||||
| <button type="button" class="btn btn-pill btn-light active txt-dark">Active</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Disabled buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .disabled
|
||||
| class or
|
||||
code disabled="disabled"
|
||||
| attribute for disabled button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-primary.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-secondary.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-success.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-info.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-warning.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-danger.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-light.disabled(type='button') Disabled
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head4
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-primary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-secondary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-success disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-info disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-warning disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-danger disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-light disabled">Disabled</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Custom state buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| The
|
||||
code .btn
|
||||
| class used with
|
||||
code <button>
|
||||
| ,
|
||||
code <a>
|
||||
| and
|
||||
code <input>
|
||||
| elements.
|
||||
.card-body.btn-showcase
|
||||
a.btn.btn-pill.btn-primary(href='javascript:void(0)', data-bs-toggle='tooltip', title='btn btn-primary', role='button') Link
|
||||
input.btn.btn-pill.btn-secondary(type='button', value='Input', data-bs-toggle='tooltip', title='btn btn-secondary')
|
||||
input.btn.btn-pill.btn-success(type='submit', value='Submit', data-bs-toggle='tooltip', title='btn btn-success')
|
||||
button.btn.btn-pill.btn-info(type='submit') Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head5', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head5
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <a class="btn btn-pill btn-primary" href="#" data-bs-toggle="tooltip;" title="btn btn-primary" role="button">link</button>
|
||||
| <input class="btn btn-pill btn-primary" type="button" value="Input" data-bs-toggle="tooltip;" title="btn btn-secondary">
|
||||
| <input class="btn btn-pill btn-success" type="submit" value="Submit" data-bs-toggle="tooltip" title="btn btn-success">
|
||||
| <button class="btn btn-pill btn-info" type="submit">Button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 outline buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-pill
|
||||
| and
|
||||
code .btn-outline-*
|
||||
| class for button with outline
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-outline-primary(type='button') Primary Button
|
||||
button.btn.btn-pill.btn-outline-secondary(type='button') Secondary Button
|
||||
button.btn.btn-pill.btn-outline-success(type='button') Success Button
|
||||
button.btn.btn-pill.btn-outline-info(type='button') Info Button
|
||||
button.btn.btn-pill.btn-outline-warning(type='button') Warning Button
|
||||
button.btn.btn-pill.btn-outline-danger(type='button') Danger Button
|
||||
button.btn.btn-pill.btn-outline-light.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head6', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head6
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-outline-primary">primary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-secondary">secondary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-success">Success button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-info">Info button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-warning">warning button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-danger">danger button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-light txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 bold Border outline buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-pill
|
||||
| and
|
||||
code .btn-outline-*-2x
|
||||
| class for button with bold outline
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-outline-primary-2x(type='button') Primary Button
|
||||
button.btn.btn-pill.btn-outline-secondary-2x(type='button') Secondary Button
|
||||
button.btn.btn-pill.btn-outline-success-2x(type='button') Success Button
|
||||
button.btn.btn-pill.btn-outline-info-2x(type='button') Info Button
|
||||
button.btn.btn-pill.btn-outline-warning-2x(type='button') Warning Button
|
||||
button.btn.btn-pill.btn-outline-danger-2x(type='button') Danger Button
|
||||
button.btn.btn-pill.btn-outline-light-2x.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head7', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head7
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-outline-primary-2x">primary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-secondary-2x">secondary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-success-2x">Success button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-info-2x">Info button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-warning-2x">warning button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-danger-2x">danger button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-light-2x txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 outline Large buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-pill
|
||||
| ,
|
||||
code .btn-outline-*
|
||||
| and
|
||||
code .btn-lg
|
||||
| class for large button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-outline-primary.btn-lg(type='button') Primary Button
|
||||
button.btn.btn-pill.btn-outline-secondary.btn-lg(type='button') Secondary Button
|
||||
button.btn.btn-pill.btn-outline-success.btn-lg(type='button') Success Button
|
||||
button.btn.btn-pill.btn-outline-info.btn-lg(type='button') Info Button
|
||||
button.btn.btn-pill.btn-outline-warning.btn-lg(type='button') Warning Button
|
||||
button.btn.btn-pill.btn-outline-danger.btn-lg(type='button') Danger Button
|
||||
button.btn.btn-pill.btn-outline-light.btn-lg.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head8', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head8
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-outline-primary btn-lg">primary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-secondary btn-lg">secondary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-success btn-lg">Success button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-info btn-lg">Info button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-warning btn-lg">warning button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-danger btn-lg">danger button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-light btn-lg txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 outline small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-pill
|
||||
| ,
|
||||
code .btn-outline-*
|
||||
| and
|
||||
code .btn-sm
|
||||
| class for small button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-outline-primary.btn-sm(type='button') Primary Button
|
||||
button.btn.btn-pill.btn-outline-secondary.btn-sm(type='button') Secondary Button
|
||||
button.btn.btn-pill.btn-outline-success.btn-sm(type='button') Success Button
|
||||
button.btn.btn-pill.btn-outline-info.btn-sm(type='button') Info Button
|
||||
button.btn.btn-pill.btn-outline-warning.btn-sm(type='button') Warning Button
|
||||
button.btn.btn-pill.btn-outline-danger.btn-sm(type='button') Danger Button
|
||||
button.btn.btn-pill.btn-outline-light.btn-sm.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head9', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head9
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-outline-primary btn-sm">primary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-secondary btn-sm">secondary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-success btn-sm">Success button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-info btn-sm">Info button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-warning btn-sm">warning button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-danger btn-sm">danger button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-light btn-sm txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Outline extra small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-pill
|
||||
| ,
|
||||
code .btn-outline-*
|
||||
| and
|
||||
code .btn-xs
|
||||
| class for extra small button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-outline-primary.btn-xs(type='button') Primary Button
|
||||
button.btn.btn-pill.btn-outline-secondary.btn-xs(type='button') Secondary Button
|
||||
button.btn.btn-pill.btn-outline-success.btn-xs(type='button') Success Button
|
||||
button.btn.btn-pill.btn-outline-info.btn-xs(type='button') Info Button
|
||||
button.btn.btn-pill.btn-outline-warning.btn-xs(type='button') Warning Button
|
||||
button.btn.btn-pill.btn-outline-danger.btn-xs(type='button') Danger Button
|
||||
button.btn.btn-pill.btn-outline-light.btn-xs.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head10', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head10
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-outline-primary btn-xs">primary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-secondary btn-xs">secondary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-success btn-xs">Success button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-info btn-xs">Info button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-warning btn-xs">warning button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-danger btn-xs">danger button</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-light btn-xs txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Disabled outline buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .disabled
|
||||
| class or
|
||||
code disabled="disabled"
|
||||
| attribute for disabled button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-outline-primary.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-outline-secondary.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-outline-success.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-outline-info.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-outline-warning.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-outline-danger.disabled(type='button') Disabled
|
||||
button.btn.btn-pill.btn-outline-light.disabled.txt-dark(type='button') Disabled
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head11', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head11
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-outline-primary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-secondary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-success disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-info disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-warning disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-danger disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-pill btn-outline-light disabled txt-dark">Disabled</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Gradien buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-pill
|
||||
| and
|
||||
code .btn-*-gradien
|
||||
| class for gradien button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-pill.btn-primary-gradien(type='button') Primary Button
|
||||
button.btn.btn-pill.btn-secondary-gradien(type='button') Secondary Button
|
||||
button.btn.btn-pill.btn-success-gradien(type='button') Success Button
|
||||
button.btn.btn-pill.btn-info-gradien(type='button') Info Button
|
||||
button.btn.btn-pill.btn-warning-gradien(type='button') Warning Button
|
||||
button.btn.btn-pill.btn-danger-gradien(type='button') Danger Button
|
||||
button.btn.btn-pill.btn-light-gradien.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head12', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head12
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-pill btn-primary-gradien">primary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-secondary-gradien">secondary button</button>
|
||||
| <button type="button" class="btn btn-pill btn-success-gradien">Success button</button>
|
||||
| <button type="button" class="btn btn-pill btn-info-gradien">Info button</button>
|
||||
| <button type="button" class="btn btn-pill btn-warning-gradien">warning button</button>
|
||||
| <button type="button" class="btn btn-pill btn-danger-gradien">danger button</button>
|
||||
| <button type="button" class="btn btn-pill btn-light-gradien.txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
683
public/assets/pug/pages/template/buttons-flat.pug
Normal file
683
public/assets/pug/pages/template/buttons-flat.pug
Normal file
@@ -0,0 +1,683 @@
|
||||
- var prism = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Flat Buttons
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Buttons
|
||||
li.breadcrumb-item.active Flat Style
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Default buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| class for flat button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-primary(type='button') Primary Button
|
||||
button.btn.btn-square.btn-secondary(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-success(type='button') Success Button
|
||||
button.btn.btn-square.btn-info(type='button') Info Button
|
||||
button.btn.btn-square.btn-warning(type='button') Warning Button
|
||||
button.btn.btn-square.btn-danger(type='button') Danger Button
|
||||
button.btn.btn-square.btn-light(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-primary">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-secondary">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-success">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-info">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-warning">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-danger">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-light">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Large buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| and
|
||||
code .btn-lg
|
||||
| class for large button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-primary.btn-lg(type='button') Primary Button
|
||||
button.btn.btn-square.btn-secondary.btn-lg(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-success.btn-lg(type='button') Success Button
|
||||
button.btn.btn-square.btn-info.btn-lg(type='button') Info Button
|
||||
button.btn.btn-square.btn-warning.btn-lg(type='button') Warning Button
|
||||
button.btn.btn-square.btn-danger.btn-lg(type='button') Danger Button
|
||||
button.btn.btn-square.btn-light.btn-lg(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-primary btn-lg">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-secondary btn-lg">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-success btn-lg">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-info btn-lg">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-warning btn-lg">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-danger btn-lg">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-light btn-lg">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| and
|
||||
code .btn-sm
|
||||
| class for small button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-primary.btn-sm(type='button') Primary Button
|
||||
button.btn.btn-square.btn-secondary.btn-sm(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-success.btn-sm(type='button') Success Button
|
||||
button.btn.btn-square.btn-info.btn-sm(type='button') Info Button
|
||||
button.btn.btn-square.btn-warning.btn-sm(type='button') Warning Button
|
||||
button.btn.btn-square.btn-danger.btn-sm(type='button') Danger Button
|
||||
button.btn.btn-square.btn-light.btn-sm(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-primary btn-sm">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-secondary btn-sm">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-success btn-sm">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-info btn-sm">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-warning btn-sm">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-danger btn-sm">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-light btn-sm">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Extra Small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| and
|
||||
code .btn-xs
|
||||
| class for extra small button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-primary.btn-xs(type='button') Primary Button
|
||||
button.btn.btn-square.btn-secondary.btn-xs(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-success.btn-xs(type='button') Success Button
|
||||
button.btn.btn-square.btn-info.btn-xs(type='button') Info Button
|
||||
button.btn.btn-square.btn-warning.btn-xs(type='button') Warning Button
|
||||
button.btn.btn-square.btn-danger.btn-xs(type='button') Danger Button
|
||||
button.btn.btn-square.btn-light.btn-xs(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head3
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-primary btn-xs">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-secondary btn-xs">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-success btn-xs">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-info btn-xs">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-warning btn-xs">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-danger btn-xs">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-light btn-xs">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Active Buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .active
|
||||
| for active state
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-primary.active(type='button') Active
|
||||
button.btn.btn-square.btn-secondary.active(type='button') Active
|
||||
button.btn.btn-square.btn-success.active(type='button') Active
|
||||
button.btn.btn-square.btn-info.active(type='button') Active
|
||||
button.btn.btn-square.btn-warning.active(type='button') Active
|
||||
button.btn.btn-square.btn-danger.active(type='button') Active
|
||||
button.btn.btn-square.btn-light.active.txt-dark(type='button') Active
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head4
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-primary active">Active</button>
|
||||
| <button type="button" class="btn btn-square btn-secondary active">Active</button>
|
||||
| <button type="button" class="btn btn-square btn-success active">Active</button>
|
||||
| <button type="button" class="btn btn-square btn-info active">Active</button>
|
||||
| <button type="button" class="btn btn-square btn-warning active">Active</button>
|
||||
| <button type="button" class="btn btn-square btn-danger active">Active</button>
|
||||
| <button type="button" class="btn btn-square btn-light active txt-dark">Active</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Disabled buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .disabled
|
||||
| class or
|
||||
code disabled="disabled"
|
||||
| attribute for disabled button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-primary.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-secondary.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-success.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-info.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-warning.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-danger.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-light.disabled(type='button') Disabled
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head5', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head5
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-primary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-secondary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-success disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-info disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-warning disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-danger disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-light disabled txt-dark">Disabled</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Custom state buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| The
|
||||
code .btn
|
||||
| class used with
|
||||
code <button>
|
||||
| ,
|
||||
code <a>
|
||||
| and
|
||||
code <input>
|
||||
| elements.
|
||||
.card-body.btn-showcase
|
||||
a.btn.btn-square.btn-primary(href='javascript:void(0)', data-bs-toggle='tooltip', title='btn btn-primary', role='button') Link
|
||||
input.btn.btn-square.btn-secondary(type='button', value='Input', data-bs-toggle='tooltip', title='btn btn-secondary')
|
||||
input.btn.btn-square.btn-success(type='submit', value='Submit', data-bs-toggle='tooltip', title='btn btn-success')
|
||||
button.btn.btn-square.btn-info(type='submit') Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head6', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head6
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <a class="btn btn-square btn-primary" href="#" data-bs-toggle="tooltip;" title="btn btn-primary" role="button">link</button>
|
||||
| <input class="btn btn-square btn-primary" type="button" value="Input" data-bs-toggle="tooltip;" title="btn btn-secondary">
|
||||
| <input class="btn btn-square btn-success" type="submit" value="Submit" data-bs-toggle="tooltip" title="btn btn-success">
|
||||
| <button class="btn btn-square btn-info" type="submit">Button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 outline buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| and
|
||||
code .btn-outline-*
|
||||
| class for button with outline
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-outline-primary(type='button') Primary Button
|
||||
button.btn.btn-square.btn-outline-secondary(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-outline-success(type='button') Success Button
|
||||
button.btn.btn-square.btn-outline-info(type='button') Info Button
|
||||
button.btn.btn-square.btn-outline-warning(type='button') Warning Button
|
||||
button.btn.btn-square.btn-outline-danger(type='button') Danger Button
|
||||
button.btn.btn-square.btn-outline-light.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head7', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head7
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-outline-primary">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-secondary">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-success">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-info">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-warning">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-danger">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-light txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 bold Border outline buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| and
|
||||
code .btn-outline-*-2x
|
||||
| class for button with bold outline
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-outline-primary-2x(type='button') Primary Button
|
||||
button.btn.btn-square.btn-outline-secondary-2x(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-outline-success-2x(type='button') Success Button
|
||||
button.btn.btn-square.btn-outline-info-2x(type='button') Info Button
|
||||
button.btn.btn-square.btn-outline-warning-2x(type='button') Warning Button
|
||||
button.btn.btn-square.btn-outline-danger-2x(type='button') Danger Button
|
||||
button.btn.btn-square.btn-outline-light-2x.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head8', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head8
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-outline-primary-2x">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-secondary-2x">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-success-2x">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-info-2x">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-warning-2x">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-danger-2x">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-light-2x txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 outline Large buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| ,
|
||||
code .btn-outline-*
|
||||
| and
|
||||
code .btn-lg
|
||||
| class for large button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-outline-primary.btn-lg(type='button') Primary Button
|
||||
button.btn.btn-square.btn-outline-secondary.btn-lg(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-outline-success.btn-lg(type='button') Success Button
|
||||
button.btn.btn-square.btn-outline-info.btn-lg(type='button') Info Button
|
||||
button.btn.btn-square.btn-outline-warning.btn-lg(type='button') Warning Button
|
||||
button.btn.btn-square.btn-outline-danger.btn-lg(type='button') Danger Button
|
||||
button.btn.btn-square.btn-outline-light.btn-lg.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head9', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head9
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-outline-primary btn-lg">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-secondary btn-lg">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-success btn-lg">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-info btn-lg">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-warning btn-lg">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-danger btn-lg">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-light btn-lg txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 outline small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| ,
|
||||
code .btn-outline-*
|
||||
| and
|
||||
code .btn-sm
|
||||
| class for small button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-outline-primary.btn-sm(type='button') Primary Button
|
||||
button.btn.btn-square.btn-outline-secondary.btn-sm(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-outline-success.btn-sm(type='button') Success Button
|
||||
button.btn.btn-square.btn-outline-info.btn-sm(type='button') Info Button
|
||||
button.btn.btn-square.btn-outline-warning.btn-sm(type='button') Warning Button
|
||||
button.btn.btn-square.btn-outline-danger.btn-sm(type='button') Danger Button
|
||||
button.btn.btn-square.btn-outline-light.btn-sm.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head10', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head10
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-outline-primary btn-sm">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-secondary btn-sm">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-success btn-sm">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-info btn-sm">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-warning btn-sm">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-danger btn-sm">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-light btn-sm txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 outline Extra small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| ,
|
||||
code .btn-outline-*
|
||||
| and
|
||||
code .btn-xs
|
||||
| class for extra small button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-outline-primary.btn-xs(type='button') Primary Button
|
||||
button.btn.btn-square.btn-outline-secondary.btn-xs(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-outline-success.btn-xs(type='button') Success Button
|
||||
button.btn.btn-square.btn-outline-info.btn-xs(type='button') Info Button
|
||||
button.btn.btn-square.btn-outline-warning.btn-xs(type='button') Warning Button
|
||||
button.btn.btn-square.btn-outline-danger.btn-xs(type='button') Danger Button
|
||||
button.btn.btn-square.btn-outline-light.btn-xs.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head11', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head11
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-outline-primary btn-xs">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-secondary btn-xs">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-success btn-xs">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-info btn-xs">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-warning btn-xs">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-danger btn-xs">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-light btn-xs txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Disabled outline buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .disabled
|
||||
| class or
|
||||
code disabled="disabled"
|
||||
| attribute for disabled button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-outline-primary.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-outline-secondary.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-outline-success.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-outline-info.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-outline-warning.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-outline-danger.disabled(type='button') Disabled
|
||||
button.btn.btn-square.btn-outline-light.disabled.txt-dark(type='button') Disabled
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head12', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head12
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-outline-primary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-secondary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-success disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-info disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-warning disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-danger disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-square btn-outline-light disabled txt-dark">Disabled</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Gradien buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-square
|
||||
| and
|
||||
code .btn-*-gradien
|
||||
| class for gradien button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-square.btn-primary-gradien(type='button') Primary Button
|
||||
button.btn.btn-square.btn-secondary-gradien(type='button') Secondary Button
|
||||
button.btn.btn-square.btn-success-gradien(type='button') Success Button
|
||||
button.btn.btn-square.btn-info-gradien(type='button') Info Button
|
||||
button.btn.btn-square.btn-warning-gradien(type='button') Warning Button
|
||||
button.btn.btn-square.btn-danger-gradien(type='button') Danger Button
|
||||
button.btn.btn-square.btn-light-gradien.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head13', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head13
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-square btn-primary-gradien">primary button</button>
|
||||
| <button type="button" class="btn btn-square btn-secondary-gradien">secondary button</button>
|
||||
| <button type="button" class="btn btn-square btn-success-gradien">Success Button</button>
|
||||
| <button type="button" class="btn btn-square btn-info-gradien">Info button</button>
|
||||
| <button type="button" class="btn btn-square btn-warning-gradien">warning button</button>
|
||||
| <button type="button" class="btn btn-square btn-danger-gradien">danger button</button>
|
||||
| <button type="button" class="btn btn-square btn-light-gradien">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
667
public/assets/pug/pages/template/buttons.pug
Normal file
667
public/assets/pug/pages/template/buttons.pug
Normal file
@@ -0,0 +1,667 @@
|
||||
- var prism = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var theme_customizer = true;
|
||||
//- - var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Default Style
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Buttons
|
||||
li.breadcrumb-item.active Default Style
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
#default.card
|
||||
.card-header.pb-0
|
||||
h5 Default buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span Bootstrap state buttons
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-primary(type='button') Primary Button
|
||||
button.btn.btn-secondary(type='button') Secondary Button
|
||||
button.btn.btn-success(type='button') Success Button
|
||||
button.btn.btn-info(type='button') Info Button
|
||||
button.btn.btn-warning(type='button') Warning Button
|
||||
button.btn.btn-danger(type='button') Danger Button
|
||||
button.btn.btn-light(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-primary">primary button</button>
|
||||
| <button type="button" class="btn btn-secondary">secondary button</button>
|
||||
| <button type="button" class="btn btn-success">Success button</button>
|
||||
| <button type="button" class="btn btn-info">Info button</button>
|
||||
| <button type="button" class="btn btn-warning">warning button</button>
|
||||
| <button type="button" class="btn btn-danger">danger button</button>
|
||||
| <button type="button" class="btn btn-light">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#large-btn.card
|
||||
.card-header.pb-0
|
||||
h5 Large buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-lg
|
||||
| class for large size buttons
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-primary.btn-lg(type='button') Primary Button
|
||||
button.btn.btn-secondary.btn-lg(type='button') Secondary Button
|
||||
button.btn.btn-success.btn-lg(type='button') Success Button
|
||||
button.btn.btn-info.btn-lg(type='button') Info Button
|
||||
button.btn.btn-warning.btn-lg(type='button') Warning Button
|
||||
button.btn.btn-danger.btn-lg(type='button') Danger Button
|
||||
button.btn.btn-light.btn-lg(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-primary btn-lg">primary button</button>
|
||||
| <button type="button" class="btn btn-secondary btn-lg">secondary button</button>
|
||||
| <button type="button" class="btn btn-success btn-lg">Success button</button>
|
||||
| <button type="button" class="btn btn-info btn-lg">Info button</button>
|
||||
| <button type="button" class="btn btn-warning btn-lg">warning button</button>
|
||||
| <button type="button" class="btn btn-danger btn-lg">danger button</button>
|
||||
| <button type="button" class="btn btn-light btn-lg">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#small-btn.card
|
||||
.card-header.pb-0
|
||||
h5 Small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-sm
|
||||
| class for small size buttons
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-primary.btn-sm(type='button') Primary Button
|
||||
button.btn.btn-secondary.btn-sm(type='button') Secondary Button
|
||||
button.btn.btn-success.btn-sm(type='button') Success Button
|
||||
button.btn.btn-info.btn-sm(type='button') Info Button
|
||||
button.btn.btn-warning.btn-sm(type='button') Warning Button
|
||||
button.btn.btn-danger.btn-sm(type='button') Danger Button
|
||||
button.btn.btn-light.btn-sm(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-primary btn-sm">primary button</button>
|
||||
| <button type="button" class="btn btn-secondary btn-sm">secondary button</button>
|
||||
| <button type="button" class="btn btn-success btn-sm">Success button</button>
|
||||
| <button type="button" class="btn btn-info btn-sm">Info button</button>
|
||||
| <button type="button" class="btn btn-warning btn-sm">warning button</button>
|
||||
| <button type="button" class="btn btn-danger btn-sm">danger button</button>
|
||||
| <button type="button" class="btn btn-light btn-sm">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#ex-small-btn.card
|
||||
.card-header.pb-0
|
||||
h5 Extra Small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-xs
|
||||
| class for extra small size buttons
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-primary.btn-xs(type='button') Primary Button
|
||||
button.btn.btn-secondary.btn-xs(type='button') Secondary Button
|
||||
button.btn.btn-success.btn-xs(type='button') Success Button
|
||||
button.btn.btn-info.btn-xs(type='button') Info Button
|
||||
button.btn.btn-warning.btn-xs(type='button') Warning Button
|
||||
button.btn.btn-danger.btn-xs(type='button') Danger Button
|
||||
button.btn.btn-light.btn-xs(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head3
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-primary btn-xs">primary button</button>
|
||||
| <button type="button" class="btn btn-secondary btn-xs">secondary button</button>
|
||||
| <button type="button" class="btn btn-success btn-xs">Success button</button>
|
||||
| <button type="button" class="btn btn-info btn-xs">Info button</button>
|
||||
| <button type="button" class="btn btn-warning btn-xs">warning button</button>
|
||||
| <button type="button" class="btn btn-danger btn-xs">danger button</button>
|
||||
| <button type="button" class="btn btn-light btn-xs">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#active-btn.card
|
||||
.card-header.pb-0
|
||||
h5 Active Buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .active
|
||||
| class for active state
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-primary.active(type='button') Active
|
||||
button.btn.btn-secondary.active(type='button') Active
|
||||
button.btn.btn-success.active(type='button') Active
|
||||
button.btn.btn-info.active(type='button') Active
|
||||
button.btn.btn-warning.active(type='button') Active
|
||||
button.btn.btn-danger.active(type='button') Active
|
||||
button.btn.btn-light.active.txt-dark(type='button') Active
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head4
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-primary active">Active</button>
|
||||
| <button type="button" class="btn btn-secondary active">Active</button>
|
||||
| <button type="button" class="btn btn-success active">Active</button>
|
||||
| <button type="button" class="btn btn-info active">Active</button>
|
||||
| <button type="button" class="btn btn-warning active">Active</button>
|
||||
| <button type="button" class="btn btn-danger active">Active</button>
|
||||
| <button type="button" class="btn btn-light active">Active</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#disabled-btn.card
|
||||
.card-header.pb-0
|
||||
h5 Disabled buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .disabled
|
||||
| class or
|
||||
code disabled="disabled"
|
||||
| attribute for disabled button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-primary.disabled(type='button') Disabled
|
||||
button.btn.btn-secondary.disabled(type='button') Disabled
|
||||
button.btn.btn-success.disabled(type='button') Disabled
|
||||
button.btn.btn-info.disabled(type='button') Disabled
|
||||
button.btn.btn-warning.disabled(type='button') Disabled
|
||||
button.btn.btn-danger.disabled(type='button') Disabled
|
||||
button.btn.btn-light.disabled(type='button') Disabled
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head5', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head5
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-primary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-secondary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-success disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-info disabled">Info button</button>
|
||||
| <button type="button" class="btn btn-warning disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-danger disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-light disabled">Disabled</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#custom-state-button.card
|
||||
.card-header.pb-0
|
||||
h5 Custom state buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| The
|
||||
code .btn
|
||||
| class used with
|
||||
code <button>
|
||||
| ,
|
||||
code <a>
|
||||
| and
|
||||
code <input>
|
||||
| elements.
|
||||
.card-body.btn-showcase
|
||||
a.btn.btn-primary(href='javascript:void(0)', title='btn btn-primary', role='button') Link
|
||||
input.btn.btn-secondary(type='button', value='Input', title='btn btn-secondary')
|
||||
input.btn.btn-success(type='submit', value='Submit', title='btn btn-success')
|
||||
button.btn.btn-info(type='submit') Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head6', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head6
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <a class="btn btn-primary" href="javascript:void(0)" data-bs-toggle="tooltip;" title="btn btn-primary" role="button">link</button>
|
||||
| <input class="btn btn-primary" type="button" value="Input" data-bs-toggle="tooltip;" title="btn btn-secondary">
|
||||
| <input class="btn btn-success" type="submit" value="Submit" data-bs-toggle="tooltip" title="btn btn-success">
|
||||
| <button class="btn btn-info" type="submit">Button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#outline-button.card
|
||||
.card-header.pb-0
|
||||
h5 outline buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-outline-*
|
||||
| class for border button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-outline-primary(type='button') Primary Button
|
||||
button.btn.btn-outline-secondary(type='button') Secondary Button
|
||||
button.btn.btn-outline-success(type='button') Success Button
|
||||
button.btn.btn-outline-info(type='button') Info Button
|
||||
button.btn.btn-outline-warning(type='button') Warning Button
|
||||
button.btn.btn-outline-danger(type='button') Danger Button
|
||||
button.btn.btn-outline-light.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head7', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head7
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-outline-primary">primary button</button>
|
||||
| <button type="button" class="btn btn-outline-secondary">secondary button</button>
|
||||
| <button type="button" class="btn btn-outline-success">Success button</button>
|
||||
| <button type="button" class="btn btn-outline-info">Info button</button>
|
||||
| <button type="button" class="btn btn-outline-warning">warning button</button>
|
||||
| <button type="button" class="btn btn-outline-danger">danger button</button>
|
||||
| <button type="button" class="btn btn-outline-light txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#outline-bold-button.card
|
||||
.card-header.pb-0
|
||||
h5 bold Border outline buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-outline-*-2x
|
||||
| class for bold outline
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-outline-primary-2x(type='button') Primary Button
|
||||
button.btn.btn-outline-secondary-2x(type='button') Secondary Button
|
||||
button.btn.btn-outline-success-2x(type='button') Success Button
|
||||
button.btn.btn-outline-info-2x(type='button') Info Button
|
||||
button.btn.btn-outline-warning-2x(type='button') Warning Button
|
||||
button.btn.btn-outline-danger-2x(type='button') Danger Button
|
||||
button.btn.btn-outline-light-2x.txt-dark(type='button') Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head8', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head8
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-outline-primary-2x">primary button</button>
|
||||
| <button type="button" class="btn btn-outline-secondary-2x">secondary button</button>
|
||||
| <button type="button" class="btn btn-outline-success-2x">Success button</button>
|
||||
| <button type="button" class="btn btn-outline-info-2x">Info button</button>
|
||||
| <button type="button" class="btn btn-outline-warning-2x">warning button</button>
|
||||
| <button type="button" class="btn btn-outline-danger-2x">danger button</button>
|
||||
| <button type="button" class="btn btn-outline-light-2x txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#outline-large-button.card
|
||||
.card-header.pb-0
|
||||
h5 outline Large buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-outline-*
|
||||
| class for outline and
|
||||
code .btn-lg
|
||||
| class for large button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-outline-primary.btn-lg(type='button') Primary Button
|
||||
button.btn.btn-outline-secondary.btn-lg(type='button')
|
||||
| Secondary Button
|
||||
button.btn.btn-outline-success.btn-lg(type='button') Success Button
|
||||
button.btn.btn-outline-info.btn-lg(type='button') Info Button
|
||||
button.btn.btn-outline-warning.btn-lg(type='button') Warning Button
|
||||
button.btn.btn-outline-danger.btn-lg(type='button') Danger Button
|
||||
button.btn.btn-outline-light.btn-lg.txt-dark(type='button')
|
||||
| Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head9', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head9
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-outline-primary btn-lg">primary button</button>
|
||||
| <button type="button" class="btn btn-outline-secondary btn-lg">secondary button</button>
|
||||
| <button type="button" class="btn btn-outline-success btn-lg">Success button</button>
|
||||
| <button type="button" class="btn btn-outline-info btn-lg">Info button</button>
|
||||
| <button type="button" class="btn btn-outline-warning btn-lg">warning button</button>
|
||||
| <button type="button" class="btn btn-outline-danger btn-lg">danger button</button>
|
||||
| <button type="button" class="btn btn-outline-light btn-lg txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#outline-small-button.card
|
||||
.card-header.pb-0
|
||||
h5 outline small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-outline-*
|
||||
| class for outline and
|
||||
code .btn-sm
|
||||
| class for small button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-outline-primary.btn-sm(type='button') Primary Button
|
||||
button.btn.btn-outline-secondary.btn-sm(type='button')
|
||||
| Secondary Button
|
||||
button.btn.btn-outline-success.btn-sm(type='button') Success Button
|
||||
button.btn.btn-outline-info.btn-sm(type='button') Info Button
|
||||
button.btn.btn-outline-warning.btn-sm(type='button') Warning Button
|
||||
button.btn.btn-outline-danger.btn-sm(type='button') Danger Button
|
||||
button.btn.btn-outline-light.btn-sm.txt-dark(type='button')
|
||||
| Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head10', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head10
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-outline-primary btn-sm">primary button</button>
|
||||
| <button type="button" class="btn btn-outline-secondary btn-sm">secondary button</button>
|
||||
| <button type="button" class="btn btn-outline-success btn-sm">Success button</button>
|
||||
| <button type="button" class="btn btn-outline-info btn-sm">Info button</button>
|
||||
| <button type="button" class="btn btn-outline-warning btn-sm">warning button</button>
|
||||
| <button type="button" class="btn btn-outline-danger btn-sm">danger button</button>
|
||||
| <button type="button" class="btn btn-outline-light btn-sm txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#ex-outline-small-button.card
|
||||
.card-header.pb-0
|
||||
h5 Outline extra small buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-outline-*
|
||||
| class for outline and
|
||||
code .btn-xs
|
||||
| class for extra small button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-outline-primary.btn-xs(type='button') Primary Button
|
||||
button.btn.btn-outline-secondary.btn-xs(type='button')
|
||||
| Secondary Button
|
||||
button.btn.btn-outline-success.btn-xs(type='button') Success Button
|
||||
button.btn.btn-outline-info.btn-xs(type='button') Info Button
|
||||
button.btn.btn-outline-warning.btn-xs(type='button') Warning Button
|
||||
button.btn.btn-outline-danger.btn-xs(type='button') Danger Button
|
||||
button.btn.btn-outline-light.btn-xs.txt-dark(type='button')
|
||||
| Light Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head11', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head11
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-outline-primary btn-xs">primary button</button>
|
||||
| <button type="button" class="btn btn-outline-secondary btn-xs">secondary button</button>
|
||||
| <button type="button" class="btn btn-outline-success btn-xs">Success button</button>
|
||||
| <button type="button" class="btn btn-outline-info btn-xs">Info button</button>
|
||||
| <button type="button" class="btn btn-outline-warning btn-xs">warning button</button>
|
||||
| <button type="button" class="btn btn-outline-danger btn-xs">danger button</button>
|
||||
| <button type="button" class="btn btn-outline-light btn-xs txt-dark">light button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Disabled outline buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .disabled
|
||||
| class or
|
||||
code disabled="disabled"
|
||||
| attribute for disabled state
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-outline-primary.disabled(type='button') Disabled
|
||||
button.btn.btn-outline-secondary.disabled(type='button') Disabled
|
||||
button.btn.btn-outline-success.disabled(type='button') Disabled
|
||||
button.btn.btn-outline-info.disabled(type='button') Disabled
|
||||
button.btn.btn-outline-warning.disabled(type='button') Disabled
|
||||
button.btn.btn-outline-danger.disabled(type='button') Disabled
|
||||
button.btn.btn-outline-light.txt-dark.disabled(type='button')
|
||||
| Disabled
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head12', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head12
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-outline-primary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-outline-secondary disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-outline-success disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-outline-info disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-outline-warning disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-outline-danger disabled">Disabled</button>
|
||||
| <button type="button" class="btn btn-outline-light disabled txt-dark">Disabled</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
#gradiant.card
|
||||
.card-header.pb-0
|
||||
h5 Gradien buttons
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-primary
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-primary
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-primary
|
||||
span
|
||||
| Add
|
||||
code .btn-*-gradien
|
||||
| class for gradien button
|
||||
.card-body.btn-showcase
|
||||
button.btn.btn-primary-gradien(type='button') Primary Button
|
||||
button.btn.btn-secondary-gradien(type='button') Secondary Button
|
||||
button.btn.btn-success-gradien(type='button') Success Button
|
||||
button.btn.btn-info-gradien(type='button') Info Button
|
||||
button.btn.btn-warning-gradien(type='button') Warning Button
|
||||
button.btn.btn-danger-gradien(type='button') Danger Button
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head13', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head13
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <button type="button" class="btn btn-primary-gradien">primary button</button>
|
||||
| <button type="button" class="btn btn-secondary-gradien">secondary button</button>
|
||||
| <button type="button" class="btn btn-success-gradien">Success button</button>
|
||||
| <button type="button" class="btn btn-info-gradien">Info button</button>
|
||||
| <button type="button" class="btn btn-warning-gradien">warning button</button>
|
||||
| <button type="button" class="btn btn-danger-gradien">danger button</button>
|
||||
| <!-- Cod Box Copy end -->
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
62
public/assets/pug/pages/template/calendar-advanced.pug
Normal file
62
public/assets/pug/pages/template/calendar-advanced.pug
Normal file
@@ -0,0 +1,62 @@
|
||||
- var dragable_ui = true;
|
||||
- var theme_customizer = true;
|
||||
- var calendar = true;
|
||||
- var page_calendar = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Calendar Advance
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Calendar
|
||||
li.breadcrumb-item.active Calendar Advance
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.calendar-wrap
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Dragging Event
|
||||
.card-body
|
||||
.basic-calendar
|
||||
.row
|
||||
.col-md-4.col-xl-3
|
||||
#external-events.external-events.text-start
|
||||
.fc-events-container
|
||||
.fc-event(data-color='#4466f2') All Day Event
|
||||
.fc-event(data-color='#1ea6ec') Meeting
|
||||
.fc-event(data-color='#22af47') Long Event
|
||||
.fc-event(data-color='#007bff') Birthday party
|
||||
.fc-event(data-color='#ff9f40') Party
|
||||
.fc-event(data-color='#ff5370') Lunch
|
||||
.fc-event(data-color='#536dfe') Conference Meeting
|
||||
.fc-event(data-color='#fb6d9d') Happy Hour
|
||||
h6.f-12.m-t-20 Drag and drop your event or click in the calendar
|
||||
.checkbox.checkbox-primary
|
||||
input#drop-remove(type='checkbox', checked='')
|
||||
label(for='drop-remove') Remove After Drop
|
||||
.col-md-8.col-xl-9
|
||||
#fc-external-drag
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
107
public/assets/pug/pages/template/calendar-basic.pug
Normal file
107
public/assets/pug/pages/template/calendar-basic.pug
Normal file
@@ -0,0 +1,107 @@
|
||||
- var theme_customizer = true;
|
||||
- var calendar = true;
|
||||
- var calendar_basic = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Calender Basic
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Apps
|
||||
li.breadcrumb-item.active Calender Basic
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid.calendar-basic
|
||||
.row
|
||||
.col-12
|
||||
.card
|
||||
.card-body
|
||||
.row
|
||||
.col-md-12
|
||||
#menu
|
||||
#menu-navi
|
||||
.menu-navi-left
|
||||
button.btn.btn-primary.move-today(type='button' data-action='move-today') Today
|
||||
#renderRange.render-range.menu-navi-center
|
||||
.menu-navi-right
|
||||
button#dropdownMenu-calendarType.btn.btn-primary(type='button' data-bs-toggle='dropdown')
|
||||
i#calendarTypeIcon
|
||||
span#calendarTypeName Dropdown
|
||||
i.fa.fa-angle-down
|
||||
ul.dropdown-menu(role='menu')
|
||||
li(role='presentation')
|
||||
a.dropdown-menu-title(role='menuitem' data-action='toggle-daily')
|
||||
i.fa.fa-bars
|
||||
| Daily
|
||||
li(role='presentation')
|
||||
a.dropdown-menu-title(role='menuitem' data-action='toggle-weekly')
|
||||
i.fa.fa-th-large
|
||||
| Weekly
|
||||
li(role='presentation')
|
||||
a.dropdown-menu-title(role='menuitem' data-action='toggle-monthly')
|
||||
i.fa.fa-th
|
||||
| Month
|
||||
li(role='presentation')
|
||||
a.dropdown-menu-title(role='menuitem' data-action='toggle-weeks2')
|
||||
i.fa.fa-th-large
|
||||
| 2 weeks
|
||||
li(role='presentation')
|
||||
a.dropdown-menu-title(role='menuitem' data-action='toggle-weeks3')
|
||||
i.fa.fa-th-large
|
||||
| 3 weeks
|
||||
li.dropdown-divider(role='presentation')
|
||||
li(role='presentation')
|
||||
a(role='menuitem' data-action='toggle-workweek')
|
||||
input.tui-full-calendar-checkbox-square(type='checkbox' value='toggle-workweek' checked='')
|
||||
span.checkbox-title
|
||||
| Show weekends
|
||||
li(role='presentation')
|
||||
a(role='menuitem' data-action='toggle-start-day-1')
|
||||
input.tui-full-calendar-checkbox-square(type='checkbox' value='toggle-start-day-1')
|
||||
span.checkbox-title
|
||||
| Start Week on Monday
|
||||
li(role='presentation')
|
||||
a(role='menuitem' data-action='toggle-narrow-weekend')
|
||||
input.tui-full-calendar-checkbox-square(type='checkbox' value='toggle-narrow-weekend')
|
||||
span.checkbox-title
|
||||
| Narrower than weekdays
|
||||
.move-btn
|
||||
button.btn.btn-primary.move-day(type='button' data-action='move-prev')
|
||||
i.fa.fa-angle-left(data-action='move-prev')
|
||||
button.btn.btn-primary.move-day(type='button' data-action='move-next')
|
||||
i.fa.fa-angle-right(data-action='move-next')
|
||||
#lnb
|
||||
.lnb-new-schedule
|
||||
button#btn-new-schedule.btn.lnb-new-schedule-btn.btn-primary(type='button' data-bs-toggle='modal')
|
||||
| New schedule
|
||||
#lnb-calendars.lnb-calendars
|
||||
#calendarList.lnb-calendars-d1
|
||||
.lnb-calendars-item.m-0.p-0
|
||||
label
|
||||
input.tui-full-calendar-checkbox-square(type='checkbox' value='all' checked='')
|
||||
span
|
||||
strong View all
|
||||
.col-md-12
|
||||
#right
|
||||
#calendar
|
||||
// Container-fluid Ends
|
||||
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
58
public/assets/pug/pages/template/calendar-event.pug
Normal file
58
public/assets/pug/pages/template/calendar-event.pug
Normal file
@@ -0,0 +1,58 @@
|
||||
- var dragable_ui = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var calendar = true;
|
||||
- var page_calendar = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Calendar Events
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Calendar
|
||||
li.breadcrumb-item.active Calendar Events
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.calendar-wrap
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Background Event
|
||||
span
|
||||
| Events that appear as background highlights can be achieved by an Event Object's property to "background".
|
||||
.card-body
|
||||
.row
|
||||
.col-md-12
|
||||
#cal-bg-events
|
||||
.card
|
||||
.card-header
|
||||
h5 Event Colors
|
||||
span
|
||||
| You can change the color of all events on the calendar using the eventColor option.
|
||||
.card-body
|
||||
.row
|
||||
.col-md-12
|
||||
#cal-event-colors
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
66
public/assets/pug/pages/template/calendar.pug
Normal file
66
public/assets/pug/pages/template/calendar.pug
Normal file
@@ -0,0 +1,66 @@
|
||||
- var dragable_ui = true;
|
||||
- var theme_customizer = true;
|
||||
- var calendar = true;
|
||||
- var page_calendar = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Calendar Basic
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Calendar
|
||||
li.breadcrumb-item.active Calendar Basic
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.calendar-wrap
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Basic
|
||||
span
|
||||
| This is the basic example having navigation button to navigate next and previous months and today button. This basic example lists all the events on the calendar.
|
||||
.card-body
|
||||
.row
|
||||
.col-md-12
|
||||
#cal-basic
|
||||
.card
|
||||
.card-header
|
||||
h5 Basic Views
|
||||
span
|
||||
| This is the basic example having navigation buttons as well as month, week and day views. In this example the option to change your view to a basicWeek or basicDay view. In the Basic Week or Basic Day View events are listed all together.
|
||||
.card-body
|
||||
.row
|
||||
.col-md-12
|
||||
#cal-basic-view
|
||||
.card
|
||||
.card-header
|
||||
h5 Agenda Views
|
||||
span
|
||||
| The following example demonstrates agenda views and the defaultView option is set to agendaWeek.
|
||||
.card-body
|
||||
.row
|
||||
.col-md-12
|
||||
#cal-agenda-view
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
112
public/assets/pug/pages/template/cart.pug
Normal file
112
public/assets/pug/pages/template/cart.pug
Normal file
@@ -0,0 +1,112 @@
|
||||
- var theme_customizer = true;
|
||||
- var touchspin = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
.page-header-left
|
||||
h3 Cart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Pages
|
||||
li.breadcrumb-item Ecommerce
|
||||
li.breadcrumb-item.active Cart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Cart
|
||||
.card-body
|
||||
.row
|
||||
.order-history.table-responsive.wishlist
|
||||
table.table.table-bordered
|
||||
thead
|
||||
tr
|
||||
th Prdouct
|
||||
th Prdouct Name
|
||||
th Price
|
||||
th Quantity
|
||||
th Action
|
||||
th Total
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
img.img-fluid.img-40(src='../assets/images/product/1.png' alt='#')
|
||||
td
|
||||
.product-name
|
||||
a(href='#')
|
||||
h6 Long Top
|
||||
td $21
|
||||
td
|
||||
fieldset.qty-box
|
||||
.input-group
|
||||
input.touchspin.text-center(type='text' value='5')
|
||||
td
|
||||
i(data-feather='x-circle')
|
||||
td $12456
|
||||
tr
|
||||
td
|
||||
img.img-fluid.img-40(src='../assets/images/product/13.png' alt='#')
|
||||
td
|
||||
.product-name
|
||||
a(href='#')
|
||||
h6 Fancy watch
|
||||
td $50
|
||||
td
|
||||
fieldset.qty-box
|
||||
.input-group
|
||||
input.touchspin.text-center(type='text' value='5')
|
||||
td
|
||||
i(data-feather='x-circle')
|
||||
td $12456
|
||||
tr
|
||||
td
|
||||
img.img-fluid.img-40(src='../assets/images/product/4.png' alt='#')
|
||||
td
|
||||
.product-name
|
||||
a(href='#')
|
||||
h6 Man shoes
|
||||
td $11
|
||||
td
|
||||
fieldset.qty-box
|
||||
.input-group
|
||||
input.touchspin.text-center(type='text' value='5')
|
||||
td
|
||||
i(data-feather='x-circle')
|
||||
td $12456
|
||||
tr
|
||||
td(colspan='4')
|
||||
.input-group
|
||||
input.form-control.me-2(type='text' placeholder='Enter coupan code')
|
||||
a.btn.btn-primary(href='#') Apply
|
||||
td.total-amount
|
||||
h6.m-0.text-end
|
||||
span.f-w-600 Total Price :
|
||||
td
|
||||
span $6935.00
|
||||
tr
|
||||
td.text-end(colspan='5')
|
||||
a.btn.btn-secondary.cart-btn-transform(href='product.html') continue shopping
|
||||
td
|
||||
a.btn.btn-success.cart-btn-transform(href="checkout.html") check out
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
125
public/assets/pug/pages/template/chart-apex.pug
Normal file
125
public/assets/pug/pages/template/chart-apex.pug
Normal file
@@ -0,0 +1,125 @@
|
||||
- var theme_customizer = true;
|
||||
- var apex = true;
|
||||
- var page_apex = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Apex Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Charts
|
||||
li.breadcrumb-item.active Apex Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Basic Area Chart
|
||||
.card-body
|
||||
#basic-apex
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Area Spaline Chart
|
||||
.card-body
|
||||
#area-spaline
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Bar chart
|
||||
.card-body
|
||||
#basic-bar
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Column Chart
|
||||
.card-body
|
||||
#column-chart
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| 3d Bubble Chart
|
||||
.card-body
|
||||
#chart-bubble
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Candlestick Chart
|
||||
.card-body
|
||||
#candlestick
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Stepline Chart
|
||||
.card-body
|
||||
#stepline
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Column Chart
|
||||
.card-body
|
||||
#annotationchart
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Pie Chart
|
||||
.card-body.apex-chart
|
||||
#piechart
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Donut Chart
|
||||
.card-body.apex-chart
|
||||
#donutchart
|
||||
.col-sm-12.col-xl-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Mixed Chart
|
||||
.card-body
|
||||
#mixedchart
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Radar Chart
|
||||
.card-body
|
||||
#radarchart
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
| Radial Bar Chart
|
||||
.card-body
|
||||
#circlechart
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
150
public/assets/pug/pages/template/chart-flot.pug
Normal file
150
public/assets/pug/pages/template/chart-flot.pug
Normal file
@@ -0,0 +1,150 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var flotchart = true;
|
||||
- var page_flotchart = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Flot Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Charts
|
||||
li.breadcrumb-item.active Flot Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row.all-chart
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Real-Time Updates
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#real-time-update.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Multiple Real-Time Updates
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#multiple-real-timeupdate.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Error chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#error-flot-chart.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Adding Annotations chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#annotations-chart.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Basic chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#flot-basic-chart.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Categories Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#flot-categories.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Toggling Series Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#toggling-series-flot.flot-chart-placeholder.float-start
|
||||
p#choices.float-end
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Stacking chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#stacking-flot-chart.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Default pie chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#default-pie-flot-chart.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Default pie chart (Interactive)
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#default-pie-flot-chart-hover.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Default pie chart without legend
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#default-pie-legend-flot-chart.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Custom Label Formatter
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#custom-label1pie.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Label Radius chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#label-radius-flot-chart.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Hidden Labels chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#hidden-label-radius-flot-chart.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Tilted Pie chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#title-pie-flot-chart.flot-chart-placeholder
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Donut Hole chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#dount-hole-flot-chart.flot-chart-placeholder
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
131
public/assets/pug/pages/template/chart-google.pug
Normal file
131
public/assets/pug/pages/template/chart-google.pug
Normal file
@@ -0,0 +1,131 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var googlechart = true;
|
||||
- var page_googlechart = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Google Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Charts
|
||||
li.breadcrumb-item.active Google Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-xl-4.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5
|
||||
| Pie Chart
|
||||
span.digits 1
|
||||
.card-body.p-0.chart-block
|
||||
#pie-chart4.chart-overflow
|
||||
.col-sm-12.col-xl-4.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5
|
||||
| Area Chart
|
||||
span.digits 1
|
||||
.card-body.p-0.chart-block
|
||||
#area-chart1.chart-overflow
|
||||
.col-sm-12.col-xl-4.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5
|
||||
| Area Chart
|
||||
span.digits 2
|
||||
.card-body.p-0.chart-block
|
||||
#area-chart2.chart-overflow
|
||||
.col-sm-12.col-xl-4.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5
|
||||
| Pie Chart
|
||||
span.digits 2
|
||||
.card-body.p-0.chart-block
|
||||
#pie-chart1.chart-overflow
|
||||
.col-sm-12.col-xl-4.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5
|
||||
| Pie Chart
|
||||
span.digits 3
|
||||
.card-body.p-0.chart-block
|
||||
#pie-chart2.chart-overflow
|
||||
.col-sm-12.col-xl-4.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5
|
||||
| Pie Chart
|
||||
span.digits 4
|
||||
.card-body.p-0.chart-block
|
||||
#pie-chart3.chart-overflow
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5
|
||||
| Column Chart
|
||||
span.digits 1
|
||||
.card-body.chart-block
|
||||
#column-chart1.chart-overflow
|
||||
.col-sm-12.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5
|
||||
| Column Chart
|
||||
span.digits 2
|
||||
.card-body.chart-block
|
||||
#column-chart2.chart-overflow
|
||||
.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Gantt Chart
|
||||
.card-body.chart-block
|
||||
#gantt_chart.chart-overflow
|
||||
.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Line Chart
|
||||
.card-body.chart-block
|
||||
#line-chart.chart-overflow
|
||||
.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Combo Chart
|
||||
.card-body.chart-block
|
||||
#combo-chart.chart-overflow
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 bar-chart2
|
||||
.card-body.chart-block
|
||||
#bar-chart2
|
||||
.col-sm-12.col-xl-6.box-col-12
|
||||
.card
|
||||
.card-header
|
||||
h5 word tree
|
||||
.card-body.chart-block
|
||||
#wordtree_basic.word-tree
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
100
public/assets/pug/pages/template/chart-knob.pug
Normal file
100
public/assets/pug/pages/template/chart-knob.pug
Normal file
@@ -0,0 +1,100 @@
|
||||
- var theme_customizer = true;
|
||||
- var knobchart = true;
|
||||
- var page_knobchart = true;
|
||||
- var sidebar = true;
|
||||
- var scrollbar = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Knob Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Charts
|
||||
li.breadcrumb-item.active Knob Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Clock
|
||||
.card-body
|
||||
.knob-block.text-center.knob-chart
|
||||
.chart-clock-main
|
||||
.clock-large
|
||||
input.knob.hour(data-min='0', data-max='24', data-bgcolor='#eeeeee', data-fgcolor='#24695c', data-displayinput='false', data-width='300', data-height='300', data-thickness='.2')
|
||||
.clock-medium
|
||||
input.knob.minute(data-min='0', data-max='60', data-bgcolor='#eeeeee', data-fgcolor='#ba895d', data-displayinput='false', data-width='200', data-height='200', data-thickness='.20')
|
||||
.clock-small
|
||||
input.knob.second(data-min='0', data-max='60', data-bgcolor='#eeeeee', data-fgcolor='#222222', data-displayinput='false', data-width='100', data-height='100', data-thickness='.2')
|
||||
.col-sm-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Tron
|
||||
.card-body
|
||||
.knob-block.text-center
|
||||
input.knob(data-width='295', data-height='295', data-angleoffset='180', data-fgcolor='#24695c', data-skin='tron', data-thickness='.1', value='35')
|
||||
.col-xl-4.xl-50.col-sm-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Angle Offset
|
||||
.card-body
|
||||
.knob-block.text-center
|
||||
input.knob(data-width='200', data-thickness='.1', data-angleoffset='90', data-fgcolor='#24695c', data-linecap='round', value='35')
|
||||
.col-xl-4.xl-50.col-sm-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Disable Display Input
|
||||
.card-body
|
||||
.knob-block.text-center
|
||||
input.knob(data-width='200', data-thickness='.1', data-fgcolor='#24695c', data-displayinput='false', value='35')
|
||||
.col-xl-4.xl-50.col-sm-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Cursor Mode
|
||||
.card-body
|
||||
.knob-block.text-center
|
||||
input.knob(data-width='200', data-cursor='true', data-fgcolor='#24695c', data-thickness='.1', value='29')
|
||||
.col-xl-4.xl-50.col-sm-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Display Previous Value
|
||||
.card-body
|
||||
.knob-block.text-center
|
||||
input.knob(data-width='200', data-thickness='.1', data-fgcolor='#24695c', data-min='-100', data-displayprevious='true', value='44')
|
||||
.col-xl-4.xl-50.col-sm-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Angle Offset & Arc
|
||||
.card-body
|
||||
.knob-block.text-center
|
||||
input.knob(data-angleoffset='-125', data-anglearc='250', data-fgcolor='#24695c', data-thickness='.1', data-rotation='anticlockwise', value='35')
|
||||
.col-xl-4.xl-50.col-sm-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 4-digit, step 0.1
|
||||
.card-body
|
||||
.knob-block.text-center
|
||||
input.knob(data-min='-10000', data-thickness='.1', data-fgcolor='#24695c', data-displayprevious='true', data-max='10000', data-step='.1', value='0')
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
110
public/assets/pug/pages/template/chart-morris.pug
Normal file
110
public/assets/pug/pages/template/chart-morris.pug
Normal file
@@ -0,0 +1,110 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var morrischart = true;
|
||||
- var page_morrischart = true;
|
||||
- var sidebar = true;
|
||||
- var scrollbar = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Morris Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Charts
|
||||
li.breadcrumb-item.active Morris Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Line Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#morris-line-chart.flot-chart-placeholder
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Updating Data
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#updating-data-morris-chart.flot-chart-placeholder
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Decimal Data
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#decimal-morris-chart.flot-chart-placeholder.float-start
|
||||
p#choices.float-end
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Displaying X Labels Diagonally
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#x-Labels-Diagonally-morris-chart.flot-chart-placeholder
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Bar Line Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#bar-line-chart-morris.flot-chart-placeholder
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Displaying X Labels Diagonally(Bar Chart)
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#x-lable-morris-chart.flot-chart-placeholder
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Stacked Bars Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#stacked-bar-chart.flot-chart-placeholder
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Simple Bar Charts
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#morris-simple-bar-chart.flot-chart-placeholder
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Area charts behaving like line Charts
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#graph123.flot-chart-placeholder
|
||||
.col-lg-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Donut Color Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#donut-color-chart-morris.flot-chart-placeholder
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
119
public/assets/pug/pages/template/chart-peity.pug
Normal file
119
public/assets/pug/pages/template/chart-peity.pug
Normal file
@@ -0,0 +1,119 @@
|
||||
- var theme_customizer = true;
|
||||
- var peitychart = true;
|
||||
- var page_peitychart = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Peity Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Charts
|
||||
li.breadcrumb-item.active peity Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-xl-4
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Updating Chart
|
||||
.card-body.peity-charts.peity-chart-primary
|
||||
span.updating-chart 4,3,5,4,5,10,2,3,9,1,2,8
|
||||
.col-xl-4
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Line Chart 1
|
||||
.card-body.peity-charts.peity-chart-primary
|
||||
span.line 5,3,9,6,5,9,7,3,5,2
|
||||
.col-xl-4
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Line Chart 2
|
||||
.card-body.peity-charts.peity-chart-primary
|
||||
span.line 0,-3,-6,-4,-5,-4,-7,-3,-5,-2
|
||||
.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Bar Chart 1
|
||||
.card-body.peity-charts
|
||||
span.bar(data-peity='{ "fill": ["#24695c", "#ba895d"]}') 5,3,9,6,5,9,7,3,5,2
|
||||
.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Bar Chart 2
|
||||
.card-body.peity-charts.peity-chart-primary
|
||||
span.bar(data-peity='{ "fill": ["#24695c", "#ba895d"]}') 5,3,2,-1,-3,-2,2,3,5,2
|
||||
.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Donut Chart 1
|
||||
.card-body.peity-charts
|
||||
span.donut(data-peity='{ "fill": ["#24695c", "#efefef"]}') 226/360
|
||||
.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Donut Chart 2
|
||||
.card-body.peity-charts
|
||||
span.donut(data-peity='{ "fill": ["#24695c", "#efefef"]}') 1,2,3,2,2
|
||||
.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Pie Chart 1
|
||||
.card-body.peity-charts
|
||||
span.pie(data-peity='{ "fill": ["#24695c", "#ba895d"]}') 226,134
|
||||
.col-xl-6.box-col-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Pie Chart 2
|
||||
.card-body.peity-charts
|
||||
span.pie(data-peity='{ "fill": ["#24695c", "#ba895d"]}') 1,2,3,2,2
|
||||
.col-xl-6.xl-100.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Donut Charts with Radius
|
||||
.card-body
|
||||
p.data-attributes
|
||||
span(data-peity='{ "fill": ["#24695c", "#efefef"], "innerRadius": 10, "radius": 40 }') 1/7
|
||||
span(data-peity='{ "fill": ["#ba895d", "#efefef"], "innerRadius": 14, "radius": 36 }') 2/7
|
||||
span(data-peity='{ "fill": ["#222222", "#efefef"], "innerRadius": 16, "radius": 32 }') 3/7
|
||||
span(data-peity='{ "fill": ["#717171", "#efefef"], "innerRadius": 18, "radius": 28 }') 4/7
|
||||
span(data-peity='{ "fill": ["#e2c636", "#efefef"], "innerRadius": 20, "radius": 24 }') 5/7
|
||||
span(data-peity='{ "fill": ["#d22d3d", "#efefef"], "innerRadius": 18, "radius": 20 }') 6/7
|
||||
span(data-peity='{ "fill": ["#e6edef", "#efefef"], "innerRadius": 15, "radius": 16 }') 7/7
|
||||
.col-xl-6.xl-100.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Peity Charts With Different Colors
|
||||
.card-body
|
||||
.row
|
||||
.col-sm-3.text-center.col-6
|
||||
.xm-mb-peity
|
||||
span.bar-colours-1 5,3,9,6,5,9,7,3,5,2
|
||||
.col-sm-3.text-center.col-6
|
||||
.xm-mb-peity
|
||||
span.bar-colours-2 5,3,2,-1,-3,-2,2,3,5,2
|
||||
.col-sm-3.text-center.col-6
|
||||
span.bar-colours-3 0,-3,-6,-4,-5,-4,-7,-3,-5,-2
|
||||
.col-sm-3.text-center.col-6
|
||||
span.pie-colours-1 4,7,6,5
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
79
public/assets/pug/pages/template/chart-sparkline.pug
Normal file
79
public/assets/pug/pages/template/chart-sparkline.pug
Normal file
@@ -0,0 +1,79 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var sparkline = true;
|
||||
- var page_sparkline = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Sparkline Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Charts
|
||||
li.breadcrumb-item.active Sparkline Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-lg-4.col-md-6.col-sm-12.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Mouse Speed Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#mouse-speed-chart-sparkline.flot-chart-placeholder
|
||||
.col-lg-4.col-md-6.col-sm-12.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Simple Bar Charts
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#custom-line-chart.flot-chart-placeholder
|
||||
.col-lg-4.col-md-6.col-sm-12.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Line Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#line-chart-sparkline.flot-chart-placeholder.line-chart-sparkline
|
||||
.col-lg-4.col-md-6.col-sm-12.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Simple Line Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#simple-line-chart-sparkline.flot-chart-placeholder
|
||||
.col-lg-4.col-md-6.col-sm-12.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Bar Chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#bar-chart-sparkline.flot-chart-placeholder
|
||||
.col-lg-4.col-md-6.col-sm-12.box-col-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Pie chart
|
||||
.card-body.chart-block
|
||||
.flot-chart-container
|
||||
#pie-sparkline-chart.flot-chart-placeholder
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
342
public/assets/pug/pages/template/chart-widget.pug
Normal file
342
public/assets/pug/pages/template/chart-widget.pug
Normal file
@@ -0,0 +1,342 @@
|
||||
- var prism = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var counter = true;
|
||||
- var clipboard = true;
|
||||
- var customcard = true;
|
||||
- var apex_widget = true;
|
||||
- var apex = true;
|
||||
- var chart_widget = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Widgets
|
||||
li.breadcrumb-item.active Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid.chart-widget
|
||||
// Chart widget top Start
|
||||
.row
|
||||
.col-xl-4
|
||||
.card.o-hidden
|
||||
.chart-widget-top
|
||||
.row.card-body
|
||||
.col-5
|
||||
h6.f-w-600.font-primary SALE
|
||||
span.num
|
||||
span.counter 90
|
||||
| %
|
||||
i.icon-angle-up.f-12
|
||||
.col-7.text-end
|
||||
h4.num.total-value
|
||||
| $
|
||||
span.counter 3654
|
||||
| .00
|
||||
div
|
||||
#chart-widget1
|
||||
.col-xl-4
|
||||
.card.o-hidden
|
||||
.chart-widget-top
|
||||
.row.card-body
|
||||
.col-7
|
||||
h6.f-w-600.font-secondary PROJECTS
|
||||
span.num
|
||||
span.counter 30
|
||||
| %
|
||||
i.icon-angle-up.f-12
|
||||
.col-5.text-end
|
||||
h4.num.total-value.counter 12569
|
||||
div#chart-widget2
|
||||
#chart-widget-top-second.flot-chart-placeholder
|
||||
.col-xl-4
|
||||
.card.o-hidden
|
||||
.chart-widget-top
|
||||
.row.card-body
|
||||
.col-8
|
||||
h6.f-w-600.font-success PRODUCTS
|
||||
span.num
|
||||
span.counter 68
|
||||
| %
|
||||
i.icon-angle-up.f-12
|
||||
.col-4.text-end
|
||||
h4.num.total-value
|
||||
span.counter 93
|
||||
| M
|
||||
div#chart-widget3
|
||||
#chart-widget-top-third.flot-chart-placeholder
|
||||
// Chart widget top Ends
|
||||
// Chart widget with bar chart Start
|
||||
.row
|
||||
.col-xl-7
|
||||
.card.o-hidden
|
||||
.card-header.pb-0
|
||||
h5 Marketing Expenses
|
||||
.bar-chart-widget
|
||||
.bottom-content.card-body
|
||||
.row
|
||||
.col-12
|
||||
div#chart-widget4
|
||||
.col-xl-5
|
||||
.card.o-hidden
|
||||
.card-header.pb-0
|
||||
h5 Total Earning
|
||||
.bar-chart-widget
|
||||
.top-content.bg-primary
|
||||
.bottom-content.card-body
|
||||
.row
|
||||
.col-12
|
||||
div#chart-widget5
|
||||
.row.text-center
|
||||
.col-4.b-r-light
|
||||
div
|
||||
span.font-primary
|
||||
| 12%
|
||||
i.icon-angle-up.f-12.ms-1
|
||||
span.text-muted.block-bottom Year
|
||||
h4.num.m-0
|
||||
span.counter.color-bottom 3659
|
||||
| M
|
||||
.col-4.b-r-light
|
||||
div
|
||||
span.font-primary
|
||||
| 15%
|
||||
i.icon-angle-up.f-12.ms-1
|
||||
span.text-muted.block-bottom Month
|
||||
h4.num.m-0
|
||||
span.counter.color-bottom 698
|
||||
| M
|
||||
.col-4
|
||||
div
|
||||
span.font-primary
|
||||
| 34%
|
||||
i.icon-angle-up.f-12.ms-1
|
||||
span.text-muted.block-bottom Today
|
||||
h4.num.m-0
|
||||
span.counter.color-bottom 9361
|
||||
| M
|
||||
|
||||
// small widgets Start
|
||||
.row
|
||||
// Live Product chart widget Start
|
||||
.xl-50.col-xl-7.box-col-6
|
||||
.small-chart-widget.chart-widgets-small
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Live Products
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body
|
||||
.chart-container
|
||||
.row
|
||||
.col-12
|
||||
div#chart-widget6
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <div class="chart-container">
|
||||
| <div class="row">
|
||||
| <div class="col-12">
|
||||
| <div id="chart-widget6"></div>
|
||||
| </div>
|
||||
| </div>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
// Live Product chart widget Ends
|
||||
// Turnover chart widget Start
|
||||
.xl-50.col-xl-5.box-col-6
|
||||
.small-chart-widget.chart-widgets-small
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Turnover
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body
|
||||
.chart-container
|
||||
.row
|
||||
.col-12
|
||||
div#chart-widget7
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head1
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <div class="chart-container">
|
||||
| <div class="row">
|
||||
| <div class="col-12">
|
||||
| <div id="chart-widget7"></div>
|
||||
| </div>
|
||||
| </div>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
// Turnover chart widget Ends
|
||||
// Monthly Sale chart widget Start
|
||||
.xl-50.col-xl-5.box-col-6
|
||||
.small-chart-widget.chart-widgets-small
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Monthly Sales
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body
|
||||
.chart-container
|
||||
.row
|
||||
.col-12
|
||||
div#chart-widget8
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head2
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <div class="chart-container">
|
||||
| <div class="row">
|
||||
| <div class="col-12">
|
||||
| <div id="chart-widget8"></div>
|
||||
| </div>
|
||||
| </div>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
// Monthly Sale chart widget Ends
|
||||
// Uses chart widget Start
|
||||
.xl-50.col-xl-7.box-col-6
|
||||
.small-chart-widget.chart-widgets-small
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Uses
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body
|
||||
.chart-container
|
||||
.row
|
||||
.col-12
|
||||
div#chart-widget9
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head3
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <div class="chart-container">
|
||||
| <div class="row">
|
||||
| <div class="col-12">
|
||||
| <div id="chart-widget9"></div>
|
||||
| </div>
|
||||
| </div>
|
||||
| </div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
// Uses chart widget Ends
|
||||
// small widgets Ends
|
||||
// Browser uses and website visiter widget Start
|
||||
.row
|
||||
// browser uses widget chart Start
|
||||
.col-sm-12.box-col-12
|
||||
.donut-chart-widget
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Browser Uses
|
||||
.setting-list
|
||||
ul.list-unstyled.setting-option
|
||||
li
|
||||
.setting-primary
|
||||
i.icon-settings
|
||||
li
|
||||
i.view-html.fa.fa-code.font-white
|
||||
li
|
||||
i.icofont.icofont-maximize.full-card.font-white
|
||||
li
|
||||
i.icofont.icofont-minus.minimize-card.font-white
|
||||
li
|
||||
i.icofont.icofont-refresh.reload-card.font-white
|
||||
li
|
||||
i.icofont.icofont-error.close-card.font-white
|
||||
.card-body
|
||||
#chart-widget13
|
||||
.code-box-copy
|
||||
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
|
||||
i.icofont.icofont-copy-alt
|
||||
pre
|
||||
code.language-html#example-head4
|
||||
| <!-- Cod Box Copy begin -->
|
||||
| <div id="#chart-widget13"></div>
|
||||
| <!-- Cod Box Copy end -->
|
||||
// browser uses widget chart Endss
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
108
public/assets/pug/pages/template/chartist.pug
Normal file
108
public/assets/pug/pages/template/chartist.pug
Normal file
@@ -0,0 +1,108 @@
|
||||
- var theme_customizer = true;
|
||||
- var chartist = true;
|
||||
- var page_chartist = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Chartist Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Charts
|
||||
li.breadcrumb-item.active Chartist Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Advanced SMIL Animations
|
||||
.card-body
|
||||
.ct-6.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 SVG Path animation
|
||||
.card-body
|
||||
.ct-7.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Animating a Donut with Svg.animate
|
||||
.card-body
|
||||
.ct-8.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Bi-polar Line chart with area only
|
||||
.card-body
|
||||
.ct-5.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Line chart with area
|
||||
.card-body
|
||||
.ct-4.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Bi-polar bar chart
|
||||
.card-body
|
||||
.ct-9.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Stacked bar chart
|
||||
.card-body
|
||||
.ct-10.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Horizontal bar chart
|
||||
.card-body
|
||||
.ct-11.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Extreme responsive configuration
|
||||
.card-body
|
||||
.ct-12.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Simple line chart
|
||||
.card-body
|
||||
.ct-1.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Holes in data
|
||||
.card-body
|
||||
.ct-2.flot-chart-container
|
||||
.col-md-6.col-sm-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Filled holes in data
|
||||
.card-body
|
||||
.ct-3.flot-chart-container
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
72
public/assets/pug/pages/template/chartjs.pug
Normal file
72
public/assets/pug/pages/template/chartjs.pug
Normal file
@@ -0,0 +1,72 @@
|
||||
- var theme_customizer = true;
|
||||
- var chartjs = true;
|
||||
- var page_chartjs = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| ChartJS Chart
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Charts
|
||||
li.breadcrumb-item.active ChartJS Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-xl-6.col-md-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Bar Chart
|
||||
.card-body.chart-block
|
||||
canvas#myBarGraph
|
||||
.col-xl-6.col-md-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Line Graph
|
||||
.card-body.chart-block
|
||||
canvas#myGraph
|
||||
.col-xl-6.col-md-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Radar Graph
|
||||
.card-body.chart-block
|
||||
canvas#myRadarGraph
|
||||
.col-xl-6.col-md-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Line Chart
|
||||
.card-body.chart-block
|
||||
canvas#myLineCharts
|
||||
.col-xl-6.col-md-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Doughnut Chart
|
||||
.card-body.chart-block.chart-vertical-center
|
||||
canvas#myDoughnutGraph
|
||||
.col-xl-6.col-md-12.box-col-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Polar Chart
|
||||
.card-body.chart-block.chart-vertical-center
|
||||
canvas#myPolarGraph
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
322
public/assets/pug/pages/template/chat-video.pug
Normal file
322
public/assets/pug/pages/template/chat-video.pug
Normal file
@@ -0,0 +1,322 @@
|
||||
- var theme_customizer = true;
|
||||
- var fullscreen = true;
|
||||
- var sidebar = true;
|
||||
- var scrollbar = true;
|
||||
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Video Chat
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Apps
|
||||
li.breadcrumb-item Chat
|
||||
li.breadcrumb-item.active Video Chart
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col.call-chat-sidebar
|
||||
.card
|
||||
.card-body.chat-body
|
||||
.chat-box
|
||||
// Chat left side Start
|
||||
.chat-left-aside
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/12.png', alt='')
|
||||
.about
|
||||
.name.f-w-600 Mark Jecno
|
||||
.status
|
||||
| Status...
|
||||
#people-list.people-list
|
||||
.search
|
||||
form.theme-form
|
||||
.form-group
|
||||
input.form-control(type='text', placeholder='search')
|
||||
i.fa.fa-search
|
||||
ul.list.custom-scrollbar
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/1.jpg', alt='')
|
||||
.status-circle.away
|
||||
.media-body
|
||||
.about
|
||||
.name Vincent Porter
|
||||
.status
|
||||
| Hello Name
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/2.png', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Aiden Chavez
|
||||
.status
|
||||
| Out is my favorite.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/8.jpg', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Prasanth Anand
|
||||
.status
|
||||
| Change for anyone.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/4.jpg', alt='')
|
||||
.status-circle.offline
|
||||
.media-body
|
||||
.about
|
||||
.name Venkata Satyamu
|
||||
.status
|
||||
| First bun like a sun.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/5.jpg', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Ginger Johnston
|
||||
.status
|
||||
| it's my life. Mind it.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/8.jpg', alt='')
|
||||
.status-circle.offline
|
||||
.media-body
|
||||
.about
|
||||
.name Kori Thomas
|
||||
.status
|
||||
| Change for anyone.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/1.jpg', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Vincent Porter
|
||||
.status
|
||||
| Hello Name
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/8.jpg', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Kori Thomas
|
||||
.status
|
||||
| Change for anyone.
|
||||
// Chat left side Ends
|
||||
.col.call-chat-body
|
||||
.card
|
||||
.card-body.p-0
|
||||
.row.chat-box
|
||||
// Chat right side start
|
||||
.col.pr-xl-0.chat-right-aside
|
||||
// chat start
|
||||
.chat
|
||||
// chat-header start
|
||||
.media.chat-header.clearfix
|
||||
img.rounded-circle(src='../assets/images/user/8.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name
|
||||
| Kori Thomas
|
||||
span.font-primary.f-12 Typing...
|
||||
.status.digits
|
||||
| Last Seen 3:55 PM
|
||||
ul.list-inline.float-end.chat-menu-icons
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-search
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-clip
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-headphone-alt
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-video-camera
|
||||
li.list-inline-item.toogle-bar
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-menu
|
||||
// chat-header end
|
||||
// chat-history start
|
||||
.chat-history
|
||||
.row
|
||||
.col.text-center.pe-0.call-content
|
||||
div
|
||||
.total-time
|
||||
h2.digits 36 : 56
|
||||
.call-icons
|
||||
ul.list-inline
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-video-camera
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-volume
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-user
|
||||
button.btn.btn-danger.btn-block.btn-lg END CALL
|
||||
.receiver-img
|
||||
img(src='../assets/images/other-images/receiver-img.jpg', alt='')
|
||||
.col-sm-6.caller-img-sec
|
||||
.caller-img
|
||||
img.img-fluid.bg-img-cover(src='../assets/images/other-images/caller.jpg', alt='')
|
||||
// chat-history ends
|
||||
// chat end
|
||||
// Chat right side ends
|
||||
.col.pl-xl-0.chat-menu
|
||||
ul#info-tab.nav.nav-tabs.border-tab.nav-primary(role='tablist')
|
||||
li.nav-item
|
||||
a#info-home-tab.nav-link.active(data-bs-toggle='tab', href='#info-home', role='tab', aria-selected='true')
|
||||
| CALL
|
||||
.material-border
|
||||
li.nav-item
|
||||
a#profile-info-tab.nav-link(data-bs-toggle='tab', href='#info-profile', role='tab', aria-selected='false')
|
||||
| STATUS
|
||||
.material-border
|
||||
li.nav-item
|
||||
a#contact-info-tab.nav-link(data-bs-toggle='tab', href='#info-contact', role='tab', aria-selected='false')
|
||||
| PROFILE
|
||||
.material-border
|
||||
#info-tabContent.tab-content
|
||||
#info-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='info-home-tab')
|
||||
.people-list
|
||||
ul.list.digits.custom-scrollbar
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/4.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Erica Hughes
|
||||
.status
|
||||
i.fa.fa-share.font-success
|
||||
| 5 May, 4:40 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image.mt-0(src='../assets/images/user/1.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Vincent Porter
|
||||
.status
|
||||
i.fa.fa-reply.font-danger
|
||||
| 5 May, 5:30 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/8.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Kori Thomas
|
||||
.status
|
||||
i.fa.fa-share.font-success
|
||||
| 1 Feb, 6:56 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/2.png', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Aiden Chavez
|
||||
.status
|
||||
i.fa.fa-reply.font-danger
|
||||
| 3 June, 1:22 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/4.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Erica Hughes
|
||||
.status
|
||||
i.fa.fa-share.font-success
|
||||
| 5 May, 4:40 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image.mt-0(src='../assets/images/user/1.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Vincent Porter
|
||||
.status
|
||||
i.fa.fa-share.font-success
|
||||
| 5 May, 5:30 PM
|
||||
#info-profile.tab-pane.fade(role='tabpanel', aria-labelledby='profile-info-tab')
|
||||
.people-list
|
||||
.search
|
||||
form.theme-form
|
||||
.form-group
|
||||
input.form-control(type='text', placeholder='Write Status...')
|
||||
i.fa.fa-pencil
|
||||
.status
|
||||
p.font-primary.f-w-600 Active
|
||||
hr
|
||||
p
|
||||
| Established fact that a reader will be
|
||||
| distracted
|
||||
i.icofont.icofont-emo-heart-eyes.font-danger.f-20
|
||||
i.icofont.icofont-emo-heart-eyes.font-danger.f-20.m-l-5
|
||||
hr
|
||||
p
|
||||
| Dolore magna aliqua
|
||||
i.icofont.icofont-emo-rolling-eyes.font-success.f-20
|
||||
#info-contact.tab-pane.fade(role='tabpanel', aria-labelledby='contact-info-tab')
|
||||
.user-profile
|
||||
.image
|
||||
.avatar.text-center
|
||||
img(alt='', src='../assets/images/user/2.png')
|
||||
.icon-wrapper
|
||||
i.icofont.icofont-pencil-alt-5
|
||||
.user-content.text-center
|
||||
h5.text-uppercase mark jenco
|
||||
.social-list
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-facebook
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-google-plus
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-twitter
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-instagram
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-rss
|
||||
.follow.text-center
|
||||
.row
|
||||
.col.border-right
|
||||
span Following
|
||||
.follow-num 236k
|
||||
.col
|
||||
span Follower
|
||||
.follow-num 3691k
|
||||
.text-center.digits
|
||||
p Mark.jecno23@gmail.com
|
||||
p +91 365 - 658 - 1236
|
||||
p Fax: 123-4560
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
350
public/assets/pug/pages/template/chat.pug
Normal file
350
public/assets/pug/pages/template/chat.pug
Normal file
@@ -0,0 +1,350 @@
|
||||
- var theme_customizer = true;
|
||||
- var fullscreen = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Chat App
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Apps
|
||||
li.breadcrumb-item Chat
|
||||
li.breadcrumb-item.active Chat App
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col.call-chat-sidebar
|
||||
.card
|
||||
.card-body.chat-body
|
||||
.chat-box
|
||||
// Chat left side Start
|
||||
.chat-left-aside
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/12.png', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name.f-w-600 Mark Jecno
|
||||
.status
|
||||
| Status...
|
||||
#people-list.people-list
|
||||
.search
|
||||
form.theme-form
|
||||
.form-group
|
||||
input.form-control(type='text', placeholder='search')
|
||||
i.fa.fa-search
|
||||
ul.list.custom-scrollbar
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/1.jpg', alt='')
|
||||
.status-circle.away
|
||||
.media-body
|
||||
.about
|
||||
.name Vincent Porter
|
||||
.status
|
||||
| Hello Name
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/2.png', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Aiden Chavez
|
||||
.status
|
||||
| Out is my favorite.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/8.jpg', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Prasanth Anand
|
||||
.status
|
||||
| Change for anyone.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/4.jpg', alt='')
|
||||
.status-circle.offline
|
||||
.media-body
|
||||
.about
|
||||
.name Venkata Satyamu
|
||||
.status
|
||||
| First bun like a sun.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/5.jpg', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Ginger Johnston
|
||||
.status
|
||||
| it's my life. Mind it.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/8.jpg', alt='')
|
||||
.status-circle.offline
|
||||
.media-body
|
||||
.about
|
||||
.name Kori Thomas
|
||||
.status
|
||||
| Change for anyone.
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/1.jpg', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Vincent Porter
|
||||
.status
|
||||
| Hello Name
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/8.jpg', alt='')
|
||||
.status-circle.online
|
||||
.media-body
|
||||
.about
|
||||
.name Kori Thomas
|
||||
.status
|
||||
| Change for anyone.
|
||||
// Chat left side Ends
|
||||
.col.call-chat-body
|
||||
.card
|
||||
.card-body.p-0
|
||||
.row.chat-box
|
||||
// Chat right side start
|
||||
.col.chat-right-aside
|
||||
// chat start
|
||||
.chat
|
||||
// chat-header start
|
||||
.media.chat-header.clearfix
|
||||
img.rounded-circle(src='../assets/images/user/8.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name
|
||||
| Kori Thomas
|
||||
span.font-primary.f-12 Typing...
|
||||
.status.digits
|
||||
| Last Seen 3:55 PM
|
||||
ul.list-inline.float-start.float-sm-end.chat-menu-icons
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-search
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-clip
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-headphone-alt
|
||||
li.list-inline-item
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-video-camera
|
||||
li.list-inline-item.toogle-bar
|
||||
a(href='javascript:void(0)')
|
||||
i.icon-menu
|
||||
// chat-header end
|
||||
.chat-history.chat-msg-box.custom-scrollbar
|
||||
ul
|
||||
li
|
||||
.message.my-message
|
||||
img.rounded-circle.float-start.chat-user-img.img-30(src='../assets/images/user/3.png', alt='')
|
||||
.message-data.text-end
|
||||
span.message-data-time 10:12 am
|
||||
| Are we meeting today? Project has been already finished and I have results to show you.
|
||||
li.clearfix
|
||||
.message.other-message.pull-right
|
||||
img.rounded-circle.float-end.chat-user-img.img-30(src='../assets/images/user/12.png', alt='')
|
||||
.message-data
|
||||
span.message-data-time 10:14 am
|
||||
| Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so?
|
||||
li.clearfix
|
||||
.message.other-message.pull-right
|
||||
img.rounded-circle.float-end.chat-user-img.img-30(src='../assets/images/user/12.png', alt='')
|
||||
.message-data
|
||||
span.message-data-time 10:14 am
|
||||
| Well I am not sure. The rest of the team
|
||||
li
|
||||
.message.my-message.mb-0
|
||||
img.rounded-circle.float-start.chat-user-img.img-30(src='../assets/images/user/3.png', alt='')
|
||||
.message-data.text-end
|
||||
span.message-data-time 10:20 am
|
||||
| Actually everything was fine. I'm very excited to show this to our team.
|
||||
// end chat-history
|
||||
.chat-message.clearfix
|
||||
.row
|
||||
.col-xl-12.d-flex
|
||||
.smiley-box.bg-primary
|
||||
.picker
|
||||
img(src='../assets/images/smiley.png', alt='')
|
||||
.input-group.text-box
|
||||
input#message-to-send.form-control.input-txt-bx(type='text', name='message-to-send', placeholder='Type a message......')
|
||||
button.btn.btn-primary.input-group-text(type='button') SEND
|
||||
// end chat-message
|
||||
// chat end
|
||||
// Chat right side ends
|
||||
.col.chat-menu
|
||||
ul#info-tab.nav.nav-tabs.border-tab.nav-primary(role='tablist')
|
||||
li.nav-item
|
||||
a#info-home-tab.nav-link.active(data-bs-toggle='tab', href='#info-home', role='tab', aria-selected='true')
|
||||
| CALL
|
||||
.material-border
|
||||
li.nav-item
|
||||
a#profile-info-tab.nav-link(data-bs-toggle='tab', href='#info-profile', role='tab', aria-selected='false')
|
||||
| STATUS
|
||||
.material-border
|
||||
li.nav-item
|
||||
a#contact-info-tab.nav-link(data-bs-toggle='tab', href='#info-contact', role='tab', aria-selected='false')
|
||||
| PROFILE
|
||||
.material-border
|
||||
#info-tabContent.tab-content
|
||||
#info-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='info-home-tab')
|
||||
.people-list
|
||||
ul.list.digits.custom-scrollbar
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/4.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Erica Hughes
|
||||
.status
|
||||
i.fa.fa-share.font-success
|
||||
| 5 May, 4:40 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image.mt-0(src='../assets/images/user/1.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Vincent Porter
|
||||
.status
|
||||
i.fa.fa-reply.font-danger
|
||||
| 5 May, 5:30 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/8.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Kori Thomas
|
||||
.status
|
||||
i.fa.fa-share.font-success
|
||||
| 1 Feb, 6:56 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/2.png', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Aiden Chavez
|
||||
.status
|
||||
i.fa.fa-reply.font-danger
|
||||
| 3 June, 1:22 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/4.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Erica Hughes
|
||||
.status
|
||||
i.fa.fa-share.font-success
|
||||
| 5 May, 4:40 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image.mt-0(src='../assets/images/user/1.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Vincent Porter
|
||||
.status
|
||||
i.fa.fa-share.font-success
|
||||
| 5 May, 5:30 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/8.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Kori Thomas
|
||||
.status
|
||||
i.fa.fa-reply.font-danger
|
||||
| 1 Feb, 6:56 PM
|
||||
li.clearfix
|
||||
.media
|
||||
img.rounded-circle.user-image(src='../assets/images/user/4.jpg', alt='')
|
||||
.media-body
|
||||
.about
|
||||
.name Erica Hughes
|
||||
.status
|
||||
i.fa.fa-share.font-success
|
||||
| 5 May, 4:40 PM
|
||||
#info-profile.tab-pane.fade(role='tabpanel', aria-labelledby='profile-info-tab')
|
||||
.people-list
|
||||
.search
|
||||
form.theme-form
|
||||
.form-group
|
||||
input.form-control(type='text', placeholder='Write Status...')
|
||||
i.fa.fa-pencil
|
||||
.status
|
||||
p.font-primary.f-w-600 Active
|
||||
hr
|
||||
p
|
||||
| Established fact that a reader will be
|
||||
| distracted
|
||||
i.icofont.icofont-emo-heart-eyes.font-danger.f-20
|
||||
i.icofont.icofont-emo-heart-eyes.font-danger.f-20.m-l-5
|
||||
hr
|
||||
p
|
||||
| Dolore magna aliqua
|
||||
i.icofont.icofont-emo-rolling-eyes.font-success.f-20
|
||||
#info-contact.tab-pane.fade(role='tabpanel', aria-labelledby='contact-info-tab')
|
||||
.user-profile
|
||||
.image
|
||||
.avatar.text-center
|
||||
img(alt='', src='../assets/images/user/2.png')
|
||||
.icon-wrapper
|
||||
i.icofont.icofont-pencil-alt-5
|
||||
.user-content.text-center
|
||||
h5.text-uppercase mark jenco
|
||||
.social-list
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-facebook
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-google-plus
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-twitter
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-instagram
|
||||
li
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-rss
|
||||
.follow.text-center
|
||||
.row
|
||||
.col.border-right
|
||||
span Following
|
||||
.follow-num 236k
|
||||
.col
|
||||
span Follower
|
||||
.follow-num 3691k
|
||||
.text-center.digits
|
||||
p Mark.jecno23@gmail.com
|
||||
p +91 365 - 658 - 1236
|
||||
p Fax: 123-4560
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
121
public/assets/pug/pages/template/checkout.pug
Normal file
121
public/assets/pug/pages/template/checkout.pug
Normal file
@@ -0,0 +1,121 @@
|
||||
- var theme_customizer = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body.checkout
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
.page-header-left
|
||||
h3 Checkout
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Ecommerce
|
||||
li.breadcrumb-item.active Checkout
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Billing Details
|
||||
.card-body
|
||||
.row
|
||||
.col-xl-6.col-sm-12
|
||||
form
|
||||
.row
|
||||
.mb-3.col-sm-6
|
||||
label(for='inputEmail4') First Name
|
||||
input#inputEmail4.form-control(type='email')
|
||||
.mb-3.col-sm-6
|
||||
label(for='inputPassword4') Last Name
|
||||
input#inputPassword4.form-control(type='password')
|
||||
.row
|
||||
.mb-3.col-sm-6
|
||||
label(for='inputEmail5') Phone
|
||||
input#inputEmail5.form-control(type='email')
|
||||
.mb-3.col-sm-6
|
||||
label(for='inputPassword7') Email Address
|
||||
input#inputPassword7.form-control(type='password')
|
||||
.mb-3
|
||||
label(for='inputState') Country
|
||||
select#inputState.form-control
|
||||
option(selected='') Choose...
|
||||
option ...
|
||||
.mb-3
|
||||
label(for='inputAddress5') Address
|
||||
input#inputAddress5.form-control(type='text')
|
||||
.mb-3
|
||||
label(for='inputCity') Town/City
|
||||
input#inputCity.form-control(type='text')
|
||||
.mb-3
|
||||
label(for='inputAddress2') State/Country
|
||||
input#inputAddress2.form-control(type='text')
|
||||
.mb-3
|
||||
label(for='inputAddress6') Postal Code
|
||||
input#inputAddress6.form-control(type='text')
|
||||
.mb-3
|
||||
.form-check
|
||||
input#gridCheck.form-check-input(type='checkbox')
|
||||
label.form-check-label(for='gridCheck')
|
||||
| Check me out
|
||||
.col-xl-6.col-sm-12
|
||||
.checkout-details
|
||||
.order-box
|
||||
.title-box
|
||||
div.checkbox-title
|
||||
h4.mb-0 Product
|
||||
span Total
|
||||
ul.qty
|
||||
li
|
||||
| Pink Slim Shirt × 1
|
||||
span $25.10
|
||||
li
|
||||
| SLim Fit Jeans × 1
|
||||
span $555.00
|
||||
ul.sub-total
|
||||
li
|
||||
| Subtotal
|
||||
span.count $380.10
|
||||
li.shipping-class
|
||||
| Shipping
|
||||
.shopping-checkout-option
|
||||
label.d-block(for='chk-ani')
|
||||
input#chk-ani.checkbox_animated(type='checkbox', checked='')
|
||||
| Option 1
|
||||
label.d-block(for='chk-ani1')
|
||||
input#chk-ani1.checkbox_animated(type='checkbox')
|
||||
| Option 2
|
||||
ul.sub-total.total
|
||||
li
|
||||
| Total
|
||||
span.count $620.00
|
||||
.animate-chk
|
||||
.row
|
||||
.col
|
||||
label.d-block(for='edo-ani')
|
||||
input#edo-ani.radio_animated(type='radio', name='rdo-ani', checked='', data-original-title='', title='')
|
||||
| Check Payments
|
||||
label.d-block(for='edo-ani1')
|
||||
input#edo-ani1.radio_animated(type='radio', name='rdo-ani', data-original-title='', title='')
|
||||
| Cash On Delivery
|
||||
label.d-block(for='edo-ani2')
|
||||
input#edo-ani2.radio_animated(type='radio', name='rdo-ani', checked='', data-original-title='', title='')
|
||||
| PayPal
|
||||
img(src='../assets/images/checkout/paypal.png', alt='' class='img-paypal')
|
||||
.order-place
|
||||
a.btn.btn-primary(href='javascript:void(0)') Place Order
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
83
public/assets/pug/pages/template/ckeditor.pug
Normal file
83
public/assets/pug/pages/template/ckeditor.pug
Normal file
@@ -0,0 +1,83 @@
|
||||
- var theme_customizer = true;
|
||||
- var ckeditor = true;
|
||||
- var page_ckeditor = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Ck Editor
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Editors
|
||||
li.breadcrumb-item.active Ck Editor
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Ck Editor
|
||||
.card-body
|
||||
textarea#editor1(name='editor1', cols='30', rows='10')
|
||||
| <h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
|
||||
| <table align="right" border="1" cellpadding="5" cellspacing="0">
|
||||
| <caption><strong>Mission crew</strong></caption>
|
||||
| <thead>
|
||||
| <tr>
|
||||
| <th scope="col">Position</th>
|
||||
| <th scope="col">Astronaut</th>
|
||||
| </tr>
|
||||
| </thead>
|
||||
| <tbody>
|
||||
| <tr>
|
||||
| <td>Commander</td>
|
||||
| <td>Neil A. Armstrong</td>
|
||||
| </tr>
|
||||
| <tr>
|
||||
| <td>Command Module Pilot</td>
|
||||
| <td>Michael Collins</td>
|
||||
| </tr>
|
||||
| <tr>
|
||||
| <td>Lunar Module Pilot</td>
|
||||
| <td>Edwin "Buzz" E. Aldrin, Jr.</td>
|
||||
| </tr>
|
||||
| </tbody>
|
||||
| </table>
|
||||
| <p>Launched by a <strong>Saturn V</strong> rocket from <a href="javascript:void(0)">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="javascript:void(0)">NASA</a>'s Apollo program. The Apollo spacecraft had three parts:</p>
|
||||
| <ol>
|
||||
| <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
|
||||
| <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
|
||||
| <li><strong>Lunar Module</strong> for landing on the Moon.</li>
|
||||
| </ol>
|
||||
| <p>After being sent to the Moon by the Saturn V's upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="javascript:void(0)">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="javascript:void(0)">Pacific Ocean</a> on July 24.</p>
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Inline Editor
|
||||
.card-body
|
||||
#area1(contenteditable='true')
|
||||
h1.f-w-700 Your title
|
||||
p
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at vulputate urna, sed dignissim arcu. Aliquam at ligula imperdiet, faucibus ante a, interdum enim. Sed in mauris a lectus lobortis condimentum. Sed in nunc magna. Quisque massa urna, cursus vitae commodo eget, rhoncus nec erat. Sed sapien turpis, elementum sit amet elit vitae, elementum gravida eros. In ornare tempus nibh ut lobortis. Nam venenatis justo ex, vitae vulputate neque laoreet a.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
98
public/assets/pug/pages/template/clipboard.pug
Normal file
98
public/assets/pug/pages/template/clipboard.pug
Normal file
@@ -0,0 +1,98 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var clipboard = true;
|
||||
- var page_clipboard = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Clipboard
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Forms
|
||||
li.breadcrumb-item Form Widgets
|
||||
li.breadcrumb-item.active Clipboard
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-md-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Clipboard On Text Input
|
||||
.card-body
|
||||
.clipboaard-container
|
||||
p.card-description Cut/copy from text input
|
||||
input#clipboardExample1.form-control(type='text', placeholder='type some text to copy / cut')
|
||||
.mt-3
|
||||
button.btn.btn-primary.btn-clipboard(type='button', data-clipboard-action='copy', data-clipboard-target='#clipboardExample1')
|
||||
i.fa.fa-copy
|
||||
| Copy
|
||||
button.btn.btn-secondary.btn-clipboard-cut(type='button', data-clipboard-action='cut', data-clipboard-target='#clipboardExample1')
|
||||
i.fa.fa-cut
|
||||
| Cut
|
||||
.col-sm-12.col-md-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Clipboard On Textarea
|
||||
.card-body
|
||||
.clipboaard-container
|
||||
p.card-description Cut/copy from textarea
|
||||
textarea#clipboardExample2.form-control(rows='1', spellcheck='false')
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
|
||||
.mt-3
|
||||
button.btn.btn-primary.btn-clipboard(type='button', data-clipboard-action='copy', data-clipboard-target='#clipboardExample2')
|
||||
i.fa.fa-copy
|
||||
| Copy
|
||||
button.btn.btn-secondary.btn-clipboard-cut(type='button', data-clipboard-action='cut', data-clipboard-target='#clipboardExample2')
|
||||
i.fa.fa-cut
|
||||
| Cut
|
||||
.col-sm-12.col-md-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Clipboard On Paragraph
|
||||
.card-body
|
||||
.clipboaard-container
|
||||
p.card-description Copy from Paragraph
|
||||
h6#clipboardExample3.border.rounded.card-body.f-w-300
|
||||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
| sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
.mt-3
|
||||
button.btn.btn-primary.btn-clipboard(type='button', data-clipboard-action='copy', data-clipboard-target='#clipboardExample3')
|
||||
i.fa.fa-copy
|
||||
| Copy
|
||||
.col-sm-12.col-md-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Copy Portion From Paragraph
|
||||
.card-body
|
||||
.clipboaard-container
|
||||
p.card-description Copy Portion From Paragraph
|
||||
h6.border.rounded.card-body.f-w-300
|
||||
| Lorem ipsum
|
||||
span#clipboardExample4.bg-primary.text-white.p-1 dolor sit amet
|
||||
| , consectetur adipiscing elit,
|
||||
| sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
.mt-3
|
||||
button.btn.btn-primary.btn-clipboard(type='button', data-clipboard-action='copy', data-clipboard-target='#clipboardExample4')
|
||||
i.fa.fa-copy
|
||||
| Copy highlighted text
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
31
public/assets/pug/pages/template/comingsoon-bg-img.pug
Normal file
31
public/assets/pug/pages/template/comingsoon-bg-img.pug
Normal file
@@ -0,0 +1,31 @@
|
||||
- var countdown = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
// Page Body Start
|
||||
.container-fluid.p-0.m-0
|
||||
.comingsoon.comingsoon-bgimg
|
||||
.comingsoon-inner.text-center
|
||||
a(href="index.html")
|
||||
img(src='../assets/images/logo/logo-1.png' alt="")
|
||||
h5 WE ARE COMING SOON
|
||||
#clockdiv.countdown
|
||||
ul
|
||||
li
|
||||
span#days.time.digits
|
||||
span.title days
|
||||
li
|
||||
span#hours.time.digits
|
||||
span.title Hours
|
||||
li
|
||||
span#minutes.time.digits
|
||||
span.title Minutes
|
||||
li
|
||||
span#seconds.time.digits
|
||||
span.title Seconds
|
||||
include ../../components/footer-files
|
||||
33
public/assets/pug/pages/template/comingsoon-bg-video.pug
Normal file
33
public/assets/pug/pages/template/comingsoon-bg-video.pug
Normal file
@@ -0,0 +1,33 @@
|
||||
- var countdown = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
// Page Body Start
|
||||
.container-fluid.p-0
|
||||
.comingsoon.auth-bg-video
|
||||
video#bgvid.bgvideo-comingsoon(poster='../assets/images/other-images/coming-soon-bg.jpg', playsinline='', autoplay='', muted='', loop='')
|
||||
source(src='../assets/video/auth-bg.mp4', type='video/mp4')
|
||||
.comingsoon-inner.text-center
|
||||
a(href="index.html")
|
||||
img(src='../assets/images/logo/logo-1.png', alt='')
|
||||
h5 WE ARE COMING SOON
|
||||
#clockdiv.countdown
|
||||
ul
|
||||
li
|
||||
span#days.time.digits
|
||||
span.title days
|
||||
li
|
||||
span#hours.time.digits
|
||||
span.title Hours
|
||||
li
|
||||
span#minutes.time.digits
|
||||
span.title Minutes
|
||||
li
|
||||
span#seconds.time.digits
|
||||
span.title Seconds
|
||||
include ../../components/footer-files
|
||||
31
public/assets/pug/pages/template/comingsoon-page1.pug
Normal file
31
public/assets/pug/pages/template/comingsoon-page1.pug
Normal file
@@ -0,0 +1,31 @@
|
||||
- var countdown = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
// Page Body Start
|
||||
.container-fluid.p-0
|
||||
.comingsoon
|
||||
.comingsoon-inner.text-center
|
||||
img(src='../assets/images/logo/logo.png', alt='')
|
||||
h5 WE ARE COMING SOON
|
||||
#clockdiv.countdown
|
||||
ul
|
||||
li
|
||||
span#days.time.digits
|
||||
span.title days
|
||||
li
|
||||
span#hours.time.digits
|
||||
span.title Hours
|
||||
li
|
||||
span#minutes.time.digits
|
||||
span.title Minutes
|
||||
li
|
||||
span#seconds.time.digits
|
||||
span.title Seconds
|
||||
|
||||
include ../../components/footer-files
|
||||
32
public/assets/pug/pages/template/comingsoon.pug
Normal file
32
public/assets/pug/pages/template/comingsoon.pug
Normal file
@@ -0,0 +1,32 @@
|
||||
- var countdown = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
// Page Body Start
|
||||
.container-fluid.p-0
|
||||
.comingsoon
|
||||
.comingsoon-inner.text-center
|
||||
a(href="index.html")
|
||||
img(src='../assets/images/logo/logo-1.png', alt='')
|
||||
h5 WE ARE COMING SOON
|
||||
#clockdiv.countdown
|
||||
ul
|
||||
li
|
||||
span#days.time.digits
|
||||
span.title days
|
||||
li
|
||||
span#hours.time.digits
|
||||
span.title Hours
|
||||
li
|
||||
span#minutes.time.digits
|
||||
span.title Minutes
|
||||
li
|
||||
span#seconds.time.digits
|
||||
span.title Seconds
|
||||
|
||||
include ../../components/footer-files
|
||||
790
public/assets/pug/pages/template/contacts.pug
Normal file
790
public/assets/pug/pages/template/contacts.pug
Normal file
@@ -0,0 +1,790 @@
|
||||
- var theme_customizer = true;
|
||||
- var form_validation_custom = true;
|
||||
- var select2 = true;
|
||||
- var page_select2 = true;
|
||||
- var sweetalert2 = true;
|
||||
- var notify = true;
|
||||
- var contact_page = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Contacts
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Apps
|
||||
li.breadcrumb-item.active Contacts
|
||||
.col-sm-6
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.email-wrap.bookmark-wrap
|
||||
.row
|
||||
.col-xl-3.xl-30.box-col-4
|
||||
.email-sidebar
|
||||
a.btn.btn-primary.email-aside-toggle(href="javascript:void(0)")
|
||||
| contact filter
|
||||
.email-left-aside
|
||||
.card
|
||||
.card-body
|
||||
.email-app-sidebar.left-bookmark
|
||||
.media
|
||||
.media-size-email
|
||||
img.me-3.rounded-circle(src='../assets/images/user/user.png', alt='')
|
||||
.media-body
|
||||
a(href="user-profile.html")
|
||||
h6.f-w-700 MARK JENCO
|
||||
p Markjecno@gmail.com
|
||||
ul.nav.main-menu(role='tablist').contact-options
|
||||
li.nav-item
|
||||
button.badge-light.btn-block.btn-mail.w-100(type='button', data-bs-toggle='modal', data-bs-target='#exampleModal')
|
||||
i.me-2(data-feather='users')
|
||||
| New Contacts
|
||||
#exampleModal.modal.fade.modal-bookmark(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
|
||||
.modal-dialog.modal-lg(role='document')
|
||||
.modal-content
|
||||
.modal-header
|
||||
h5#exampleModalLabel.modal-title Add Contact
|
||||
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
||||
.modal-body
|
||||
form#bookmark-form.form-bookmark.needs-validation(novalidate='')
|
||||
.row.g-2
|
||||
.mb-3.col-md-12.mt-0
|
||||
label(for='con-name') Name
|
||||
.row
|
||||
.col-sm-6
|
||||
input.form-control#con-name(type='text', required='', placeholder='First Name', autocomplete='off')
|
||||
.col-sm-6
|
||||
input.form-control#con-last(type='text', required='', placeholder='Last Name', autocomplete='off')
|
||||
.mb-3.col-md-12.mt-0
|
||||
label(for='con-mail') Email Address
|
||||
input.form-control#con-mail(type='text', required='', autocomplete='off')
|
||||
.mb-3.col-md-12.my-0
|
||||
label(for='con-phone') Phone
|
||||
.row
|
||||
.col-sm-6
|
||||
input.form-control#con-phone(type='number', required='', autocomplete='off')
|
||||
.col-sm-6
|
||||
select.form-control#con-select
|
||||
option Mobile
|
||||
option Work
|
||||
option Others
|
||||
input#index_var(type='hidden' value='5')
|
||||
button.btn.btn-secondary(type='submit', onclick='submitContact()') Save
|
||||
button.btn.btn-primary(type='button', data-bs-dismiss='modal') Cancel
|
||||
li.nav-item
|
||||
span.main-title
|
||||
| Views
|
||||
li
|
||||
a#pills-personal-tab(data-bs-toggle='pill', href='#pills-personal', role='tab', aria-controls='pills-personal', aria-selected='true')
|
||||
span.title
|
||||
| Personal
|
||||
li
|
||||
button.btn.btn-category(type='button', data-bs-toggle='modal', data-bs-target='#exampleModal1')
|
||||
span.title
|
||||
| + Add Category
|
||||
#exampleModal1.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel1', aria-hidden='true')
|
||||
.modal-dialog(role='document')
|
||||
.modal-content
|
||||
.modal-header
|
||||
h5#exampleModalLabel1.modal-title Add Category
|
||||
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
||||
.modal-body
|
||||
form.form-bookmark
|
||||
.row.g-2
|
||||
.mb-3.col-md-12
|
||||
input.form-control(type='text', required='', placeholder='Enter category name', autocomplete='off')
|
||||
button.btn.btn-secondary(type='button') Save
|
||||
button.btn.btn-primary(type='button', data-bs-dismiss='modal') Cancel
|
||||
li
|
||||
a#pills-organization-tab.show(data-bs-toggle='pill', href='#pills-organization', role='tab', aria-controls='pills-organization', aria-selected='false')
|
||||
span.title
|
||||
| Organization
|
||||
li
|
||||
a(href="javascript:void(0)")
|
||||
span.title Follow up
|
||||
li
|
||||
a(href="javascript:void(0)")
|
||||
span.title Favorites
|
||||
li
|
||||
a(href="javascript:void(0)")
|
||||
span.title Ideas
|
||||
li
|
||||
a(href="javascript:void(0)")
|
||||
span.title Important
|
||||
li
|
||||
a(href="javascript:void(0)")
|
||||
span.title Business
|
||||
li
|
||||
a(href="javascript:void(0)")
|
||||
span.title Holidays
|
||||
.col-xl-9.col-md-12.box-col-8.xl-70
|
||||
.email-right-aside.bookmark-tabcontent.contacts-tabs
|
||||
.card.email-body.radius-left
|
||||
.ps-0
|
||||
.tab-content
|
||||
#pills-personal.tab-pane.fade.active.show(role='tabpanel', aria-labelledby='pills-personal-tab')
|
||||
.card.mb-0
|
||||
.card-header.d-flex
|
||||
h5 Personal
|
||||
span.f-14.pull-right.mt-0 5 Contacts
|
||||
.card-body.p-0
|
||||
.row.list-persons#addcon
|
||||
.col-xl-4.xl-50.col-md-5.box-col-6
|
||||
#v-pills-tab.nav.flex-column.nav-pills(role='tablist', aria-orientation='vertical')
|
||||
a#v-pills-user-tab.contact-tab-0.nav-link.active(data-bs-toggle='pill', onclick= 'activeDiv(0)', href='#v-pills-user', role='tab', aria-controls='v-pills-user', aria-selected='true')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle.update_img_0(src='../assets/images/user/2.png' alt='')
|
||||
.media-body
|
||||
h6
|
||||
span.first_name_0 Bucky
|
||||
span.last_name_0 Barnes
|
||||
p.email_add_0 barnes@gmail.com
|
||||
a#v-pills-profile-tab.contact-tab-1.nav-link(data-bs-toggle='pill', onclick= 'activeDiv(1)', href='#v-pills-profile', role='tab', aria-controls='v-pills-profile', aria-selected='false')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle.update_img_1(src='../assets/images/user/8.jpg' alt='')
|
||||
.media-body
|
||||
h6
|
||||
span.first_name_1 Comeren
|
||||
span.last_name_1 Diaz
|
||||
p.email_add_1 comeren@gmail.com
|
||||
a#v-pills-messages-tab.contact-tab-2.nav-link(data-bs-toggle='pill', onclick= 'activeDiv(2)', href='#v-pills-messages', role='tab', aria-controls='v-pills-messages', aria-selected='false')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle.update_img_2(src='../assets/images/user/1.jpg' alt='')
|
||||
.media-body
|
||||
h6
|
||||
span.first_name_2 Issa
|
||||
span.last_name_2 Bell
|
||||
p.email_add_2 issabell@gmail.com
|
||||
a#v-pills-settings-tab.contact-tab-3.nav-link(data-bs-toggle='pill', onclick= 'activeDiv(3)', href='#v-pills-settings', role='tab', aria-controls='v-pills-settings', aria-selected='false')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle.update_img_3(src='../assets/images/user/14.png' alt='')
|
||||
.media-body
|
||||
h6
|
||||
span.first_name_3 Andew
|
||||
span.last_name_3 Jon
|
||||
p.email_add_3 andewjon@gmail.com
|
||||
a#v-pills-contact1-tab.contact-tab-4.nav-link(data-bs-toggle='pill', onclick= 'activeDiv(4)', href='#v-pills-contact1', role='tab', aria-controls='v-pills-settings', aria-selected='false')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle.update_img_4(src='../assets/images/user/5.jpg' alt='')
|
||||
.media-body
|
||||
h6
|
||||
span.first_name_4 Jason
|
||||
span.last_name_4 Borne
|
||||
p.email_add_4 jasonb@gmail.com
|
||||
a#v-pills-contact8-tab.contact-tab-5.nav-link(data-bs-toggle='pill', onclick= 'activeDiv(5)', href='#v-pills-contact2', role='tab', aria-controls='v-pills-settings', aria-selected='false')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle.update_img_5(src='../assets/images/avtar/11.jpg' alt='')
|
||||
.media-body
|
||||
h6
|
||||
span.first_name_5 Monty
|
||||
span.last_name_5 Carlo
|
||||
p.email_add_5 monty@gmail.com
|
||||
a#v-pills-contact3-tab.contact-tab-6.nav-link(data-bs-toggle='pill', onclick= 'activeDiv(6)', href='#v-pills-contact3', role='tab', aria-controls='v-pills-settings', aria-selected='false')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle.update_img_6(src='../assets/images/avtar/16.jpg' alt='')
|
||||
.media-body
|
||||
h6
|
||||
span.first_name_6 Brock
|
||||
span.last_name_6 Lee
|
||||
p.email_add_6 lee@gmail.com
|
||||
.col-xl-8.xl-50.col-md-7.box-col-6
|
||||
#v-pills-tabContent.tab-content
|
||||
#v-pills-user.tab-pane.contact-tab-0.tab-content-child.fade.show.active(role='tabpanel', aria-labelledby='v-pills-user-tab')
|
||||
.profile-mail
|
||||
.media.align-items-center
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_0(src='../assets/images/user/2.png' alt='')
|
||||
input.updateimg(type='file', name='img', onchange='readURL(this,0)')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_0 Bucky
|
||||
span.last_name_0 Barnes
|
||||
p.email_add_0 barnes@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='editContact(0)') Edit
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='deleteContact(0)') Delete
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='history(0)') History
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(0)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6.mb-3 General
|
||||
ul
|
||||
li Name
|
||||
span.font-primary.first_name_0 Bucky
|
||||
li Gender
|
||||
span.font-primary Male
|
||||
li Birthday
|
||||
span.font-primary
|
||||
span.birth_day_0 18
|
||||
span.birth_month_0.ms-1 May
|
||||
span.birth_year_0.ms-1 1994
|
||||
li Personality
|
||||
span.font-primary.personality_0 Cool
|
||||
li City
|
||||
span.font-primary.city_0 moline acres
|
||||
li Mobile No
|
||||
span.font-primary.mobile_num_0 +0 1800 76855
|
||||
li Email Address
|
||||
span.font-primary.email_add_0 barnes@gmail.com
|
||||
li Website
|
||||
span.font-primary.url_add_0 www.test.com
|
||||
li Interest
|
||||
span.font-primary.interest_0 photography
|
||||
#v-pills-profile.tab-pane.contact-tab-1.tab-content-child.fade(role='tabpanel', aria-labelledby='v-pills-profile-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_1(src='../assets/images/user/8.jpg' alt='')
|
||||
input.updateimg(type='file', name='img', onchange='readURL(this,1)')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_1 Comeren
|
||||
span.last_name_1 Diaz
|
||||
p.email_add_1 comeren@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='editContact(1)') Edit
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='deleteContact(1)') Delete
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='history(1)') History
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(1)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6.mb-3 General
|
||||
ul
|
||||
li Name
|
||||
span.font-primary.first_name_1 Comeren
|
||||
li Gender
|
||||
span.font-primary Female
|
||||
li Birthday
|
||||
span.font-primary
|
||||
span.birth_day_1 7
|
||||
span.birth_month_1.ms-1 Feb
|
||||
span.birth_year_1.ms-1 1995
|
||||
li Personality
|
||||
span.font-primary.personality_1 Cool
|
||||
li City
|
||||
span.font-primary.city_1 Delhi
|
||||
li Mobile No
|
||||
span.font-primary.mobile_num_1 +0 1800 55812
|
||||
li Email Address
|
||||
span.font-primary.email_add_1 comeren@gmail.com
|
||||
li Website
|
||||
span.font-primary.url_add_1 www.cometest@.com
|
||||
li Interest
|
||||
span.font-primary.interest_1 sports
|
||||
#v-pills-messages.tab-pane.contact-tab-2.tab-content-child.fade(role='tabpanel', aria-labelledby='v-pills-messages-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_2(src='../assets/images/user/1.jpg' alt='')
|
||||
input.updateimg(type='file', name='img', onchange='readURL(this,2)')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_2 Issa
|
||||
span.last_name_2 Bell
|
||||
p.email_add_2 issabell@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='editContact(2)') Edit
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='deleteContact(2)') Delete
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='history(2)') History
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(2)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6.mb-3 General
|
||||
ul
|
||||
li Name
|
||||
span.font-primary.first_name_2 Issa
|
||||
li Gender
|
||||
span.font-primary Male
|
||||
li Birthday
|
||||
span.font-primary
|
||||
span.birth_day_2 20
|
||||
span.birth_month_2.ms-1 Jul
|
||||
span.birth_year_2.ms-1 1993
|
||||
li Personality
|
||||
span.font-primary.personality_2 Cool
|
||||
li City
|
||||
span.font-primary.city_2 Mumbai
|
||||
li Mobile No
|
||||
span.font-primary.mobile_num_2 +0 1800 87412
|
||||
li Email Address
|
||||
span.font-primary.email_add_2 issabell@gmail.com
|
||||
li Website
|
||||
span.font-primary.url_add_2 www.belltest@.com
|
||||
li Interest
|
||||
span.font-primary.interest_2 cooking
|
||||
#v-pills-settings.tab-pane.contact-tab-3.tab-content-child.fade(role='tabpanel', aria-labelledby='v-pills-settings-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_3(src='../assets/images/user/14.png' alt='')
|
||||
input.updateimg(type='file', name='img', onchange='readURL(this,3)')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_3 Andew
|
||||
span.last_name_3 Jon
|
||||
p.email_add_3 andewjon@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='editContact(3)') Edit
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='deleteContact(3)') Delete
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='history(3)') History
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(3)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6.mb-3 General
|
||||
ul
|
||||
li Name
|
||||
span.font-primary.first_name_3 Andew
|
||||
li Gender
|
||||
span.font-primary Male
|
||||
li Birthday
|
||||
span.font-primary
|
||||
span.birth_day_3 25
|
||||
span.birth_month_3.ms-1 Aug
|
||||
span.birth_year_3.ms-1 1996
|
||||
li Personality
|
||||
span.font-primary.personality_3 Cool
|
||||
li City
|
||||
span.font-primary.city_3 Amreli
|
||||
li Mobile No
|
||||
span.font-primary.mobile_num_3 +0 1800 79877
|
||||
li Email Address
|
||||
span.font-primary.email_add_3 andewjon@gmail.com
|
||||
li Website
|
||||
span.font-primary.url_add_3 www.test@.com
|
||||
li Interest
|
||||
span.font-primary.interest_3 photography
|
||||
#v-pills-contact1.tab-pane.contact-tab-4.tab-content-child.fade(role='tabpanel', aria-labelledby='v-pills-contact1-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_4(src='../assets/images/user/5.jpg' alt='')
|
||||
input.updateimg(type='file', name='img', onchange='readURL(this,4)')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_4 Jason
|
||||
span.last_name_4 Borne
|
||||
p.email_add_4 jasonb@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='editContact(4)') Edit
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='deleteContact(4)') Delete
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='history(4)') History
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(4)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6.mb-3 General
|
||||
ul
|
||||
li Name
|
||||
span.font-primary.first_name_4 Jason
|
||||
li Gender
|
||||
span.font-primary Male
|
||||
li Birthday
|
||||
span.font-primary
|
||||
span.birth_day_4 30
|
||||
span.birth_month_4.ms-1 Oct
|
||||
span.birth_year_4.ms-1 1992
|
||||
li Personality
|
||||
span.font-primary.personality_4 Cool
|
||||
li City
|
||||
span.font-primary.city_4 Delhi
|
||||
li Mobile No
|
||||
span.font-primary.mobile_num_4 +0 1800 11547
|
||||
li Email Address
|
||||
span.font-primary.email_add_4 jasonb@gmail.com
|
||||
li Website
|
||||
span.font-primary.url_add_4 www.jason@.com
|
||||
li Interest
|
||||
span.font-primary.interest_4 photography
|
||||
#v-pills-contact8.tab-pane.contact-tab-5.tab-content-child.fade(role='tabpanel', aria-labelledby='v-pills-contact1-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_5(src='../assets/images/avtar/11.jpg' alt='')
|
||||
input.updateimg(type='file', name='img', onchange='readURL(this,5)')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_5 Monty
|
||||
span.last_name_5 Carlo
|
||||
p.email_add_5 monty@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='editContact(5)') Edit
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='deleteContact(5)') Delete
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='history(5)') History
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(5)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6.mb-3 General
|
||||
ul
|
||||
li Name
|
||||
span.font-primary.first_name_5 Monty
|
||||
li Gender
|
||||
span.font-primary Male
|
||||
li Birthday
|
||||
span.font-primary
|
||||
span.birth_day_5 12
|
||||
span.birth_month_5.ms-1 Nov
|
||||
span.birth_year_5.ms-1 1994
|
||||
li Personality
|
||||
span.font-primary.personality_5 Cool
|
||||
li City
|
||||
span.font-primary.city_5 Amreli
|
||||
li Mobile No
|
||||
span.font-primary.mobile_num_5 +0 1800 87944
|
||||
li Email Address
|
||||
span.font-primary.email_add_5 monty@gmail.com
|
||||
li Website
|
||||
span.font-primary.url_add_5 www.mon@.com
|
||||
li Interest
|
||||
span.font-primary.interest_5 sports
|
||||
#v-pills-contact9.tab-pane.contact-tab-6.tab-content-child.fade(role='tabpanel', aria-labelledby='v-pills-contact8-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_6(src='../assets/images/avtar/16.jpg' alt='')
|
||||
input.updateimg(type='file', name='img', onchange='readURL(this,6)')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_6 Brock
|
||||
span.last_name_6 Lee
|
||||
p.email_add_6 lee@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='editContact(6)') Edit
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='deleteContact(6)') Delete
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='history(6)') History
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(6)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6.mb-3 General
|
||||
ul
|
||||
li Name
|
||||
span.font-primary.first_name_6 Brock
|
||||
li Gender
|
||||
span.font-primary Male
|
||||
li Birthday
|
||||
span.font-primary
|
||||
span.birth_day_6 8
|
||||
span.birth_month_6.ms-1 Dec
|
||||
span.birth_year_6.ms-1 1992
|
||||
li Personality
|
||||
span.font-primary.personality_6 Cool
|
||||
li City
|
||||
span.font-primary.city_6 Ahemdabad
|
||||
li Mobile No
|
||||
span.font-primary.mobile_num_6 +0 1800 58712
|
||||
li Email Address
|
||||
span.font-primary.email_add_6 lee@gmail.com
|
||||
li Website
|
||||
span.font-primary.url_add_6 www.lee.com
|
||||
li Interest
|
||||
span.font-primary.interest_6 photography
|
||||
.contact-editform
|
||||
form
|
||||
.row.g-2
|
||||
.mt-0.mb-3.col-md-12
|
||||
label Name
|
||||
.row
|
||||
.col-sm-6
|
||||
input.form-control#first_name(type='text', required='', placeholder='First Name', value='first_name')
|
||||
.col-sm-6
|
||||
input.form-control#last_name(type='text', required='', placeholder='Last Name', value='last_name')
|
||||
.mt-0.mb-3.col-md-12
|
||||
label Email Address
|
||||
input.form-control#email_add(type='text', required='', autocomplete='off')
|
||||
.mt-0.mb-3.col-md-12
|
||||
label Phone
|
||||
.row
|
||||
.col-sm-6
|
||||
input.form-control#mobile_num(type='text', required='', autocomplete='off')
|
||||
.col-sm-6
|
||||
select.form-control
|
||||
option Mobile
|
||||
option Work
|
||||
option Others
|
||||
.row.g-2.more-data
|
||||
.mt-0.mb-3.col-md-12
|
||||
label URLS
|
||||
.row
|
||||
.col-lg-6.col-sm-6
|
||||
input.form-control#url_add(type='text', required='')
|
||||
.col-lg-4.col-sm-6
|
||||
select.js-example-basic-single
|
||||
option(value='pw') Personal web address
|
||||
option(value='cw') Company web address
|
||||
option(value='fb') Fabebook URL
|
||||
option(value='tw') Twitter URL
|
||||
.mt-0.mb-3.col-md-12
|
||||
label Personal
|
||||
.d-block
|
||||
label.me-3(for='edo-ani')
|
||||
input#edo-ani.radio_animated(type='radio', name='rdo-ani' checked='')
|
||||
span Male
|
||||
label(for='edo-ani1')
|
||||
input#edo-ani1.radio_animated(type='radio', name='rdo-ani')
|
||||
span Female
|
||||
.mt-0.mb-3.col-md-12
|
||||
.row
|
||||
.col-lg-2.col-sm-4
|
||||
select.form-control#birth_day
|
||||
option.f-w-600 Day
|
||||
option 01
|
||||
option 02
|
||||
option 03
|
||||
option 04
|
||||
option 05
|
||||
option 06
|
||||
option 07
|
||||
option 08
|
||||
option 09
|
||||
option 10
|
||||
option 11
|
||||
option 12
|
||||
option 13
|
||||
option 14
|
||||
option 15
|
||||
option 16
|
||||
option 17
|
||||
option 18
|
||||
option 19
|
||||
option 20
|
||||
option 21
|
||||
option 22
|
||||
option 23
|
||||
option 24
|
||||
option 25
|
||||
option 26
|
||||
option 27
|
||||
option 28
|
||||
option 29
|
||||
option 30
|
||||
option 31
|
||||
.col-lg-3.col-sm-4
|
||||
select.form-control#birth_month
|
||||
option.f-w-600 Month
|
||||
option January
|
||||
option February
|
||||
option March
|
||||
option April
|
||||
option May
|
||||
option June
|
||||
option July
|
||||
option August
|
||||
option September
|
||||
option October
|
||||
option November
|
||||
option December
|
||||
.col-lg-3.col-sm-4
|
||||
input.form-control#birth_year(type='text')
|
||||
.mt-0.mb-3.col-md-12
|
||||
|
||||
.row
|
||||
.col-sm-6
|
||||
label Personality
|
||||
input.form-control#personality(type='text', required='', autocomplete='off')
|
||||
.col-sm-6
|
||||
label Interest
|
||||
input.form-control#interest(type='text', required='', autocomplete='off')
|
||||
.mb-3.col-md-12
|
||||
label Home Address
|
||||
.row
|
||||
.col-12
|
||||
.form-group
|
||||
input.form-control(type='text', placeholder='Address')
|
||||
.col-sm-6
|
||||
.form-group
|
||||
input.form-control#city(type='text', placeholder='City')
|
||||
.col-sm-6
|
||||
.form-group
|
||||
input.form-control(type='text', placeholder='State')
|
||||
.col-sm-6
|
||||
div
|
||||
input.form-control(type='text', placeholder='Country')
|
||||
.col-sm-6
|
||||
div
|
||||
input.form-control(type='text', placeholder='Pin Code')
|
||||
a.ps-0.edit-information.f-w-600(href='javascript:void(0)') Edit more information
|
||||
button.btn.btn-secondary.update-contact(type='button') Save
|
||||
button.btn.btn-primary(type='button', data-bs-dismiss='modal') Cancel
|
||||
#pills-organization.fade.tab-pane(role='tabpanel', aria-labelledby='pills-organization')
|
||||
.card.mb-0
|
||||
.card-header.d-flex
|
||||
h5 Organization
|
||||
span.f-14.pull-right.mt-0 10 Contacts
|
||||
.card-body.p-0
|
||||
.row.list-persons
|
||||
.col-xl-4.xl-50.col-md-5.box-col-6
|
||||
#v-pills-tab1.nav.flex-column.nav-pills(role='tablist', aria-orientation='vertical')
|
||||
a#v-pills-iduser-tab.nav-link.active(data-bs-toggle='pill', href='#v-pills-iduser', role='tab', aria-controls='v-pills-iduser', aria-selected='true')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle(src='../assets/images/user/user.png' alt='')
|
||||
.media-body
|
||||
h6 Mark jecno
|
||||
p markjecno@gmail.com
|
||||
a#v-pills-iduser1-tab.nav-link(data-bs-toggle='pill', href='#v-pills-iduser1', role='tab', aria-controls='v-pills-iduser1', aria-selected='false')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle(src='../assets/images/user/3.jpg' alt='')
|
||||
.media-body
|
||||
h6 Jason Borne
|
||||
p jasonb@gmail.com
|
||||
a#v-pills-iduser2-tab.nav-link(data-bs-toggle='pill', href='#v-pills-iduser2', role='tab', aria-controls='v-pills-iduser2', aria-selected='false')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle(src='../assets/images/user/4.jpg' alt='')
|
||||
.media-body
|
||||
h6 Sarah Loren
|
||||
p barnes@gmail.com
|
||||
a#v-pills-iduser3-tab.nav-link(data-bs-toggle='pill', href='#v-pills-iduser3', role='tab', aria-controls='v-pills-iduser3', aria-selected='false')
|
||||
.media
|
||||
img.img-50.img-fluid.m-r-20.rounded-circle(src='../assets/images/user/10.jpg' alt='')
|
||||
.media-body
|
||||
h6 Andew Jon
|
||||
p andrewj@gmail.com
|
||||
.col-xl-8.xl-50.col-md-7.box-col-6
|
||||
#v-pills-tabContent1.tab-content
|
||||
#v-pills-iduser.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='v-pills-iduser-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_5(src='../assets/images/user/user.png' alt='')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_5 Mark
|
||||
span.last_name_5 jecno
|
||||
p.email_add_5 markjecno@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(5)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6 General
|
||||
p Email Address:
|
||||
span.font-primary.email_add_5 markjecno@gmail.com
|
||||
.gender
|
||||
h6 Personal
|
||||
p Gender:
|
||||
span Male
|
||||
#v-pills-iduser1.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-iduser1-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_6(src='../assets/images/user/3.jpg' alt='')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_6 Jason
|
||||
span.last_name_6 Borne
|
||||
p.email_add_6 jasonb@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(6)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6 General
|
||||
p Email Address:
|
||||
span.font-primary.email_add_6 jasonb@gmail.com
|
||||
.gender
|
||||
h6 Personal
|
||||
p Gender:
|
||||
span Male
|
||||
#v-pills-iduser2.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-iduser2-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_7(src='../assets/images/user/4.jpg' alt='')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_7 Sarah
|
||||
span.last_name_7 Loren
|
||||
p.email_add_7 barnes@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(7)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6 General
|
||||
p Email Address:
|
||||
span.font-primary.email_add_7 barnes@gmail.com
|
||||
.gender
|
||||
h6 Personal
|
||||
p Gender:
|
||||
span Female
|
||||
#v-pills-iduser3.tab-pane.fade(role='tabpanel', aria-labelledby='v-pills-iduser3-tab')
|
||||
.profile-mail
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle.update_img_8(src='../assets/images/user/10.jpg' alt='')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span.first_name_8 Andew
|
||||
span.last_name_8 Jon
|
||||
p.email_add_8 andrewj@gmail.com
|
||||
ul
|
||||
li
|
||||
a(href='javascript:void(0)', onclick='printContact(8)', data-bs-toggle='modal', data-bs-target='#printModal') Print
|
||||
.email-general
|
||||
h6 General
|
||||
p Email Address:
|
||||
span.font-primary.email_add_8 andrewj@gmail.com
|
||||
.gender
|
||||
h6 Personal
|
||||
p Gender:
|
||||
span Female
|
||||
#right-history
|
||||
.modal-header.p-l-20.p-r-20
|
||||
h6.modal-title.w-100 Contact History
|
||||
span.pull-right
|
||||
a.closehistory(href='javascript:void(0)')
|
||||
i.icofont.icofont-close
|
||||
.history-details
|
||||
.text-center
|
||||
i.icofont.icofont-ui-edit
|
||||
p Contact has not been modified yet.
|
||||
.media
|
||||
i.icofont.icofont-star.me-3
|
||||
.media-body.mt-0
|
||||
h6.mt-0 Contact Created
|
||||
p.mb-0 Contact is created via mail
|
||||
span.f-12 Sep 10, 2024 4:00
|
||||
#printModal.modal.fade.modal-bookmark(tabindex='-1', role='dialog', aria-hidden='true')
|
||||
.modal-dialog.modal-dialog-centered(role='document')
|
||||
.modal-content
|
||||
.modal-header
|
||||
h5.modal-title Print preview
|
||||
button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
|
||||
.modal-body.list-persons
|
||||
.profile-mail.pt-0#DivIdToPrint
|
||||
.media
|
||||
img.img-100.img-fluid.m-r-20.rounded-circle#updateimg(src='../assets/images/user/2.png' alt='')
|
||||
.media-body.mt-0
|
||||
h5
|
||||
span#printname Bucky
|
||||
span#printlast Barnes
|
||||
p#printmail barnes@gmail.com
|
||||
.email-general
|
||||
h6 General
|
||||
p Email Address:
|
||||
span.font-primary#mailadd barnes@gmail.com
|
||||
button.btn.btn-secondary#btnPrint(type='button', onclick='printDiv();') Print
|
||||
button.btn.btn-primary(type='button', data-bs-dismiss='modal') Cancel
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
38
public/assets/pug/pages/template/creat-password.pug
Normal file
38
public/assets/pug/pages/template/creat-password.pug
Normal file
@@ -0,0 +1,38 @@
|
||||
-var sweetalert2 = true ;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
section
|
||||
.container-fluid.p-0
|
||||
.row.m-0
|
||||
.col-12.p-0
|
||||
.login-card
|
||||
form.theme-form.login-form
|
||||
h4.mb-3 Create Your Password
|
||||
.form-group
|
||||
label New Password
|
||||
.input-group
|
||||
span(class="input-group-text")
|
||||
i.icon-lock
|
||||
input.form-control(type='password', name='login[password]', required='' placeholder="*********")
|
||||
.show-hide
|
||||
span.show
|
||||
.form-group
|
||||
label Password
|
||||
.input-group
|
||||
span(class="input-group-text")
|
||||
i.icon-lock
|
||||
input.form-control(type='password', name='login[password]', required='' placeholder="*********")
|
||||
.form-group
|
||||
.checkbox
|
||||
input#checkbox1(type='checkbox')
|
||||
label.text-muted(for='checkbox1') Remember password
|
||||
.form-group
|
||||
button.btn.btn-primary.btn-block(type='submit') Done
|
||||
p Don't have account?
|
||||
a.ps-2(href="sign-up.html") Create Account
|
||||
// page-wrapper end
|
||||
include ../../components/footer-files
|
||||
117
public/assets/pug/pages/template/creative-card.pug
Normal file
117
public/assets/pug/pages/template/creative-card.pug
Normal file
@@ -0,0 +1,117 @@
|
||||
- var theme_customizer = true;
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Creative Card
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Cards
|
||||
li.breadcrumb-item.active Creative Card
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-l-primary
|
||||
h5 Border left
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-r-secondary
|
||||
h5 Border right
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-t-success
|
||||
h5 Border top
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-b-info
|
||||
h5 Border bottom
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-l-warning
|
||||
h5 Border color state
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-l-danger
|
||||
h5 Border color state
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-l-light
|
||||
h5 Border color state
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-l-primary
|
||||
h5 Border color state
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-l-secondary.border-2
|
||||
h5 Border color state
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.b-l-primary.border-3
|
||||
h5 Border color state
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card.card-absolute
|
||||
.card-header.bg-primary
|
||||
h5.text-white Absolute Style
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card.card-absolute
|
||||
.card-header.bg-secondary
|
||||
h5.text-white Color state
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
1019
public/assets/pug/pages/template/dashboard-02.pug
Normal file
1019
public/assets/pug/pages/template/dashboard-02.pug
Normal file
File diff suppressed because it is too large
Load Diff
197
public/assets/pug/pages/template/datatable-AJAX.pug
Normal file
197
public/assets/pug/pages/template/datatable-AJAX.pug
Normal file
@@ -0,0 +1,197 @@
|
||||
- var datatable = true;
|
||||
- var page_datatable = true;
|
||||
- var theme_customizer = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Ajax DataTables
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Tables
|
||||
li.breadcrumb-item Data Tables
|
||||
li.breadcrumb-item.active AJAX
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
// Ajax data source array start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Ajax Data Source (Arrays)
|
||||
span
|
||||
| The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#ajax-data-array.display.datatables
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// Ajax data source array end
|
||||
// Ajax data source array start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Ajax data source (Objects)
|
||||
span
|
||||
| The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#ajax-data-object.display.datatables
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// Ajax data source array end
|
||||
// Ajax Nested object data start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Nested object data (objects)
|
||||
span
|
||||
| The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#ajax-data-nested-object.display.datatables
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// Ajax Nested object data end
|
||||
// Ajax Orthogonal data start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Orthogonal data
|
||||
span
|
||||
| In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example is:
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#orthogonal-data.display.datatables
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// Ajax Orthogonal data end
|
||||
// Ajax Generated content for a column start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Generated content for a column
|
||||
span In some tables you might wish to have some content generated automatically.
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#auto-generate-content.display.datatables
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// Ajax Generated content for a column end
|
||||
// Ajax Deferred rendering for speed start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Deferred rendering for speed
|
||||
span
|
||||
| The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit significantly from simply enabling this parameter.
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#render-datatable.display.datatables
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
3827
public/assets/pug/pages/template/datatable-API.pug
Normal file
3827
public/assets/pug/pages/template/datatable-API.pug
Normal file
File diff suppressed because it is too large
Load Diff
6109
public/assets/pug/pages/template/datatable-advance.pug
Normal file
6109
public/assets/pug/pages/template/datatable-advance.pug
Normal file
File diff suppressed because it is too large
Load Diff
6399
public/assets/pug/pages/template/datatable-basic-init.pug
Normal file
6399
public/assets/pug/pages/template/datatable-basic-init.pug
Normal file
File diff suppressed because it is too large
Load Diff
553
public/assets/pug/pages/template/datatable-data-source.pug
Normal file
553
public/assets/pug/pages/template/datatable-data-source.pug
Normal file
@@ -0,0 +1,553 @@
|
||||
- var datatable = true;
|
||||
- var page_datatable = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| DATA Source DataTables
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Tables
|
||||
li.breadcrumb-item Data Tables
|
||||
li.breadcrumb-item.active Data Sources
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
// HTML (DOM) sourced data Starts
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 HTML (DOM) sourced data
|
||||
span
|
||||
| The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it is to add searching, ordering and paging to your HTML table by simply running DataTables on it.
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#data-source-1.display(style='width:100%')
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tbody
|
||||
tr
|
||||
td Tiger Nixon
|
||||
td System Architect
|
||||
td Edinburgh
|
||||
td 61
|
||||
td 2011/04/25
|
||||
td $320,800
|
||||
tr
|
||||
td Garrett Winters
|
||||
td Accountant
|
||||
td Tokyo
|
||||
td 63
|
||||
td 2011/07/25
|
||||
td $170,750
|
||||
tr
|
||||
td Ashton Cox
|
||||
td Junior Technical Author
|
||||
td San Francisco
|
||||
td 66
|
||||
td 2009/01/12
|
||||
td $86,000
|
||||
tr
|
||||
td Cedric Kelly
|
||||
td Senior Javascript Developer
|
||||
td Edinburgh
|
||||
td 22
|
||||
td 2012/03/29
|
||||
td $433,060
|
||||
tr
|
||||
td Airi Satou
|
||||
td Accountant
|
||||
td Tokyo
|
||||
td 33
|
||||
td 2008/11/28
|
||||
td $162,700
|
||||
tr
|
||||
td Brielle Williamson
|
||||
td Integration Specialist
|
||||
td New York
|
||||
td 61
|
||||
td 2012/12/02
|
||||
td $372,000
|
||||
tr
|
||||
td Herrod Chandler
|
||||
td Sales Assistant
|
||||
td San Francisco
|
||||
td 59
|
||||
td 2012/08/06
|
||||
td $137,500
|
||||
tr
|
||||
td Rhona Davidson
|
||||
td Integration Specialist
|
||||
td Tokyo
|
||||
td 55
|
||||
td 2010/10/14
|
||||
td $327,900
|
||||
tr
|
||||
td Colleen Hurst
|
||||
td Javascript Developer
|
||||
td San Francisco
|
||||
td 39
|
||||
td 2009/09/15
|
||||
td $205,500
|
||||
tr
|
||||
td Sonya Frost
|
||||
td Software Engineer
|
||||
td Edinburgh
|
||||
td 23
|
||||
td 2008/12/13
|
||||
td $103,600
|
||||
tr
|
||||
td Jena Gaines
|
||||
td Office Manager
|
||||
td London
|
||||
td 30
|
||||
td 2008/12/19
|
||||
td $90,560
|
||||
tr
|
||||
td Quinn Flynn
|
||||
td Support Lead
|
||||
td Edinburgh
|
||||
td 22
|
||||
td 2013/03/03
|
||||
td $342,000
|
||||
tr
|
||||
td Charde Marshall
|
||||
td Regional Director
|
||||
td San Francisco
|
||||
td 36
|
||||
td 2008/10/16
|
||||
td $470,600
|
||||
tr
|
||||
td Haley Kennedy
|
||||
td Senior Marketing Designer
|
||||
td London
|
||||
td 43
|
||||
td 2012/12/18
|
||||
td $313,500
|
||||
tr
|
||||
td Tatyana Fitzpatrick
|
||||
td Regional Director
|
||||
td London
|
||||
td 19
|
||||
td 2010/03/17
|
||||
td $385,750
|
||||
tr
|
||||
td Michael Silva
|
||||
td Marketing Designer
|
||||
td London
|
||||
td 66
|
||||
td 2012/11/27
|
||||
td $198,500
|
||||
tr
|
||||
td Paul Byrd
|
||||
td Chief Financial Officer (CFO)
|
||||
td New York
|
||||
td 64
|
||||
td 2010/06/09
|
||||
td $725,000
|
||||
tr
|
||||
td Gloria Little
|
||||
td Systems Administrator
|
||||
td New York
|
||||
td 59
|
||||
td 2009/04/10
|
||||
td $237,500
|
||||
tr
|
||||
td Bradley Greer
|
||||
td Software Engineer
|
||||
td London
|
||||
td 41
|
||||
td 2012/10/13
|
||||
td $132,000
|
||||
tr
|
||||
td Dai Rios
|
||||
td Personnel Lead
|
||||
td Edinburgh
|
||||
td 35
|
||||
td 2012/09/26
|
||||
td $217,500
|
||||
tr
|
||||
td Jenette Caldwell
|
||||
td Development Lead
|
||||
td New York
|
||||
td 30
|
||||
td 2011/09/03
|
||||
td $345,000
|
||||
tr
|
||||
td Yuri Berry
|
||||
td Chief Marketing Officer (CMO)
|
||||
td New York
|
||||
td 40
|
||||
td 2009/06/25
|
||||
td $675,000
|
||||
tr
|
||||
td Caesar Vance
|
||||
td Pre-Sales Support
|
||||
td New York
|
||||
td 21
|
||||
td 2011/12/12
|
||||
td $106,450
|
||||
tr
|
||||
td Doris Wilder
|
||||
td Sales Assistant
|
||||
td Sidney
|
||||
td 23
|
||||
td 2010/09/20
|
||||
td $85,600
|
||||
tr
|
||||
td Angelica Ramos
|
||||
td Chief Executive Officer (CEO)
|
||||
td London
|
||||
td 47
|
||||
td 2009/10/09
|
||||
td $1,200,000
|
||||
tr
|
||||
td Gavin Joyce
|
||||
td Developer
|
||||
td Edinburgh
|
||||
td 42
|
||||
td 2010/12/22
|
||||
td $92,575
|
||||
tr
|
||||
td Jennifer Chang
|
||||
td Regional Director
|
||||
td Singapore
|
||||
td 28
|
||||
td 2010/11/14
|
||||
td $357,650
|
||||
tr
|
||||
td Brenden Wagner
|
||||
td Software Engineer
|
||||
td San Francisco
|
||||
td 28
|
||||
td 2011/06/07
|
||||
td $206,850
|
||||
tr
|
||||
td Fiona Green
|
||||
td Chief Operating Officer (COO)
|
||||
td San Francisco
|
||||
td 48
|
||||
td 2010/03/11
|
||||
td $850,000
|
||||
tr
|
||||
td Shou Itou
|
||||
td Regional Marketing
|
||||
td Tokyo
|
||||
td 20
|
||||
td 2011/08/14
|
||||
td $163,000
|
||||
tr
|
||||
td Michelle House
|
||||
td Integration Specialist
|
||||
td Sidney
|
||||
td 37
|
||||
td 2011/06/02
|
||||
td $95,400
|
||||
tr
|
||||
td Suki Burks
|
||||
td Developer
|
||||
td London
|
||||
td 53
|
||||
td 2009/10/22
|
||||
td $114,500
|
||||
tr
|
||||
td Prescott Bartlett
|
||||
td Technical Author
|
||||
td London
|
||||
td 27
|
||||
td 2011/05/07
|
||||
td $145,000
|
||||
tr
|
||||
td Gavin Cortez
|
||||
td Team Leader
|
||||
td San Francisco
|
||||
td 22
|
||||
td 2008/10/26
|
||||
td $235,500
|
||||
tr
|
||||
td Martena Mccray
|
||||
td Post-Sales support
|
||||
td Edinburgh
|
||||
td 46
|
||||
td 2011/03/09
|
||||
td $324,050
|
||||
tr
|
||||
td Unity Butler
|
||||
td Marketing Designer
|
||||
td San Francisco
|
||||
td 47
|
||||
td 2009/12/09
|
||||
td $85,675
|
||||
tr
|
||||
td Howard Hatfield
|
||||
td Office Manager
|
||||
td San Francisco
|
||||
td 51
|
||||
td 2008/12/16
|
||||
td $164,500
|
||||
tr
|
||||
td Hope Fuentes
|
||||
td Secretary
|
||||
td San Francisco
|
||||
td 41
|
||||
td 2010/02/12
|
||||
td $109,850
|
||||
tr
|
||||
td Vivian Harrell
|
||||
td Financial Controller
|
||||
td San Francisco
|
||||
td 62
|
||||
td 2009/02/14
|
||||
td $452,500
|
||||
tr
|
||||
td Timothy Mooney
|
||||
td Office Manager
|
||||
td London
|
||||
td 37
|
||||
td 2008/12/11
|
||||
td $136,200
|
||||
tr
|
||||
td Jackson Bradshaw
|
||||
td Director
|
||||
td New York
|
||||
td 65
|
||||
td 2008/09/26
|
||||
td $645,750
|
||||
tr
|
||||
td Olivia Liang
|
||||
td Support Engineer
|
||||
td Singapore
|
||||
td 64
|
||||
td 2011/02/03
|
||||
td $234,500
|
||||
tr
|
||||
td Bruno Nash
|
||||
td Software Engineer
|
||||
td London
|
||||
td 38
|
||||
td 2011/05/03
|
||||
td $163,500
|
||||
tr
|
||||
td Sakura Yamamoto
|
||||
td Support Engineer
|
||||
td Tokyo
|
||||
td 37
|
||||
td 2009/08/19
|
||||
td $139,575
|
||||
tr
|
||||
td Thor Walton
|
||||
td Developer
|
||||
td New York
|
||||
td 61
|
||||
td 2013/08/11
|
||||
td $98,540
|
||||
tr
|
||||
td Finn Camacho
|
||||
td Support Engineer
|
||||
td San Francisco
|
||||
td 47
|
||||
td 2009/07/07
|
||||
td $87,500
|
||||
tr
|
||||
td Serge Baldwin
|
||||
td Data Coordinator
|
||||
td Singapore
|
||||
td 64
|
||||
td 2012/04/09
|
||||
td $138,575
|
||||
tr
|
||||
td Zenaida Frank
|
||||
td Software Engineer
|
||||
td New York
|
||||
td 63
|
||||
td 2010/01/04
|
||||
td $125,250
|
||||
tr
|
||||
td Zorita Serrano
|
||||
td Software Engineer
|
||||
td San Francisco
|
||||
td 56
|
||||
td 2012/06/01
|
||||
td $115,000
|
||||
tr
|
||||
td Jennifer Acosta
|
||||
td Junior Javascript Developer
|
||||
td Edinburgh
|
||||
td 43
|
||||
td 2013/02/01
|
||||
td $75,650
|
||||
tr
|
||||
td Cara Stevens
|
||||
td Sales Assistant
|
||||
td New York
|
||||
td 46
|
||||
td 2011/12/06
|
||||
td $145,600
|
||||
tr
|
||||
td Hermione Butler
|
||||
td Regional Director
|
||||
td London
|
||||
td 47
|
||||
td 2011/03/21
|
||||
td $356,250
|
||||
tr
|
||||
td Lael Greer
|
||||
td Systems Administrator
|
||||
td London
|
||||
td 21
|
||||
td 2009/02/27
|
||||
td $103,500
|
||||
tr
|
||||
td Jonas Alexander
|
||||
td Developer
|
||||
td San Francisco
|
||||
td 30
|
||||
td 2010/07/14
|
||||
td $86,500
|
||||
tr
|
||||
td Shad Decker
|
||||
td Regional Director
|
||||
td Edinburgh
|
||||
td 51
|
||||
td 2008/11/13
|
||||
td $183,000
|
||||
tr
|
||||
td Michael Bruce
|
||||
td Javascript Developer
|
||||
td Singapore
|
||||
td 29
|
||||
td 2011/06/27
|
||||
td $183,000
|
||||
tr
|
||||
td Donna Snider
|
||||
td Customer Support
|
||||
td New York
|
||||
td 27
|
||||
td 2011/01/25
|
||||
td $112,000
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// HTML (DOM) sourced data Ends
|
||||
// Ajax sourced data Starts
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Ajax sourced data
|
||||
span
|
||||
| DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting the
|
||||
code ajax:option
|
||||
| option to the address of the JSON data source.
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#data-source-2.display(style='width:100%')
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Extn.
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Extn.
|
||||
th Start date
|
||||
th Salary
|
||||
// Ajax sourced data Ends
|
||||
// Javascript sourced data Starts
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Javascript sourced data
|
||||
span
|
||||
| At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document.
|
||||
| This is achieved using the
|
||||
code.option(title='DataTables initialisation option') data
|
||||
| option in the initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the
|
||||
code.option(title='DataTables initialisation option') columns.data
|
||||
| option).
|
||||
span
|
||||
| A
|
||||
code.tag(title='HTML tag') table
|
||||
| must be available on the page for DataTables to use. This examples shows an empty
|
||||
code.tag(title='HTML tag') table
|
||||
| element being initialising as a DataTable with a set of data from a Javascript array. The columns in the table are dynamically created
|
||||
| based on the
|
||||
code.option(title='DataTables initialisation option') columns.title
|
||||
| configuration option.
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#data-source-3.display.w-100
|
||||
// Javascript sourced data Ends
|
||||
// Server-side processing Starts
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Server-side processing
|
||||
span
|
||||
| There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. With server-side processing enabled, all paging, searching, ordering actions that DataTables performs are handed off to a server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw of the table will result in a new Ajax request being made to get the required data.
|
||||
span
|
||||
| Server-side processing is enabled by setting the
|
||||
code.option(title='DataTables initialisation option') serverSide:option
|
||||
| option to
|
||||
code true
|
||||
| and providing an Ajax data source through the
|
||||
code.option(title='DataTables initialisation option') ajax:option
|
||||
| option.
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#data-source-4.display(style='width:100%')
|
||||
thead
|
||||
tr
|
||||
th First name
|
||||
th Last name
|
||||
th Position
|
||||
th Office
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th First name
|
||||
th Last name
|
||||
th Position
|
||||
th Office
|
||||
th Start date
|
||||
th Salary
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
1737
public/assets/pug/pages/template/datatable-ext-autofill.pug
Normal file
1737
public/assets/pug/pages/template/datatable-ext-autofill.pug
Normal file
File diff suppressed because it is too large
Load Diff
2165
public/assets/pug/pages/template/datatable-ext-basic-button.pug
Normal file
2165
public/assets/pug/pages/template/datatable-ext-basic-button.pug
Normal file
File diff suppressed because it is too large
Load Diff
1313
public/assets/pug/pages/template/datatable-ext-col-reorder.pug
Normal file
1313
public/assets/pug/pages/template/datatable-ext-col-reorder.pug
Normal file
File diff suppressed because it is too large
Load Diff
888
public/assets/pug/pages/template/datatable-ext-fixed-header.pug
Normal file
888
public/assets/pug/pages/template/datatable-ext-fixed-header.pug
Normal file
@@ -0,0 +1,888 @@
|
||||
- var datatable = true;
|
||||
- var datatable_extension = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Fixed Columns
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Tables
|
||||
li.breadcrumb-item Extension Data Tables
|
||||
li.breadcrumb-item.active Fixed Header
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Left and right fixed columns
|
||||
span
|
||||
| The FixedHeader extension will ensure that your column titles will scroll with the page, showing at the top of the table at all times. Note also that the column titles remain clickable to perform ordering on the table. FixedHeader is initialised by using the fixedHeader option. This can be set to true to use the default options or given as an object for additional options. In this example we just use the defaults.
|
||||
.card-body
|
||||
.dt-ext.table-responsive
|
||||
table#basic-fixed-header.display
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tbody
|
||||
tr
|
||||
td Tiger Nixon
|
||||
td System Architect
|
||||
td Edinburgh
|
||||
td 61
|
||||
td 2011/04/25
|
||||
td $320,800
|
||||
tr
|
||||
td Garrett Winters
|
||||
td Accountant
|
||||
td Tokyo
|
||||
td 63
|
||||
td 2011/07/25
|
||||
td $170,750
|
||||
tr
|
||||
td Ashton Cox
|
||||
td Junior Technical Author
|
||||
td San Francisco
|
||||
td 66
|
||||
td 2009/01/12
|
||||
td $86,000
|
||||
tr
|
||||
td Cedric Kelly
|
||||
td Senior Javascript Developer
|
||||
td Edinburgh
|
||||
td 22
|
||||
td 2012/03/29
|
||||
td $433,060
|
||||
tr
|
||||
td Airi Satou
|
||||
td Accountant
|
||||
td Tokyo
|
||||
td 33
|
||||
td 2008/11/28
|
||||
td $162,700
|
||||
tr
|
||||
td Brielle Williamson
|
||||
td Integration Specialist
|
||||
td New York
|
||||
td 61
|
||||
td 2012/12/02
|
||||
td $372,000
|
||||
tr
|
||||
td Herrod Chandler
|
||||
td Sales Assistant
|
||||
td San Francisco
|
||||
td 59
|
||||
td 2012/08/06
|
||||
td $137,500
|
||||
tr
|
||||
td Rhona Davidson
|
||||
td Integration Specialist
|
||||
td Tokyo
|
||||
td 55
|
||||
td 2010/10/14
|
||||
td $327,900
|
||||
tr
|
||||
td Colleen Hurst
|
||||
td Javascript Developer
|
||||
td San Francisco
|
||||
td 39
|
||||
td 2009/09/15
|
||||
td $205,500
|
||||
tr
|
||||
td Sonya Frost
|
||||
td Software Engineer
|
||||
td Edinburgh
|
||||
td 23
|
||||
td 2008/12/13
|
||||
td $103,600
|
||||
tr
|
||||
td Jena Gaines
|
||||
td Office Manager
|
||||
td London
|
||||
td 30
|
||||
td 2008/12/19
|
||||
td $90,560
|
||||
tr
|
||||
td Quinn Flynn
|
||||
td Support Lead
|
||||
td Edinburgh
|
||||
td 22
|
||||
td 2013/03/03
|
||||
td $342,000
|
||||
tr
|
||||
td Charde Marshall
|
||||
td Regional Director
|
||||
td San Francisco
|
||||
td 36
|
||||
td 2008/10/16
|
||||
td $470,600
|
||||
tr
|
||||
td Haley Kennedy
|
||||
td Senior Marketing Designer
|
||||
td London
|
||||
td 43
|
||||
td 2012/12/18
|
||||
td $313,500
|
||||
tr
|
||||
td Tatyana Fitzpatrick
|
||||
td Regional Director
|
||||
td London
|
||||
td 19
|
||||
td 2010/03/17
|
||||
td $385,750
|
||||
tr
|
||||
td Michael Silva
|
||||
td Marketing Designer
|
||||
td London
|
||||
td 66
|
||||
td 2012/11/27
|
||||
td $198,500
|
||||
tr
|
||||
td Paul Byrd
|
||||
td Chief Financial Officer (CFO)
|
||||
td New York
|
||||
td 64
|
||||
td 2010/06/09
|
||||
td $725,000
|
||||
tr
|
||||
td Gloria Little
|
||||
td Systems Administrator
|
||||
td New York
|
||||
td 59
|
||||
td 2009/04/10
|
||||
td $237,500
|
||||
tr
|
||||
td Bradley Greer
|
||||
td Software Engineer
|
||||
td London
|
||||
td 41
|
||||
td 2012/10/13
|
||||
td $132,000
|
||||
tr
|
||||
td Dai Rios
|
||||
td Personnel Lead
|
||||
td Edinburgh
|
||||
td 35
|
||||
td 2012/09/26
|
||||
td $217,500
|
||||
tr
|
||||
td Jenette Caldwell
|
||||
td Development Lead
|
||||
td New York
|
||||
td 30
|
||||
td 2011/09/03
|
||||
td $345,000
|
||||
tr
|
||||
td Yuri Berry
|
||||
td Chief Marketing Officer (CMO)
|
||||
td New York
|
||||
td 40
|
||||
td 2009/06/25
|
||||
td $675,000
|
||||
tr
|
||||
td Caesar Vance
|
||||
td Pre-Sales Support
|
||||
td New York
|
||||
td 21
|
||||
td 2011/12/12
|
||||
td $106,450
|
||||
tr
|
||||
td Doris Wilder
|
||||
td Sales Assistant
|
||||
td Sidney
|
||||
td 23
|
||||
td 2010/09/20
|
||||
td $85,600
|
||||
tr
|
||||
td Angelica Ramos
|
||||
td Chief Executive Officer (CEO)
|
||||
td London
|
||||
td 47
|
||||
td 2009/10/09
|
||||
td $1,200,000
|
||||
tr
|
||||
td Gavin Joyce
|
||||
td Developer
|
||||
td Edinburgh
|
||||
td 42
|
||||
td 2010/12/22
|
||||
td $92,575
|
||||
tr
|
||||
td Jennifer Chang
|
||||
td Regional Director
|
||||
td Singapore
|
||||
td 28
|
||||
td 2010/11/14
|
||||
td $357,650
|
||||
tr
|
||||
td Brenden Wagner
|
||||
td Software Engineer
|
||||
td San Francisco
|
||||
td 28
|
||||
td 2011/06/07
|
||||
td $206,850
|
||||
tr
|
||||
td Fiona Green
|
||||
td Chief Operating Officer (COO)
|
||||
td San Francisco
|
||||
td 48
|
||||
td 2010/03/11
|
||||
td $850,000
|
||||
tr
|
||||
td Shou Itou
|
||||
td Regional Marketing
|
||||
td Tokyo
|
||||
td 20
|
||||
td 2011/08/14
|
||||
td $163,000
|
||||
tr
|
||||
td Michelle House
|
||||
td Integration Specialist
|
||||
td Sidney
|
||||
td 37
|
||||
td 2011/06/02
|
||||
td $95,400
|
||||
tr
|
||||
td Suki Burks
|
||||
td Developer
|
||||
td London
|
||||
td 53
|
||||
td 2009/10/22
|
||||
td $114,500
|
||||
tr
|
||||
td Prescott Bartlett
|
||||
td Technical Author
|
||||
td London
|
||||
td 27
|
||||
td 2011/05/07
|
||||
td $145,000
|
||||
tr
|
||||
td Gavin Cortez
|
||||
td Team Leader
|
||||
td San Francisco
|
||||
td 22
|
||||
td 2008/10/26
|
||||
td $235,500
|
||||
tr
|
||||
td Martena Mccray
|
||||
td Post-Sales support
|
||||
td Edinburgh
|
||||
td 46
|
||||
td 2011/03/09
|
||||
td $324,050
|
||||
tr
|
||||
td Unity Butler
|
||||
td Marketing Designer
|
||||
td San Francisco
|
||||
td 47
|
||||
td 2009/12/09
|
||||
td $85,675
|
||||
tr
|
||||
td Howard Hatfield
|
||||
td Office Manager
|
||||
td San Francisco
|
||||
td 51
|
||||
td 2008/12/16
|
||||
td $164,500
|
||||
tr
|
||||
td Hope Fuentes
|
||||
td Secretary
|
||||
td San Francisco
|
||||
td 41
|
||||
td 2010/02/12
|
||||
td $109,850
|
||||
tr
|
||||
td Vivian Harrell
|
||||
td Financial Controller
|
||||
td San Francisco
|
||||
td 62
|
||||
td 2009/02/14
|
||||
td $452,500
|
||||
tr
|
||||
td Timothy Mooney
|
||||
td Office Manager
|
||||
td London
|
||||
td 37
|
||||
td 2008/12/11
|
||||
td $136,200
|
||||
tr
|
||||
td Jackson Bradshaw
|
||||
td Director
|
||||
td New York
|
||||
td 65
|
||||
td 2008/09/26
|
||||
td $645,750
|
||||
tr
|
||||
td Olivia Liang
|
||||
td Support Engineer
|
||||
td Singapore
|
||||
td 64
|
||||
td 2011/02/03
|
||||
td $234,500
|
||||
tr
|
||||
td Bruno Nash
|
||||
td Software Engineer
|
||||
td London
|
||||
td 38
|
||||
td 2011/05/03
|
||||
td $163,500
|
||||
tr
|
||||
td Sakura Yamamoto
|
||||
td Support Engineer
|
||||
td Tokyo
|
||||
td 37
|
||||
td 2009/08/19
|
||||
td $139,575
|
||||
tr
|
||||
td Thor Walton
|
||||
td Developer
|
||||
td New York
|
||||
td 61
|
||||
td 2013/08/11
|
||||
td $98,540
|
||||
tr
|
||||
td Finn Camacho
|
||||
td Support Engineer
|
||||
td San Francisco
|
||||
td 47
|
||||
td 2009/07/07
|
||||
td $87,500
|
||||
tr
|
||||
td Serge Baldwin
|
||||
td Data Coordinator
|
||||
td Singapore
|
||||
td 64
|
||||
td 2012/04/09
|
||||
td $138,575
|
||||
tr
|
||||
td Zenaida Frank
|
||||
td Software Engineer
|
||||
td New York
|
||||
td 63
|
||||
td 2010/01/04
|
||||
td $125,250
|
||||
tr
|
||||
td Zorita Serrano
|
||||
td Software Engineer
|
||||
td San Francisco
|
||||
td 56
|
||||
td 2012/06/01
|
||||
td $115,000
|
||||
tr
|
||||
td Jennifer Acosta
|
||||
td Junior Javascript Developer
|
||||
td Edinburgh
|
||||
td 43
|
||||
td 2013/02/01
|
||||
td $75,650
|
||||
tr
|
||||
td Cara Stevens
|
||||
td Sales Assistant
|
||||
td New York
|
||||
td 46
|
||||
td 2011/12/06
|
||||
td $145,600
|
||||
tr
|
||||
td Hermione Butler
|
||||
td Regional Director
|
||||
td London
|
||||
td 47
|
||||
td 2011/03/21
|
||||
td $356,250
|
||||
tr
|
||||
td Lael Greer
|
||||
td Systems Administrator
|
||||
td London
|
||||
td 21
|
||||
td 2009/02/27
|
||||
td $103,500
|
||||
tr
|
||||
td Jonas Alexander
|
||||
td Developer
|
||||
td San Francisco
|
||||
td 30
|
||||
td 2010/07/14
|
||||
td $86,500
|
||||
tr
|
||||
td Shad Decker
|
||||
td Regional Director
|
||||
td Edinburgh
|
||||
td 51
|
||||
td 2008/11/13
|
||||
td $183,000
|
||||
tr
|
||||
td Michael Bruce
|
||||
td Javascript Developer
|
||||
td Singapore
|
||||
td 29
|
||||
td 2011/06/27
|
||||
td $183,000
|
||||
tr
|
||||
td Donna Snider
|
||||
td Customer Support
|
||||
td New York
|
||||
td 27
|
||||
td 2011/01/25
|
||||
td $112,000
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Header and Footer fixed
|
||||
span
|
||||
| When displaying tables with a particularly large amount of data shown on each page, it can be useful to have the table's header and footer fixed to the top or bottom of the scrolling window FixedHeader provides the ability to fix in place both. These are controlled by the options fixedHeader.header and fixedHeader.footer. Either can be optionally enabled, or as is the case in this example, both enabled.
|
||||
.card-body
|
||||
.dt-ext.table-responsive
|
||||
table#fixed-header-footer.display
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tbody
|
||||
tr
|
||||
td Tiger Nixon
|
||||
td System Architect
|
||||
td Edinburgh
|
||||
td 61
|
||||
td 2011/04/25
|
||||
td $320,800
|
||||
tr
|
||||
td Garrett Winters
|
||||
td Accountant
|
||||
td Tokyo
|
||||
td 63
|
||||
td 2011/07/25
|
||||
td $170,750
|
||||
tr
|
||||
td Ashton Cox
|
||||
td Junior Technical Author
|
||||
td San Francisco
|
||||
td 66
|
||||
td 2009/01/12
|
||||
td $86,000
|
||||
tr
|
||||
td Cedric Kelly
|
||||
td Senior Javascript Developer
|
||||
td Edinburgh
|
||||
td 22
|
||||
td 2012/03/29
|
||||
td $433,060
|
||||
tr
|
||||
td Airi Satou
|
||||
td Accountant
|
||||
td Tokyo
|
||||
td 33
|
||||
td 2008/11/28
|
||||
td $162,700
|
||||
tr
|
||||
td Brielle Williamson
|
||||
td Integration Specialist
|
||||
td New York
|
||||
td 61
|
||||
td 2012/12/02
|
||||
td $372,000
|
||||
tr
|
||||
td Herrod Chandler
|
||||
td Sales Assistant
|
||||
td San Francisco
|
||||
td 59
|
||||
td 2012/08/06
|
||||
td $137,500
|
||||
tr
|
||||
td Rhona Davidson
|
||||
td Integration Specialist
|
||||
td Tokyo
|
||||
td 55
|
||||
td 2010/10/14
|
||||
td $327,900
|
||||
tr
|
||||
td Colleen Hurst
|
||||
td Javascript Developer
|
||||
td San Francisco
|
||||
td 39
|
||||
td 2009/09/15
|
||||
td $205,500
|
||||
tr
|
||||
td Sonya Frost
|
||||
td Software Engineer
|
||||
td Edinburgh
|
||||
td 23
|
||||
td 2008/12/13
|
||||
td $103,600
|
||||
tr
|
||||
td Jena Gaines
|
||||
td Office Manager
|
||||
td London
|
||||
td 30
|
||||
td 2008/12/19
|
||||
td $90,560
|
||||
tr
|
||||
td Quinn Flynn
|
||||
td Support Lead
|
||||
td Edinburgh
|
||||
td 22
|
||||
td 2013/03/03
|
||||
td $342,000
|
||||
tr
|
||||
td Charde Marshall
|
||||
td Regional Director
|
||||
td San Francisco
|
||||
td 36
|
||||
td 2008/10/16
|
||||
td $470,600
|
||||
tr
|
||||
td Haley Kennedy
|
||||
td Senior Marketing Designer
|
||||
td London
|
||||
td 43
|
||||
td 2012/12/18
|
||||
td $313,500
|
||||
tr
|
||||
td Tatyana Fitzpatrick
|
||||
td Regional Director
|
||||
td London
|
||||
td 19
|
||||
td 2010/03/17
|
||||
td $385,750
|
||||
tr
|
||||
td Michael Silva
|
||||
td Marketing Designer
|
||||
td London
|
||||
td 66
|
||||
td 2012/11/27
|
||||
td $198,500
|
||||
tr
|
||||
td Paul Byrd
|
||||
td Chief Financial Officer (CFO)
|
||||
td New York
|
||||
td 64
|
||||
td 2010/06/09
|
||||
td $725,000
|
||||
tr
|
||||
td Gloria Little
|
||||
td Systems Administrator
|
||||
td New York
|
||||
td 59
|
||||
td 2009/04/10
|
||||
td $237,500
|
||||
tr
|
||||
td Bradley Greer
|
||||
td Software Engineer
|
||||
td London
|
||||
td 41
|
||||
td 2012/10/13
|
||||
td $132,000
|
||||
tr
|
||||
td Dai Rios
|
||||
td Personnel Lead
|
||||
td Edinburgh
|
||||
td 35
|
||||
td 2012/09/26
|
||||
td $217,500
|
||||
tr
|
||||
td Jenette Caldwell
|
||||
td Development Lead
|
||||
td New York
|
||||
td 30
|
||||
td 2011/09/03
|
||||
td $345,000
|
||||
tr
|
||||
td Yuri Berry
|
||||
td Chief Marketing Officer (CMO)
|
||||
td New York
|
||||
td 40
|
||||
td 2009/06/25
|
||||
td $675,000
|
||||
tr
|
||||
td Caesar Vance
|
||||
td Pre-Sales Support
|
||||
td New York
|
||||
td 21
|
||||
td 2011/12/12
|
||||
td $106,450
|
||||
tr
|
||||
td Doris Wilder
|
||||
td Sales Assistant
|
||||
td Sidney
|
||||
td 23
|
||||
td 2010/09/20
|
||||
td $85,600
|
||||
tr
|
||||
td Angelica Ramos
|
||||
td Chief Executive Officer (CEO)
|
||||
td London
|
||||
td 47
|
||||
td 2009/10/09
|
||||
td $1,200,000
|
||||
tr
|
||||
td Gavin Joyce
|
||||
td Developer
|
||||
td Edinburgh
|
||||
td 42
|
||||
td 2010/12/22
|
||||
td $92,575
|
||||
tr
|
||||
td Jennifer Chang
|
||||
td Regional Director
|
||||
td Singapore
|
||||
td 28
|
||||
td 2010/11/14
|
||||
td $357,650
|
||||
tr
|
||||
td Brenden Wagner
|
||||
td Software Engineer
|
||||
td San Francisco
|
||||
td 28
|
||||
td 2011/06/07
|
||||
td $206,850
|
||||
tr
|
||||
td Fiona Green
|
||||
td Chief Operating Officer (COO)
|
||||
td San Francisco
|
||||
td 48
|
||||
td 2010/03/11
|
||||
td $850,000
|
||||
tr
|
||||
td Shou Itou
|
||||
td Regional Marketing
|
||||
td Tokyo
|
||||
td 20
|
||||
td 2011/08/14
|
||||
td $163,000
|
||||
tr
|
||||
td Michelle House
|
||||
td Integration Specialist
|
||||
td Sidney
|
||||
td 37
|
||||
td 2011/06/02
|
||||
td $95,400
|
||||
tr
|
||||
td Suki Burks
|
||||
td Developer
|
||||
td London
|
||||
td 53
|
||||
td 2009/10/22
|
||||
td $114,500
|
||||
tr
|
||||
td Prescott Bartlett
|
||||
td Technical Author
|
||||
td London
|
||||
td 27
|
||||
td 2011/05/07
|
||||
td $145,000
|
||||
tr
|
||||
td Gavin Cortez
|
||||
td Team Leader
|
||||
td San Francisco
|
||||
td 22
|
||||
td 2008/10/26
|
||||
td $235,500
|
||||
tr
|
||||
td Martena Mccray
|
||||
td Post-Sales support
|
||||
td Edinburgh
|
||||
td 46
|
||||
td 2011/03/09
|
||||
td $324,050
|
||||
tr
|
||||
td Unity Butler
|
||||
td Marketing Designer
|
||||
td San Francisco
|
||||
td 47
|
||||
td 2009/12/09
|
||||
td $85,675
|
||||
tr
|
||||
td Howard Hatfield
|
||||
td Office Manager
|
||||
td San Francisco
|
||||
td 51
|
||||
td 2008/12/16
|
||||
td $164,500
|
||||
tr
|
||||
td Hope Fuentes
|
||||
td Secretary
|
||||
td San Francisco
|
||||
td 41
|
||||
td 2010/02/12
|
||||
td $109,850
|
||||
tr
|
||||
td Vivian Harrell
|
||||
td Financial Controller
|
||||
td San Francisco
|
||||
td 62
|
||||
td 2009/02/14
|
||||
td $452,500
|
||||
tr
|
||||
td Timothy Mooney
|
||||
td Office Manager
|
||||
td London
|
||||
td 37
|
||||
td 2008/12/11
|
||||
td $136,200
|
||||
tr
|
||||
td Jackson Bradshaw
|
||||
td Director
|
||||
td New York
|
||||
td 65
|
||||
td 2008/09/26
|
||||
td $645,750
|
||||
tr
|
||||
td Olivia Liang
|
||||
td Support Engineer
|
||||
td Singapore
|
||||
td 64
|
||||
td 2011/02/03
|
||||
td $234,500
|
||||
tr
|
||||
td Bruno Nash
|
||||
td Software Engineer
|
||||
td London
|
||||
td 38
|
||||
td 2011/05/03
|
||||
td $163,500
|
||||
tr
|
||||
td Sakura Yamamoto
|
||||
td Support Engineer
|
||||
td Tokyo
|
||||
td 37
|
||||
td 2009/08/19
|
||||
td $139,575
|
||||
tr
|
||||
td Thor Walton
|
||||
td Developer
|
||||
td New York
|
||||
td 61
|
||||
td 2013/08/11
|
||||
td $98,540
|
||||
tr
|
||||
td Finn Camacho
|
||||
td Support Engineer
|
||||
td San Francisco
|
||||
td 47
|
||||
td 2009/07/07
|
||||
td $87,500
|
||||
tr
|
||||
td Serge Baldwin
|
||||
td Data Coordinator
|
||||
td Singapore
|
||||
td 64
|
||||
td 2012/04/09
|
||||
td $138,575
|
||||
tr
|
||||
td Zenaida Frank
|
||||
td Software Engineer
|
||||
td New York
|
||||
td 63
|
||||
td 2010/01/04
|
||||
td $125,250
|
||||
tr
|
||||
td Zorita Serrano
|
||||
td Software Engineer
|
||||
td San Francisco
|
||||
td 56
|
||||
td 2012/06/01
|
||||
td $115,000
|
||||
tr
|
||||
td Jennifer Acosta
|
||||
td Junior Javascript Developer
|
||||
td Edinburgh
|
||||
td 43
|
||||
td 2013/02/01
|
||||
td $75,650
|
||||
tr
|
||||
td Cara Stevens
|
||||
td Sales Assistant
|
||||
td New York
|
||||
td 46
|
||||
td 2011/12/06
|
||||
td $145,600
|
||||
tr
|
||||
td Hermione Butler
|
||||
td Regional Director
|
||||
td London
|
||||
td 47
|
||||
td 2011/03/21
|
||||
td $356,250
|
||||
tr
|
||||
td Lael Greer
|
||||
td Systems Administrator
|
||||
td London
|
||||
td 21
|
||||
td 2009/02/27
|
||||
td $103,500
|
||||
tr
|
||||
td Jonas Alexander
|
||||
td Developer
|
||||
td San Francisco
|
||||
td 30
|
||||
td 2010/07/14
|
||||
td $86,500
|
||||
tr
|
||||
td Shad Decker
|
||||
td Regional Director
|
||||
td Edinburgh
|
||||
td 51
|
||||
td 2008/11/13
|
||||
td $183,000
|
||||
tr
|
||||
td Michael Bruce
|
||||
td Javascript Developer
|
||||
td Singapore
|
||||
td 29
|
||||
td 2011/06/27
|
||||
td $183,000
|
||||
tr
|
||||
td Donna Snider
|
||||
td Customer Support
|
||||
td New York
|
||||
td 27
|
||||
td 2011/01/25
|
||||
td $112,000
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
1313
public/assets/pug/pages/template/datatable-ext-key-table.pug
Normal file
1313
public/assets/pug/pages/template/datatable-ext-key-table.pug
Normal file
File diff suppressed because it is too large
Load Diff
1479
public/assets/pug/pages/template/datatable-ext-responsive.pug
Normal file
1479
public/assets/pug/pages/template/datatable-ext-responsive.pug
Normal file
File diff suppressed because it is too large
Load Diff
1479
public/assets/pug/pages/template/datatable-ext-row-reorder.pug
Normal file
1479
public/assets/pug/pages/template/datatable-ext-row-reorder.pug
Normal file
File diff suppressed because it is too large
Load Diff
86
public/assets/pug/pages/template/datatable-ext-scroller.pug
Normal file
86
public/assets/pug/pages/template/datatable-ext-scroller.pug
Normal file
@@ -0,0 +1,86 @@
|
||||
- var datatable = true;
|
||||
- var datatable_extension = true;
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Scroller
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Tables
|
||||
li.breadcrumb-item Extension Data Tables
|
||||
li.breadcrumb-item.active Scroller
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Basic Table Scroll
|
||||
span
|
||||
| Scroller is a plug-in for DataTables which enhances DataTables' built-in scrolling features to allow large amounts of data to be rendered on page very quickly.This is done by Scroller through the use of a virtual rendering technique that will render only the part of the table that is actually required for the current view.
|
||||
.card-body
|
||||
.dt-ext.table-responsive
|
||||
table#basic-scroller.display.nowrap
|
||||
thead
|
||||
tr
|
||||
th ID
|
||||
th First name
|
||||
th Last name
|
||||
th ZIP / Post code
|
||||
th Country
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 State Saving
|
||||
span
|
||||
| Scroller will automatically integrate with DataTables in order to save the scrolling position of the table, if state saving is enabled in the DataTable (stateSave). This example shows that in practice - to demonstrate, scroll the table and then reload the page.
|
||||
.card-body
|
||||
.dt-ext.table-responsive
|
||||
table#state-saving.display.nowrap
|
||||
thead
|
||||
tr
|
||||
th ID
|
||||
th First name
|
||||
th Last name
|
||||
th ZIP / Post code
|
||||
th Country
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 API
|
||||
span
|
||||
| This example shows a trivial use of the API methods that Scroller adds to the DataTables API to scroll to a row once the table's data has been loaded.
|
||||
.card-body
|
||||
.dt-ext.table-responsive
|
||||
table#api.display.nowrap
|
||||
thead
|
||||
tr
|
||||
th ID
|
||||
th First name
|
||||
th Last name
|
||||
th ZIP / Post code
|
||||
th Country
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
2379
public/assets/pug/pages/template/datatable-plugin.pug
Normal file
2379
public/assets/pug/pages/template/datatable-plugin.pug
Normal file
File diff suppressed because it is too large
Load Diff
117
public/assets/pug/pages/template/datatable-server-side.pug
Normal file
117
public/assets/pug/pages/template/datatable-server-side.pug
Normal file
@@ -0,0 +1,117 @@
|
||||
- var datatable = true;
|
||||
- var page_datatable = true;
|
||||
- var theme_customizer = true;
|
||||
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Datatables Server Side
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Tables
|
||||
li.breadcrumb-item Data Tables
|
||||
li.breadcrumb-item.active Server Side
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
// Server Side Processing start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Server Side Processing
|
||||
span In some tables you might wish to have some content generated automatically.
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#server-side-datatable.display.datatables
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// Server Side Processing end
|
||||
// http Server Side start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Custom HTTP variables
|
||||
span
|
||||
| The example below shows server-side processing being used with an extra parameter being sent to the server by using the ajax.data option as a function
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#datatable-http.display.datatables
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// http Server Side end
|
||||
// post data Server Side start
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header
|
||||
h5 POST Data
|
||||
span
|
||||
| The example below shows server-side processing being used with an extra parameter being sent to the server by using the ajax.data option as a function
|
||||
.card-body
|
||||
.table-responsive
|
||||
table#datatable-post.display.datatables
|
||||
thead
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
tfoot
|
||||
tr
|
||||
th Name
|
||||
th Position
|
||||
th Office
|
||||
th Age
|
||||
th Start date
|
||||
th Salary
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
3021
public/assets/pug/pages/template/datatable-styling.pug
Normal file
3021
public/assets/pug/pages/template/datatable-styling.pug
Normal file
File diff suppressed because it is too large
Load Diff
85
public/assets/pug/pages/template/datepicker.pug
Normal file
85
public/assets/pug/pages/template/datepicker.pug
Normal file
@@ -0,0 +1,85 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var date_picker = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Date Picker
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Forms
|
||||
li.breadcrumb-item Form Widgets
|
||||
li.breadcrumb-item.active Date Picker
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.card
|
||||
.card-header
|
||||
h5 Date Picker
|
||||
.card-body
|
||||
.row
|
||||
.col-md-12
|
||||
.date-picker
|
||||
form.theme-form
|
||||
.form-group.row
|
||||
label.col-sm-3.col-form-label.text-end Default
|
||||
.col-xl-5.col-sm-9
|
||||
.input-group
|
||||
input.datepicker-here.form-control.digits(type='text', data-language='en')
|
||||
.form-group.row
|
||||
label.col-sm-3.col-form-label.text-end Selecting multiple dates
|
||||
.col-xl-5.col-sm-9
|
||||
input.datepicker-here.form-control.digits(type='text', data-multiple-dates='3', data-multiple-dates-separator=', ', data-language='en')
|
||||
.form-group.row
|
||||
label.col-sm-3.col-form-label.text-end Month selection
|
||||
.col-xl-5.col-sm-9
|
||||
input.datepicker-here.form-control.digits(type='text', data-language='en', data-min-view='months', data-view='months', data-date-format='MM yyyy')
|
||||
.form-group.row
|
||||
label.col-sm-3.col-form-label.text-end Minimum and maximum dates
|
||||
.col-xl-5.col-sm-9
|
||||
input#minMaxExample.form-control.digits(type='text')
|
||||
.form-group.row
|
||||
label.col-sm-3.col-form-label.text-end Range of dates
|
||||
.col-xl-5.col-sm-9
|
||||
input.datepicker-here.form-control.digits(type='text', data-range='true', data-multiple-dates-separator=' - ', data-language='en')
|
||||
.form-group.row
|
||||
label.col-sm-3.col-form-label.text-end Disable days of week
|
||||
.col-xl-5.col-sm-9
|
||||
input#disabled-days.form-control.digits(type='text')
|
||||
.form-group.row
|
||||
label.col-sm-3.col-form-label.text-end Orientation
|
||||
.col-xl-5.col-sm-9
|
||||
.form-row
|
||||
.col-md-12.mb-2
|
||||
input.datepicker-here.form-control.digits(type='text', data-language='en', data-multiple-dates-separator=', ', data-position='top left', placeholder='top left')
|
||||
.col-md-12.mb-2
|
||||
input.datepicker-here.form-control.digits(type='text', data-language='en', data-multiple-dates-separator=', ', data-position='top right', placeholder='top right')
|
||||
.col-md-12.mb-2
|
||||
input.datepicker-here.form-control.digits(type='text', data-language='en', data-multiple-dates-separator=', ', data-position='bottom left', placeholder='bottom left')
|
||||
.col-md-12
|
||||
input.datepicker-here.form-control.digits(type='text', data-language='en', data-multiple-dates-separator=', ', data-position='bottom right', placeholder='bottom right')
|
||||
.form-group.row.mb-0
|
||||
label.col-sm-3.col-form-label.text-end Permanently visible Datepicker
|
||||
.col-sm-3
|
||||
.datepicker-here(data-language='en')
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
86
public/assets/pug/pages/template/daterangepicker.pug
Normal file
86
public/assets/pug/pages/template/daterangepicker.pug
Normal file
@@ -0,0 +1,86 @@
|
||||
- var theme_customizer = true;
|
||||
- var date_rangepicker = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Date Range Picker
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Forms
|
||||
li.breadcrumb-item Form Widgets
|
||||
li.breadcrumb-item.active Date Range Picker
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Date Range Picker
|
||||
.card-body
|
||||
.row.date-range-picker
|
||||
.col-xl-6
|
||||
.daterange-card
|
||||
h6.sub-title Date Range Picker
|
||||
p
|
||||
| The Date Range Picker use the current value of the input to initialize, and update the input if new dates are chosen.
|
||||
.theme-form
|
||||
.form-group
|
||||
input.form-control.digits(type='text', name='daterange', value='01/15/2017 - 02/15/2017')
|
||||
.col-xl-6
|
||||
.daterange-card
|
||||
h6.sub-title Predefined Ranges
|
||||
p
|
||||
| This example shows the option to predefine date ranges that the user can choose from a list.
|
||||
.theme-form
|
||||
.form-group
|
||||
input#reportrange.form-control.digits(type='text')
|
||||
.col-xl-6
|
||||
.daterange-card
|
||||
h6.sub-title Single Date Picker
|
||||
p
|
||||
| The Date Range Picker can be turned into a single date picker widget with only one calendar. In this example, dropdowns to select a month and year have also been enabled at the top of the calendar to quickly jump to different months.
|
||||
.theme-form
|
||||
.form-group
|
||||
input.form-control.digits(type='text', name='birthdate', value='10/24/1989')
|
||||
.col-xl-6
|
||||
.daterange-card
|
||||
h6.sub-title Input Initially Empty
|
||||
p
|
||||
| If you're using a date range as a filter, you may want to attach a picker to an input but leave it empty by default. This example shows how to accomplish that using the
|
||||
code autoUpdateInput
|
||||
| setting, and the
|
||||
code apply
|
||||
| and
|
||||
code cancel
|
||||
| events.
|
||||
.theme-form
|
||||
.form-group
|
||||
input.form-control.digits(type='text', name='datefilter', value='')
|
||||
.col-lg-12
|
||||
.daterange-card
|
||||
h6.sub-title Date and Time
|
||||
p
|
||||
| The Date Range Picker can also be used to select times. Hour, minute and (optional) second dropdowns are added below the calendars. An option exists to set the increment count of the minutes dropdown to e.g. offer only 15-minute or 30-minute increments.
|
||||
.theme-form
|
||||
.form-group
|
||||
input.form-control.digits(type='text', name='daterange2', value='01/01/2017 1:30 PM - 01/01/2017 2:00 PM')
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
98
public/assets/pug/pages/template/datetimepicker.pug
Normal file
98
public/assets/pug/pages/template/datetimepicker.pug
Normal file
@@ -0,0 +1,98 @@
|
||||
- var theme_customizer = true;
|
||||
- var date_time_picker = true;
|
||||
- var sidebar = true;
|
||||
- var scrollbar = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Date Time Picker
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Forms
|
||||
li.breadcrumb-item Form Widgets
|
||||
li.breadcrumb-item.active Date Time Picker
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.card
|
||||
.card-header
|
||||
h5 Date Time Picker
|
||||
.card-body
|
||||
.row
|
||||
.col-md-12
|
||||
.datetime-picker
|
||||
form.theme-form
|
||||
.mb-3.row.g-3
|
||||
label.col-sm-3.col-form-label.text-end Minimum Setup
|
||||
.col-xl-5.col-sm-7.col-lg-8
|
||||
#dt-minimum.input-group.date(data-target-input='nearest')
|
||||
input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-minimum')
|
||||
.input-group-text(data-target='#dt-minimum', data-toggle='datetimepicker')
|
||||
i.fa.fa-calendar
|
||||
.mb-3.row.g-3
|
||||
label.col-sm-3.col-form-label.text-end Using Locales
|
||||
.col-xl-5.col-sm-7.col-lg-8
|
||||
#dt-local.input-group.date(data-target-input='nearest')
|
||||
input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-local')
|
||||
.input-group-text(data-target='#dt-local', data-toggle='datetimepicker')
|
||||
i.fa.fa-calendar
|
||||
.mb-3.row.g-3
|
||||
label.col-sm-3.col-form-label.text-end Time Only
|
||||
.col-xl-5.col-sm-7.col-lg-8
|
||||
#dt-time.input-group.date(data-target-input='nearest')
|
||||
input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-time')
|
||||
.input-group-text(data-target='#dt-time', data-toggle='datetimepicker')
|
||||
i.fa.fa-clock-o
|
||||
.mb-3.row.g-3
|
||||
label.col-sm-3.col-form-label.text-end Date Only
|
||||
.col-xl-5.col-sm-7.col-lg-8
|
||||
#dt-date.input-group.date(data-target-input='nearest')
|
||||
input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-date')
|
||||
.input-group-text(data-target='#dt-date', data-toggle='datetimepicker')
|
||||
i.fa.fa-calendar
|
||||
.mb-3.row.g-3
|
||||
label.col-sm-3.col-form-label.text-end No Icon (input field only)
|
||||
.col-xl-5.col-sm-7.col-lg-8
|
||||
input#dt-noicon.form-control.datetimepicker-input.digits(type='text', data-toggle='datetimepicker', data-target='#dt-noicon')
|
||||
.mb-3.row.g-3
|
||||
label.col-sm-3.col-form-label.text-end Enabled/Disabled Dates
|
||||
.col-xl-5.col-sm-7.col-lg-8
|
||||
#dt-enab-disab-date.input-group.date(data-target-input='nearest')
|
||||
input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-enab-disab-date')
|
||||
.input-group-text(data-target='#dt-enab-disab-date', data-toggle='datetimepicker')
|
||||
i.fa.fa-calendar
|
||||
.mb-3.row.g-3
|
||||
label.col-sm-3.col-form-label.text-end View Mode
|
||||
.col-xl-5.col-sm-7.col-lg-8
|
||||
#dt-view.input-group.date(data-target-input='nearest')
|
||||
input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-view')
|
||||
.input-group-text(data-target='#dt-view', data-toggle='datetimepicker')
|
||||
i.fa.fa-calendar
|
||||
.mb-3.row.g-3.mb-0
|
||||
label.col-sm-3.col-form-label.text-end Disabled Days of the Week
|
||||
.col-xl-5.col-sm-7.col-lg-8
|
||||
#dt-disab-days.input-group.date(data-target-input='nearest')
|
||||
input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-disab-days')
|
||||
.input-group-text(data-target='#dt-disab-days', data-toggle='datetimepicker')
|
||||
i.fa.fa-calendar
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
187
public/assets/pug/pages/template/default-form.pug
Normal file
187
public/assets/pug/pages/template/default-form.pug
Normal file
@@ -0,0 +1,187 @@
|
||||
- var theme_customizer = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Default Forms
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Forms
|
||||
li.breadcrumb-item Form Widgets
|
||||
li.breadcrumb-item.active Default Forms
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-xl-6
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Default Form Layout
|
||||
span
|
||||
| Using the
|
||||
a(href='#') card
|
||||
| component, you can extend the default collapse behavior to create an accordion.
|
||||
.card-body
|
||||
form.theme-form
|
||||
.mb-3
|
||||
label.col-form-label.pt-0(for='exampleInputEmail1') Email address
|
||||
input#exampleInputEmail1.form-control(type='email' aria-describedby='emailHelp' placeholder='Enter email')
|
||||
small#emailHelp.form-text.text-muted We'll never share your email with anyone else.
|
||||
.mb-3
|
||||
label.col-form-label.pt-0(for='exampleInputPassword1') Password
|
||||
input#exampleInputPassword1.form-control(type='password' placeholder='Password')
|
||||
.checkbox.p-0
|
||||
input#dafault-checkbox(type='checkbox')
|
||||
label.mb-0(for='dafault-checkbox') Remember my preference
|
||||
.card-footer
|
||||
button.btn.btn-primary Submit
|
||||
button.btn.btn-secondary Cancel
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Horizontal Form Layout
|
||||
span
|
||||
| Using the
|
||||
a(href='#') card
|
||||
| component, you can extend the default collapse behavior to create an accordion.
|
||||
.card-body
|
||||
form.theme-form
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label(for='inputEmail3') Email
|
||||
.col-sm-9
|
||||
input#inputEmail3.form-control(type='email' placeholder='Email')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label(for='inputPassword3') Password
|
||||
.col-sm-9
|
||||
input#inputPassword3.form-control(type='password' placeholder='Password')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label(for='inputPassword3') Contact Number
|
||||
.col-sm-9
|
||||
input#inputnumber.form-control(type='number' placeholder='Contact')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label(for='inputPassword3') Company name
|
||||
.col-sm-9
|
||||
input#url.form-control(type='text' placeholder='Company name')
|
||||
.mb-3.row
|
||||
label.col-sm-3.col-form-label(for='inputPassword3') Website
|
||||
.col-sm-9
|
||||
input#Website.form-control(type='url' placeholder='Website')
|
||||
fieldset.mb-3
|
||||
.row
|
||||
label.col-form-label.col-sm-3.pt-0 Radios
|
||||
.col-sm-9
|
||||
.form-check.radio.radio-primary
|
||||
input#radio11.form-check-input(type='radio' name='radio1' value='option1')
|
||||
label.form-check-label(for='radio11') Option 1
|
||||
.form-check.radio.radio-primary
|
||||
input#radio22.form-check-input(type='radio' name='radio1' value='option1')
|
||||
label.form-check-label(for='radio22') Option 2
|
||||
.form-check.radio.radio-primary
|
||||
input#radio33.form-check-input(type='radio' name='radio1' value='option1' disabled='')
|
||||
label.form-check-label(for='radio33') Disabled
|
||||
.form-check.radio.radio-primary
|
||||
input#radio44.form-check-input(type='radio' name='radio1' value='option1' checked='')
|
||||
label.form-check-label(for='radio44') Option 3
|
||||
.form-check.radio.radio-primary
|
||||
input#radio55.form-check-input(type='radio' name='radio1' value='option1' checked='')
|
||||
label.form-check-label(for='radio44') Option 4
|
||||
.row.mb-0
|
||||
label.col-sm-3.col-form-label.pb-0 Checkboxes
|
||||
.col-sm-9
|
||||
.mb-0
|
||||
.form-check.form-check-inline.checkbox.checkbox-primary
|
||||
input#inline-form-1.form-check-input(type='checkbox')
|
||||
label.form-check-label(for='inline-form-1') Option 1
|
||||
.form-check.form-check-inline.checkbox.checkbox-primary
|
||||
input#inline-form-2.form-check-input(type='checkbox')
|
||||
label.form-check-label(for='inline-form-2') Option 1
|
||||
.card-footer
|
||||
button.btn.btn-primary Submit
|
||||
button.btn.btn-secondary Cancel
|
||||
.col-sm-12.col-xl-6
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Mega form
|
||||
.card-body
|
||||
form.theme-form.mega-form
|
||||
h6 Account Information
|
||||
.mb-3
|
||||
label.col-form-label Your Name
|
||||
input.form-control(type='text' placeholder='your Name')
|
||||
.mb-3
|
||||
label.col-form-label Email Address
|
||||
input.form-control(type='email' placeholder='Enter email')
|
||||
.mb-3
|
||||
label.col-form-label Contact Number
|
||||
input.form-control(type='Number' placeholder='Enter contact number')
|
||||
hr.mt-4.mb-4
|
||||
h6 Company Information
|
||||
.mb-3
|
||||
label.col-form-label Company Name
|
||||
input.form-control(type='text', placeholder='Company Name')
|
||||
.mb-3
|
||||
label.col-form-label Website
|
||||
input.form-control(type='text', placeholder='Website')
|
||||
hr.mt-4.mb-4
|
||||
h6.pb-3.mb-0 Billing Information
|
||||
form.form-space.theme-form.row
|
||||
.col-auto
|
||||
input.form-control(type='text' placeholder='Name On Card')
|
||||
.col-auto
|
||||
input.form-control(type='text' name='inputPassword' placeholder='Card Number')
|
||||
.col-auto
|
||||
input.form-control(type='text' name='inputPassword' placeholder='Zip Code')
|
||||
.card-footer
|
||||
button.btn.btn-primary Submit
|
||||
button.btn.btn-secondary Cancel
|
||||
.col-xl-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Inline Form
|
||||
span
|
||||
| Use
|
||||
code .form-inline
|
||||
| class in the form to style with inline fields.
|
||||
.card-body
|
||||
h6 Inline Form with Label
|
||||
form.row.theme-form.mt-3
|
||||
.col-xxl-4.mb-3.d-flex
|
||||
label.col-form-label.pe-2(for='inputInlineUsername') Username
|
||||
input#inputInlineUsername.form-control(type='text' name='inputUsername' placeholder='Username' autocomplete='off')
|
||||
.col-xxl-4.mb-3.d-flex
|
||||
label.col-form-label.pe-2(for='inputInlinePassword') Password
|
||||
input#inputInlinePassword.form-control(type='password' name='inputPassword' placeholder='Password' autocomplete='off')
|
||||
.col-xxl-4.mb-3.d-flex
|
||||
button.btn.btn-primary Login
|
||||
h6 Inline Form without Label
|
||||
form.row.row-cols-sm-3.theme-form.mt-3.form-bottom
|
||||
.mb-3.d-flex
|
||||
input.form-control(type='text' name='inputUnlabelUsername' placeholder='Username' autocomplete='off')
|
||||
.mb-3.d-flex
|
||||
input#inputUnlabelPassword.form-control(type='password' name='inputPassword' placeholder='Password' autocomplete='off')
|
||||
.mb-3.d-flex
|
||||
button.btn.btn-secondary Login
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
88
public/assets/pug/pages/template/dragable-card.pug
Normal file
88
public/assets/pug/pages/template/dragable-card.pug
Normal file
@@ -0,0 +1,88 @@
|
||||
- var theme_customizer = true;
|
||||
- var jquery_ui = true;
|
||||
- var dragable = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Draggable Card
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Cards
|
||||
li.breadcrumb-item.active Draggable Card
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
#draggableMultiple.row.ui-sortable
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Basic Card
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card.b-r-0
|
||||
.card-header.pb-0
|
||||
h5 Flat Card
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card.shadow-0.border
|
||||
.card-header.pb-0
|
||||
h5 Without shadow Card
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5
|
||||
i.icon-move.me-2
|
||||
| Icon in Heading
|
||||
.card-body
|
||||
p
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Card sub Title
|
||||
span
|
||||
| Using the
|
||||
a(href='javascript:void(0)') card
|
||||
| component, you can extend the default collapse behavior to create an accordion.
|
||||
.card-body
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Card sub Title
|
||||
span
|
||||
| Using the
|
||||
a(href='javascript:void(0)') card
|
||||
| component, you can extend the default collapse behavior to create an accordion.
|
||||
.card-body
|
||||
p.mb-0
|
||||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the.
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
321
public/assets/pug/pages/template/dropdown.pug
Normal file
321
public/assets/pug/pages/template/dropdown.pug
Normal file
@@ -0,0 +1,321 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var sidebar = true;
|
||||
- var scrollbar = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Dropdown
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Base
|
||||
li.breadcrumb-item.active Dropdown
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12.col-xl-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Basic Dropdown
|
||||
.card-body.dropdown-basic
|
||||
.dropdown
|
||||
button.dropbtn.btn-primary(type='button')
|
||||
| Dropdown Button
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
.col-sm-12.col-xl-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Basic Color Dropdown
|
||||
.card-body.dropdown-basic
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-primary(type='button')
|
||||
| Action
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-secondary(type='button')
|
||||
| Action
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-success(type='button')
|
||||
| Action
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-info(type='button')
|
||||
| Action
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-warning.txt-dark(type='button')
|
||||
| Action
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-danger(type='button')
|
||||
| Action
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.col-sm-12.col-xl-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Dropdown Split Button
|
||||
.card-body.dropdown-basic
|
||||
.btn-group
|
||||
button.btn.btn-primary(type='button') Primary Button
|
||||
.dropdown.separated-btn
|
||||
button.btn.btn-primary(type='button')
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Link 1
|
||||
a(href='#') Link 2
|
||||
a(href='#') Link 3
|
||||
.btn-group
|
||||
button.btn.btn-secondary(type='button') Secondary Button
|
||||
.dropdown.separated-btn
|
||||
button.btn.btn-secondary(type='button')
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Link 1
|
||||
a(href='#') Link 2
|
||||
a(href='#') Link 3
|
||||
.btn-group
|
||||
button.btn.btn-success(type='button') Success Button
|
||||
.dropdown.separated-btn
|
||||
button.btn.btn-success(type='button')
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Link 1
|
||||
a(href='#') Link 2
|
||||
a(href='#') Link 3
|
||||
.btn-group
|
||||
button.btn.btn-info(type='button') Info Button
|
||||
.dropdown.separated-btn
|
||||
button.btn.btn-info(type='button')
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Link 1
|
||||
a(href='#') Link 2
|
||||
a(href='#') Link 3
|
||||
.btn-group
|
||||
button.btn.btn-warning(type='button') Warning Button
|
||||
.dropdown.separated-btn
|
||||
button.btn.btn-warning(type='button')
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Link 1
|
||||
a(href='#') Link 2
|
||||
a(href='#') Link 3
|
||||
.btn-group
|
||||
button.btn.btn-danger(type='button') Danger Button
|
||||
.dropdown.separated-btn
|
||||
button.btn.btn-danger(type='button')
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Link 1
|
||||
a(href='#') Link 2
|
||||
a(href='#') Link 3
|
||||
.col-sm-12.col-xl-12
|
||||
.card
|
||||
.card-header
|
||||
h5 Rounded Dropdown
|
||||
.card-body.dropdown-basic
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-primary.btn-round(type='button')
|
||||
| Primary Button
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-secondary.btn-round(type='button')
|
||||
| Secondary Button
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-success.btn-round(type='button')
|
||||
| Success Button
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-info.btn-round(type='button')
|
||||
| Info Button
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-warning.txt-dark.btn-round(type='button')
|
||||
| Warning Button
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.dropdown
|
||||
.btn-group.mb-0
|
||||
button.dropbtn.btn-danger.btn-round(type='button')
|
||||
| Danger Button
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Action
|
||||
a(href='#') Another Action
|
||||
a(href='#') Something Else Here
|
||||
a(href='#') Separated Link
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Dropdown With Divider
|
||||
span
|
||||
| Use a class
|
||||
.card-body.dropdown-basic
|
||||
.dropdown
|
||||
button.dropbtn.btn-primary(type='button')
|
||||
| Dropdown Button
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
a(href='#') Link 1
|
||||
a(href='#') Link 2
|
||||
a(href='#') Link 3
|
||||
a(href='#') Another Link
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Dropdown With Header
|
||||
span
|
||||
| Use a class
|
||||
code .dropdown-header
|
||||
.card-body.dropdown-basic
|
||||
.dropdown
|
||||
button.dropbtn.btn-primary(type='button')
|
||||
| Dropdown Button
|
||||
span
|
||||
i.icofont.icofont-arrow-down
|
||||
.dropdown-content
|
||||
h5.dropdown-header Dropdown header
|
||||
a(href='#') Link 1
|
||||
a(href='#') Link 2
|
||||
h5.dropdown-header Dropdown header
|
||||
a(href='#') Another Link
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Dropdown With Disable
|
||||
span
|
||||
| Use a class
|
||||
code .dropdown-disabled
|
||||
.card-body.dropup-basic.dropdown-basic
|
||||
.dropup.dropdown
|
||||
button.dropbtn.btn-primary(type='button')
|
||||
| Dropdown Button
|
||||
span
|
||||
i.icofont.icofont-arrow-up
|
||||
.dropup-content.dropdown-content
|
||||
a(href='#') Normal
|
||||
a.active(href='#') Active
|
||||
a.disabled(href='#') Disabled
|
||||
.col-sm-12.col-xl-6
|
||||
.card
|
||||
.card-header
|
||||
h5 Dropdown With DropUp
|
||||
span
|
||||
| Use a class
|
||||
code .drop-up
|
||||
.card-body.dropup-basic.dropdown-basic
|
||||
.dropup.dropdown
|
||||
button.dropbtn.btn-primary(type='button')
|
||||
| Dropdown Button
|
||||
span
|
||||
i.icofont.icofont-arrow-up
|
||||
.dropup-content.dropdown-content
|
||||
a(href='#') Link 1
|
||||
a(href='#') Link 2
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
75
public/assets/pug/pages/template/dropzone.pug
Normal file
75
public/assets/pug/pages/template/dropzone.pug
Normal file
@@ -0,0 +1,75 @@
|
||||
- var theme_customizer = true;
|
||||
- var tooltip = true;
|
||||
- var dropzone = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Dropzone
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Advance
|
||||
li.breadcrumb-item.active Dropzone
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.row
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Single File Upload
|
||||
.card-body
|
||||
form#singleFileUpload.dropzone.digits(action='/upload.php')
|
||||
.dz-message.needsclick
|
||||
i.icon-cloud-up
|
||||
h6 Drop files here or click to upload.
|
||||
span.note.needsclick
|
||||
| (This is just a demo dropzone. Selected files are
|
||||
strong not
|
||||
| actually uploaded.)
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 Multi File Upload
|
||||
.card-body
|
||||
form#multiFileUpload.dropzone.dropzone-primary(action='/upload.php')
|
||||
.dz-message.needsclick
|
||||
i.icon-cloud-up
|
||||
h6 Drop files here or click to upload.
|
||||
span.note.needsclick
|
||||
| (This is just a demo dropzone. Selected files are
|
||||
strong not
|
||||
| actually uploaded.)
|
||||
.col-sm-12
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h5 File Type Validation
|
||||
.card-body
|
||||
form#fileTypeValidation.dropzone.dropzone-info(action='/upload.php')
|
||||
.dz-message.needsclick
|
||||
i.icon-cloud-up
|
||||
h6 Drop files here or click to upload.
|
||||
span.note.needsclick
|
||||
| (This is just a demo dropzone. Selected files are
|
||||
strong not
|
||||
| actually uploaded.)
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
367
public/assets/pug/pages/template/ecommerce-templates.pug
Normal file
367
public/assets/pug/pages/template/ecommerce-templates.pug
Normal file
@@ -0,0 +1,367 @@
|
||||
doctype html
|
||||
html(lang='en')
|
||||
head
|
||||
meta(http-equiv='Content-Type', content='text/html; charset=UTF-8')
|
||||
meta(http-equiv='X-UA-Compatible', content='IE=edge')
|
||||
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
||||
meta(name='description', content='viho admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.')
|
||||
meta(name='keywords', content='admin template, viho admin template, dashboard template, flat admin template, responsive admin template, web app')
|
||||
meta(name='author', content='pixelstrap')
|
||||
link(rel='icon', href='../assets/images/favicon.png', type='image/x-icon')
|
||||
link(rel='shortcut icon', href='../assets/images/favicon.png', type='image/x-icon')
|
||||
title viho - Premium Admin Template
|
||||
link(rel='stylesheet', type='text/css', href='../assets/css/fontawesome.css')
|
||||
link(href='https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900', rel='stylesheet')
|
||||
link(href='https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i', rel='stylesheet')
|
||||
link(href='https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i', rel='stylesheet')
|
||||
style(type='text/css').
|
||||
body{
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
width: 650px;
|
||||
font-family: work-Sans, sans-serif;
|
||||
background-color: #f6f7fb;
|
||||
display: block;
|
||||
}
|
||||
ul{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
li{
|
||||
display: inline-block;
|
||||
text-decoration: unset;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
p{
|
||||
margin: 15px 0;
|
||||
}
|
||||
h5{
|
||||
color:#444;
|
||||
text-align:left;
|
||||
font-weight:400;
|
||||
}
|
||||
.text-center{
|
||||
text-align: center
|
||||
}
|
||||
.main-bg-light{
|
||||
background-color: #fafafa;
|
||||
//- box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.2705882353);
|
||||
}
|
||||
.title{
|
||||
color: #444444;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
table{
|
||||
margin-top:30px
|
||||
}
|
||||
table.top-0{
|
||||
margin-top:0;
|
||||
}
|
||||
table.order-detail {
|
||||
border: 1px solid #ddd;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.order-detail tr:nth-child(even) {
|
||||
border-top:1px solid #ddd;
|
||||
border-bottom:1px solid #ddd;
|
||||
}
|
||||
table.order-detail tr:nth-child(odd) {
|
||||
border-bottom:1px solid #ddd;
|
||||
}
|
||||
.pad-left-right-space{
|
||||
border: unset !important;
|
||||
}
|
||||
.pad-left-right-space td{
|
||||
padding: 5px 15px;
|
||||
}
|
||||
.pad-left-right-space td p{
|
||||
margin: 0;
|
||||
}
|
||||
.pad-left-right-space td b{
|
||||
font-size:15px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
.order-detail th{
|
||||
font-size:16px;
|
||||
padding:15px;
|
||||
text-align:center;
|
||||
background: #fafafa;
|
||||
}
|
||||
.footer-social-icon tr td img{
|
||||
margin-left:5px;
|
||||
margin-right:5px;
|
||||
}
|
||||
.temp-social td{
|
||||
display:inline-block;
|
||||
}
|
||||
.temp-social td i{
|
||||
width:40px;
|
||||
height:40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color:#24695c;
|
||||
//- padding:10px;
|
||||
background-color: #24695c3d;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.temp-social td:nth-child(n+2){
|
||||
margin-left:15px;
|
||||
}
|
||||
body(style='margin: 20px auto;')
|
||||
table(align='center', border='0', cellpadding='0', cellspacing='0', style='padding:30px;background-color: #fff; -webkit-box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.2705882353);box-shadow: 0px 0px 14px -4px rgba(0, 0, 0, 0.2705882353);width: 100%;')
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
table(align='left', border='0', cellpadding='0', cellspacing='0', style='text-align: left;', width='100%')
|
||||
tbody
|
||||
tr
|
||||
td(style='text-align: center;')
|
||||
svg(style="width:170px;" enable-background='new 0 0 512 512' viewbox='0 0 512 512' xmlns='http://www.w3.org/2000/svg')
|
||||
path(d='m30.178 196.133 220.157-139.968c3.457-2.198 7.873-2.198 11.33 0l220.157 139.967c3.048 1.938 4.894 5.299 4.894 8.911v193.765c0 5.832-4.727 10.559-10.559 10.559h-440.314c-5.832 0-10.559-4.727-10.559-10.559v-193.765c0-3.611 1.847-6.972 4.894-8.91z' fill='#fb8627')
|
||||
path(d='m289.419 165.138v268.156c0 5.697-4.625 10.312-10.322 10.312h-179.88c-5.697 0-10.312-4.615-10.312-10.312v-268.156z' fill='#1c96f9')
|
||||
path(d='m289.413 10.316v422.974c0 5.694-4.622 10.316-10.316 10.316h-32.454c5.694 0 10.316-4.622 10.316-10.316v-422.974c0-5.694-4.621-10.316-10.316-10.316h32.454c5.695 0 10.316 4.622 10.316 10.316z' fill='#1c96f9')
|
||||
path(d='m289.414 10.316v165.129h-200.512v-165.129c0-5.697 4.619-10.316 10.316-10.316h179.88c5.698 0 10.316 4.619 10.316 10.316z' fill='#eaf6ff')
|
||||
path(d='m289.413 10.316v165.127h-32.454v-165.127c0-5.694-4.621-10.316-10.316-10.316h32.454c5.695 0 10.316 4.622 10.316 10.316z' fill='#deecf0')
|
||||
g
|
||||
path(d='m118.533 175.44c0 4.275-3.461 7.726-7.726 7.726h-21.902v-15.453h21.902c4.264.001 7.726 3.462 7.726 7.727z' fill='#0a8ae2')
|
||||
g
|
||||
path(d='m171.372 183.171h-24.995c-4.267 0-7.726-3.459-7.726-7.726s3.459-7.726 7.726-7.726h24.995c4.267 0 7.726 3.459 7.726 7.726s-3.459 7.726-7.726 7.726z' fill='#0a8ae2')
|
||||
g
|
||||
path(d='m231.94 183.171h-24.995c-4.267 0-7.726-3.459-7.726-7.726s3.459-7.726 7.726-7.726h24.995c4.267 0 7.726 3.459 7.726 7.726s-3.459 7.726-7.726 7.726z' fill='#0a8ae2')
|
||||
path(d='m176.701 228.511v160.368c0 5.697-4.619 10.316-10.316 10.316h-30.526c-5.697 0-10.316-4.619-10.316-10.316v-160.368c0-5.697 4.619-10.316 10.316-10.316h30.526c5.698 0 10.316 4.619 10.316 10.316z' fill='#fee265')
|
||||
g
|
||||
g
|
||||
path(d='m127.246 142.878c-4.267 0-7.726-3.459-7.726-7.726v-91.296c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v91.296c.001 4.268-3.458 7.726-7.726 7.726z' fill='#a9d3d8')
|
||||
g
|
||||
path(d='m158.762 88.719c-4.267 0-7.726-3.459-7.726-7.726v-37.137c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v37.137c0 4.268-3.459 7.726-7.726 7.726z' fill='#a9d3d8')
|
||||
g
|
||||
path(d='m190.277 88.719c-4.267 0-7.726-3.459-7.726-7.726v-37.137c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v37.137c0 4.268-3.459 7.726-7.726 7.726z' fill='#a9d3d8')
|
||||
g
|
||||
path(d='m221.792 88.719c-4.267 0-7.726-3.459-7.726-7.726v-37.137c0-4.268 3.459-7.726 7.726-7.726s7.726 3.459 7.726 7.726v37.137c0 4.268-3.459 7.726-7.726 7.726z' fill='#a9d3d8')
|
||||
g
|
||||
path(d='m245.396 132.046h-86.634c-4.267 0-7.726-3.459-7.726-7.726 0-4.268 3.459-7.726 7.726-7.726h86.634c4.267 0 7.726 3.459 7.726 7.726 0 4.268-3.459 7.726-7.726 7.726z' fill='#a9d3d8')
|
||||
g#XMLID_62_
|
||||
path(d='m251.07 51.636c-.013 0-.025 0-.037 0-4.267-.02-7.71-3.496-7.69-7.763l.001-.107c.02-4.255 3.476-7.69 7.725-7.69h.037c4.267.02 7.71 3.496 7.69 7.763v.107c-.02 4.254-3.476 7.69-7.726 7.69z' fill='#31a7fb')
|
||||
g#XMLID_486_
|
||||
path(d='m251.07 74.384c-.013 0-.025 0-.037 0-4.267-.02-7.71-3.496-7.69-7.763l.001-.107c.02-4.255 3.476-7.69 7.725-7.69h.037c4.267.02 7.71 3.496 7.69 7.763v.107c-.02 4.255-3.476 7.69-7.726 7.69z' fill='#31a7fb')
|
||||
g
|
||||
g
|
||||
path(d='m412.68 247.542-123.92 242.814c-2.586 5.079-8.798 7.098-13.876 4.502l-160.224-81.765c-5.068-2.586-7.088-8.798-4.502-13.877l123.931-242.824z' fill='#31a7fb')
|
||||
path(d='m412.68 247.542-123.92 242.814c-2.586 5.079-8.808 7.088-13.876 4.502l-28.907-14.752c5.068 2.586 11.291.577 13.877-4.502l123.919-242.814z' fill='#1c96f9')
|
||||
path(d='m481.029 113.611-75.062 147.082-178.599-91.146 75.062-147.082c2.59-5.075 8.803-7.089 13.878-4.499l160.222 81.768c5.075 2.589 7.089 8.803 4.499 13.877z' fill='#eaf6ff')
|
||||
path(d='m481.029 113.611-75.061 147.081-28.907-14.752 75.061-147.081c2.588-5.072.573-11.289-4.499-13.878l28.907 14.752c5.072 2.588 7.087 8.806 4.499 13.878z' fill='#deecf0')
|
||||
g
|
||||
g
|
||||
path(d='m253.754 183.012c-1.36 2.679-4.069 4.224-6.882 4.224-1.185 0-2.38-.278-3.513-.855l-19.501-9.951 7.026-13.763 19.501 9.952c3.802 1.945 5.316 6.591 3.369 10.393z' fill='#1c96f9')
|
||||
g
|
||||
path(d='m300.82 214.765c-1.182 0-2.381-.273-3.506-.846l-22.264-11.362c-3.801-1.94-5.309-6.594-3.37-10.394 1.94-3.802 6.594-5.309 10.394-3.37l22.264 11.362c3.801 1.94 5.309 6.594 3.37 10.394-1.365 2.675-4.077 4.216-6.888 4.216z' fill='#1c96f9')
|
||||
g
|
||||
path(d='m354.769 242.297c-1.182 0-2.381-.273-3.506-.846l-22.264-11.362c-3.801-1.94-5.309-6.594-3.37-10.394 1.939-3.802 6.594-5.308 10.394-3.37l22.264 11.362c3.801 1.94 5.309 6.594 3.37 10.394-1.365 2.676-4.077 4.216-6.888 4.216z' fill='#1c96f9')
|
||||
g
|
||||
path(d='m409.476 253.816-7.016 13.763h-.01l-19.501-9.962c-3.801-1.937-5.305-6.593-3.369-10.395 1.937-3.801 6.593-5.305 10.395-3.369z' fill='#0a8ae2')
|
||||
path(d='m281.451 256.725-72.897 142.842c-2.59 5.075-8.803 7.089-13.878 4.499l-27.19-13.876c-5.075-2.59-7.089-8.803-4.499-13.878l72.897-142.842c2.59-5.075 8.803-7.089 13.878-4.499l27.19 13.876c5.074 2.59 7.089 8.803 4.499 13.878z' fill='#fee265')
|
||||
g
|
||||
g
|
||||
path(d='m279.833 158.817c-1.182 0-2.381-.273-3.506-.846-3.801-1.94-5.309-6.594-3.37-10.394l41.499-81.319c1.939-3.802 6.593-5.309 10.394-3.37 3.801 1.94 5.309 6.594 3.37 10.394l-41.5 81.319c-1.364 2.676-4.076 4.216-6.887 4.216z' fill='#a9d3d8')
|
||||
g
|
||||
path(d='m332.522 124.902c-1.182 0-2.381-.273-3.506-.846-3.801-1.94-5.309-6.594-3.37-10.394l16.881-33.078c1.94-3.802 6.594-5.309 10.394-3.37 3.801 1.94 5.309 6.594 3.37 10.394l-16.881 33.078c-1.366 2.676-4.077 4.216-6.888 4.216z' fill='#a9d3d8')
|
||||
g
|
||||
path(d='m360.593 139.228c-1.182 0-2.381-.273-3.506-.846-3.801-1.94-5.309-6.594-3.37-10.394l16.881-33.078c1.939-3.802 6.593-5.308 10.394-3.37 3.801 1.94 5.309 6.594 3.37 10.394l-16.881 33.078c-1.366 2.676-4.077 4.216-6.888 4.216z' fill='#a9d3d8')
|
||||
g
|
||||
path(d='m388.663 153.554c-1.182 0-2.381-.273-3.506-.846-3.801-1.94-5.309-6.594-3.37-10.394l16.882-33.079c1.94-3.802 6.593-5.309 10.394-3.37 3.801 1.94 5.309 6.594 3.37 10.394l-16.882 33.079c-1.365 2.676-4.076 4.216-6.888 4.216z' fill='#a9d3d8')
|
||||
g
|
||||
path(d='m389.993 202.875c-1.182 0-2.381-.273-3.506-.846l-77.166-39.38c-3.801-1.94-5.309-6.594-3.37-10.394 1.939-3.802 6.593-5.309 10.394-3.37l77.166 39.38c3.801 1.94 5.309 6.594 3.37 10.394-1.365 2.676-4.076 4.216-6.888 4.216z' fill='#a9d3d8')
|
||||
g#XMLID_490_
|
||||
path(d='m431.599 133.832c-1.183 0-2.382-.273-3.507-.847-3.801-1.94-5.309-6.594-3.368-10.394l.049-.096c1.94-3.801 6.594-5.31 10.394-3.368 3.801 1.94 5.309 6.594 3.368 10.394l-.049.096c-1.365 2.675-4.076 4.215-6.887 4.215z' fill='#31a7fb')
|
||||
g#XMLID_488_
|
||||
path(d='m421.258 154.094c-1.193 0-2.403-.278-3.536-.862-3.792-1.957-5.28-6.617-3.323-10.408l.049-.095c1.956-3.792 6.616-5.281 10.409-3.324 3.792 1.957 5.28 6.617 3.323 10.408l-.049.095c-1.372 2.658-4.074 4.186-6.873 4.186z' fill='#31a7fb')
|
||||
g
|
||||
path(d='m314.84 335.514c-1.182 0-2.381-.273-3.506-.846-3.801-1.94-5.309-6.594-3.37-10.394l25.946-50.84c1.94-3.802 6.594-5.309 10.394-3.37 3.801 1.94 5.309 6.594 3.37 10.394l-25.946 50.84c-1.366 2.676-4.077 4.216-6.888 4.216z' fill='#1c96f9')
|
||||
path(d='m486.713 233.783v267.659c0 5.839-4.72 10.559-10.559 10.559h-440.308c-5.839 0-10.559-4.72-10.559-10.559v-267.659l230.713 146.674z' fill='#fcca9f')
|
||||
path(d='m486.713 233.782v267.658c0 5.839-4.72 10.559-10.559 10.559h-34.158c5.839 0 10.559-4.72 10.559-10.559v-245.939z' fill='#fcb982')
|
||||
path(d='m395.621 364.132c0 15.089-.644 34.475-5.723 50.715-3.305 10.559-8.268 19.091-14.74 25.373-8.426 8.173-19.333 12.491-31.529 12.491-18.626 0-42.521-9.978-61.474-20.864-3.094 1.098-6.43 1.689-9.904 1.689h-32.5c-3.474 0-6.811-.591-9.904-1.689-18.953 10.886-42.848 20.864-61.474 20.864-12.196 0-23.103-4.319-31.529-12.491-6.473-6.283-11.435-14.814-14.74-25.373-5.079-16.24-5.723-35.626-5.723-50.715 0-15.078.644-34.464 5.723-50.704 1.647-5.248 3.685-9.989 6.124-14.202l127.772 81.23 127.774-81.23c2.439 4.213 4.477 8.954 6.124 14.202 5.079 16.239 5.723 35.626 5.723 50.704z' fill='#fcb982')
|
||||
g
|
||||
g
|
||||
path(d='m246.596 364.136c0 28.465 68.564 67.456 97.028 67.456s30.882-38.991 30.882-67.456-2.417-67.456-30.882-67.456-97.028 38.991-97.028 67.456z' fill='#fb4a59')
|
||||
path(d='m374.503 364.132c0 28.467-2.418 67.461-30.874 67.461-5.332 0-12.069-1.373-19.502-3.78 15.87-10.474 17.464-40.557 17.464-63.681s-1.594-53.196-17.464-63.67c7.433-2.407 14.17-3.78 19.502-3.78 28.456-.001 30.874 38.993 30.874 67.45z' fill='#f82f40')
|
||||
path(d='m265.404 364.136c0 28.465-68.564 67.456-97.028 67.456s-30.882-38.991-30.882-67.456 2.417-67.456 30.882-67.456 97.028 38.991 97.028 67.456z' fill='#fb4a59')
|
||||
g
|
||||
path(d='m235.401 365.967c-.265 0-.532-.014-.801-.041l-37.205-3.83c-4.244-.438-7.331-4.232-6.894-8.477s4.229-7.332 8.477-6.895l37.205 3.83c4.244.438 7.331 4.232 6.894 8.477-.408 3.975-3.764 6.936-7.676 6.936z' fill='#f82f40')
|
||||
g
|
||||
path(d='m215.422 390.433c-3.587 0-6.803-2.512-7.558-6.163-.865-4.179 1.822-8.267 6.001-9.132l19.962-4.13c4.181-.862 8.267 1.822 9.131 6.001.865 4.179-1.822 8.267-6.001 9.132l-19.962 4.13c-.528.108-1.055.162-1.573.162z' fill='#f82f40')
|
||||
g
|
||||
path(d='m307.397 394.853c-.288 0-.578-.016-.871-.049l-28.924-3.245c-4.24-.476-7.292-4.299-6.816-8.539.475-4.241 4.295-7.304 8.54-6.817l28.924 3.245c4.24.476 7.292 4.299 6.816 8.539-.443 3.949-3.787 6.866-7.669 6.866z' fill='#f82f40')
|
||||
g
|
||||
path(d='m278.454 369.181c-3.74 0-7.027-2.721-7.624-6.532-.66-4.216 2.222-8.169 6.438-8.829l35.114-5.497c4.216-.658 8.169 2.223 8.828 6.439.66 4.216-2.222 8.169-6.438 8.829l-35.114 5.497c-.404.063-.806.093-1.204.093z' fill='#f82f40')
|
||||
path(d='m239.745 315.85h32.509c4.883 0 8.842 3.959 8.842 8.842v78.888c0 4.883-3.959 8.842-8.842 8.842h-32.509c-4.883 0-8.842-3.959-8.842-8.842v-78.888c0-4.883 3.959-8.842 8.842-8.842z' fill='#fc9aa1')
|
||||
tr
|
||||
td
|
||||
p(style='font-size: 18px;')
|
||||
b Hi John Doe,
|
||||
p(style='font-size: 14px;color:#aba8a8;') Order Is Successfully Processsed And Your Order Is On The Way,
|
||||
p(style='font-size: 14px;color:#aba8a8;') Transaction ID : 267676GHERT105467,
|
||||
table(cellpadding='0', cellspacing='0', border='0', align='left', style='width: 100%;margin-top: 10px; margin-bottom: 10px;')
|
||||
tbody
|
||||
tr
|
||||
td(style='background-color: #fafafa;padding: 15px;letter-spacing: 0.3px;width: 50%;')
|
||||
h5(style='font-size: 16px; font-weight: 600;color: #000; line-height: 16px; padding-bottom: 13px; border-bottom: 1px solid #e6e8eb; letter-spacing: -0.65px; margin-top:0; margin-bottom: 13px;') Your Shipping Address
|
||||
p(style='text-align: left;font-weight: normal; font-size: 14px; color: #aba8a8;line-height: 21px; margin-top: 0;')
|
||||
| 268 Cambridge Lane New Albany,
|
||||
br
|
||||
| IN 47150268 Cambridge Lane
|
||||
br
|
||||
| New Albany, IN 47150
|
||||
td
|
||||
img(src='../assets/images/email-template/space.jpg', alt=' ', height='25', width='30')
|
||||
td(style='background-color: #fafafa;padding: 15px;letter-spacing: 0.3px;width: 50%;')
|
||||
h5(style='font-size: 16px;font-weight: 600;color: #000; line-height: 16px; padding-bottom: 13px; border-bottom: 1px solid #e6e8eb; letter-spacing: -0.65px; margin-top:0; margin-bottom: 13px;') Your Billing Address:
|
||||
p(style='text-align: left;font-weight: normal; font-size: 14px; color: #aba8a8;line-height: 21px; margin-top: 0;')
|
||||
| 268 Cambridge Lane New Albany,
|
||||
br
|
||||
| IN 47150268 Cambridge Lane
|
||||
br
|
||||
| New Albany, IN 47150
|
||||
table.order-detail(border='0', cellpadding='0', cellspacing='0', align='left', style='width: 100%; margin-bottom: 50px;')
|
||||
tbody
|
||||
tr(align='left')
|
||||
th PRODUCT
|
||||
th(style='padding-left: 15px;') DESCRIPTION
|
||||
th QUANTITY
|
||||
th PRICE
|
||||
tr
|
||||
td
|
||||
img(src='../assets/images/email-template/4.png', alt='', width='80')
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='margin-top: 15px;') Three seater Wood Style sofa for Leavingroom
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='font-size: 14px; color:#444;margin-top:15px; margin-bottom: 0px;')
|
||||
| Size :
|
||||
span L
|
||||
h5(style='font-size: 14px; color:#444;margin-top: 10px;')
|
||||
| QTY :
|
||||
span 1
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='font-size: 14px; color:#444;margin-top:15px')
|
||||
b $500
|
||||
tr
|
||||
td
|
||||
img(src='../assets/images/email-template/1.png', alt='', width='80')
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='margin-top: 15px;') Three seater Wood Style sofa for Leavingroom
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='font-size: 14px; color:#444;margin-top:15px; margin-bottom: 0px;')
|
||||
| Size :
|
||||
span L
|
||||
h5(style='font-size: 14px; color:#444;margin-top: 10px;')
|
||||
| QTY :
|
||||
span 1
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='font-size: 14px; color:#444;margin-top:15px')
|
||||
b $500
|
||||
tr
|
||||
td
|
||||
img(src='../assets/images/email-template/4.png', alt='', width='80')
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='margin-top: 15px;') Three seater Wood Style sofa for Leavingroom
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='font-size: 14px; color:#444;margin-top:15px; margin-bottom: 0px;')
|
||||
| Size :
|
||||
span L
|
||||
h5(style='font-size: 14px; color:#444;margin-top: 10px;')
|
||||
| QTY :
|
||||
span 1
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='font-size: 14px; color:#444;margin-top:15px')
|
||||
b $500
|
||||
tr
|
||||
td
|
||||
img(src='../assets/images/email-template/1.png', alt='', width='80')
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='margin-top: 15px;') Three seater Wood Style sofa for Leavingroom
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='font-size: 14px; color:#444;margin-top:15px; margin-bottom: 0px;')
|
||||
| Size :
|
||||
span L
|
||||
h5(style='font-size: 14px; color:#444;margin-top: 10px;')
|
||||
| QTY :
|
||||
span 1
|
||||
td(valign='top', style='padding-left: 15px;')
|
||||
h5(style='font-size: 14px; color:#444;margin-top:15px')
|
||||
b $500
|
||||
tr.pad-left-right-space
|
||||
td.m-t-5(colspan='2', align='left')
|
||||
p(style='font-size: 14px;') Subtotal :
|
||||
td.m-t-5(colspan='2', align='right')
|
||||
b(style='') $2000
|
||||
tr.pad-left-right-space
|
||||
td(colspan='2', align='left')
|
||||
p(style='font-size: 14px;') TAX :
|
||||
td(colspan='2', align='right')
|
||||
b $5
|
||||
tr.pad-left-right-space
|
||||
td(colspan='2', align='left')
|
||||
p(style='font-size: 14px;') VAT :
|
||||
td(colspan='2', align='right')
|
||||
b $5
|
||||
tr.pad-left-right-space
|
||||
td(colspan='2', align='left')
|
||||
p(style='font-size: 14px;') SHIPPING Charge :
|
||||
td(colspan='2', align='right')
|
||||
b $2
|
||||
tr.pad-left-right-space
|
||||
td(colspan='2', align='left')
|
||||
p(style='font-size: 14px;') Discount :
|
||||
td(colspan='2', align='right')
|
||||
b $1000
|
||||
tr.pad-left-right-space
|
||||
td.m-b-5(colspan='2', align='left')
|
||||
p(style='font-size: 14px;') Total :
|
||||
td.m-b-5(colspan='2', align='right')
|
||||
b $2600
|
||||
table.main-bg-light.text-center.top-0(align='center', border='0', cellpadding='0', cellspacing='0', width='100%')
|
||||
tbody
|
||||
tr
|
||||
td(style='padding: 30px;')
|
||||
div
|
||||
h4.title(style='margin:0;text-align: center;') Follow us
|
||||
table(border='0', cellpadding='0', cellspacing='0', align='center', style='margin-top:20px;')
|
||||
tbody
|
||||
tr.temp-social
|
||||
td
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-facebook
|
||||
td
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-youtube-play
|
||||
td
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-twitter
|
||||
td
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-google-plus
|
||||
td
|
||||
a(href='javascript:void(0)')
|
||||
i.fa.fa-linkedin
|
||||
div(style='border-top: 1px solid #ddd; margin: 20px auto 0;')
|
||||
table(border='0', cellpadding='0', cellspacing='0', width='100%', style='margin: 20px auto 0;')
|
||||
tbody
|
||||
tr
|
||||
td
|
||||
a(href='javascript:void(0)', style='color: #24695c;font-size:14px;text-transform: capitalize;font-weight:600;') Want to change how you receive these emails?
|
||||
tr
|
||||
td
|
||||
p(style='font-size:14px; margin:8px 0;color:#aba8a8;') 2023 - 24 Copy Right by Themeforest powerd by Pixel Strap
|
||||
tr
|
||||
td
|
||||
a(href='javascript:void(0)', style='color: #24695c;font-size: 14px;text-transform: capitalize;font-weight:600; margin:0;text-decoration: underline;') Unsubscribe
|
||||
126
public/assets/pug/pages/template/edit-profile.pug
Normal file
126
public/assets/pug/pages/template/edit-profile.pug
Normal file
@@ -0,0 +1,126 @@
|
||||
- var theme_customizer = true;
|
||||
|
||||
doctype html
|
||||
html(lang='en')
|
||||
include ../../components/header-files
|
||||
body
|
||||
include ../../components/loader
|
||||
// page-wrapper Start
|
||||
#pageWrapper.page-wrapper
|
||||
include ../../components/header
|
||||
// Page Body Start
|
||||
.page-body-wrapper.horizontal-menu
|
||||
include ../../components/sidebar
|
||||
.page-body
|
||||
.container-fluid
|
||||
.page-header
|
||||
.row
|
||||
.col-sm-6
|
||||
h3
|
||||
| Edit Profile
|
||||
ol.breadcrumb
|
||||
li.breadcrumb-item
|
||||
a(href='index.html')
|
||||
| Home
|
||||
li.breadcrumb-item Users
|
||||
li.breadcrumb-item.active Edit Profile
|
||||
.col-sm-6
|
||||
include ../../components/bookmark
|
||||
// Container-fluid starts
|
||||
.container-fluid
|
||||
.edit-profile
|
||||
.row
|
||||
.col-xl-4
|
||||
.card
|
||||
.card-header.pb-0
|
||||
h4.card-title.mb-0 My Profile
|
||||
.card-options
|
||||
a.card-options-collapse(href='#', data-bs-toggle='card-collapse')
|
||||
i.fe.fe-chevron-up
|
||||
a.card-options-remove(href='#', data-bs-toggle='card-remove')
|
||||
i.fe.fe-x
|
||||
.card-body
|
||||
form
|
||||
.row.mb-2
|
||||
.profile-title
|
||||
.media
|
||||
img.img-70.rounded-circle(alt='', src='../assets/images/user/7.jpg')
|
||||
.media-body
|
||||
h3.mb-1.f-20.txt-primary MARK JECNO
|
||||
p.f-12 DESIGNER
|
||||
.mb-3
|
||||
h6.form-label Bio
|
||||
textarea.form-control(rows='5') On the other hand, we denounce with righteous indignation
|
||||
.mb-3
|
||||
label.form-label Email-Address
|
||||
input.form-control(placeholder='your-email@domain.com')
|
||||
.mb-3
|
||||
label.form-label Password
|
||||
input.form-control(type='password', value='password')
|
||||
.mb-3
|
||||
label.form-label Website
|
||||
input.form-control(placeholder='http://Uplor .com')
|
||||
.form-footer
|
||||
button.btn.btn-primary.btn-block Save
|
||||
.col-xl-8
|
||||
form.card
|
||||
.card-header.pb-0
|
||||
h4.card-title.mb-0 Edit Profile
|
||||
.card-options
|
||||
a.card-options-collapse(href='#', data-bs-toggle='card-collapse')
|
||||
i.fe.fe-chevron-up
|
||||
a.card-options-remove(href='#', data-bs-toggle='card-remove')
|
||||
i.fe.fe-x
|
||||
.card-body
|
||||
.row
|
||||
.col-md-5
|
||||
.mb-3
|
||||
label.form-label Company
|
||||
input.form-control(type='text', placeholder='Company')
|
||||
.col-sm-6.col-md-3
|
||||
.mb-3
|
||||
label.form-label Username
|
||||
input.form-control(type='text', placeholder='Username')
|
||||
.col-sm-6.col-md-4
|
||||
.mb-3
|
||||
label.form-label Email address
|
||||
input.form-control(type='email', placeholder='Email')
|
||||
.col-sm-6.col-md-6
|
||||
.mb-3
|
||||
label.form-label First Name
|
||||
input.form-control(type='text', placeholder='Company')
|
||||
.col-sm-6.col-md-6
|
||||
.mb-3
|
||||
label.form-label Last Name
|
||||
input.form-control(type='text', placeholder='Last Name')
|
||||
.col-md-12
|
||||
.mb-3
|
||||
label.form-label Address
|
||||
input.form-control(type='text', placeholder='Home Address')
|
||||
.col-sm-6.col-md-4
|
||||
.mb-3
|
||||
label.form-label City
|
||||
input.form-control(type='text', placeholder='City')
|
||||
.col-sm-6.col-md-3
|
||||
.mb-3
|
||||
label.form-label Postal Code
|
||||
input.form-control(type='number', placeholder='ZIP Code')
|
||||
.col-md-5
|
||||
.mb-3
|
||||
label.form-label Country
|
||||
select.form-control.btn-square
|
||||
option(value='0') --Select--
|
||||
option(value='1') Germany
|
||||
option(value='2') Canada
|
||||
option(value='3') Usa
|
||||
option(value='4') Aus
|
||||
.col-md-12
|
||||
div
|
||||
label.form-label About Me
|
||||
textarea.form-control(rows='5', placeholder='Enter About your description')
|
||||
.card-footer.text-end
|
||||
button.btn.btn-primary(type='submit') Update Profile
|
||||
|
||||
// Container-fluid Ends
|
||||
include ../../components/footer
|
||||
include ../../components/footer-files
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user