Initial import from local backup (Documents-Playground/pakerpale)
This commit is contained in:
jeonghwa
6
app/templates/includes/footer.html
Normal file
6
app/templates/includes/footer.html
Normal file
@@ -0,0 +1,6 @@
|
||||
|
||||
<!-- ### $App Screen Footer ### -->
|
||||
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
|
||||
<span>© Design by Colorlib. <a href="https://appseed.us/admin-dashboards/flask-dashboard-adminator">Flask Dashboard Adminator</a>. Coded in Flask by AppSeed.
|
||||
</span>
|
||||
</footer>
|
||||
224
app/templates/includes/navigation.html
Normal file
224
app/templates/includes/navigation.html
Normal file
@@ -0,0 +1,224 @@
|
||||
|
||||
<!-- ### $Topbar ### -->
|
||||
<div class="header navbar">
|
||||
<div class="header-container">
|
||||
<ul class="nav-left">
|
||||
<li>
|
||||
<a id="sidebar-toggle" class="sidebar-toggle" href="javascript:void(0);">
|
||||
<i class="ti-menu"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="search-box">
|
||||
<a class="search-toggle no-pdd-right" href="javascript:void(0);">
|
||||
<i class="search-icon ti-search pdd-right-10"></i>
|
||||
<i class="search-icon-close ti-close pdd-right-10"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="search-input">
|
||||
<input class="form-control" type="text" placeholder="Search...">
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav-right">
|
||||
<li class="notifications dropdown">
|
||||
<span class="counter bgc-red">3</span>
|
||||
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
|
||||
<i class="ti-bell"></i>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu">
|
||||
<li class="pX-20 pY-15 bdB">
|
||||
<i class="ti-bell pR-10"></i>
|
||||
<span class="fsz-sm fw-600 c-grey-900">Notifications</span>
|
||||
</li>
|
||||
<li>
|
||||
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
|
||||
<li>
|
||||
<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
|
||||
<div class="peer mR-15">
|
||||
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed">
|
||||
<span>
|
||||
<span class="fw-500">John Doe</span>
|
||||
<span class="c-grey-600">liked your <span class="text-dark">post</span>
|
||||
</span>
|
||||
</span>
|
||||
<p class="m-0">
|
||||
<small class="fsz-xs">5 mins ago</small>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
|
||||
<div class="peer mR-15">
|
||||
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed">
|
||||
<span>
|
||||
<span class="fw-500">Moo Doe</span>
|
||||
<span class="c-grey-600">liked your <span class="text-dark">cover image</span>
|
||||
</span>
|
||||
</span>
|
||||
<p class="m-0">
|
||||
<small class="fsz-xs">7 mins ago</small>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
|
||||
<div class="peer mR-15">
|
||||
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed">
|
||||
<span>
|
||||
<span class="fw-500">Lee Doe</span>
|
||||
<span class="c-grey-600">commented on your <span class="text-dark">video</span>
|
||||
</span>
|
||||
</span>
|
||||
<p class="m-0">
|
||||
<small class="fsz-xs">10 mins ago</small>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="pX-20 pY-15 ta-c bdT">
|
||||
<span>
|
||||
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="notifications dropdown">
|
||||
<span class="counter bgc-blue">3</span>
|
||||
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
|
||||
<i class="ti-email"></i>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu">
|
||||
<li class="pX-20 pY-15 bdB">
|
||||
<i class="ti-email pR-10"></i>
|
||||
<span class="fsz-sm fw-600 c-grey-900">Emails</span>
|
||||
</li>
|
||||
<li>
|
||||
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
|
||||
<li>
|
||||
<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
|
||||
<div class="peer mR-15">
|
||||
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed">
|
||||
<div>
|
||||
<div class="peers jc-sb fxw-nw mB-5">
|
||||
<div class="peer">
|
||||
<p class="fw-500 mB-0">John Doe</p>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small class="fsz-xs">5 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="c-grey-600 fsz-sm">
|
||||
Want to create your own customized data generator for your app...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
|
||||
<div class="peer mR-15">
|
||||
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed">
|
||||
<div>
|
||||
<div class="peers jc-sb fxw-nw mB-5">
|
||||
<div class="peer">
|
||||
<p class="fw-500 mB-0">Moo Doe</p>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small class="fsz-xs">15 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="c-grey-600 fsz-sm">
|
||||
Want to create your own customized data generator for your app...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
|
||||
<div class="peer mR-15">
|
||||
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed">
|
||||
<div>
|
||||
<div class="peers jc-sb fxw-nw mB-5">
|
||||
<div class="peer">
|
||||
<p class="fw-500 mB-0">Lee Doe</p>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small class="fsz-xs">25 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<span class="c-grey-600 fsz-sm">
|
||||
Want to create your own customized data generator for your app...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="pX-20 pY-15 ta-c bdT">
|
||||
<span>
|
||||
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
|
||||
<div class="peer mR-10">
|
||||
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="fsz-sm c-grey-900">
|
||||
{{ current_user.user }}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<ul class="dropdown-menu fsz-sm">
|
||||
<li>
|
||||
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-settings mR-10"></i>
|
||||
<span>Setting</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-user mR-10"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-email mR-10"></i>
|
||||
<span>Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li>
|
||||
<a href={{ url_for('logout') }} class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-power-off mR-10"></i>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
2
app/templates/includes/scripts.html
Normal file
2
app/templates/includes/scripts.html
Normal file
@@ -0,0 +1,2 @@
|
||||
|
||||
|
||||
208
app/templates/includes/sidenav.html
Normal file
208
app/templates/includes/sidenav.html
Normal file
@@ -0,0 +1,208 @@
|
||||
|
||||
<!-- #Left Sidebar ==================== -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-inner">
|
||||
<!-- ### $Sidebar Header ### -->
|
||||
<div class="sidebar-logo">
|
||||
<div class="peers ai-c fxw-nw">
|
||||
<div class="peer peer-greed">
|
||||
<a class="sidebar-link td-n" href="https://appseed.us/admin-dashboards/flask-dashboard-adminator">
|
||||
<div class="peers ai-c fxw-nw">
|
||||
<div class="peer">
|
||||
<div class="logo">
|
||||
<img src="/static/assets/static/images/logo.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed">
|
||||
<h5 class="lh-1 mB-0 logo-text">Adminator</h5>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<div class="mobile-toggle sidebar-toggle">
|
||||
<a href="" class="td-n">
|
||||
<i class="ti-arrow-circle-left"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ### $Sidebar Menu ### -->
|
||||
<ul class="sidebar-menu scrollable pos-r">
|
||||
<li class="nav-item mT-30 actived">
|
||||
<a class="sidebar-link" href="index.html">
|
||||
<span class="icon-holder">
|
||||
<i class="c-blue-500 ti-home"></i>
|
||||
</span>
|
||||
<span class="title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="sidebar-link" href="email.html">
|
||||
<span class="icon-holder">
|
||||
<i class="c-brown-500 ti-email"></i>
|
||||
</span>
|
||||
<span class="title">Email</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="sidebar-link" href="compose.html">
|
||||
<span class="icon-holder">
|
||||
<i class="c-blue-500 ti-share"></i>
|
||||
</span>
|
||||
<span class="title">Compose</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="sidebar-link" href="calendar.html">
|
||||
<span class="icon-holder">
|
||||
<i class="c-deep-orange-500 ti-calendar"></i>
|
||||
</span>
|
||||
<span class="title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="sidebar-link" href="chat.html">
|
||||
<span class="icon-holder">
|
||||
<i class="c-deep-purple-500 ti-comment-alt"></i>
|
||||
</span>
|
||||
<span class="title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="sidebar-link" href="charts.html">
|
||||
<span class="icon-holder">
|
||||
<i class="c-indigo-500 ti-bar-chart"></i>
|
||||
</span>
|
||||
<span class="title">Charts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="sidebar-link" href="forms.html">
|
||||
<span class="icon-holder">
|
||||
<i class="c-light-blue-500 ti-pencil"></i>
|
||||
</span>
|
||||
<span class="title">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="sidebar-link" href="ui.html">
|
||||
<span class="icon-holder">
|
||||
<i class="c-pink-500 ti-palette"></i>
|
||||
</span>
|
||||
<span class="title">UI Elements</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="dropdown-toggle" href="javascript:void(0);">
|
||||
<span class="icon-holder">
|
||||
<i class="c-orange-500 ti-layout-list-thumb"></i>
|
||||
</span>
|
||||
<span class="title">Tables</span>
|
||||
<span class="arrow">
|
||||
<i class="ti-angle-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a class="sidebar-link" href="basic-table.html">Basic Table</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="sidebar-link" href="datatable.html">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="dropdown-toggle" href="javascript:void(0);">
|
||||
<span class="icon-holder">
|
||||
<i class="c-purple-500 ti-map"></i>
|
||||
</span>
|
||||
<span class="title">Maps</span>
|
||||
<span class="arrow">
|
||||
<i class="ti-angle-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="google-maps.html">Google Map</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="vector-maps.html">Vector Map</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="dropdown-toggle" href="javascript:void(0);">
|
||||
<span class="icon-holder">
|
||||
<i class="c-red-500 ti-files"></i>
|
||||
</span>
|
||||
<span class="title">Pages</span>
|
||||
<span class="arrow">
|
||||
<i class="ti-angle-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a class="sidebar-link" href="blank.html">Blank</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="sidebar-link" href="404.html">404</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="sidebar-link" href="500.html">500</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="sidebar-link" href="signin.html">Sign In</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="sidebar-link" href="signup.html">Sign Up</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="dropdown-toggle" href="javascript:void(0);">
|
||||
<span class="icon-holder">
|
||||
<i class="c-teal-500 ti-view-list-alt"></i>
|
||||
</span>
|
||||
<span class="title">Multiple Levels</span>
|
||||
<span class="arrow">
|
||||
<i class="ti-angle-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item dropdown">
|
||||
<a href="javascript:void(0);">
|
||||
<span>Menu Item</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="javascript:void(0);">
|
||||
<span>Menu Item</span>
|
||||
<span class="arrow">
|
||||
<i class="ti-angle-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="javascript:void(0);">Menu Item</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);">Menu Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="sidebar-link" href={{ url_for('logout') }}>
|
||||
<span class="icon-holder">
|
||||
<i class="ti-power-off mR-10"></i>
|
||||
</span>
|
||||
<span class="title">Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
94
app/templates/layouts/auth-default.html
Normal file
94
app/templates/layouts/auth-default.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||
<title>
|
||||
Flask Adminator - {% block title %}{% endblock %} | AppSeed
|
||||
</title>
|
||||
|
||||
<style>
|
||||
#loader {
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
z-index: 90000;
|
||||
}
|
||||
|
||||
#loader.fadeOut {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||
animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-scaleout {
|
||||
0% { -webkit-transform: scale(0) }
|
||||
100% {
|
||||
-webkit-transform: scale(1.0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-scaleout {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 100% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<link href="/static/assets/style.css" rel="stylesheet">
|
||||
|
||||
<!-- Specific Page CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
</head>
|
||||
<body class="app">
|
||||
|
||||
<div id="loader">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function load() {
|
||||
const loader = document.getElementById('loader');
|
||||
setTimeout(function() {
|
||||
loader.classList.add('fadeOut');
|
||||
}, 300);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="peers ai-s fxw-nw h-100vh">
|
||||
|
||||
{% block content %}{% endblock content %}
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/static/assets/vendor.js"></script>
|
||||
<script type="text/javascript" src="/static/assets/bundle.js"></script>
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
126
app/templates/layouts/default.html
Normal file
126
app/templates/layouts/default.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||
<title>
|
||||
Flask Adminator - {% block title %}{% endblock %} | AppSeed
|
||||
</title>
|
||||
|
||||
<style>
|
||||
#loader {
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
z-index: 90000;
|
||||
}
|
||||
|
||||
#loader.fadeOut {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||
animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-scaleout {
|
||||
0% { -webkit-transform: scale(0) }
|
||||
100% {
|
||||
-webkit-transform: scale(1.0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-scaleout {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 100% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link href="/static/assets/style.css" rel="stylesheet">
|
||||
|
||||
<!-- Specific Page CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
</head>
|
||||
<body class="app">
|
||||
<!-- @TOC -->
|
||||
<!-- =================================================== -->
|
||||
<!--
|
||||
+ @Page Loader
|
||||
+ @App Content
|
||||
- #Left Sidebar
|
||||
> $Sidebar Header
|
||||
> $Sidebar Menu
|
||||
|
||||
- #Main
|
||||
> $Topbar
|
||||
> $App Screen Content
|
||||
-->
|
||||
|
||||
<!-- @Page Loader -->
|
||||
<!-- =================================================== -->
|
||||
<div id="loader">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function load() {
|
||||
const loader = document.getElementById('loader');
|
||||
setTimeout(function() {
|
||||
loader.classList.add('fadeOut');
|
||||
}, 300);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- @App Content -->
|
||||
<!-- =================================================== -->
|
||||
<div>
|
||||
|
||||
{% include 'includes/sidenav.html' %}
|
||||
|
||||
<!-- #Main ============================ -->
|
||||
<div class="page-container">
|
||||
|
||||
{% include 'includes/navigation.html' %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class="main-content bgc-grey-100">
|
||||
<div id="mainContent">
|
||||
|
||||
{% block content %}{% endblock content %}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include 'includes/footer.html' %}
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/static/assets/vendor.js"></script>
|
||||
<script type="text/javascript" src="/static/assets/bundle.js"></script>
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
21
app/templates/layouts/error-default.html
Normal file
21
app/templates/layouts/error-default.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||
<title>
|
||||
Flask Adminator - {% block title %}{% endblock %} | AppSeed
|
||||
</title>
|
||||
|
||||
<link href="/static/assets/style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body class="app">
|
||||
|
||||
{% block content %}{% endblock content %}
|
||||
|
||||
<script type="text/javascript" src="/static/assets/vendor.js"></script>
|
||||
<script type="text/javascript" src="/static/assets/bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
app/templates/pages/404.html
Normal file
22
app/templates/pages/404.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{% extends "layouts/error-default.html" %}
|
||||
|
||||
{% block title %} 404 Error {% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30">
|
||||
<div class="mR-60">
|
||||
<img alt="#" src="/static/assets/static/images/404.png">
|
||||
</div>
|
||||
|
||||
<div class="d-f jc-c fxd-c">
|
||||
<h1 class="mB-30 fw-900 lh-1 c-red-500" style="font-size: 60px;">404</h1>
|
||||
<h3 class="mB-10 fsz-lg c-grey-900 tt-c">Oops Page Not Found</h3>
|
||||
<p class="mB-30 fsz-def c-grey-700">The page you are looking for does not exist or has been moved.</p>
|
||||
<div>
|
||||
<a href="index.html" type="primary" class="btn btn-primary">Go to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
22
app/templates/pages/500.html
Normal file
22
app/templates/pages/500.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{% extends "layouts/error-default.html" %}
|
||||
|
||||
{% block title %} 500 Error {% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30">
|
||||
<div class="mR-60">
|
||||
<img alt="#" src="/static/assets/static/images/500.png">
|
||||
</div>
|
||||
|
||||
<div class="d-f jc-c fxd-c">
|
||||
<h1 class="mB-30 fw-900 lh-1 c-red-500" style="font-size: 60px;">500</h1>
|
||||
<h3 class="mB-10 fsz-lg c-grey-900 tt-c">Internal server error</h3>
|
||||
<p class="mB-30 fsz-def c-grey-700">Something goes wrong with our servers, please try again later.</p>
|
||||
<div>
|
||||
<a href="index.html" type="primary" class="btn btn-primary">Go to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
208
app/templates/pages/basic-table.html
Normal file
208
app/templates/pages/basic-table.html
Normal file
@@ -0,0 +1,208 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid">
|
||||
<h4 class="c-grey-900 mT-10 mB-30">Basic Tables</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||||
<h4 class="c-grey-900 mB-20">Simple Table</h4>
|
||||
<p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First Name</th>
|
||||
<th scope="col">Last Name</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||||
<h4 class="c-grey-900 mB-20">Table head options</h4>
|
||||
<p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge"><thead></code>s appear light or dark gray.</p>
|
||||
<table class="table">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First Name</th>
|
||||
<th scope="col">Last Name</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||||
<h4 class="c-grey-900 mB-20">Striped rows</h4>
|
||||
<p>Use <code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="highlighter-rouge"><tbody></code>.</p>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First Name</th>
|
||||
<th scope="col">Last Name</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||||
<h4 class="c-grey-900 mB-20">Bordered table</h4>
|
||||
<p>Add <code class="highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First Name</th>
|
||||
<th scope="col">Last Name</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@TwBootstrap</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="bgc-white bd bdrs-3 p-20">
|
||||
<h4 class="c-grey-900 mB-20">Hoverable rows</h4>
|
||||
<p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a <code class="highlighter-rouge"><tbody></code>.</p>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First Name</th>
|
||||
<th scope="col">Last Name</th>
|
||||
<th scope="col">Username</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
15
app/templates/pages/blank.html
Normal file
15
app/templates/pages/blank.html
Normal file
@@ -0,0 +1,15 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- (Almost) A blank page -->
|
||||
<h3>
|
||||
Add content here
|
||||
</h3>
|
||||
|
||||
{% endblock content %}
|
||||
185
app/templates/pages/calendar.html
Normal file
185
app/templates/pages/calendar.html
Normal file
@@ -0,0 +1,185 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="bdrs-3 ov-h bgc-white bd">
|
||||
<div class="bgc-deep-purple-500 ta-c p-30">
|
||||
<h1 class="fw-300 mB-5 lh-1 c-white">01<span class="fsz-def">st</span></h1>
|
||||
<h3 class="c-white">Monday</h3>
|
||||
</div>
|
||||
<div class="pos-r">
|
||||
<button type="button" class="mT-nv-50 pos-a r-10 t-2 btn cur-p bdrs-50p p-0 w-3r h-3r btn-warning">
|
||||
<i class="ti-plus"></i>
|
||||
</button>
|
||||
<ul class="m-0 p-0 mT-20">
|
||||
<li class="bdB peers ai-c jc-sb fxw-nw">
|
||||
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
|
||||
<div class="peer mR-15">
|
||||
<i class="fa fa-fw fa-clock-o c-red-500"></i>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="fw-600">All Day Event</span>
|
||||
<div class="c-grey-600">
|
||||
<span class="c-grey-700">Nov 01 - </span>
|
||||
<i>Website Development</i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="peers mR-15">
|
||||
<div class="peer">
|
||||
<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
|
||||
<i class="ti-pencil"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
|
||||
<i class="ti-trash"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="bdB peers ai-c jc-sb fxw-nw">
|
||||
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
|
||||
<div class="peer mR-15">
|
||||
<i class="fa fa-fw fa-clock-o c-blue-500"></i>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="fw-600">All Day Event</span>
|
||||
<div class="c-grey-600">
|
||||
<span class="c-grey-700">Nov 01 - </span>
|
||||
<i>Website Development</i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="peers mR-15">
|
||||
<div class="peer">
|
||||
<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
|
||||
<i class="ti-pencil"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
|
||||
<i class="ti-trash"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="bdB peers ai-c jc-sb fxw-nw">
|
||||
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
|
||||
<div class="peer mR-15">
|
||||
<i class="fa fa-fw fa-clock-o c-indigo-500"></i>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="fw-600">All Day Event</span>
|
||||
<div class="c-grey-600">
|
||||
<span class="c-grey-700">Nov 01 - </span>
|
||||
<i>Website Development</i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="peers mR-15">
|
||||
<div class="peer">
|
||||
<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
|
||||
<i class="ti-pencil"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
|
||||
<i class="ti-trash"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="bdB peers ai-c jc-sb fxw-nw">
|
||||
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
|
||||
<div class="peer mR-15">
|
||||
<i class="fa fa-fw fa-clock-o c-green-500"></i>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="fw-600">All Day Event</span>
|
||||
<div class="c-grey-600">
|
||||
<span class="c-grey-700">Nov 01 - </span>
|
||||
<i>Website Development</i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="peers mR-15">
|
||||
<div class="peer">
|
||||
<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
|
||||
<i class="ti-pencil"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
|
||||
<i class="ti-trash"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div id="full-calendar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="calendar-edit">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="bd p-15">
|
||||
<h5 class="m-0">Add Event</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="fw-500">Event title</label>
|
||||
<input class="form-control bdc-grey-200">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label class="fw-500">Start</label>
|
||||
<div class="timepicker-input input-icon form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon bgc-white bd bdwR-0">
|
||||
<i class="ti-calendar"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="fw-500">End</label>
|
||||
<div class="timepicker-input input-icon form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon bgc-white bd bdwR-0">
|
||||
<i class="ti-calendar"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="fw-500">Event title</label>
|
||||
<textarea class="form-control bdc-grey-200" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<button class="btn btn-primary cur-p" data-dismiss="modal">Done</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
134
app/templates/pages/charts.html
Normal file
134
app/templates/pages/charts.html
Normal file
@@ -0,0 +1,134 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="row gap-20 masonry pos-r">
|
||||
<div class="masonry-sizer col-md-6 pos-a"></div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Line Chart</h6>
|
||||
<div class="mT-30">
|
||||
<canvas id="line-chart" height="220"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Area Chart</h6>
|
||||
<div class="mT-30">
|
||||
<canvas id="area-chart" height="220"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Scatter Chart</h6>
|
||||
<div class="mT-30">
|
||||
<canvas id="scatter-chart" height="220"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Bar Chart</h6>
|
||||
<div class="mT-30">
|
||||
<canvas id="bar-chart" height="220"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">jQuery Sparkline</h6>
|
||||
<div class="mT-30">
|
||||
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
|
||||
<div class="peer">
|
||||
<span>Spark Line</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="sparkline"> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
|
||||
<div class="peer">
|
||||
<span>Spark Bar</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="sparkbar"> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
|
||||
<div class="peer">
|
||||
<span>Spark Tristate</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="sparktri"> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
|
||||
<div class="peer">
|
||||
<span>Spark Discrete</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="sparkdisc"> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers ai-c jc-sb fxw-nw bdB pY-15">
|
||||
<div class="peer">
|
||||
<span>Spark Bullet</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="sparkbull"> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers ai-c jc-sb fxw-nw pT-15">
|
||||
<div class="peer">
|
||||
<span>Spark Box</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="sparkbox"> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Easy Pie Charts</h6>
|
||||
<div class="mT-30">
|
||||
<div class="peers mT-20 fxw-nw@lg+ jc-sb ta-c gap-10">
|
||||
<div class="peer">
|
||||
<div class="easy-pie-chart" data-size="80" data-percent="75" data-bar-color="#f44336">
|
||||
<span></span>
|
||||
</div>
|
||||
<h6 class="fsz-sm">New Users</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<div class="easy-pie-chart" data-size="80" data-percent="50" data-bar-color="#2196f3">
|
||||
<span></span>
|
||||
</div>
|
||||
<h6 class="fsz-sm">New Purchases</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<div class="easy-pie-chart" data-size="80" data-percent="65" data-bar-color="#f44336">
|
||||
<span></span>
|
||||
</div>
|
||||
<h6 class="fsz-sm">New Customers</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<div class="easy-pie-chart" data-size="80" data-percent="90" data-bar-color="#ff9800">
|
||||
<span></span>
|
||||
</div>
|
||||
<h6 class="fsz-sm">Bounce Rate</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
223
app/templates/pages/chat.html
Normal file
223
app/templates/pages/chat.html
Normal file
@@ -0,0 +1,223 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="full-container">
|
||||
<div class="peers fxw-nw pos-r">
|
||||
<!-- Sidebar -->
|
||||
<div class="peer bdR" id="chat-sidebar">
|
||||
<div class="layers h-100">
|
||||
<!-- Search -->
|
||||
<div class="bdB layer w-100">
|
||||
<input type="text" placeholder="Search contacts..." name="chatSearch" class="form-constrol p-15 bdrs-0 w-100 bdw-0">
|
||||
</div>
|
||||
|
||||
<!-- List -->
|
||||
<div class="layer w-100 fxg-1 scrollable pos-r">
|
||||
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
||||
<div class="peer">
|
||||
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
||||
</div>
|
||||
<div class="peer peer-greed pL-20">
|
||||
<h6 class="mB-0 lh-1 fw-400">John Doe</h6>
|
||||
<small class="lh-1 c-green-500">Online</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
||||
<div class="peer">
|
||||
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
||||
</div>
|
||||
<div class="peer peer-greed pL-20">
|
||||
<h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
|
||||
<small class="lh-1 c-amber-500">Away</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
||||
<div class="peer">
|
||||
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
||||
</div>
|
||||
<div class="peer peer-greed pL-20">
|
||||
<h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
|
||||
<small class="lh-1 c-grey-500">Offline</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
||||
<div class="peer">
|
||||
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
||||
</div>
|
||||
<div class="peer peer-greed pL-20">
|
||||
<h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
|
||||
<small class="lh-1 c-red-500">Busy</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
||||
<div class="peer">
|
||||
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
||||
</div>
|
||||
<div class="peer peer-greed pL-20">
|
||||
<h6 class="mB-0 lh-1 fw-400">John Doe</h6>
|
||||
<small class="lh-1 c-green-500">Online</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
||||
<div class="peer">
|
||||
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
||||
</div>
|
||||
<div class="peer peer-greed pL-20">
|
||||
<h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
|
||||
<small class="lh-1 c-amber-500">Away</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
||||
<div class="peer">
|
||||
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
||||
</div>
|
||||
<div class="peer peer-greed pL-20">
|
||||
<h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
|
||||
<small class="lh-1 c-grey-500">Offline</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
||||
<div class="peer">
|
||||
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
||||
</div>
|
||||
<div class="peer peer-greed pL-20">
|
||||
<h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
|
||||
<small class="lh-1 c-red-500">Busy</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Box -->
|
||||
<div class="peer peer-greed" id="chat-box">
|
||||
<div class="layers h-100">
|
||||
<div class="layer w-100">
|
||||
<!-- Header -->
|
||||
<div class="peers fxw-nw jc-sb ai-c pY-20 pX-30 bgc-white">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer d-n@md+">
|
||||
<a href="" title="" id="chat-sidebar-toggle" class="td-n c-grey-900 cH-blue-500 mR-30">
|
||||
<i class="ti-menu"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="peer mR-20">
|
||||
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
||||
</div>
|
||||
<div class="peer">
|
||||
<h6 class="lh-1 mB-0">John Doe</h6>
|
||||
<i class="fsz-sm lh-1">Typing...</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peers">
|
||||
<a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
|
||||
<i class="ti-video-camera"></i>
|
||||
</a>
|
||||
<a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
|
||||
<i class="ti-headphone"></i>
|
||||
</a>
|
||||
<a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md" title="">
|
||||
<i class="ti-more"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 fxg-1 bgc-grey-200 scrollable pos-r">
|
||||
<!-- Chat Box -->
|
||||
<div class="p-20 gapY-15">
|
||||
<!-- Chat Conversation -->
|
||||
<div class="peers fxw-nw">
|
||||
<div class="peer mR-20">
|
||||
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed">
|
||||
<div class="layers ai-fs gapY-5">
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mR-10">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed">
|
||||
<span>Lorem Ipsum is simply dummy text of</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mR-10">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed">
|
||||
<span>the printing and typesetting industry.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mR-10">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed">
|
||||
<span>Lorem Ipsum has been the industry's</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Conversation -->
|
||||
<div class="peers fxw-nw ai-fe">
|
||||
<div class="peer ord-1 mL-20">
|
||||
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed ord-0">
|
||||
<div class="layers ai-fe gapY-10">
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mL-10 ord-1">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed ord-0">
|
||||
<span>Heloo</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mL-10 ord-1">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed ord-0">
|
||||
<span>??</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<!-- Chat Send -->
|
||||
<div class="p-20 bdT bgc-white">
|
||||
<div class="pos-r">
|
||||
<input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
|
||||
<button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
|
||||
<i class="fa fa-paper-plane-o"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
136
app/templates/pages/compose.html
Normal file
136
app/templates/pages/compose.html
Normal file
@@ -0,0 +1,136 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="full-container">
|
||||
<div class="email-app">
|
||||
<div class="email-side-nav remain-height ov-h">
|
||||
<div class="h-100 layers">
|
||||
<div class="p-20 bgc-grey-100 layer w-100">
|
||||
<a href="/compose" class="btn btn-danger btn-block">New Message</a>
|
||||
</div>
|
||||
<div class="scrollable pos-r bdT layer w-100 fxg-1">
|
||||
<ul class="p-20 nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-email"></i>
|
||||
<span>Inbox</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-share"></i>
|
||||
<span>Sent</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-green-50 c-green-700">12</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-star"></i>
|
||||
<span>Important</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-file"></i>
|
||||
<span>Drafts</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-alert"></i>
|
||||
<span>Spam</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-red-50 c-red-700">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-trash"></i>
|
||||
<span>Trash</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-wrapper row remain-height pos-r scrollable bgc-white">
|
||||
<div class="email-content open no-inbox-view">
|
||||
<div class="email-compose">
|
||||
<div class="d-n@md+ p-20">
|
||||
<a class="email-side-toggle c-grey-900 cH-blue-500 td-n" href="javascript:void(0)">
|
||||
<i class="ti-menu"></i>
|
||||
</a>
|
||||
</div>
|
||||
<form class="email-compose-body">
|
||||
<h4 class="c-grey-900 mB-20">Send Message</h4>
|
||||
<div class="send-header">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="To">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="CC">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control" placeholder="Email Subject">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea name="compose" class="form-control" placeholder="Say Hi..." rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose-area"></div>
|
||||
<div class="text-right mrg-top-30">
|
||||
<button class="btn btn-danger">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
501
app/templates/pages/datatable.html
Normal file
501
app/templates/pages/datatable.html
Normal file
@@ -0,0 +1,501 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid">
|
||||
<h4 class="c-grey-900 mT-10 mB-30">Data Tables</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||||
<h4 class="c-grey-900 mB-20">Bootstrap Data Table</h4>
|
||||
<table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
505
app/templates/pages/email.html
Normal file
505
app/templates/pages/email.html
Normal file
@@ -0,0 +1,505 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="full-container">
|
||||
<div class="email-app">
|
||||
<div class="email-side-nav remain-height ov-h">
|
||||
<div class="h-100 layers">
|
||||
<div class="p-20 bgc-grey-100 layer w-100">
|
||||
<a href="/compose" class="btn btn-danger btn-block">New Message</a>
|
||||
</div>
|
||||
<div class="scrollable pos-r bdT layer w-100 fxg-1">
|
||||
<ul class="p-20 nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-email"></i>
|
||||
<span>Inbox</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-share"></i>
|
||||
<span>Sent</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-green-50 c-green-700">12</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-star"></i>
|
||||
<span>Important</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-file"></i>
|
||||
<span>Drafts</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-alert"></i>
|
||||
<span>Spam</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-red-50 c-red-700">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link c-grey-800 cH-blue-500">
|
||||
<div class="peers ai-c jc-sb">
|
||||
<div class="peer peer-greed">
|
||||
<i class="mR-10 ti-trash"></i>
|
||||
<span>Trash</span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-wrapper row remain-height bgc-white ov-h">
|
||||
<div class="email-list h-100 layers">
|
||||
<div class="layer w-100">
|
||||
<div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw">
|
||||
<div class="peer">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="email-side-toggle d-n@md+ btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-menu"></i>
|
||||
</button>
|
||||
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-folder"></i>
|
||||
</button>
|
||||
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-tag"></i>
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ti-more-alt"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
|
||||
<li>
|
||||
<a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-trash mR-10"></i>
|
||||
<span>Delete</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-alert mR-10"></i>
|
||||
<span>Mark as Spam</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-star mR-10"></i>
|
||||
<span>Star</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-angle-left"></i>
|
||||
</button>
|
||||
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-angle-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<div class="bdT bdB">
|
||||
<input type="text" class="form-control m-0 bdw-0 pY-15 pX-20" placeholder="Search...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 fxg-1 scrollable pos-r">
|
||||
<div class="">
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
|
||||
<div class="peer mR-10">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer peer-greed ov-h">
|
||||
<div class="peers ai-c">
|
||||
<div class="peer peer-greed">
|
||||
<h6>John Doe</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>1 min ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
|
||||
<span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-content h-100">
|
||||
<div class="h-100 scrollable pos-r">
|
||||
<div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw d-n@md+">
|
||||
<div class="peer">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-angle-left"></i>
|
||||
</button>
|
||||
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-folder"></i>
|
||||
</button>
|
||||
<button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-tag"></i>
|
||||
</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="ti-more-alt"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
|
||||
<li>
|
||||
<a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-trash mR-10"></i>
|
||||
<span>Delete</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-alert mR-10"></i>
|
||||
<span>Mark as Spam</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
|
||||
<i class="ti-star mR-10"></i>
|
||||
<span>Star</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-angle-left"></i>
|
||||
</button>
|
||||
<button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
|
||||
<i class="ti-angle-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-content-wrapper">
|
||||
<!-- Header -->
|
||||
<div class="peers ai-c jc-sb pX-40 pY-30">
|
||||
<div class="peers peer-greed">
|
||||
<div class="peer mR-20">
|
||||
<img class="bdrs-50p w-3r h-3r" alt="" src="https://randomuser.me/api/portraits/men/11.jpg">
|
||||
</div>
|
||||
<div class="peer">
|
||||
<small>Nov, 02 2017</small>
|
||||
<h5 class="c-grey-900 mB-5">John Doe</h5>
|
||||
<span>To: email@gmail.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<a href="" class="btn btn-danger bdrs-50p p-15 lh-0">
|
||||
<i class="fa fa-reply"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="bdT pX-40 pY-30">
|
||||
<h4>Title of this email goes here</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
253
app/templates/pages/forms.html
Normal file
253
app/templates/pages/forms.html
Normal file
@@ -0,0 +1,253 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="row gap-20 masonry pos-r">
|
||||
<div class="masonry-sizer col-md-6"></div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Basic Form</h6>
|
||||
<div class="mT-30">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
</div>
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c">
|
||||
<span class="peer peer-greed">Call John for Dinner</span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Complex Form Layout</h6>
|
||||
<div class="mT-30">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="inputEmail4">Email</label>
|
||||
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="inputPassword4">Password</label>
|
||||
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputAddress">Address</label>
|
||||
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputAddress2">Address 2</label>
|
||||
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="inputCity">City</label>
|
||||
<input type="text" class="form-control" id="inputCity">
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label for="inputState">State</label>
|
||||
<select id="inputState" class="form-control">
|
||||
<option selected="selected">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<label for="inputZip">Zip</label>
|
||||
<input type="text" class="form-control" id="inputZip">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label class="fw-500">Birthdate</label>
|
||||
<div class="timepicker-input input-icon form-group">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon bgc-white bd bdwR-0">
|
||||
<i class="ti-calendar"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall2" class="peers peer-greed js-sb ai-c">
|
||||
<span class="peer peer-greed">Call John for Dinner</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Horizontal Form</h6>
|
||||
<div class="mT-30">
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="form-group">
|
||||
<div class="row">
|
||||
<legend class="col-form-legend col-sm-2">Radios</legend>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="checked">
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled="disabled">
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-2">Checkbox</div>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Disabled Forms</h6>
|
||||
<div class="mT-30">
|
||||
<form>
|
||||
<fieldset disabled="disabled">
|
||||
<div class="form-group">
|
||||
<label for="disabledTextInput">Disabled input</label>
|
||||
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="disabledSelect">Disabled select menu</label>
|
||||
<select id="disabledSelect" class="form-control">
|
||||
<option>Disabled select</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox"> Can't check this
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Validation</h6>
|
||||
<div class="mT-30">
|
||||
<form class="container" id="needs-validation" novalidate>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationCustom01">First name</label>
|
||||
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationCustom02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationCustom03">City</label>
|
||||
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationCustom04">State</label>
|
||||
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationCustom05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
<script>
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
var form = document.getElementById('needs-validation');
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
22
app/templates/pages/google-maps.html
Normal file
22
app/templates/pages/google-maps.html
Normal file
@@ -0,0 +1,22 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid">
|
||||
<h4 class="c-grey-900 mT-10 mB-30">Google Maps</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||||
<h6 class="c-grey-900 mB-20">Google Maps</h6>
|
||||
<div id="google-map" style="padding-bottom: 75%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
583
app/templates/pages/index.html
Normal file
583
app/templates/pages/index.html
Normal file
@@ -0,0 +1,583 @@
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Dashboard {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="row gap-20 masonry pos-r">
|
||||
<div class="masonry-sizer col-md-6"></div>
|
||||
<div class="masonry-item w-100">
|
||||
<div class="row gap-20">
|
||||
<!-- #Toatl Visits ==================== -->
|
||||
<div class="col-md-3">
|
||||
<div class="layers bd bgc-white p-20">
|
||||
<div class="layer w-100 mB-10">
|
||||
<h6 class="lh-1">Total Visits</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<div class="peers ai-sb fxw-nw">
|
||||
<div class="peer peer-greed">
|
||||
<span id="sparklinedash"></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">+10%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- #Total Page Views ==================== -->
|
||||
<div class="col-md-3">
|
||||
<div class="layers bd bgc-white p-20">
|
||||
<div class="layer w-100 mB-10">
|
||||
<h6 class="lh-1">Total Page Views</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<div class="peers ai-sb fxw-nw">
|
||||
<div class="peer peer-greed">
|
||||
<span id="sparklinedash2"></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500">-7%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- #Unique Visitors ==================== -->
|
||||
<div class="col-md-3">
|
||||
<div class="layers bd bgc-white p-20">
|
||||
<div class="layer w-100 mB-10">
|
||||
<h6 class="lh-1">Unique Visitor</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<div class="peers ai-sb fxw-nw">
|
||||
<div class="peer peer-greed">
|
||||
<span id="sparklinedash3"></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">~12%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- #Bounce Rate ==================== -->
|
||||
<div class="col-md-3">
|
||||
<div class="layers bd bgc-white p-20">
|
||||
<div class="layer w-100 mB-10">
|
||||
<h6 class="lh-1">Bounce Rate</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<div class="peers ai-sb fxw-nw">
|
||||
<div class="peer peer-greed">
|
||||
<span id="sparklinedash4"></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">33%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-12">
|
||||
<!-- #Site Visits ==================== -->
|
||||
<div class="bd bgc-white">
|
||||
<div class="peers fxw-nw@lg+ ai-s">
|
||||
<div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
|
||||
<div class="layers">
|
||||
<div class="layer w-100 mB-10">
|
||||
<h6 class="lh-1">Site Visits</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<div id="world-map-marker"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
|
||||
<div class="layers">
|
||||
<div class="layer w-100">
|
||||
<!-- Progress Bars -->
|
||||
<div class="layers">
|
||||
<div class="layer w-100">
|
||||
<h5 class="mB-5">100k</h5>
|
||||
<small class="fw-600 c-grey-700">Visitors From USA</small>
|
||||
<span class="pull-right c-grey-600 fsz-sm">50%</span>
|
||||
<div class="progress mT-10">
|
||||
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 mT-15">
|
||||
<h5 class="mB-5">1M</h5>
|
||||
<small class="fw-600 c-grey-700">Visitors From Europe</small>
|
||||
<span class="pull-right c-grey-600 fsz-sm">80%</span>
|
||||
<div class="progress mT-10">
|
||||
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 mT-15">
|
||||
<h5 class="mB-5">450k</h5>
|
||||
<small class="fw-600 c-grey-700">Visitors From Australia</small>
|
||||
<span class="pull-right c-grey-600 fsz-sm">40%</span>
|
||||
<div class="progress mT-10">
|
||||
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 mT-15">
|
||||
<h5 class="mB-5">1B</h5>
|
||||
<small class="fw-600 c-grey-700">Visitors From India</small>
|
||||
<span class="pull-right c-grey-600 fsz-sm">90%</span>
|
||||
<div class="progress mT-10">
|
||||
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pie Charts -->
|
||||
<div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
|
||||
<div class="peer">
|
||||
<div class="easy-pie-chart" data-size="80" data-percent="75" data-bar-color="#f44336">
|
||||
<span></span>
|
||||
</div>
|
||||
<h6 class="fsz-sm">New Users</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<div class="easy-pie-chart" data-size="80" data-percent="50" data-bar-color="#2196f3">
|
||||
<span></span>
|
||||
</div>
|
||||
<h6 class="fsz-sm">New Purchases</h6>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<div class="easy-pie-chart" data-size="80" data-percent="90" data-bar-color="#ff9800">
|
||||
<span></span>
|
||||
</div>
|
||||
<h6 class="fsz-sm">Bounce Rate</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<!-- #Monthly Stats ==================== -->
|
||||
<div class="bd bgc-white">
|
||||
<div class="layers">
|
||||
<div class="layer w-100 pX-20 pT-20">
|
||||
<h6 class="lh-1">Monthly Stats</h6>
|
||||
</div>
|
||||
<div class="layer w-100 p-20">
|
||||
<canvas id="line-chart" height="220"></canvas>
|
||||
</div>
|
||||
<div class="layer bdT p-20 w-100">
|
||||
<div class="peers ai-c jc-c gapX-20">
|
||||
<div class="peer">
|
||||
<span class="fsz-def fw-600 mR-10 c-grey-800">10% <i class="fa fa-level-up c-green-500"></i></span>
|
||||
<small class="c-grey-500 fw-600">APPL</small>
|
||||
</div>
|
||||
<div class="peer fw-600">
|
||||
<span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
|
||||
<small class="c-grey-500 fw-600">Average</small>
|
||||
</div>
|
||||
<div class="peer fw-600">
|
||||
<span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
|
||||
<small class="c-grey-500 fw-600">Sales</small>
|
||||
</div>
|
||||
<div class="peer fw-600">
|
||||
<span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
|
||||
<small class="c-grey-500 fw-600">Profit</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<!-- #Todo ==================== -->
|
||||
<div class="bd bgc-white p-20">
|
||||
<div class="layers">
|
||||
<div class="layer w-100 mB-10">
|
||||
<h6 class="lh-1">Todo List</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<ul class="list-task list-group" data-role="tasklist">
|
||||
<li class="list-group-item bdw-0" data-role="task">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c">
|
||||
<span class="peer peer-greed">Call John for Dinner</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item bdw-0" data-role="task">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall2" class="peers peer-greed js-sb ai-c">
|
||||
<span class="peer peer-greed">Book Boss Flight</span>
|
||||
<span class="peer">
|
||||
<span class="badge badge-pill fl-r badge-success lh-0 p-10">2 Days</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item bdw-0" data-role="task">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall3" class="peers peer-greed js-sb ai-c">
|
||||
<span class="peer peer-greed">Hit the Gym</span>
|
||||
<span class="peer">
|
||||
<span class="badge badge-pill fl-r badge-danger lh-0 p-10">3 Minutes</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item bdw-0" data-role="task">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall4" class="peers peer-greed js-sb ai-c">
|
||||
<span class="peer peer-greed">Give Purchase Report</span>
|
||||
<span class="peer">
|
||||
<span class="badge badge-pill fl-r badge-warning lh-0 p-10">not important</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item bdw-0" data-role="task">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall5" class="peers peer-greed js-sb ai-c">
|
||||
<span class="peer peer-greed">Watch Game of Thrones Episode</span>
|
||||
<span class="peer">
|
||||
<span class="badge badge-pill fl-r badge-info lh-0 p-10">Tomorrow</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item bdw-0" data-role="task">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall6" class="peers peer-greed js-sb ai-c">
|
||||
<span class="peer peer-greed">Give Purchase report</span>
|
||||
<span class="peer">
|
||||
<span class="badge badge-pill fl-r badge-success lh-0 p-10">Done</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<!-- #Sales Report ==================== -->
|
||||
<div class="bd bgc-white">
|
||||
<div class="layers">
|
||||
<div class="layer w-100 p-20">
|
||||
<h6 class="lh-1">Sales Report</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<div class="bgc-light-blue-500 c-white p-20">
|
||||
<div class="peers ai-c jc-sb gap-40">
|
||||
<div class="peer peer-greed">
|
||||
<h5>November 2017</h5>
|
||||
<p class="mB-0">Sales Report</p>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<h3 class="text-right">$6,000</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive p-20">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bdwT-0">Name</th>
|
||||
<th class="bdwT-0">Status</th>
|
||||
<th class="bdwT-0">Date</th>
|
||||
<th class="bdwT-0">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-600">Item #1 Name</td>
|
||||
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Unavailable</span> </td>
|
||||
<td>Nov 18</td>
|
||||
<td><span class="text-success">$12</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-600">Item #2 Name</td>
|
||||
<td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c badge-pill">New</span></td>
|
||||
<td>Nov 19</td>
|
||||
<td><span class="text-info">$34</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-600">Item #3 Name</td>
|
||||
<td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c badge-pill">New</span></td>
|
||||
<td>Nov 20</td>
|
||||
<td><span class="text-danger">-$45</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-600">Item #4 Name</td>
|
||||
<td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c badge-pill">Unavailable</span></td>
|
||||
<td>Nov 21</td>
|
||||
<td><span class="text-success">$65</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-600">Item #5 Name</td>
|
||||
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Used</span></td>
|
||||
<td>Nov 22</td>
|
||||
<td><span class="text-success">$78</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-600">Item #6 Name</td>
|
||||
<td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c badge-pill">Used</span> </td>
|
||||
<td>Nov 23</td>
|
||||
<td><span class="text-danger">-$88</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-600">Item #7 Name</td>
|
||||
<td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c badge-pill">Old</span></td>
|
||||
<td>Nov 22</td>
|
||||
<td><span class="text-success">$56</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ta-c bdT w-100 p-20">
|
||||
<a href="#">Check all the sales</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<!-- #Weather ==================== -->
|
||||
<div class="bd bgc-white p-20">
|
||||
<div class="layers">
|
||||
<!-- Widget Title -->
|
||||
<div class="layer w-100 mB-20">
|
||||
<h6 class="lh-1">Weather</h6>
|
||||
</div>
|
||||
|
||||
<!-- Today Weather -->
|
||||
<div class="layer w-100">
|
||||
<div class="peers ai-c jc-sb fxw-nw">
|
||||
<div class="peer peer-greed">
|
||||
<div class="layers">
|
||||
<!-- Temprature -->
|
||||
<div class="layer w-100">
|
||||
<div class="peers fxw-nw ai-c">
|
||||
<div class="peer mR-20">
|
||||
<h3>32<sup>°F</sup></h3>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<canvas class="sleet" width="44" height="44"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Condition -->
|
||||
<div class="layer w-100">
|
||||
<span class="fw-600 c-grey-600">Partly Clouds</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<div class="layers ai-fe">
|
||||
<div class="layer">
|
||||
<h5 class="mB-5">Monday</h5>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<span class="fw-600 c-grey-600">Nov, 01 2017</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today Weather Extended -->
|
||||
<div class="layer w-100 mY-30">
|
||||
<div class="layers bdB">
|
||||
<div class="layer w-100 bdT pY-5">
|
||||
<div class="peers ai-c jc-sb fxw-nw">
|
||||
<div class="peer">
|
||||
<span>Wind</span>
|
||||
</div>
|
||||
<div class="peer ta-r">
|
||||
<span class="fw-600 c-grey-800">10km/h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 bdT pY-5">
|
||||
<div class="peers ai-c jc-sb fxw-nw">
|
||||
<div class="peer">
|
||||
<span>Sunrise</span>
|
||||
</div>
|
||||
<div class="peer ta-r">
|
||||
<span class="fw-600 c-grey-800">05:00 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 bdT pY-5">
|
||||
<div class="peers ai-c jc-sb fxw-nw">
|
||||
<div class="peer">
|
||||
<span>Pressure</span>
|
||||
</div>
|
||||
<div class="peer ta-r">
|
||||
<span class="fw-600 c-grey-800">1B</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Week Forecast -->
|
||||
<div class="layer w-100">
|
||||
<div class="peers peers-greed ai-fs ta-c">
|
||||
<div class="peer">
|
||||
<h6 class="mB-10">MON</h6>
|
||||
<canvas class="sleet" width="30" height="30"></canvas>
|
||||
<span class="d-b fw-600">32<sup>°F</sup></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<h6 class="mB-10">TUE</h6>
|
||||
<canvas class="clear-day" width="30" height="30"></canvas>
|
||||
<span class="d-b fw-600">30<sup>°F</sup></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<h6 class="mB-10">WED</h6>
|
||||
<canvas class="partly-cloudy-day" width="30" height="30"></canvas>
|
||||
<span class="d-b fw-600">28<sup>°F</sup></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<h6 class="mB-10">THR</h6>
|
||||
<canvas class="cloudy" width="30" height="30"></canvas>
|
||||
<span class="d-b fw-600">32<sup>°F</sup></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<h6 class="mB-10">FRI</h6>
|
||||
<canvas class="snow" width="30" height="30"></canvas>
|
||||
<span class="d-b fw-600">24<sup>°F</sup></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<h6 class="mB-10">SAT</h6>
|
||||
<canvas class="wind" width="30" height="30"></canvas>
|
||||
<span class="d-b fw-600">28<sup>°F</sup></span>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<h6 class="mB-10">SUN</h6>
|
||||
<canvas class="sleet" width="30" height="30"></canvas>
|
||||
<span class="d-b fw-600">32<sup>°F</sup></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<!-- #Chat ==================== -->
|
||||
<div class="bd bgc-white">
|
||||
<div class="layers">
|
||||
<div class="layer w-100 p-20">
|
||||
<h6 class="lh-1">Quick Chat</h6>
|
||||
</div>
|
||||
<div class="layer w-100">
|
||||
<!-- Chat Box -->
|
||||
<div class="bgc-grey-200 p-20 gapY-15">
|
||||
<!-- Chat Conversation -->
|
||||
<div class="peers fxw-nw">
|
||||
<div class="peer mR-20">
|
||||
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed">
|
||||
<div class="layers ai-fs gapY-5">
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mR-10">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed">
|
||||
<span>Lorem Ipsum is simply dummy text of</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mR-10">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed">
|
||||
<span>the printing and typesetting industry.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mR-10">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed">
|
||||
<span>Lorem Ipsum has been the industry's</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Conversation -->
|
||||
<div class="peers fxw-nw ai-fe">
|
||||
<div class="peer ord-1 mL-20">
|
||||
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
|
||||
</div>
|
||||
<div class="peer peer-greed ord-0">
|
||||
<div class="layers ai-fe gapY-10">
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mL-10 ord-1">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed ord-0">
|
||||
<span>Heloo</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer">
|
||||
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
||||
<div class="peer mL-10 ord-1">
|
||||
<small>10:00 AM</small>
|
||||
</div>
|
||||
<div class="peer-greed ord-0">
|
||||
<span>??</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chat Send -->
|
||||
<div class="p-20 bdT bgc-white">
|
||||
<div class="pos-r">
|
||||
<input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
|
||||
<button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
|
||||
<i class="fa fa-paper-plane-o"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
63
app/templates/pages/login.html
Normal file
63
app/templates/pages/login.html
Normal file
@@ -0,0 +1,63 @@
|
||||
|
||||
{% extends "layouts/auth-default.html" %}
|
||||
|
||||
{% block title %} Login {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("/static/assets/static/images/bg.jpg")'>
|
||||
<div class="pos-a centerXY">
|
||||
<div class="bgc-white bdrs-50p pos-r" style="width: 120px; height: 120px;">
|
||||
<img class="pos-a centerXY" src="/static/assets/static/images/logo.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style="min-width: 320px;">
|
||||
|
||||
|
||||
{% if msg %}
|
||||
<h4 class="fw-300 c-grey-900 mB-40">{{ msg | safe }}</h4>
|
||||
{% else %}
|
||||
<h4 class="fw-300 c-grey-900 mB-40">Login</h4>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="">
|
||||
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
<div class="form-group">
|
||||
<label class="text-normal text-dark">Username</label>
|
||||
{{ form.username(placeholder="Username", class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="text-normal text-dark">Password</label>
|
||||
{{ form.password(placeholder="Password", class="form-control", type="password") }}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="peers ai-c jc-sb fxw-nw">
|
||||
<div class="peer">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall1" class="peers peer-greed js-sb ai-c">
|
||||
<span class="peer peer-greed">Remember Me</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
|
||||
|
||||
<span class="text-small font-weight-semibold">Not a member?</span>
|
||||
<a href="/register.html" class="text-black text-small">Register</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
60
app/templates/pages/register.html
Normal file
60
app/templates/pages/register.html
Normal file
@@ -0,0 +1,60 @@
|
||||
|
||||
{% extends "layouts/auth-default.html" %}
|
||||
|
||||
{% block title %} Register {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("/static/assets/static/images/bg.jpg")'>
|
||||
<div class="pos-a centerXY">
|
||||
<div class="bgc-white bdrs-50p pos-r" style="width: 120px; height: 120px;">
|
||||
<img class="pos-a centerXY" src="/static/assets/static/images/logo.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style="min-width: 320px;">
|
||||
|
||||
{% if msg %}
|
||||
<h4 class="fw-300 c-grey-900 mB-40">{{ msg | safe }}</h4>
|
||||
{% else %}
|
||||
<h4 class="fw-300 c-grey-900 mB-40">Register</h4>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="">
|
||||
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
<div class="form-group">
|
||||
<label class="text-normal text-dark">Friendly Name</label>
|
||||
{{ form.name(placeholder="Friendly Name", class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="text-normal text-dark">Username</label>
|
||||
{{ form.username(placeholder="Username", class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="text-normal text-dark">eMail Address</label>
|
||||
{{ form.email(placeholder="eMail Address", class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="text-normal text-dark">Password</label>
|
||||
{{ form.password(placeholder="Password", class="form-control", type="password") }}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Register</button>
|
||||
|
||||
|
||||
<span class="text-small font-weight-semibold">Already have and account?</span>
|
||||
<a href="/login.html" class="text-black text-small">Login</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
272
app/templates/pages/ui.html
Normal file
272
app/templates/pages/ui.html
Normal file
@@ -0,0 +1,272 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="row gap-20 masonry pos-r">
|
||||
<h4 class="c-grey-900">UI Elements</h4>
|
||||
<div class="masonry-sizer col-md-6"></div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Alerts</h6>
|
||||
<div class="mT-30">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
This is a primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
This is a secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
This is a success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
This is a danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
This is a warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
This is a info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
This is a light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
This is a dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Buttons</h6>
|
||||
<div class="mT-30">
|
||||
<div class="gap-10 peers">
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-primary">Primary</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-secondary">Secondary</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-success">Success</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-danger">Danger</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-warning">Warning</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-info">Info</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-light">Light</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-dark">Dark</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-100 gap-10 peers mY-20">
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-outline-primary">Primary</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-outline-secondary">Secondary</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-outline-success">Success</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-outline-danger">Danger</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-outline-warning">Warning</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-outline-info">Info</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-outline-light">Light</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-outline-dark">Dark</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-success">1</button>
|
||||
<button type="button" class="btn btn-success">2</button>
|
||||
<button type="button" class="btn btn-success">3</button>
|
||||
<button type="button" class="btn btn-success">4</button>
|
||||
</div>
|
||||
<div class="btn-group mr-2" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-success">5</button>
|
||||
<button type="button" class="btn btn-success">6</button>
|
||||
<button type="button" class="btn btn-success">7</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-success">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Dropdowns</h6>
|
||||
<div class="mT-30">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Example split danger button -->
|
||||
<div class="btn-group mT-20">
|
||||
<button type="button" class="btn btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">List Group</h6>
|
||||
<div class="mT-30">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action actived">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Modal</h6>
|
||||
<div class="mT-30">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Popover</h6>
|
||||
<div class="mT-30">
|
||||
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Progress</h6>
|
||||
<div class="mT-30">
|
||||
<!-- Progress Bars -->
|
||||
<div class="layers">
|
||||
<div class="layer w-100">
|
||||
<h5 class="mB-5">100k</h5>
|
||||
<small class="fw-600 c-grey-700">Visitors From USA</small>
|
||||
<span class="pull-right c-grey-600 fsz-sm">50%</span>
|
||||
<div class="progress mT-10">
|
||||
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 mT-15">
|
||||
<h5 class="mB-5">1M</h5>
|
||||
<small class="fw-600 c-grey-700">Visitors From Europe</small>
|
||||
<span class="pull-right c-grey-600 fsz-sm">80%</span>
|
||||
<div class="progress mT-10">
|
||||
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 mT-15">
|
||||
<h5 class="mB-5">450k</h5>
|
||||
<small class="fw-600 c-grey-700">Visitors From Australia</small>
|
||||
<span class="pull-right c-grey-600 fsz-sm">40%</span>
|
||||
<div class="progress mT-10">
|
||||
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layer w-100 mT-15">
|
||||
<h5 class="mB-5">1B</h5>
|
||||
<small class="fw-600 c-grey-700">Visitors From India</small>
|
||||
<span class="pull-right c-grey-600 fsz-sm">90%</span>
|
||||
<div class="progress mT-10">
|
||||
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<h6 class="c-grey-900">Tootips</h6>
|
||||
<div class="mT-30">
|
||||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
22
app/templates/pages/vector-maps.html
Normal file
22
app/templates/pages/vector-maps.html
Normal file
@@ -0,0 +1,22 @@
|
||||
|
||||
{% extends "layouts/default.html" %}
|
||||
|
||||
{% block title %} Blank Page {% endblock title %}
|
||||
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid">
|
||||
<h4 class="c-grey-900 mT-10 mB-30">Vector Maps</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="bgc-white bd bdrs-3 p-20 mB-20">
|
||||
<h6 class="c-grey-900 mB-20">Jquery Vector Maps</h6>
|
||||
<div id="world-map-marker"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user