definicao de layout
This commit is contained in:
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
|
||||
Reference in New Issue
Block a user