debloat - remove unused files

This commit is contained in:
Corban-Lee Jones 2024-04-02 00:19:38 +01:00
parent fdbc5aa928
commit 01596abbc4
15 changed files with 0 additions and 2788 deletions

View File

@ -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 %}

View File

@ -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>
&nbsp; &nbsp;
<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 %}

View File

@ -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, heres 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">&lt;thead&gt;</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">&lt;tbody&gt;</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">&lt;tbody&gt;</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 %}

View File

@ -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 %}

View File

@ -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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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&mdash;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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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 %}