debloat - remove unused files
This commit is contained in:
parent
fdbc5aa928
commit
01596abbc4
@ -1,49 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Profile {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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="mb-3">
|
||||
<label class="form-label" for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-color">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item col-md-6">
|
||||
<div class="bgc-white p-20 bd">
|
||||
<div class="row pos-r justify-content-center justify-content-md-start">
|
||||
<div class="col-md-4 col-8">
|
||||
<img src="{{ request.user.icon.url }}" alt="" class="bdrs-50p w-100">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3>{{ request.user.name }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,91 +0,0 @@
|
||||
{% extends "layouts/base-authentication.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %} Register {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="peers ai-s fxw-nw h-100vh">
|
||||
<div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{% 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 '/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;'>
|
||||
|
||||
<h4 class="fw-300 c-grey-900 mB-40">Adminator - Register</h4>
|
||||
|
||||
{% if msg %}
|
||||
<p class="fw-300 c-grey-900 mB-40">{{ msg | safe }}</p>
|
||||
{% else %}
|
||||
<p class="fw-300 c-grey-900 mB-40">
|
||||
Add your credentials
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if success %}
|
||||
|
||||
<div class="mb-3">
|
||||
<a href="{% url 'login' %}" class="btn btn-primary">Sign IN</a>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
|
||||
<form method="post" action="">
|
||||
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" class="text-normal text-dark">Forename</label>
|
||||
{{ form.forename }}
|
||||
</div>
|
||||
<span class="text-error">{{ form.forename.errors }}</span>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" class="text-normal text-dark">Surname</label>
|
||||
{{ form.surname }}
|
||||
</div>
|
||||
<span class="text-error">{{ form.surname.errors }}</span>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" class="text-normal text-dark">Email Address</label>
|
||||
{{ form.email }}
|
||||
</div>
|
||||
<span class="text-error">{{ form.email.errors }}</span>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" class="text-normal text-dark">Password</label>
|
||||
{{ form.password1 }}
|
||||
</div>
|
||||
<span class="text-error">{{ form.password1.errors }}</span>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" class="text-normal text-dark">Password (Again)</label>
|
||||
{{ form.password2 }}
|
||||
</div>
|
||||
<span class="text-error">{{ form.password2.errors }}</span>
|
||||
|
||||
<div class="mb-3">
|
||||
<button type="submit" name="register" class="btn btn-primary">Register</button>
|
||||
|
||||
|
||||
<span class="text-small font-weight-semibold">Have and account?</span>
|
||||
<a href="{% url 'login' %}" class="text-black text-small">Login</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,216 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Tables {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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 5</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">.table-light</code> or <code class="highlighter-rouge">.table-dark</code> to make <code class="highlighter-rouge"><thead></code>s appear light or dark gray.</p>
|
||||
<table class="table">
|
||||
<thead class="table-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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,193 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Calendar {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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 me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-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 me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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='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="mb-3">
|
||||
<label class="form-label 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 form-label">Start</label>
|
||||
<div class="timepicker-input input-icon mb-3">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text 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 form-label">End</label>
|
||||
<div class="timepicker-input input-icon mb-3">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text 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="mb-3">
|
||||
<label class="fw-500 form-label">Event title</label>
|
||||
<textarea class="form-control bdc-grey-200" rows='5'></textarea>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<button class="btn btn-primary cur-p btn-color" data-dismiss="modal">Done</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,142 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Charts {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,231 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Charts {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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 btn-color">
|
||||
<i class="fa fa-paper-plane-o"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,144 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Compose {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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 d-grid">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 rounded-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 rounded-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 rounded-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 rounded-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 rounded-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 rounded-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="mb-3">
|
||||
<input type="text" class='form-control' placeholder="To">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="text" class='form-control' placeholder="CC">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input class="form-control" placeholder="Email Subject">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<textarea name="compose" class="form-control" placeholder="Say Hi..." rows='10'></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div id="compose-area"></div>
|
||||
<div class="text-end mrg-top-30">
|
||||
<button class="btn btn-danger btn-color">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,509 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Data Tables {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,513 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Email {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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 d-grid">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 rounded-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 rounded-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 rounded-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 rounded-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 rounded-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 rounded-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-bs-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="form-label 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="form-label 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="form-label 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="form-label 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="form-label 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="form-label 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="form-label 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="form-label 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="form-label 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="form-label 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="form-label 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="form-label 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-bs-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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,261 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Forms {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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="mb-3">
|
||||
<label class="form-label" for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-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="form-label 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 btn-color">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="row">
|
||||
<div class="mb-3 col-md-6">
|
||||
<label class="form-label" for="inputEmail4">Email</label>
|
||||
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
|
||||
</div>
|
||||
<div class="mb-3 col-md-6">
|
||||
<label class="form-label" for="inputPassword4">Password</label>
|
||||
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="inputAddress">Address</label>
|
||||
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="inputAddress2">Address 2</label>
|
||||
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3 col-md-6">
|
||||
<label class="form-label" for="inputCity">City</label>
|
||||
<input type="text" class="form-control" id="inputCity">
|
||||
</div>
|
||||
<div class="mb-3 col-md-4">
|
||||
<label class="form-label" for="inputState">State</label>
|
||||
<select id="inputState" class="form-control">
|
||||
<option selected>Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 col-md-2">
|
||||
<label class="form-label" for="inputZip">Zip</label>
|
||||
<input type="text" class="form-control" id="inputZip">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="mb-3 col-md-6">
|
||||
<label class="form-label fw-500">Birthdate</label>
|
||||
<div class="timepicker-input input-icon mb-3">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text 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="mb-3">
|
||||
<div class="checkbox checkbox-circle checkbox-info peers ai-c">
|
||||
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
|
||||
<label for="inputCall2" class="form-label 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 btn-color">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="mb-3 row">
|
||||
<label for="inputEmail3" class="form-label 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="mb-3 row">
|
||||
<label for="inputPassword3" class="form-label 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="mb-3">
|
||||
<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-label form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-label 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-label form-check-label">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="mb-3 row">
|
||||
<div class="col-sm-2">Checkbox</div>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<label class="form-label form-check-label">
|
||||
<input class="form-check-input" type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 row">
|
||||
<div class="col-sm-10">
|
||||
<button type="submit" class="btn btn-primary btn-color">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>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="disabledTextInput">Disabled input</label>
|
||||
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-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-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 btn-color">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 class="form-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 class="form-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 class="form-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 class="form-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 class="form-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 btn-color" 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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,31 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} Forms {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,52 +0,0 @@
|
||||
{% extends "layouts/base-authentication.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %} Sign IN {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="peers ai-s fxw-nw h-100vh">
|
||||
<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 '/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 '/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;'>
|
||||
<h4 class="fw-300 c-grey-900 mB-40">Login</h4>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="text-normal text-dark form-label">Username</label>
|
||||
<input type="email" class="form-control" placeholder="John Doe">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="text-normal text-dark form-label">Password</label>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
<div class="">
|
||||
<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 form-label">
|
||||
<span class="peer peer-greed">Remember Me</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button class="btn btn-primary btn-color">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,48 +0,0 @@
|
||||
{% extends "layouts/base-authentication.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %} Register {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="peers ai-s fxw-nw h-100vh">
|
||||
<div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("{% 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 '/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;'>
|
||||
<h4 class="fw-300 c-grey-900 mB-40">Register</h4>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" class="text-normal text-dark">Username</label>
|
||||
<input type="text" class="form-control" Placeholder='John Doe'>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" class="text-normal text-dark">Email Address</label>
|
||||
<input type="email" class="form-control" Placeholder='name@email.com'>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" class="text-normal text-dark">Password</label>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" class="text-normal text-dark">Confirm Password</label>
|
||||
<input type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-primary btn-color">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,278 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} UI Elements {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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 btn-color">Primary</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-secondary btn-color">Secondary</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-success btn-color">Success</button>
|
||||
</div>
|
||||
<div class="peer">
|
||||
<button type="button" class="btn cur-p btn-danger btn-color">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 btn-color">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 btn-color">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 me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-success btn-color">1</button>
|
||||
<button type="button" class="btn btn-success btn-color">2</button>
|
||||
<button type="button" class="btn btn-success btn-color">3</button>
|
||||
<button type="button" class="btn btn-success btn-color">4</button>
|
||||
</div>
|
||||
<div class="btn-group me-2" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-success btn-color">5</button>
|
||||
<button type="button" class="btn btn-success btn-color">6</button>
|
||||
<button type="button" class="btn btn-success btn-color">7</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-success btn-color">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-bs-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 btn-color">Action</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-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 active" aria-current="true">
|
||||
The current link item
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</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 btn-color" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-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-lg btn-danger btn-color" data-bs-toggle="popover" title="Popover title" data-bs-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 btn-color" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-color" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-color" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-color" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
@ -1,30 +0,0 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %} UI Elements {% endblock title %}
|
||||
|
||||
<!-- Specific CSS goes HERE -->
|
||||
{% block stylesheets %}{% endblock stylesheets %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- ### $App Screen Content ### -->
|
||||
<main class='main-content bgc-grey-100'>
|
||||
<div id='mainContent'>
|
||||
<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>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
<!-- Specific Page JS goes HERE -->
|
||||
{% block javascripts %}{% endblock javascripts %}
|
Loading…
x
Reference in New Issue
Block a user