400 lines
15 KiB
HTML
400 lines
15 KiB
HTML
{% extends "adminlte/base.html" %}
|
|
{% import "adminlte/layout.html" as layout with context %}
|
|
{% import "adminlte/widgets.html" as widgets with context %}
|
|
|
|
{% block navbar %}
|
|
<!-- Sidebar toggle button-->
|
|
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</a>
|
|
<div class="navbar-custom-menu">
|
|
<ul class="nav navbar-nav">
|
|
<!-- Messages: style can be found in dropdown.less-->
|
|
<li class="dropdown messages-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-envelope"></i>
|
|
<span class="label label-success">4</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header">You have 4 messages</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul class="menu">
|
|
<li><!-- start message -->
|
|
<a href="#">
|
|
<div class="pull-left">
|
|
<img src="{{ current_user.avatar }}" class="img-circle" alt="User Image"/>
|
|
</div>
|
|
<h4>
|
|
Support Team
|
|
<small><i class="fa fa-clock-o"></i> 5 mins</small>
|
|
</h4>
|
|
<p>Why not buy a new awesome theme?</p>
|
|
</a>
|
|
</li><!-- end message -->
|
|
<li>
|
|
<a href="#">
|
|
<div class="pull-left">
|
|
<img src="{{ url_for('static', filename='img/avatar2.png') }}" class="img-circle" alt="user image"/>
|
|
</div>
|
|
<h4>
|
|
AdminLTE Design Team
|
|
<small><i class="fa fa-clock-o"></i> 2 hours</small>
|
|
</h4>
|
|
<p>Why not buy a new awesome theme?</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pull-left">
|
|
<img src="{{ url_for('static', filename='img/avatar.png') }}" class="img-circle" alt="user image"/>
|
|
</div>
|
|
<h4>
|
|
Developers
|
|
<small><i class="fa fa-clock-o"></i> Today</small>
|
|
</h4>
|
|
<p>Why not buy a new awesome theme?</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pull-left">
|
|
<img src="{{ url_for('static', filename='img/avatar2.png') }}" class="img-circle" alt="user image"/>
|
|
</div>
|
|
<h4>
|
|
Sales Department
|
|
<small><i class="fa fa-clock-o"></i> Yesterday</small>
|
|
</h4>
|
|
<p>Why not buy a new awesome theme?</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pull-left">
|
|
<img src="{{ url_for('static', filename='img/avatar.png') }}" class="img-circle" alt="user image"/>
|
|
</div>
|
|
<h4>
|
|
Reviewers
|
|
<small><i class="fa fa-clock-o"></i> 2 days</small>
|
|
</h4>
|
|
<p>Why not buy a new awesome theme?</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="footer"><a href="#">See All Messages</a></li>
|
|
</ul>
|
|
</li>
|
|
<!-- Notifications: style can be found in dropdown.less -->
|
|
<li class="dropdown notifications-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-warning"></i>
|
|
<span class="label label-warning">10</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header">You have 10 notifications</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul class="menu">
|
|
<li>
|
|
<a href="#">
|
|
<i class="ion ion-ios7-people info"></i> 5 new members joined today
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fa fa-users warning"></i> 5 new members joined
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#">
|
|
<i class="ion ion-ios7-cart success"></i> 25 sales made
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="ion ion-ios7-person danger"></i> You changed your username
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="footer"><a href="#">View all</a></li>
|
|
</ul>
|
|
</li>
|
|
<!-- Tasks: style can be found in dropdown.less -->
|
|
<li class="dropdown tasks-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-tasks"></i>
|
|
<span class="label label-danger">9</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header">You have 9 tasks</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul class="menu">
|
|
<li><!-- Task item -->
|
|
<a href="#">
|
|
<h3>
|
|
Design some buttons
|
|
<small class="pull-right">20%</small>
|
|
</h3>
|
|
<div class="progress xs">
|
|
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="sr-only">20% Complete</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li><!-- end task item -->
|
|
<li><!-- Task item -->
|
|
<a href="#">
|
|
<h3>
|
|
Create a nice theme
|
|
<small class="pull-right">40%</small>
|
|
</h3>
|
|
<div class="progress xs">
|
|
<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="sr-only">40% Complete</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li><!-- end task item -->
|
|
<li><!-- Task item -->
|
|
<a href="#">
|
|
<h3>
|
|
Some task I need to do
|
|
<small class="pull-right">60%</small>
|
|
</h3>
|
|
<div class="progress xs">
|
|
<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="sr-only">60% Complete</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li><!-- end task item -->
|
|
<li><!-- Task item -->
|
|
<a href="#">
|
|
<h3>
|
|
Make beautiful transitions
|
|
<small class="pull-right">80%</small>
|
|
</h3>
|
|
<div class="progress xs">
|
|
<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="sr-only">80% Complete</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li><!-- end task item -->
|
|
</ul>
|
|
</li>
|
|
<li class="footer">
|
|
<a href="#">View all tasks</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- User Account: style can be found in dropdown.less -->
|
|
<li class="dropdown user user-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="glyphicon glyphicon-user"></i>
|
|
<span>{{ current_user.full_name }} <i class="caret"></i></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<!-- User image -->
|
|
<li class="user-header bg-light-blue">
|
|
<img src="{{ current_user.avatar }}" class="img-circle" alt="User Image" />
|
|
<p>
|
|
{{ current_user.full_name }} - Web Developer
|
|
<small>Member since {{ current_user.created_at.strftime("%b. %Y") }}</small>
|
|
</p>
|
|
</li>
|
|
<!-- Menu Body -->
|
|
<li class="user-body">
|
|
<div class="col-xs-4 text-center">
|
|
<a href="#">Followers</a>
|
|
</div>
|
|
<div class="col-xs-4 text-center">
|
|
<a href="#">Sales</a>
|
|
</div>
|
|
<div class="col-xs-4 text-center">
|
|
<a href="#">Friends</a>
|
|
</div>
|
|
</li>
|
|
<!-- Menu Footer-->
|
|
<li class="user-footer">
|
|
<div class="pull-left">
|
|
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
|
</div>
|
|
<div class="pull-right">
|
|
{% if current_user.is_authenticated %}
|
|
<a href="{{ url_for('auth.logout') }}" class="btn btn-default btn-flat">Sign out</a>
|
|
{% endif %}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{%- endblock navbar %}
|
|
{% block sidebar -%}
|
|
<!-- sidebar: style can be found in sidebar.less -->
|
|
<!-- sidebar menu: : style can be found in sidebar.less -->
|
|
<div class="user-panel">
|
|
<div class="pull-left image">
|
|
<img src="{{ current_user.avatar }}" alt="User Image" class="img-circle">
|
|
</div>
|
|
<div class="pull-left info">
|
|
<p>{{ current_user.full_name }}</p>
|
|
<a href="#">
|
|
<i class="fa fa-circle text-success"></i>
|
|
Online
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<ul class="sidebar-menu">
|
|
<li class="header">HEADER</li>
|
|
<li class="active">
|
|
<a href="{{ url_for('.index') }}">
|
|
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="treeview">
|
|
<a href="#">
|
|
<i class="fa fa-folder"></i>
|
|
<span>Examples</span>
|
|
<i class="fa fa-angle-left pull-right"></i>
|
|
</a>
|
|
<ul class="treeview-menu">
|
|
<li>
|
|
<a href="{{ url_for('auth.login') }}">
|
|
<i class="fa fa-circle-o"></i>
|
|
Login
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ url_for('.lockscreen') }}">
|
|
<i class="fa fa-circle-o"></i>
|
|
Lockscreen
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
<!-- /.sidebar -->
|
|
{%- endblock sidebar %}
|
|
{% block content_header -%}
|
|
<h1>
|
|
Dashboard
|
|
<small>Preview page</small>
|
|
</h1>
|
|
<ol class="breadcrumb">
|
|
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
|
|
<li class="active">Dashboard</li>
|
|
</ol>
|
|
{%- endblock content_header %}
|
|
{% block content -%}
|
|
<h4 class="page-header">
|
|
AdminLTE Small Boxes
|
|
<small>Small boxes are used for viewing statistics. To create a small box use the <code>widgets.small_box</code> widget.</small>
|
|
</h4>
|
|
<!-- Small boxes (Stat box) -->
|
|
<div class="row">
|
|
|
|
{{
|
|
widgets.small_box(
|
|
bgcolor="bg-aqua",
|
|
header=150,
|
|
body="New Orders",
|
|
iconclass="ion ion-bag",
|
|
footerlink="#"
|
|
)
|
|
}}
|
|
|
|
{{
|
|
widgets.small_box(
|
|
bgcolor="bg-green",
|
|
header=53,
|
|
body="Bounce Rate",
|
|
iconclass="ion ion-stats-bars",
|
|
footerlink="#"
|
|
)
|
|
}}
|
|
|
|
{{
|
|
widgets.small_box(
|
|
bgcolor="bg-yellow",
|
|
header=43,
|
|
body="User Registrations",
|
|
iconclass="ion ion-person-add",
|
|
footerlink="#"
|
|
)
|
|
}}
|
|
|
|
{{
|
|
widgets.small_box(
|
|
bgcolor="bg-red",
|
|
header=65,
|
|
body="Unique Visitors",
|
|
iconclass="ion ion-pie-graph",
|
|
footerlink="#"
|
|
)
|
|
}}
|
|
|
|
</div><!-- /.row -->
|
|
|
|
<!-- Small boxes (Stat box) -->
|
|
<div class="row">
|
|
|
|
{{
|
|
widgets.small_box(
|
|
bgcolor="bg-blue",
|
|
header=230,
|
|
body="Sales",
|
|
iconclass="ion ion-ios7-cart-outline",
|
|
footerlink="#"
|
|
)
|
|
}}
|
|
|
|
{{
|
|
widgets.small_box(
|
|
bgcolor="bg-purple",
|
|
header=80,
|
|
percentage=True,
|
|
body="Conversion Rate",
|
|
iconclass="ion ion-ios7-briefcase-outline",
|
|
footerlink="#"
|
|
)
|
|
}}
|
|
|
|
{{
|
|
widgets.small_box(
|
|
bgcolor="bg-teal",
|
|
header=14,
|
|
body="Notifications",
|
|
iconclass="ion ion-ios7-alarm-outline",
|
|
footerlink="#"
|
|
)
|
|
}}
|
|
|
|
{{
|
|
widgets.small_box(
|
|
bgcolor="bg-maroon",
|
|
header=160,
|
|
body="Products",
|
|
iconclass="ion ion-ios7-pricetag-outline",
|
|
footerlink="#"
|
|
)
|
|
}}
|
|
|
|
</div><!-- /.row -->
|
|
{%- endblock content %}
|