epi/EpiWebview
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 6 Wiki Activity

commit message

Browse Source
This commit is contained in:
Leopold Strobl
2025-10-09 12:14:29 +02:00
commit 684ab3a132
830 changed files with 161115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/assets/demo/chart-area-demo.js Normal file
View File

@@ -0,0 +1,54 @@
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
datasets: [{
label: "Sessions",
lineTension: 0.3,
backgroundColor: "rgba(2,117,216,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 5,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
min: 0,
max: 40000,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});

46
src/assets/demo/chart-bar-demo.js Normal file
View File

@@ -0,0 +1,46 @@
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Bar Chart Example
var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: "Revenue",
backgroundColor: "rgba(2,117,216,1)",
borderColor: "rgba(2,117,216,1)",
data: [4215, 5312, 6251, 7841, 9821, 14984],
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'month'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 6
}
}],
yAxes: [{
ticks: {
min: 0,
max: 15000,
maxTicksLimit: 5
},
gridLines: {
display: true
}
}],
},
legend: {
display: false
}
}
});

16
src/assets/demo/chart-pie-demo.js Normal file
View File

@@ -0,0 +1,16 @@
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Blue", "Red", "Yellow", "Green"],
datasets: [{
data: [12.21, 15.58, 11.25, 8.32],
backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
}],
},
});

4
src/assets/demo/datatables-demo.js Normal file
View File

@@ -0,0 +1,4 @@
// Call the dataTables jQuery plugin
$(document).ready(function() {
$('#dataTable').DataTable();
});

1
src/assets/img/error-404-monochrome.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

17
src/js/scripts.js Normal file
View File

@@ -0,0 +1,17 @@
(function($) {
"use strict";
// Add active state to sidbar nav links
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
$("#layoutSidenav_nav .sb-sidenav a.nav-link").each(function() {
if (this.href === path) {
$(this).addClass("active");
}
});
// Toggle the side navigation
$("#sidebarToggle").on("click", function(e) {
e.preventDefault();
$("body").toggleClass("sb-sidenav-toggled");
});
})(jQuery);

29
src/pug/layouts/authentication.pug Normal file
View File

@@ -0,0 +1,29 @@
doctype html
block config
- var pageTitle = "Page Title"
html(lang='en')
head
include includes/head/meta.pug
include includes/head/title.pug
include includes/head/css.pug
include includes/head/icons.pug
body.bg-primary
#layoutAuthentication
#layoutAuthentication_content
main
block content
#layoutAuthentication_footer
include includes/footer.pug
include includes/scripts.pug

33
src/pug/layouts/dashboard.pug Normal file
View File

@@ -0,0 +1,33 @@
doctype html
block config
- var pageTitle = "Page Title"
html(lang='en')
head
include includes/head/meta.pug
include includes/head/title.pug
include includes/head/css.pug
include includes/head/icons.pug
body(class=bodyClass)
include includes/navigation/topnav.pug
#layoutSidenav
#layoutSidenav_nav
include includes/navigation/sidenav.pug
#layoutSidenav_content
main
block content
include includes/footer.pug
include includes/scripts.pug

29
src/pug/layouts/error.pug Normal file
View File

@@ -0,0 +1,29 @@
doctype html
block config
- var pageTitle = "404 Error"
html(lang='en')
head
include includes/head/meta.pug
include includes/head/title.pug
include includes/head/css.pug
include includes/head/icons.pug
body
#layoutError
#layoutError_content
main
block content
#layoutError_footer
include includes/footer.pug
include includes/scripts.pug

11
src/pug/layouts/includes/footer.pug Normal file
View File

@@ -0,0 +1,11 @@
footer.py-4.bg-light.mt-auto
.container-fluid
.d-flex.align-items-center.justify-content-between.small
.text-muted
| Copyright © Your Website 2020
div
a(href='#') Privacy Policy
|
| ·
|
a(href='#') Terms & Conditions

2
src/pug/layouts/includes/head/css.pug Normal file
View File

@@ -0,0 +1,2 @@
block css
link(href='css/styles.css', rel='stylesheet')

1
src/pug/layouts/includes/head/icons.pug Normal file
View File

@@ -0,0 +1 @@
script(src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js', crossorigin="anonymous")

6
src/pug/layouts/includes/head/meta.pug Normal file
View File

@@ -0,0 +1,6 @@
block meta
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
meta(name='description', content='')
meta(name='author', content='')

1
src/pug/layouts/includes/head/title.pug Normal file
View File

@@ -0,0 +1 @@
title #{pageTitle} - SB Admin

72
src/pug/layouts/includes/navigation/sidenav.pug Normal file
View File

@@ -0,0 +1,72 @@
nav(class=['sb-sidenav', 'accordion'] class=sidenavStyle)#sidenavAccordion
.sb-sidenav-menu
.nav
.sb-sidenav-menu-heading
| Core
a.nav-link(href='index.html')
.sb-nav-link-icon
i.fas.fa-tachometer-alt
| Dashboard
.sb-sidenav-menu-heading
| Interface
a.nav-link.collapsed(href='#', data-toggle='collapse' data-target='#collapseLayouts' aria-expanded='false' aria-controls='collapseLayouts')
.sb-nav-link-icon
i.fas.fa-columns
| Layouts
.sb-sidenav-collapse-arrow
i.fas.fa-angle-down
#collapseLayouts.collapse(aria-labelledby='headingOne', data-parent='#sidenavAccordion')
nav.sb-sidenav-menu-nested.nav
a.nav-link(href='layout-static.html') Static Navigation
a.nav-link(href='layout-sidenav-light.html') Light Sidenav
a.nav-link.collapsed(href='#', data-toggle='collapse' data-target='#collapsePages' aria-expanded='false' aria-controls='collapsePages')
.sb-nav-link-icon
i.fas.fa-book-open
| Pages
.sb-sidenav-collapse-arrow
i.fas.fa-angle-down
#collapsePages.collapse(aria-labelledby='headingTwo', data-parent='#sidenavAccordion')
nav.sb-sidenav-menu-nested.nav.accordion#sidenavAccordionPages
a.nav-link.collapsed(href='#', data-toggle='collapse' data-target='#pagesCollapseAuth' aria-expanded='false' aria-controls='pagesCollapseAuth')
| Authentication
.sb-sidenav-collapse-arrow
i.fas.fa-angle-down
#pagesCollapseAuth.collapse(aria-labelledby='headingOne', data-parent='#sidenavAccordionPages')
nav.sb-sidenav-menu-nested.nav
a.nav-link(href='login.html') Login
a.nav-link(href='register.html') Register
a.nav-link(href='password.html') Forgot Password
a.nav-link.collapsed(href='#', data-toggle='collapse' data-target='#pagesCollapseError' aria-expanded='false' aria-controls='pagesCollapseError')
| Error
.sb-sidenav-collapse-arrow
i.fas.fa-angle-down
#pagesCollapseError.collapse(aria-labelledby='headingOne', data-parent='#sidenavAccordionPages')
nav.sb-sidenav-menu-nested.nav
a.nav-link(href='401.html') 401 Page
a.nav-link(href='404.html') 404 Page
a.nav-link(href='500.html') 500 Page
.sb-sidenav-menu-heading
| Addons
a.nav-link(href='charts.html')
.sb-nav-link-icon
i.fas.fa-chart-area
| Charts
a.nav-link(href='tables.html')
.sb-nav-link-icon
i.fas.fa-table
| Tables
.sb-sidenav-footer
.small Logged in as:
| Start Bootstrap

22
src/pug/layouts/includes/navigation/topnav.pug Normal file
View File

@@ -0,0 +1,22 @@
nav.sb-topnav.navbar.navbar-expand.navbar-dark.bg-dark
a.navbar-brand(href='index.html')
| Start Bootstrap
button#sidebarToggle.btn.btn-link.btn-sm.order-1.order-lg-0(href='#')
i.fas.fa-bars
// Navbar Search
form.d-none.d-md-inline-block.form-inline.ml-auto.mr-0.mr-md-3.my-2.my-md-0
.input-group
input.form-control(type='text', placeholder='Search for...', aria-label='Search', aria-describedby='basic-addon2')
.input-group-append
button.btn.btn-primary(type='button')
i.fas.fa-search
// Navbar
ul.navbar-nav.ml-auto.ml-md-0
li.nav-item.dropdown
a#userDropdown.nav-link.dropdown-toggle(href='#', role='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
i.fas.fa-user.fa-fw
.dropdown-menu.dropdown-menu-right(aria-labelledby='userDropdown')
a.dropdown-item(href='#') Settings
a.dropdown-item(href='#') Activity Log
.dropdown-divider
a.dropdown-item(href='login.html') Logout

7
src/pug/layouts/includes/scripts.pug Normal file
View File

@@ -0,0 +1,7 @@
block scripts
//- Load jQuery
script(src='https://code.jquery.com/jquery-3.5.1.slim.min.js', crossorigin='anonymous')
//- Load Bootstrap JS Bundle
script(src='https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js', crossorigin='anonymous')
//- Load Global Template Scripts
script(src='js/scripts.js')

13
src/pug/pages/401.pug Normal file
View File

@@ -0,0 +1,13 @@
extends ../layouts/error.pug
block content
.container
.row.justify-content-center
.col-lg-6
.text-center.mt-4
h1.display-1 401
p.lead Unauthorized
p Access to this resource is denied.
a(href='index.html')
i.fas.fa-arrow-left.mr-1
| Return to Dashboard

12
src/pug/pages/404.pug Normal file
View File

@@ -0,0 +1,12 @@
extends ../layouts/error.pug
block content
.container
.row.justify-content-center
.col-lg-6
.text-center.mt-4
img.mb-4.img-error(src='assets/img/error-404-monochrome.svg')
p.lead This requested URL was not found on this server.
a(href='index.html')
i.fas.fa-arrow-left.mr-1
| Return to Dashboard

12
src/pug/pages/500.pug Normal file
View File

@@ -0,0 +1,12 @@
extends ../layouts/error.pug
block content
.container
.row.justify-content-center
.col-lg-6
.text-center.mt-4
h1.display-1 500
p.lead Internal Server Error
a(href='index.html')
i.fas.fa-arrow-left.mr-1
| Return to Dashboard

43
src/pug/pages/charts.pug Normal file
View File

@@ -0,0 +1,43 @@
extends ../layouts/dashboard.pug
block config
- var bodyClass = 'sb-nav-fixed'
- var pageTitle = 'Charts'
- var sidenavStyle = 'sb-sidenav-dark'
block content
.container-fluid
include includes/page-header.pug
.card.mb-4
.card-body.
Chart.js is a third party plugin that is used to generate the charts in this template. The charts below have been customized - for further customization options, please visit the official <a target='_blank' href='https://www.chartjs.org/docs/latest/'>Chart.js documentation</a>.
.card.mb-4
.card-header
i.fas.fa-chart-area.mr-1
| Area Chart Example
.card-body
canvas#myAreaChart(width='100%', height='30')
.card-footer.small.text-muted Updated yesterday at 11:59 PM
.row
.col-lg-6
.card.mb-4
.card-header
i.fas.fa-chart-bar.mr-1
| Bar Chart Example
.card-body
canvas#myBarChart(width='100%', height='50')
.card-footer.small.text-muted Updated yesterday at 11:59 PM
.col-lg-6
.card.mb-4
.card-header
i.fas.fa-chart-pie.mr-1
| Pie Chart Example
.card-body
canvas#myPieChart(width='100%', height='50')
.card-footer.small.text-muted Updated yesterday at 11:59 PM
append scripts
script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js', crossorigin='anonymous')
script(src='assets/demo/chart-area-demo.js')
script(src='assets/demo/chart-bar-demo.js')
script(src='assets/demo/chart-pie-demo.js')

418
src/pug/pages/includes/datatable.pug Normal file
View File

@@ -0,0 +1,418 @@
.table-responsive
table#dataTable.table.table-bordered(width='100%', cellspacing='0')
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
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

9
src/pug/pages/includes/page-header.pug Normal file
View File

@@ -0,0 +1,9 @@
h1.mt-4 #{pageTitle}
if index
ol.breadcrumb.mb-4
li.breadcrumb-item.active #{pageTitle}
else
ol.breadcrumb.mb-4
li.breadcrumb-item
a(href='index.html') Dashboard
li.breadcrumb-item.active #{pageTitle}

85
src/pug/pages/index.pug Normal file
View File

@@ -0,0 +1,85 @@
extends ../layouts/dashboard.pug
block config
- var bodyClass = 'sb-nav-fixed'
- var pageTitle = 'Dashboard';
- var index = true;
- var sidenavStyle = 'sb-sidenav-dark'
append css
link(href='https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css', rel='stylesheet', crossorigin='anonymous')
block content
.container-fluid
include includes/page-header.pug
.row
.col-xl-3.col-md-6
.card.bg-primary.text-white.mb-4
.card-body
| Primary Card
.card-footer.d-flex.align-items-center.justify-content-between
a(href='#').small.text-white.stretched-link
| View Details
.small.text-white
i.fas.fa-angle-right
.col-xl-3.col-md-6
.card.bg-warning.text-white.mb-4
.card-body
| Warning Card
.card-footer.d-flex.align-items-center.justify-content-between
a(href='#').small.text-white.stretched-link
| View Details
.small.text-white
i.fas.fa-angle-right
.col-xl-3.col-md-6
.card.bg-success.text-white.mb-4
.card-body
| Success Card
.card-footer.d-flex.align-items-center.justify-content-between
a(href='#').small.text-white.stretched-link
| View Details
.small.text-white
i.fas.fa-angle-right
.col-xl-3.col-md-6
.card.bg-danger.text-white.mb-4
.card-body
| Danger Card
.card-footer.d-flex.align-items-center.justify-content-between
a(href='#').small.text-white.stretched-link
| View Details
.small.text-white
i.fas.fa-angle-right
.row
.col-xl-6
.card.mb-4
.card-header
i.fas.fa-chart-area.mr-1
| Area Chart Example
.card-body
canvas#myAreaChart(width='100%', height='40')
.col-xl-6
.card.mb-4
.card-header
i.fas.fa-chart-bar.mr-1
| Bar Chart Example
.card-body
canvas#myBarChart(width='100%', height='40')
.card.mb-4
.card-header
i.fas.fa-table.mr-1
| DataTable Example
.card-body
include includes/datatable.pug
append scripts
script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js', crossorigin='anonymous')
script(src='assets/demo/chart-area-demo.js')
script(src='assets/demo/chart-bar-demo.js')
script(src='https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js', crossorigin='anonymous')
script(src='https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js', crossorigin='anonymous')
script(src='assets/demo/datatables-demo.js')

14
src/pug/pages/layout-sidenav-light.pug Normal file
View File

@@ -0,0 +1,14 @@
extends ../layouts/dashboard.pug
block config
- var bodyClass = 'sb-nav-fixed'
- var pageTitle = 'Sidenav Light'
- var sidenavStyle = 'sb-sidenav-light'
block content
.container-fluid
include includes/page-header.pug
.card.mb-4
.card-body.
This page is an example of using the light side navigation option. By appending the <code>.sb-sidenav-light</code> class to the <code>.sb-sidenav</code> class, the side navigation will take on a light color scheme. The <code>.sb-sidenav-dark</code> is also available for a darker option.

20
src/pug/pages/layout-static.pug Normal file
View File

@@ -0,0 +1,20 @@
extends ../layouts/dashboard.pug
block config
- var pageTitle = 'Static Navigation'
- var sidenavStyle = 'sb-sidenav-dark'
block content
.container-fluid
include includes/page-header.pug
.card.mb-4
.card-body
p.mb-0.
This page is an example of using static navigation. By removing the <code>.sb-nav-fixed</code> class from the <code>body</code>, the top navigation and side navigation will become static on scroll. Scroll down this page to see an example.
div(style='height: 100vh;')
.card.mb-4
.card-body
| When scrolling, the navigation stays at the top of the page. This is the end of the static navigation demo.

27
src/pug/pages/login.pug Normal file
View File

@@ -0,0 +1,27 @@
extends ../layouts/authentication.pug
block content
.container
.row.justify-content-center
.col-lg-5
.card.shadow-lg.border-0.rounded-lg.mt-5
.card-header
h3.text-center.font-weight-light.my-4 Login
.card-body
form
.form-group
label.small.mb-1(for='inputEmailAddress') Email
input#inputEmailAddress.form-control.py-4(type='email', placeholder='Enter email address')
.form-group
label.small.mb-1(for='inputPassword') Password
input#inputPassword.form-control.py-4(type='password', placeholder='Enter password')
.form-group
.custom-control.custom-checkbox
input#rememberPasswordCheck.custom-control-input(type='checkbox')
label.custom-control-label(for='rememberPasswordCheck') Remember password
.form-group.d-flex.align-items-center.justify-content-between.mt-4.mb-0
a.small(href='password.html') Forgot Password?
a.btn.btn-primary(href='index.html') Login
.card-footer.text-center
.small
a(href='register.html') Need an account? Sign up!

21
src/pug/pages/password.pug Normal file
View File

@@ -0,0 +1,21 @@
extends ../layouts/authentication.pug
block content
.container
.row.justify-content-center
.col-lg-5
.card.shadow-lg.border-0.rounded-lg.mt-5
.card-header
h3.text-center.font-weight-light.my-4 Password Recovery
.card-body
.small.mb-3.text-muted Enter your email address and we will send you a link to reset your password.
form
.form-group
label.small.mb-1(for='inputEmailAddress') Email
input#inputEmailAddress.form-control.py-4(type='email', aria-describedby='emailHelp', placeholder='Enter email address')
.form-group.d-flex.align-items-center.justify-content-between.mt-4.mb-0
a.small(href='login.html') Return to login
a.btn.btn-primary(href='login.html') Reset Password
.card-footer.text-center
.small
a(href='register.html') Need an account? Sign up!

37
src/pug/pages/register.pug Normal file
View File

@@ -0,0 +1,37 @@
extends ../layouts/authentication.pug
block content
.container
.row.justify-content-center
.col-lg-7
.card.shadow-lg.border-0.rounded-lg.mt-5
.card-header
h3.text-center.font-weight-light.my-4 Create Account
.card-body
form
.form-row
.col-md-6
.form-group
label.small.mb-1(for='inputFirstName') First Name
input#inputFirstName.form-control.py-4(type='text', placeholder='Enter first name')
.col-md-6
.form-group
label.small.mb-1(for='inputLastName') Last Name
input#inputLastName.form-control.py-4(type='text', placeholder='Enter last name')
.form-group
label.small.mb-1(for='inputEmailAddress') Email
input#inputEmailAddress.form-control.py-4(type='email', aria-describedby='emailHelp', placeholder='Enter email address')
.form-row
.col-md-6
.form-group
label.small.mb-1(for='inputPassword') Password
input#inputPassword.form-control.py-4(type='password', placeholder='Enter password')
.col-md-6
.form-group
label.small.mb-1(for='inputConfirmPassword') Confirm Password
input#inputConfirmPassword.form-control.py-4(type='password', placeholder='Confirm password')
.form-group.mt-4.mb-0
a.btn.btn-primary.btn-block(href='login.html') Create Account
.card-footer.text-center
.small
a(href='login.html') Have an account? Go to login

28
src/pug/pages/tables.pug Normal file
View File

@@ -0,0 +1,28 @@
extends ../layouts/dashboard.pug
block config
- var bodyClass = 'sb-nav-fixed'
- var pageTitle = 'Tables'
- var sidenavStyle = 'sb-sidenav-dark'
append css
link(href='https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css', rel='stylesheet', crossorigin='anonymous')
block content
.container-fluid
include includes/page-header.pug
.card.mb-4
.card-body.
DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the <a target='_blank' href='https://datatables.net/'>official DataTables documentation</a>.
.card.mb-4
.card-header
i.fas.fa-table.mr-1
| DataTable Example
.card-body
include includes/datatable.pug
append scripts
script(src='https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js', crossorigin='anonymous')
script(src='https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js', crossorigin='anonymous')
script(src='assets/demo/datatables-demo.js')

14
src/scss/_global.scss Normal file
View File

@@ -0,0 +1,14 @@
// Global styling for this template
html,
body {
height: 100%;
}
// Set spacing on containers for page symmetry
.container,
.container-fluid {
padding-left: $grid-gutter-width;
padding-right: $grid-gutter-width;
}

9
src/scss/_variables.scss Normal file
View File

@@ -0,0 +1,9 @@
// Import Bootstrap variables for use within theme
@import "bootstrap/scss/functions.scss";
@import "bootstrap/scss/variables.scss";
// Import spacing variables
@import "./variables/spacing.scss";
// Import navigation variables
@import "./variables/navigation.scss";

12
src/scss/layout/_authentication.scss Normal file
View File

@@ -0,0 +1,12 @@
#layoutAuthentication {
display: flex;
flex-direction: column;
min-height: 100vh;
#layoutAuthentication_content {
min-width: 0;
flex-grow: 1;
}
#layoutAuthentication_footer {
min-width: 0;
}
}

78
src/scss/layout/_dashboard-default.scss Normal file
View File

@@ -0,0 +1,78 @@
// Default behavior for the sidenav layout
// The default positioning for the sidenav is a static position
#layoutSidenav {
display: flex;
// Wraps the .sb-sidenav element and sets the size
#layoutSidenav_nav {
flex-basis: $sidenav-base-width;
flex-shrink: 0;
transition: transform 0.15s ease-in-out;
z-index: $zindex-sidenav;
// Mobile first transform - by default the sidenav will be moved off-canvas
transform: translateX(-$sidenav-base-width);
}
// Wraps the content when using the sidenav layout
#layoutSidenav_content {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
flex-grow: 1;
min-height: calc(100vh - #{$topnav-base-height});
margin-left: -$sidenav-base-width;
}
}
// Default behavior for the static sidenav collapse
.sb-sidenav-toggled {
#layoutSidenav {
#layoutSidenav_nav {
transform: translateX(0);
}
#layoutSidenav_content {
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $black;
z-index: $zindex-content;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
}
}
}
// Responsive styling for the sidenav layout
@include media-breakpoint-up(lg) {
#layoutSidenav {
#layoutSidenav_nav {
transform: translateX(0);
}
#layoutSidenav_content {
margin-left: 0;
transition: margin 0.15s ease-in-out;
}
}
// Behavior for the sidenav collapse on screens larger than the med breakpoint
.sb-sidenav-toggled {
#layoutSidenav {
#layoutSidenav_nav {
transform: translateX(-$sidenav-base-width);
}
#layoutSidenav_content {
margin-left: -$sidenav-base-width;
// Removes the sidenav overlay on screens larger than the med breakpoint
&:before {
display: none;
}
}
}
}
}

24
src/scss/layout/_dashboard-fixed.scss Normal file
View File

@@ -0,0 +1,24 @@
.sb-nav-fixed {
.sb-topnav {
@extend .fixed-top;
z-index: $zindex-topnav;
}
#layoutSidenav {
#layoutSidenav_nav {
@extend .fixed-top;
width: $sidenav-base-width;
height: 100vh;
z-index: $zindex-sidenav;
.sb-sidenav {
padding-top: $topnav-base-height;
.sb-sidenav-menu {
overflow-y: auto;
}
}
}
#layoutSidenav_content {
padding-left: $sidenav-base-width;
top: $topnav-base-height;
}
}
}

16
src/scss/layout/_error.scss Normal file
View File

@@ -0,0 +1,16 @@
#layoutError {
display: flex;
flex-direction: column;
min-height: 100vh;
#layoutError_content {
min-width: 0;
flex-grow: 1;
}
#layoutError_footer {
min-width: 0;
}
}
.img-error {
max-width: 20rem;
}

7
src/scss/navigation/_nav.scss Normal file
View File

@@ -0,0 +1,7 @@
// Add styling for icons used within nav links
.nav,
.sb-sidenav-menu {
.nav-link .sb-nav-link-icon {
margin-right: 0.5rem;
}
}

23
src/scss/navigation/_topnav.scss Normal file
View File

@@ -0,0 +1,23 @@
// Base styling for the topnav
.sb-topnav {
padding-left: 0;
height: $topnav-base-height;
z-index: $zindex-topnav;
.navbar-brand {
width: $sidenav-base-width;
padding-left: $navbar-padding-x;
padding-right: $navbar-padding-x;
margin: 0;
}
&.navbar-dark {
#sidebarToggle {
color: $topnav-dark-toggler-color;
}
}
&.navbar-light {
#sidebarToggle {
color: $topnav-light-toggler-color;
}
}
}

33
src/scss/navigation/sidenav/_sidenav-dark.scss Normal file
View File

@@ -0,0 +1,33 @@
// Dark theme for sidenav
// Append .sb-sidenav-dark to .sb-sidenav to use
.sb-sidenav-dark {
background-color: $sidenav-dark-bg;
color: $sidenav-dark-color;
.sb-sidenav-menu {
.sb-sidenav-menu-heading {
color: $sidenav-dark-heading-color;
}
.nav-link {
color: $sidenav-dark-link-color;
.sb-nav-link-icon {
color: $sidenav-dark-icon-color;
}
.sb-sidenav-collapse-arrow {
color: $sidenav-dark-icon-color;
}
&:hover {
color: $sidenav-dark-link-active-color;
}
&.active {
color: $sidenav-dark-link-active-color;
.sb-nav-link-icon {
color: $sidenav-dark-link-active-color;
}
}
}
}
.sb-sidenav-footer {
background-color: $sidenav-dark-footer-bg;
}
}

33
src/scss/navigation/sidenav/_sidenav-light.scss Normal file
View File

@@ -0,0 +1,33 @@
// Light theme for sidenav
// Append .sb-sidenav-light to .sb-sidenav to use
.sb-sidenav-light {
background-color: $sidenav-light-bg;
color: $sidenav-light-color;
.sb-sidenav-menu {
.sb-sidenav-menu-heading {
color: $sidenav-light-heading-color;
}
.nav-link {
color: $sidenav-light-link-color;
.sb-nav-link-icon {
color: $sidenav-light-icon-color;
}
.sb-sidenav-collapse-arrow {
color: $sidenav-light-icon-color;
}
&:hover {
color: $sidenav-light-link-active-color;
}
&.active {
color: $sidenav-light-link-active-color;
.sb-nav-link-icon {
color: $sidenav-light-link-active-color;
}
}
}
}
.sb-sidenav-footer {
background-color: $sidenav-light-footer-bg;
}
}

49
src/scss/navigation/sidenav/_sidenav.scss Normal file
View File

@@ -0,0 +1,49 @@
// Base styling for the sidenav
.sb-sidenav {
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
.sb-sidenav-menu {
flex-grow: 1;
.nav {
flex-direction: column;
flex-wrap: nowrap;
.sb-sidenav-menu-heading {
padding: 1.75rem 1rem 0.75rem;
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
}
.nav-link {
display: flex;
align-items: center;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
position: relative;
.sb-nav-link-icon {
font-size: 0.9rem;
}
.sb-sidenav-collapse-arrow {
display: inline-block;
margin-left: auto;
transition: transform 0.15s ease;
}
&.collapsed {
.sb-sidenav-collapse-arrow {
transform: rotate(-90deg);
}
}
}
.sb-sidenav-menu-nested {
margin-left: 1.5rem;
flex-direction: column;
}
}
}
.sb-sidenav-footer {
padding: 0.75rem;
flex-shrink: 0;
}
}

21
src/scss/styles.scss Normal file
View File

@@ -0,0 +1,21 @@
// Import Custom Variables
@import "variables.scss";
// Import Bootstrap
@import "bootstrap/scss/bootstrap.scss";
// Import Custom SCSS
@import "global.scss";
// Layout
@import "layout/authentication.scss";
@import "layout/dashboard-default.scss";
@import "layout/dashboard-fixed.scss";
@import "layout/error.scss";
// Navigation
@import "navigation/nav.scss";
@import "navigation/topnav.scss";
@import "navigation/sidenav/sidenav.scss";
@import "navigation/sidenav/sidenav-dark.scss";
@import "navigation/sidenav/sidenav-light.scss";

28
src/scss/variables/_navigation.scss Normal file
View File

@@ -0,0 +1,28 @@
// Z index variables
$zindex-content: 1037 !default;
$zindex-sidenav: 1038 !default;
$zindex-topnav: 1039 !default;
// Color variables for the sidenav
// -- Sidenav Dark
$sidenav-dark-bg: $gray-900;
$sidenav-dark-color: fade-out($white, 0.5);
$sidenav-dark-heading-color: fade-out($white, 0.75);
$sidenav-dark-link-color: fade-out($white, 0.5);
$sidenav-dark-link-active-color: $white;
$sidenav-dark-icon-color: fade-out($white, 0.75);
$sidenav-dark-footer-bg: $gray-800;
// -- Sidenav Light
$sidenav-light-bg: $gray-100;
$sidenav-light-color: $gray-900;
$sidenav-light-heading-color: $gray-500;
$sidenav-light-link-color: $sidenav-light-color;
$sidenav-light-link-active-color: $primary;
$sidenav-light-icon-color: $gray-500;
$sidenav-light-footer-bg: $gray-200;
// Color variables for the topnav
$topnav-dark-toggler-color: fade-out($white, 0.5);
$topnav-light-toggler-color: $gray-900;

7
src/scss/variables/_spacing.scss Normal file
View File

@@ -0,0 +1,7 @@
// Adjust column spacing for symmetry
$spacer: 1rem;
$grid-gutter-width: $spacer * 1.5;
// Spacing variables for navigation
$topnav-base-height: 56px;
$sidenav-base-width: 225px;