Make the application modular to have a "main" and "backend" part.

app/views/_common/_components/content-section.volt

@@ -0,0 +1 @@
+

app/views/_common/_components/flash.volt

@@ -0,0 +1,22 @@
+
+{% set types = {
+    'error': 'danger',
+    'success': 'success',
+    'notice': 'info',
+    'warning': 'warning'
+} %}
+
+{% if (flash.has()) %}
+    {% for type, messages in flash.getMessages() %}
+        {% for message in messages %}
+            <div class="alert alert-{{ types[type] }} alert-dismissible" role="alert">
+                <button type="button" class="close" data-dismiss="alert">&times;</button>
+
+                <strong>{{ type|capitalize }}</strong>
+                <p>
+                    {{ message }}
+                </p>
+            </div>
+        {% endfor%}
+    {% endfor %}
+{% endif %}

app/views/_common/_components/footer.volt

@@ -0,0 +1,19 @@
+
+<footer class="footer">
+    <div class="footer-left">
+        Copyright &copy; 2017 - 2018
+        <a target="_blank" href="http://www.shufflingpixels.com">
+            Shufflingpixels
+        </a>
+    </div>
+
+    <div class="footer-middle">
+        <a class="footer-button-top" href="#top">
+            {{ icon('solid/caret-up') }}
+        </a>
+    </div>
+
+    <div class="footer-right">
+        Version 1.0.2
+    </div>
+</footer>

app/views/_common/_components/navigation.volt

@@ -0,0 +1,32 @@
+
+<div class="navigation" role="navigation">
+
+    <button class="menu-button" type="button" data-toggle="collapse" data-target="#main-menu" aria-expanded="false" aria-label="Toggle navigation">
+        {{ icon('solid/bars') }}
+    </button>
+
+    <div class="navigation-user-menu">
+    {% if auth.hasIdentity() %}
+        <div class="navigation-user-menu-dropdown">
+            <a id="user-dropdown-button" class="navigation-user-menu-dropdown-button"
+               data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+
+                {{ icon('solid/user') }} <strong>{{ auth.getUser().username }}</strong>
+            </a>
+
+            <ul aria-labelledby="user-dropdown" class="navigation-user-menu-dropdown-list">
+                <li>{{ link_to(['for': 'user-settings'], '<i class="icon fas fa-cog"></i> Settings') }}</li>
+                <li>{{ link_to('/user/activity', '<i class="icon fas fa-list-alt"></i> Activity') }}</li>
+                <li role="separator" class="divider"></li>
+                <li>{{ link_to(['for': 'logout'], '<i class="icon far fa-times-circle"></i> Log out') }}</li>
+            </ul>
+        </div>
+    {% else %}
+        <div class="navigation-user-menu-login">{{ link_to(['for': 'login'], '<i class="icon far fa-arrow-alt-circle-right"></i> Login', 'class': 'login-button') }}</div>
+    {% endif %}
+    </div>
+
+    <nav class="navigation-menu collapse" id="main-menu">
+        {{ menu.render(0) }}
+    </nav>
+</div>

app/views/_common/_partials/pagination.volt

@@ -0,0 +1,61 @@
+
+{%- macro max(a, b) %}
+    {% return a > b ? a : b %}
+{%- endmacro %}
+
+{%- macro min(a, b) %}
+    {% return a < b ? a : b %}
+{%- endmacro %}
+
+{% set pagination_slider = 3 %}
+
+{% if (page.total_pages > 1) %}
+
+<ul class="pagination">
+
+    {% if page.current !== page.before %}
+    <li>
+        <a href="{{ pagination_url ~ page.before }}">
+            {{ icon('solid/arrow-left') }} Previous
+        </a>
+    </li>
+    {% endif %}
+
+    {% if page.total_pages > pagination_slider and page.current > (pagination_slider + 1) %}
+    <li>
+        <a href="{{ pagination_url ~ 1 }}">1</a>
+    </li>
+    <li class="middle">
+        ...
+    </li>
+    {% endif %}
+
+    {% for n in max(page.current - pagination_slider, 1)..min(page.current + pagination_slider, page.total_pages) %}
+        {% if (n == page.current) %}
+            <li class="active">
+        {% else %}
+            <li>
+        {% endif %}
+                <a href="{{ pagination_url ~ n }}">{{ n }}</a>
+            </li>
+    {% endfor %}
+
+    {% if page.total_pages > pagination_slider and page.current < page.total_pages - pagination_slider %}
+    <li class="middle">
+        ...
+    </li>
+    <li>
+        <a href="{{ pagination_url ~ page.total_pages }}">{{ page.total_pages }}</a>
+    </li>
+    {% endif %}
+
+    {% if page.current !== page.next %}
+    <li>
+        <a href="{{ pagination_url ~ page.next }}">
+            Next {{ icon('solid/arrow-right') }}
+        </a>
+    </li>
+    {% endif %}
+</ul>
+
+{% endif %}

app/views/_common/layout-front.volt

@@ -0,0 +1,23 @@
+
+{% extends 'layout.volt' %}
+
+{% block masthead %}
+
+<div class="masthead">
+
+    <h1>Welcome to HTTP Callback</h1>
+
+    <p>
+        This tool is created to help developers integrate
+        API's that uses HTTP Callbacks. Give it a go!
+    </p>
+
+    <p>
+        Find out what HTTP Callback can do for you today!
+    </p>
+
+    <a class="button button-large masthead-get-started-button" href="/callback/new">Get started</a>
+
+</div>
+
+{% endblock %}

app/views/_common/layout.volt

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        {{ assets.outputCss() }}
+
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <title>HTTP Callback</title>
+    </head>
+
+    <body>
+        {% block body %}{% endblock %}
+
+        <header class="head-section">
+            <div class="top-section">
+                {% include "_components/navigation.volt" %}
+            </div>
+
+            {% block masthead %}{% endblock %}
+        </header>
+
+        <main class="content-section">
+
+            {% include "_components/flash.volt" %}
+
+            {{ content() }}
+
+        </main>
+
+        <div class="footer-section">
+            {% include "_components/footer.volt" %}
+        </div>
+
+        {{ assets.outputJs() }}
+    </body>
+</html>