initial commit

2019-01-11 22:16:01 +03:00
commit 24c5f2fcf6
312 changed files with 186972 additions and 0 deletions
--- a/static/js/custom.init.js
+++ b/static/js/custom.init.js
@@ -0,0 +1,5 @@
+$('.modal-basic').magnificPopup({
+    type: 'inline',
+    preloader: false,
+    modal: true
+});
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -0,0 +1,12 @@
+$(document).on('click', '.modal-dismiss', function (e) {
+    e.preventDefault();
+    $.magnificPopup.close();
+});
+
+$(document).on('click', '.clickable-row', function() {
+    Turbolinks.visit($(this).data('href'));
+});
+
+$(document).on('turbolinks:before-cache', function() {
+    $('form').trigger('reset')
+});
--- a/static/js/examples/examples.advanced.form.js
+++ b/static/js/examples/examples.advanced.form.js
@@ -0,0 +1,66 @@
+/*
+Name: 			Forms / Advanced - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+
+	/*
+	Multi Select: Toggle All Button
+	*/
+	function multiselect_selected($el) {
+		var ret = true;
+		$('option', $el).each(function(element) {
+			if (!!!$(this).prop('selected')) {
+				ret = false;
+			}
+		});
+		return ret;
+	}
+
+	function multiselect_selectAll($el) {
+		$('option', $el).each(function(element) {
+			$el.multiselect('select', $(this).val());
+		});
+	}
+
+	function multiselect_deselectAll($el) {
+		$('option', $el).each(function(element) {
+			$el.multiselect('deselect', $(this).val());
+		});
+	}
+
+	function multiselect_toggle($el, $btn) {
+		if (multiselect_selected($el)) {
+			multiselect_deselectAll($el);
+			$btn.text("Select All");
+		}
+		else {
+			multiselect_selectAll($el);
+			$btn.text("Deselect All");
+		}
+	}
+
+	$("#ms_example7-toggle").click(function(e) {
+		e.preventDefault();
+		multiselect_toggle($("#ms_example7"), $(this));
+	});
+
+	/*
+	Slider Range: Output Values
+	*/
+	$('#listenSlider').change(function() {
+		$('.output b').text( this.value );
+	});
+
+	$('#listenSlider2').change(function() {
+		var min = parseInt(this.value.split('/')[0], 10);
+		var max = parseInt(this.value.split('/')[1], 10);
+
+		$('.output2 b.min').text( min );
+		$('.output2 b.max').text( max );
+	});
+
+}(jQuery));
--- a/static/js/examples/examples.ajax.made.easy.js
+++ b/static/js/examples/examples.ajax.made.easy.js
@@ -0,0 +1,74 @@
+ //========================================================================
+// Mock Server-Side HTTP End Points
+//========================================================================
+(function() {
+	'use strict';
+
+	$.mockjax({
+		url: "/example-lazy-load",
+		responseTime: 2500,
+		response: function (settings) {
+			this.responseText = [
+				'<p>',
+					'To loading indicator see <a href="ui-elements-loading-overlay.html">UI Elements - Loading Overlay</a>',
+					'<br/>',
+					'<br/>',
+					'And for the lazy load just add the following attribute to a div ',
+					'<code>ic-get-from="{URL}" ic-trigger-on="load"</code>',
+				'</p>'
+			].join('');
+		}
+	});
+
+	$.mockjax({
+		url: "/example-refresh",
+		responseTime: 1000,
+		response: function (settings) {
+			var date = new Date();
+			this.responseText = [
+				'<p>',
+					'Last refreshed at: ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(),
+				'</p>'
+			].join('');
+		}
+	});
+
+	$.mockjax({
+		url: "/example-load-more",
+		responseTime: 1000,
+		response: function (settings) {
+			var date = new Date();
+			this.responseText = [
+				'<p>',
+					'New Content loaded at: ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(),
+				'</p>'
+			].join('');
+		}
+	});
+
+	$.mockjax({
+		url: "/example-polling",
+		responseTime: 1000,
+		response: function (settings) {
+			var date = new Date();
+			this.responseText = [
+				'<li>',
+					'New Content loaded at: ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(),
+				'</li>'
+			].join('');
+		}
+	});
+
+	$.mockjax({
+		url: "/example-scroll",
+		responseTime: 200,
+		response: function (settings) {
+			var date = new Date();
+			this.responseText = [
+				'<p>',
+					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec egestas felis, ut posuere est. Etiam eleifend, lacus in pretium placerat, augue nulla pretium ex, non accumsan est sapien et arcu. In facilisis euismod justo, id ultricies purus efficitur eu. Nullam a commodo turpis. Nam vitae neque tellus. Sed luctus, ante tincidunt placerat vestibulum, mi dui placerat sapien, consectetur posuere nisl sem non odio. Proin eget metus lobortis, tristique diam bibendum, aliquet nisi. Aliquam sed finibus quam, sed lobortis justo. In cursus magna id scelerisque accumsan. Cras eleifend accumsan ligula, in elementum libero bibendum ut. Maecenas tempor faucibus vulputate.',
+				'</p>'
+			].join('');
+		}
+	});
+})();
--- a/static/js/examples/examples.calendar.js
+++ b/static/js/examples/examples.calendar.js
@@ -0,0 +1,149 @@
+/*
+Name: 			Pages / Calendar - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var initCalendarDragNDrop = function() {
+		$('#external-events div.external-event').each(function() {
+
+			// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
+			// it doesn't need to have a start or end
+			var eventObject = {
+				title: $.trim($(this).text()) // use the element's text as the event title
+			};
+
+			// store the Event Object in the DOM element so we can get to it later
+			$(this).data('eventObject', eventObject);
+
+			// make the event draggable using jQuery UI
+			$(this).draggable({
+				zIndex: 999,
+				revert: true,      // will cause the event to go back to its
+				revertDuration: 0  //  original position after the drag
+			});
+
+		});
+	};
+
+	var initCalendar = function() {
+		var $calendar = $('#calendar');
+		var date = new Date();
+		var d = date.getDate();
+		var m = date.getMonth();
+		var y = date.getFullYear();
+
+		$calendar.fullCalendar({
+			header: {
+				left: 'title',
+				right: 'prev,today,next,basicDay,basicWeek,month'
+			},
+
+			timeFormat: 'h:mm',
+
+			themeButtonIcons: {
+				prev: 'fas fa-caret-left',
+				next: 'fas fa-caret-right',
+			},
+
+			editable: true,
+			droppable: true, // this allows things to be dropped onto the calendar !!!
+			drop: function(date, allDay) { // this function is called when something is dropped
+				var $externalEvent = $(this);
+				// retrieve the dropped element's stored Event Object
+				var originalEventObject = $externalEvent.data('eventObject');
+
+				// we need to copy it, so that multiple events don't have a reference to the same object
+				var copiedEventObject = $.extend({}, originalEventObject);
+
+				// assign it the date that was reported
+				copiedEventObject.start = date;
+				copiedEventObject.allDay = allDay;
+				copiedEventObject.className = $externalEvent.attr('data-event-class');
+
+				// render the event on the calendar
+				// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
+				$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
+
+				// is the "remove after drop" checkbox checked?
+				if ($('#RemoveAfterDrop').is(':checked')) {
+					// if so, remove the element from the "Draggable Events" list
+					$(this).remove();
+				}
+
+			},
+			events: [
+				{
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
+				},
+				{
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
+				},
+				{
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
+					allDay: false
+				},
+				{
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
+					allDay: false
+				},
+				{
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
+					allDay: false
+				},
+				{
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
+					allDay: false,
+					className: 'fc-event-danger'
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
+					end: new Date(y, m, 29),
+					url: 'http://google.com/'
+				}
+			]
+		});
+
+		// FIX INPUTS TO BOOTSTRAP VERSIONS
+		var $calendarButtons = $calendar.find('.fc-header-right > span');
+		$calendarButtons
+			.filter('.fc-button-prev, .fc-button-today, .fc-button-next')
+				.wrapAll('<div class="btn-group mt-sm mr-md mb-sm ml-sm"></div>')
+				.parent()
+				.after('<br class="hidden"/>');
+
+		$calendarButtons
+			.not('.fc-button-prev, .fc-button-today, .fc-button-next')
+				.wrapAll('<div class="btn-group mb-sm mt-sm"></div>');
+
+		$calendarButtons
+			.attr({ 'class': 'btn btn-sm btn-default' });
+	};
+
+	$(function() {
+		initCalendar();
+		initCalendarDragNDrop();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.charts.js
+++ b/static/js/examples/examples.charts.js
--- a/static/js/examples/examples.dashboard.js
+++ b/static/js/examples/examples.dashboard.js
@@ -0,0 +1,449 @@
+/*
+Name: 			Dashboard - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	/*
+	Sales Selector
+	*/
+	$('#salesSelector').themePluginMultiSelect().on('change', function() {
+		var rel = $(this).val();
+		$('#salesSelectorItems .chart').removeClass('chart-active').addClass('chart-hidden');
+		$('#salesSelectorItems .chart[data-sales-rel="' + rel + '"]').addClass('chart-active').removeClass('chart-hidden');
+	});
+
+	$('#salesSelector').trigger('change');
+
+	$('#salesSelectorWrapper').addClass('ready');
+
+	/*
+	Flot: Sales 1
+	*/
+	if( $('#flotDashSales1').get(0) ) {
+		var flotDashSales1 = $.plot('#flotDashSales1', flotDashSales1Data, {
+			series: {
+				lines: {
+					show: true,
+					lineWidth: 2
+				},
+				points: {
+					show: true
+				},
+				shadowSize: 0
+			},
+			grid: {
+				hoverable: true,
+				clickable: true,
+				borderColor: 'rgba(0,0,0,0.1)',
+				borderWidth: 1,
+				labelMargin: 15,
+				backgroundColor: 'transparent'
+			},
+			yaxis: {
+				min: 0,
+				color: 'rgba(0,0,0,0.1)'
+			},
+			xaxis: {
+				mode: 'categories',
+				color: 'rgba(0,0,0,0)'
+			},
+			legend: {
+				show: false
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: '%x: %y',
+				shifts: {
+					x: -30,
+					y: 25
+				},
+				defaultTheme: false
+			}
+		});
+
+		
+		$(this).on("styleSwitcher.modifyVars", function(ev) {
+			flotDashSales1Data[0].color = ev.options.colorPrimary;
+			flotDashSales1.setData(flotDashSales1Data);
+			flotDashSales1.draw();
+		});
+
+		if (typeof($.browser) != 'undefined') {
+			if($.browser.mobile) {
+				flotDashSales1Data[0].color = '#0088cc';
+				flotDashSales1.setData(flotDashSales1Data);
+				flotDashSales1.draw();
+			}
+		}
+
+		
+	}
+
+	/*
+	Flot: Sales 2
+	*/
+	if( $('#flotDashSales2').get(0) ) {
+		var flotDashSales2 = $.plot('#flotDashSales2', flotDashSales2Data, {
+			series: {
+				lines: {
+					show: true,
+					lineWidth: 2
+				},
+				points: {
+					show: true
+				},
+				shadowSize: 0
+			},
+			grid: {
+				hoverable: true,
+				clickable: true,
+				borderColor: 'rgba(0,0,0,0.1)',
+				borderWidth: 1,
+				labelMargin: 15,
+				backgroundColor: 'transparent'
+			},
+			yaxis: {
+				min: 0,
+				color: 'rgba(0,0,0,0.1)'
+			},
+			xaxis: {
+				mode: 'categories',
+				color: 'rgba(0,0,0,0)'
+			},
+			legend: {
+				show: false
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: '%x: %y',
+				shifts: {
+					x: -30,
+					y: 25
+				},
+				defaultTheme: false
+			}
+		});
+	}
+
+	/*
+	Flot: Sales 3
+	*/
+	if( $('#flotDashSales3').get(0) ) {
+		var flotDashSales3 = $.plot('#flotDashSales3', flotDashSales3Data, {
+			series: {
+				lines: {
+					show: true,
+					lineWidth: 2
+				},
+				points: {
+					show: true
+				},
+				shadowSize: 0
+			},
+			grid: {
+				hoverable: true,
+				clickable: true,
+				borderColor: 'rgba(0,0,0,0.1)',
+				borderWidth: 1,
+				labelMargin: 15,
+				backgroundColor: 'transparent'
+			},
+			yaxis: {
+				min: 0,
+				color: 'rgba(0,0,0,0.1)'
+			},
+			xaxis: {
+				mode: 'categories',
+				color: 'rgba(0,0,0,0)'
+			},
+			legend: {
+				show: false
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: '%x: %y',
+				shifts: {
+					x: -30,
+					y: 25
+				},
+				defaultTheme: false
+			}
+		});
+	}
+
+	/*
+	Liquid Meter
+	*/
+	if( $('#meterSales').get(0) ) {
+		$('#meterSales').liquidMeter({
+			shape: 'circle',
+			color: '#CCCCCC',
+			background: '#F9F9F9',
+			fontSize: '24px',
+			fontWeight: '600',
+			stroke: '#F2F2F2',
+			textColor: '#333',
+			liquidOpacity: 0.9,
+			liquidPalette: ['#333'],
+			speed: 3000,
+			animate: !$.browser.mobile
+		});
+	}
+
+	if( $('#meterSalesSel').get(0) ) {
+		$('#meterSalesSel a').on('click', function( ev ) {
+			ev.preventDefault();
+
+			var val = $(this).data("val"),
+				selector = $(this).parent(),
+				items = selector.find('a');
+
+			items.removeClass('active');
+			$(this).addClass('active');
+
+			// Update Meter Value
+			$('#meterSales').liquidMeter('set', val);
+		});
+
+		
+		$(this).on("styleSwitcher.modifyVars", function(ev) {
+			$('#meterSales').liquidMeter('color', ev.options.colorPrimary);
+		});
+
+		if (typeof($.browser) != 'undefined') {
+			if($.browser.mobile) {
+				$('#meterSales').liquidMeter('color', '#0088cc');
+			}
+		}
+
+		
+	}
+
+	/*
+	Flot: Basic
+	*/
+	if( $('#flotDashBasic').get(0) ) {
+		var flotDashBasic = $.plot('#flotDashBasic', flotDashBasicData, {
+			series: {
+				lines: {
+					show: true,
+					fill: true,
+					lineWidth: 1,
+					fillColor: {
+						colors: [{
+							opacity: 0.45
+						}, {
+							opacity: 0.45
+						}]
+					}
+				},
+				points: {
+					show: true
+				},
+				shadowSize: 0
+			},
+			grid: {
+				hoverable: true,
+				clickable: true,
+				borderColor: 'rgba(0,0,0,0.1)',
+				borderWidth: 1,
+				labelMargin: 15,
+				backgroundColor: 'transparent'
+			},
+			yaxis: {
+				min: 0,
+				max: 200,
+				color: 'rgba(0,0,0,0.1)'
+			},
+			xaxis: {
+				color: 'rgba(0,0,0,0)'
+			},
+			tooltip: true,
+			tooltipOpts: {
+				content: '%s: Value of %x is %y',
+				shifts: {
+					x: -60,
+					y: 25
+				},
+				defaultTheme: false
+			}
+		});
+
+		
+		$(this).on("styleSwitcher.modifyVars", function(ev) {
+			flotDashBasicData[0].color = ev.options.colorPrimary;
+			flotDashBasic.setData(flotDashBasicData);
+			flotDashBasic.draw();
+		});
+
+		if (typeof($.browser) != 'undefined') {
+			if($.browser.mobile) {
+				flotDashBasicData[0].color = '#0088cc';
+				flotDashBasic.setData(flotDashBasicData);
+				flotDashBasic.draw();
+			}
+		}
+
+		
+	}
+
+	/*
+	Flot: Real-Time
+	*/
+	(function() {
+		if( $('#flotDashRealTime').get(0) ) {
+			var data = [],
+				totalPoints = 300;
+
+			function getRandomData() {
+
+				if (data.length > 0)
+					data = data.slice(1);
+
+				// Do a random walk
+				while (data.length < totalPoints) {
+
+					var prev = data.length > 0 ? data[data.length - 1] : 50,
+						y = prev + Math.random() * 10 - 5;
+
+					if (y < 0) {
+						y = 0;
+					} else if (y > 100) {
+						y = 100;
+					}
+
+					data.push(y);
+				}
+
+				// Zip the generated y values with the x values
+				var res = [];
+				for (var i = 0; i < data.length; ++i) {
+					res.push([i, data[i]])
+				}
+
+				return res;
+			}
+
+			var flotDashRealTime = $.plot('#flotDashRealTime', [getRandomData()], {
+				colors: ['#8CC9E8'],
+				series: {
+					lines: {
+						show: true,
+						fill: true,
+						lineWidth: 1,
+						fillColor: {
+							colors: [{
+								opacity: 0.45
+							}, {
+								opacity: 0.45
+							}]
+						}
+					},
+					points: {
+						show: false
+					},
+					shadowSize: 0
+				},
+				grid: {
+					borderColor: 'rgba(0,0,0,0.1)',
+					borderWidth: 1,
+					labelMargin: 15,
+					backgroundColor: 'transparent'
+				},
+				yaxis: {
+					min: 0,
+					max: 100,
+					color: 'rgba(0,0,0,0.1)'
+				},
+				xaxis: {
+					show: false
+				}
+			});
+
+			function update() {
+
+				flotDashRealTime.setData([getRandomData()]);
+
+				// Since the axes don't change, we don't need to call plot.setupGrid()
+				flotDashRealTime.draw();
+				setTimeout(update, ($('html').hasClass( 'mobile-device' ) ? 1000 : 30) );
+			}
+
+			update();
+		}
+	})();
+
+	/*
+	Sparkline: Bar
+	*/
+	if( $('#sparklineBarDash').get(0) ) {
+		var sparklineBarDashOptions = {
+			type: 'bar',
+			width: '80',
+			height: '55',
+			barColor: '#CCCCCC',
+			negBarColor: '#B20000'
+		};
+
+		$("#sparklineBarDash").sparkline(sparklineBarDashData, sparklineBarDashOptions);
+
+		
+		$(this).on("styleSwitcher.modifyVars", function(ev) {
+			$("#sparklineBarDash").sparkline(sparklineBarDashData, $.extend({}, sparklineBarDashOptions, {
+				barColor: ev.options.colorPrimary
+			}));
+		});
+
+		if (typeof($.browser) != 'undefined') {
+			if($.browser.mobile) {
+				$("#sparklineBarDash").sparkline(sparklineBarDashData, $.extend({}, sparklineBarDashOptions, {
+					barColor: '#0088cc'
+				}));
+			}
+		}
+
+		
+	}
+
+	/*
+	Sparkline: Line
+	*/
+	if( $('#sparklineLineDash').get(0) ) {
+		var sparklineLineDashOptions = {
+			type: 'line',
+			width: '80',
+			height: '55',
+			lineColor: '#CCCCCC'
+		};
+
+		$("#sparklineLineDash").sparkline(sparklineLineDashData, sparklineLineDashOptions);
+	}
+
+	/*
+	Map
+	*/
+	if( $('#vectorMapWorld').get(0) ) {
+		var vectorMapDashOptions = {
+			map: 'world_en',
+			backgroundColor: null,
+			color: '#FFF',
+			hoverOpacity: 0.7,
+			selectedColor: '#0088CC',
+			selectedRegions: ['US'],
+			enableZoom: true,
+			borderWidth:1,
+			showTooltip: true,
+			values: sample_data,
+			scaleColors: ['#CCCCCC'],
+			normalizeFunction: 'polynomial'
+		};
+
+		$('#vectorMapWorld').vectorMap(vectorMapDashOptions);
+	}
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.datatables.ajax.js
+++ b/static/js/examples/examples.datatables.ajax.js
@@ -0,0 +1,26 @@
+/*
+Name: 			Tables / Ajax - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var datatableInit = function() {
+
+		var $table = $('#datatable-ajax');
+		$table.dataTable({
+			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
+			bProcessing: true,
+			sAjaxSource: $table.data('url')
+		});
+
+	};
+
+	$(function() {
+		datatableInit();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.datatables.default.js
+++ b/static/js/examples/examples.datatables.default.js
@@ -0,0 +1,23 @@
+/*
+Name: 			Tables / Advanced - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var datatableInit = function() {
+
+		$('#datatable-default').dataTable({
+			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p'
+		});
+
+	};
+
+	$(function() {
+		datatableInit();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.datatables.editable.js
+++ b/static/js/examples/examples.datatables.editable.js
@@ -0,0 +1,255 @@
+/*
+Name: 			Tables / Editable - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var EditableTable = {
+
+		options: {
+			addButton: '#addToTable',
+			table: '#datatable-editable',
+			dialog: {
+				wrapper: '#dialog',
+				cancelButton: '#dialogCancel',
+				confirmButton: '#dialogConfirm',
+			}
+		},
+
+		initialize: function() {
+			this
+				.setVars()
+				.build()
+				.events();
+		},
+
+		setVars: function() {
+			this.$table				= $( this.options.table );
+			this.$addButton			= $( this.options.addButton );
+
+			// dialog
+			this.dialog				= {};
+			this.dialog.$wrapper	= $( this.options.dialog.wrapper );
+			this.dialog.$cancel		= $( this.options.dialog.cancelButton );
+			this.dialog.$confirm	= $( this.options.dialog.confirmButton );
+
+			return this;
+		},
+
+		build: function() {
+			this.datatable = this.$table.DataTable({
+				dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
+				aoColumns: [
+					null,
+					null,
+					null,
+					{ "bSortable": false }
+				]
+			});
+
+			window.dt = this.datatable;
+
+			return this;
+		},
+
+		events: function() {
+			var _self = this;
+
+			this.$table
+				.on('click', 'a.save-row', function( e ) {
+					e.preventDefault();
+
+					_self.rowSave( $(this).closest( 'tr' ) );
+				})
+				.on('click', 'a.cancel-row', function( e ) {
+					e.preventDefault();
+
+					_self.rowCancel( $(this).closest( 'tr' ) );
+				})
+				.on('click', 'a.edit-row', function( e ) {
+					e.preventDefault();
+
+					_self.rowEdit( $(this).closest( 'tr' ) );
+				})
+				.on( 'click', 'a.remove-row', function( e ) {
+					e.preventDefault();
+
+					var $row = $(this).closest( 'tr' ),
+						itemId = $row.attr('data-item-id');
+
+					$.magnificPopup.open({
+						items: {
+							src: _self.options.dialog.wrapper,
+							type: 'inline'
+						},
+						preloader: false,
+						modal: true,
+						callbacks: {
+							change: function() {
+								_self.dialog.$confirm.on( 'click', function( e ) {
+									e.preventDefault();
+
+							        $.ajax({
+							            url: '/',
+							            method: 'GET',
+							            data: {
+							                id: itemId
+							            },
+							            success: function() {
+            								_self.rowRemove( $row );
+							            }
+							        });
+
+									$.magnificPopup.close();
+								});
+							},
+							close: function() {
+								_self.dialog.$confirm.off( 'click' );
+							}
+						}
+					});
+				});
+
+			this.$addButton.on( 'click', function(e) {
+				e.preventDefault();
+
+				_self.rowAdd();
+			});
+
+			this.dialog.$cancel.on( 'click', function( e ) {
+				e.preventDefault();
+				$.magnificPopup.close();
+			});
+
+			return this;
+		},
+
+		// ==========================================================================================
+		// ROW FUNCTIONS
+		// ==========================================================================================
+		rowAdd: function() {
+			this.$addButton.attr({ 'disabled': 'disabled' });
+
+			var actions,
+				data,
+				$row;
+
+			actions = [
+				'<a href="#" class="hidden on-editing save-row"><i class="fas fa-save"></i></a>',
+				'<a href="#" class="hidden on-editing cancel-row"><i class="fas fa-times"></i></a>',
+				'<a href="#" class="on-default edit-row"><i class="fas fa-pencil-alt"></i></a>',
+				'<a href="#" class="on-default remove-row"><i class="far fa-trash-alt"></i></a>'
+			].join(' ');
+
+			data = this.datatable.row.add([ '', '', '', actions ]);
+			$row = this.datatable.row( data[0] ).nodes().to$();
+
+			$row
+				.addClass( 'adding' )
+				.find( 'td:last' )
+				.addClass( 'actions' );
+
+			this.rowEdit( $row );
+
+			this.datatable.order([0,'asc']).draw(); // always show fields
+		},
+
+		rowCancel: function( $row ) {
+			var _self = this,
+				$actions,
+				i,
+				data;
+
+			if ( $row.hasClass('adding') ) {
+				this.rowRemove( $row );
+			} else {
+
+				data = this.datatable.row( $row.get(0) ).data();
+				this.datatable.row( $row.get(0) ).data( data );
+
+				$actions = $row.find('td.actions');
+				if ( $actions.get(0) ) {
+					this.rowSetActionsDefault( $row );
+				}
+
+				this.datatable.draw();
+			}
+		},
+
+		rowEdit: function( $row ) {
+			var _self = this,
+				data;
+
+			data = this.datatable.row( $row.get(0) ).data();
+
+			$row.children( 'td' ).each(function( i ) {
+				var $this = $( this );
+
+				if ( $this.hasClass('actions') ) {
+					_self.rowSetActionsEditing( $row );
+				} else {
+					$this.html( '<input type="text" class="form-control input-block" value="' + data[i] + '"/>' );
+				}
+			});
+		},
+
+		rowSave: function( $row ) {
+			var _self     = this,
+				$actions,
+				values    = [];
+
+			if ( $row.hasClass( 'adding' ) ) {
+				this.$addButton.removeAttr( 'disabled' );
+				$row.removeClass( 'adding' );
+			}
+
+			values = $row.find('td').map(function() {
+				var $this = $(this);
+
+				if ( $this.hasClass('actions') ) {
+					_self.rowSetActionsDefault( $row );
+					return _self.datatable.cell( this ).data();
+				} else {
+					return $.trim( $this.find('input').val() );
+				}
+			});
+
+			this.datatable.row( $row.get(0) ).data( values );
+
+			$actions = $row.find('td.actions');
+			if ( $actions.get(0) ) {
+				this.rowSetActionsDefault( $row );
+			}
+
+			this.datatable.draw();
+		},
+
+		rowRemove: function( $row ) {
+			if ( $row.hasClass('adding') ) {
+				this.$addButton.removeAttr( 'disabled' );
+			}
+
+			this.datatable.row( $row.get(0) ).remove().draw();
+		},
+
+		rowSetActionsEditing: function( $row ) {
+			$row.find( '.on-editing' ).removeClass( 'hidden' );
+			$row.find( '.on-default' ).addClass( 'hidden' );
+		},
+
+		rowSetActionsDefault: function( $row ) {
+			$row.find( '.on-editing' ).addClass( 'hidden' );
+			$row.find( '.on-default' ).removeClass( 'hidden' );
+		}
+
+	};
+
+	$(function() {
+		EditableTable.initialize();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.datatables.row.with.details.js
+++ b/static/js/examples/examples.datatables.row.with.details.js
@@ -0,0 +1,83 @@
+/*
+Name: 			Tables / Advanced - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var datatableInit = function() {
+		var $table = $('#datatable-details');
+
+		// format function for row details
+		var fnFormatDetails = function( datatable, tr ) {
+			var data = datatable.fnGetData( tr );
+
+			return [
+				'<table class="table mb-0">',
+					'<tr class="b-top-0">',
+						'<td><label class="mb-0">Rendering engine:</label></td>',
+						'<td>' + data[1]+ ' ' + data[4] + '</td>',
+					'</tr>',
+					'<tr>',
+						'<td><label class="mb-0">Link to source:</label></td>',
+						'<td>Could provide a link here</td>',
+					'</tr>',
+					'<tr>',
+						'<td><label class="mb-0">Extra info:</label></td>',
+						'<td>And any further details here (images etc)</td>',
+					'</tr>',
+				'</table>'
+			].join('');
+		};
+
+		// insert the expand/collapse column
+		var th = document.createElement( 'th' );
+		var td = document.createElement( 'td' );
+		td.innerHTML = '<i data-toggle class="far fa-plus-square text-primary h5 m-0" style="cursor: pointer;"></i>';
+		td.className = "text-center";
+
+		$table
+			.find( 'thead tr' ).each(function() {
+				this.insertBefore( th, this.childNodes[0] );
+			});
+
+		$table
+			.find( 'tbody tr' ).each(function() {
+				this.insertBefore(  td.cloneNode( true ), this.childNodes[0] );
+			});
+
+		// initialize
+		var datatable = $table.dataTable({
+			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
+			aoColumnDefs: [{
+				bSortable: false,
+				aTargets: [ 0 ]
+			}],
+			aaSorting: [
+				[1, 'asc']
+			]
+		});
+
+		// add a listener
+		$table.on('click', 'i[data-toggle]', function() {
+			var $this = $(this),
+				tr = $(this).closest( 'tr' ).get(0);
+
+			if ( datatable.fnIsOpen(tr) ) {
+				$this.removeClass( 'fa-minus-square' ).addClass( 'fa-plus-square' );
+				datatable.fnClose( tr );
+			} else {
+				$this.removeClass( 'fa-plus-square' ).addClass( 'fa-minus-square' );
+				datatable.fnOpen( tr, fnFormatDetails( datatable, tr), 'details' );
+			}
+		});
+	};
+
+	$(function() {
+		datatableInit();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.datatables.tabletools.js
+++ b/static/js/examples/examples.datatables.tabletools.js
@@ -0,0 +1,30 @@
+/*
+Name: 			Tables / Advanced - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var datatableInit = function() {
+		var $table = $('#datatable-tabletools');
+
+		var table = $table.dataTable({
+			sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
+			buttons: [ 'print', 'excel', 'pdf' ]
+		});
+
+		$('<div />').addClass('dt-buttons mb-2 pb-1 text-right').prependTo('#datatable-tabletools_wrapper');
+
+		$table.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper .dt-buttons' );
+
+		$('#datatable-tabletools_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default');
+	};
+
+	$(function() {
+		datatableInit();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.gmap.js
+++ b/static/js/examples/examples.gmap.js
@@ -0,0 +1,112 @@
+/*
+Name: 			Maps / Basic - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var initBasic = function() {
+		new GMaps({
+			div: '#gmap-basic',
+			lat: -12.043333,
+			lng: -77.028333
+		});
+	};
+
+	var initBasicWithMarkers = function() {
+		var map = new GMaps({
+			div: '#gmap-basic-marker',
+			lat: -12.043333,
+			lng: -77.028333,
+			markers: [{
+				lat: -12.043333,
+				lng: -77.028333,
+				infoWindow: {
+					content: '<p>Basic</p>'
+				}
+			}]
+		});
+
+		map.addMarker({
+			lat: -12.043333,
+			lng: -77.028333,
+			infoWindow: {
+				content: '<p>Example</p>'
+			}
+		});
+	};
+
+	var initStatic = function() {
+		var url = GMaps.staticMapURL({
+			size: [725, 500],
+			lat: -12.043333,
+			lng: -77.028333,
+			scale: 1
+		});
+
+		$('#gmap-static')
+			.css({
+				backgroundImage: 'url(' + url + ')',
+				backgroundSize: 'cover'
+			});
+	};
+
+	var initContextMenu = function() {
+		var map = new GMaps({
+			div: '#gmap-context-menu',
+			lat: -12.043333,
+			lng: -77.028333
+		});
+
+		map.setContextMenu({
+			control: 'map',
+			options: [
+				{
+					title: 'Add marker',
+					name: 'add_marker',
+					action: function(e) {
+						this.addMarker({
+							lat: e.latLng.lat(),
+							lng: e.latLng.lng(),
+							title: 'New marker'
+						});
+					}
+				},
+				{
+					title: 'Center here',
+					name: 'center_here',
+					action: function(e) {
+						this.setCenter(e.latLng.lat(), e.latLng.lng());
+					}
+				}
+			]
+		});
+	};
+
+	var initStreetView = function() {
+		var gmap = GMaps.createPanorama({
+			el: '#gmap-street-view',
+			lat : 48.85844,
+			lng : 2.294514
+		});
+
+		$(window).on( 'sidebar-left-toggle', function() {
+			google.maps.event.trigger( gmap, 'resize' );
+		});
+	};
+
+	// auto initialize
+	$(function() {
+
+		initBasic();
+		initBasicWithMarkers();
+		initStatic();
+		initContextMenu();
+		initStreetView();
+
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.header.menu.js
+++ b/static/js/examples/examples.header.menu.js
@@ -0,0 +1,26 @@
+/*
+Name: 			Layouts / Header Menu - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	// Toggle Mega Sub Menu Expand Button
+	var megaSubMenuToggleButton = function() {
+
+		var $button = $('.mega-sub-nav-toggle');
+
+		$button.on('click', function(){
+			$(this).toggleClass('toggled');
+		});
+
+	};
+
+	$(function() {
+		megaSubMenuToggleButton();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.landing.dashboard.js
+++ b/static/js/examples/examples.landing.dashboard.js
@@ -0,0 +1,23 @@
+/*
+Name: 			Landing Dashboard - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+/*
+* Isotope
+*/
+var $wrapperSampleList = $('.sample-item-list'),
+	$window  = $(window);
+
+$window.on('load', function() {
+	$wrapperSampleList.isotope({
+		itemSelector: ".isotope-item",
+		layoutMode: 'fitRows'
+	});
+});
+
+// Recalculate Isotope items size on Sidebar left Toggle
+$window.on('sidebar-left-toggle', function(){
+	$wrapperSampleList.isotope('layout');
+});
--- a/static/js/examples/examples.lightbox.js
+++ b/static/js/examples/examples.lightbox.js
@@ -0,0 +1,161 @@
+/*
+Name: 			UI Elements / Lightbox - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	/*
+	Single Image
+	*/
+
+	$('.image-popup-vertical-fit').magnificPopup({
+		type: 'image',
+		closeOnContentClick: true,
+		mainClass: 'mfp-img-mobile',
+		image: {
+			verticalFit: true
+		}
+
+	});
+
+	$('.image-popup-no-margins').magnificPopup({
+		type: 'image',
+		closeOnContentClick: true,
+		closeBtnInside: false,
+		fixedContentPos: true,
+		mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
+		image: {
+			verticalFit: true
+		},
+		zoom: {
+			enabled: true,
+			duration: 300 // don't foget to change the duration also in CSS
+		}
+	});
+
+	/*
+	Gallery
+	*/
+	$('.popup-gallery').magnificPopup({
+		delegate: 'a',
+		type: 'image',
+		tLoading: 'Loading image #%curr%...',
+		mainClass: 'mfp-img-mobile',
+		gallery: {
+			enabled: true,
+			navigateByImgClick: true,
+			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
+		},
+		image: {
+			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
+		}
+	});
+
+	/*
+	Zoom Gallery
+	*/
+	$('.zoom-gallery').magnificPopup({
+		delegate: 'a',
+		type: 'image',
+		closeOnContentClick: false,
+		closeBtnInside: false,
+		mainClass: 'mfp-with-zoom mfp-img-mobile',
+		image: {
+			verticalFit: true,
+			titleSrc: function(item) {
+				return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
+			}
+		},
+		gallery: {
+			enabled: true
+		},
+		zoom: {
+			enabled: true,
+			duration: 300, // don't foget to change the duration also in CSS
+			opener: function(element) {
+				return element.find('img');
+			}
+		}
+	});
+
+	/*
+	Popup with video or map
+	*/
+	$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
+		disableOn: 700,
+		type: 'iframe',
+		mainClass: 'mfp-fade',
+		removalDelay: 160,
+		preloader: false,
+
+		fixedContentPos: false
+	});
+
+	/*
+	Dialog with CSS animation
+	*/
+	$('.popup-with-zoom-anim').magnificPopup({
+		type: 'inline',
+
+		fixedContentPos: false,
+		fixedBgPos: true,
+
+		overflowY: 'auto',
+
+		closeBtnInside: true,
+		preloader: false,
+
+		midClick: true,
+		removalDelay: 300,
+		mainClass: 'my-mfp-zoom-in'
+	});
+
+	$('.popup-with-move-anim').magnificPopup({
+		type: 'inline',
+
+		fixedContentPos: false,
+		fixedBgPos: true,
+
+		overflowY: 'auto',
+
+		closeBtnInside: true,
+		preloader: false,
+
+		midClick: true,
+		removalDelay: 300,
+		mainClass: 'my-mfp-slide-bottom'
+	});
+
+	/*
+	Form
+	*/
+	$('.popup-with-form').magnificPopup({
+		type: 'inline',
+		preloader: false,
+		focus: '#name',
+
+		// When elemened is focused, some mobile browsers in some cases zoom in
+		// It looks not nice, so we disable it:
+		callbacks: {
+			beforeOpen: function() {
+				if($(window).width() < 700) {
+					this.st.focus = false;
+				} else {
+					this.st.focus = '#name';
+				}
+			}
+		}
+	});
+
+	/*
+	Ajax
+	*/
+	$('.simple-ajax-popup').magnificPopup({
+		type: 'ajax'
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.loading.overlay.js
+++ b/static/js/examples/examples.loading.overlay.js
@@ -0,0 +1,43 @@
+/*
+Name: 			UI Elements / Loading Overlay - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	$(function() {
+		var $el = $('#LoadingOverlayApi');
+
+		// to show the overlay on previously initialized element
+		// just trigger the following event
+		$('#ApiShowOverlay').click(function() {
+			$el.trigger('loading-overlay:show');
+		});
+
+		// to hide the overlay on previously initialized element
+		// just trigger the following event
+		$('#ApiHideOverlay').click(function() {
+			$el.trigger('loading-overlay:hide');
+		});
+
+		// You can also initialize by yourself, like:
+		//$('.el').loadingOverlay({
+		// ... your options
+		//});
+
+		// available options via data-overlay-options or passing object via javascript initialization
+		//{
+		//	"startShowing": true | false, // defaults to false
+		//	"hideOnWindowLoad": true | false, // defaults to false
+		//	"css": {} // object container css stuff, defaults to match backgroundColor and border-radius
+		//}
+
+		// note: the loader color is black or white based on color contrast,
+		// this is done automatically if you does not supply the html,
+		// otherwise you need to the class dark or light to the loader element
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.loading.progress.js
+++ b/static/js/examples/examples.loading.progress.js
@@ -0,0 +1,48 @@
+/*
+Name: 			UI Elements / Loading Progress - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	// PLUGIN DOCUMENTATION: https://github.com/rstacruz/nprogress
+
+	$(function() {
+		$('#NPStart').on( 'click', function() {
+			NProgress.start();
+		});
+
+		$('#NPStop').on( 'click', function() {
+			NProgress.done();
+		});
+
+		$('#NPInc').on( 'click', function() {
+			NProgress.inc();
+		});
+
+		$('#NPStartStop').on( 'click', function() {
+			NProgress.done(true);
+		});
+
+		$('[data-np-set]').on( 'click', function() {
+			var $this = $(this);
+
+			NProgress.set( $this.data('np-set') / 100 );
+		});
+
+		$('#NPCallbacks').on( 'click', function() {
+			NProgress.set( 0.5, {
+				onInit: function() {
+					alert('initializing');
+				},
+				onFinish: function() {
+					alert('finished');
+				}
+			})
+		});
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.lockscreen.js
+++ b/static/js/examples/examples.lockscreen.js
@@ -0,0 +1,26 @@
+/*
+Name: 			Pages / Locked Screen - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var $document,
+		idleTime;
+
+	$document = $(document);
+
+	$(function() {
+		$.idleTimer( 10000 ); // ms
+
+		$document.on( 'idle.idleTimer', function() {
+			// if you don't want the modal
+			// you can make a redirect here
+			LockScreen.show();
+		});
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.map.builder.js
+++ b/static/js/examples/examples.map.builder.js
@@ -0,0 +1,42 @@
+/*
+Name: 			Maps / Map Builder - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var $window = $(window);
+
+	/* Fix Map size on Mobile */
+	function fixMapListener() {
+
+		fixMapSize();
+
+		$(window).on('load resize orientationchange', function() {
+			fixMapSize();
+		});
+
+	}
+
+	function fixMapSize() {
+		if ( $window.width() <= 767 ) {
+
+			var windowHeight = $(window).height(),
+				offsetTop = $('#gmap').offset().top,
+				contentPadding = parseInt($('.content-body').css('padding-bottom'), 10);
+
+			$('#gmap').height( windowHeight - offsetTop - contentPadding );
+		}
+	}
+
+	// auto initialize
+	$(function() {
+
+		fixMapListener();
+
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.mediagallery.js
+++ b/static/js/examples/examples.mediagallery.js
@@ -0,0 +1,144 @@
+(function($) {
+
+	/*
+	Thumbnail: Select
+	*/
+	$('.mg-option input[type=checkbox]').on('change', function( ev ) {
+		var wrapper = $(this).parents('.thumbnail');
+		if($(this).is(':checked')) {
+			wrapper.addClass('thumbnail-selected');
+		} else {
+			wrapper.removeClass('thumbnail-selected');
+		}
+	});
+
+	$('.mg-option input[type=checkbox]:checked').trigger('change');
+
+	/*
+	Toolbar: Select All
+	*/
+	$('#mgSelectAll').on('click', function( ev ) {
+		ev.preventDefault();
+		var $this = $(this),
+			$label = $this.find('> span');
+			$checks = $('.mg-option input[type=checkbox]');
+
+		if($this.attr('data-all-selected')) {
+			$this.removeAttr('data-all-selected');
+			$checks.prop('checked', false).trigger('change');
+			$label.html($label.data('all-text'));
+		} else {
+			$this.attr('data-all-selected', 'true');
+			$checks.prop('checked', true).trigger('change');
+			$label.html($label.data('none-text'));
+		}
+	});
+
+	/*
+	Image Preview: Lightbox
+	*/
+	$('.thumb-preview > a[href]').magnificPopup({
+		type: 'image',
+		closeOnContentClick: true,
+		mainClass: 'mfp-img-mobile',
+		image: {
+			verticalFit: true
+		}
+	});
+
+	$('.thumb-preview .mg-zoom').on('click.lightbox', function( ev ) {
+		ev.preventDefault();
+		$(this).closest('.thumb-preview').find('a.thumb-image').triggerHandler('click');
+	});
+
+	/*
+	Thumnail: Dropdown Options
+	*/
+	$('.thumbnail .mg-toggle').parent()
+		.on('show.bs.dropdown', function( ev ) {
+			$(this).closest('.mg-thumb-options').css('overflow', 'visible');
+		})
+		.on('hidden.bs.dropdown', function( ev ) {
+			$(this).closest('.mg-thumb-options').css('overflow', '');
+		});
+
+	$('.thumbnail').on('mouseenter', function() {
+		var toggle = $(this).find('.mg-toggle');
+		if ( toggle.parent().hasClass('open') ) {
+			toggle.dropdown('toggle');
+		}
+	});
+
+	/*
+	Isotope: Sort Thumbnails
+	*/
+	$("[data-sort-source]").each(function() {
+
+		var source = $(this);
+		var destination = $("[data-sort-destination][data-sort-id=" + $(this).attr("data-sort-id") + "]");
+
+		if(destination.get(0)) {
+
+			$(window).on('load', function() {
+
+				destination.isotope({
+					itemSelector: ".isotope-item",
+					layoutMode: 'fitRows'
+				});
+
+				$(window).on('sidebar-left-toggle inner-menu-toggle', function() {
+					destination.isotope();
+				});
+
+				source.find("a[data-option-value]").click(function(e) {
+
+					e.preventDefault();
+
+					var $this = $(this),
+						filter = $this.attr("data-option-value");
+
+					source.find(".active").removeClass("active");
+					$this.closest("li").addClass("active");
+
+					destination.isotope({
+						filter: filter
+					});
+
+					if(window.location.hash != "" || filter.replace(".","") != "*") {
+						window.location.hash = filter.replace(".","");
+					}
+
+					return false;
+
+				});
+
+				$(window).bind("hashchange", function(e) {
+
+					var hashFilter = "." + location.hash.replace("#",""),
+						hash = (hashFilter == "." || hashFilter == ".*" ? "*" : hashFilter);
+
+					source.find(".active").removeClass("active");
+					source.find("[data-option-value='" + hash + "']").closest("li").addClass("active");
+
+					destination.isotope({
+						filter: hash
+					});
+
+				});
+
+				var hashFilter = "." + (location.hash.replace("#","") || "*");
+				var initFilterEl = source.find("a[data-option-value='" + hashFilter + "']");
+
+				if(initFilterEl.get(0)) {
+					source.find("[data-option-value='" + hashFilter + "']").click();
+				} else {
+					source.find(".active a").click();
+				}
+
+			});
+
+		}
+
+	});
+
+}(jQuery));
--- a/static/js/examples/examples.modals.js
+++ b/static/js/examples/examples.modals.js
@@ -0,0 +1,118 @@
+/*
+Name: 			UI Elements / Modals - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	/*
+	Basic
+	*/
+	$('.modal-basic').magnificPopup({
+		type: 'inline',
+		preloader: false,
+		modal: true
+	});
+
+	/*
+	Sizes
+	*/
+	$('.modal-sizes').magnificPopup({
+		type: 'inline',
+		preloader: false,
+		modal: true
+	});
+
+	/*
+	Modal with CSS animation
+	*/
+	$('.modal-with-zoom-anim').magnificPopup({
+		type: 'inline',
+
+		fixedContentPos: false,
+		fixedBgPos: true,
+
+		overflowY: 'auto',
+
+		closeBtnInside: true,
+		preloader: false,
+		
+		midClick: true,
+		removalDelay: 300,
+		mainClass: 'my-mfp-zoom-in',
+		modal: true
+	});
+
+	$('.modal-with-move-anim').magnificPopup({
+		type: 'inline',
+
+		fixedContentPos: false,
+		fixedBgPos: true,
+
+		overflowY: 'auto',
+
+		closeBtnInside: true,
+		preloader: false,
+		
+		midClick: true,
+		removalDelay: 300,
+		mainClass: 'my-mfp-slide-bottom',
+		modal: true
+	});
+
+	/*
+	Modal Dismiss
+	*/
+	$(document).on('click', '.modal-dismiss', function (e) {
+		e.preventDefault();
+		$.magnificPopup.close();
+	});
+
+	/*
+	Modal Confirm
+	*/
+	$(document).on('click', '.modal-confirm', function (e) {
+		e.preventDefault();
+		$.magnificPopup.close();
+
+		new PNotify({
+			title: 'Success!',
+			text: 'Modal Confirm Message.',
+			type: 'success'
+		});
+	});
+
+	/*
+	Form
+	*/
+	$('.modal-with-form').magnificPopup({
+		type: 'inline',
+		preloader: false,
+		focus: '#name',
+		modal: true,
+
+		// When elemened is focused, some mobile browsers in some cases zoom in
+		// It looks not nice, so we disable it:
+		callbacks: {
+			beforeOpen: function() {
+				if($(window).width() < 700) {
+					this.st.focus = false;
+				} else {
+					this.st.focus = '#name';
+				}
+			}
+		}
+	});
+
+	/*
+	Ajax
+	*/
+	$('.simple-ajax-modal').magnificPopup({
+		type: 'ajax',
+		modal: true
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.nestable.js
+++ b/static/js/examples/examples.nestable.js
@@ -0,0 +1,39 @@
+/*
+Name: 			UI Elements / Nestable - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+		
+	/*
+	Update Output
+	*/
+	var updateOutput = function (e) {
+		var list = e.length ? e : $(e.target),
+			output = list.data('output');
+
+		if (window.JSON) {
+			output.val(window.JSON.stringify(list.nestable('serialize')));
+		} else {
+			output.val('JSON browser support required for this demo.');
+		}
+	};
+
+	/*
+	Nestable 1
+	*/
+	$('#nestable').nestable({
+		group: 1
+	}).on('change', updateOutput);
+
+	/*
+	Output Initial Serialised Data
+	*/
+	$(function() {
+		updateOutput($('#nestable').data('output', $('#nestable-output')));
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.notifications.js
+++ b/static/js/examples/examples.notifications.js
@@ -0,0 +1,971 @@
+/*
+Name: 			UI Elements / Notifications - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	/*
+	Default Notifications
+	*/
+	$('#default-primary').click(function() {
+		new PNotify({
+			title: 'Regular Notice',
+			text: 'Check me out! I\'m a notice.',
+			type: 'custom',
+			addclass: 'notification-primary',
+			icon: 'fab fa-twitter'
+		});
+	});
+
+	$('#default-notice').click(function() {
+		new PNotify({
+			title: 'Regular Notice',
+			text: 'Check me out! I\'m a notice.'
+		});
+	});
+
+	$('#default-success').click(function() {
+		new PNotify({
+			title: 'Regular Notice',
+			text: 'Check me out! I\'m a notice.',
+			type: 'success'
+		});
+	});
+
+	$('#default-info').click(function() {
+		new PNotify({
+			title: 'Regular Notice',
+			text: 'Check me out! I\'m a notice.',
+			type: 'info'
+		});
+	});
+
+	$('#default-error').click(function() {
+		new PNotify({
+			title: 'Regular Notice',
+			text: 'Check me out! I\'m a notice.',
+			type: 'error'
+		});
+	});
+
+	$('#default-dark').click(function() {
+		new PNotify({
+			title: 'Regular Notice',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'notification-dark',
+			icon: 'fas fa-user'
+		});
+	});
+
+	/*
+	Shadowed Notifications
+	*/
+	$('#shadow-primary').click(function() {
+		new PNotify({
+			title: 'With Shadow',
+			text: 'Check me out! I\'m a notice.',
+			shadow: true,
+			addclass: 'notification-primary',
+			icon: 'fab fa-twitter'
+		});
+	});
+
+	$('#shadow-notice').click(function() {
+		new PNotify({
+			title: 'With Shadow',
+			text: 'Check me out! I\'m a notice.',
+			shadow: true
+		});
+	});
+
+	$('#shadow-success').click(function() {
+		new PNotify({
+			title: 'With Shadow',
+			text: 'Check me out! I\'m a notice.',
+			type: 'success',
+			shadow: true
+		});
+	});
+
+	$('#shadow-info').click(function() {
+		new PNotify({
+			title: 'With Shadow',
+			text: 'Check me out! I\'m a notice.',
+			type: 'info',
+			shadow: true
+		});
+	});
+
+	$('#shadow-error').click(function() {
+		new PNotify({
+			title: 'With Shadow',
+			text: 'Check me out! I\'m a notice.',
+			type: 'error',
+			shadow: true
+		});
+	});
+
+	$('#shadow-dark').click(function() {
+		new PNotify({
+			title: 'With Shadow',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'notification-dark',
+			icon: 'fas fa-user',
+			shadow: true
+		});
+	});
+
+	/*
+	No Icon Notification
+	*/
+	$('#no-icon-primary').click(function() {
+		new PNotify({
+			title: 'Without Icon',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'ui-pnotify-no-icon notification-primary',
+			icon: false
+		});
+	});
+
+	$('#no-icon-notice').click(function() {
+		new PNotify({
+			title: 'Without Icon',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'ui-pnotify-no-icon',
+			icon: false
+		});
+	});
+
+	$('#no-icon-success').click(function() {
+		new PNotify({
+			title: 'Without Icon',
+			text: 'Check me out! I\'m a notice.',
+			type: 'success',
+			addclass: 'ui-pnotify-no-icon',
+			icon: false
+		});
+	});
+
+	$('#no-icon-info').click(function() {
+		new PNotify({
+			title: 'Without Icon',
+			text: 'Check me out! I\'m a notice.',
+			type: 'info',
+			addclass: 'ui-pnotify-no-icon',
+			icon: false
+		});
+	});
+
+	$('#no-icon-error').click(function() {
+		new PNotify({
+			title: 'Without Icon',
+			text: 'Check me out! I\'m a notice.',
+			type: 'error',
+			addclass: 'ui-pnotify-no-icon',
+			icon: false
+		});
+	});
+
+	$('#no-icon-dark').click(function() {
+		new PNotify({
+			title: 'Without Icon',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'ui-pnotify-no-icon notification-dark',
+			icon: false
+		});
+	});
+
+	/*
+	No Border Radius Notification
+	*/
+	$('#no-radious-primary').click(function() {
+		new PNotify({
+			title: 'border-radius: 0;',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'notification-primary',
+			cornerclass: 'ui-pnotify-sharp',
+			icon: 'fab fa-twitter'
+		});
+	});
+
+	$('#no-radious-notice').click(function() {
+		new PNotify({
+			title: 'border-radius: 0;',
+			text: 'Check me out! I\'m a notice.',
+			cornerclass: 'ui-pnotify-sharp'
+		});
+	});
+
+	$('#no-radious-success').click(function() {
+		new PNotify({
+			title: 'border-radius: 0;',
+			text: 'Check me out! I\'m a notice.',
+			type: 'success',
+			cornerclass: 'ui-pnotify-sharp'
+		});
+	});
+
+	$('#no-radious-info').click(function() {
+		new PNotify({
+			title: 'border-radius: 0;',
+			text: 'Check me out! I\'m a notice.',
+			type: 'info',
+			cornerclass: 'ui-pnotify-sharp'
+		});
+	});
+
+	$('#no-radious-error').click(function() {
+		new PNotify({
+			title: 'border-radius: 0;',
+			text: 'Check me out! I\'m a notice.',
+			type: 'error',
+			cornerclass: 'ui-pnotify-sharp'
+		});
+	});
+
+	$('#no-radious-dark').click(function() {
+		new PNotify({
+			title: 'border-radius: 0;',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'notification-dark',
+			icon: 'fas fa-user',
+			cornerclass: 'ui-pnotify-sharp'
+		});
+	});
+
+	/*
+	Custom Icon Notification
+	*/
+	$('#custom-icon-primary').click(function() {
+		new PNotify({
+			title: 'Custom Icon',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'notification-primary',
+			icon: 'fas fa-home'
+		});
+	});
+
+	$('#custom-icon-notice').click(function() {
+		new PNotify({
+			title: 'Custom Icon',
+			text: 'Check me out! I\'m a notice.',
+			icon: 'fas fa-home'
+		});
+	});
+
+	$('#custom-icon-success').click(function() {
+		new PNotify({
+			title: 'Custom Icon',
+			text: 'Check me out! I\'m a notice.',
+			type: 'success',
+			icon: 'fas fa-home'
+		});
+	});
+
+	$('#custom-icon-info').click(function() {
+		new PNotify({
+			title: 'Custom Icon',
+			text: 'Check me out! I\'m a notice.',
+			type: 'info',
+			icon: 'fas fa-home'
+		});
+	});
+
+	$('#custom-icon-error').click(function() {
+		new PNotify({
+			title: 'Custom Icon',
+			text: 'Check me out! I\'m a notice.',
+			type: 'error',
+			icon: 'fas fa-home'
+		});
+	});
+
+	$('#custom-icon-dark').click(function() {
+		new PNotify({
+			title: 'Custom Icon',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'notification-dark',
+			icon: 'fas fa-home'
+		});
+	});
+
+	/*
+	Icon without border notification
+	*/
+	$('#icon-without-border-primary').click(function() {
+		new PNotify({
+			title: 'Icon Without Border',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'notification-primary icon-nb',
+			icon: 'fab fa-twitter'
+		});
+	});
+
+	$('#icon-without-border-notice').click(function() {
+		new PNotify({
+			title: 'Icon Without Border',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'icon-nb'
+		});
+	});
+
+	$('#icon-without-border-success').click(function() {
+		new PNotify({
+			title: 'Icon Without Border',
+			text: 'Check me out! I\'m a notice.',
+			type: 'success',
+			addclass: 'icon-nb'
+		});
+	});
+
+	$('#icon-without-border-info').click(function() {
+		new PNotify({
+			title: 'Icon Without Border',
+			text: 'Check me out! I\'m a notice.',
+			type: 'info',
+			addclass: 'icon-nb'
+		});
+	});
+
+	$('#icon-without-border-error').click(function() {
+		new PNotify({
+			title: 'Icon Without Border',
+			text: 'Check me out! I\'m a notice.',
+			type: 'error',
+			addclass: 'icon-nb'
+		});
+	});
+
+	$('#icon-without-border-dark').click(function() {
+		new PNotify({
+			title: 'Icon Without Border',
+			text: 'Check me out! I\'m a notice.',
+			addclass: 'notification-dark icon-nb',
+			icon: 'fas fa-user'
+		});
+	});
+
+	/*
+	Non-blocking notifications
+	*/
+	$('#non-blocking-primary').click(function() {
+		new PNotify({
+			title: 'Non-Blocking',
+			text: 'I\'m a special kind of notice called "non-blocking". When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.',
+			addclass: 'notification-primary',
+			icon: 'fab fa-twitter',
+			nonblock: {
+				nonblock: true,
+				nonblock_opacity: .2
+		   }
+		});
+	});
+
+	$('#non-blocking-notice').click(function() {
+		new PNotify({
+			title: 'Non-Blocking',
+			text: 'I\'m a special kind of notice called "non-blocking". When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.',
+			nonblock: {
+				nonblock: true,
+				nonblock_opacity: .2
+			}
+		});
+	});
+
+	$('#non-blocking-success').click(function() {
+		new PNotify({
+			title: 'Non-Blocking',
+			text: 'I\'m a special kind of notice called "non-blocking". When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.',
+			type: 'success',
+			nonblock: {
+				nonblock: true,
+				nonblock_opacity: .2
+			}
+		});
+	});
+
+	$('#non-blocking-info').click(function() {
+		new PNotify({
+			title: 'Non-Blocking',
+			text: 'I\'m a special kind of notice called "non-blocking". When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.',
+			type: 'info',
+			nonblock: {
+				nonblock: true,
+				nonblock_opacity: .2
+			}
+		});
+	});
+
+	$('#non-blocking-error').click(function() {
+		new PNotify({
+			title: 'Non-Blocking',
+			text: 'I\'m a special kind of notice called "non-blocking". When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.',
+			type: 'error',
+			nonblock: {
+				nonblock: true,
+				nonblock_opacity: .2
+			}
+		});
+	});
+
+	$('#non-blocking-dark').click(function() {
+		new PNotify({
+			title: 'Non-Blocking',
+			text: 'I\'m a special kind of notice called "non-blocking". When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.',
+			addclass: 'notification-dark',
+			icon: 'fas fa-user',
+			nonblock: {
+				nonblock: true,
+				nonblock_opacity: .2
+			}
+		});
+	});
+
+	/*
+	Sticky notifications
+	*/
+	$('#sticky-primary').click(function() {
+		new PNotify({
+			title: 'Sticky',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
+			addclass: 'notification-primary',
+			icon: 'fab fa-twitter',
+			hide: false,
+			buttons: {
+				sticker: false
+			}
+		});
+	});
+
+	$('#sticky-notice').click(function() {
+		new PNotify({
+			title: 'Sticky',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
+			hide: false,
+			buttons: {
+				sticker: false
+			}
+		});
+	});
+
+	$('#sticky-success').click(function() {
+		new PNotify({
+			title: 'Sticky',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
+			type: 'success',
+			hide: false,
+			buttons: {
+				sticker: false
+			}
+		});
+	});
+
+	$('#sticky-info').click(function() {
+		new PNotify({
+			title: 'Sticky',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
+			type: 'info',
+			hide: false,
+			buttons: {
+				sticker: false
+			}
+		});
+	});
+
+	$('#sticky-error').click(function() {
+		new PNotify({
+			title: 'Sticky',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
+			type: 'error',
+			hide: false,
+			buttons: {
+				sticker: false
+			}
+		});
+	});
+
+	$('#sticky-dark').click(function() {
+		new PNotify({
+			title: 'Sticky',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
+			addclass: 'notification-dark',
+			icon: 'fas fa-user',
+			hide: false,
+			buttons: {
+				sticker: false
+			}
+		});
+	});
+
+	/*
+	Click to close notifications
+	*/
+	$('#click-to-close-primary').click(function() {
+		var notice = new PNotify({
+			title: 'Click to Close',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
+			addclass: 'notification-primary click-2-close',
+			icon: 'fab fa-twitter',
+			hide: false,
+			buttons: {
+				closer: false,
+				sticker: false
+			}
+		});
+
+		notice.get().click(function() {
+			notice.remove();
+		});
+	});
+
+	$('#click-to-close-notice').click(function() {
+		var notice = new PNotify({
+			title: 'Click to Close',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
+			addclass: 'click-2-close',
+			hide: false,
+			buttons: {
+				closer: false,
+				sticker: false
+			}
+		});
+
+		notice.get().click(function() {
+			notice.remove();
+		});
+	});
+
+	$('#click-to-close-success').click(function() {
+		var notice = new PNotify({
+			title: 'Click to Close',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
+			type: 'success',
+			addclass: 'click-2-close',
+			hide: false,
+			buttons: {
+				closer: false,
+				sticker: false
+			}
+		});
+
+		notice.get().click(function() {
+			notice.remove();
+		});
+	});
+
+	$('#click-to-close-info').click(function() {
+		var notice = new PNotify({
+			title: 'Click to Close',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
+			type: 'info',
+			addclass: 'click-2-close',
+			hide: false,
+			buttons: {
+				closer: false,
+				sticker: false
+			}
+		});
+
+		notice.get().click(function() {
+			notice.remove();
+		});
+	});
+
+	$('#click-to-close-error').click(function() {
+		var notice = new PNotify({
+			title: 'Click to Close',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
+			type: 'error',
+			addclass: 'click-2-close',
+			hide: false,
+			buttons: {
+				closer: false,
+				sticker: false
+			}
+		});
+
+		notice.get().click(function() {
+			notice.remove();
+		});
+	});
+
+	$('#click-to-close-dark').click(function() {
+		var notice = new PNotify({
+			title: 'Click to Close',
+			text: 'Check me out! I\'m a sticky notice. You\'ll have to click me to close.',
+			addclass: 'notification-dark click-2-close',
+			icon: 'fas fa-user',
+			hide: false,
+			buttons: {
+				closer: false,
+				sticker: false
+			}
+		});
+
+		notice.get().click(function() {
+			notice.remove();
+		});
+	});
+
+	/*
+	Positions
+	*/
+	var stack_topleft = {"dir1": "down", "dir2": "right", "push": "top"};
+	var stack_bottomleft = {"dir1": "right", "dir2": "up", "push": "top"};
+	var stack_bottomright = {"dir1": "up", "dir2": "left", "firstpos1": 15, "firstpos2": 15};
+	var stack_bar_top = {"dir1": "down", "dir2": "right", "push": "top", "spacing1": 0, "spacing2": 0};
+	var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
+
+	$('#position-1-primary').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-primary stack-topleft',
+			icon: 'fab fa-twitter'
+		});
+	});
+
+	$('#position-1-notice').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'stack-topleft'
+		});
+	});
+
+	$('#position-1-success').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'success',
+			addclass: 'stack-topleft'
+		});
+	});
+
+	$('#position-1-info').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'info',
+			addclass: 'stack-topleft'
+		});
+	});
+
+	$('#position-1-error').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'error',
+			addclass: 'stack-topleft'
+		});
+	});
+
+	$('#position-1-dark').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-dark stack-topleft',
+			icon: 'fas fa-user'
+		});
+	});
+
+	$('#position-2-primary').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-primary stack-bottomleft',
+			icon: 'fab fa-twitter',
+			stack: stack_bottomleft
+		});
+	});
+
+	$('#position-2-notice').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'stack-bottomleft',
+			stack: stack_bottomleft
+		});
+	});
+
+	$('#position-2-success').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'success',
+			addclass: 'stack-bottomleft',
+			stack: stack_bottomleft
+		});
+	});
+
+	$('#position-2-info').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'info',
+			addclass: 'stack-bottomleft',
+			stack: stack_bottomleft
+		});
+	});
+
+	$('#position-2-error').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'error',
+			addclass: 'stack-bottomleft',
+			stack: stack_bottomleft
+		});
+	});
+
+	$('#position-2-dark').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-dark stack-bottomleft',
+			icon: 'fas fa-user',
+			stack: stack_bottomleft
+		});
+	});
+
+	$('#position-3-primary').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-primary stack-bottomright',
+			icon: 'fab fa-twitter',
+			stack: stack_bottomright
+		});
+	});
+
+	$('#position-3-notice').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'stack-bottomright',
+			stack: stack_bottomright
+		});
+	});
+
+	$('#position-3-success').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'success',
+			addclass: 'stack-bottomright',
+			stack: stack_bottomright
+		});
+	});
+
+	$('#position-3-info').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'info',
+			addclass: 'stack-bottomright',
+			stack: stack_bottomright
+		});
+	});
+
+	$('#position-3-error').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'error',
+			addclass: 'stack-bottomright',
+			stack: stack_bottomright
+		});
+	});
+
+	$('#position-3-dark').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-dark stack-bottomright',
+			icon: 'fas fa-user',
+			stack: stack_bottomright
+		});
+	});
+
+	$('#position-4-primary').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-primary stack-bar-top',
+			icon: 'fab fa-twitter',
+			stack: stack_bar_top,
+			width: "100%"
+		});
+	});
+
+	$('#position-4-notice').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'stack-bar-top',
+			stack: stack_bar_top,
+			width: "100%"
+		});
+	});
+
+	$('#position-4-success').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'success',
+			addclass: 'stack-bar-top',
+			stack: stack_bar_top,
+			width: "100%"
+		});
+	});
+
+	$('#position-4-info').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'info',
+			addclass: 'stack-bar-top',
+			stack: stack_bar_top,
+			width: "100%"
+		});
+	});
+
+	$('#position-4-error').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'error',
+			addclass: 'stack-bar-top',
+			stack: stack_bar_top,
+			width: "100%"
+		});
+	});
+
+	$('#position-4-dark').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-dark stack-bar-top',
+			icon: 'fas fa-user',
+			stack: stack_bar_top,
+			width: "100%"
+		});
+	});
+
+	$('#position-5-primary').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-primary stack-bar-bottom',
+			icon: 'fab fa-twitter',
+			stack: stack_bar_bottom,
+			width: "70%"
+		});
+	});
+
+	$('#position-5-notice').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'stack-bar-bottom',
+			stack: stack_bar_bottom,
+			width: "70%"
+		});
+	});
+
+	$('#position-5-success').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'success',
+			addclass: 'stack-bar-bottom',
+			stack: stack_bar_bottom,
+			width: "70%"
+		});
+	});
+
+	$('#position-5-info').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'info',
+			addclass: 'stack-bar-bottom',
+			stack: stack_bar_bottom,
+			width: "70%"
+		});
+	});
+
+	$('#position-5-error').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			type: 'error',
+			addclass: 'stack-bar-bottom',
+			stack: stack_bar_bottom,
+			width: "70%"
+		});
+	});
+
+	$('#position-5-dark').click(function() {
+		var notice = new PNotify({
+			title: 'Notification',
+			text: 'Some notification text.',
+			addclass: 'notification-dark stack-bar-bottom',
+			icon: 'fas fa-user',
+			stack: stack_bar_bottom,
+			width: "70%"
+		});
+	});
+
+	/*
+	Desktop Notifications Code
+	*/
+	$.each(['notice', 'error', 'info', 'success'], function( i, type ) {
+		$( '#desktop-' + type ).click(function() {
+			PNotify.desktop.permission();
+			(new PNotify({
+				title: 'Desktop ' + type.charAt(0).toUpperCase() + type.slice(1),
+				text: 'If you\'ve given me permission, I\'ll appear as a desktop notification. If you haven\'t, I\'ll still appear as a regular notice.',
+				type: type,
+				desktop: {
+					desktop: true
+				}
+			})).get().click(function() {
+				alert('Hey! You clicked the desktop notification!');
+			});
+		});
+	});
+
+	$('#desktop-sticky').click(function() {
+		PNotify.desktop.permission();
+		(new PNotify({
+			title: 'Sticky Desktop Notice',
+			text: 'I\'m a sticky notice, so you\'ll have to close me yourself. (Some systems don\'t allow sticky notifications.) If you\'ve given me permission, I\'ll appear as a desktop notification. If you haven\'t, I\'ll still appear as a regular notice.',
+			hide: false,
+			desktop: {
+				desktop: true
+			}
+		})).get().click(function() {
+			alert('Hey! You clicked the desktop notification!');
+		});
+	});
+
+	$('#desktop-custom').click(function() {
+		PNotify.desktop.permission();
+		(new PNotify({
+			title: 'Desktop Custom Icon',
+			text: 'If you\'ve given me permission, I\'ll appear as a desktop notification. If you haven\'t, I\'ll still appear as a regular notice.',
+			desktop: {
+				desktop: true,
+				icon: 'img/!happy-face.png'
+			}
+		})).get().click(function() {
+			alert('Hey! You clicked the desktop notification!');
+		});
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.portlets.js
+++ b/static/js/examples/examples.portlets.js
@@ -0,0 +1,31 @@
+/*
+Name: 			UI Elements / Portlets - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	/*
+	Refresh page
+	*/
+	$('#portletRefresh').on('click', function(ev) {
+		ev.preventDefault();
+		window.location.reload();
+	});
+
+	/*
+	Restore to default
+	*/
+	$('#portletReset').on('click', function(ev) {
+		ev.preventDefault();
+		store.remove('__portletOrder');
+		store.remove('__portletState');
+		window.location.reload();
+	});
+
+
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.session.timeout.js
+++ b/static/js/examples/examples.session.timeout.js
@@ -0,0 +1,106 @@
+/*
+Name: 			Pages / Session Timeout - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var SessionTimeout = {
+
+		options: {
+			keepAliveUrl: '',
+			alertOn: 15000, // ms
+			timeoutOn: 20000 // ms
+		},
+
+		alertTimer: null,
+		timeoutTimer: null,
+
+		initialize: function() {
+			this
+				.start()
+				.setup();
+		},
+
+		start: function() {
+			var _self = this;
+
+			this.alertTimer = setTimeout(function() {
+				_self.onAlert();
+			}, this.options.alertOn );
+
+			this.timeoutTimer = setTimeout(function() {
+				_self.onTimeout();
+			}, this.options.timeoutOn );
+
+			return this;
+		},
+
+		// bind success callback for all ajax requests
+		setup: function() {
+			var _self = this;
+
+			// if server returns successfuly,
+			// then the session is renewed.
+			// thats why we reset here the counter
+			$( document ).ajaxSuccess(function() {
+				_self.reset();
+			});
+
+			return this;
+		},
+
+		reset: function() {
+			clearTimeout(this.alertTimer);
+			clearTimeout(this.timeoutTimer);
+			this.start();
+
+			return this;
+		},
+
+		keepAlive: function() {
+			// we don't have session on demo,
+			// so the code above prevent a request to be made
+			// in your project, please remove the next 3 lines of code
+			if ( !this.options.keepAliveUrl ) {
+				this.reset();
+				return;
+			}
+
+			var _self = this;
+
+			$.post( this.options.keepAliveUrl, function( data ) {
+				_self.reset();
+			});
+		},
+
+		// ------------------------------------------------------------------------
+		// CUSTOMIZE HERE
+		// ------------------------------------------------------------------------
+		onAlert: function() {
+			// if you want to show some warning
+			// TODO: remove this confirm (it breaks the logic and it's ugly)
+			var renew = confirm( 'Your session is about to expire, do you want to renew?' );
+
+			if ( renew ) {
+				this.keepAlive();
+			}
+
+			// if you want session to not expire
+			// this.keepAlive();
+		},
+
+		onTimeout: function() {
+			self.location.href = 'pages-signin.html';
+		}
+
+	};
+
+	$(function() {
+		SessionTimeout.initialize();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.timeline.js
+++ b/static/js/examples/examples.timeline.js
@@ -0,0 +1,57 @@
+/*
+Name: 			Pages / Timeline - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var initLightbox = function() {
+		$('.timeline .thumbnail-gallery').magnificPopup({
+			delegate: 'a',
+			type: 'image',
+			tLoading: 'Loading image #%curr%...',
+			mainClass: 'mfp-img-mobile',
+			gallery: {
+				enabled: true,
+				navigateByImgClick: true,
+				preload: [0,1] // Will preload 0 - before current, and 1 after the current image
+			},
+			image: {
+				tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
+			}
+		});
+	};
+
+	var initGoogleMaps = function() {
+		var map = new GMaps({
+			div: '#gmap-checkin-example',
+			lat: 40.7533405,
+			lng: -73.982253,
+			markers: [{
+				lat: 40.7533405,
+				lng: -73.982253,
+				infoWindow: {
+					content: '<p>New York Public Library</p>'
+				}
+			}],
+			scrollwheel: false
+		});
+
+		map.addMarker({
+			lat: 40.7533405,
+			lng: -73.982253,
+			infoWindow: {
+				content: '<p>New York Public Library</p>'
+			}
+		});
+	};
+
+	$(function() {
+		initLightbox();
+		initGoogleMaps();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.treeview.js
+++ b/static/js/examples/examples.treeview.js
@@ -0,0 +1,130 @@
+/*
+Name: 			UI Elements / Tree View - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	/*
+	Basic
+	*/
+	$('#treeBasic').jstree({
+		'core' : {
+			'themes' : {
+				'responsive': false
+			}
+		},
+		'types' : {
+			'default' : {
+				'icon' : 'fas fa-folder'
+			},
+			'file' : {
+				'icon' : 'fas fa-file'
+			}
+		},
+		'plugins': ['types']
+	});
+
+	/*
+	Checkbox
+	*/
+	$('#treeCheckbox').jstree({
+		'core' : {
+			'themes' : {
+				'responsive': false
+			}
+		},
+		'types' : {
+			'default' : {
+				'icon' : 'fas fa-folder'
+			},
+			'file' : {
+				'icon' : 'fas fa-file'
+			}
+		},
+		'plugins': ['types', 'checkbox']
+	});
+
+	/*
+	Ajax HTML
+	*/
+	$('#treeAjaxHTML').jstree({
+		'core' : {
+			'themes' : {
+				'responsive': false
+			}, 
+			'check_callback' : true,
+			'data' : {
+				'url' : function (node) {
+				  return 'ajax/ajax-treeview-nodes.html';
+				},
+				'data' : function (node) {
+				  return { 'parent' : node.id };
+				}
+			}
+		},
+		'types' : {
+			'default' : {
+				'icon' : 'fas fa-folder'
+			},
+			'file' : {
+				'icon' : 'fas fa-file'
+			}
+		},
+		'plugins': ['types']
+	});
+
+	/*
+	Ajax JSON
+	*/
+	$('#treeAjaxJSON').jstree({
+		'core' : {
+			'themes' : {
+				'responsive': false
+			}, 
+			'check_callback' : true,
+			'data' : {
+				'url' : function (node) {
+					return node.id === '#' ? 'ajax/ajax-treeview-roots.json' : 'ajax/ajax-treeview-children.json';
+				},
+				'data' : function (node) {
+					return { 'id' : node.id };
+				}
+			}
+		},
+		'types' : {
+			'default' : {
+				'icon' : 'fas fa-folder'
+			},
+			'file' : {
+				'icon' : 'fas fa-file'
+			}
+		},
+		'plugins': ['types']
+	});
+
+	/*
+	Drag & Drop
+	*/
+	$('#treeDragDrop').jstree({
+		'core' : {
+			'check_callback' : true,
+			'themes' : {
+				'responsive': false
+			}
+		},
+		'types' : {
+			'default' : {
+				'icon' : 'fas fa-folder'
+			},
+			'file' : {
+				'icon' : 'fas fa-file'
+			}
+		},
+		'plugins': ['types', 'dnd']
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.validation.js
+++ b/static/js/examples/examples.validation.js
@@ -0,0 +1,55 @@
+(function() {
+
+	'use strict';
+
+	// basic
+	$("#form").validate({
+		highlight: function( label ) {
+			$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
+		},
+		success: function( label ) {
+			$(label).closest('.form-group').removeClass('has-error');
+			label.remove();
+		},
+		errorPlacement: function( error, element ) {
+			var placement = element.closest('.input-group');
+			if (!placement.get(0)) {
+				placement = element;
+			}
+			if (error.text() !== '') {
+				placement.after(error);
+			}
+		}
+	});
+
+	// validation summary
+	var $summaryForm = $("#summary-form");
+	$summaryForm.validate({
+		errorContainer: $summaryForm.find( 'div.validation-message' ),
+		errorLabelContainer: $summaryForm.find( 'div.validation-message ul' ),
+		wrapper: "li"
+	});
+
+	// checkbox, radio and selects
+	$("#chk-radios-form, #selects-form").each(function() {
+		$(this).validate({
+			highlight: function(element) {
+				$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
+			},
+			success: function(element) {
+				$(element).closest('.form-group').removeClass('has-error');
+			},
+			errorPlacement: function( error, element ) {
+				var placement = $(element).parent();
+				
+				placement.append(error);
+			}
+		});
+	});
+
+	// Select 2 Fields
+	$('select[data-plugin-selectTwo]').on('change', function() {
+	    $(this).valid();
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.vector.maps.js
+++ b/static/js/examples/examples.vector.maps.js
@@ -0,0 +1,35 @@
+/*
+Name: 			Maps / Vector - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	var initMap = function( $el, options ) {
+		var defaults = {
+			backgroundColor: null,
+			color: '#FFFFFF',
+			hoverOpacity: 0.7,
+			selectedColor: '#005599',
+			enableZoom: true,
+			borderWidth:1,
+			showTooltip: true,
+			values: sample_data,
+			scaleColors: ['#1AA2E6', '#0088CC'],
+			normalizeFunction: 'polynomial'
+		};
+
+		$el.vectorMap( $.extend( defaults, options ) );
+	};
+
+	$(function() {
+		$( '[data-vector-map]' ).each(function() {
+			var $this = $(this);
+			initMap( $this, ($this.data( 'plugin-options' ) || {}) )
+		});
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.widgets.js
+++ b/static/js/examples/examples.widgets.js
@@ -0,0 +1,94 @@
+/*
+Name: 			UI Elements / Widgets - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	$(function() {
+
+		/*
+		Flot
+		*/
+		if( $('#flotWidgetsSales1').get(0) ){
+			var plot = $.plot('#flotWidgetsSales1', flotWidgetsSales1Data, {
+				series: {
+					lines: {
+						show: true,
+						lineWidth: 2
+					},
+					points: {
+						show: true
+					},
+					shadowSize: 0
+				},
+				grid: {
+					hoverable: true,
+					clickable: true,
+					borderColor: 'transparent',
+					borderWidth: 1,
+					labelMargin: 15,
+					backgroundColor: 'transparent'
+				},
+				yaxis: {
+					min: 0,
+					color: 'transparent'
+				},
+				xaxis: {
+					mode: 'categories',
+					color: 'transparent'
+				},
+				legend: {
+					show: false
+				},
+				tooltip: true,
+				tooltipOpts: {
+					content: '%x: %y',
+					shifts: {
+						x: -30,
+						y: 25
+					},
+					defaultTheme: false
+				}
+			});
+		}
+
+		/*
+		Morris
+		*/
+		if( $('#morrisLine').get(0) ){
+			Morris.Line({
+				resize: true,
+				element: 'morrisLine',
+				data: morrisLineData,
+				grid: false,
+				xkey: 'y',
+				ykeys: ['a'],
+				labels: ['Series A'],
+				hideHover: 'always',
+				lineColors: ['#FFF'],
+				gridTextColor: 'rgba(255,255,255,0.4)'
+			});
+		}
+
+		/*
+		Sparkline: Bar
+		*/
+		if( $('#sparklineBar').get(0) ){
+			$("#sparklineBar").sparkline(sparklineBarData, {
+				type: 'bar',
+				width: '80',
+				height: '50',
+				barColor: '#0088cc',
+				negBarColor: '#B20000'
+			});
+		}
+
+		$('.circular-bar-chart').appear();
+
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/examples/examples.wizard.js
+++ b/static/js/examples/examples.wizard.js
@@ -0,0 +1,333 @@
+/*
+Name: 			Forms / Wizard - Examples
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version: 	2.1.1
+*/
+
+(function($) {
+
+	'use strict';
+
+	/*
+	Wizard #1
+	*/
+	var $w1finish = $('#w1').find('ul.pager li.finish'),
+		$w1validator = $("#w1 form").validate({
+		highlight: function(element) {
+			$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
+		},
+		success: function(element) {
+			$(element).closest('.form-group').removeClass('has-error');
+			$(element).remove();
+		},
+		errorPlacement: function( error, element ) {
+			element.parent().append( error );
+		}
+	});
+
+	$w1finish.on('click', function( ev ) {
+		ev.preventDefault();
+		var validated = $('#w1 form').valid();
+		if ( validated ) {
+			new PNotify({
+				title: 'Congratulations',
+				text: 'You completed the wizard form.',
+				type: 'custom',
+				addclass: 'notification-success',
+				icon: 'fas fa-check'
+			});
+		}
+	});
+
+	$('#w1').bootstrapWizard({
+		tabClass: 'wizard-steps',
+		nextSelector: 'ul.pager li.next',
+		previousSelector: 'ul.pager li.previous',
+		firstSelector: null,
+		lastSelector: null,
+		onNext: function( tab, navigation, index, newindex ) {
+			var validated = $('#w1 form').valid();
+			if( !validated ) {
+				$w1validator.focusInvalid();
+				return false;
+			}
+		},
+		onTabClick: function( tab, navigation, index, newindex ) {
+			if ( newindex == index + 1 ) {
+				return this.onNext( tab, navigation, index, newindex);
+			} else if ( newindex > index + 1 ) {
+				return false;
+			} else {
+				return true;
+			}
+		},
+		onTabChange: function( tab, navigation, index, newindex ) {
+			var totalTabs = navigation.find('li').length - 1;
+			$w1finish[ newindex != totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
+			$('#w1').find(this.nextSelector)[ newindex == totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
+			tab.removeClass('active');
+		}
+	});
+
+	/*
+	Wizard #2
+	*/
+	var $w2finish = $('#w2').find('ul.pager li.finish'),
+		$w2validator = $("#w2 form").validate({
+		highlight: function(element) {
+			$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
+		},
+		success: function(element) {
+			$(element).closest('.form-group').removeClass('has-error');
+			$(element).remove();
+		},
+		errorPlacement: function( error, element ) {
+			element.parent().append( error );
+		}
+	});
+
+	$w2finish.on('click', function( ev ) {
+		ev.preventDefault();
+		var validated = $('#w2 form').valid();
+		if ( validated ) {
+			new PNotify({
+				title: 'Congratulations',
+				text: 'You completed the wizard form.',
+				type: 'custom',
+				addclass: 'notification-success',
+				icon: 'fas fa-check'
+			});
+		}
+	});
+
+	$('#w2').bootstrapWizard({
+		tabClass: 'wizard-steps',
+		nextSelector: 'ul.pager li.next',
+		previousSelector: 'ul.pager li.previous',
+		firstSelector: null,
+		lastSelector: null,
+		onNext: function( tab, navigation, index, newindex ) {
+			var validated = $('#w2 form').valid();
+			if( !validated ) {
+				$w2validator.focusInvalid();
+				return false;
+			}
+		},
+		onTabClick: function( tab, navigation, index, newindex ) {
+			if ( newindex == index + 1 ) {
+				return this.onNext( tab, navigation, index, newindex);
+			} else if ( newindex > index + 1 ) {
+				return false;
+			} else {
+				return true;
+			}
+		},
+		onTabChange: function( tab, navigation, index, newindex ) {
+			var totalTabs = navigation.find('li').length - 1;
+			$w2finish[ newindex != totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
+			$('#w2').find(this.nextSelector)[ newindex == totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
+		}
+	});
+
+	/*
+	Wizard #3
+	*/
+	var $w3finish = $('#w3').find('ul.pager li.finish'),
+		$w3validator = $("#w3 form").validate({
+		highlight: function(element) {
+			$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
+		},
+		success: function(element) {
+			$(element).closest('.form-group').removeClass('has-error');
+			$(element).remove();
+		},
+		errorPlacement: function( error, element ) {
+			element.parent().append( error );
+		}
+	});
+
+	$w3finish.on('click', function( ev ) {
+		ev.preventDefault();
+		var validated = $('#w3 form').valid();
+		if ( validated ) {
+			new PNotify({
+				title: 'Congratulations',
+				text: 'You completed the wizard form.',
+				type: 'custom',
+				addclass: 'notification-success',
+				icon: 'fas fa-check'
+			});
+		}
+	});
+
+	$('#w3').bootstrapWizard({
+		tabClass: 'wizard-steps',
+		nextSelector: 'ul.pager li.next',
+		previousSelector: 'ul.pager li.previous',
+		firstSelector: null,
+		lastSelector: null,
+		onNext: function( tab, navigation, index, newindex ) {
+			var validated = $('#w3 form').valid();
+			if( !validated ) {
+				$w3validator.focusInvalid();
+				return false;
+			}
+		},
+		onTabClick: function( tab, navigation, index, newindex ) {
+			if ( newindex == index + 1 ) {
+				return this.onNext( tab, navigation, index, newindex);
+			} else if ( newindex > index + 1 ) {
+				return false;
+			} else {
+				return true;
+			}
+		},
+		onTabChange: function( tab, navigation, index, newindex ) {
+			var $total = navigation.find('li').length - 1;
+			$w3finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' );
+			$('#w3').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' );
+		},
+		onTabShow: function( tab, navigation, index ) {
+			var $total = navigation.find('li').length - 1;
+			var $current = index;
+			var $percent = Math.floor(( $current / $total ) * 100);
+
+			navigation.find('li').removeClass('active');
+			navigation.find('li').eq( $current ).addClass('active');
+
+			$('#w3').find('.progress-indicator').css({ 'width': $percent + '%' });
+			tab.prevAll().addClass('completed');
+			tab.nextAll().removeClass('completed');
+		}
+	});
+
+	/*
+	Wizard #4
+	*/
+	var $w4finish = $('#w4').find('ul.pager li.finish'),
+		$w4validator = $("#w4 form").validate({
+		highlight: function(element) {
+			$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
+		},
+		success: function(element) {
+			$(element).closest('.form-group').removeClass('has-error');
+			$(element).remove();
+		},
+		errorPlacement: function( error, element ) {
+			element.parent().append( error );
+		}
+	});
+
+	$w4finish.on('click', function( ev ) {
+		ev.preventDefault();
+		var validated = $('#w4 form').valid();
+		if ( validated ) {
+			new PNotify({
+				title: 'Congratulations',
+				text: 'You completed the wizard form.',
+				type: 'custom',
+				addclass: 'notification-success',
+				icon: 'fas fa-check'
+			});
+		}
+	});
+
+	$('#w4').bootstrapWizard({
+		tabClass: 'wizard-steps',
+		nextSelector: 'ul.pager li.next',
+		previousSelector: 'ul.pager li.previous',
+		firstSelector: null,
+		lastSelector: null,
+		onNext: function( tab, navigation, index, newindex ) {
+			var validated = $('#w4 form').valid();
+			if( !validated ) {
+				$w4validator.focusInvalid();
+				return false;
+			}
+		},
+		onTabClick: function( tab, navigation, index, newindex ) {
+			if ( newindex == index + 1 ) {
+				return this.onNext( tab, navigation, index, newindex);
+			} else if ( newindex > index + 1 ) {
+				return false;
+			} else {
+				return true;
+			}
+		},
+		onTabChange: function( tab, navigation, index, newindex ) {
+			var $total = navigation.find('li').length - 1;
+			$w4finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' );
+			$('#w4').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' );
+		},
+		onTabShow: function( tab, navigation, index ) {
+			var $total = navigation.find('li').length - 1;
+			var $current = index;
+			var $percent = Math.floor(( $current / $total ) * 100);
+			
+			navigation.find('li').removeClass('active');
+			navigation.find('li').eq( $current ).addClass('active');
+
+			$('#w4').find('.progress-indicator').css({ 'width': $percent + '%' });
+			tab.prevAll().addClass('completed');
+			tab.nextAll().removeClass('completed');
+		}
+	});
+
+	/*
+	Wizard #5
+	*/
+	var $w5finish = $('#w5').find('ul.pager li.finish'),
+		$w5validator = $("#w5 form").validate({
+		highlight: function(element) {
+			$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
+		},
+		success: function(element) {
+			$(element).closest('.form-group').removeClass('has-error');
+			$(element).remove();
+		},
+		errorPlacement: function( error, element ) {
+			element.parent().append( error );
+		}
+	});
+
+	$w5finish.on('click', function( ev ) {
+		ev.preventDefault();
+		var validated = $('#w5 form').valid();
+		if ( validated ) {
+			new PNotify({
+				title: 'Congratulations',
+				text: 'You completed the wizard form.',
+				type: 'custom',
+				addclass: 'notification-success',
+				icon: 'fas fa-check'
+			});
+		}
+	});
+
+	$('#w5').bootstrapWizard({
+		tabClass: 'wizard-steps',
+		nextSelector: 'ul.pager li.next',
+		previousSelector: 'ul.pager li.previous',
+		firstSelector: null,
+		lastSelector: null,
+		onNext: function( tab, navigation, index, newindex ) {
+			var validated = $('#w5 form').valid();
+			if( !validated ) {
+				$w5validator.focusInvalid();
+				return false;
+			}
+		},
+		onTabChange: function( tab, navigation, index, newindex ) {
+			var $total = navigation.find('li').length - 1;
+			$w5finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' );
+			$('#w5').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' );
+		},
+		onTabShow: function( tab, navigation, index ) {
+			var $total = navigation.find('li').length;
+			var $current = index + 1;
+			var $percent = ( $current / $total ) * 100;
+			$('#w5').find('.progress-bar').css({ 'width': $percent + '%' });
+		}
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/theme.init.js
+++ b/static/js/theme.init.js
@@ -0,0 +1,697 @@
+
+
+// Animate
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'appear' ]) ) {
+
+		$(function() {
+			$('[data-plugin-animate], [data-appear-animation]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginAnimate(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Carousel
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'owlCarousel' ]) ) {
+
+		$(function() {
+			$('[data-plugin-carousel]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginCarousel(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Chart Circular
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'easyPieChart' ]) ) {
+
+		$(function() {
+			$('[data-plugin-chart-circular], .circular-bar-chart:not(.manual)').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginChartCircular(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Codemirror
+(function($) {
+
+	'use strict';
+
+	if ( typeof CodeMirror !== 'undefined' ) {
+
+		$(function() {
+			$('[data-plugin-codemirror]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginCodeMirror(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Colorpicker
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'colorpicker' ]) ) {
+
+		$(function() {
+			$('[data-plugin-colorpicker]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginColorPicker(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Datepicker
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'bootstrapDP' ]) ) {
+
+		$(function() {
+			$('[data-plugin-datepicker]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginDatePicker(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Header Menu Nav
+(function(theme, $) {
+
+	'use strict';
+	
+	if (typeof theme.Nav !== 'undefined') {
+		theme.Nav.initialize();
+	}
+	
+}).apply(this, [window.theme, jQuery]);
+
+// iosSwitcher
+(function($) {
+
+	'use strict';
+
+	if ( typeof Switch !== 'undefined' && $.isFunction( Switch ) ) {
+
+		$(function() {
+			$('[data-plugin-ios-switch]').each(function() {
+				var $this = $( this );
+
+				$this.themePluginIOS7Switch();
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Lightbox
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'magnificPopup' ]) ) {
+
+		$(function() {
+			$('[data-plugin-lightbox], .lightbox:not(.manual)').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginLightbox(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Portlets
+(function($) {
+
+	'use strict';
+
+	if ( typeof NProgress !== 'undefined' && $.isFunction( NProgress.configure ) ) {
+
+		NProgress.configure({
+			showSpinner: false,
+			ease: 'ease',
+			speed: 750
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Markdown
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'markdown' ]) ) {
+
+		$(function() {
+			$('[data-plugin-markdown-editor]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginMarkdownEditor(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Masked Input
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'mask' ]) ) {
+
+		$(function() {
+			$('[data-plugin-masked-input]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginMaskedInput(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// MaxLength
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction( $.fn[ 'maxlength' ]) ) {
+
+		$(function() {
+			$('[data-plugin-maxlength]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginMaxLength(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// MultiSelect
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction( $.fn[ 'multiselect' ] ) ) {
+
+		$(function() {
+			$( '[data-plugin-multiselect]' ).each(function() {
+
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginMultiSelect(opts);
+
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction( $.fn[ 'placeholder' ]) ) {
+
+		$('input[placeholder]').placeholder();
+
+	}
+
+}).apply(this, [jQuery]);
+
+
+// Popover
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction( $.fn['popover'] ) ) {
+		$( '[data-toggle=popover]' ).popover();
+	}
+
+}).apply(this, [jQuery]);
+
+// Portlets
+(function($) {
+
+	'use strict';
+
+	$(function() {
+		$('[data-plugin-portlet]').each(function() {
+			var $this = $( this ),
+				opts = {};
+
+			var pluginOptions = $this.data('plugin-options');
+			if (pluginOptions)
+				opts = pluginOptions;
+
+			$this.themePluginPortlet(opts);
+		});
+	});
+
+}).apply(this, [jQuery]);
+
+// Scroll to Top
+(function(theme, $) {
+	// Scroll to Top Button.
+	if (typeof theme.PluginScrollToTop !== 'undefined') {
+		theme.PluginScrollToTop.initialize();
+	}
+}).apply(this, [window.theme, jQuery]);
+
+// Scrollable
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'nanoScroller' ]) ) {
+
+		$(function() {
+			$('[data-plugin-scrollable]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions) {
+					opts = pluginOptions;
+				}
+
+				$this.themePluginScrollable(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Select2
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'select2' ]) ) {
+
+		$(function() {
+			$('[data-plugin-selectTwo]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginSelect2(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Sidebar Widgets
+(function($) {
+
+	'use strict';
+
+	function expand( content ) {
+		content.children( '.widget-content' ).slideDown( 'fast', function() {
+			$(this).css( 'display', '' );
+			content.removeClass( 'widget-collapsed' );
+		});
+	}
+
+	function collapse( content ) {
+		content.children('.widget-content' ).slideUp( 'fast', function() {
+			content.addClass( 'widget-collapsed' );
+			$(this).css( 'display', '' );
+		});
+	}
+
+	var $widgets = $( '.sidebar-widget' );
+
+	$widgets.each( function() {
+
+		var $widget = $( this ),
+			$toggler = $widget.find( '.widget-toggle' );
+
+		$toggler.on('click.widget-toggler', function() {
+			$widget.hasClass('widget-collapsed') ? expand($widget) : collapse($widget);
+		});
+	});
+
+}).apply(this, [jQuery]);
+
+// Slider
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'slider' ]) ) {
+
+		$(function() {
+			$('[data-plugin-slider]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions) {
+					opts = pluginOptions;
+				}
+
+				$this.themePluginSlider(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Spinner
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'spinner' ]) ) {
+
+		$(function() {
+			$('[data-plugin-spinner]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginSpinner(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// SummerNote
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'summernote' ]) ) {
+
+		$(function() {
+			$('[data-plugin-summernote]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginSummerNote(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// TextArea AutoSize
+(function($) {
+
+	'use strict';
+
+	if ( typeof autosize === 'function' ) {
+
+		$(function() {
+			$('[data-plugin-textarea-autosize]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginTextAreaAutoSize(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// TimePicker
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'timepicker' ]) ) {
+
+		$(function() {
+			$('[data-plugin-timepicker]').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginTimePicker(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Toggle
+(function($) {
+
+	'use strict';
+
+	$(function() {
+		$('[data-plugin-toggle]').each(function() {
+			var $this = $( this ),
+				opts = {};
+
+			var pluginOptions = $this.data('plugin-options');
+			if (pluginOptions)
+				opts = pluginOptions;
+
+			$this.themePluginToggle(opts);
+		});
+	});
+
+}).apply(this, [jQuery]);
+
+// Tooltip
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction( $.fn['tooltip'] ) ) {
+		$( '[data-toggle=tooltip],[rel=tooltip]' ).tooltip({ container: 'body' });
+	}
+
+}).apply(this, [jQuery]);
+
+// Widget - Todo
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'themePluginWidgetTodoList' ]) ) {
+
+		$(function() {
+			$('[data-plugin-todo-list], ul.widget-todo-list').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginWidgetTodoList(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Widget - Toggle
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'themePluginWidgetToggleExpand' ]) ) {
+
+		$(function() {
+			$('[data-plugin-toggle-expand], .widget-toggle-expand').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginWidgetToggleExpand(opts);
+			});
+		});
+	}
+
+}).apply(this, [jQuery]);
+
+// Word Rotator
+(function($) {
+
+	'use strict';
+
+	if ( $.isFunction($.fn[ 'themePluginWordRotator' ]) ) {
+
+		$(function() {
+			$('[data-plugin-wort-rotator], .wort-rotator:not(.manual)').each(function() {
+				var $this = $( this ),
+					opts = {};
+
+				var pluginOptions = $this.data('plugin-options');
+				if (pluginOptions)
+					opts = pluginOptions;
+
+				$this.themePluginWordRotator(opts);
+			});
+		});
+
+	}
+
+}).apply(this, [jQuery]);
+
+// Base
+(function(theme, $) {
+
+	'use strict';
+
+	theme = theme || {};
+
+	theme.Skeleton.initialize();
+
+}).apply(this, [window.theme, jQuery]);
+
+// Mailbox
+(function($) {
+
+	'use strict';
+
+	$(function() {
+		$('[data-mailbox]').each(function() {
+			var $this = $( this );
+
+			$this.themeMailbox();
+		});
+	});
+
+}).apply(this, [jQuery]);
--- a/static/js/theme.js
+++ b/static/js/theme.js