Release v1.0.5 - Bump Codebase

.env

@@ -1,8 +1,14 @@
+# True for development, False for production
 DEBUG=True
-SECRET_KEY=S3cr3t_K#Key
+
-DB_ENGINE=postgresql
+# Flask ENV
-DB_NAME=appseed-flask
+FLASK_APP=run.py
-DB_HOST=localhost
+FLASK_ENV=development
-DB_PORT=5432
+
-DB_USERNAME=appseed
+# Used for CDN (in production)
-DB_PASS=pass
+# No Slash at the end
+ASSETS_ROOT=/static/assets
+
+# LOCAL 5001 FLask
+# GITHUB_ID = <YOUR_GITHUB_ID>
+# GITHUB_SECRET = <YOUR_GITHUB_SECRET>

.gitignore

@@ -26,3 +26,11 @@ _templates
 # javascript
 package-lock.json
 .vscode/symbols.json
+
+apps/static/assets/node_modules
+apps/static/assets/yarn.lock
+apps/static/assets/.temp
+
+migrations
+node_modules
+yarn.lock

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## [1.0.5] 2023-06-06
+### Changes
+
+- Codebase Update
+- Added OAuth via Github
+- Improved Auth Pages
+  - UI/UX updates (minor)
+
+## [1.0.4] 2021-11-10
+### Improvements
+
+- Bump Codebase: [Flask Dashboard](https://github.com/app-generator/boilerplate-code-flask-dashboard) v2.0.0
+  - Dependencies update (all packages) 
+    - Flask==2.0.1 (latest stable version)
+  - Better Code formatting
+  - Improved Files organization
+  - Optimize imports
+  - Docker Scripts Update
+  - Gulp Tooling  (SASS Compilation)
+- Fixes:
+  - Import error caused by WTForms
+
 ## [1.0.3] 2021-05-16
 ### Dependencies Update
 

Dockerfile

@@ -1,11 +1,24 @@
-FROM python:3.6
+FROM python:3.9
 
+# set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
 ENV FLASK_APP run.py
+ENV DEBUG True
 
-COPY run.py gunicorn-cfg.py requirements.txt config.py .env ./
+COPY requirements.txt .
-COPY app app
 
-RUN pip install -r requirements.txt
+# install python dependencies
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
 
-EXPOSE 5005
+COPY env.sample .env
+
+COPY . .
+
+RUN flask db init
+RUN flask db migrate
+RUN flask db upgrade
+
+# gunicorn
 CMD ["gunicorn", "--config", "gunicorn-cfg.py", "run:app"]

Procfile

@@ -1 +0,0 @@
-web: gunicorn run:app --log-file=- 

README.md

@@ -6,22 +6,21 @@
 
 <br />
 
-> Free product - **Flask Dashboard** starter project - Features:
+> Features:
 
-- UI Kit: **Black Dashboard** (Free Version) provided by **[Creative-Tim](https://www.creative-tim.com/)**
+- ✅ `Up-to-date dependencies`
-- Flask Codebase - provided by **[AppSeed](https://appseed.us/)**
+- ✅ Black Dashboard, BS4 Design
-- SQLite, PostgreSQL, SQLAlchemy ORM
+- ✅ `DB Tools`: SQLAlchemy ORM, `Flask-Migrate` (schema migrations)
-- Alembic (DB schema migrations)
+- ✅ `Persistence`: SQLite (dev), MySql (prod)
-- Modular design with **Blueprints**
+- ✅ `Authentication`: Session Based, `OAuth` via Github
-- Session-Based authentication (via **flask_login**)
+- ✅ `Deployment`: Docker, Page Compression (Flask-Minify) 
-- Forms validation
-- Deployment scripts: Docker, Gunicorn / Nginx, Heroku
 
 <br />
 
 ## Table of Contents
 
 * [Demo](#demo)
+* [Docker Support](#docker-support)
 * [Quick Start](#quick-start)
 * [Documentation](#documentation)
 * [File Structure](#file-structure)
@@ -42,91 +41,194 @@
 
 <br />
 
-## Quick start
+## Docker Support
+
+> Get the code
+
+```bash
+$ git clone https://github.com/app-generator/black-dashboard-flask.git
+$ cd black-dashboard-flask
+```
+
+> Start the app in Docker
+
+```bash
+$ docker-compose up --build 
+```
+
+Visit `http://localhost:5085` in your browser. The app should be up & running.
+
+<br />
+
+## Create/Edit `.env` file
+
+The meaning of each variable can be found below: 
+
+- `DEBUG`: if `True` the app runs in develoment mode
+  - For production value `False` should be used
+- `ASSETS_ROOT`: used in assets management
+  - default value: `/static/assets`
+- `OAuth` via Github
+  - `GITHUB_ID`=<GITHUB_ID_HERE>
+  - `GITHUB_SECRET`=<GITHUB_SECRET_HERE> 
+
+<br />
+
+## Manual Build
 
 > UNZIP the sources or clone the private repository. After getting the code, open a terminal and navigate to the working directory, with product source code.
 
+### 👉 Set Up for `Unix`, `MacOS` 
+
+> Install modules via `VENV`  
+
 ```bash
-$ # Get the code
-$ git clone https://github.com/creativetimofficial/black-dashboard-flask.git
-$ cd black-dashboard-flask
-$
-$ # Virtualenv modules installation (Unix based systems)
 $ virtualenv env
 $ source env/bin/activate
-$
-$ # Virtualenv modules installation (Windows based systems)
-$ # virtualenv env
-$ # .\env\Scripts\activate
-$
-$ # Install modules - SQLite Database
 $ pip3 install -r requirements.txt
-$
-$ # OR with PostgreSQL connector
-$ # pip install -r requirements-pgsql.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"
-$
-$ # Start the application (development mode)
-$ # --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 dashboard in browser: http://127.0.0.1:5000/
 ```
 
-> Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.
+<br />
+
+> Set Up Flask Environment
+
+```bash
+$ export FLASK_APP=run.py
+$ export FLASK_ENV=development
+```
+
+<br />
+
+> Start the app
+
+```bash
+$ flask run
+// OR
+$ flask run --cert=adhoc # For HTTPS server
+```
+
+At this point, the app runs at `http://127.0.0.1:5000/`. 
+
+<br />
+
+### 👉 Set Up for `Windows` 
+
+> Install modules via `VENV` (windows) 
+
+```
+$ virtualenv env
+$ .\env\Scripts\activate
+$ pip3 install -r requirements.txt
+```
+
+<br />
+
+> Set Up Flask Environment
+
+```bash
+$ # CMD 
+$ set FLASK_APP=run.py
+$ set FLASK_ENV=development
+$
+$ # Powershell
+$ $env:FLASK_APP = ".\run.py"
+$ $env:FLASK_ENV = "development"
+```
+
+<br />
+
+> Start the app
+
+```bash
+$ flask run
+// OR
+$ flask run --cert=adhoc # For HTTPS server
+```
+
+At this point, the app runs at `http://127.0.0.1:5000/`. 
+
+<br />
+
+## Recompile SCSS  
+
+The SCSS/CSS files used to style the Ui are saved in the `apps/static/assets` directory. 
+In order to update the Ui colors (primary, secondary) this procedure needs to be followed. 
+
+```bash
+$ yarn # install modules
+$ # # edit variables 
+$ vi apps/static/assets/scss/black-dashboard/custom/_variables.scss 
+$ gulp # SCSS to CSS translation
+```
+
+The `_variables.scss` content defines the `primary` and `secondary` colors: 
+
+```scss
+$default:       #344675 !default; // EDIT for customization
+$primary:       #e14eca !default; // EDIT for customization
+$secondary:     #f4f5f7 !default; // EDIT for customization
+$success:       #00f2c3 !default; // EDIT for customization
+$info:          #1d8cf8 !default; // EDIT for customization
+$warning:       #ff8d72 !default; // EDIT for customization
+$danger:        #fd5d93 !default; // EDIT for customization
+$black:         #222a42 !default; // EDIT for customization
+```
 
 <br />
 
 ## Documentation
+
 The documentation for the **Black Dashboard Flask** is hosted at our [website](https://demos.creative-tim.com/black-dashboard-flask/docs/1.0/getting-started/getting-started-flask.html).
 
 <br />
 
 ## File Structure
+
 Within the download you'll find the following directories and files:
 
 ```bash
 < PROJECT ROOT >
    |
-   |-- app/
+   |-- apps/
-   |    |-- home/                                # Home Blueprint - serve app pages (private area)
+   |    |
-   |    |-- base/                                # Base Blueprint - handles the authentication
+   |    |-- home/                           # A simple app that serve HTML files
-   |         |-- static/
+   |    |    |-- routes.py                  # Define app routes
-   |         |    |-- <css, JS, images>          # CSS files, Javascripts files
+   |    |
-   |         |
+   |    |-- authentication/                 # Handles auth routes (login and register)
-   |         |-- templates/                      # Templates used to render pages
+   |    |    |-- routes.py                  # Define authentication routes  
-   |              |
+   |    |    |-- models.py                  # Defines models  
-   |              |-- includes/                  #
+   |    |    |-- forms.py                   # Define auth forms (login and register) 
-   |              |    |-- navigation.html       # Top menu component
+   |    |
-   |              |    |-- sidebar.html          # Sidebar component
+   |    |-- static/
-   |              |    |-- footer.html           # App Footer
+   |    |    |-- <css, JS, images>          # CSS files, Javascripts files
-   |              |    |-- scripts.html          # Scripts common to all pages
+   |    |
-   |              |
+   |    |-- templates/                      # Templates used to render pages
-   |              |-- layouts/                   # Master pages
+   |    |    |-- includes/                  # HTML chunks and components
-   |              |    |-- base-fullscreen.html  # Used by Authentication pages
+   |    |    |    |-- navigation.html       # Top menu component
-   |              |    |-- base.html             # Used by common pages
+   |    |    |    |-- sidebar.html          # Sidebar component
-   |              |
+   |    |    |    |-- footer.html           # App Footer
-   |              |-- accounts/                  # Authentication pages
+   |    |    |    |-- scripts.html          # Scripts common to all pages
-   |                   |-- login.html            # Login page
+   |    |    |
-   |                   |-- register.html         # Registration page
+   |    |    |-- layouts/                   # Master pages
+   |    |    |    |-- base-fullscreen.html  # Used by Authentication pages
+   |    |    |    |-- base.html             # Used by common pages
+   |    |    |
+   |    |    |-- accounts/                  # Authentication pages
+   |    |    |    |-- login.html            # Login page
+   |    |    |    |-- register.html         # Register page
+   |    |    |
+   |    |    |-- home/                      # UI Kit Pages
+   |    |         |-- index.html            # Index page
+   |    |         |-- 404-page.html         # 404 page
+   |    |         |-- *.html                # All other pages
+   |    |    
+   |  config.py                             # Set up the app
+   |    __init__.py                         # Initialize the app
    |
-   |-- requirements.txt                          # Development modules - SQLite storage
+   |-- requirements.txt                     # App Dependencies
-   |-- requirements-mysql.txt                    # Production modules  - Mysql DMBS
-   |-- requirements-pqsql.txt                    # Production modules  - PostgreSql DMBS
    |
-   |-- .env                                      # Inject Configuration via Environment
+   |-- .env                                 # Inject Configuration via Environment
-   |-- config.py                                 # Set up the app
+   |-- run.py                               # Start the app - WSGI gateway
-   |-- run.py                                    # Start the app - WSGI gateway
    |
    |-- ************************************************************************
 ```

app/base/forms.py

@@ -1,19 +0,0 @@
-# -*- encoding: utf-8 -*-
-"""
-Copyright (c) 2019 - present AppSeed.us
-"""
-
-from flask_wtf import FlaskForm
-from wtforms import TextField, PasswordField
-from wtforms.validators import InputRequired, Email, DataRequired
-
-## login and registration
-
-class LoginForm(FlaskForm):
-    username = TextField    ('Username', id='username_login'   , validators=[DataRequired()])
-    password = PasswordField('Password', id='pwd_login'        , validators=[DataRequired()])
-
-class CreateAccountForm(FlaskForm):
-    username = TextField('Username'     , id='username_create' , validators=[DataRequired()])
-    email    = TextField('Email'        , id='email_create'    , validators=[DataRequired(), Email()])
-    password = PasswordField('Password' , id='pwd_create'      , validators=[DataRequired()])

app/base/routes.py

@@ -1,112 +0,0 @@
-# -*- encoding: utf-8 -*-
-"""
-Copyright (c) 2019 - present AppSeed.us
-"""
-
-from flask import jsonify, render_template, redirect, request, url_for
-from flask_login import (
-    current_user,
-    login_required,
-    login_user,
-    logout_user
-)
-
-from app import db, login_manager
-from app.base import blueprint
-from app.base.forms import LoginForm, CreateAccountForm
-from app.base.models import User
-
-from app.base.util import verify_pass
-
-@blueprint.route('/')
-def route_default():
-    return redirect(url_for('base_blueprint.login'))
-
-## Login & Registration
-
-@blueprint.route('/login', methods=['GET', 'POST'])
-def login():
-    login_form = LoginForm(request.form)
-    if 'login' in request.form:
-        
-        # read form data
-        username = request.form['username']
-        password = request.form['password']
-
-        # Locate user
-        user = User.query.filter_by(username=username).first()
-        
-        # Check the password
-        if user and verify_pass( password, user.password):
-
-            login_user(user)
-            return redirect(url_for('base_blueprint.route_default'))
-
-        # Something (user or pass) is not ok
-        return render_template( 'accounts/login.html', msg='Wrong user or password', form=login_form)
-
-    if not current_user.is_authenticated:
-        return render_template( 'accounts/login.html',
-                                form=login_form)
-    return redirect(url_for('home_blueprint.index'))
-
-@blueprint.route('/register', methods=['GET', 'POST'])
-def register():
-    login_form = LoginForm(request.form)
-    create_account_form = CreateAccountForm(request.form)
-    if 'register' in request.form:
-
-        username  = request.form['username']
-        email     = request.form['email'   ]
-
-        # Check usename exists
-        user = User.query.filter_by(username=username).first()
-        if user:
-            return render_template( 'accounts/register.html', 
-                                    msg='Username already registered',
-                                    success=False,
-                                    form=create_account_form)
-
-        # Check email exists
-        user = User.query.filter_by(email=email).first()
-        if user:
-            return render_template( 'accounts/register.html', 
-                                    msg='Email already registered', 
-                                    success=False,
-                                    form=create_account_form)
-
-        # else we can create the user
-        user = User(**request.form)
-        db.session.add(user)
-        db.session.commit()
-
-        return render_template( 'accounts/register.html', 
-                                msg='User created please <a href="/login">login</a>', 
-                                success=True,
-                                form=create_account_form)
-
-    else:
-        return render_template( 'accounts/register.html', form=create_account_form)
-
-@blueprint.route('/logout')
-def logout():
-    logout_user()
-    return redirect(url_for('base_blueprint.login'))
-
-## Errors
-
-@login_manager.unauthorized_handler
-def unauthorized_handler():
-    return render_template('page-403.html'), 403
-
-@blueprint.errorhandler(403)
-def access_forbidden(error):
-    return render_template('page-403.html'), 403
-
-@blueprint.errorhandler(404)
-def not_found_error(error):
-    return render_template('page-404.html'), 404
-
-@blueprint.errorhandler(500)
-def internal_error(error):
-    return render_template('page-500.html'), 500

app/base/templates/accounts/login.html

@@ -1,70 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Login {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-        <div class="row">
-          <div class="col-md-8">
-            <div class="card">
-
-              <form role="form" method="post" action="">
-
-                {{ form.hidden_tag() }}  
-              
-                <div class="card-header">
-                  <h5 class="title">Login</h5>
-
-                  <h6 class="card-category">
-                    {% if msg %}
-                        {{ msg | safe }}
-                    {% else %}
-                        Add your credentials
-                    {% endif %} 
-                  </h6>
-                </div>
-
-                <div class="card-body">
-
-                    <div class="row">
-
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Username</label>
-                          {{ form.username(placeholder="Username", class="form-control") }}
-                        </div>
-                      </div>
-
-                    </div>
-                    <div class="row">
-
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Password</label>
-                          {{ form.password(placeholder="Password", class="form-control", type="password") }}
-                        </div>
-                      </div>
-
-                    </div>
-                    
-                </div>
-                <div class="card-footer">
-                  <button type="submit" name="login" class="btn btn-fill btn-primary">Login</button>
-                  &nbsp; &nbsp;
-                  Don't have an account? <a href="{{ url_for('base_blueprint.register') }}" class="text-primary">Create</a>
-                </div>
-
-              </form>
-
-            </div>
-          </div>
-      </div>
-
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/base/templates/accounts/register.html

@@ -1,74 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Register {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-        <div class="row">
-          <div class="col-md-8">
-            <div class="card">
-
-              <form role="form" method="post" action="">
-              
-                <div class="card-header">
-                  <h5 class="title">Register</h5>
-
-                  <h6 class="card-category">
-                    {% if msg %}
-                        {{ msg | safe }}
-                    {% else %}
-                        Add your credentials
-                    {% endif %} 
-                  </h6>
-                </div>
-
-                <div class="card-body">
-
-                    <div class="row">
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Username</label>
-                          {{ form.username(placeholder="Username", class="form-control") }}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div class="row">
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Email</label>
-                          {{ form.email(placeholder="Email", class="input form-control", type="email") }}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div class="row">
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Password</label>
-                          {{ form.password(placeholder="Password", class="form-control", type="password") }}
-                        </div>
-                      </div>
-                    </div>
-                    
-                </div>
-                <div class="card-footer">
-                  <button type="submit" name="register" class="btn btn-fill btn-primary">Register</button>
-                  &nbsp; &nbsp;
-                  Have an account? <a href="{{ url_for('base_blueprint.login') }}" class="text-primary">Login</a>
-                </div>
-
-              </form>
-
-            </div>
-          </div>
-      </div>
-
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/base/templates/includes/fixed-plugin.html

@@ -1,44 +0,0 @@
-
-  <div class="fixed-plugin">
-    <div class="dropdown show-dropdown">
-      <a href="#" data-toggle="dropdown">
-        <i class="fa fa-cog fa-2x"> </i>
-      </a>
-      <ul class="dropdown-menu">
-        <li class="header-title"> Sidebar Background</li>
-        <li class="adjustments-line">
-          <a href="javascript:void(0)" class="switch-trigger background-color">
-            <div class="badge-colors text-center">
-              <span class="badge filter badge-primary active" data-color="primary"></span>
-              <span class="badge filter badge-info" data-color="blue"></span>
-              <span class="badge filter badge-success" data-color="green"></span>
-            </div>
-            <div class="clearfix"></div>
-          </a>
-        </li>
-        <li class="adjustments-line text-center color-change">
-          <span class="color-label">LIGHT MODE</span>
-          <span class="badge light-badge mr-2"></span>
-          <span class="badge dark-badge ml-2"></span>
-          <span class="color-label">DARK MODE</span>
-        </li>
-        <li class="button-container">
-
-          <a href="https://demos.creative-tim.com/black-dashboard-flask/docs/1.0/getting-started/getting-started-flask.html" 
-             target="_blank" rel="noopener noreferrer" 
-             class="btn btn-primary btn-block btn-round">Documentation</a>
-
-          <a href="https://www.creative-tim.com/product/black-dashboard-flask" 
-             target="_blank" rel="noopener noreferrer" 
-             class="btn btn-default btn-block btn-round">
-            See Product
-          </a>
-        </li>
-        <li>
-          <br />
-        </li>
-      </ul>
-
-    </div>
-  </div>
-  

app/base/templates/includes/footer.html

@@ -1,20 +0,0 @@
-
-
-      <footer class="footer">
-        <div class="container-fluid">
-          <ul class="nav">
-            <li class="nav-item">
-              <a target="_blank" rel="noopener noreferrer"
-                 href="https://www.creative-tim.com/product/black-dashboard-flask" class="nav-link">
-                Dashboard Black Flask
-              </a>
-            </li>
-          </ul>
-          <div class="copyright">
-            &copy; <a target="_blank" rel="noopener noreferrer" 
-                      href="https://www.creative-tim.com/">Creative-Tim</a> 
-            - coded by <a target="_blank" rel="noopener noreferrer" href="https://appseed.us">AppSeed</a>
-          </div>
-        </div>
-      </footer>
-      

app/base/templates/includes/navigation.html

@@ -1,82 +0,0 @@
-
-      <!-- Navbar -->
-      <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
-        <div class="container-fluid">
-          <div class="navbar-wrapper">
-            <div class="navbar-toggle d-inline">
-              <button type="button" class="navbar-toggler">
-                <span class="navbar-toggler-bar bar1"></span>
-                <span class="navbar-toggler-bar bar2"></span>
-                <span class="navbar-toggler-bar bar3"></span>
-              </button>
-            </div>
-            <a class="navbar-brand" href="javascript:void(0)">Dashboard</a>
-          </div>
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-bar navbar-kebab"></span>
-            <span class="navbar-toggler-bar navbar-kebab"></span>
-            <span class="navbar-toggler-bar navbar-kebab"></span>
-          </button>
-          <div class="collapse navbar-collapse" id="navigation">
-
-            {% if current_user.is_authenticated %}
-
-              <ul class="navbar-nav ml-auto">
-                <li class="search-bar input-group">
-                  <button class="btn btn-link" id="search-button" data-toggle="modal" data-target="#searchModal"><i class="tim-icons icon-zoom-split" ></i>
-                    <span class="d-lg-none d-md-block">Search</span>
-                  </button>
-                </li>
-                <li class="dropdown nav-item">
-                  <a href="javascript:void(0)" class="dropdown-toggle nav-link" data-toggle="dropdown">
-                    <div class="notification d-none d-lg-block d-xl-block"></div>
-                    <i class="tim-icons icon-sound-wave"></i>
-                    <p class="d-lg-none">
-                      Notifications
-                    </p>
-                  </a>
-                  <ul class="dropdown-menu dropdown-menu-right dropdown-navbar">
-                    <li class="nav-link"><a href="#" class="nav-item dropdown-item">Mike John responded to your email</a></li>
-                    <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">You have 5 more tasks</a></li>
-                    <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">Your friend Michael is in town</a></li>
-                    <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">Another notification</a></li>
-                    <li class="nav-link"><a href="javascript:void(0)" class="nav-item dropdown-item">Another one</a></li>
-                  </ul>
-                </li>
-                <li class="dropdown nav-item">
-                  <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
-                    <div class="photo">
-                      <img src="/static/assets/img/anime3.png" alt="Profile Photo">
-                    </div>
-                    <b class="caret d-none d-lg-block d-xl-block"></b>
-                    <p class="d-lg-none">
-                      Log out
-                    </p>
-                  </a>
-                  <ul class="dropdown-menu dropdown-navbar">
-                    <li class="nav-link"><a href="/page-user.html" class="nav-item dropdown-item">Profile</a></li>
-                    <li class="dropdown-divider"></li>
-                    <li class="nav-link"><a href="{{ url_for('base_blueprint.logout') }}" class="nav-item dropdown-item">Log out</a></li>
-                  </ul>
-                </li>
-                <li class="separator d-lg-none"></li>
-              </ul>
-
-            {% endif %}
-              
-          </div>
-        </div>
-      </nav>
-      <div class="modal modal-search fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModal" aria-hidden="true">
-        <div class="modal-dialog" role="document">
-          <div class="modal-content">
-            <div class="modal-header">
-              <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
-              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                <i class="tim-icons icon-simple-remove"></i>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- End Navbar -->

app/base/templates/includes/scripts-sidebar.html

@@ -1,113 +0,0 @@
-
-  <script>
-    $(document).ready(function() {
-      $().ready(function() {
-        $sidebar = $('.sidebar');
-        $navbar = $('.navbar');
-        $main_panel = $('.main-panel');
-
-        $full_page = $('.full-page');
-
-        $sidebar_responsive = $('body > .navbar-collapse');
-        sidebar_mini_active = true;
-        white_color = false;
-
-        window_width = $(window).width();
-
-        fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
-
-
-
-        $('.fixed-plugin a').click(function(event) {
-          if ($(this).hasClass('switch-trigger')) {
-            if (event.stopPropagation) {
-              event.stopPropagation();
-            } else if (window.event) {
-              window.event.cancelBubble = true;
-            }
-          }
-        });
-
-        $('.fixed-plugin .background-color span').click(function() {
-          $(this).siblings().removeClass('active');
-          $(this).addClass('active');
-
-          var new_color = $(this).data('color');
-
-          if ($sidebar.length != 0) {
-            $sidebar.attr('data', new_color);
-          }
-
-          if ($main_panel.length != 0) {
-            $main_panel.attr('data', new_color);
-          }
-
-          if ($full_page.length != 0) {
-            $full_page.attr('filter-color', new_color);
-          }
-
-          if ($sidebar_responsive.length != 0) {
-            $sidebar_responsive.attr('data', new_color);
-          }
-        });
-
-        $('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function() {
-          var $btn = $(this);
-
-          if (sidebar_mini_active == true) {
-            $('body').removeClass('sidebar-mini');
-            sidebar_mini_active = false;
-            blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
-          } else {
-            $('body').addClass('sidebar-mini');
-            sidebar_mini_active = true;
-            blackDashboard.showSidebarMessage('Sidebar mini activated...');
-          }
-
-          // we simulate the window Resize so the charts will get updated in realtime.
-          var simulateWindowResize = setInterval(function() {
-            window.dispatchEvent(new Event('resize'));
-          }, 180);
-
-          // we stop the simulation of Window Resize after the animations are completed
-          setTimeout(function() {
-            clearInterval(simulateWindowResize);
-          }, 1000);
-        });
-
-        $('.switch-change-color input').on("switchChange.bootstrapSwitch", function() {
-          var $btn = $(this);
-
-          if (white_color == true) {
-
-            $('body').addClass('change-background');
-            setTimeout(function() {
-              $('body').removeClass('change-background');
-              $('body').removeClass('white-content');
-            }, 900);
-            white_color = false;
-          } else {
-
-            $('body').addClass('change-background');
-            setTimeout(function() {
-              $('body').removeClass('change-background');
-              $('body').addClass('white-content');
-            }, 900);
-
-            white_color = true;
-          }
-
-
-        });
-
-        $('.light-badge').click(function() {
-          $('body').addClass('white-content');
-        });
-
-        $('.dark-badge').click(function() {
-          $('body').removeClass('white-content');
-        });
-      });
-    });
-  </script>
-  

app/base/templates/includes/scripts.html

@@ -1,14 +0,0 @@
-
-  <!--   Core JS Files   -->
-  <script src="/static/assets/js/core/jquery.min.js"></script>
-  <script src="/static/assets/js/core/popper.min.js"></script>
-  <script src="/static/assets/js/core/bootstrap.min.js"></script>
-  <script src="/static/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
-  <!-- Chart JS -->
-  <script src="/static/assets/js/plugins/chartjs.min.js"></script>
-  <!--  Notifications Plugin    -->
-  <script src="/static/assets/js/plugins/bootstrap-notify.js"></script>
-  <!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc -->
-  <script src="/static/assets/js/black-dashboard.min.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
-  <script src="/static/assets/demo/demo.js"></script>
-  

app/base/templates/includes/sidebar-rtl.html

@@ -1,80 +0,0 @@
-
-
-    <div class="sidebar">
-      <div class="sidebar-wrapper">
-        <div class="logo">
-          <a target="_blank" rel="sponsored noopener noreferrer" 
-             href="https://github.com/app-generator/jinja2-black-dashboard" class="simple-text logo-mini">
-            SC
-          </a>
-          <a target="_blank" rel="sponsored noopener noreferrer" 
-             href="https://github.com/app-generator/jinja2-black-dashboard" class="simple-text logo-normal">
-            Source Code
-          </a>
-        </div>
-
-        <ul class="nav">
-          <li class="{% if 'index' in segment %} active {% endif %}" >
-            <a href="/">
-              <i class="tim-icons icon-chart-pie-36"></i>
-              <p>لوحة القيادة</p>
-            </a>
-          </li>
-          <li class="{% if 'icons' in segment %} active {% endif %}" >
-            <a href="/ui-icons.html">
-              <i class="tim-icons icon-atom"></i>
-              <p>الرموز</p>
-            </a>
-          </li>
-          <li>
-            <li class="{% if 'maps' in segment %} active {% endif %}" >
-              <i class="tim-icons icon-pin"></i>
-              <p>خرائط</p>
-            </a>
-          </li>
-          <li class="{% if 'notifications' in segment %} active {% endif %}" >
-            <a href="/ui-notifications.html">
-              <i class="tim-icons icon-bell-55"></i>
-              <p>إخطارات</p>
-            </a>
-          </li>
-          <li class="{% if 'page-user' in segment %} active {% endif %}" >
-            <a href="/page-user.html">
-              <i class="tim-icons icon-single-02"></i>
-              <p>ملف تعريفي للمستخدم</p>
-            </a>
-          </li>
-          <li class="{% if 'tables' in segment %} active {% endif %}" >
-            <a href="/ui-tables.html">
-              <i class="tim-icons icon-puzzle-10"></i>
-              <p>قائمة الجدول</p>
-            </a>
-          </li>
-          <li class="{% if 'typography' in segment %} active {% endif %}" >
-            <a href="/ui-typography.html">
-              <i class="tim-icons icon-align-center"></i>
-              <p>طباعة</p>
-            </a>
-          </li>
-          <li class="{% if 'rtl-support' in segment %} active {% endif %}" >
-            <a href="/page-rtl-support.html">
-              <i class="tim-icons icon-world"></i>
-              <p>دعم RTL</p>
-            </a>
-          </li>
-          <li>
-            <a href="{{ url_for('base_blueprint.logout') }}" >
-              <i class="tim-icons icon-user-run"></i>
-              <p>Logout</p>
-            </a>
-          </li>          
-          <li>
-            <a target="_blank" href="https://www.creative-tim.com/templates/flask" >
-              <i class="tim-icons icon-cloud-download-93"></i>
-              <p>More Starters</p>
-            </a>
-          </li>
-        </ul>
-        
-      </div>
-    </div>

app/base/templates/includes/sidebar.html

@@ -1,85 +0,0 @@
-
-
-    <div class="sidebar">
-      <div class="sidebar-wrapper">
-        <div class="logo">
-          <a target="_blank" rel="sponsored noopener noreferrer" 
-             href="https://www.creative-tim.com/product/black-dashboard-flask" class="simple-text logo-mini">
-            PI
-          </a>
-          <a target="_blank" rel="sponsored noopener noreferrer" 
-             href="https://www.creative-tim.com/product/black-dashboard-flask" class="simple-text logo-normal">
-            Product Info
-          </a>
-        </div>
-
-        <ul class="nav">
-
-          {% if current_user.is_authenticated %}
-          <li class="{% if 'index' in segment %} active {% endif %}" >
-            <a href="/">
-              <i class="tim-icons icon-chart-pie-36"></i>
-              <p>Dashboard</p>
-            </a>
-          </li>
-          <li class="{% if 'icons' in segment %} active {% endif %}" >
-            <a href="/ui-icons.html">
-              <i class="tim-icons icon-atom"></i>
-              <p>Icons</p>
-            </a>
-          </li>
-          <li class="{% if 'maps' in segment %} active {% endif %}" >
-            <a href="/ui-maps.html">
-              <i class="tim-icons icon-pin"></i>
-              <p>Maps</p>
-            </a>
-          </li>
-          <li class="{% if 'notifications' in segment %} active {% endif %}" >
-            <a href="/ui-notifications.html">
-              <i class="tim-icons icon-bell-55"></i>
-              <p>Notifications</p>
-            </a>
-          </li>
-          <li class="{% if 'page-user' in segment %} active {% endif %}" >
-            <a href="/page-user.html">
-              <i class="tim-icons icon-single-02"></i>
-              <p>User Profile</p>
-            </a>
-          </li>
-          <li class="{% if 'tables' in segment %} active {% endif %}" >
-            <a href="/ui-tables.html">
-              <i class="tim-icons icon-puzzle-10"></i>
-              <p>Table List</p>
-            </a>
-          </li>
-          <li class="{% if 'typography' in segment %} active {% endif %}" >
-            <a href="/ui-typography.html">
-              <i class="tim-icons icon-align-center"></i>
-              <p>Typography</p>
-            </a>
-          </li>
-          <li class="{% if 'rtl-support' in segment %} active {% endif %}" >
-            <a href="/page-rtl-support.html">
-              <i class="tim-icons icon-world"></i>
-              <p>RTL Support</p>
-            </a>
-          </li>
-          <li>
-            <a href="{{ url_for('base_blueprint.logout') }}" >
-              <i class="tim-icons icon-user-run"></i>
-              <p>Logout</p>
-            </a>
-          </li>
-          {% else %}
-          <li>
-            <a target="_blank" href="https://www.creative-tim.com/templates/flask" >
-              <i class="tim-icons icon-cloud-download-93"></i>
-              <p>More Starters</p>
-            </a>
-          </li>          
-          {% endif %}
-
-        </ul>
-        
-      </div>
-    </div>

app/base/templates/layouts/base-rtl.html

@@ -1,75 +0,0 @@
-<!--
-=========================================================
-* * Black Dashboard Flask - v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/black-dashboard-flask
-* Copyright 2019 - present Creative Tim (https://www.creative-tim.com)
-
-
-* Coded by Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
--->
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="apple-touch-icon" sizes="76x76" href="/static/assets/img/apple-icon.png">
-  <link rel="icon" type="image/png" href="/static/assets/img/favicon.png">
-  <title>
-    Dashboard Black Flask - {% block title %}{% endblock %} | AppSeed
-  </title>
-  <!--     Fonts and icons     -->
-  <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
-  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
-  <!-- Nucleo Icons -->
-  <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
-  <!-- CSS Files -->
-  <link href="/static/assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet" />
-  <!-- CSS Just for demo purpose, don't include it in your project -->
-  <link href="/static/assets/demo/demo.css" rel="stylesheet" />
-
-  <!-- Specific Page CSS goes HERE  -->
-  {% block stylesheets %}{% endblock stylesheets %}
-
-</head>
-
-<body class="rtl menu-on-right ">
-  <div class="wrapper">
-
-    {% include 'includes/sidebar-rtl.html' %}
-
-    <div class="main-panel">
-
-      {% include 'includes/navigation-rtl.html' %}
-
-      <div class="content">
-
-        {% block content %}{% endblock content %}
-
-      </div>
-
-      {% include 'includes/footer.html' %}
-
-    </div>
-    
-  </div>
-
-  {% include 'includes/fixed-plugin.html' %}
-
-  {% include 'includes/scripts.html' %}
-
-  {% include 'includes/scripts-sidebar.html' %}
-
-  <!-- Specific Page JS goes HERE  -->
-  {% block javascripts %}{% endblock javascripts %}
-
-</body>
-
-</html>

app/base/templates/layouts/base.html

@@ -1,74 +0,0 @@
-<!--
-=========================================================
-* * Black Dashboard Flask- v1.0.0
-=========================================================
-
-* Product Page: https://www.creative-tim.com/product/black-dashboard-flask
-* Copyright 2019 - present Creative Tim (https://www.creative-tim.com)
-
-
-* Coded by Creative Tim
-
-=========================================================
-
-* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
--->
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="apple-touch-icon" sizes="76x76" href="/static/assets/img/apple-icon.png">
-  <link rel="icon" type="image/png" href="/static/assets/img/favicon.png">
-  <title>
-    Dashboard Black Flask - {% block title %}{% endblock %} | AppSeed
-  </title>
-  <!--     Fonts and icons     -->
-  <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
-  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
-  <!-- Nucleo Icons -->
-  <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
-  <!-- CSS Files -->
-  <link href="/static/assets/css/black-dashboard.css?v=1.0.0" rel="stylesheet" />
-  <!-- CSS Just for demo purpose, don't include it in your project -->
-  <link href="/static/assets/demo/demo.css" rel="stylesheet" />
-
-  <!-- Specific Page CSS goes HERE  -->
-  {% block stylesheets %}{% endblock stylesheets %}
-
-</head>
-
-<body class="">
-  <div class="wrapper">
-
-    {% include 'includes/sidebar.html' %}
-
-    <div class="main-panel">
-
-      {% include 'includes/navigation.html' %}
-
-      <div class="content">
-
-        {% block content %}{% endblock content %}
-
-      </div>
-
-      {% include 'includes/footer.html' %}
-
-    </div>
-    
-  </div>
-
-  {% include 'includes/fixed-plugin.html' %}
-
-  {% include 'includes/scripts.html' %}
-
-  {% include 'includes/scripts-sidebar.html' %}
-
-  <!-- Specific Page JS goes HERE  -->
-  {% block javascripts %}{% endblock javascripts %}
-
-</body>
-
-</html>

app/home/routes.py

@@ -1,52 +0,0 @@
-# -*- encoding: utf-8 -*-
-"""
-Copyright (c) 2019 - present AppSeed.us
-"""
-
-from app.home import blueprint
-from flask import render_template, redirect, url_for, request
-from flask_login import login_required, current_user
-from app import login_manager
-from jinja2 import TemplateNotFound
-
-@blueprint.route('/index')
-@login_required
-def index():
-
-    return render_template('index.html', segment='index')
-
-@blueprint.route('/<template>')
-@login_required
-def route_template(template):
-
-    try:
-
-        if not template.endswith( '.html' ):
-            template += '.html'
-
-        # Detect the current page
-        segment = get_segment( request )
-
-        # Serve the file (if exists) from app/templates/FILE.html
-        return render_template( template, segment=segment )
-
-    except TemplateNotFound:
-        return render_template('page-404.html'), 404
-    
-    except:
-        return render_template('page-500.html'), 500
-
-# Helper - Extract current page name from request 
-def get_segment( request ): 
-
-    try:
-
-        segment = request.path.split('/')[-1]
-
-        if segment == '':
-            segment = 'index'
-
-        return segment    
-
-    except:
-        return None  

app/home/templates/login.html

@@ -1,64 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Login {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-        <div class="row">
-          <div class="col-md-8">
-            <div class="card">
-
-              <form role="form" method="post" action="">
-              
-                <div class="card-header">
-                  <h5 class="title">Login</h5>
-
-                  <h6 class="card-category">
-                      Add your credentials
-                  </h6>
-                </div>
-
-                <div class="card-body">
-
-                    <div class="row">
-
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Username</label>
-                          <input class="form-control" id="username_login" name="username" required="" type="text" value="">
-                        </div>
-                      </div>
-
-                    </div>
-                    <div class="row">
-
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Password</label>
-                          <input class="form-control" id="pwd_login" name="password" required="" type="password" value="">
-                        </div>
-                      </div>
-
-                    </div>
-                    
-                </div>
-                <div class="card-footer">
-                  <button type="submit" name="login" class="btn btn-fill btn-primary">Login</button>
-                  &nbsp; &nbsp;
-                  Don't have an account? <a href="/register.html" class="text-primary">Create</a>
-                </div>
-
-              </form>
-
-            </div>
-          </div>
-      </div>
-
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/page-403.html

@@ -1,28 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Page 404 {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-    <div class="row">
-        <div class="col-md-12">
-            <div class="card card-profile">
-                <div class="card-body">
-                    <h6 class="card-category text-gray">Error 403</h6>
-                    <h4 class="card-title">
-                        Access Denied - please authenticate
-                    </h4>
-                    <a href="{{ url_for('base_blueprint.login') }}" class="btn btn-primary btn-round">Login</a>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/page-404.html

@@ -1,28 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Page 404 {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-    <div class="row">
-        <div class="col-md-12">
-            <div class="card card-profile">
-                <div class="card-body">
-                    <h6 class="card-category text-gray">Error 404</h6>
-                    <h4 class="card-title">
-                        Page not found
-                    </h4>
-                    <a href="/" class="btn btn-primary btn-round">Home</a>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/page-500.html

@@ -1,28 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Page 404 {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-    <div class="row">
-        <div class="col-md-12">
-            <div class="card card-profile">
-                <div class="card-body">
-                    <h6 class="card-category text-gray">Error 500</h6>
-                    <h4 class="card-title">
-                        Internal Server Error
-                    </h4>
-                    <a href="/" class="btn btn-primary btn-round">Home</a>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/page-blank.html

@@ -1,27 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Page Blank {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-    <div class="row">
-        <div class="col-md-12">
-            <div class="card card-profile">
-                <div class="card-body">
-                    <h6 class="card-category text-gray">Page Blank</h6>
-                    <h4 class="card-title">
-                        Add your content 
-                    </h4>
-                    <a href="/" class="btn btn-primary btn-round">Home</a>
-                </div>
-            </div>
-        </div>
-    </div>
-    
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/page-rtl-support.html

@@ -1,392 +0,0 @@
-{% extends "layouts/base-rtl.html" %}
-
-{% block title %} داشبورد متریال توسط تیم خلاق {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-12">
-    <div class="card card-chart">
-      <div class="card-header ">
-        <div class="row">
-          <div class="col-sm-6 text-right">
-            <h5 class="card-category">مجموع الشحنات</h5>
-            <h2 class="card-title">أداء</h2>
-          </div>
-          <div class="col-sm-6">
-            <div class="btn-group btn-group-toggle" data-toggle="buttons">
-              <label class="btn btn-sm btn-primary btn-simple active" id="0">
-                <input type="radio" name="options" checked>
-                <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block"> حسابات</span>
-                <span class="d-block d-sm-none">
-                  <i class="tim-icons icon-single-02"></i>
-                </span>
-              </label>
-              <label class="btn btn-sm btn-primary btn-simple" id="1">
-                <input type="radio" class="d-none d-sm-none" name="options">
-                <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block"> المشتريات</span>
-                <span class="d-block d-sm-none">
-                  <i class="tim-icons icon-gift-2"></i>
-                </span>
-              </label>
-              <label class="btn btn-sm btn-primary btn-simple" id="2">
-                <input type="radio" class="d-none" name="options">
-                <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">جلسات</span>
-                <span class="d-block d-sm-none">
-                  <i class="tim-icons icon-tap-02"></i>
-                </span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="card-body">
-        <div class="chart-area">
-          <canvas id="chartBig1"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row">
-  <div class="col-lg-4 text-right">
-    <div class="card card-chart">
-      <div class="card-header">
-        <h5 class="card-category">شحنات كاملة</h5>
-        <h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary"></i> 763,215</h3>
-      </div>
-      <div class="card-body">
-        <div class="chart-area">
-          <canvas id="chartLinePurple"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-4 text-right">
-    <div class="card card-chart">
-      <div class="card-header">
-        <h5 class="card-category">المبيعات اليومية</h5>
-        <h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info"></i> 3,500€</h3>
-      </div>
-      <div class="card-body">
-        <div class="chart-area">
-          <canvas id="CountryChart"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-4 text-right">
-    <div class="card card-chart">
-      <div class="card-header">
-        <h5 class="card-category">المهام المكتملة</h5>
-        <h3 class="card-title"><i class="tim-icons icon-send text-success"></i> 12,100K</h3>
-      </div>
-      <div class="card-body">
-        <div class="chart-area">
-          <canvas id="chartLineGreen"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row">
-  <div class="col-lg-6 col-sm-6 text-center">
-    <div class="card  card-tasks text-left">
-      <div class="card-header text-right">
-        <h6 class="title d-inline">تتبع</h6>
-        <p class="card-category d-inline">اليوم</p>
-        <div class="dropdown float-left">
-          <a class="btn btn-link dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="tim-icons icon-settings-gear-63"></i></a>
-          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-            <a class="dropdown-item" href="#">عمل</a>
-            <a class="dropdown-item" href="#">عمل آخر</a>
-            <a class="dropdown-item" href="#">شيء آخر هنا</a>
-          </div>
-        </div>
-      </div>
-      <div class="card-body ">
-        <div class="table-full-width table-responsive">
-          <table class="table">
-            <tbody>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="" checked>
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">مركز معالجة موقع محور</p>
-                  <p class="text-muted">نص آخر هناالوثائق</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">لامتثال GDPR</p>
-                  <p class="text-muted">الناتج المحلي الإجمالي هو نظام يتطلب من الشركات حماية البيانات الشخصية والخصوصية لمواطني أوروبا بالنسبة للمعاملات التي تتم داخل الدول الأعضاء في الاتحاد الأوروبي.</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">القضاياالقضايا</p>
-                  <p class="text-muted">سيكونونقال 50٪ من جميع المستجيبين أنهم سيكونون أكثر عرضة للتسوق في شركة</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="" checked="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">تصدير الملفات التي تمت معالجتها</p>
-                  <p class="text-muted">كما يبين التقرير أن المستهلكين لن يغفروا شركة بسهولة بمجرد حدوث خرق يعرض بياناتهم الشخصية.</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="" checked="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">الوصول إلى عملية التصدير</p>
-                  <p class="text-muted">سياسة السيء إنطلاق في قبل, مساعدة والمانيا أخذ قد. بل أما أمام ماشاء الشتاء،, تكاليف الإقتصادي بـ حين. ٣٠ يتعلّق للإتحاد ولم, وتم هناك مدينة بتحدّي إذ, كان بل عمل</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td class="text-center">
-                  <div class="form-check">
-                    <label class="form-check-label">
-                      <input class="form-check-input" type="checkbox" value="">
-                      <span class="form-check-sign">
-                        <span class="check"></span>
-                      </span>
-                    </label>
-                  </div>
-                </td>
-                <td class="text-right">
-                  <p class="title">الافراج عن v2.0.0</p>
-                  <p class="text-muted">عن رئيس طوكيو البولندي لمّ, مايو مرجع وباءت قبل هو, تسمّى الطريق الإقتصادي ذات أن. لغات الإطلاق الفرنسية دار ان, بين بتخصيص الساحة اقتصادية أم. و الآخ</p>
-                </td>
-                <td class="td-actions">
-                  <button type="button" rel="tooltip" title="" class="btn btn-link" data-original-title="مهمة تحرير">
-                    <i class="tim-icons icon-settings"></i>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-6 col-sm-6">
-    <div class="card ">
-      <div class="card-header text-right">
-        <h4 class="card-title">جدول بسيط</h4>
-      </div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table tablesorter " id="">
-            <thead class=" text-primary">
-              <tr>
-                <th>
-                  اسم
-                </th>
-                <th>
-                  بلد
-                </th>
-                <th>
-                  مدينة
-                </th>
-                <th class="text-center">
-                  راتب
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  رايس داكوتا
-                </td>
-                <td>
-                  النيجر
-                </td>
-                <td>
-                  العود-تورنهاوت
-                </td>
-                <td class="text-center">
-                  $36,738
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  مينيرفا هوبر
-                </td>
-                <td>
-                  كوراساو
-                </td>
-                <td>
-                  Sinaai-واس
-                </td>
-                <td class="text-center">
-                  $23,789
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  سيج رودريجيز
-                </td>
-                <td>
-                  هولندا
-                </td>
-                <td>
-                  بايلي
-                </td>
-                <td class="text-center">
-                  $56,142
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  فيليب شانيه
-                </td>
-                <td>
-                  كوريا، جنوب
-                </td>
-                <td>
-                  اوفرلاند بارك
-                </td>
-                <td class="text-center">
-                  $38,735
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  دوريس غرين
-                </td>
-                <td>
-                  مالاوي
-                </td>
-                <td>
-                  المنع
-                </td>
-                <td class="text-center">
-                  $63,542
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  ميسون بورتر
-                </td>
-                <td>
-                  تشيلي
-                </td>
-                <td>
-                  غلوستر
-                </td>
-                <td class="text-center">
-                  $78,615
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  جون بورتر
-                </td>
-                <td>
-                  البرتغال
-                </td>
-                <td>
-                  غلوستر
-                </td>
-                <td class="text-center">
-                  $98,615
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}
-
-<script>
-  $(document).ready(function() {
-    // Javascript method's body can be found in assets/js/demos.js
-
-
-    demo.initDashboardPageCharts();
-
-  });
-</script>
-
-{% endblock javascripts %}

app/home/templates/page-user.html

@@ -1,141 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Page User {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-8">
-    <div class="card">
-      <div class="card-header">
-        <h5 class="title">Edit Profile</h5>
-      </div>
-      <div class="card-body">
-        <form>
-          <div class="row">
-            <div class="col-md-5 pr-md-1">
-              <div class="form-group">
-                <label>UserID (disabled)</label>
-                <input type="text" class="form-control" disabled="" value="{{ current_user.id }}">
-              </div>
-            </div>
-            <div class="col-md-3 px-md-1">
-              <div class="form-group">
-                <label>Username</label>
-                <input type="text" class="form-control" value="{{ current_user.username }}">
-              </div>
-            </div>
-            <div class="col-md-4 pl-md-1">
-              <div class="form-group">
-                <label for="exampleInputEmail1">Email address</label>
-                <input type="email" class="form-control" value="{{ current_user.email }}">
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-6 pr-md-1">
-              <div class="form-group">
-                <label>First Name</label>
-                <input type="text" class="form-control" placeholder="Company" value="Mike">
-              </div>
-            </div>
-            <div class="col-md-6 pl-md-1">
-              <div class="form-group">
-                <label>Last Name</label>
-                <input type="text" class="form-control" placeholder="Last Name" value="Andrew">
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-12">
-              <div class="form-group">
-                <label>Address</label>
-                <input type="text" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09">
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-4 pr-md-1">
-              <div class="form-group">
-                <label>City</label>
-                <input type="text" class="form-control" placeholder="City" value="Mike">
-              </div>
-            </div>
-            <div class="col-md-4 px-md-1">
-              <div class="form-group">
-                <label>Country</label>
-                <input type="text" class="form-control" placeholder="Country" value="Andrew">
-              </div>
-            </div>
-            <div class="col-md-4 pl-md-1">
-              <div class="form-group">
-                <label>Postal Code</label>
-                <input type="number" class="form-control" placeholder="ZIP Code">
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-8">
-              <div class="form-group">
-                <label>About Me</label>
-                <textarea rows="4" cols="80" class="form-control" placeholder="Here can be your description" value="Mike">Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</textarea>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div class="card-footer">
-        <button type="submit" class="btn btn-fill btn-primary">Save</button>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4">
-    <div class="card card-user">
-      <div class="card-body">
-        <p class="card-text">
-          <div class="author">
-            <div class="block block-one"></div>
-            <div class="block block-two"></div>
-            <div class="block block-three"></div>
-            <div class="block block-four"></div>
-            <a href="javascript:void(0)">
-              <img class="avatar" src="/static/assets/img/emilyz.jpg" alt="Bill Gates photo - when buys a Linux.">
-              <h5 class="title">
-                {{ current_user.username }}
-              </h5>
-            </a>
-            <p class="description">
-              {{ current_user.email }}
-            </p>
-          </div>
-        </p>
-        <div class="card-description">
-          Linux, my favorite OS - I admin that windows is just a big mistake.
-          Do not be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
-        </div>
-      </div>
-      <div class="card-footer">
-        <div class="button-container">
-          <button href="javascript:void(0)" class="btn btn-icon btn-round btn-facebook">
-            <i class="fab fa-facebook"></i>
-          </button>
-          <button href="javascript:void(0)" class="btn btn-icon btn-round btn-twitter">
-            <i class="fab fa-twitter"></i>
-          </button>
-          <button href="javascript:void(0)" class="btn btn-icon btn-round btn-google">
-            <i class="fab fa-google-plus"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/register.html

@@ -1,70 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} Register {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-        <div class="row">
-          <div class="col-md-8">
-            <div class="card">
-
-              <form role="form" method="post" action="">
-              
-                <div class="card-header">
-                  <h5 class="title">Register</h5>
-
-                  <h6 class="card-category">
-                      Add your credentials
-                  </h6>
-                </div>
-
-                <div class="card-body">
-
-                    <div class="row">
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Username</label>
-                          <input class="form-control" id="username_create" name="username" required="" type="text" value="">
-                        </div>
-                      </div>
-                    </div>
-
-                    <div class="row">
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Email</label>
-                          <input class="form-control" id="email_create" name="email" required="" type="email" value="">
-                        </div>
-                      </div>
-                    </div>
-
-                    <div class="row">
-                      <div class="col-md-3 px-md-1">
-                        <div class="form-group">
-                          <label>Password</label>
-                          <input class="form-control" id="pwd_create" name="password" required="" type="password" value="">
-                        </div>
-                      </div>
-                    </div>
-                    
-                </div>
-                <div class="card-footer">
-                  <button type="submit" name="register" class="btn btn-fill btn-primary">Register</button>
-                  &nbsp; &nbsp;
-                  Have an account? <a href="/login.html" class="text-primary">Login</a>
-                </div>
-
-              </form>
-
-            </div>
-          </div>
-      </div>
-
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/ui-icons.html

@@ -1,628 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} UI Icons {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-12">
-    <div class="card">
-      <div class="card-header">
-        <h5 class="title">100 Awesome Nucleo Icons</h5>
-        <p class="category">Handcrafted by our friends from <a href="https://nucleoapp.com/?ref=1712">NucleoApp</a></p>
-      </div>
-      <div class="card-body all-icons">
-        <div class="row">
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-alert-circle-exc"></i>
-              <p>icon-alert-circle-exc</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-align-center"></i>
-              <p>icon-align-center</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-align-left-2"></i>
-              <p>icon-align-left-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-app"></i>
-              <p>icon-app</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-atom"></i>
-              <p>icon-atom</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-attach-87"></i>
-              <p>icon-attach-87</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-badge"></i>
-              <p>icon-badge</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bag-16"></i>
-              <p>icon-bag-16</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bank"></i>
-              <p>icon-bank</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-basket-simple"></i>
-              <p>icon-basket-simple</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bell-55"></i>
-              <p>icon-bell-55</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bold"></i>
-              <p>icon-bold</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-book-bookmark"></i>
-              <p>icon-book-bookmark</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-double-right"></i>
-              <p>icon-double-right</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bulb-63"></i>
-              <p>icon-bulb-63</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bullet-list-67"></i>
-              <p>icon-bullet-list-67</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-bus-front-12"></i>
-              <p>icon-bus-front-12</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-button-power"></i>
-              <p>icon-button-power</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-camera-18"></i>
-              <p>icon-camera-18</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-calendar-60"></i>
-              <p>icon-calendar-60</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-caps-small"></i>
-              <p>icon-caps-small</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-cart"></i>
-              <p>icon-cart</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-chart-bar-32"></i>
-              <p>icon-chart-bar-32</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-chart-pie-36"></i>
-              <p>icon-chart-pie-36</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-chat-33"></i>
-              <p>icon-chat-33</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-check-2"></i>
-              <p>icon-check-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-cloud-download-93"></i>
-              <p>icon-cloud-download-93</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-cloud-upload-94"></i>
-              <p>icon-cloud-upload-94</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-coins"></i>
-              <p>icon-coins</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-compass-05"></i>
-              <p>icon-compass-05</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-controller"></i>
-              <p>icon-controller</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-credit-card"></i>
-              <p>icon-credit-card</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-delivery-fast"></i>
-              <p>icon-delivery-fast</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-email-85"></i>
-              <p>icon-email-85</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-gift-2"></i>
-              <p>icon-gift-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-globe-2"></i>
-              <p>icon-globe-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-headphones"></i>
-              <p>icon-headphones</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-heart-2"></i>
-              <p>icon-heart-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-html5"></i>
-              <p>icon-html5</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-double-left"></i>
-              <p>icon-double-left</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-image-02"></i>
-              <p>icon-image-02</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-istanbul"></i>
-              <p>icon-istanbul</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-key-25"></i>
-              <p>icon-key-25</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-laptop"></i>
-              <p>icon-laptop</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-light-3"></i>
-              <p>icon-light-3</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-link-72"></i>
-              <p>icon-link-72</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-lock-circle"></i>
-              <p>icon-lock-circle</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-map-big"></i>
-              <p>icon-map-big</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-minimal-down"></i>
-              <p>icon-minimal-down</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-minimal-left"></i>
-              <p>icon-minimal-left</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-minimal-right"></i>
-              <p>icon-minimal-right</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-minimal-up"></i>
-              <p>icon-minimal-up</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-mobile"></i>
-              <p>icon-mobile</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-molecule-40"></i>
-              <p>icon-molecule-40</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-money-coins"></i>
-              <p>icon-money-coins</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-notes"></i>
-              <p>icon-notes</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-palette"></i>
-              <p>icon-palette</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-paper"></i>
-              <p>icon-paper</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-pin"></i>
-              <p>icon-pin</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-planet"></i>
-              <p>icon-planet</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-puzzle-10"></i>
-              <p>icon-puzzle-10</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-pencil"></i>
-              <p>icon-pencil</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-satisfied"></i>
-              <p>icon-satisfied</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-scissors"></i>
-              <p>icon-scissors</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-send"></i>
-              <p>icon-send</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-settings-gear-63"></i>
-              <p>icon-settings-gear-63</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-settings"></i>
-              <p>icon-settings</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-wifi"></i>
-              <p>icon-wifi</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-single-02"></i>
-              <p>icon-single-02</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-single-copy-04"></i>
-              <p>icon-single-copy-04</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-sound-wave"></i>
-              <p>icon-sound-wave</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-spaceship"></i>
-              <p>icon-spaceship</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-square-pin"></i>
-              <p>icon-square-pin</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-support-17"></i>
-              <p>icon-support-17</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tablet-2"></i>
-              <p>icon-tablet-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tag"></i>
-              <p>icon-tag</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tap-02"></i>
-              <p>icon-tap-02</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tie-bow"></i>
-              <p>icon-tie-bow</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-time-alarm"></i>
-              <p>icon-time-alarm</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-trash-simple"></i>
-              <p>icon-trash-simple</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-trophy"></i>
-              <p>icon-trophy</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-tv-2"></i>
-              <p>icon-tv-2</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-upload"></i>
-              <p>icon-upload</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-user-run"></i>
-              <p>icon-user-run</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-vector"></i>
-              <p>icon-vector</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-video-66"></i>
-              <p>icon-video-66</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-wallet-43"></i>
-              <p>icon-wallet-43</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-volume-98"></i>
-              <p>icon-volume-98</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-watch-time"></i>
-              <p>icon-watch-time</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-world"></i>
-              <p>icon-world</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-zoom-split"></i>
-              <p>icon-zoom-split</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-refresh-01"></i>
-              <p>icon-refresh-01</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-refresh-02"></i>
-              <p>icon-refresh-02</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-shape-star"></i>
-              <p>icon-shape-star</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-components"></i>
-              <p>icon-components</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-triangle-right-17"></i>
-              <p>icon-triangle-right-17</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-button-pause"></i>
-              <p>icon-button-pause</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-simple-remove"></i>
-              <p>icon-simple-remove</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-simple-add"></i>
-              <p>icon-simple-add</p>
-            </div>
-          </div>
-          <div class="font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6">
-            <div class="font-icon-detail">
-              <i class="tim-icons icon-simple-delete"></i>
-              <p>icon-simple-delete</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/ui-notifications.html

@@ -1,133 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} UI Notifications {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-6">
-    <div class="card">
-      <div class="card-header">
-        <h4 class="card-title">Notifications Style</h4>
-      </div>
-      <div class="card-body">
-        <div class="alert alert-info">
-          <span>This is a plain notification</span>
-        </div>
-        <div class="alert alert-info">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span>This is a notification with close button.</span>
-        </div>
-        <div class="alert alert-info alert-with-icon" data-notify="container">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span data-notify="icon" class="tim-icons icon-bell-55"></span>
-          <span data-notify="message">This is a notification with close button and icon.</span>
-        </div>
-        <div class="alert alert-info alert-with-icon" data-notify="container">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span data-notify="icon" class="tim-icons icon-bell-55"></span>
-          <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6">
-    <div class="card">
-      <div class="card-header">
-        <h4 class="card-title">Notification states</h4>
-      </div>
-      <div class="card-body">
-        <div class="alert alert-primary">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
-        </div>
-        <div class="alert alert-info">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Info - </b> This is a regular notification made with ".alert-info"</span>
-        </div>
-        <div class="alert alert-success">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Success - </b> This is a regular notification made with ".alert-success"</span>
-        </div>
-        <div class="alert alert-warning">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
-        </div>
-        <div class="alert alert-danger">
-          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
-            <i class="tim-icons icon-simple-remove"></i>
-          </button>
-          <span><b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-12">
-    <div class="card">
-      <div class="card-body">
-        <div class="places-buttons">
-          <div class="row">
-            <div class="col-md-6 ml-auto mr-auto text-center">
-              <h4 class="card-title">
-                Notifications Places
-                <p class="category">Click to view notifications</p>
-              </h4>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-8 ml-auto mr-auto">
-              <div class="row">
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','left')">Top Left</button>
-                </div>
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','center')">Top Center</button>
-                </div>
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','right')">Top Right</button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-8 ml-auto mr-auto">
-              <div class="row">
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','left')">Bottom Left</button>
-                </div>
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','center')">Bottom Center</button>
-                </div>
-                <div class="col-md-4">
-                  <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','right')">Bottom Right</button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/ui-tables.html

@@ -1,275 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} UI Tables {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-12">
-    <div class="card ">
-      <div class="card-header">
-        <h4 class="card-title"> Simple Table</h4>
-      </div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table tablesorter " id="">
-            <thead class=" text-primary">
-              <tr>
-                <th>
-                  Name
-                </th>
-                <th>
-                  Country
-                </th>
-                <th>
-                  City
-                </th>
-                <th class="text-center">
-                  Salary
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  Dakota Rice
-                </td>
-                <td>
-                  Niger
-                </td>
-                <td>
-                  Oud-Turnhout
-                </td>
-                <td class="text-center">
-                  $36,738
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Minerva Hooper
-                </td>
-                <td>
-                  Curaçao
-                </td>
-                <td>
-                  Sinaai-Waas
-                </td>
-                <td class="text-center">
-                  $23,789
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Sage Rodriguez
-                </td>
-                <td>
-                  Netherlands
-                </td>
-                <td>
-                  Baileux
-                </td>
-                <td class="text-center">
-                  $56,142
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Philip Chaney
-                </td>
-                <td>
-                  Korea, South
-                </td>
-                <td>
-                  Overland Park
-                </td>
-                <td class="text-center">
-                  $38,735
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Doris Greene
-                </td>
-                <td>
-                  Malawi
-                </td>
-                <td>
-                  Feldkirchen in Kärnten
-                </td>
-                <td class="text-center">
-                  $63,542
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Mason Porter
-                </td>
-                <td>
-                  Chile
-                </td>
-                <td>
-                  Gloucester
-                </td>
-                <td class="text-center">
-                  $78,615
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Jon Porter
-                </td>
-                <td>
-                  Portugal
-                </td>
-                <td>
-                  Gloucester
-                </td>
-                <td class="text-center">
-                  $98,615
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-12">
-    <div class="card  card-plain">
-      <div class="card-header">
-        <h4 class="card-title"> Table on Plain Background</h4>
-        <p class="category"> Here is a subtitle for this table</p>
-      </div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table tablesorter " id="">
-            <thead class=" text-primary">
-              <tr>
-                <th>
-                  Name
-                </th>
-                <th>
-                  Country
-                </th>
-                <th>
-                  City
-                </th>
-                <th class="text-center">
-                  Salary
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  Dakota Rice
-                </td>
-                <td>
-                  Niger
-                </td>
-                <td>
-                  Oud-Turnhout
-                </td>
-                <td class="text-center">
-                  $36,738
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Minerva Hooper
-                </td>
-                <td>
-                  Curaçao
-                </td>
-                <td>
-                  Sinaai-Waas
-                </td>
-                <td class="text-center">
-                  $23,789
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Sage Rodriguez
-                </td>
-                <td>
-                  Netherlands
-                </td>
-                <td>
-                  Baileux
-                </td>
-                <td class="text-center">
-                  $56,142
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Philip Chaney
-                </td>
-                <td>
-                  Korea, South
-                </td>
-                <td>
-                  Overland Park
-                </td>
-                <td class="text-center">
-                  $38,735
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Doris Greene
-                </td>
-                <td>
-                  Malawi
-                </td>
-                <td>
-                  Feldkirchen in Kärnten
-                </td>
-                <td class="text-center">
-                  $63,542
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Mason Porter
-                </td>
-                <td>
-                  Chile
-                </td>
-                <td>
-                  Gloucester
-                </td>
-                <td class="text-center">
-                  $78,615
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Jon Porter
-                </td>
-                <td>
-                  Portugal
-                </td>
-                <td>
-                  Gloucester
-                </td>
-                <td class="text-center">
-                  $98,615
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

app/home/templates/ui-typography.html

@@ -1,154 +0,0 @@
-{% extends "layouts/base.html" %}
-
-{% block title %} UI Typography {% endblock %} 
-
-<!-- Specific Page CSS goes HERE  -->
-{% block stylesheets %}{% endblock stylesheets %}
-
-{% block content %}
-
-<div class="row">
-  <div class="col-md-12">
-    <div class="card">
-      <div class="card-header mb-5">
-        <h5 class="card-category">Black Table Heading</h5>
-        <h3 class="card-title">Created using Poppins Font Family</h3>
-      </div>
-      <div class="card-body">
-        <div class="typography-line">
-          <h1><span>Header 1</span>The Life of Black Dashboard </h1>
-        </div>
-        <div class="typography-line">
-          <h2><span>Header 2</span>The Life of Black Dashboard </h2>
-        </div>
-        <div class="typography-line">
-          <h3><span>Header 3</span>The Life of Black Dashboard </h3>
-        </div>
-        <div class="typography-line">
-          <h4><span>Header 4</span>The Life of Black Dashboard </h4>
-        </div>
-        <div class="typography-line">
-          <h5><span>Header 5</span>The Life of Black Dashboard </h5>
-        </div>
-        <div class="typography-line">
-          <h6><span>Header 6</span>The Life of Black Dashboard </h6>
-        </div>
-        <div class="typography-line">
-          <p><span>Paragraph</span>
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
-          </p>
-        </div>
-        <div class="typography-line">
-          <span>Quote</span>
-          <blockquote>
-            <p class="blockquote blockquote-primary">
-              "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
-              <br>
-              <br>
-              <small>
-                - Noaa
-              </small>
-            </p>
-          </blockquote>
-        </div>
-        <div class="typography-line">
-          <span>Muted Text</span>
-          <p class="text-muted">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
-          </p>
-        </div>
-        <div class="typography-line">
-          <span>Primary Text</span>
-          <p class="text-primary">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
-        </div>
-        <div class="typography-line">
-          <span>Info Text</span>
-          <p class="text-info">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
-        </div>
-        <div class="typography-line">
-          <span>Success Text</span>
-          <p class="text-success">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
-        </div>
-        <div class="typography-line">
-          <span>Warning Text</span>
-          <p class="text-warning">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
-          </p>
-        </div>
-        <div class="typography-line">
-          <span>Danger Text</span>
-          <p class="text-danger">
-            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
-        </div>
-        <div class="typography-line">
-          <h2><span>Small Tag</span>
-            Header with small subtitle <br>
-            <small>Use "small" tag for the headers</small>
-          </h2>
-        </div>
-        <div class="typography-line">
-          <span>Lists</span>
-          <div class="row">
-            <div class="col-md-3">
-              <h5>Unordered List</h5>
-              <ul>
-                <li>List Item</li>
-                <li>List Item</li>
-                <li class="list-unstyled">
-                  <ul>
-                    <li>List Item</li>
-                    <li>List Item</li>
-                    <li>List Item</li>
-                  </ul>
-                </li>
-                <li>List Item</li>
-              </ul>
-            </div>
-            <div class="col-md-3">
-              <h5>Ordered List</h5>
-              <ol>
-                <li>List Item</li>
-                <li>List Item</li>
-                <li>List item</li>
-                <li>List Item</li>
-              </ol>
-            </div>
-            <div class="col-md-3">
-              <h5>Unstyled List</h5>
-              <ul class="list-unstyled">
-                <li>List Item</li>
-                <li>List Item</li>
-                <li>List item</li>
-                <li>List Item</li>
-              </ul>
-            </div>
-            <div class="col-md-3">
-              <h5>Inline List</h5>
-              <ul class="list-inline">
-                <li class="list-inline-item">List1</li>
-                <li class="list-inline-item">List2</li>
-                <li class="list-inline-item">List3</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <div class="typography-line">
-          <span>Code</span>
-          <p>This is
-            <code>.css-class-as-code</code>, an example of an inline code element. Wrap inline code within a
-            <code> &lt;code&gt;...&lt;/code&gt;</code>tag.
-          </p>
-          <pre>1. #This is an example of preformatted text.<br/>2. #Here is another line of code</pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% endblock content %}
-
-<!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}

apps/__init__.py

@@ -3,25 +3,27 @@
 Copyright (c) 2019 - present AppSeed.us
 """
 
-from flask import Flask, url_for
+from flask import Flask
 from flask_login import LoginManager
 from flask_sqlalchemy import SQLAlchemy
 from importlib import import_module
-from logging import basicConfig, DEBUG, getLogger, StreamHandler
+
-from os import path
 
 db = SQLAlchemy()
 login_manager = LoginManager()
 
+
 def register_extensions(app):
     db.init_app(app)
     login_manager.init_app(app)
 
+
 def register_blueprints(app):
-    for module_name in ('base', 'home'):
+    for module_name in ('authentication', 'home'):
-        module = import_module('app.{}.routes'.format(module_name))
+        module = import_module('apps.{}.routes'.format(module_name))
         app.register_blueprint(module.blueprint)
 
+
 def configure_database(app):
 
     @app.before_first_request
@@ -32,10 +34,15 @@ def configure_database(app):
     def shutdown_session(exception=None):
         db.session.remove()
 
+from apps.authentication.oauth import github_blueprint
+
 def create_app(config):
-    app = Flask(__name__, static_folder='base/static')
+    app = Flask(__name__)
     app.config.from_object(config)
     register_extensions(app)
+
+    app.register_blueprint(github_blueprint, url_prefix="/login")
+    
     register_blueprints(app)
     configure_database(app)
     return app

apps/authentication/__init__.py

@@ -6,9 +6,7 @@ Copyright (c) 2019 - present AppSeed.us
 from flask import Blueprint
 
 blueprint = Blueprint(
-    'base_blueprint',
+    'authentication_blueprint',
     __name__,
-    url_prefix='',
+    url_prefix=''
-    template_folder='templates',
-    static_folder='static'
 )

apps/authentication/forms.py

@@ -0,0 +1,31 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField
+from wtforms.validators import Email, DataRequired
+
+# login and registration
+
+
+class LoginForm(FlaskForm):
+    username = StringField('Username',
+                         id='username_login',
+                         validators=[DataRequired()])
+    password = PasswordField('Password',
+                             id='pwd_login',
+                             validators=[DataRequired()])
+
+
+class CreateAccountForm(FlaskForm):
+    username = StringField('Username',
+                         id='username_create',
+                         validators=[DataRequired()])
+    email = StringField('Email',
+                      id='email_create',
+                      validators=[DataRequired(), Email()])
+    password = PasswordField('Password',
+                             id='pwd_create',
+                             validators=[DataRequired()])

apps/authentication/models.py

@@ -4,20 +4,24 @@ Copyright (c) 2019 - present AppSeed.us
 """
 
 from flask_login import UserMixin
-from sqlalchemy import Binary, Column, Integer, String
 
-from app import db, login_manager
+from sqlalchemy.orm import relationship
+from flask_dance.consumer.storage.sqla import OAuthConsumerMixin
 
-from app.base.util import hash_pass
+from apps import db, login_manager
 
-class User(db.Model, UserMixin):
+from apps.authentication.util import hash_pass
 
-    __tablename__ = 'User'
+class Users(db.Model, UserMixin):
 
-    id = Column(Integer, primary_key=True)
+    __tablename__ = 'Users'
-    username = Column(String, unique=True)
+
-    email = Column(String, unique=True)
+    id            = db.Column(db.Integer, primary_key=True)
-    password = Column(Binary)
+    username      = db.Column(db.String(64), unique=True)
+    email         = db.Column(db.String(64), unique=True)
+    password      = db.Column(db.LargeBinary)
+
+    oauth_github  = db.Column(db.String(100), nullable=True)
 
     def __init__(self, **kwargs):
         for property, value in kwargs.items():
@@ -29,8 +33,8 @@ class User(db.Model, UserMixin):
                 value = value[0]
 
             if property == 'password':
-                value = hash_pass( value ) # we need bytes here (not plain str)
+                value = hash_pass(value)  # we need bytes here (not plain str)
-                
+
             setattr(self, property, value)
 
     def __repr__(self):
@@ -39,10 +43,15 @@ class User(db.Model, UserMixin):
 
 @login_manager.user_loader
 def user_loader(id):
-    return User.query.filter_by(id=id).first()
+    return Users.query.filter_by(id=id).first()
+
 
 @login_manager.request_loader
 def request_loader(request):
     username = request.form.get('username')
-    user = User.query.filter_by(username=username).first()
+    user = Users.query.filter_by(username=username).first()
     return user if user else None
+
+class OAuth(OAuthConsumerMixin, db.Model):
+    user_id = db.Column(db.Integer, db.ForeignKey("Users.id", ondelete="cascade"), nullable=False)
+    user = db.relationship(Users)

apps/authentication/oauth.py

@@ -0,0 +1,58 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+import os
+from flask import current_app as app 
+from flask_login import current_user, login_user
+from flask_dance.consumer import oauth_authorized
+from flask_dance.contrib.github import github, make_github_blueprint
+from flask_dance.consumer.storage.sqla import SQLAlchemyStorage
+from flask_dance.contrib.twitter import twitter, make_twitter_blueprint
+from sqlalchemy.orm.exc import NoResultFound
+from apps.config import Config
+from .models import Users, db, OAuth
+from flask import redirect, url_for
+from flask import flash
+
+github_blueprint = make_github_blueprint(
+    client_id=Config.GITHUB_ID,
+    client_secret=Config.GITHUB_SECRET,
+    scope = 'user',
+    storage=SQLAlchemyStorage(
+        OAuth,
+        db.session,
+        user=current_user,
+        user_required=False,        
+    ),   
+)
+
+@oauth_authorized.connect_via(github_blueprint)
+def github_logged_in(blueprint, token):
+    info = github.get("/user")
+
+    if info.ok:
+
+        account_info = info.json()
+        username     = account_info["login"]
+
+        query = Users.query.filter_by(oauth_github=username)
+        try:
+
+            user = query.one()
+            login_user(user)
+
+        except NoResultFound:
+
+            # Save to db
+            user              = Users()
+            user.username     = '(gh)' + username
+            user.oauth_github = username
+
+            # Save current user
+            db.session.add(user)
+            db.session.commit()
+
+            login_user(user)
+

apps/authentication/routes.py

@@ -0,0 +1,133 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from flask import render_template, redirect, request, url_for
+from flask_login import (
+    current_user,
+    login_user,
+    logout_user
+)
+
+from flask_dance.contrib.github import github
+
+from apps import db, login_manager
+from apps.authentication import blueprint
+from apps.authentication.forms import LoginForm, CreateAccountForm
+from apps.authentication.models import Users
+
+from apps.authentication.util import verify_pass
+
+
+@blueprint.route('/')
+def route_default():
+    return redirect(url_for('authentication_blueprint.login'))
+
+# Login & Registration
+
+@blueprint.route("/github")
+def login_github():
+    """ Github login """
+    if not github.authorized:
+        return redirect(url_for("github.login"))
+
+    res = github.get("/user")
+    return redirect(url_for('home_blueprint.index'))
+    
+@blueprint.route('/login', methods=['GET', 'POST'])
+def login():
+    login_form = LoginForm(request.form)
+    if 'login' in request.form:
+
+        # read form data
+        username = request.form['username']
+        password = request.form['password']
+
+        # Locate user
+        user = Users.query.filter_by(username=username).first()
+
+        # Check the password
+        if user and verify_pass(password, user.password):
+
+            login_user(user)
+            return redirect(url_for('authentication_blueprint.route_default'))
+
+        # Something (user or pass) is not ok
+        return render_template('accounts/login.html',
+                               msg='Wrong user or password',
+                               form=login_form)
+
+    if not current_user.is_authenticated:
+        return render_template('accounts/login.html',
+                               form=login_form)
+    return redirect(url_for('home_blueprint.index'))
+
+
+@blueprint.route('/register', methods=['GET', 'POST'])
+def register():
+    create_account_form = CreateAccountForm(request.form)
+    if 'register' in request.form:
+
+        username = request.form['username']
+        email = request.form['email']
+
+        # Check usename exists
+        user = Users.query.filter_by(username=username).first()
+        if user:
+            return render_template('accounts/register.html',
+                                   msg='Username already registered',
+                                   success=False,
+                                   form=create_account_form)
+
+        # Check email exists
+        user = Users.query.filter_by(email=email).first()
+        if user:
+            return render_template('accounts/register.html',
+                                   msg='Email already registered',
+                                   success=False,
+                                   form=create_account_form)
+
+        # else we can create the user
+        user = Users(**request.form)
+        db.session.add(user)
+        db.session.commit()
+
+        # Delete user from session
+        logout_user()
+        
+        return render_template('accounts/register.html',
+                               msg='Account created successfully.',
+                               success=True,
+                               form=create_account_form)
+
+    else:
+        return render_template('accounts/register.html', form=create_account_form)
+
+
+@blueprint.route('/logout')
+def logout():
+    logout_user()
+    return redirect(url_for('authentication_blueprint.login'))
+
+
+# Errors
+
+@login_manager.unauthorized_handler
+def unauthorized_handler():
+    return render_template('home/page-403.html'), 403
+
+
+@blueprint.errorhandler(403)
+def access_forbidden(error):
+    return render_template('home/page-403.html'), 403
+
+
+@blueprint.errorhandler(404)
+def not_found_error(error):
+    return render_template('home/page-404.html'), 404
+
+
+@blueprint.errorhandler(500)
+def internal_error(error):
+    return render_template('home/page-500.html'), 500

apps/authentication/util.py

@@ -2,28 +2,33 @@
 """
 Copyright (c) 2019 - present AppSeed.us
 """
- 
+
-import hashlib, binascii, os
+import os
+import hashlib
+import binascii
 
 # Inspiration -> https://www.vitoshacademy.com/hashing-passwords-in-python/
 
-def hash_pass( password ):
+
+def hash_pass(password):
     """Hash a password for storing."""
+
     salt = hashlib.sha256(os.urandom(60)).hexdigest().encode('ascii')
-    pwdhash = hashlib.pbkdf2_hmac('sha512', password.encode('utf-8'), 
+    pwdhash = hashlib.pbkdf2_hmac('sha512', password.encode('utf-8'),
-                                salt, 100000)
+                                  salt, 100000)
     pwdhash = binascii.hexlify(pwdhash)
-    return (salt + pwdhash) # return bytes
+    return (salt + pwdhash)  # return bytes
+
 
 def verify_pass(provided_password, stored_password):
     """Verify a stored password against one provided by user"""
+
     stored_password = stored_password.decode('ascii')
     salt = stored_password[:64]
     stored_password = stored_password[64:]
-    pwdhash = hashlib.pbkdf2_hmac('sha512', 
+    pwdhash = hashlib.pbkdf2_hmac('sha512',
-                                  provided_password.encode('utf-8'), 
+                                  provided_password.encode('utf-8'),
-                                  salt.encode('ascii'), 
+                                  salt.encode('ascii'),
                                   100000)
     pwdhash = binascii.hexlify(pwdhash).decode('ascii')
     return pwdhash == stored_password
-

apps/config.py

@@ -0,0 +1,59 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+import os
+
+class Config(object):
+
+    basedir = os.path.abspath(os.path.dirname(__file__))
+
+    # Set up the App SECRET_KEY
+    # SECRET_KEY = config('SECRET_KEY'  , default='S#perS3crEt_007')
+    SECRET_KEY = os.getenv('SECRET_KEY', 'S#perS3crEt_007')
+
+    # This will create a file in <app> FOLDER
+    SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'db.sqlite3')
+    SQLALCHEMY_TRACK_MODIFICATIONS = False 
+
+    # Assets Management
+    ASSETS_ROOT = os.getenv('ASSETS_ROOT', '/static/assets')    
+    
+    SOCIAL_AUTH_GITHUB  = False
+
+    GITHUB_ID      = os.getenv('GITHUB_ID')
+    GITHUB_SECRET  = os.getenv('GITHUB_SECRET')
+
+    # Enable/Disable Github Social Login    
+    if GITHUB_ID and GITHUB_SECRET:
+         SOCIAL_AUTH_GITHUB  = True
+
+class ProductionConfig(Config):
+    DEBUG = False
+
+    # Security
+    SESSION_COOKIE_HTTPONLY = True
+    REMEMBER_COOKIE_HTTPONLY = True
+    REMEMBER_COOKIE_DURATION = 3600
+
+    # PostgreSQL database
+    SQLALCHEMY_DATABASE_URI = '{}://{}:{}@{}:{}/{}'.format(
+        os.getenv('DB_ENGINE'   , 'mysql'),
+        os.getenv('DB_USERNAME' , 'appseed_db_usr'),
+        os.getenv('DB_PASS'     , 'pass'),
+        os.getenv('DB_HOST'     , 'localhost'),
+        os.getenv('DB_PORT'     , 3306),
+        os.getenv('DB_NAME'     , 'appseed_db')
+    )
+
+
+class DebugConfig(Config):
+    DEBUG = True
+
+
+# Load all possible configurations
+config_dict = {
+    'Production': ProductionConfig,
+    'Debug'     : DebugConfig
+}

apps/home/__init__.py

@@ -8,7 +8,5 @@ from flask import Blueprint
 blueprint = Blueprint(
     'home_blueprint',
     __name__,
-    url_prefix='',
+    url_prefix=''
-    template_folder='templates',
-    static_folder='static'
 )

apps/home/routes.py

@@ -0,0 +1,54 @@
+# -*- encoding: utf-8 -*-
+"""
+Copyright (c) 2019 - present AppSeed.us
+"""
+
+from apps.home import blueprint
+from flask import render_template, request
+from flask_login import login_required
+from jinja2 import TemplateNotFound
+
+
+@blueprint.route('/index')
+@login_required
+def index():
+
+    return render_template('home/index.html', segment='index')
+
+
+@blueprint.route('/<template>')
+@login_required
+def route_template(template):
+
+    try:
+
+        if not template.endswith('.html'):
+            template += '.html'
+
+        # Detect the current page
+        segment = get_segment(request)
+
+        # Serve the file (if exists) from app/templates/home/FILE.html
+        return render_template("home/" + template, segment=segment)
+
+    except TemplateNotFound:
+        return render_template('home/page-404.html'), 404
+
+    except:
+        return render_template('home/page-500.html'), 500
+
+
+# Helper - Extract current page name from request
+def get_segment(request):
+
+    try:
+
+        segment = request.path.split('/')[-1]
+
+        if segment == '':
+            segment = 'index'
+
+        return segment
+
+    except:
+        return None

apps/static/assets/css/theme-switcher.css

@@ -0,0 +1,58 @@
+/* The switch - the box around the slider */
+.switch {
+    --width-of-switch: 3.5em;
+    --height-of-switch: 2em;
+    /* size of sliding icon -- sun and moon */
+    --size-of-icon: 1.4em;
+    /* it is like a inline-padding of switch */
+    --slider-offset: 0.3em;
+    position: relative;
+    width: var(--width-of-switch);
+    height: var(--height-of-switch);
+    margin-bottom: 0;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #eaeaea;
+    transition: .4s;
+    border-radius: 30px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: var(--size-of-icon,1.4em);
+    width: var(--size-of-icon,1.4em);
+    border-radius: 20px;
+    left: var(--slider-offset,0.3em);
+    top: 50%;
+    transform: translateY(-50%);
+    background: linear-gradient(40deg,#ff0080,#ff8c00 70%);
+;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #303136;
+}
+
+input:checked + .slider:before {
+    left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em)));
+    background: #303136;
+    /* change the value of second inset in box-shadow to change the angle and direction of the moon  */
+    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
+}

apps/static/assets/js/themeSettings.js

@@ -0,0 +1,148 @@
+$(document).ready(function() {
+    $().ready(function() {
+        $sidebar = $('.sidebar');
+        $navbar = $('.navbar');
+        $main_panel = $('.main-panel');
+
+        $full_page = $('.full-page');
+
+        $sidebar_responsive = $('body > .navbar-collapse');
+        sidebar_mini_active = true;
+        white_color = false;
+
+        window_width = $(window).width();
+
+        fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
+
+
+
+        $('.fixed-plugin a').click(function(event) {
+            if ($(this).hasClass('switch-trigger')) {
+                if (event.stopPropagation) {
+                    event.stopPropagation();
+                } else if (window.event) {
+                    window.event.cancelBubble = true;
+                }
+            }
+        });
+
+        $('.fixed-plugin .background-color span').click(function() {
+            $(this).siblings().removeClass('active');
+            $(this).addClass('active');
+
+            var new_color = $(this).data('color');
+
+            if ($sidebar.length != 0) {
+                $sidebar.attr('data', new_color);
+            }
+
+            if ($main_panel.length != 0) {
+                $main_panel.attr('data', new_color);
+            }
+
+            if ($full_page.length != 0) {
+                $full_page.attr('filter-color', new_color);
+            }
+
+            if ($sidebar_responsive.length != 0) {
+                $sidebar_responsive.attr('data', new_color);
+            }
+        });
+
+        $('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function() {
+            var $btn = $(this);
+
+            if (sidebar_mini_active == true) {
+                $('body').removeClass('sidebar-mini');
+                sidebar_mini_active = false;
+                blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
+            } else {
+                $('body').addClass('sidebar-mini');
+                sidebar_mini_active = true;
+                blackDashboard.showSidebarMessage('Sidebar mini activated...');
+            }
+
+            // we simulate the window Resize so the charts will get updated in realtime.
+            var simulateWindowResize = setInterval(function() {
+                window.dispatchEvent(new Event('resize'));
+            }, 180);
+
+            // we stop the simulation of Window Resize after the animations are completed
+            setTimeout(function() {
+                clearInterval(simulateWindowResize);
+            }, 1000);
+        });
+
+        $('.switch-change-color input').on("switchChange.bootstrapSwitch", function() {
+            var $btn = $(this);
+
+            if (white_color == true) {
+
+                $('body').addClass('change-background');
+                setTimeout(function() {
+                    $('body').removeClass('change-background');
+                    $('body').removeClass('white-content');
+                }, 900);
+                white_color = false;
+            } else {
+
+                $('body').addClass('change-background');
+                setTimeout(function() {
+                    $('body').removeClass('change-background');
+                    $('body').addClass('white-content');
+                }, 900);
+
+                white_color = true;
+            }
+
+
+        });
+
+        $('.light-badge').click(function() {
+            $('body').addClass('white-content');
+            localStorage.setItem("light_color", "true");
+            $('.switch input').prop("checked", false)
+        });
+
+        $('.dark-badge').click(function() {
+            $('body').removeClass('white-content');
+            localStorage.setItem("light_color", "false");
+            $('.switch input').prop("checked", true)
+        });
+    });
+});
+
+$(document).ready(function () {
+    let light_color = localStorage.getItem("light_color");
+
+    if (light_color === "true") {
+        $('body').addClass('white-content');
+        $('.switch input').prop("checked", false)
+    } else {
+        $('.switch input').prop("checked", true)
+    }
+
+
+    $('.switch input').on("change", function () {
+        light_color = localStorage.getItem("light_color");
+
+        if (light_color === "true") {
+            localStorage.setItem("light_color", "false");
+
+            $('body').addClass('change-background');
+            setTimeout(function () {
+                $('body').removeClass('change-background');
+                $('body').removeClass('white-content');
+            }, 400);
+
+        } else {
+            localStorage.setItem("light_color", "true");
+
+            $('body').addClass('change-background');
+            setTimeout(function () {
+                $('body').removeClass('change-background');
+                $('body').addClass('white-content');
+            }, 400);
+        }
+    });
+})