Initial import from local backup (Documents-Playground/pakerpale)

.gitignore

@@ -0,0 +1,10 @@
+flask/
+*.pyc
+dev
+node_modules
+app/database.db
+app/build
+yarn.lock
+yarn-error.log
+*.psd
+env/

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.pythonPath": "env\\Scripts\\python.exe"
+}

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 - present [AppSeed App Generator](http://appseed.us/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,88 @@
+# [Flask Dashboard Adminator](https://appseed.us/admin-dashboards/flask-dashboard-adminator)
+
+**[Open-Source Admin Dashboard](https://appseed.us/admin-dashboards/flask-dashboard-adminator)** coded in **Flask Framework** on top of **Adminator Dashboard** design. **Features**:
+
+- SQLite database
+- SQLAlchemy ORM
+- Session-Based authentication flow (login, register)
+- UI Kit: [Adminator Free Dashboard](https://github.com/app-generator/fork-adminator-admin-dashboard) by **ColorLib**
+
+<br />
+
+![Flask Dashboard Adminator - Open-Source Flask Dashboard.](https://raw.githubusercontent.com/app-generator/static/master/products/flask-dashboard-adminator-intro.gif)
+
+<br />
+
+## Build from sources
+
+```bash
+$ # Clone the sources
+$ git clone https://github.com/app-generator/flask-dashboard-adminator.git
+$ cd flask-dashboard-adminator
+$
+$ # Virtualenv modules installation (Unix based systems)
+$ virtualenv --no-site-packages env
+$ source env/bin/activate
+$
+$ # Virtualenv modules installation (Windows based systems)
+$ # virtualenv --no-site-packages env
+$ # .\env\Scripts\activate
+$ 
+$ # Install requirements
+$ pip3 install -r requirements.txt
+$
+$ # Set the FLASK_APP environment variable
+$ (Unix/Mac) export FLASK_APP=run.py
+$ (Windows) set FLASK_APP=run.py
+$ (Powershell) $env:FLASK_APP = ".\run.py"
+$
+$ # Set up the DEBUG environment
+$ # (Unix/Mac) export FLASK_ENV=development
+$ # (Windows) set FLASK_ENV=development
+$ # (Powershell) $env:FLASK_ENV = "development"
+$
+$ # Run the application
+$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
+$ # --port=5000    - specify the app port (default 5000)  
+$ flask run --host=0.0.0.0 --port=5000
+$
+$ # Access the app in browser: http://127.0.0.1:5000/
+```
+
+<br />
+
+## Want more? Go PRO!
+
+<br />
+
+| [Flask Dashboard Material](https://appseed.us/admin-dashboards/flask-dashboard-material-pro) | [Flask Dashboard Argon](https://appseed.us/admin-dashboards/flask-dashboard-argon-pro) | [Flask Dashboard Black](https://appseed.us/admin-dashboards/flask-dashboard-black-pro) |
+| --- | --- | --- |
+| [![Flask Dashboard Material PRO](https://raw.githubusercontent.com/app-generator/static/master/products/flask-dashboard-material-pro-intro.gif)](https://appseed.us/admin-dashboards/flask-dashboard-material-pro)  | [![Flask Dashboard Argon PRO](https://raw.githubusercontent.com/app-generator/static/master/products/flask-dashboard-argon-pro-intro.gif)](https://appseed.us/admin-dashboards/flask-dashboard-argon-pro) | [![Flask Dashboard Black PRO](https://raw.githubusercontent.com/app-generator/static/master/products/flask-dashboard-black-pro-intro.gif)](https://appseed.us/admin-dashboards/flask-dashboard-black-pro)
+
+<br />
+
+## Support
+
+- Free support via eMail < [support @ appseed.us](https://appseed.us/support) > and **Github** issues tracker
+- 24/7 Live Support via [Discord](https://discord.gg/fZC6hup) for paid plans and commercial products.
+
+<br />
+
+## Credits & Links
+
+- [Flask Dashboard Adminator](https://appseed.us/admin-dashboards/flask-dashboard-adminator) - Product page
+- [Flask Dashboard Adminator](https://flask-dashboard-adminator.appseed.us/) - Live DEMO
+- [Flask Framework](https://www.palletsprojects.com/p/flask/) - The offcial website
+- [Flask Dashboard - Open-Source Boilerplates](https://dev.to/sm0ke/flask-dashboard-open-source-boilerplates-dkg) - A popular article published on Dev.to platform
+- [Flask Dashboard](https://admin-dashboards.com/tags/flask-dashboard) - Index provided by **Admin-Dashboards.com**
+
+<br />
+
+## License
+
+@MIT
+
+<br />
+
+---
+[Flask Dashboard Adminator](https://appseed.us/admin-dashboards/flask-dashboard-adminator) provided by **AppSeed**

app/__init__.py

@@ -0,0 +1,33 @@
+# -*- encoding: utf-8 -*-
+"""
+License: MIT
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+import os
+
+from flask            import Flask
+from flask_sqlalchemy import SQLAlchemy
+from flask_login      import LoginManager
+from flask_bcrypt     import Bcrypt
+
+# Grabs the folder where the script runs.
+basedir = os.path.abspath(os.path.dirname(__file__))
+
+app = Flask(__name__)
+
+app.config.from_object('app.configuration.Config')
+
+db = SQLAlchemy  (app) # flask-sqlalchemy
+bc = Bcrypt      (app) # flask-bcrypt
+
+lm = LoginManager(   ) # flask-loginmanager
+lm.init_app(app) # init the login manager
+
+# Setup database
+@app.before_first_request
+def initialize_database():
+    db.create_all()
+
+# Import routing, models and Start the App
+from app import views, models

app/configuration.py

@@ -0,0 +1,19 @@
+# -*- encoding: utf-8 -*-
+"""
+License: MIT
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+import os
+
+# Grabs the folder where the script runs.
+basedir = os.path.abspath(os.path.dirname(__file__))
+
+class Config():
+
+	CSRF_ENABLED = True
+	SECRET_KEY   = "77tgFCdrEEdv77554##@3" 
+	
+	SQLALCHEMY_TRACK_MODIFICATIONS 	= False
+
+	SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'database.db')

app/forms.py

@@ -0,0 +1,20 @@
+# -*- encoding: utf-8 -*-
+"""
+License: MIT
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from flask_wtf          import FlaskForm
+from flask_wtf.file     import FileField, FileRequired
+from wtforms            import StringField, TextAreaField, SubmitField, PasswordField
+from wtforms.validators import InputRequired, Email, DataRequired
+
+class LoginForm(FlaskForm):
+	username    = StringField  (u'Username'        , validators=[DataRequired()])
+	password    = PasswordField(u'Password'        , validators=[DataRequired()])
+
+class RegisterForm(FlaskForm):
+	name        = StringField  (u'Name'      )
+	username    = StringField  (u'Username'  , validators=[DataRequired()])
+	password    = PasswordField(u'Password'  , validators=[DataRequired()])
+	email       = StringField  (u'Email'     , validators=[DataRequired(), Email()])

app/models.py

@@ -0,0 +1,33 @@
+# -*- encoding: utf-8 -*-
+"""
+License: MIT
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from app         import db
+from flask_login import UserMixin
+
+class User(UserMixin, db.Model):
+
+    id       = db.Column(db.Integer,     primary_key=True)
+    user     = db.Column(db.String(64),  unique = True)
+    email    = db.Column(db.String(120), unique = True)
+    password = db.Column(db.String(500))
+
+    def __init__(self, user, email, password):
+        self.user       = user
+        self.password   = password
+        self.email      = email
+
+    def __repr__(self):
+        return str(self.id) + ' - ' + str(self.user)
+
+    def save(self):
+
+        # inject self into db session    
+        db.session.add ( self )
+
+        # commit change and save the object
+        db.session.commit( )
+
+        return self 

app/static/36d50c1381fda7c71d12b6643cbe1ee0.svg

@@ -0,0 +1 @@
+module.exports = __webpack_public_path__ + "912ec66d7572ff821749319396470bde.svg";

app/static/6d16f95495605c95172bc8c924720bff.svg

@@ -0,0 +1 @@
+module.exports = __webpack_public_path__ + "9c8e96ecc7fa01e6ebcd196495ed2db5.svg";

app/static/assets/static/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3388.25 3014.2"><title>react-1</title><circle cx="1694.17" cy="1504.25" r="302.6" fill="#fff"/><path d="M1806.5,1191.9c406.2,0,783.6,58.3,1068.1,156.2,342.8,118,553.6,296.9,553.6,458.9,0,168.8-223.4,358.9-591.5,480.8-278.3,92.2-644.6,140.4-1030.2,140.4-395.4,0-769.7-45.2-1051.2-141.4C399.2,2165.1,184.7,1972.6,184.7,1807c0-160.7,201.3-338.2,539.3-456,285.6-99.5,672.3-159.1,1082.5-159.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271,1501.3c202.9-351.9,442-649.7,669-847.2,273.5-238,533.8-331.2,674.1-250.3,146.2,84.3,199.3,372.8,121,752.7-59.2,287.2-200.4,628.5-393.1,962.6-197.5,342.5-423.7,644.2-647.6,840-283.3,247.7-557.3,337.3-700.7,254.6-139.2-80.3-192.4-343.3-125.7-695,56.4-297.4,198-662.1,403-1017.4Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271.5,2119.8C1068,1768.2,929.4,1412.4,871.6,1117.1c-69.6-355.8-20.4-627.9,119.8-709,146.1-84.6,422.5,13.5,712.5,271,219.3,194.7,444.4,487.5,637.6,821.3,198.1,342.2,346.6,688.8,404.3,980.5,73.1,369.2,13.9,651.3-129.4,734.2-139.1,80.5-393.5-4.7-664.9-238.2-229.2-197.3-474.5-502.1-680-857.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/></svg>

app/static/sitemap.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+
+  <!-- Main links -->
+  <url>
+    <loc>https://flask-dashboard-adminator.appseed.us</loc>
+    <priority>1</priority>
+    <changefreq>monthly</changefreq>
+  </url>
+
+</urlset>

app/templates/includes/footer.html

@@ -0,0 +1,6 @@
+
+  <!-- ### $App Screen Footer ### -->
+  <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
+    <span>© Design by Colorlib. <a href="https://appseed.us/admin-dashboards/flask-dashboard-adminator">Flask Dashboard Adminator</a>. Coded in Flask by AppSeed. 
+    </span>
+  </footer>

app/templates/includes/navigation.html

@@ -0,0 +1,224 @@
+
+    <!-- ### $Topbar ### -->
+    <div class="header navbar">
+      <div class="header-container">
+        <ul class="nav-left">
+          <li>
+            <a id="sidebar-toggle" class="sidebar-toggle" href="javascript:void(0);">
+              <i class="ti-menu"></i>
+            </a>
+          </li>
+          <li class="search-box">
+            <a class="search-toggle no-pdd-right" href="javascript:void(0);">
+              <i class="search-icon ti-search pdd-right-10"></i>
+              <i class="search-icon-close ti-close pdd-right-10"></i>
+            </a>
+          </li>
+          <li class="search-input">
+            <input class="form-control" type="text" placeholder="Search...">
+          </li>
+        </ul>
+        <ul class="nav-right">
+          <li class="notifications dropdown">
+            <span class="counter bgc-red">3</span>
+            <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+              <i class="ti-bell"></i>
+            </a>
+
+            <ul class="dropdown-menu">
+              <li class="pX-20 pY-15 bdB">
+                <i class="ti-bell pR-10"></i>
+                <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
+              </li>
+              <li>
+                <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
+                  <li>
+                    <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
+                      <div class="peer mR-15">
+                        <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <span>
+                          <span class="fw-500">John Doe</span>
+                          <span class="c-grey-600">liked your <span class="text-dark">post</span>
+                          </span>
+                        </span>
+                        <p class="m-0">
+                          <small class="fsz-xs">5 mins ago</small>
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
+                      <div class="peer mR-15">
+                        <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <span>
+                          <span class="fw-500">Moo Doe</span>
+                          <span class="c-grey-600">liked your <span class="text-dark">cover image</span>
+                          </span>
+                        </span>
+                        <p class="m-0">
+                          <small class="fsz-xs">7 mins ago</small>
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
+                      <div class="peer mR-15">
+                        <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <span>
+                          <span class="fw-500">Lee Doe</span>
+                          <span class="c-grey-600">commented on your <span class="text-dark">video</span>
+                          </span>
+                        </span>
+                        <p class="m-0">
+                          <small class="fsz-xs">10 mins ago</small>
+                        </p>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="pX-20 pY-15 ta-c bdT">
+                <span>
+                  <a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
+                </span>
+              </li>
+            </ul>
+          </li>
+          <li class="notifications dropdown">
+            <span class="counter bgc-blue">3</span>
+            <a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
+              <i class="ti-email"></i>
+            </a>
+
+            <ul class="dropdown-menu">
+              <li class="pX-20 pY-15 bdB">
+                <i class="ti-email pR-10"></i>
+                <span class="fsz-sm fw-600 c-grey-900">Emails</span>
+              </li>
+              <li>
+                <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
+                  <li>
+                    <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
+                      <div class="peer mR-15">
+                        <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <div>
+                          <div class="peers jc-sb fxw-nw mB-5">
+                            <div class="peer">
+                              <p class="fw-500 mB-0">John Doe</p>
+                            </div>
+                            <div class="peer">
+                              <small class="fsz-xs">5 mins ago</small>
+                            </div>
+                          </div>
+                          <span class="c-grey-600 fsz-sm">
+                            Want to create your own customized data generator for your app...
+                          </span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
+                      <div class="peer mR-15">
+                        <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <div>
+                          <div class="peers jc-sb fxw-nw mB-5">
+                            <div class="peer">
+                              <p class="fw-500 mB-0">Moo Doe</p>
+                            </div>
+                            <div class="peer">
+                              <small class="fsz-xs">15 mins ago</small>
+                            </div>
+                          </div>
+                          <span class="c-grey-600 fsz-sm">
+                            Want to create your own customized data generator for your app...
+                          </span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
+                      <div class="peer mR-15">
+                        <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
+                      </div>
+                      <div class="peer peer-greed">
+                        <div>
+                          <div class="peers jc-sb fxw-nw mB-5">
+                            <div class="peer">
+                              <p class="fw-500 mB-0">Lee Doe</p>
+                            </div>
+                            <div class="peer">
+                              <small class="fsz-xs">25 mins ago</small>
+                            </div>
+                          </div>
+                          <span class="c-grey-600 fsz-sm">
+                            Want to create your own customized data generator for your app...
+                          </span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="pX-20 pY-15 ta-c bdT">
+                <span>
+                  <a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
+                </span>
+              </li>
+            </ul>
+          </li>
+          <li class="dropdown">
+            <a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
+              <div class="peer mR-10">
+                <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
+              </div>
+              <div class="peer">
+                <span class="fsz-sm c-grey-900">
+                  {{ current_user.user }}
+                </span>
+              </div>
+            </a>
+            <ul class="dropdown-menu fsz-sm">
+              <li>
+                <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                  <i class="ti-settings mR-10"></i>
+                  <span>Setting</span>
+                </a>
+              </li>
+              <li>
+                <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                  <i class="ti-user mR-10"></i>
+                  <span>Profile</span>
+                </a>
+              </li>
+              <li>
+                <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                  <i class="ti-email mR-10"></i>
+                  <span>Messages</span>
+                </a>
+              </li>
+              <li role="separator" class="divider"></li>
+              <li>
+                <a href={{ url_for('logout') }} class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
+                  <i class="ti-power-off mR-10"></i>
+                  <span>Logout</span>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>

app/templates/includes/scripts.html

@@ -0,0 +1,2 @@
+
+

app/templates/includes/sidenav.html

@@ -0,0 +1,208 @@
+
+      <!-- #Left Sidebar ==================== -->
+      <div class="sidebar">
+        <div class="sidebar-inner">
+          <!-- ### $Sidebar Header ### -->
+          <div class="sidebar-logo">
+            <div class="peers ai-c fxw-nw">
+              <div class="peer peer-greed">
+                <a class="sidebar-link td-n" href="https://appseed.us/admin-dashboards/flask-dashboard-adminator">
+                  <div class="peers ai-c fxw-nw">
+                    <div class="peer">
+                      <div class="logo">
+                        <img src="/static/assets/static/images/logo.png" alt="">
+                      </div>
+                    </div>
+                    <div class="peer peer-greed">
+                      <h5 class="lh-1 mB-0 logo-text">Adminator</h5>
+                    </div>
+                  </div>
+                </a>
+              </div>
+              <div class="peer">
+                <div class="mobile-toggle sidebar-toggle">
+                  <a href="" class="td-n">
+                    <i class="ti-arrow-circle-left"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- ### $Sidebar Menu ### -->
+          <ul class="sidebar-menu scrollable pos-r">
+            <li class="nav-item mT-30 actived">
+              <a class="sidebar-link" href="index.html">
+                <span class="icon-holder">
+                  <i class="c-blue-500 ti-home"></i>
+                </span>
+                <span class="title">Dashboard</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="sidebar-link" href="email.html">
+                <span class="icon-holder">
+                  <i class="c-brown-500 ti-email"></i>
+                </span>
+                <span class="title">Email</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="sidebar-link" href="compose.html">
+                <span class="icon-holder">
+                  <i class="c-blue-500 ti-share"></i>
+                </span>
+                <span class="title">Compose</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="sidebar-link" href="calendar.html">
+                <span class="icon-holder">
+                  <i class="c-deep-orange-500 ti-calendar"></i>
+                </span>
+                <span class="title">Calendar</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="sidebar-link" href="chat.html">
+                <span class="icon-holder">
+                  <i class="c-deep-purple-500 ti-comment-alt"></i>
+                </span>
+                <span class="title">Chat</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="sidebar-link" href="charts.html">
+                <span class="icon-holder">
+                  <i class="c-indigo-500 ti-bar-chart"></i>
+                </span>
+                <span class="title">Charts</span>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="sidebar-link" href="forms.html">
+                <span class="icon-holder">
+                  <i class="c-light-blue-500 ti-pencil"></i>
+                </span>
+                <span class="title">Forms</span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="sidebar-link" href="ui.html">
+                <span class="icon-holder">
+                    <i class="c-pink-500 ti-palette"></i>
+                  </span>
+                <span class="title">UI Elements</span>
+              </a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                  <i class="c-orange-500 ti-layout-list-thumb"></i>
+                </span>
+                <span class="title">Tables</span>
+                <span class="arrow">
+                  <i class="ti-angle-right"></i>
+                </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a class="sidebar-link" href="basic-table.html">Basic Table</a>
+                </li>
+                <li>
+                  <a class="sidebar-link" href="datatable.html">Data Table</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                    <i class="c-purple-500 ti-map"></i>
+                  </span>
+                <span class="title">Maps</span>
+                <span class="arrow">
+                    <i class="ti-angle-right"></i>
+                  </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a href="google-maps.html">Google Map</a>
+                </li>
+                <li>
+                  <a href="vector-maps.html">Vector Map</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                    <i class="c-red-500 ti-files"></i>
+                  </span>
+                <span class="title">Pages</span>
+                <span class="arrow">
+                    <i class="ti-angle-right"></i>
+                  </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li>
+                  <a class="sidebar-link" href="blank.html">Blank</a>
+                </li>                 
+                <li>
+                  <a class="sidebar-link" href="404.html">404</a>
+                </li>
+                <li>
+                  <a class="sidebar-link" href="500.html">500</a>
+                </li>
+                <li>
+                  <a class="sidebar-link" href="signin.html">Sign In</a>
+                </li>
+                <li>
+                  <a class="sidebar-link" href="signup.html">Sign Up</a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="dropdown-toggle" href="javascript:void(0);">
+                <span class="icon-holder">
+                  <i class="c-teal-500 ti-view-list-alt"></i>
+                </span>
+                <span class="title">Multiple Levels</span>
+                <span class="arrow">
+                  <i class="ti-angle-right"></i>
+                </span>
+              </a>
+              <ul class="dropdown-menu">
+                <li class="nav-item dropdown">
+                  <a href="javascript:void(0);">
+                    <span>Menu Item</span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="javascript:void(0);">
+                    <span>Menu Item</span>
+                    <span class="arrow">
+                      <i class="ti-angle-right"></i>
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li>
+                      <a href="javascript:void(0);">Menu Item</a>
+                    </li>
+                    <li>
+                      <a href="javascript:void(0);">Menu Item</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="sidebar-link" href={{ url_for('logout') }}>
+                <span class="icon-holder">
+                    <i class="ti-power-off mR-10"></i>
+                  </span>
+                <span class="title">Logout</span>
+              </a>
+            </li>            
+          </ul>
+        </div>
+      </div>

app/templates/layouts/auth-default.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+    <title>
+      Flask Adminator - {% block title %}{% endblock %} | AppSeed
+    </title>
+
+    <style>
+      #loader {
+        transition: all 0.3s ease-in-out;
+        opacity: 1;
+        visibility: visible;
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        background: #fff;
+        z-index: 90000;
+      }
+
+      #loader.fadeOut {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      .spinner {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: calc(50% - 20px);
+        left: calc(50% - 20px);
+        background-color: #333;
+        border-radius: 100%;
+        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+        animation: sk-scaleout 1.0s infinite ease-in-out;
+      }
+
+      @-webkit-keyframes sk-scaleout {
+        0% { -webkit-transform: scale(0) }
+        100% {
+          -webkit-transform: scale(1.0);
+          opacity: 0;
+        }
+      }
+
+      @keyframes sk-scaleout {
+        0% {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+        } 100% {
+          -webkit-transform: scale(1.0);
+          transform: scale(1.0);
+          opacity: 0;
+        }
+      }
+    </style>
+
+    <link href="/static/assets/style.css" rel="stylesheet">
+
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}{% endblock stylesheets %}
+
+  </head>
+  <body class="app">
+
+    <div id="loader">
+      <div class="spinner"></div>
+    </div>
+
+    <script>
+      window.addEventListener('load', function load() {
+        const loader = document.getElementById('loader');
+        setTimeout(function() {
+          loader.classList.add('fadeOut');
+        }, 300);
+      });
+    </script>
+
+    <div class="peers ai-s fxw-nw h-100vh">
+
+        {% block content %}{% endblock content %}  
+
+    </div>
+  
+    <script type="text/javascript" src="/static/assets/vendor.js"></script>
+    <script type="text/javascript" src="/static/assets/bundle.js"></script>
+    
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}{% endblock javascripts %}
+
+  </body>
+
+</html>

app/templates/layouts/default.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+    <title>
+      Flask Adminator - {% block title %}{% endblock %} | AppSeed
+    </title>
+
+    <style>
+      #loader {
+        transition: all 0.3s ease-in-out;
+        opacity: 1;
+        visibility: visible;
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        background: #fff;
+        z-index: 90000;
+      }
+
+      #loader.fadeOut {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      .spinner {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: calc(50% - 20px);
+        left: calc(50% - 20px);
+        background-color: #333;
+        border-radius: 100%;
+        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+        animation: sk-scaleout 1.0s infinite ease-in-out;
+      }
+
+      @-webkit-keyframes sk-scaleout {
+        0% { -webkit-transform: scale(0) }
+        100% {
+          -webkit-transform: scale(1.0);
+          opacity: 0;
+        }
+      }
+
+      @keyframes sk-scaleout {
+        0% {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+        } 100% {
+          -webkit-transform: scale(1.0);
+          transform: scale(1.0);
+          opacity: 0;
+        }
+      }
+    </style>
+    <link href="/static/assets/style.css" rel="stylesheet">
+
+    <!-- Specific Page CSS goes HERE -->
+    {% block stylesheets %}{% endblock stylesheets %}
+
+  </head>
+  <body class="app">
+    <!-- @TOC -->
+    <!-- =================================================== -->
+    <!--
+      + @Page Loader
+      + @App Content
+          - #Left Sidebar
+              > $Sidebar Header
+              > $Sidebar Menu
+
+          - #Main
+              > $Topbar
+              > $App Screen Content
+    -->
+
+    <!-- @Page Loader -->
+    <!-- =================================================== -->
+    <div id="loader">
+      <div class="spinner"></div>
+    </div>
+
+    <script>
+      window.addEventListener('load', function load() {
+        const loader = document.getElementById('loader');
+        setTimeout(function() {
+          loader.classList.add('fadeOut');
+        }, 300);
+      });
+    </script>
+
+    <!-- @App Content -->
+    <!-- =================================================== -->
+    <div>
+
+      {% include 'includes/sidenav.html' %}
+
+      <!-- #Main ============================ -->
+      <div class="page-container">
+
+        {% include 'includes/navigation.html' %}
+
+        <!-- ### $App Screen Content ### -->
+        <main class="main-content bgc-grey-100">
+          <div id="mainContent">
+
+            {% block content %}{% endblock content %}  
+          
+          </div>
+        </main>
+
+        {% include 'includes/footer.html' %}
+
+    </div>
+  
+    <script type="text/javascript" src="/static/assets/vendor.js"></script>
+    <script type="text/javascript" src="/static/assets/bundle.js"></script>
+    
+    <!-- Specific Page JS goes HERE -->
+    {% block javascripts %}{% endblock javascripts %}
+
+  </body>
+
+</html>

app/templates/layouts/error-default.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+    <title>
+      Flask Adminator - {% block title %}{% endblock %} | AppSeed
+    </title>
+
+    <link href="/static/assets/style.css" rel="stylesheet">
+
+  </head>
+  <body class="app">
+
+    {% block content %}{% endblock content %}  
+  
+    <script type="text/javascript" src="/static/assets/vendor.js"></script>
+    <script type="text/javascript" src="/static/assets/bundle.js"></script>
+    
+  </body>
+</html>

app/templates/pages/404.html

@@ -0,0 +1,22 @@
+{% extends "layouts/error-default.html" %}
+
+{% block title %} 404 Error {% endblock title %}
+
+{% block content %}
+
+    <div class="pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30">
+      <div class="mR-60">
+        <img alt="#" src="/static/assets/static/images/404.png">
+      </div>
+
+      <div class="d-f jc-c fxd-c">
+        <h1 class="mB-30 fw-900 lh-1 c-red-500" style="font-size: 60px;">404</h1>
+        <h3 class="mB-10 fsz-lg c-grey-900 tt-c">Oops Page Not Found</h3>
+        <p class="mB-30 fsz-def c-grey-700">The page you are looking for does not exist or has been moved.</p>
+        <div>
+          <a href="index.html" type="primary" class="btn btn-primary">Go to Home</a>
+        </div>
+      </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/500.html

@@ -0,0 +1,22 @@
+{% extends "layouts/error-default.html" %}
+
+{% block title %} 500 Error {% endblock title %}
+
+{% block content %}
+
+    <div class="pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30">
+      <div class="mR-60">
+        <img alt="#" src="/static/assets/static/images/500.png">
+      </div>
+
+      <div class="d-f jc-c fxd-c">
+        <h1 class="mB-30 fw-900 lh-1 c-red-500" style="font-size: 60px;">500</h1>
+        <h3 class="mB-10 fsz-lg c-grey-900 tt-c">Internal server error</h3>
+        <p class="mB-30 fsz-def c-grey-700">Something goes wrong with our servers, please try again later.</p>
+        <div>
+          <a href="index.html" type="primary" class="btn btn-primary">Go to Home</a>
+        </div>
+      </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/basic-table.html

@@ -0,0 +1,208 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="container-fluid">
+        <h4 class="c-grey-900 mT-10 mB-30">Basic Tables</h4>
+        <div class="row">
+        <div class="col-md-12">
+            <div class="bgc-white bd bdrs-3 p-20 mB-20">
+            <h4 class="c-grey-900 mB-20">Simple Table</h4>
+            <p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">First Name</th>
+                    <th scope="col">Last Name</th>
+                    <th scope="col">Username</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>@mdo</td>
+                </tr>
+                <tr>
+                    <th scope="row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>@fat</td>
+                </tr>
+                <tr>
+                    <th scope="row">3</th>
+                    <td>Larry</td>
+                    <td>the Bird</td>
+                    <td>@twitter</td>
+                </tr>
+                </tbody>
+            </table>
+            </div>
+        </div>
+        </div>
+        <div class="row">
+        <div class="col-md-12">
+            <div class="bgc-white bd bdrs-3 p-20 mB-20">
+            <h4 class="c-grey-900 mB-20">Table head options</h4>
+            <p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
+            <table class="table">
+                <thead class="thead-dark">
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">First Name</th>
+                    <th scope="col">Last Name</th>
+                    <th scope="col">Username</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>@mdo</td>
+                </tr>
+                <tr>
+                    <th scope="row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>@fat</td>
+                </tr>
+                <tr>
+                    <th scope="row">3</th>
+                    <td>Larry</td>
+                    <td>the Bird</td>
+                    <td>@twitter</td>
+                </tr>
+                </tbody>
+            </table>
+            </div>
+        </div>
+        </div>
+        <div class="row">
+        <div class="col-md-12">
+            <div class="bgc-white bd bdrs-3 p-20 mB-20">
+            <h4 class="c-grey-900 mB-20">Striped rows</h4>
+            <p>Use <code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the <code class="highlighter-rouge">&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>
+
+{% endblock content %}

app/templates/pages/blank.html

@@ -0,0 +1,15 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- (Almost) A blank page -->
+    <h3>
+    Add content here
+    </h3>
+
+{% endblock content %}

app/templates/pages/calendar.html

@@ -0,0 +1,185 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="container-fluid">
+        <div class="row">
+        <div class="col-md-4">
+            <div class="bdrs-3 ov-h bgc-white bd">
+            <div class="bgc-deep-purple-500 ta-c p-30">
+                <h1 class="fw-300 mB-5 lh-1 c-white">01<span class="fsz-def">st</span></h1>
+                <h3 class="c-white">Monday</h3>
+            </div>
+            <div class="pos-r">
+                <button type="button" class="mT-nv-50 pos-a r-10 t-2 btn cur-p bdrs-50p p-0 w-3r h-3r btn-warning">
+                <i class="ti-plus"></i>
+                </button>
+                <ul class="m-0 p-0 mT-20">
+                <li class="bdB peers ai-c jc-sb fxw-nw">
+                    <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
+                    <div class="peer mR-15">
+                        <i class="fa fa-fw fa-clock-o c-red-500"></i>
+                    </div>
+                    <div class="peer">
+                        <span class="fw-600">All Day Event</span>
+                        <div class="c-grey-600">
+                        <span class="c-grey-700">Nov 01 - </span>
+                        <i>Website Development</i>
+                        </div>
+                    </div>
+                    </a>
+                    <div class="peers mR-15">
+                    <div class="peer">
+                        <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                        <i class="ti-pencil"></i>
+                        </a>
+                    </div>
+                    <div class="peer">
+                        <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                        <i class="ti-trash"></i>
+                        </a>
+                    </div>
+                    </div>
+                </li>
+                <li class="bdB peers ai-c jc-sb fxw-nw">
+                    <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
+                    <div class="peer mR-15">
+                        <i class="fa fa-fw fa-clock-o c-blue-500"></i>
+                    </div>
+                    <div class="peer">
+                        <span class="fw-600">All Day Event</span>
+                        <div class="c-grey-600">
+                        <span class="c-grey-700">Nov 01 - </span>
+                        <i>Website Development</i>
+                        </div>
+                    </div>
+                    </a>
+                    <div class="peers mR-15">
+                    <div class="peer">
+                        <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                        <i class="ti-pencil"></i>
+                        </a>
+                    </div>
+                    <div class="peer">
+                        <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                        <i class="ti-trash"></i>
+                        </a>
+                    </div>
+                    </div>
+                </li>
+                <li class="bdB peers ai-c jc-sb fxw-nw">
+                    <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
+                    <div class="peer mR-15">
+                        <i class="fa fa-fw fa-clock-o c-indigo-500"></i>
+                    </div>
+                    <div class="peer">
+                        <span class="fw-600">All Day Event</span>
+                        <div class="c-grey-600">
+                        <span class="c-grey-700">Nov 01 - </span>
+                        <i>Website Development</i>
+                        </div>
+                    </div>
+                    </a>
+                    <div class="peers mR-15">
+                    <div class="peer">
+                        <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                        <i class="ti-pencil"></i>
+                        </a>
+                    </div>
+                    <div class="peer">
+                        <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                        <i class="ti-trash"></i>
+                        </a>
+                    </div>
+                    </div>
+                </li>
+                <li class="bdB peers ai-c jc-sb fxw-nw">
+                    <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
+                    <div class="peer mR-15">
+                        <i class="fa fa-fw fa-clock-o c-green-500"></i>
+                    </div>
+                    <div class="peer">
+                        <span class="fw-600">All Day Event</span>
+                        <div class="c-grey-600">
+                        <span class="c-grey-700">Nov 01 - </span>
+                        <i>Website Development</i>
+                        </div>
+                    </div>
+                    </a>
+                    <div class="peers mR-15">
+                    <div class="peer">
+                        <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
+                        <i class="ti-pencil"></i>
+                        </a>
+                    </div>
+                    <div class="peer">
+                        <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
+                        <i class="ti-trash"></i>
+                        </a>
+                    </div>
+                    </div>
+                </li>
+                </ul>
+            </div>
+            </div>
+        </div>
+        <div class="col-md-8">
+            <div id="full-calendar"></div>
+        </div>
+        </div>
+        <div class="modal fade" id="calendar-edit">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+            <div class="bd p-15">
+                <h5 class="m-0">Add Event</h5>
+            </div>
+            <div class="modal-body">
+                <form>
+                <div class="form-group">
+                    <label class="fw-500">Event title</label>
+                    <input class="form-control bdc-grey-200">
+                </div>
+                <div class="row">
+                    <div class="col-md-6">
+                    <label class="fw-500">Start</label>
+                    <div class="timepicker-input input-icon form-group">
+                        <div class="input-group">
+                        <div class="input-group-addon bgc-white bd bdwR-0">
+                            <i class="ti-calendar"></i>
+                        </div>
+                        <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
+                        </div>
+                    </div>
+                    </div>
+                    <div class="col-md-6">
+                    <label class="fw-500">End</label>
+                    <div class="timepicker-input input-icon form-group">
+                        <div class="input-group">
+                        <div class="input-group-addon bgc-white bd bdwR-0">
+                            <i class="ti-calendar"></i>
+                        </div>
+                        <input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker">
+                        </div>
+                    </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="fw-500">Event title</label>
+                    <textarea class="form-control bdc-grey-200" rows="5"></textarea>
+                </div>
+                <div class="text-right">
+                    <button class="btn btn-primary cur-p" data-dismiss="modal">Done</button>
+                </div>
+                </form>
+            </div>
+            </div>
+        </div>
+        </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/charts.html

@@ -0,0 +1,134 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="row gap-20 masonry pos-r">
+        <div class="masonry-sizer col-md-6 pos-a"></div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Line Chart</h6>
+            <div class="mT-30">
+            <canvas id="line-chart" height="220"></canvas>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Area Chart</h6>
+            <div class="mT-30">
+            <canvas id="area-chart" height="220"></canvas>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Scatter Chart</h6>
+            <div class="mT-30">
+            <canvas id="scatter-chart" height="220"></canvas>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Bar Chart</h6>
+            <div class="mT-30">
+            <canvas id="bar-chart" height="220"></canvas>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">jQuery Sparkline</h6>
+            <div class="mT-30">
+            <div class="peers ai-c jc-sb fxw-nw bdB pY-15">
+                <div class="peer">
+                <span>Spark Line</span>
+                </div>
+                <div class="peer">
+                <span class="sparkline">&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>
+
+{% endblock content %}

app/templates/pages/chat.html

@@ -0,0 +1,223 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="full-container">
+        <div class="peers fxw-nw pos-r">
+        <!-- Sidebar -->
+        <div class="peer bdR" id="chat-sidebar">
+            <div class="layers h-100">
+            <!-- Search -->
+            <div class="bdB layer w-100">
+                <input type="text" placeholder="Search contacts..." name="chatSearch" class="form-constrol p-15 bdrs-0 w-100 bdw-0">
+            </div>
+
+            <!-- List -->
+            <div class="layer w-100 fxg-1 scrollable pos-r">
+                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                <div class="peer">
+                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                </div>
+                <div class="peer peer-greed pL-20">
+                    <h6 class="mB-0 lh-1 fw-400">John Doe</h6>
+                    <small class="lh-1 c-green-500">Online</small>
+                </div>
+                </div>
+                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                <div class="peer">
+                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                </div>
+                <div class="peer peer-greed pL-20">
+                    <h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
+                    <small class="lh-1 c-amber-500">Away</small>
+                </div>
+                </div>
+                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                <div class="peer">
+                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                </div>
+                <div class="peer peer-greed pL-20">
+                    <h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
+                    <small class="lh-1 c-grey-500">Offline</small>
+                </div>
+                </div>
+                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                <div class="peer">
+                    <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                </div>
+                <div class="peer peer-greed pL-20">
+                    <h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
+                    <small class="lh-1 c-red-500">Busy</small>
+                </div>
+                </div>
+                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                <div class="peer">
+                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                </div>
+                <div class="peer peer-greed pL-20">
+                    <h6 class="mB-0 lh-1 fw-400">John Doe</h6>
+                    <small class="lh-1 c-green-500">Online</small>
+                </div>
+                </div>
+                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                <div class="peer">
+                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                </div>
+                <div class="peer peer-greed pL-20">
+                    <h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
+                    <small class="lh-1 c-amber-500">Away</small>
+                </div>
+                </div>
+                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                <div class="peer">
+                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                </div>
+                <div class="peer peer-greed pL-20">
+                    <h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
+                    <small class="lh-1 c-grey-500">Offline</small>
+                </div>
+                </div>
+                <div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
+                <div class="peer">
+                    <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                </div>
+                <div class="peer peer-greed pL-20">
+                    <h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
+                    <small class="lh-1 c-red-500">Busy</small>
+                </div>
+                </div>
+            </div>
+            </div>
+        </div>
+
+        <!-- Chat Box -->
+        <div class="peer peer-greed" id="chat-box">
+            <div class="layers h-100">
+            <div class="layer w-100">
+                <!-- Header -->
+                <div class="peers fxw-nw jc-sb ai-c pY-20 pX-30 bgc-white">
+                <div class="peers ai-c">
+                    <div class="peer d-n@md+">
+                    <a href="" title="" id="chat-sidebar-toggle" class="td-n c-grey-900 cH-blue-500 mR-30">
+                        <i class="ti-menu"></i>
+                    </a>
+                    </div>
+                    <div class="peer mR-20">
+                    <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="w-3r h-3r bdrs-50p">
+                    </div>
+                    <div class="peer">
+                    <h6 class="lh-1 mB-0">John Doe</h6>
+                    <i class="fsz-sm lh-1">Typing...</i>
+                    </div>
+                </div>
+                <div class="peers">
+                    <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
+                    <i class="ti-video-camera"></i>
+                    </a>
+                    <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
+                    <i class="ti-headphone"></i>
+                    </a>
+                    <a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md" title="">
+                    <i class="ti-more"></i>
+                    </a>
+                </div>
+                </div>
+            </div>
+            <div class="layer w-100 fxg-1 bgc-grey-200 scrollable pos-r">
+                <!-- Chat Box -->
+                <div class="p-20 gapY-15">
+                <!-- Chat Conversation -->
+                <div class="peers fxw-nw">
+                    <div class="peer mR-20">
+                    <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
+                    </div>
+                    <div class="peer peer-greed">
+                    <div class="layers ai-fs gapY-5">
+                        <div class="layer">
+                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                            <div class="peer mR-10">
+                            <small>10:00 AM</small>
+                            </div>
+                            <div class="peer-greed">
+                            <span>Lorem Ipsum is simply dummy text of</span>
+                            </div>
+                        </div>
+                        </div>
+                        <div class="layer">
+                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                            <div class="peer mR-10">
+                            <small>10:00 AM</small>
+                            </div>
+                            <div class="peer-greed">
+                            <span>the printing and typesetting industry.</span>
+                            </div>
+                        </div>
+                        </div>
+                        <div class="layer">
+                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                            <div class="peer mR-10">
+                            <small>10:00 AM</small>
+                            </div>
+                            <div class="peer-greed">
+                            <span>Lorem Ipsum has been the industry's</span>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+
+                <!-- Chat Conversation -->
+                <div class="peers fxw-nw ai-fe">
+                    <div class="peer ord-1 mL-20">
+                    <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
+                    </div>
+                    <div class="peer peer-greed ord-0">
+                    <div class="layers ai-fe gapY-10">
+                        <div class="layer">
+                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                            <div class="peer mL-10 ord-1">
+                            <small>10:00 AM</small>
+                            </div>
+                            <div class="peer-greed ord-0">
+                            <span>Heloo</span>
+                            </div>
+                        </div>
+                        </div>
+                        <div class="layer">
+                        <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                            <div class="peer mL-10 ord-1">
+                            <small>10:00 AM</small>
+                            </div>
+                            <div class="peer-greed ord-0">
+                            <span>??</span>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+                </div>
+            </div>
+            </div>
+            <div class="layer w-100">
+                <!-- Chat Send -->
+                <div class="p-20 bdT bgc-white">
+                <div class="pos-r">
+                    <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
+                    <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
+                    <i class="fa fa-paper-plane-o"></i>
+                    </button>
+                </div>
+                </div>
+            </div>
+            </div>
+        </div>
+        </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/compose.html

@@ -0,0 +1,136 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="full-container">
+        <div class="email-app">
+        <div class="email-side-nav remain-height ov-h">
+        <div class="h-100 layers">
+            <div class="p-20 bgc-grey-100 layer w-100">
+            <a href="/compose" class="btn btn-danger btn-block">New Message</a>
+            </div>
+            <div class="scrollable pos-r bdT layer w-100 fxg-1">
+            <ul class="p-20 nav flex-column">
+                <li class="nav-item">
+                <a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
+                    <div class="peers ai-c jc-sb">
+                    <div class="peer peer-greed">
+                        <i class="mR-10 ti-email"></i>
+                        <span>Inbox</span>
+                    </div>
+                    <div class="peer">
+                        <span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
+                    </div>
+                    </div>
+                </a>
+                </li>
+                <li class="nav-item">
+                <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                    <div class="peer peer-greed">
+                        <i class="mR-10 ti-share"></i>
+                        <span>Sent</span>
+                    </div>
+                    <div class="peer">
+                        <span class="badge badge-pill bgc-green-50 c-green-700">12</span>
+                    </div>
+                    </div>
+                </a>
+                </li>
+                <li class="nav-item">
+                <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                    <div class="peer peer-greed">
+                        <i class="mR-10 ti-star"></i>
+                        <span>Important</span>
+                    </div>
+                    <div class="peer">
+                        <span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
+                    </div>
+                    </div>
+                </a>
+                </li>
+                <li class="nav-item">
+                <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                    <div class="peer peer-greed">
+                        <i class="mR-10 ti-file"></i>
+                        <span>Drafts</span>
+                    </div>
+                    <div class="peer">
+                        <span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
+                    </div>
+                    </div>
+                </a>
+                </li>
+                <li class="nav-item">
+                <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                    <div class="peer peer-greed">
+                        <i class="mR-10 ti-alert"></i>
+                        <span>Spam</span>
+                    </div>
+                    <div class="peer">
+                        <span class="badge badge-pill bgc-red-50 c-red-700">1</span>
+                    </div>
+                    </div>
+                </a>
+                </li>
+                <li class="nav-item">
+                <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                    <div class="peer peer-greed">
+                        <i class="mR-10 ti-trash"></i>
+                        <span>Trash</span>
+                    </div>
+                    <div class="peer">
+                        <span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
+                    </div>
+                    </div>
+                </a>
+                </li>
+            </ul>
+            </div>
+        </div>
+        </div>
+        <div class="email-wrapper row remain-height pos-r scrollable bgc-white">
+        <div class="email-content open no-inbox-view">
+            <div class="email-compose">
+            <div class="d-n@md+ p-20">
+                <a class="email-side-toggle c-grey-900 cH-blue-500 td-n" href="javascript:void(0)">
+                <i class="ti-menu"></i>
+                </a>
+            </div>
+            <form class="email-compose-body">
+                <h4 class="c-grey-900 mB-20">Send Message</h4>
+                <div class="send-header">
+                <div class="form-group">
+                    <input type="text" class="form-control" placeholder="To">
+                </div>
+                <div class="form-group">
+                    <input type="text" class="form-control" placeholder="CC">
+                </div>
+                <div class="form-group">
+                    <input class="form-control" placeholder="Email Subject">
+                </div>
+                <div class="form-group">
+                    <textarea name="compose" class="form-control" placeholder="Say Hi..." rows="10"></textarea>
+                </div>
+                </div>
+                <div id="compose-area"></div>
+                <div class="text-right mrg-top-30">
+                <button class="btn btn-danger">Send</button>
+                </div>
+            </form>
+            </div>
+        </div>
+        </div>
+        </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/datatable.html

@@ -0,0 +1,501 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="container-fluid">
+        <h4 class="c-grey-900 mT-10 mB-30">Data Tables</h4>
+        <div class="row">
+        <div class="col-md-12">
+            <div class="bgc-white bd bdrs-3 p-20 mB-20">
+            <h4 class="c-grey-900 mB-20">Bootstrap Data Table</h4>
+            <table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
+                <thead>
+                    <tr>
+                    <th>Name</th>
+                    <th>Position</th>
+                    <th>Office</th>
+                    <th>Age</th>
+                    <th>Start date</th>
+                    <th>Salary</th>
+                    </tr>
+                </thead>
+                <tfoot>
+                    <tr>
+                    <th>Name</th>
+                    <th>Position</th>
+                    <th>Office</th>
+                    <th>Age</th>
+                    <th>Start date</th>
+                    <th>Salary</th>
+                    </tr>
+                </tfoot>
+                <tbody>
+                    <tr>
+                    <td>Tiger Nixon</td>
+                    <td>System Architect</td>
+                    <td>Edinburgh</td>
+                    <td>61</td>
+                    <td>2011/04/25</td>
+                    <td>$320,800</td>
+                    </tr>
+                    <tr>
+                    <td>Garrett Winters</td>
+                    <td>Accountant</td>
+                    <td>Tokyo</td>
+                    <td>63</td>
+                    <td>2011/07/25</td>
+                    <td>$170,750</td>
+                    </tr>
+                    <tr>
+                    <td>Ashton Cox</td>
+                    <td>Junior Technical Author</td>
+                    <td>San Francisco</td>
+                    <td>66</td>
+                    <td>2009/01/12</td>
+                    <td>$86,000</td>
+                    </tr>
+                    <tr>
+                    <td>Cedric Kelly</td>
+                    <td>Senior Javascript Developer</td>
+                    <td>Edinburgh</td>
+                    <td>22</td>
+                    <td>2012/03/29</td>
+                    <td>$433,060</td>
+                    </tr>
+                    <tr>
+                    <td>Airi Satou</td>
+                    <td>Accountant</td>
+                    <td>Tokyo</td>
+                    <td>33</td>
+                    <td>2008/11/28</td>
+                    <td>$162,700</td>
+                    </tr>
+                    <tr>
+                    <td>Brielle Williamson</td>
+                    <td>Integration Specialist</td>
+                    <td>New York</td>
+                    <td>61</td>
+                    <td>2012/12/02</td>
+                    <td>$372,000</td>
+                    </tr>
+                    <tr>
+                    <td>Herrod Chandler</td>
+                    <td>Sales Assistant</td>
+                    <td>San Francisco</td>
+                    <td>59</td>
+                    <td>2012/08/06</td>
+                    <td>$137,500</td>
+                    </tr>
+                    <tr>
+                    <td>Rhona Davidson</td>
+                    <td>Integration Specialist</td>
+                    <td>Tokyo</td>
+                    <td>55</td>
+                    <td>2010/10/14</td>
+                    <td>$327,900</td>
+                    </tr>
+                    <tr>
+                    <td>Colleen Hurst</td>
+                    <td>Javascript Developer</td>
+                    <td>San Francisco</td>
+                    <td>39</td>
+                    <td>2009/09/15</td>
+                    <td>$205,500</td>
+                    </tr>
+                    <tr>
+                    <td>Sonya Frost</td>
+                    <td>Software Engineer</td>
+                    <td>Edinburgh</td>
+                    <td>23</td>
+                    <td>2008/12/13</td>
+                    <td>$103,600</td>
+                    </tr>
+                    <tr>
+                    <td>Jena Gaines</td>
+                    <td>Office Manager</td>
+                    <td>London</td>
+                    <td>30</td>
+                    <td>2008/12/19</td>
+                    <td>$90,560</td>
+                    </tr>
+                    <tr>
+                    <td>Quinn Flynn</td>
+                    <td>Support Lead</td>
+                    <td>Edinburgh</td>
+                    <td>22</td>
+                    <td>2013/03/03</td>
+                    <td>$342,000</td>
+                    </tr>
+                    <tr>
+                    <td>Charde Marshall</td>
+                    <td>Regional Director</td>
+                    <td>San Francisco</td>
+                    <td>36</td>
+                    <td>2008/10/16</td>
+                    <td>$470,600</td>
+                    </tr>
+                    <tr>
+                    <td>Haley Kennedy</td>
+                    <td>Senior Marketing Designer</td>
+                    <td>London</td>
+                    <td>43</td>
+                    <td>2012/12/18</td>
+                    <td>$313,500</td>
+                    </tr>
+                    <tr>
+                    <td>Tatyana Fitzpatrick</td>
+                    <td>Regional Director</td>
+                    <td>London</td>
+                    <td>19</td>
+                    <td>2010/03/17</td>
+                    <td>$385,750</td>
+                    </tr>
+                    <tr>
+                    <td>Michael Silva</td>
+                    <td>Marketing Designer</td>
+                    <td>London</td>
+                    <td>66</td>
+                    <td>2012/11/27</td>
+                    <td>$198,500</td>
+                    </tr>
+                    <tr>
+                    <td>Paul Byrd</td>
+                    <td>Chief Financial Officer (CFO)</td>
+                    <td>New York</td>
+                    <td>64</td>
+                    <td>2010/06/09</td>
+                    <td>$725,000</td>
+                    </tr>
+                    <tr>
+                    <td>Gloria Little</td>
+                    <td>Systems Administrator</td>
+                    <td>New York</td>
+                    <td>59</td>
+                    <td>2009/04/10</td>
+                    <td>$237,500</td>
+                    </tr>
+                    <tr>
+                    <td>Bradley Greer</td>
+                    <td>Software Engineer</td>
+                    <td>London</td>
+                    <td>41</td>
+                    <td>2012/10/13</td>
+                    <td>$132,000</td>
+                    </tr>
+                    <tr>
+                    <td>Dai Rios</td>
+                    <td>Personnel Lead</td>
+                    <td>Edinburgh</td>
+                    <td>35</td>
+                    <td>2012/09/26</td>
+                    <td>$217,500</td>
+                    </tr>
+                    <tr>
+                    <td>Jenette Caldwell</td>
+                    <td>Development Lead</td>
+                    <td>New York</td>
+                    <td>30</td>
+                    <td>2011/09/03</td>
+                    <td>$345,000</td>
+                    </tr>
+                    <tr>
+                    <td>Yuri Berry</td>
+                    <td>Chief Marketing Officer (CMO)</td>
+                    <td>New York</td>
+                    <td>40</td>
+                    <td>2009/06/25</td>
+                    <td>$675,000</td>
+                    </tr>
+                    <tr>
+                    <td>Caesar Vance</td>
+                    <td>Pre-Sales Support</td>
+                    <td>New York</td>
+                    <td>21</td>
+                    <td>2011/12/12</td>
+                    <td>$106,450</td>
+                    </tr>
+                    <tr>
+                    <td>Doris Wilder</td>
+                    <td>Sales Assistant</td>
+                    <td>Sidney</td>
+                    <td>23</td>
+                    <td>2010/09/20</td>
+                    <td>$85,600</td>
+                    </tr>
+                    <tr>
+                    <td>Angelica Ramos</td>
+                    <td>Chief Executive Officer (CEO)</td>
+                    <td>London</td>
+                    <td>47</td>
+                    <td>2009/10/09</td>
+                    <td>$1,200,000</td>
+                    </tr>
+                    <tr>
+                    <td>Gavin Joyce</td>
+                    <td>Developer</td>
+                    <td>Edinburgh</td>
+                    <td>42</td>
+                    <td>2010/12/22</td>
+                    <td>$92,575</td>
+                    </tr>
+                    <tr>
+                    <td>Jennifer Chang</td>
+                    <td>Regional Director</td>
+                    <td>Singapore</td>
+                    <td>28</td>
+                    <td>2010/11/14</td>
+                    <td>$357,650</td>
+                    </tr>
+                    <tr>
+                    <td>Brenden Wagner</td>
+                    <td>Software Engineer</td>
+                    <td>San Francisco</td>
+                    <td>28</td>
+                    <td>2011/06/07</td>
+                    <td>$206,850</td>
+                    </tr>
+                    <tr>
+                    <td>Fiona Green</td>
+                    <td>Chief Operating Officer (COO)</td>
+                    <td>San Francisco</td>
+                    <td>48</td>
+                    <td>2010/03/11</td>
+                    <td>$850,000</td>
+                    </tr>
+                    <tr>
+                    <td>Shou Itou</td>
+                    <td>Regional Marketing</td>
+                    <td>Tokyo</td>
+                    <td>20</td>
+                    <td>2011/08/14</td>
+                    <td>$163,000</td>
+                    </tr>
+                    <tr>
+                    <td>Michelle House</td>
+                    <td>Integration Specialist</td>
+                    <td>Sidney</td>
+                    <td>37</td>
+                    <td>2011/06/02</td>
+                    <td>$95,400</td>
+                    </tr>
+                    <tr>
+                    <td>Suki Burks</td>
+                    <td>Developer</td>
+                    <td>London</td>
+                    <td>53</td>
+                    <td>2009/10/22</td>
+                    <td>$114,500</td>
+                    </tr>
+                    <tr>
+                    <td>Prescott Bartlett</td>
+                    <td>Technical Author</td>
+                    <td>London</td>
+                    <td>27</td>
+                    <td>2011/05/07</td>
+                    <td>$145,000</td>
+                    </tr>
+                    <tr>
+                    <td>Gavin Cortez</td>
+                    <td>Team Leader</td>
+                    <td>San Francisco</td>
+                    <td>22</td>
+                    <td>2008/10/26</td>
+                    <td>$235,500</td>
+                    </tr>
+                    <tr>
+                    <td>Martena Mccray</td>
+                    <td>Post-Sales support</td>
+                    <td>Edinburgh</td>
+                    <td>46</td>
+                    <td>2011/03/09</td>
+                    <td>$324,050</td>
+                    </tr>
+                    <tr>
+                    <td>Unity Butler</td>
+                    <td>Marketing Designer</td>
+                    <td>San Francisco</td>
+                    <td>47</td>
+                    <td>2009/12/09</td>
+                    <td>$85,675</td>
+                    </tr>
+                    <tr>
+                    <td>Howard Hatfield</td>
+                    <td>Office Manager</td>
+                    <td>San Francisco</td>
+                    <td>51</td>
+                    <td>2008/12/16</td>
+                    <td>$164,500</td>
+                    </tr>
+                    <tr>
+                    <td>Hope Fuentes</td>
+                    <td>Secretary</td>
+                    <td>San Francisco</td>
+                    <td>41</td>
+                    <td>2010/02/12</td>
+                    <td>$109,850</td>
+                    </tr>
+                    <tr>
+                    <td>Vivian Harrell</td>
+                    <td>Financial Controller</td>
+                    <td>San Francisco</td>
+                    <td>62</td>
+                    <td>2009/02/14</td>
+                    <td>$452,500</td>
+                    </tr>
+                    <tr>
+                    <td>Timothy Mooney</td>
+                    <td>Office Manager</td>
+                    <td>London</td>
+                    <td>37</td>
+                    <td>2008/12/11</td>
+                    <td>$136,200</td>
+                    </tr>
+                    <tr>
+                    <td>Jackson Bradshaw</td>
+                    <td>Director</td>
+                    <td>New York</td>
+                    <td>65</td>
+                    <td>2008/09/26</td>
+                    <td>$645,750</td>
+                    </tr>
+                    <tr>
+                    <td>Olivia Liang</td>
+                    <td>Support Engineer</td>
+                    <td>Singapore</td>
+                    <td>64</td>
+                    <td>2011/02/03</td>
+                    <td>$234,500</td>
+                    </tr>
+                    <tr>
+                    <td>Bruno Nash</td>
+                    <td>Software Engineer</td>
+                    <td>London</td>
+                    <td>38</td>
+                    <td>2011/05/03</td>
+                    <td>$163,500</td>
+                    </tr>
+                    <tr>
+                    <td>Sakura Yamamoto</td>
+                    <td>Support Engineer</td>
+                    <td>Tokyo</td>
+                    <td>37</td>
+                    <td>2009/08/19</td>
+                    <td>$139,575</td>
+                    </tr>
+                    <tr>
+                    <td>Thor Walton</td>
+                    <td>Developer</td>
+                    <td>New York</td>
+                    <td>61</td>
+                    <td>2013/08/11</td>
+                    <td>$98,540</td>
+                    </tr>
+                    <tr>
+                    <td>Finn Camacho</td>
+                    <td>Support Engineer</td>
+                    <td>San Francisco</td>
+                    <td>47</td>
+                    <td>2009/07/07</td>
+                    <td>$87,500</td>
+                    </tr>
+                    <tr>
+                    <td>Serge Baldwin</td>
+                    <td>Data Coordinator</td>
+                    <td>Singapore</td>
+                    <td>64</td>
+                    <td>2012/04/09</td>
+                    <td>$138,575</td>
+                    </tr>
+                    <tr>
+                    <td>Zenaida Frank</td>
+                    <td>Software Engineer</td>
+                    <td>New York</td>
+                    <td>63</td>
+                    <td>2010/01/04</td>
+                    <td>$125,250</td>
+                    </tr>
+                    <tr>
+                    <td>Zorita Serrano</td>
+                    <td>Software Engineer</td>
+                    <td>San Francisco</td>
+                    <td>56</td>
+                    <td>2012/06/01</td>
+                    <td>$115,000</td>
+                    </tr>
+                    <tr>
+                    <td>Jennifer Acosta</td>
+                    <td>Junior Javascript Developer</td>
+                    <td>Edinburgh</td>
+                    <td>43</td>
+                    <td>2013/02/01</td>
+                    <td>$75,650</td>
+                    </tr>
+                    <tr>
+                    <td>Cara Stevens</td>
+                    <td>Sales Assistant</td>
+                    <td>New York</td>
+                    <td>46</td>
+                    <td>2011/12/06</td>
+                    <td>$145,600</td>
+                    </tr>
+                    <tr>
+                    <td>Hermione Butler</td>
+                    <td>Regional Director</td>
+                    <td>London</td>
+                    <td>47</td>
+                    <td>2011/03/21</td>
+                    <td>$356,250</td>
+                    </tr>
+                    <tr>
+                    <td>Lael Greer</td>
+                    <td>Systems Administrator</td>
+                    <td>London</td>
+                    <td>21</td>
+                    <td>2009/02/27</td>
+                    <td>$103,500</td>
+                    </tr>
+                    <tr>
+                    <td>Jonas Alexander</td>
+                    <td>Developer</td>
+                    <td>San Francisco</td>
+                    <td>30</td>
+                    <td>2010/07/14</td>
+                    <td>$86,500</td>
+                    </tr>
+                    <tr>
+                    <td>Shad Decker</td>
+                    <td>Regional Director</td>
+                    <td>Edinburgh</td>
+                    <td>51</td>
+                    <td>2008/11/13</td>
+                    <td>$183,000</td>
+                    </tr>
+                    <tr>
+                    <td>Michael Bruce</td>
+                    <td>Javascript Developer</td>
+                    <td>Singapore</td>
+                    <td>29</td>
+                    <td>2011/06/27</td>
+                    <td>$183,000</td>
+                    </tr>
+                    <tr>
+                    <td>Donna Snider</td>
+                    <td>Customer Support</td>
+                    <td>New York</td>
+                    <td>27</td>
+                    <td>2011/01/25</td>
+                    <td>$112,000</td>
+                    </tr>
+                </tbody>
+                </table>
+            </div>
+        </div>
+        </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/email.html

@@ -0,0 +1,505 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="full-container">
+        <div class="email-app">
+        <div class="email-side-nav remain-height ov-h">
+            <div class="h-100 layers">
+            <div class="p-20 bgc-grey-100 layer w-100">
+                <a href="/compose" class="btn btn-danger btn-block">New Message</a>
+            </div>
+            <div class="scrollable pos-r bdT layer w-100 fxg-1">
+                <ul class="p-20 nav flex-column">
+                <li class="nav-item">
+                    <a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
+                    <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                        <i class="mR-10 ti-email"></i>
+                        <span>Inbox</span>
+                        </div>
+                        <div class="peer">
+                        <span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
+                        </div>
+                    </div>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                        <i class="mR-10 ti-share"></i>
+                        <span>Sent</span>
+                        </div>
+                        <div class="peer">
+                        <span class="badge badge-pill bgc-green-50 c-green-700">12</span>
+                        </div>
+                    </div>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                        <i class="mR-10 ti-star"></i>
+                        <span>Important</span>
+                        </div>
+                        <div class="peer">
+                        <span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
+                        </div>
+                    </div>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                        <i class="mR-10 ti-file"></i>
+                        <span>Drafts</span>
+                        </div>
+                        <div class="peer">
+                        <span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
+                        </div>
+                    </div>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                        <i class="mR-10 ti-alert"></i>
+                        <span>Spam</span>
+                        </div>
+                        <div class="peer">
+                        <span class="badge badge-pill bgc-red-50 c-red-700">1</span>
+                        </div>
+                    </div>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="" class="nav-link c-grey-800 cH-blue-500">
+                    <div class="peers ai-c jc-sb">
+                        <div class="peer peer-greed">
+                        <i class="mR-10 ti-trash"></i>
+                        <span>Trash</span>
+                        </div>
+                        <div class="peer">
+                        <span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
+                        </div>
+                    </div>
+                    </a>
+                </li>
+                </ul>
+            </div>
+            </div>
+        </div>
+        <div class="email-wrapper row remain-height bgc-white ov-h">
+        <div class="email-list h-100 layers">
+            <div class="layer w-100">
+            <div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw">
+                <div class="peer">
+                <div class="btn-group" role="group">
+                    <button type="button" class="email-side-toggle d-n@md+ btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-menu"></i>
+                    </button>
+                    <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-folder"></i>
+                    </button>
+                    <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-tag"></i>
+                    </button>
+                    <div class="btn-group" role="group">
+                    <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <i class="ti-more-alt"></i>
+                    </button>
+                    <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
+                        <li>
+                        <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                            <i class="ti-trash mR-10"></i>
+                            <span>Delete</span>
+                        </a>
+                        </li>
+                        <li>
+                        <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                            <i class="ti-alert mR-10"></i>
+                            <span>Mark as Spam</span>
+                        </a>
+                        </li>
+                        <li>
+                        <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                            <i class="ti-star mR-10"></i>
+                            <span>Star</span>
+                        </a>
+                        </li>
+                    </ul>
+                    </div>
+                </div>
+                </div>
+                <div class="peer">
+                <div class="btn-group" role="group">
+                    <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-angle-left"></i>
+                    </button>
+                    <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-angle-right"></i>
+                    </button>
+                </div>
+                </div>
+            </div>
+            </div>
+            <div class="layer w-100">
+            <div class="bdT bdB">
+                <input type="text" class="form-control m-0 bdw-0 pY-15 pX-20" placeholder="Search...">
+            </div>
+            </div>
+            <div class="layer w-100 fxg-1 scrollable pos-r">
+            <div class="">
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+                <div class="email-list-item peers fxw-nw p-20 bdB bgcH-grey-100 cur-p">
+                <div class="peer mR-10">
+                    <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall1" class="peers peer-greed js-sb ai-c"></label>
+                    </div>
+                </div>
+                <div class="peer peer-greed ov-h">
+                    <div class="peers ai-c">
+                    <div class="peer peer-greed">
+                        <h6>John Doe</h6>
+                    </div>
+                    <div class="peer">
+                        <small>1 min ago</small>
+                    </div>
+                    </div>
+                    <h5 class="fsz-def tt-c c-grey-900">title goes here</h5>
+                    <span class="whs-nw w-100 ov-h tov-e d-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
+                </div>
+                </div>
+            </div>
+            </div>
+        </div>
+        <div class="email-content h-100">
+            <div class="h-100 scrollable pos-r">
+            <div class="bgc-grey-100 peers ai-c jc-sb p-20 fxw-nw d-n@md+">
+                <div class="peer">
+                <div class="btn-group" role="group">
+                    <button type="button" class="back-to-mailbox btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-angle-left"></i>
+                    </button>
+                    <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-folder"></i>
+                    </button>
+                    <button type="button" class="btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-tag"></i>
+                    </button>
+                    <div class="btn-group" role="group">
+                    <button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <i class="ti-more-alt"></i>
+                    </button>
+                    <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
+                        <li>
+                        <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                            <i class="ti-trash mR-10"></i>
+                            <span>Delete</span>
+                        </a>
+                        </li>
+                        <li>
+                        <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                            <i class="ti-alert mR-10"></i>
+                            <span>Mark as Spam</span>
+                        </a>
+                        </li>
+                        <li>
+                        <a href="" class="d-b td-n pY-5 pX-10 bgcH-grey-100 c-grey-700">
+                            <i class="ti-star mR-10"></i>
+                            <span>Star</span>
+                        </a>
+                        </li>
+                    </ul>
+                    </div>
+                </div>
+                </div>
+                <div class="peer">
+                <div class="btn-group" role="group">
+                    <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-angle-left"></i>
+                    </button>
+                    <button type="button" class="fsz-xs btn bgc-white bdrs-2 mR-3 cur-p">
+                    <i class="ti-angle-right"></i>
+                    </button>
+                </div>
+                </div>
+            </div>
+            <div class="email-content-wrapper">
+                <!-- Header -->
+                <div class="peers ai-c jc-sb pX-40 pY-30">
+                <div class="peers peer-greed">
+                    <div class="peer mR-20">
+                    <img class="bdrs-50p w-3r h-3r" alt="" src="https://randomuser.me/api/portraits/men/11.jpg">
+                    </div>
+                    <div class="peer">
+                    <small>Nov, 02 2017</small>
+                    <h5 class="c-grey-900 mB-5">John Doe</h5>
+                    <span>To: email@gmail.com</span>
+                    </div>
+                </div>
+                <div class="peer">
+                    <a href="" class="btn btn-danger bdrs-50p p-15 lh-0">
+                    <i class="fa fa-reply"></i>
+                    </a>
+                </div>
+                </div>
+
+                <!-- Content -->
+                <div class="bdT pX-40 pY-30">
+                <h4>Title of this email goes here</h4>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                </p>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
+                </p>
+                </div>
+            </div>
+            </div>
+        </div>
+        </div>
+    </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/forms.html

@@ -0,0 +1,253 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="row gap-20 masonry pos-r">
+        <div class="masonry-sizer col-md-6"></div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Basic Form</h6>
+            <div class="mT-30">
+            <form>
+                <div class="form-group">
+                <label for="exampleInputEmail1">Email address</label>
+                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+                </div>
+                <div class="form-group">
+                <label for="exampleInputPassword1">Password</label>
+                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+                </div>
+                <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
+                <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                <label for="inputCall1" class="peers peer-greed js-sb ai-c">
+                    <span class="peer peer-greed">Call John for Dinner</span>
+                </label>
+                </div>
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </form>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Complex Form Layout</h6>
+            <div class="mT-30">
+            <form>
+                <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="inputEmail4">Email</label>
+                    <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="inputPassword4">Password</label>
+                    <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
+                </div>
+                </div>
+                <div class="form-group">
+                <label for="inputAddress">Address</label>
+                <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+                </div>
+                <div class="form-group">
+                <label for="inputAddress2">Address 2</label>
+                <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+                </div>
+                <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="inputCity">City</label>
+                    <input type="text" class="form-control" id="inputCity">
+                </div>
+                <div class="form-group col-md-4">
+                    <label for="inputState">State</label>
+                    <select id="inputState" class="form-control">
+                    <option selected="selected">Choose...</option>
+                    <option>...</option>
+                    </select>
+                </div>
+                <div class="form-group col-md-2">
+                    <label for="inputZip">Zip</label>
+                    <input type="text" class="form-control" id="inputZip">
+                </div>
+                </div>
+                <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label class="fw-500">Birthdate</label>
+                    <div class="timepicker-input input-icon form-group">
+                    <div class="input-group">
+                        <div class="input-group-addon bgc-white bd bdwR-0">
+                        <i class="ti-calendar"></i>
+                        </div>
+                        <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
+                    </div>
+                    </div>
+                </div>
+                </div>
+                <div class="form-group">
+                <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                    <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
+                    <label for="inputCall2" class="peers peer-greed js-sb ai-c">
+                    <span class="peer peer-greed">Call John for Dinner</span>
+                    </label>
+                </div>
+                </div>
+                <button type="submit" class="btn btn-primary">Sign in</button>
+            </form>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Horizontal Form</h6>
+            <div class="mT-30">
+            <form>
+                <div class="form-group row">
+                <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
+                <div class="col-sm-10">
+                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+                </div>
+                </div>
+                <div class="form-group row">
+                <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
+                <div class="col-sm-10">
+                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+                </div>
+                </div>
+                <fieldset class="form-group">
+                <div class="row">
+                    <legend class="col-form-legend col-sm-2">Radios</legend>
+                    <div class="col-sm-10">
+                    <div class="form-check">
+                        <label class="form-check-label">
+                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked="checked">
+                        Option one is this and that&mdash;be sure to include why it's great
+                        </label>
+                    </div>
+                    <div class="form-check">
+                        <label class="form-check-label">
+                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
+                        Option two can be something else and selecting it will deselect option one
+                        </label>
+                    </div>
+                    <div class="form-check disabled">
+                        <label class="form-check-label">
+                        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled="disabled">
+                        Option three is disabled
+                        </label>
+                    </div>
+                    </div>
+                </div>
+                </fieldset>
+                <div class="form-group row">
+                <div class="col-sm-2">Checkbox</div>
+                <div class="col-sm-10">
+                    <div class="form-check">
+                    <label class="form-check-label">
+                        <input class="form-check-input" type="checkbox"> Check me out
+                    </label>
+                    </div>
+                </div>
+                </div>
+                <div class="form-group row">
+                <div class="col-sm-10">
+                    <button type="submit" class="btn btn-primary">Sign in</button>
+                </div>
+                </div>
+            </form>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Disabled Forms</h6>
+            <div class="mT-30">
+            <form>
+                <fieldset disabled="disabled">
+                <div class="form-group">
+                    <label for="disabledTextInput">Disabled input</label>
+                    <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
+                </div>
+                <div class="form-group">
+                    <label for="disabledSelect">Disabled select menu</label>
+                    <select id="disabledSelect" class="form-control">
+                    <option>Disabled select</option>
+                    </select>
+                </div>
+                <div class="form-check">
+                    <label class="form-check-label">
+                    <input class="form-check-input" type="checkbox"> Can't check this
+                    </label>
+                </div>
+                <button type="submit" class="btn btn-primary">Submit</button>
+                </fieldset>
+            </form>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Validation</h6>
+            <div class="mT-30">
+            <form class="container" id="needs-validation" novalidate>
+                <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="validationCustom01">First name</label>
+                    <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
+                </div>
+                <div class="col-md-6 mb-3">
+                    <label for="validationCustom02">Last name</label>
+                    <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
+                </div>
+                </div>
+                <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="validationCustom03">City</label>
+                    <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
+                    <div class="invalid-feedback">
+                    Please provide a valid city.
+                    </div>
+                </div>
+                <div class="col-md-3 mb-3">
+                    <label for="validationCustom04">State</label>
+                    <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
+                    <div class="invalid-feedback">
+                    Please provide a valid state.
+                    </div>
+                </div>
+                <div class="col-md-3 mb-3">
+                    <label for="validationCustom05">Zip</label>
+                    <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
+                    <div class="invalid-feedback">
+                    Please provide a valid zip.
+                    </div>
+                </div>
+                </div>
+                <button class="btn btn-primary" type="submit">Submit form</button>
+            </form>
+            <script>
+                // Example starter JavaScript for disabling form submissions if there are invalid fields
+                (function() {
+                'use strict';
+
+                window.addEventListener('load', function() {
+                    var form = document.getElementById('needs-validation');
+                    form.addEventListener('submit', function(event) {
+                    if (form.checkValidity() === false) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                    form.classList.add('was-validated');
+                    }, false);
+                }, false);
+                })();
+            </script>
+            </div>
+        </div>
+        </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/google-maps.html

@@ -0,0 +1,22 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="container-fluid">
+        <h4 class="c-grey-900 mT-10 mB-30">Google Maps</h4>
+        <div class="row">
+        <div class="col-md-12">
+            <div class="bgc-white bd bdrs-3 p-20 mB-20">
+            <h6 class="c-grey-900 mB-20">Google Maps</h6>
+            <div id="google-map" style="padding-bottom: 75%;"></div>
+            </div>
+        </div>
+        </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/index.html

@@ -0,0 +1,583 @@
+{% extends "layouts/default.html" %}
+
+{% block title %} Dashboard {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+            <div class="row gap-20 masonry pos-r">
+              <div class="masonry-sizer col-md-6"></div>
+              <div class="masonry-item w-100">
+                <div class="row gap-20">
+                  <!-- #Toatl Visits ==================== -->
+                  <div class="col-md-3">
+                    <div class="layers bd bgc-white p-20">
+                      <div class="layer w-100 mB-10">
+                        <h6 class="lh-1">Total Visits</h6>
+                      </div>
+                      <div class="layer w-100">
+                        <div class="peers ai-sb fxw-nw">
+                          <div class="peer peer-greed">
+                            <span id="sparklinedash"></span>
+                          </div>
+                          <div class="peer">
+                            <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">+10%</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- #Total Page Views ==================== -->
+                  <div class="col-md-3">
+                    <div class="layers bd bgc-white p-20">
+                      <div class="layer w-100 mB-10">
+                        <h6 class="lh-1">Total Page Views</h6>
+                      </div>
+                      <div class="layer w-100">
+                        <div class="peers ai-sb fxw-nw">
+                          <div class="peer peer-greed">
+                            <span id="sparklinedash2"></span>
+                          </div>
+                          <div class="peer">
+                            <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500">-7%</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- #Unique Visitors ==================== -->
+                  <div class="col-md-3">
+                    <div class="layers bd bgc-white p-20">
+                      <div class="layer w-100 mB-10">
+                        <h6 class="lh-1">Unique Visitor</h6>
+                      </div>
+                      <div class="layer w-100">
+                        <div class="peers ai-sb fxw-nw">
+                          <div class="peer peer-greed">
+                            <span id="sparklinedash3"></span>
+                          </div>
+                          <div class="peer">
+                            <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">~12%</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- #Bounce Rate ==================== -->
+                  <div class="col-md-3">
+                    <div class="layers bd bgc-white p-20">
+                      <div class="layer w-100 mB-10">
+                        <h6 class="lh-1">Bounce Rate</h6>
+                      </div>
+                      <div class="layer w-100">
+                        <div class="peers ai-sb fxw-nw">
+                          <div class="peer peer-greed">
+                            <span id="sparklinedash4"></span>
+                          </div>
+                          <div class="peer">
+                            <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">33%</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-12">
+                <!-- #Site Visits ==================== -->
+                <div class="bd bgc-white">
+                  <div class="peers fxw-nw@lg+ ai-s">
+                    <div class="peer peer-greed w-70p@lg+ w-100@lg- p-20">
+                      <div class="layers">
+                        <div class="layer w-100 mB-10">
+                          <h6 class="lh-1">Site Visits</h6>
+                        </div>
+                        <div class="layer w-100">
+                          <div id="world-map-marker"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
+                      <div class="layers">
+                        <div class="layer w-100">
+                          <!-- Progress Bars -->
+                          <div class="layers">
+                            <div class="layer w-100">
+                              <h5 class="mB-5">100k</h5>
+                              <small class="fw-600 c-grey-700">Visitors From USA</small>
+                              <span class="pull-right c-grey-600 fsz-sm">50%</span>
+                              <div class="progress mT-10">
+                                <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
+                              </div>
+                            </div>
+                            <div class="layer w-100 mT-15">
+                              <h5 class="mB-5">1M</h5>
+                              <small class="fw-600 c-grey-700">Visitors From Europe</small>
+                              <span class="pull-right c-grey-600 fsz-sm">80%</span>
+                              <div class="progress mT-10">
+                                <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
+                              </div>
+                            </div>
+                            <div class="layer w-100 mT-15">
+                              <h5 class="mB-5">450k</h5>
+                              <small class="fw-600 c-grey-700">Visitors From Australia</small>
+                              <span class="pull-right c-grey-600 fsz-sm">40%</span>
+                              <div class="progress mT-10">
+                                <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
+                              </div>
+                            </div>
+                            <div class="layer w-100 mT-15">
+                              <h5 class="mB-5">1B</h5>
+                              <small class="fw-600 c-grey-700">Visitors From India</small>
+                              <span class="pull-right c-grey-600 fsz-sm">90%</span>
+                              <div class="progress mT-10">
+                                <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- Pie Charts -->
+                          <div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
+                            <div class="peer">
+                              <div class="easy-pie-chart" data-size="80" data-percent="75" data-bar-color="#f44336">
+                                <span></span>
+                              </div>
+                              <h6 class="fsz-sm">New Users</h6>
+                            </div>
+                            <div class="peer">
+                              <div class="easy-pie-chart" data-size="80" data-percent="50" data-bar-color="#2196f3">
+                                <span></span>
+                              </div>
+                              <h6 class="fsz-sm">New Purchases</h6>
+                            </div>
+                            <div class="peer">
+                              <div class="easy-pie-chart" data-size="80" data-percent="90" data-bar-color="#ff9800">
+                                <span></span>
+                              </div>
+                              <h6 class="fsz-sm">Bounce Rate</h6>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Monthly Stats ==================== -->
+                <div class="bd bgc-white">
+                  <div class="layers">
+                    <div class="layer w-100 pX-20 pT-20">
+                      <h6 class="lh-1">Monthly Stats</h6>
+                    </div>
+                    <div class="layer w-100 p-20">
+                      <canvas id="line-chart" height="220"></canvas>
+                    </div>
+                    <div class="layer bdT p-20 w-100">
+                      <div class="peers ai-c jc-c gapX-20">
+                        <div class="peer">
+                          <span class="fsz-def fw-600 mR-10 c-grey-800">10% <i class="fa fa-level-up c-green-500"></i></span>
+                          <small class="c-grey-500 fw-600">APPL</small>
+                        </div>
+                        <div class="peer fw-600">
+                          <span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
+                          <small class="c-grey-500 fw-600">Average</small>
+                        </div>
+                        <div class="peer fw-600">
+                          <span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
+                          <small class="c-grey-500 fw-600">Sales</small>
+                        </div>
+                        <div class="peer fw-600">
+                          <span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
+                          <small class="c-grey-500 fw-600">Profit</small>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Todo ==================== -->
+                <div class="bd bgc-white p-20">
+                  <div class="layers">
+                    <div class="layer w-100 mB-10">
+                      <h6 class="lh-1">Todo List</h6>
+                    </div>
+                    <div class="layer w-100">
+                      <ul class="list-task list-group" data-role="tasklist">
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall1" class="peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Call John for Dinner</span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall2" class="peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Book Boss Flight</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-success lh-0 p-10">2 Days</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall3" class="peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Hit the Gym</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-danger lh-0 p-10">3 Minutes</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall4" class="peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Give Purchase Report</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-warning lh-0 p-10">not important</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall5" class="peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Watch Game of Thrones Episode</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-info lh-0 p-10">Tomorrow</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                        <li class="list-group-item bdw-0" data-role="task">
+                          <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                            <input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer">
+                            <label for="inputCall6" class="peers peer-greed js-sb ai-c">
+                              <span class="peer peer-greed">Give Purchase report</span>
+                              <span class="peer">
+                                <span class="badge badge-pill fl-r badge-success lh-0 p-10">Done</span>
+                              </span>
+                            </label>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Sales Report ==================== -->
+                <div class="bd bgc-white">
+                  <div class="layers">
+                    <div class="layer w-100 p-20">
+                      <h6 class="lh-1">Sales Report</h6>
+                    </div>
+                    <div class="layer w-100">
+                      <div class="bgc-light-blue-500 c-white p-20">
+                        <div class="peers ai-c jc-sb gap-40">
+                          <div class="peer peer-greed">
+                            <h5>November 2017</h5>
+                            <p class="mB-0">Sales Report</p>
+                          </div>
+                          <div class="peer">
+                            <h3 class="text-right">$6,000</h3>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="table-responsive p-20">
+                        <table class="table">
+                          <thead>
+                            <tr>
+                              <th class="bdwT-0">Name</th>
+                              <th class="bdwT-0">Status</th>
+                              <th class="bdwT-0">Date</th>
+                              <th class="bdwT-0">Price</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr>
+                              <td class="fw-600">Item #1 Name</td>
+                              <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Unavailable</span> </td>
+                              <td>Nov 18</td>
+                              <td><span class="text-success">$12</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #2 Name</td>
+                              <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c badge-pill">New</span></td>
+                              <td>Nov 19</td>
+                              <td><span class="text-info">$34</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #3 Name</td>
+                              <td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c badge-pill">New</span></td>
+                              <td>Nov 20</td>
+                              <td><span class="text-danger">-$45</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #4 Name</td>
+                              <td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c badge-pill">Unavailable</span></td>
+                              <td>Nov 21</td>
+                              <td><span class="text-success">$65</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #5 Name</td>
+                              <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Used</span></td>
+                              <td>Nov 22</td>
+                              <td><span class="text-success">$78</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #6 Name</td>
+                              <td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c badge-pill">Used</span> </td>
+                              <td>Nov 23</td>
+                              <td><span class="text-danger">-$88</span></td>
+                            </tr>
+                            <tr>
+                              <td class="fw-600">Item #7 Name</td>
+                              <td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c badge-pill">Old</span></td>
+                              <td>Nov 22</td>
+                              <td><span class="text-success">$56</span></td>
+                            </tr>
+                          </tbody>
+                        </table>
+                       </div>
+                    </div>
+                  </div>
+                  <div class="ta-c bdT w-100 p-20">
+                    <a href="#">Check all the sales</a>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Weather ==================== -->
+                <div class="bd bgc-white p-20">
+                  <div class="layers">
+                    <!-- Widget Title -->
+                    <div class="layer w-100 mB-20">
+                      <h6 class="lh-1">Weather</h6>
+                    </div>
+
+                    <!-- Today Weather -->
+                    <div class="layer w-100">
+                      <div class="peers ai-c jc-sb fxw-nw">
+                        <div class="peer peer-greed">
+                          <div class="layers">
+                            <!-- Temprature -->
+                            <div class="layer w-100">
+                              <div class="peers fxw-nw ai-c">
+                                <div class="peer mR-20">
+                                  <h3>32<sup>°F</sup></h3>
+                                </div>
+                                <div class="peer">
+                                  <canvas class="sleet" width="44" height="44"></canvas>
+                                </div>
+                              </div>
+                            </div>
+
+                            <!-- Condition -->
+                            <div class="layer w-100">
+                              <span class="fw-600 c-grey-600">Partly Clouds</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="peer">
+                          <div class="layers ai-fe">
+                            <div class="layer">
+                              <h5 class="mB-5">Monday</h5>
+                            </div>
+                            <div class="layer">
+                              <span class="fw-600 c-grey-600">Nov, 01 2017</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Today Weather Extended -->
+                    <div class="layer w-100 mY-30">
+                      <div class="layers bdB">
+                        <div class="layer w-100 bdT pY-5">
+                          <div class="peers ai-c jc-sb fxw-nw">
+                            <div class="peer">
+                              <span>Wind</span>
+                            </div>
+                            <div class="peer ta-r">
+                              <span class="fw-600 c-grey-800">10km/h</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 bdT pY-5">
+                          <div class="peers ai-c jc-sb fxw-nw">
+                            <div class="peer">
+                              <span>Sunrise</span>
+                            </div>
+                            <div class="peer ta-r">
+                              <span class="fw-600 c-grey-800">05:00 AM</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="layer w-100 bdT pY-5">
+                          <div class="peers ai-c jc-sb fxw-nw">
+                            <div class="peer">
+                              <span>Pressure</span>
+                            </div>
+                            <div class="peer ta-r">
+                              <span class="fw-600 c-grey-800">1B</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Week Forecast -->
+                    <div class="layer w-100">
+                      <div class="peers peers-greed ai-fs ta-c">
+                        <div class="peer">
+                          <h6 class="mB-10">MON</h6>
+                          <canvas class="sleet" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">32<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">TUE</h6>
+                          <canvas class="clear-day" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">30<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">WED</h6>
+                          <canvas class="partly-cloudy-day" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">28<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">THR</h6>
+                          <canvas class="cloudy" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">32<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">FRI</h6>
+                          <canvas class="snow" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">24<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">SAT</h6>
+                          <canvas class="wind" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">28<sup>°F</sup></span>
+                        </div>
+                        <div class="peer">
+                          <h6 class="mB-10">SUN</h6>
+                          <canvas class="sleet" width="30" height="30"></canvas>
+                          <span class="d-b fw-600">32<sup>°F</sup></span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="masonry-item col-md-6">
+                <!-- #Chat ==================== -->
+                <div class="bd bgc-white">
+                  <div class="layers">
+                    <div class="layer w-100 p-20">
+                      <h6 class="lh-1">Quick Chat</h6>
+                    </div>
+                    <div class="layer w-100">
+                      <!-- Chat Box -->
+                      <div class="bgc-grey-200 p-20 gapY-15">
+                        <!-- Chat Conversation -->
+                        <div class="peers fxw-nw">
+                          <div class="peer mR-20">
+                            <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed">
+                            <div class="layers ai-fs gapY-5">
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mR-10">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed">
+                                    <span>Lorem Ipsum is simply dummy text of</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mR-10">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed">
+                                    <span>the printing and typesetting industry.</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mR-10">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed">
+                                    <span>Lorem Ipsum has been the industry's</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <!-- Chat Conversation -->
+                        <div class="peers fxw-nw ai-fe">
+                          <div class="peer ord-1 mL-20">
+                            <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
+                          </div>
+                          <div class="peer peer-greed ord-0">
+                            <div class="layers ai-fe gapY-10">
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mL-10 ord-1">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed ord-0">
+                                    <span>Heloo</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div class="layer">
+                                <div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
+                                  <div class="peer mL-10 ord-1">
+                                    <small>10:00 AM</small>
+                                  </div>
+                                  <div class="peer-greed ord-0">
+                                    <span>??</span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- Chat Send -->
+                      <div class="p-20 bdT bgc-white">
+                        <div class="pos-r">
+                          <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
+                          <button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
+                            <i class="fa fa-paper-plane-o"></i>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+{% endblock content %}

app/templates/pages/login.html

@@ -0,0 +1,63 @@
+
+{% extends "layouts/auth-default.html" %}
+
+{% block title %} Login {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("/static/assets/static/images/bg.jpg")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style="width: 120px; height: 120px;">
+            <img class="pos-a centerXY" src="/static/assets/static/images/logo.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style="min-width: 320px;">
+
+
+        {% if msg %}
+            <h4 class="fw-300 c-grey-900 mB-40">{{ msg | safe }}</h4>
+        {% else %}
+            <h4 class="fw-300 c-grey-900 mB-40">Login</h4>
+        {% endif %}
+
+        <form method="post" action="">
+
+          {{ form.hidden_tag() }}
+
+          <div class="form-group">
+            <label class="text-normal text-dark">Username</label>
+            {{ form.username(placeholder="Username", class="form-control") }}
+          </div>
+
+          <div class="form-group">
+            <label class="text-normal text-dark">Password</label>
+            {{ form.password(placeholder="Password", class="form-control", type="password") }}
+          </div>
+
+          <div class="form-group">
+            <div class="peers ai-c jc-sb fxw-nw">
+              <div class="peer">
+                <div class="checkbox checkbox-circle checkbox-info peers ai-c">
+                  <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
+                  <label for="inputCall1" class="peers peer-greed js-sb ai-c">
+                    <span class="peer peer-greed">Remember Me</span>
+                  </label>
+                </div>
+              </div>
+              <div class="peer">
+                <button type="submit" class="btn btn-primary">Login</button>
+                
+                &nbsp; &nbsp; 
+                <span class="text-small font-weight-semibold">Not a member?</span> 
+                <a href="/register.html" class="text-black text-small">Register</a>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>  
+
+{% endblock content %}

app/templates/pages/register.html

@@ -0,0 +1,60 @@
+
+{% extends "layouts/auth-default.html" %}
+
+{% block title %} Register {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+      <div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("/static/assets/static/images/bg.jpg")'>
+        <div class="pos-a centerXY">
+          <div class="bgc-white bdrs-50p pos-r" style="width: 120px; height: 120px;">
+            <img class="pos-a centerXY" src="/static/assets/static/images/logo.png" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style="min-width: 320px;">
+      
+        {% if msg %}
+            <h4 class="fw-300 c-grey-900 mB-40">{{ msg | safe }}</h4>
+        {% else %}
+            <h4 class="fw-300 c-grey-900 mB-40">Register</h4>
+        {% endif %}
+
+        <form method="post" action="">
+
+          {{ form.hidden_tag() }}
+
+          <div class="form-group">
+            <label class="text-normal text-dark">Friendly Name</label>
+            {{ form.name(placeholder="Friendly Name", class="form-control") }}
+          </div>
+
+          <div class="form-group">
+            <label class="text-normal text-dark">Username</label>
+            {{ form.username(placeholder="Username", class="form-control") }}
+          </div>
+          
+          <div class="form-group">
+            <label class="text-normal text-dark">eMail Address</label>
+            {{ form.email(placeholder="eMail Address", class="form-control") }}
+          </div>
+
+          <div class="form-group">
+            <label class="text-normal text-dark">Password</label>
+            {{ form.password(placeholder="Password", class="form-control", type="password") }}
+          </div>
+
+          <div class="form-group">
+            <button type="submit" class="btn btn-primary">Register</button> 
+
+            &nbsp; &nbsp;
+            <span class="text-small font-weight-semibold">Already have and account?</span>
+            <a href="/login.html" class="text-black text-small">Login</a>    
+          </div>
+
+        </form>
+      </div>
+
+{% endblock content %}

app/templates/pages/ui.html

@@ -0,0 +1,272 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="row gap-20 masonry pos-r">
+        <h4 class="c-grey-900">UI Elements</h4>
+        <div class="masonry-sizer col-md-6"></div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Alerts</h6>
+            <div class="mT-30">
+            <div class="alert alert-primary" role="alert">
+                This is a primary alert—check it out!
+            </div>
+            <div class="alert alert-secondary" role="alert">
+                This is a secondary alert—check it out!
+            </div>
+            <div class="alert alert-success" role="alert">
+                This is a success alert—check it out!
+            </div>
+            <div class="alert alert-danger" role="alert">
+                This is a danger alert—check it out!
+            </div>
+            <div class="alert alert-warning" role="alert">
+                This is a warning alert—check it out!
+            </div>
+            <div class="alert alert-info" role="alert">
+                This is a info alert—check it out!
+            </div>
+            <div class="alert alert-light" role="alert">
+                This is a light alert—check it out!
+            </div>
+            <div class="alert alert-dark" role="alert">
+                This is a dark alert—check it out!
+            </div>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Buttons</h6>
+            <div class="mT-30">
+            <div class="gap-10 peers">
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-primary">Primary</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-secondary">Secondary</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-success">Success</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-danger">Danger</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-warning">Warning</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-info">Info</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-light">Light</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-dark">Dark</button>
+                </div>
+            </div>
+
+            <div class="w-100 gap-10 peers mY-20">
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-outline-primary">Primary</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-outline-secondary">Secondary</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-outline-success">Success</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-outline-danger">Danger</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-outline-warning">Warning</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-outline-info">Info</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-outline-light">Light</button>
+                </div>
+                <div class="peer">
+                <button type="button" class="btn cur-p btn-outline-dark">Dark</button>
+                </div>
+            </div>
+
+            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
+                <div class="btn-group mr-2" role="group" aria-label="First group">
+                <button type="button" class="btn btn-success">1</button>
+                <button type="button" class="btn btn-success">2</button>
+                <button type="button" class="btn btn-success">3</button>
+                <button type="button" class="btn btn-success">4</button>
+                </div>
+                <div class="btn-group mr-2" role="group" aria-label="Second group">
+                <button type="button" class="btn btn-success">5</button>
+                <button type="button" class="btn btn-success">6</button>
+                <button type="button" class="btn btn-success">7</button>
+                </div>
+                <div class="btn-group" role="group" aria-label="Third group">
+                <button type="button" class="btn btn-success">8</button>
+                </div>
+            </div>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Dropdowns</h6>
+            <div class="mT-30">
+            <div class="dropdown">
+                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Dropdown button
+                </button>
+                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+                <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+            </div>
+
+            <!-- Example split danger button -->
+            <div class="btn-group mT-20">
+                <button type="button" class="btn btn-danger">Action</button>
+                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="sr-only">Toggle Dropdown</span>
+                </button>
+                <div class="dropdown-menu">
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+                <a class="dropdown-item" href="#">Something else here</a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">Separated link</a>
+                </div>
+            </div>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">List Group</h6>
+            <div class="mT-30">
+            <div class="list-group">
+                <a href="#" class="list-group-item list-group-item-action actived">
+                Cras justo odio
+                </a>
+                <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
+                <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
+                <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
+                <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
+            </div>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Modal</h6>
+            <div class="mT-30">
+            <!-- Button trigger modal -->
+            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+                Launch demo modal
+            </button>
+
+            <!-- Modal -->
+            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+                <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    </div>
+                    <div class="modal-body">
+                    ...
+                    </div>
+                    <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                    </div>
+                </div>
+                </div>
+            </div>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Popover</h6>
+            <div class="mT-30">
+            <button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Progress</h6>
+            <div class="mT-30">
+            <!-- Progress Bars -->
+            <div class="layers">
+                <div class="layer w-100">
+                <h5 class="mB-5">100k</h5>
+                <small class="fw-600 c-grey-700">Visitors From USA</small>
+                <span class="pull-right c-grey-600 fsz-sm">50%</span>
+                <div class="progress mT-10">
+                    <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
+                </div>
+                </div>
+                <div class="layer w-100 mT-15">
+                <h5 class="mB-5">1M</h5>
+                <small class="fw-600 c-grey-700">Visitors From Europe</small>
+                <span class="pull-right c-grey-600 fsz-sm">80%</span>
+                <div class="progress mT-10">
+                    <div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
+                </div>
+                </div>
+                <div class="layer w-100 mT-15">
+                <h5 class="mB-5">450k</h5>
+                <small class="fw-600 c-grey-700">Visitors From Australia</small>
+                <span class="pull-right c-grey-600 fsz-sm">40%</span>
+                <div class="progress mT-10">
+                    <div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
+                </div>
+                </div>
+                <div class="layer w-100 mT-15">
+                <h5 class="mB-5">1B</h5>
+                <small class="fw-600 c-grey-700">Visitors From India</small>
+                <span class="pull-right c-grey-600 fsz-sm">90%</span>
+                <div class="progress mT-10">
+                    <div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
+                </div>
+                </div>
+            </div>
+            </div>
+        </div>
+        </div>
+        <div class="masonry-item col-md-6">
+        <div class="bgc-white p-20 bd">
+            <h6 class="c-grey-900">Tootips</h6>
+            <div class="mT-30">
+            <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+                Tooltip on top
+            </button>
+            <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+                Tooltip on right
+            </button>
+            <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+                Tooltip on bottom
+            </button>
+            <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+                Tooltip on left
+            </button>
+            </div>
+        </div>
+        </div>
+    </div>
+
+{% endblock content %}

app/templates/pages/vector-maps.html

@@ -0,0 +1,22 @@
+
+{% extends "layouts/default.html" %}
+
+{% block title %} Blank Page {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <div class="container-fluid">
+        <h4 class="c-grey-900 mT-10 mB-30">Vector Maps</h4>
+        <div class="row">
+        <div class="col-md-12">
+            <div class="bgc-white bd bdrs-3 p-20 mB-20">
+            <h6 class="c-grey-900 mB-20">Jquery Vector Maps</h6>
+            <div id="world-map-marker"></div>
+            </div>
+        </div>
+        </div>
+    </div>
+
+{% endblock content %}

app/util.py

@@ -0,0 +1,40 @@
+# -*- encoding: utf-8 -*-
+"""
+Flask Boilerplate
+Author: AppSeed.us - App Generator 
+"""
+
+from flask   import json, url_for, jsonify, render_template
+from jinja2  import TemplateNotFound
+from app     import app
+
+from . models import User
+from app    import app,db,bc,mail
+from . common import *
+from sqlalchemy import desc,or_
+import hashlib
+from flask_mail  import Message
+import re
+from flask       import render_template
+
+import      os, datetime, time, random
+
+# build a Json response
+def response( data ):
+    return app.response_class( response=json.dumps(data),
+                               status=200,
+                               mimetype='application/json' )
+
+def g_db_commit( ):
+
+    db.session.commit( );    
+
+def g_db_add( obj ):
+
+    if obj:
+        db.session.add ( obj )
+
+def g_db_del( obj ):
+
+    if obj:
+        db.session.delete ( obj )

app/views.py

@@ -0,0 +1,132 @@
+# -*- encoding: utf-8 -*-
+"""
+License: MIT
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+# Python modules
+import os, logging 
+
+# Flask modules
+from flask               import render_template, request, url_for, redirect, send_from_directory
+from flask_login         import login_user, logout_user, current_user, login_required
+from werkzeug.exceptions import HTTPException, NotFound, abort
+
+# App modules
+from app        import app, lm, db, bc
+from app.models import User
+from app.forms  import LoginForm, RegisterForm
+
+# provide login manager with load_user callback
+@lm.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+
+# Logout user
+@app.route('/logout.html')
+def logout():
+    logout_user()
+    return redirect(url_for('index'))
+
+# Register a new user
+@app.route('/register.html', methods=['GET', 'POST'])
+def register():
+    
+    # declare the Registration Form
+    form = RegisterForm(request.form)
+
+    msg = None
+
+    if request.method == 'GET': 
+
+        return render_template( 'pages/register.html', form=form, msg=msg )
+
+    # check if both http method is POST and form is valid on submit
+    if form.validate_on_submit():
+
+        # assign form data to variables
+        username = request.form.get('username', '', type=str)
+        password = request.form.get('password', '', type=str) 
+        email    = request.form.get('email'   , '', type=str) 
+
+        # filter User out of database through username
+        user = User.query.filter_by(user=username).first()
+
+        # filter User out of database through username
+        user_by_email = User.query.filter_by(email=email).first()
+
+        if user or user_by_email:
+            msg = 'Error: User exists!'
+        
+        else:         
+
+            pw_hash = password #bc.generate_password_hash(password)
+
+            user = User(username, email, pw_hash)
+
+            user.save()
+
+            msg = 'User created, please <a href="' + url_for('login') + '">login</a>'     
+
+    else:
+        msg = 'Input error'     
+
+    return render_template( 'pages/register.html', form=form, msg=msg )
+
+# Authenticate user
+@app.route('/login.html', methods=['GET', 'POST'])
+def login():
+    
+    # Declare the login form
+    form = LoginForm(request.form)
+
+    # Flask message injected into the page, in case of any errors
+    msg = None
+
+    # check if both http method is POST and form is valid on submit
+    if form.validate_on_submit():
+
+        # assign form data to variables
+        username = request.form.get('username', '', type=str)
+        password = request.form.get('password', '', type=str) 
+
+        # filter User out of database through username
+        user = User.query.filter_by(user=username).first()
+
+        if user:
+            
+            #if bc.check_password_hash(user.password, password):
+            if user.password == password:
+                login_user(user)
+                return redirect(url_for('index'))
+            else:
+                msg = "Wrong password. Please try again."
+        else:
+            msg = "Unknown user"
+
+    return render_template( 'pages/login.html', form=form, msg=msg ) 
+
+# App main route + generic routing
+@app.route('/', defaults={'path': 'index.html'})
+@app.route('/<path>')
+def index(path):
+
+    if not current_user.is_authenticated:
+        return redirect(url_for('login'))
+
+    content = None
+
+    try:
+
+        # @WIP to fix this
+        # Temporary solution to solve the dependencies
+        if path.endswith(('.png', '.svg' '.ttf', '.xml', '.ico', '.woff', '.woff2')):
+            return send_from_directory(os.path.join(app.root_path, 'static'), path)    
+
+        # try to match the pages defined in -> pages/<input file>
+        return render_template( 'pages/'+path )
+
+    except:
+        
+        return render_template('layouts/auth-default.html',
+                                content=render_template( 'pages/404.html' ) )

requirements.txt

@@ -0,0 +1,7 @@
+flask
+flask_login
+flask_migrate
+flask_wtf
+flask_sqlalchemy
+flask_bcrypt
+gunicorn

run.py

@@ -0,0 +1,7 @@
+# -*- encoding: utf-8 -*-
+"""
+License: MIT
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from app import app, db