Feature/explorer (#431)

* Initial commit of the new dashboard code.

* Periodically grabbing topology json

* Pulling file saving out into its own module

* Ignoring downloaded topology file

* Moved everything public into a public folder

* Refreshing the mixmining report

* Mounting static files from /public

* Including mixminiming report grabber

* Leaving the route in place to pick up later. It's not used right now.

* Removing json download from git

* Ignoring topology download

* Moving recurrent jobs in to a jobs module

* Adding websocket dependencies

* Starting to get client/server websocket functionality running.

* Fixing unused imports

* Separating client and server functionality a bit more cleanly

* WIP to sketch out the ws client and server a bit more

* Initial metrics broadcaster

* Import fixup

* Spawning rocket in tokio task

* Removed outdated comment

* removed the js file

Co-authored-by: Dave <futurechimp@users.noreply.github.com>

.gitignore

@@ -18,4 +18,7 @@ scripts/start_local_tmux_network.sh
 qa-v4-topology.json
 qa-v6-topology.json
 v4-topology.json
-v6-topology.json
+v6-topology.json
+/explorer/downloads/topology.json
+/explorer/public/downloads/mixmining.json
+/explorer/public/downloads/topology.json

Cargo.toml

@@ -52,3 +52,5 @@ default-members = [
     "mixnode",
     "network-monitor",
 ]
+
+exclude = ["explorer"]

explorer/Cargo.toml

@@ -0,0 +1,20 @@
+[package]
+name = "nym-explorer"
+version = "0.1.0"
+authors = ["dave <futurechimp@users.noreply.github.com>", "Jedrzej Stuczynski <andrew@nymtech.net>"]
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+# no point in importing entire futtures crate
+futures-util = "0.3"
+log = "0.4"
+reqwest = "0.10.8"
+rocket = "0.4.5"
+rocket_contrib = "0.4.5"
+tokio = { version = "0.2", features = ["full"] }
+tokio-native-tls = "0.1.0"
+tokio-tungstenite = {version = "0.11", features = ["tls"] }
+
+# tungstenite = "0.11"

explorer/README.md

@@ -0,0 +1,15 @@
+The Nym Explorer
+================
+
+Displays nodes and metrics for the Nym network. Will eventually include a UI for viewing mixnodes, mixing rates, entropy levels, and a block explorer. 
+
+
+Development
+-----------
+
+The code uses [Rocket](https://rocket.rs), which requires Rust nightly for the moment. 
+
+You can override `rustup` on a per-directory basis from the `explorer` directory by doing `rustup override set nightly`. 
+
+Then just `cargo run` like normal, no `+nightly` stuff needed.
+

explorer/public/assets/css/custom.css

@@ -0,0 +1,62 @@
+th {
+    cursor: pointer;
+}
+
+:root {
+    --status-indicator-size: 10px;
+    --status-indicator-animation-duration: 2s;
+  
+    --status-indicator-color: rgb(216, 226, 233);
+    --status-indicator-color-semi: rgba(216, 226, 233, .5);
+    --status-indicator-color-transparent: rgba(216, 226, 233, 0);
+  
+    --status-indicator-color-active: rgb(0, 149, 255);
+    --status-indicator-color-active-semi: rgba(0, 149, 255, .5);
+    --status-indicator-color-active-transparent: rgba(0, 149, 255, 0);
+  
+    --status-indicator-color-positive: rgb(75, 210, 143);
+    --status-indicator-color-positive-semi: rgba(75, 210, 143, .5);
+    --status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);
+  
+    --status-indicator-color-intermediary: rgb(255, 170, 0);
+    --status-indicator-color-intermediary-semi: rgba(255, 170, 0, .5);
+    --status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);
+  
+    --status-indicator-color-negative: rgb(255, 77, 77);
+    --status-indicator-color-negative-semi: rgba(255, 77, 77, .5);
+    --status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
+  }
+ 
+  status-indicator {
+    display: inline-block;
+    border-radius: 50%;
+    cursor: pointer;
+    width: var(--status-indicator-size);
+    height: var(--status-indicator-size);
+    background-color: var(--status-indicator-color);
+  }
+
+  status-indicator[active] {
+    background-color: var(--status-indicator-color-active);
+  }
+  
+  status-indicator[positive] {
+    background-color: var(--status-indicator-color-positive);
+    animation-name: status-indicator-pulse-positive;
+  }
+  
+  status-indicator[intermediary] {
+    background-color: var(--status-indicator-color-intermediary);
+  }
+  
+  status-indicator[negative] {
+    background-color: var(--status-indicator-color-negative);
+    animation-name: status-indicator-pulse-negative;
+  }
+
+  #mixnodes-count > h2 {
+    color: #51cbce;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  

explorer/public/assets/js/main.js

@@ -0,0 +1,270 @@
+function websocketUrl() {
+  if ($(location).attr("href").startsWith("http://localhost")) {
+    return "ws://localhost:8080";
+  } else if ($(location).attr("href").startsWith("https://qa-dashboard")) {
+    return "wss://qa-metrics.nymtech.net";
+  } else {
+    return "wss://metrics.nymtech.net";
+  }
+}
+
+function getTopology() {
+  console.log("Getting topology...");
+  var topologyUrl = "/downloads/topology.json";
+  $.ajax({
+    type: 'GET',
+    url: topologyUrl,
+    success: function (data) {
+      createMixnodeCount(data.mixNodes.length);
+      createDisplayTable(data);
+      updateNodesStatus();
+    }
+  });
+}
+
+function createDisplayTable(data) {
+  createMixnodeRows(data.mixNodes);
+  createValidatorRows(data.cocoNodes);
+  createGatewayRows(data.gateways);
+}
+
+function clearStatus(element) {
+  element.removeAttribute("active")
+  element.removeAttribute("positive")
+  element.removeAttribute("intermediary")
+  element.removeAttribute("negative")
+}
+
+function setNodeStatus(dotWrapper, reportData) {
+  let statusIndicator = dotWrapper.children[0];
+  clearStatus(statusIndicator)
+
+  if (reportData == undefined || reportData == null) {
+    dotWrapper.setAttribute("title", "no data available")
+    return
+  }
+
+
+  if (reportData.mostRecentIPV4 && reportData.mostRecentIPV6 && reportData.lastHourIPV4 > 50 && reportData.lastHourIPV6 > 50) {
+    statusIndicator.setAttribute("positive", "")
+  } else if (reportData.mostRecentIPV4 || reportData.mostRecentIPV6) {
+    statusIndicator.setAttribute("intermediary", "")
+  } else {
+    statusIndicator.setAttribute("negative", "")
+  }
+
+  let newTooltip = `\n
+  IPv4 routable: ${reportData.mostRecentIPV4}\n
+  Last hour IPv4: ${reportData.lastHourIPV4}%\n
+  IPv6 routable: ${reportData.mostRecentIPV6}\n
+  Last hour IPv6: ${reportData.lastHourIPV6}%\n
+  `
+  dotWrapper.setAttribute("title", newTooltip)
+}
+
+function dealWithStatusReport(report) {
+  let reportMap = new Map();
+  report.forEach(reportData => {
+    reportMap.set(reportData.pubKey, reportData)
+  })
+
+  let allWrappers = document.getElementsByClassName('statusDot');
+  for (let statusWrapper of allWrappers) {
+    let mapEntry = reportMap.get(statusWrapper.getAttribute('pubkey'))
+    setNodeStatus(statusWrapper, mapEntry)
+  }
+}
+
+function updateNodesStatus() {
+  console.log("updating node statuses!")
+
+  const reportUrl = "/downloads/mixmining.json";
+  fetch(reportUrl, {
+    method: 'GET'
+  })
+    .then((response) => response.json())
+    .then((data) => dealWithStatusReport(data.report)).catch((err) => {
+      console.log("getting full mixmining report failed - ", err)
+    })
+}
+
+function makeStatusDot(nodePubKey) {
+  let statusText = "pending..."
+
+  let dotWrapper = document.createElement("div");
+  dotWrapper.setAttribute('id', `dotWrapper${nodePubKey}`)
+  dotWrapper.setAttribute('pubkey', nodePubKey)
+  dotWrapper.setAttribute('style', 'text-align: center')
+  dotWrapper.setAttribute('data-toggle', 'tooltip')
+  dotWrapper.setAttribute('data-placement', 'right')
+  dotWrapper.setAttribute('title', statusText)
+  dotWrapper.classList.add('statusDot')
+
+  let dot = document.createElement("status-indicator");
+  dotWrapper.appendChild(dot);
+
+  return dotWrapper;
+}
+
+function setGatewayStatusDot(nodePubKey) {
+  let statusText = "Data not available..."
+  let dotWrapper = document.getElementById(`dotWrapper${nodePubKey}`);
+  dotWrapper.classList.remove('statusDot')
+  let statusIndicator = dotWrapper.children[0];
+  clearStatus(statusIndicator);
+  statusIndicator.setAttribute("active", "")
+
+  dotWrapper.setAttribute("title", statusText)
+}
+
+function createMixnodeCount(mixNodeCount) {
+  var $h2 = $('h2').text(DOMPurify.sanitize(mixNodeCount)).appendTo("mixnodes-count");
+}
+
+function compareNodes(node1, node2) {
+  if (node1.reputation < node2.reputation) {
+    return 1
+  } else if (node1.reputation > node2.reputation) {
+    return -1
+  } else {
+    if (node1.version < node2.version) {
+      return 1
+    } else if (node1.version > node2.version) {
+      return -1
+    } else {
+      if (node1.layer < node2.layer) {
+        return 1
+      } else {
+        return -1
+      }
+    }
+  }
+}
+
+function createMixnodeRows(mixNodes) {
+  mixNodes.sort(compareNodes)
+
+  mixNodes.forEach(node => {
+    // because javascript works in mysterious ways, if you sanitize "0", it will return ""
+    let purifiedRep = DOMPurify.sanitize(node.reputation)
+    if (purifiedRep.length === 0) {
+      purifiedRep = 0
+    }
+    var $tr = $('<tr>').append(
+      $('<input type="hidden" id="prev-timestamp-' + node.pubKey + '" value="' + node.timestamp + '"> '),
+      $('<td>').html(makeStatusDot(node.identityKey)),
+      $('<td>').text(purifiedRep),
+      $('<td>').text(DOMPurify.sanitize(node.version)),
+      $('<td>').text(DOMPurify.sanitize(node.identityKey)),
+      $('<td>').text(DOMPurify.sanitize(node.sphinxKey)),
+      $('<td>').text(DOMPurify.sanitize(node.location)),
+      $('<td>').text(DOMPurify.sanitize(node.mixHost)),
+      $('<td>').text(DOMPurify.sanitize(node.layer)),
+      $('<td id="' + "received-" + DOMPurify.sanitize(node.identityKey) + '">').text("0"),
+      $('<td id="' + "sent-" + DOMPurify.sanitize(node.identityKey) + '">').text("0")
+    ).appendTo('#mixnodes-list');
+  })
+}
+
+function createGatewayRows(gatewayNodes) {
+  gatewayNodes.forEach(node => {
+    // because javascript works in mysterious ways, if you sanitize "0", it will return ""
+    let purifiedRep = DOMPurify.sanitize(node.reputation)
+    if (purifiedRep.length === 0) {
+      purifiedRep = 0
+    }
+    var $tr = $('<tr>').append(
+      $('<input type="hidden" id="prev-timestamp-' + node.pubKey + '" value="' + node.timestamp + '"> '),
+      $('<td>').html(makeStatusDot(node.identityKey)),
+      $('<td>').text(purifiedRep),
+      $('<td>').text(DOMPurify.sanitize(node.version)),
+      $('<td>').text(DOMPurify.sanitize(node.identityKey)),
+      $('<td>').text(DOMPurify.sanitize(node.sphinxKey)),
+      $('<td>').text(DOMPurify.sanitize(node.location)),
+      $('<td>').text(DOMPurify.sanitize(node.mixHost)),
+      $('<td>').text(DOMPurify.sanitize(node.clientsHost)),
+    ).appendTo('#gatewaynodes-list');
+
+    setGatewayStatusDot(node.identityKey);
+  })
+}
+
+function createValidatorRows(cocoNodes) {
+  $.each(cocoNodes, function (_, node) {
+    var $tr = $('<tr>').append(
+      $('<td>').text(DOMPurify.sanitize(node.version)),
+      $('<td>').text(DOMPurify.sanitize(node.location)),
+      $('<td>').text(DOMPurify.sanitize(node.host)),
+      $('<td>').text(DOMPurify.sanitize(node.pubKey))
+    ).appendTo('#coconodes-list');
+  });
+}
+
+function connectWebSocket() {
+  var conn;
+  var url;
+  url = websocketUrl() + "/ws";
+  console.log("connecting to: " + url);
+  conn = new WebSocket(url);
+  conn.onmessage = function (evt) {
+    processMessage(evt);
+  };
+}
+
+function processMessage(evt) {
+  var messages = evt.data.split('\n');
+  for (var i = 0; i < messages.length; i++) {
+    var msg = jQuery.parseJSON(messages[i]);
+    prevTimestamp = updateTimeStampStorage(msg);
+
+    timeDiff = (msg.timestamp - prevTimeStamp) / 1000000000;
+
+    displayReceivedPackets(msg, timeDiff);
+    displaySentPackets(msg, timeDiff);
+  }
+}
+
+function displaySentPackets(msg, timeDiff) {
+  var sentCell = "#sent-" + DOMPurify.sanitize(msg.pubKey);
+  var sent = 0;
+  for (var key in msg.sent) {
+    s = msg.sent[key];
+    sent += s;
+  }
+  sentPerSecond = Math.floor(sent / timeDiff);
+  let sentVal = DOMPurify.sanitize(sentPerSecond).length > 0 ? DOMPurify.sanitize(sentPerSecond) : "0";
+  $(sentCell).html(sentVal);
+}
+
+function displayReceivedPackets(msg, timeDiff) {
+  receivedPerSecond = Math.floor(msg.received / timeDiff);
+  var recCell = "#received-" + DOMPurify.sanitize(msg.pubKey);
+  let recVal = DOMPurify.sanitize(receivedPerSecond).length > 0 ? DOMPurify.sanitize(receivedPerSecond) : "0";
+  $(recCell).html(recVal);
+}
+
+/* 
+  Hahahaha this has to be the crappiest code I've written since learning to code.
+
+  On the upside, it'll save a few weeks messing with React or Angular to do
+  basically the same thing.
+*/
+function updateTimeStampStorage(msg) {
+  // get the timestamp stored during the last loop
+  prevTimeStamp = ($("#prev-timestamp-" + msg.pubKey).val())
+
+  // store the current timestamp
+  $('#prev-timestamp-' + msg.pubKey).val(msg.timestamp);
+
+  // return the previous timestamp
+  return prevTimeStamp;
+}
+
+
+document.addEventListener("DOMContentLoaded", function () {
+  // update every minute
+  setInterval(updateNodesStatus, 60000);
+  getTopology();
+  connectWebSocket();
+});
+

explorer/public/assets/js/tablesorter.js

@@ -0,0 +1,14 @@
+$('th').click(function(){
+    var table = $(this).parents('table').eq(0)
+    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
+    this.asc = !this.asc
+    if (!this.asc){rows = rows.reverse()}
+    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
+})
+function comparer(index) {
+    return function(a, b) {
+        var valA = getCellValue(a, index), valB = getCellValue(b, index)
+        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
+    }
+}
+function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

explorer/public/index.html

@@ -0,0 +1,351 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="paper-dashboard/assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="paper-dashboard/assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Nym Network Status
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
+    name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="paper-dashboard/assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="paper-dashboard/assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <link href="assets/css/custom.css" rel="stylesheet" />
+</head>
+
+<body class="">
+  <div class="wrapper ">
+    <div class="sidebar" data-color="white" data-active-color="danger">
+      <!--
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
+    -->
+      <div class="logo">
+        <!-- <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+          <div class="logo-image-small">
+            <img alt="logo" src="paper-dashboard/assets/img/logo-small.png">
+          </div>
+        </a> -->
+        <a href="https://nymtech.net" class="simple-text logo-normal">
+          NYM
+          <!-- <div class="logo-image-big">
+            <img src="paper-dashboard/assets/img/logo-big.png">
+          </div> -->
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <ul class="nav">
+          <li>
+            <a href="/">
+              <i class="nc-icon nc-bank"></i>
+              <p>Dashboard</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main-panel">
+      <!-- Navbar -->
+      <div id="msg"></div>
+      <div id="log"></div>
+      <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+        <div class="container-fluid">
+          <div class="navbar-wrapper">
+            <div class="navbar-toggle">
+              <button type="button" class="navbar-toggler">
+                <span class="navbar-toggler-bar bar1"></span>
+                <span class="navbar-toggler-bar bar2"></span>
+                <span class="navbar-toggler-bar bar3"></span>
+              </button>
+            </div>
+            <a class="navbar-brand" href="">Nym Network Status</a>
+          </div>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
+            aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <!-- <form>
+              <div class="input-group no-border">
+                <input type="text" value="" class="form-control" placeholder="Search...">
+                <div class="input-group-append">
+                  <div class="input-group-text">
+                    <i class="nc-icon nc-zoom-split"></i>
+                  </div>
+                </div>
+              </div>
+            </form> -->
+            <ul class="navbar-nav">
+              <!-- <li class="nav-item">
+                <a class="nav-link btn-magnify" href="">
+                  <i class="nc-icon nc-layout-11"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Stats</span>
+                  </p>
+                </a>
+              </li>
+              <li class="nav-item btn-rotate dropdown">
+                 <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="nc-icon nc-bell-55"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Some Actions</span>
+                  </p>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                  <a class="dropdown-item" href="#">Action</a>
+                  <a class="dropdown-item" href="#">Another action</a>
+                  <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+              </li> -->
+              <!-- <li class="nav-item">
+                <a class="nav-link btn-rotate" href="">
+                  <i class="nc-icon nc-settings-gear-65"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Account</span>
+                  </p>
+                </a>
+              </li> -->
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- End Navbar -->
+      <!-- <div class="panel-header panel-header-sm">
+
+
+      </div> -->
+      <div class="content">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title">Mix Node Count</h4>
+              </div>
+              <div class="card-body" id="mixnodes-count">
+                <h2></h2>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title"> Mix Nodes</h4>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table" id="mixnodes-list">
+                    <thead class=" text-primary">
+                      <tr>
+                        <th width=50px>
+                          Status
+                        </th>
+                        <th>
+                          Version
+                        </th>
+                        <th>
+                          Location
+                        </th>
+                        <th>
+                          Host
+                        </th>
+                        <th>
+                          Layer
+                        </th>
+                        <th>
+                          Public Key
+                        </th>
+                        <th>
+                          Received
+                        </th>
+                        <th>
+                          Sent
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title"> Standby Nodes </h4>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table" id="standby-list">
+                    <thead class=" text-primary">
+                      <tr>
+                        <th>
+                          Version
+                        </th>
+                        <th>
+                          Location
+                        </th>
+                        <th>
+                          Host
+                        </th>
+                        <th>
+                          Layer
+                        </th>
+                        <th>
+                          Public Key
+                        </th>
+                        <th>
+                          Received
+                        </th>
+                        <th>
+                          Sent
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title"> Validators</h4>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table" id="coconodes-list">
+                    <thead class=" text-primary">
+                      <tr>
+                        <th>
+                          Version
+                        </th>
+                        <th>
+                          Location
+                        </th>
+                        <th>
+                          Host
+                        </th>
+                        <th>
+                          Public Verification Key
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title"> Gateways</h4>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table" id="gatewaynodes-list">
+                    <thead class=" text-primary">
+                      <tr>
+                        <th width=50px>
+                          Status
+                        </th>
+                        <th>
+                          Version
+                        </th>
+                        <th>
+                          Location
+                        </th>
+                        <th>
+                          Client Host
+                        </th>
+                        <th>
+                          Mix Host
+                        </th>
+                        <th>
+                          Identity
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-black  footer-white ">
+        <div class="container-fluid">
+          <div class="row">
+            <nav class="footer-nav">
+              <ul>
+                <li>
+                  <a href="https://nymtech.net" target="_blank">Nym</a>
+                </li>
+                <li>
+                  <a href="https://github.com/nymtech/nym-web-dashboard/license" target="_blank">Licenses</a>
+                </li>
+              </ul>
+            </nav>
+            <div class="credits ml-auto">
+              <span class="copyright">
+                ©
+                <script>
+                  document.write(new Date().getFullYear())
+                </script>, made with <i class="fa fa-heart heart"></i> by Nym
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--   Core JS Files   -->
+  <script src="paper-dashboard/assets/js/core/jquery.min.js"></script>
+  <script src="paper-dashboard/assets/js/core/popper.min.js"></script>
+  <script src="paper-dashboard/assets/js/core/bootstrap.min.js"></script>
+  <script src="paper-dashboard/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!-- Chart JS -->
+  <script src="paper-dashboard/assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="paper-dashboard/assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="paper-dashboard/assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <script src="assets/js/purify.js"></script>
+  <script src="assets/js/main.js"></script>
+  <script src="assets/js/tablesorter.js"></script>
+</body>
+
+</html>

explorer/public/paper-dashboard/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+
+## [2.0.0] 22.05.2018
+### Bootstrap 4.1.1 integration & Bug Fixing
+- Small changes for components
+- ChartJS plugin integration
+- Gulp task integration to open the project in browser
+- Added License for Nucleo Icons
+- Small changes on design of Cards
+
+## [1.0.2] 08.03.2017
+ - added documentation files
+
+## [1.0.1] 30.09.2016
+### Bugfixing, Improvements
+- New Page [current version]
+- added Upgrade to PRO page for those who want to upsell inside the dashboard
+- switched to MIT license
+
+## [1.0.0] 29.03.2016
+### Original Release

explorer/public/paper-dashboard/LICENSE

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

explorer/public/paper-dashboard/README.md

@@ -0,0 +1,105 @@
+# [Paper Dashboard 2](https://demos.creative-tim.com/paper-dashboard/examples/dashboard.html) [![version][version-badge]][CHANGELOG] [![license][license-badge]][LICENSE]
+
+![alt text](https://s3.amazonaws.com/creativetim_bucket/products/86/original/opt_pd2_thumbnail.jpg)
+
+If you are a developer or a website owner that needs to work within a dashboard and want to have a pretty sight while doing so, **[Paper Dashboard 2](https://demos.creative-tim.com/paper-dashboard/examples/dashboard.html)** is for you. Paper Dashboard is a Bootstrap Admin Panel which combines soft colours with beautiful typography and spacious cards and graphics. It is a powerful tool, but it is light and easy to use. It has enough features to allow you to get the job done, but it is not crowded to the point where you can't find the files for a specific plugin.
+
+We like consistency and design that blends into its purpose. Paper Dashboard is a perfect example of our most thoughtful work. It combines over a dozen components and plugins, while looking like everything fits together. For an easy start or inspiration for you project, we have also create a set of example pages, like the user settings or usage graphics.
+
+Paper Dashboard is built using the same design language as **[Paper Kit(https://www.creative-tim.com/product/paper-kit-2)**. You can easily use them together, or pick between them depending on the project you have.
+
+**Bootstrap 4 Support**
+Paper Dashboard 2 is built on top of the much awaited Bootstrap 4. This makes starting a new project very simple. It also provides benefits if you are already working on a Bootstrap 4 project; you can just import the Paper Dashboard style over it. Most of the elements have been redesigned; but if you are using an element we have not touched, it will fall back to the Bootstrap default.
+
+**Example Pages**
+We wanted to fully display the power of this dashboard, so the kit comes packed with examples showing you how to use the components. Inside the product you will find:
+
+## Links:
+
++ [Live Preview](https://demos.creative-tim.com/paper-dashboard/examples/dashboard.html)
++ [Paper Dashboard 2 PRO](https://www.creative-tim.com/product/paper-dashboard-2-pro) (from $39)
+
+**Tutorial**
+In order for you to easily be able to use the Paper Dashboard 2, we have created a tutorial page in our documentation. It shows the structure for the files inside the archive and how to import them. It then features every components with a description and example how to use it. You can see the details [here](https://creativetimofficial.github.io/paper-dashboard-2/docs/1.0/getting-started/introduction.html).
+
+
+### What's included
+
+Within the download you'll find the following directories and files:
+
+```
+Paper Dashboard 2
+.
+├── CHANGELOG.md
+├── README.md
+├── assets
+│   ├── css/
+│   ├── demo/
+│   ├── fonts/
+│   ├── img/
+│   ├── js
+│   │   ├── core/
+│   │   ├── paper-dashboard.js
+│   │   ├── paper-dashboard.js.map
+│   │   ├── paper-dashboard.min.js
+│   │   └── plugins
+│   │       ├── bootstrap-notify.js
+│   │       ├── chartjs.min.js
+│   │       └── perfect-scrollbar.jquery.min.js
+│   └── scss/
+│       ├── paper-dashboard/
+│       │   ├── cards/
+│       │   ├── mixins/
+│       │   └── plugins/
+│       └── paper-dashboard.scss
+├── docs/
+│   └── documentation.html
+├── examples/
+│   ├── dashboard.html
+│   ├── icons.html
+│   ├── map.html
+│   ├── notifications.html
+│   ├── tables.html
+│   ├── typography.html
+│   ├── upgrade.html
+│   └── user.html
+├── gulpfile.js
+├── nucleo-icons.html
+└── package.json
+```
+
+## Getting started
+- Download the project’s zip
+- Make sure you have node.js (https://nodejs.org/en/) installed
+- Type `npm install` in terminal/console in the source folder where `package.json` is located
+- You will find all the branding colors inside `assets/scss/core/variables/_brand.scss`. You can change them with a HEX value or with other predefined variables from `assets/scss/core/variables/_colors.scss`
+- Run in terminal `gulp compile-scss` for a single compilation or gulp watch for continous compilation of the changes that you make in `*.scss` files. This command should be run in the same folder where `gulpfile.js` and `package.json` are located
+- Run in terminal `gulp open-app` for opening the Presentation Page (default) of the product. You can set in `gulpfile.js` from your downloaded archive any page you want to open in browser, `at line 30: gulp.src('./examples/dashboard.html')`
+
+
+## Useful Links
+
+More products from Creative Tim: <http://www.creative-tim.com/bootstrap-themes>
+
+Tutorials: <https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w>
+
+Freebies: <http://www.creative-tim.com/products>
+
+Affiliate Program (earn money): <http://www.creative-tim.com/affiliates/new>
+
+Social Media:
+
+Twitter: <https://twitter.com/CreativeTim>
+
+Facebook: <https://www.facebook.com/CreativeTim>
+
+Dribbble: <https://dribbble.com/creativetim>
+
+Google+: <https://plus.google.com/+CreativetimPage>
+
+Instagram: <https://instagram.com/creativetimofficial>
+
+[CHANGELOG]: ./CHANGELOG.md
+[LICENSE]: ./LICENSE
+[version-badge]: https://img.shields.io/badge/version-1.0.1-blue.svg
+[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg

explorer/public/paper-dashboard/assets/demo/demo.css

@@ -0,0 +1,189 @@
+.tim-row {
+  margin-bottom: 20px;
+}
+
+.tim-white-buttons {
+  background-color: #777777;
+}
+
+.typography-line {
+  padding-left: 25%;
+  margin-bottom: 35px;
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.typography-line span {
+  bottom: 10px;
+  color: #c0c1c2;
+  display: block;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 13px;
+  left: 0;
+  position: absolute;
+  width: 260px;
+  text-transform: none;
+}
+
+.tim-row {
+  padding-top: 60px;
+}
+
+.tim-row h3 {
+  margin-top: 0;
+}
+
+.offline-doc .page-header {
+  display: flex;
+  align-items: center;
+}
+
+.offline-doc .footer {
+  position: absolute;
+  width: 100%;
+  background: transparent;
+  bottom: 0;
+  color: #fff;
+  z-index: 1;
+}
+
+@media all and (min-width: 992px) {
+  .sidebar .nav>li.active-pro {
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+  }
+}
+
+.card.card-upgrade .card-category {
+  max-width: 530px;
+  margin: 0 auto;
+}
+
+/* Nucleo Style */
+
+.demo-iconshtml {
+  font-size: 62.5%;
+}
+
+.demo-icons body {
+  font-size: 1.6rem;
+  font-family: sans-serif;
+  color: #333333;
+  background: white;
+}
+
+.demo-icons a {
+  color: #608CEE;
+  text-decoration: none;
+}
+
+.demo-icons header {
+  text-align: center;
+  padding: 100px 0 0;
+}
+
+.demo-icons header h1 {
+  font-size: 2.8rem;
+}
+
+.demo-icons header p {
+  font-size: 1.4rem;
+  margin-top: 1em;
+}
+
+.demo-icons header a:hover {
+  text-decoration: underline;
+}
+
+.demo-icons .nc-icon {
+  font-size: 34px;
+}
+
+.demo-icons section h2 {
+  border-bottom: 1px solid #e2e2e2;
+  padding: 0 0 1em .2em;
+  margin-bottom: 1em;
+}
+
+.demo-icons ul {
+  padding-left: 0;
+}
+
+.demo-icons ul::after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.demo-icons ul li {
+  width: 20%;
+  float: left;
+  padding: 16px 0;
+  text-align: center;
+  border-radius: .25em;
+  -webkit-transition: background 0.2s;
+  -moz-transition: background 0.2s;
+  transition: background 0.2s;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+.demo-icons ul li:hover {
+  background: #f4f4f4;
+}
+
+.demo-icons ul p,
+.demo-icons ul em,
+.demo-icons ul input {
+  display: inline-block;
+  font-size: 1rem;
+  color: #999999;
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.demo-icons ul p {
+  padding: 20px 0 0;
+  font-size: 12px;
+  margin: 0;
+}
+
+.demo-icons ul p::selection,
+.demo-icons ul em::selection {
+  background: #608CEE;
+  color: #efefef;
+}
+
+.demo-icons ul em {
+  font-size: 12px;
+}
+
+.demo-icons ul em::before {
+  content: '[';
+}
+
+.demo-icons ul em::after {
+  content: ']';
+}
+
+.demo-icons ul input {
+  text-align: center;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  outline: none;
+  display: none;
+}

explorer/public/paper-dashboard/assets/demo/demo.js

@@ -0,0 +1,408 @@
+demo = {
+  initPickColor: function() {
+    $('.pick-class-label').click(function() {
+      var new_class = $(this).attr('new-class');
+      var old_class = $('#display-buttons').attr('data-class');
+      var display_div = $('#display-buttons');
+      if (display_div.length) {
+        var display_buttons = display_div.find('.btn');
+        display_buttons.removeClass(old_class);
+        display_buttons.addClass(new_class);
+        display_div.attr('data-class', new_class);
+      }
+    });
+  },
+
+  initDocChart: function() {
+    chartColor = "#FFFFFF";
+
+    ctx = document.getElementById('chartHours').getContext("2d");
+
+    myChart = new Chart(ctx, {
+      type: 'line',
+
+      data: {
+        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
+        datasets: [{
+            borderColor: "#6bd098",
+            backgroundColor: "#6bd098",
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            borderWidth: 3,
+            data: [300, 310, 316, 322, 330, 326, 333, 345, 338, 354]
+          },
+          {
+            borderColor: "#f17e5d",
+            backgroundColor: "#f17e5d",
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            borderWidth: 3,
+            data: [320, 340, 365, 360, 370, 385, 390, 384, 408, 420]
+          },
+          {
+            borderColor: "#fcc468",
+            backgroundColor: "#fcc468",
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            borderWidth: 3,
+            data: [370, 394, 415, 409, 425, 445, 460, 450, 478, 484]
+          }
+        ]
+      },
+      options: {
+        legend: {
+          display: false
+        },
+
+        tooltips: {
+          enabled: false
+        },
+
+        scales: {
+          yAxes: [{
+
+            ticks: {
+              fontColor: "#9f9f9f",
+              beginAtZero: false,
+              maxTicksLimit: 5,
+              //padding: 20
+            },
+            gridLines: {
+              drawBorder: false,
+              zeroLineColor: "#ccc",
+              color: 'rgba(255,255,255,0.05)'
+            }
+
+          }],
+
+          xAxes: [{
+            barPercentage: 1.6,
+            gridLines: {
+              drawBorder: false,
+              color: 'rgba(255,255,255,0.1)',
+              zeroLineColor: "transparent",
+              display: false,
+            },
+            ticks: {
+              padding: 20,
+              fontColor: "#9f9f9f"
+            }
+          }]
+        },
+      }
+    });
+
+  },
+
+  initChartsPages: function() {
+    chartColor = "#FFFFFF";
+
+    ctx = document.getElementById('chartHours').getContext("2d");
+
+    myChart = new Chart(ctx, {
+      type: 'line',
+
+      data: {
+        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
+        datasets: [{
+            borderColor: "#6bd098",
+            backgroundColor: "#6bd098",
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            borderWidth: 3,
+            data: [300, 310, 316, 322, 330, 326, 333, 345, 338, 354]
+          },
+          {
+            borderColor: "#f17e5d",
+            backgroundColor: "#f17e5d",
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            borderWidth: 3,
+            data: [320, 340, 365, 360, 370, 385, 390, 384, 408, 420]
+          },
+          {
+            borderColor: "#fcc468",
+            backgroundColor: "#fcc468",
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            borderWidth: 3,
+            data: [370, 394, 415, 409, 425, 445, 460, 450, 478, 484]
+          }
+        ]
+      },
+      options: {
+        legend: {
+          display: false
+        },
+
+        tooltips: {
+          enabled: false
+        },
+
+        scales: {
+          yAxes: [{
+
+            ticks: {
+              fontColor: "#9f9f9f",
+              beginAtZero: false,
+              maxTicksLimit: 5,
+              //padding: 20
+            },
+            gridLines: {
+              drawBorder: false,
+              zeroLineColor: "#ccc",
+              color: 'rgba(255,255,255,0.05)'
+            }
+
+          }],
+
+          xAxes: [{
+            barPercentage: 1.6,
+            gridLines: {
+              drawBorder: false,
+              color: 'rgba(255,255,255,0.1)',
+              zeroLineColor: "transparent",
+              display: false,
+            },
+            ticks: {
+              padding: 20,
+              fontColor: "#9f9f9f"
+            }
+          }]
+        },
+      }
+    });
+
+
+    ctx = document.getElementById('chartEmail').getContext("2d");
+
+    myChart = new Chart(ctx, {
+      type: 'pie',
+      data: {
+        labels: [1, 2, 3],
+        datasets: [{
+          label: "Emails",
+          pointRadius: 0,
+          pointHoverRadius: 0,
+          backgroundColor: [
+            '#e3e3e3',
+            '#4acccd',
+            '#fcc468',
+            '#ef8157'
+          ],
+          borderWidth: 0,
+          data: [342, 480, 530, 120]
+        }]
+      },
+
+      options: {
+
+        legend: {
+          display: false
+        },
+
+        pieceLabel: {
+          render: 'percentage',
+          fontColor: ['white'],
+          precision: 2
+        },
+
+        tooltips: {
+          enabled: false
+        },
+
+        scales: {
+          yAxes: [{
+
+            ticks: {
+              display: false
+            },
+            gridLines: {
+              drawBorder: false,
+              zeroLineColor: "transparent",
+              color: 'rgba(255,255,255,0.05)'
+            }
+
+          }],
+
+          xAxes: [{
+            barPercentage: 1.6,
+            gridLines: {
+              drawBorder: false,
+              color: 'rgba(255,255,255,0.1)',
+              zeroLineColor: "transparent"
+            },
+            ticks: {
+              display: false,
+            }
+          }]
+        },
+      }
+    });
+
+    var speedCanvas = document.getElementById("speedChart");
+
+    var dataFirst = {
+      data: [0, 19, 15, 20, 30, 40, 40, 50, 25, 30, 50, 70],
+      fill: false,
+      borderColor: '#fbc658',
+      backgroundColor: 'transparent',
+      pointBorderColor: '#fbc658',
+      pointRadius: 4,
+      pointHoverRadius: 4,
+      pointBorderWidth: 8,
+    };
+
+    var dataSecond = {
+      data: [0, 5, 10, 12, 20, 27, 30, 34, 42, 45, 55, 63],
+      fill: false,
+      borderColor: '#51CACF',
+      backgroundColor: 'transparent',
+      pointBorderColor: '#51CACF',
+      pointRadius: 4,
+      pointHoverRadius: 4,
+      pointBorderWidth: 8
+    };
+
+    var speedData = {
+      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+      datasets: [dataFirst, dataSecond]
+    };
+
+    var chartOptions = {
+      legend: {
+        display: false,
+        position: 'top'
+      }
+    };
+
+    var lineChart = new Chart(speedCanvas, {
+      type: 'line',
+      hover: false,
+      data: speedData,
+      options: chartOptions
+    });
+  },
+
+  initGoogleMaps: function() {
+    var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
+    var mapOptions = {
+      zoom: 13,
+      center: myLatlng,
+      scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
+      styles: [{
+        "featureType": "water",
+        "stylers": [{
+          "saturation": 43
+        }, {
+          "lightness": -11
+        }, {
+          "hue": "#0088ff"
+        }]
+      }, {
+        "featureType": "road",
+        "elementType": "geometry.fill",
+        "stylers": [{
+          "hue": "#ff0000"
+        }, {
+          "saturation": -100
+        }, {
+          "lightness": 99
+        }]
+      }, {
+        "featureType": "road",
+        "elementType": "geometry.stroke",
+        "stylers": [{
+          "color": "#808080"
+        }, {
+          "lightness": 54
+        }]
+      }, {
+        "featureType": "landscape.man_made",
+        "elementType": "geometry.fill",
+        "stylers": [{
+          "color": "#ece2d9"
+        }]
+      }, {
+        "featureType": "poi.park",
+        "elementType": "geometry.fill",
+        "stylers": [{
+          "color": "#ccdca1"
+        }]
+      }, {
+        "featureType": "road",
+        "elementType": "labels.text.fill",
+        "stylers": [{
+          "color": "#767676"
+        }]
+      }, {
+        "featureType": "road",
+        "elementType": "labels.text.stroke",
+        "stylers": [{
+          "color": "#ffffff"
+        }]
+      }, {
+        "featureType": "poi",
+        "stylers": [{
+          "visibility": "off"
+        }]
+      }, {
+        "featureType": "landscape.natural",
+        "elementType": "geometry.fill",
+        "stylers": [{
+          "visibility": "on"
+        }, {
+          "color": "#b8cb93"
+        }]
+      }, {
+        "featureType": "poi.park",
+        "stylers": [{
+          "visibility": "on"
+        }]
+      }, {
+        "featureType": "poi.sports_complex",
+        "stylers": [{
+          "visibility": "on"
+        }]
+      }, {
+        "featureType": "poi.medical",
+        "stylers": [{
+          "visibility": "on"
+        }]
+      }, {
+        "featureType": "poi.business",
+        "stylers": [{
+          "visibility": "simplified"
+        }]
+      }]
+
+    }
+    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
+
+    var marker = new google.maps.Marker({
+      position: myLatlng,
+      title: "Hello World!"
+    });
+
+    // To add the marker to the map, call setMap();
+    marker.setMap(map);
+  },
+
+  showNotification: function(from, align) {
+    color = 'primary';
+
+    $.notify({
+      icon: "nc-icon nc-bell-55",
+      message: "Welcome to <b>Paper Dashboard</b> - a beautiful bootstrap dashboard for every web developer."
+
+    }, {
+      type: color,
+      timer: 8000,
+      placement: {
+        from: from,
+        align: align
+      }
+    });
+  }
+
+};

explorer/public/paper-dashboard/assets/js/paper-dashboard.js

@@ -0,0 +1,194 @@
+// =========================================================
+//  Paper Dashboard 2 - v2.0.0
+// =========================================================
+//
+//  Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+//  Copyright 2019 Creative Tim (https://www.creative-tim.com)
+//  Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+//
+//  Coded by Creative Tim
+//
+// =========================================================
+//
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+
+(function() {
+  isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
+
+  if (isWindows) {
+    // if we are on windows OS we activate the perfectScrollbar function
+    $('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
+
+    $('html').addClass('perfect-scrollbar-on');
+  } else {
+    $('html').addClass('perfect-scrollbar-off');
+  }
+})();
+
+transparent = true;
+transparentDemo = true;
+fixedTop = false;
+
+navbar_initialized = false;
+backgroundOrange = false;
+sidebar_mini_active = false;
+toggle_initialized = false;
+
+seq = 0, delays = 80, durations = 500;
+seq2 = 0, delays2 = 80, durations2 = 500;
+
+$(document).ready(function() {
+
+  if ($('.full-screen-map').length == 0 && $('.bd-docs').length == 0) {
+    // On click navbar-collapse the menu will be white not transparent
+    $('.collapse').on('show.bs.collapse', function() {
+      $(this).closest('.navbar').removeClass('navbar-transparent').addClass('bg-white');
+    }).on('hide.bs.collapse', function() {
+      $(this).closest('.navbar').addClass('navbar-transparent').removeClass('bg-white');
+    });
+  }
+
+  paperDashboard.initMinimizeSidebar();
+
+  $navbar = $('.navbar[color-on-scroll]');
+  scroll_distance = $navbar.attr('color-on-scroll') || 500;
+
+  // Check if we have the class "navbar-color-on-scroll" then add the function to remove the class "navbar-transparent" so it will transform to a plain color.
+  if ($('.navbar[color-on-scroll]').length != 0) {
+    paperDashboard.checkScrollForTransparentNavbar();
+    $(window).on('scroll', paperDashboard.checkScrollForTransparentNavbar)
+  }
+
+  $('.form-control').on("focus", function() {
+    $(this).parent('.input-group').addClass("input-group-focus");
+  }).on("blur", function() {
+    $(this).parent(".input-group").removeClass("input-group-focus");
+  });
+
+  // Activate bootstrapSwitch
+  $('.bootstrap-switch').each(function() {
+    $this = $(this);
+    data_on_label = $this.data('on-label') || '';
+    data_off_label = $this.data('off-label') || '';
+
+    $this.bootstrapSwitch({
+      onText: data_on_label,
+      offText: data_off_label
+    });
+  });
+});
+
+$(document).on('click', '.navbar-toggle', function() {
+  $toggle = $(this);
+
+  if (paperDashboard.misc.navbar_menu_visible == 1) {
+    $('html').removeClass('nav-open');
+    paperDashboard.misc.navbar_menu_visible = 0;
+    setTimeout(function() {
+      $toggle.removeClass('toggled');
+      $('#bodyClick').remove();
+    }, 550);
+
+  } else {
+    setTimeout(function() {
+      $toggle.addClass('toggled');
+    }, 580);
+
+    div = '<div id="bodyClick"></div>';
+    $(div).appendTo('body').click(function() {
+      $('html').removeClass('nav-open');
+      paperDashboard.misc.navbar_menu_visible = 0;
+      setTimeout(function() {
+        $toggle.removeClass('toggled');
+        $('#bodyClick').remove();
+      }, 550);
+    });
+
+    $('html').addClass('nav-open');
+    paperDashboard.misc.navbar_menu_visible = 1;
+  }
+});
+
+$(window).resize(function() {
+  // reset the seq for charts drawing animations
+  seq = seq2 = 0;
+
+  if ($('.full-screen-map').length == 0 && $('.bd-docs').length == 0) {
+    $navbar = $('.navbar');
+    isExpanded = $('.navbar').find('[data-toggle="collapse"]').attr("aria-expanded");
+    if ($navbar.hasClass('bg-white') && $(window).width() > 991) {
+      $navbar.removeClass('bg-white').addClass('navbar-transparent');
+    } else if ($navbar.hasClass('navbar-transparent') && $(window).width() < 991 && isExpanded != "false") {
+      $navbar.addClass('bg-white').removeClass('navbar-transparent');
+    }
+  }
+});
+
+paperDashboard = {
+  misc: {
+    navbar_menu_visible: 0
+  },
+
+  initMinimizeSidebar: function() {
+    if ($('.sidebar-mini').length != 0) {
+      sidebar_mini_active = true;
+    }
+
+    $('#minimizeSidebar').click(function() {
+      var $btn = $(this);
+
+      if (sidebar_mini_active == true) {
+        $('body').addClass('sidebar-mini');
+        sidebar_mini_active = true;
+        paperDashboard.showSidebarMessage('Sidebar mini activated...');
+      } else {
+        $('body').removeClass('sidebar-mini');
+        sidebar_mini_active = false;
+        paperDashboard.showSidebarMessage('Sidebar mini deactivated...');
+      }
+
+      // we simulate the window Resize so the charts will get updated in realtime.
+      var simulateWindowResize = setInterval(function() {
+        window.dispatchEvent(new Event('resize'));
+      }, 180);
+
+      // we stop the simulation of Window Resize after the animations are completed
+      setTimeout(function() {
+        clearInterval(simulateWindowResize);
+      }, 1000);
+    });
+  },
+
+  showSidebarMessage: function(message) {
+    try {
+      $.notify({
+        icon: "now-ui-icons ui-1_bell-53",
+        message: message
+      }, {
+        type: 'info',
+        timer: 4000,
+        placement: {
+          from: 'top',
+          align: 'right'
+        }
+      });
+    } catch (e) {
+      console.log('Notify library is missing, please make sure you have the notifications library added.');
+    }
+
+  }
+
+};
+
+function hexToRGB(hex, alpha) {
+  var r = parseInt(hex.slice(1, 3), 16),
+    g = parseInt(hex.slice(3, 5), 16),
+    b = parseInt(hex.slice(5, 7), 16);
+
+  if (alpha) {
+    return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+  } else {
+    return "rgb(" + r + ", " + g + ", " + b + ")";
+  }
+}

explorer/public/paper-dashboard/assets/js/paper-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["_site_dashboard_free/assets/js/dashboard-free.js"],"names":["hexToRGB","hex","alpha","r","parseInt","slice","g","b","isWindows","navigator","platform","indexOf","$","perfectScrollbar","addClass","transparent","transparentDemo","fixedTop","navbar_initialized","backgroundOrange","sidebar_mini_active","toggle_initialized","seq","delays","durations","seq2","delays2","durations2","document","ready","length","on","this","closest","removeClass","paperDashboard","initMinimizeSidebar","$navbar","scroll_distance","attr","checkScrollForTransparentNavbar","window","parent","each","$this","data_on_label","data","data_off_label","bootstrapSwitch","onText","offText","$toggle","misc","navbar_menu_visible","setTimeout","remove","div","appendTo","click","resize","isExpanded","find","hasClass","width","showSidebarMessage","simulateWindowResize","setInterval","dispatchEvent","Event","clearInterval","message","notify","icon","type","timer","placement","from","align","e","console","log"],"mappings":"AAyLA,SAASA,SAASC,EAAKC,GACnB,IAAIC,EAAIC,SAASH,EAAII,MAAM,EAAG,GAAI,IAC9BC,EAAIF,SAASH,EAAII,MAAM,EAAG,GAAI,IAC9BE,EAAIH,SAASH,EAAII,MAAM,EAAG,GAAI,IAElC,OAAIH,EACO,QAAUC,EAAI,KAAOG,EAAI,KAAOC,EAAI,KAAOL,EAAQ,IAEnD,OAASC,EAAI,KAAOG,EAAI,KAAOC,EAAI,IA/K9CC,WAAiD,EAArCC,UAAUC,SAASC,QAAQ,OAEnCH,WAEDI,EAAE,0CAA0CC,mBAE5CD,EAAE,QAAQE,SAAS,yBAEnBF,EAAE,QAAQE,SAAS,yBAI1BC,aAAc,EACdC,iBAAkB,EAClBC,UAAW,EAEXC,oBAAqB,EACrBC,kBAAmB,EACnBC,qBAAsB,EACtBC,oBAAqB,EAErBC,IAAM,EAAGC,OAAS,GAAIC,UAAY,IAClCC,KAAO,EAAGC,QAAU,GAAIC,WAAa,IAErCf,EAAEgB,UAAUC,MAAM,WAEoB,GAAhCjB,EAAE,oBAAoBkB,QAAuC,GAAxBlB,EAAE,YAAYkB,QAErDlB,EAAE,aAAamB,GAAG,mBAAoB,WAClCnB,EAAEoB,MAAMC,QAAQ,WAAWC,YAAY,sBAAsBpB,SAAS,cACvEiB,GAAG,mBAAoB,WACtBnB,EAAEoB,MAAMC,QAAQ,WAAWnB,SAAS,sBAAsBoB,YAAY,cAI5EC,eAAeC,sBAEfC,QAAUzB,EAAE,4BACZ0B,gBAAkBD,QAAQE,KAAK,oBAAsB,IAGV,GAAxC3B,EAAE,4BAA4BkB,SAC7BK,eAAeK,kCACf5B,EAAE6B,QAAQV,GAAG,SAAUI,eAAeK,kCAG1C5B,EAAE,iBAAiBmB,GAAG,QAAS,WAC3BnB,EAAEoB,MAAMU,OAAO,gBAAgB5B,SAAS,uBACzCiB,GAAG,OAAQ,WACVnB,EAAEoB,MAAMU,OAAO,gBAAgBR,YAAY,uBAI/CtB,EAAE,qBAAqB+B,KAAK,WACxBC,MAAQhC,EAAEoB,MACVa,cAAgBD,MAAME,KAAK,aAAe,GAC1CC,eAAiBH,MAAME,KAAK,cAAgB,GAE5CF,MAAMI,gBAAgB,CAClBC,OAAQJ,cACRK,QAASH,qBAKnBnC,EAAEgB,UAAUG,GAAG,QAAS,iBAAkB,WACtCoB,QAAUvC,EAAEoB,MAEkC,GAA3CG,eAAeiB,KAAKC,qBACnBzC,EAAE,QAAQsB,YAAY,YACtBC,eAAeiB,KAAKC,oBAAsB,EAC1CC,WAAW,WACPH,QAAQjB,YAAY,WACpBtB,EAAE,cAAc2C,UACjB,OAGHD,WAAW,WACPH,QAAQrC,SAAS,YAClB,KAEH0C,IAAM,6BACN5C,EAAE4C,KAAKC,SAAS,QAAQC,MAAM,WAC1B9C,EAAE,QAAQsB,YAAY,YACtBC,eAAeiB,KAAKC,oBAAsB,EACtCC,WAAW,WACPH,QAAQjB,YAAY,WACpBtB,EAAE,cAAc2C,UAClB,OAGV3C,EAAE,QAAQE,SAAS,YACnBqB,eAAeiB,KAAKC,oBAAsB,KAIlDzC,EAAE6B,QAAQkB,OAAO,WAEbrC,IAAMG,KAAO,EAEsB,GAAhCb,EAAE,oBAAoBkB,QAAuC,GAAxBlB,EAAE,YAAYkB,SACpDO,QAAUzB,EAAE,WACZgD,WAAahD,EAAE,WAAWiD,KAAK,4BAA4BtB,KAAK,iBAC5DF,QAAQyB,SAAS,aAAmC,IAApBlD,EAAE6B,QAAQsB,QAC5C1B,QAAQH,YAAY,YAAYpB,SAAS,sBAChCuB,QAAQyB,SAAS,uBAAyBlD,EAAE6B,QAAQsB,QAAU,KAAqB,SAAdH,YAC9EvB,QAAQvB,SAAS,YAAYoB,YAAY,yBAKjDC,eAAiB,CACfiB,KAAK,CACDC,oBAAqB,GAGzBjB,oBAAoB,WACgB,GAA7BxB,EAAE,iBAAiBkB,SACpBV,qBAAsB,GAGxBR,EAAE,oBAAoB8C,MAAM,WACb9C,EAAEoB,MAEa,GAAvBZ,qBACDR,EAAE,QAAQE,SAAS,gBACnBM,qBAAsB,EACtBe,eAAe6B,mBAAmB,+BAElCpD,EAAE,QAAQsB,YAAY,gBACtBd,qBAAsB,EACtBe,eAAe6B,mBAAmB,gCAIpC,IAAIC,EAAuBC,YAAY,WACnCzB,OAAO0B,cAAc,IAAIC,MAAM,YACjC,KAGFd,WAAW,WACPe,cAAcJ,IAChB,QAIVD,mBAAoB,SAASM,GAC3B,IACE1D,EAAE2D,OAAO,CACLC,KAAM,4BACNF,QAASA,GACT,CACEG,KAAM,OACNC,MAAO,IACPC,UAAW,CACPC,KAAM,MACNC,MAAO,WAGjB,MAAOC,GACPC,QAAQC,IAAI"}

explorer/public/paper-dashboard/assets/js/paper-dashboard.min.js

@@ -0,0 +1,16 @@
+// =========================================================
+//  Paper Dashboard 2 - v2.0.0
+// =========================================================
+//
+//  Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+//  Copyright 2019 Creative Tim (https://www.creative-tim.com)
+//  Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+//
+//  Coded by Creative Tim
+//
+// =========================================================
+//
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+function hexToRGB(a,e){var i=parseInt(a.slice(1,3),16),n=parseInt(a.slice(3,5),16),s=parseInt(a.slice(5,7),16);return e?"rgba("+i+", "+n+", "+s+", "+e+")":"rgb("+i+", "+n+", "+s+")"}isWindows=-1<navigator.platform.indexOf("Win"),isWindows?($(".sidebar .sidebar-wrapper, .main-panel").perfectScrollbar(),$("html").addClass("perfect-scrollbar-on")):$("html").addClass("perfect-scrollbar-off"),transparent=!0,transparentDemo=!0,fixedTop=!1,navbar_initialized=!1,backgroundOrange=!1,sidebar_mini_active=!1,toggle_initialized=!1,seq=0,delays=80,durations=500,seq2=0,delays2=80,durations2=500,$(document).ready(function(){0==$(".full-screen-map").length&&0==$(".bd-docs").length&&$(".collapse").on("show.bs.collapse",function(){$(this).closest(".navbar").removeClass("navbar-transparent").addClass("bg-white")}).on("hide.bs.collapse",function(){$(this).closest(".navbar").addClass("navbar-transparent").removeClass("bg-white")}),paperDashboard.initMinimizeSidebar(),$navbar=$(".navbar[color-on-scroll]"),scroll_distance=$navbar.attr("color-on-scroll")||500,0!=$(".navbar[color-on-scroll]").length&&(paperDashboard.checkScrollForTransparentNavbar(),$(window).on("scroll",paperDashboard.checkScrollForTransparentNavbar)),$(".form-control").on("focus",function(){$(this).parent(".input-group").addClass("input-group-focus")}).on("blur",function(){$(this).parent(".input-group").removeClass("input-group-focus")}),$(".bootstrap-switch").each(function(){$this=$(this),data_on_label=$this.data("on-label")||"",data_off_label=$this.data("off-label")||"",$this.bootstrapSwitch({onText:data_on_label,offText:data_off_label})})}),$(document).on("click",".navbar-toggle",function(){$toggle=$(this),1==paperDashboard.misc.navbar_menu_visible?($("html").removeClass("nav-open"),paperDashboard.misc.navbar_menu_visible=0,setTimeout(function(){$toggle.removeClass("toggled"),$("#bodyClick").remove()},550)):(setTimeout(function(){$toggle.addClass("toggled")},580),div='<div id="bodyClick"></div>',$(div).appendTo("body").click(function(){$("html").removeClass("nav-open"),paperDashboard.misc.navbar_menu_visible=0,setTimeout(function(){$toggle.removeClass("toggled"),$("#bodyClick").remove()},550)}),$("html").addClass("nav-open"),paperDashboard.misc.navbar_menu_visible=1)}),$(window).resize(function(){seq=seq2=0,0==$(".full-screen-map").length&&0==$(".bd-docs").length&&($navbar=$(".navbar"),isExpanded=$(".navbar").find('[data-toggle="collapse"]').attr("aria-expanded"),$navbar.hasClass("bg-white")&&991<$(window).width()?$navbar.removeClass("bg-white").addClass("navbar-transparent"):$navbar.hasClass("navbar-transparent")&&$(window).width()<991&&"false"!=isExpanded&&$navbar.addClass("bg-white").removeClass("navbar-transparent"))}),paperDashboard={misc:{navbar_menu_visible:0},initMinimizeSidebar:function(){0!=$(".sidebar-mini").length&&(sidebar_mini_active=!0),$("#minimizeSidebar").click(function(){$(this);1==sidebar_mini_active?($("body").addClass("sidebar-mini"),sidebar_mini_active=!0,paperDashboard.showSidebarMessage("Sidebar mini activated...")):($("body").removeClass("sidebar-mini"),sidebar_mini_active=!1,paperDashboard.showSidebarMessage("Sidebar mini deactivated..."));var a=setInterval(function(){window.dispatchEvent(new Event("resize"))},180);setTimeout(function(){clearInterval(a)},1e3)})},showSidebarMessage:function(a){try{$.notify({icon:"now-ui-icons ui-1_bell-53",message:a},{type:"info",timer:4e3,placement:{from:"top",align:"right"}})}catch(a){console.log("Notify library is missing, please make sure you have the notifications library added.")}}};
+//# sourceMappingURL=_site_dashboard_free/assets/js/dashboard-free.js.map

explorer/public/paper-dashboard/assets/js/plugins/bootstrap-notify.js

@@ -0,0 +1,432 @@
+/*
+
+
+
+     Creative Tim Modifications
+
+     Lines: 238, 239 was changed from top: 5px to top: 50% and we added margin-top: -13px. In this way the close button will be aligned vertically
+     Line:222 - modified when the icon is set, we add the class "alert-with-icon", so there will be enough space for the icon.
+
+
+
+
+*/
+
+
+/*
+ * Project: Bootstrap Notify = v3.1.5
+ * Description: Turns standard Bootstrap alerts into "Growl-like" notifications.
+ * Author: Mouse0270 aka Robert McIntosh
+ * License: MIT License
+ * Website: https://github.com/mouse0270/bootstrap-growl
+ */
+
+/* global define:false, require: false, jQuery:false */
+
+(function(factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    // Node/CommonJS
+    factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+}(function($) {
+  // Create the defaults once
+  var defaults = {
+    element: 'body',
+    position: null,
+    type: "info",
+    allow_dismiss: true,
+    allow_duplicates: true,
+    newest_on_top: false,
+    showProgressbar: false,
+    placement: {
+      from: "top",
+      align: "right"
+    },
+    offset: 20,
+    spacing: 10,
+    z_index: 1060,
+    delay: 5000,
+    timer: 1000,
+    url_target: '_blank',
+    mouse_over: null,
+    animate: {
+      enter: 'animated fadeInDown',
+      exit: 'animated fadeOutUp'
+    },
+    onShow: null,
+    onShown: null,
+    onClose: null,
+    onClosed: null,
+    onClick: null,
+    icon_type: 'class',
+    template: '<div data-notify="container" class="col-11 col-md-4 alert alert-{0}" role="alert"><button type="button" aria-hidden="true" class="close" data-notify="dismiss"><i class="nc-icon nc-simple-remove"></i></button><span data-notify="icon"></span> <span data-notify="title">{1}</span> <span data-notify="message">{2}</span><div class="progress" data-notify="progressbar"><div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div><a href="{3}" target="{4}" data-notify="url"></a></div>'
+  };
+
+  String.format = function() {
+    var args = arguments;
+    var str = arguments[0];
+    return str.replace(/(\{\{\d\}\}|\{\d\})/g, function(str) {
+      if (str.substring(0, 2) === "{{") return str;
+      var num = parseInt(str.match(/\d/)[0]);
+      return args[num + 1];
+    });
+  };
+
+  function isDuplicateNotification(notification) {
+    var isDupe = false;
+
+    $('[data-notify="container"]').each(function(i, el) {
+      var $el = $(el);
+      var title = $el.find('[data-notify="title"]').html().trim();
+      var message = $el.find('[data-notify="message"]').html().trim();
+
+      // The input string might be different than the actual parsed HTML string!
+      // (<br> vs <br /> for example)
+      // So we have to force-parse this as HTML here!
+      var isSameTitle = title === $("<div>" + notification.settings.content.title + "</div>").html().trim();
+      var isSameMsg = message === $("<div>" + notification.settings.content.message + "</div>").html().trim();
+      var isSameType = $el.hasClass('alert-' + notification.settings.type);
+
+      if (isSameTitle && isSameMsg && isSameType) {
+        //we found the dupe. Set the var and stop checking.
+        isDupe = true;
+      }
+      return !isDupe;
+    });
+
+    return isDupe;
+  }
+
+  function Notify(element, content, options) {
+    // Setup Content of Notify
+    var contentObj = {
+      content: {
+        message: typeof content === 'object' ? content.message : content,
+        title: content.title ? content.title : '',
+        icon: content.icon ? content.icon : '',
+        url: content.url ? content.url : '#',
+        target: content.target ? content.target : '-'
+      }
+    };
+
+    options = $.extend(true, {}, contentObj, options);
+    this.settings = $.extend(true, {}, defaults, options);
+    this._defaults = defaults;
+    if (this.settings.content.target === "-") {
+      this.settings.content.target = this.settings.url_target;
+    }
+    this.animations = {
+      start: 'webkitAnimationStart oanimationstart MSAnimationStart animationstart',
+      end: 'webkitAnimationEnd oanimationend MSAnimationEnd animationend'
+    };
+
+    if (typeof this.settings.offset === 'number') {
+      this.settings.offset = {
+        x: this.settings.offset,
+        y: this.settings.offset
+      };
+    }
+
+    //if duplicate messages are not allowed, then only continue if this new message is not a duplicate of one that it already showing
+    if (this.settings.allow_duplicates || (!this.settings.allow_duplicates && !isDuplicateNotification(this))) {
+      this.init();
+    }
+  }
+
+  $.extend(Notify.prototype, {
+    init: function() {
+      var self = this;
+
+      this.buildNotify();
+      if (this.settings.content.icon) {
+        this.setIcon();
+      }
+      if (this.settings.content.url != "#") {
+        this.styleURL();
+      }
+      this.styleDismiss();
+      this.placement();
+      this.bind();
+
+      this.notify = {
+        $ele: this.$ele,
+        update: function(command, update) {
+          var commands = {};
+          if (typeof command === "string") {
+            commands[command] = update;
+          } else {
+            commands = command;
+          }
+          for (var cmd in commands) {
+            switch (cmd) {
+              case "type":
+                this.$ele.removeClass('alert-' + self.settings.type);
+                this.$ele.find('[data-notify="progressbar"] > .progress-bar').removeClass('progress-bar-' + self.settings.type);
+                self.settings.type = commands[cmd];
+                this.$ele.addClass('alert-' + commands[cmd]).find('[data-notify="progressbar"] > .progress-bar').addClass('progress-bar-' + commands[cmd]);
+                break;
+              case "icon":
+                var $icon = this.$ele.find('[data-notify="icon"]');
+                if (self.settings.icon_type.toLowerCase() === 'class') {
+                  $icon.removeClass(self.settings.content.icon).addClass(commands[cmd]);
+                } else {
+                  if (!$icon.is('img')) {
+                    $icon.find('img');
+                  }
+                  $icon.attr('src', commands[cmd]);
+                }
+                self.settings.content.icon = commands[command];
+                break;
+              case "progress":
+                var newDelay = self.settings.delay - (self.settings.delay * (commands[cmd] / 100));
+                this.$ele.data('notify-delay', newDelay);
+                this.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', commands[cmd]).css('width', commands[cmd] + '%');
+                break;
+              case "url":
+                this.$ele.find('[data-notify="url"]').attr('href', commands[cmd]);
+                break;
+              case "target":
+                this.$ele.find('[data-notify="url"]').attr('target', commands[cmd]);
+                break;
+              default:
+                this.$ele.find('[data-notify="' + cmd + '"]').html(commands[cmd]);
+            }
+          }
+          var posX = this.$ele.outerHeight() + parseInt(self.settings.spacing) + parseInt(self.settings.offset.y);
+          self.reposition(posX);
+        },
+        close: function() {
+          self.close();
+        }
+      };
+
+    },
+    buildNotify: function() {
+      var content = this.settings.content;
+      this.$ele = $(String.format(this.settings.template, this.settings.type, content.title, content.message, content.url, content.target));
+      this.$ele.attr('data-notify-position', this.settings.placement.from + '-' + this.settings.placement.align);
+      if (!this.settings.allow_dismiss) {
+        this.$ele.find('[data-notify="dismiss"]').css('display', 'none');
+      }
+      if ((this.settings.delay <= 0 && !this.settings.showProgressbar) || !this.settings.showProgressbar) {
+        this.$ele.find('[data-notify="progressbar"]').remove();
+      }
+    },
+    setIcon: function() {
+      this.$ele.addClass('alert-with-icon');
+
+      if (this.settings.icon_type.toLowerCase() === 'class') {
+        this.$ele.find('[data-notify="icon"]').addClass(this.settings.content.icon);
+      } else {
+        if (this.$ele.find('[data-notify="icon"]').is('img')) {
+          this.$ele.find('[data-notify="icon"]').attr('src', this.settings.content.icon);
+        } else {
+          this.$ele.find('[data-notify="icon"]').append('<img src="' + this.settings.content.icon + '" alt="Notify Icon" />');
+        }
+      }
+    },
+    styleDismiss: function() {
+      this.$ele.find('[data-notify="dismiss"]').css({
+        position: 'absolute',
+        right: '10px',
+        top: '50%',
+        marginTop: '-13px',
+        zIndex: this.settings.z_index + 2
+      });
+    },
+    styleURL: function() {
+      this.$ele.find('[data-notify="url"]').css({
+        backgroundImage: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
+        height: '100%',
+        left: 0,
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        zIndex: this.settings.z_index + 1
+      });
+    },
+    placement: function() {
+      var self = this,
+        offsetAmt = this.settings.offset.y,
+        css = {
+          display: 'inline-block',
+          margin: '0px auto',
+          position: this.settings.position ? this.settings.position : (this.settings.element === 'body' ? 'fixed' : 'absolute'),
+          transition: 'all .5s ease-in-out',
+          zIndex: this.settings.z_index
+        },
+        hasAnimation = false,
+        settings = this.settings;
+
+      $('[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])').each(function() {
+        offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + parseInt($(this).outerHeight()) + parseInt(settings.spacing));
+      });
+      if (this.settings.newest_on_top === true) {
+        offsetAmt = this.settings.offset.y;
+      }
+      css[this.settings.placement.from] = offsetAmt + 'px';
+
+      switch (this.settings.placement.align) {
+        case "left":
+        case "right":
+          css[this.settings.placement.align] = this.settings.offset.x + 'px';
+          break;
+        case "center":
+          css.left = 0;
+          css.right = 0;
+          break;
+      }
+      this.$ele.css(css).addClass(this.settings.animate.enter);
+      $.each(Array('webkit-', 'moz-', 'o-', 'ms-', ''), function(index, prefix) {
+        self.$ele[0].style[prefix + 'AnimationIterationCount'] = 1;
+      });
+
+      $(this.settings.element).append(this.$ele);
+
+      if (this.settings.newest_on_top === true) {
+        offsetAmt = (parseInt(offsetAmt) + parseInt(this.settings.spacing)) + this.$ele.outerHeight();
+        this.reposition(offsetAmt);
+      }
+
+      if ($.isFunction(self.settings.onShow)) {
+        self.settings.onShow.call(this.$ele);
+      }
+
+      this.$ele.one(this.animations.start, function() {
+        hasAnimation = true;
+      }).one(this.animations.end, function() {
+        self.$ele.removeClass(self.settings.animate.enter);
+        if ($.isFunction(self.settings.onShown)) {
+          self.settings.onShown.call(this);
+        }
+      });
+
+      setTimeout(function() {
+        if (!hasAnimation) {
+          if ($.isFunction(self.settings.onShown)) {
+            self.settings.onShown.call(this);
+          }
+        }
+      }, 600);
+    },
+    bind: function() {
+      var self = this;
+
+      this.$ele.find('[data-notify="dismiss"]').on('click', function() {
+        self.close();
+      });
+
+      if ($.isFunction(self.settings.onClick)) {
+        this.$ele.on('click', function(event) {
+          if (event.target != self.$ele.find('[data-notify="dismiss"]')[0]) {
+            self.settings.onClick.call(this, event);
+          }
+        });
+      }
+
+      this.$ele.mouseover(function() {
+        $(this).data('data-hover', "true");
+      }).mouseout(function() {
+        $(this).data('data-hover', "false");
+      });
+      this.$ele.data('data-hover', "false");
+
+      if (this.settings.delay > 0) {
+        self.$ele.data('notify-delay', self.settings.delay);
+        var timer = setInterval(function() {
+          var delay = parseInt(self.$ele.data('notify-delay')) - self.settings.timer;
+          if ((self.$ele.data('data-hover') === 'false' && self.settings.mouse_over === "pause") || self.settings.mouse_over != "pause") {
+            var percent = ((self.settings.delay - delay) / self.settings.delay) * 100;
+            self.$ele.data('notify-delay', delay);
+            self.$ele.find('[data-notify="progressbar"] > div').attr('aria-valuenow', percent).css('width', percent + '%');
+          }
+          if (delay <= -(self.settings.timer)) {
+            clearInterval(timer);
+            self.close();
+          }
+        }, self.settings.timer);
+      }
+    },
+    close: function() {
+      var self = this,
+        posX = parseInt(this.$ele.css(this.settings.placement.from)),
+        hasAnimation = false;
+
+      this.$ele.attr('data-closing', 'true').addClass(this.settings.animate.exit);
+      self.reposition(posX);
+
+      if ($.isFunction(self.settings.onClose)) {
+        self.settings.onClose.call(this.$ele);
+      }
+
+      this.$ele.one(this.animations.start, function() {
+        hasAnimation = true;
+      }).one(this.animations.end, function() {
+        $(this).remove();
+        if ($.isFunction(self.settings.onClosed)) {
+          self.settings.onClosed.call(this);
+        }
+      });
+
+      setTimeout(function() {
+        if (!hasAnimation) {
+          self.$ele.remove();
+          if (self.settings.onClosed) {
+            self.settings.onClosed(self.$ele);
+          }
+        }
+      }, 600);
+    },
+    reposition: function(posX) {
+      var self = this,
+        notifies = '[data-notify-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]:not([data-closing="true"])',
+        $elements = this.$ele.nextAll(notifies);
+      if (this.settings.newest_on_top === true) {
+        $elements = this.$ele.prevAll(notifies);
+      }
+      $elements.each(function() {
+        $(this).css(self.settings.placement.from, posX);
+        posX = (parseInt(posX) + parseInt(self.settings.spacing)) + $(this).outerHeight();
+      });
+    }
+  });
+
+  $.notify = function(content, options) {
+    var plugin = new Notify(this, content, options);
+    return plugin.notify;
+  };
+  $.notifyDefaults = function(options) {
+    defaults = $.extend(true, {}, defaults, options);
+    return defaults;
+  };
+
+  $.notifyClose = function(selector) {
+
+    if (typeof selector === "undefined" || selector === "all") {
+      $('[data-notify]').find('[data-notify="dismiss"]').trigger('click');
+    } else if (selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger') {
+      $('.alert-' + selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click');
+    } else if (selector) {
+      $(selector + '[data-notify]').find('[data-notify="dismiss"]').trigger('click');
+    } else {
+      $('[data-notify-position="' + selector + '"]').find('[data-notify="dismiss"]').trigger('click');
+    }
+  };
+
+  $.notifyCloseExcept = function(selector) {
+
+    if (selector === 'success' || selector === 'info' || selector === 'warning' || selector === 'danger') {
+      $('[data-notify]').not('.alert-' + selector).find('[data-notify="dismiss"]').trigger('click');
+    } else {
+      $('[data-notify]').not(selector).find('[data-notify="dismiss"]').trigger('click');
+    }
+  };
+
+
+}));

explorer/public/paper-dashboard/assets/scss/paper-dashboard.scss

@@ -0,0 +1,53 @@
+/*!
+
+ =========================================================
+ * Paper Dashboard 2 - v2.0.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ * Copyright 2018 Creative Tim (http://www.creative-tim.com)
+
+ * Designed by www.invisionapp.com Coded by www.creative-tim.com
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+ */
+
+@import 'paper-dashboard/variables';
+@import 'paper-dashboard/mixins';
+
+// Plugins CSS
+@import "paper-dashboard/plugins/plugin-animate-bootstrap-notify";
+@import "paper-dashboard/plugins/plugin-perfect-scrollbar";
+
+// Core CSS
+@import "paper-dashboard/buttons";
+@import "paper-dashboard/inputs";
+@import "paper-dashboard/typography";
+@import "paper-dashboard/misc";
+@import "paper-dashboard/checkboxes-radio";
+
+
+// components
+@import "paper-dashboard/navbar";
+@import "paper-dashboard/page-header";
+@import "paper-dashboard/dropdown";
+@import "paper-dashboard/alerts";
+@import "paper-dashboard/images";
+@import "paper-dashboard/nucleo-outline";
+@import "paper-dashboard/tables";
+@import "paper-dashboard/sidebar-and-main-panel";
+@import "paper-dashboard/footers";
+@import "paper-dashboard/fixed-plugin";
+
+// cards
+@import "paper-dashboard/cards";
+@import "paper-dashboard/cards/card-plain";
+@import "paper-dashboard/cards/card-chart";
+@import "paper-dashboard/cards/card-user";
+@import "paper-dashboard/cards/card-map";
+@import "paper-dashboard/cards/card-stats";
+
+@import "paper-dashboard/responsive";

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_alerts.scss

@@ -0,0 +1,74 @@
+.alert{
+    border: 0;
+    border-radius: $border-radius-small;
+    color: $white-color;
+    padding-top: .9rem;
+    padding-bottom: .9rem;
+    position: relative;
+
+    &.alert-success{
+        background-color: lighten($success-color, 5%);
+    }
+
+    &.alert-danger{
+        background-color: lighten($danger-color, 5%);
+    }
+
+    &.alert-warning{
+        background-color: lighten($warning-color, 5%);
+    }
+
+    &.alert-info{
+        background-color: lighten($info-color, 5%);
+    }
+
+    &.alert-primary{
+        background-color: lighten($primary-color, 5%);
+    }
+
+    .close{
+      color: $white-color;
+      opacity: .9;
+      text-shadow: none;
+      line-height: 0;
+      outline: 0;
+
+      i.fa,
+      i.nc-icon{
+          font-size: 14px !important;
+      }
+
+      &:hover,
+      &:focus {
+        opacity: 1;
+      }
+    }
+
+    span[data-notify="icon"]{
+        font-size: 27px;
+        display: block;
+        left: 19px;
+        position: absolute;
+        top: 50%;
+        margin-top: -11px;
+    }
+
+    button.close{
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        margin-top: -13px;
+        width: 25px;
+        height: 25px;
+        padding: 3px;
+    }
+
+    .close ~ span{
+        display: block;
+        max-width: 89%;
+    }
+
+    &.alert-with-icon{
+        padding-left: 65px;
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_animated-buttons.scss

@@ -0,0 +1,71 @@
+//animations
+
+.icon-property{
+    @include transition($slow-transition-time, $transition-bezier);
+    position: relative;
+    display: inline-block;
+}
+
+#animated-buttons{
+    .btn{
+        i{
+            position: relative;
+            top: 3px;
+            margin-top: -3px;
+        }
+    }
+}
+
+.btn-rotate{
+    i{
+        @extend .icon-property;
+    }
+
+    &:hover,
+    &:focus{
+        i{
+            @include rotate-53();
+        }
+    }
+}
+
+.btn-magnify{
+    i{
+        @extend .icon-property;
+    }
+
+    &:hover,
+    &:focus{
+        i{
+            @include transform-scale(1.22);
+        }
+    }
+}
+
+.btn-move-left{
+    i{
+        @extend .icon-property;
+        margin-right: 0;
+    }
+
+    &:hover,
+    &:focus{
+        i{
+            @include transform-translate-x(-5px);
+        }
+    }
+}
+
+.btn-move-right{
+    i{
+        @extend .icon-property;
+        margin-right: 0;
+    }
+
+    &:hover,
+    &:focus{
+        i{
+            @include transform-translate-x(5px);
+        }
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_buttons.scss

@@ -0,0 +1,234 @@
+.btn,
+.navbar .navbar-nav > a.btn{
+    border-width: $border-thick;
+    font-weight: $font-weight-semi;
+    font-size: $font-size-small;
+    line-height: $line-height;
+    text-transform: uppercase;
+    border: none;
+    margin: 10px 1px;
+    border-radius: $border-radius-small;
+    padding: $padding-btn-vertical $padding-btn-horizontal;
+    cursor: pointer;
+
+    @include btn-styles($default-color, $default-states-color);
+    @include transition($fast-transition-time, linear);
+
+    &:hover,
+    &:focus{
+        @include opacity(1);
+        outline: 0 !important;
+    }
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+         @include box-shadow(none);
+         outline: 0 !important;
+    }
+
+    .badge{
+      margin: 0;
+    }
+
+    &.btn-icon {
+        // see above for color variations
+        height: $btn-icon-size-regular;
+        min-width: $btn-icon-size-regular;
+        width: $btn-icon-size-regular;
+        padding: 0;
+        font-size: $btn-icon-font-size-regular;
+        overflow: hidden;
+        position: relative;
+        line-height: normal;
+
+        &.btn-simple{
+            padding: 0;
+        }
+
+        &.btn-sm{
+            height: $btn-icon-size-small;
+            min-width: $btn-icon-size-small;
+            width: $btn-icon-size-small;
+
+            .fa,
+            .far,
+            .fas,
+            .nc-icon{
+                font-size: $btn-icon-font-size-small;
+            }
+        }
+
+        &.btn-lg{
+            height: $btn-icon-size-lg;
+            min-width: $btn-icon-size-lg;
+            width: $btn-icon-size-lg;
+
+            .fa,
+            .far,
+            .fas,
+            .nc-icon{
+                font-size: $btn-icon-font-size-lg;
+            }
+        }
+
+        &:not(.btn-footer) .nc-icon,
+        &:not(.btn-footer) .fa,
+        &:not(.btn-footer) .far,
+        &:not(.btn-footer) .fas{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-12px, -12px);
+            line-height: 1.5626rem;
+            width: 24px;
+        }
+
+        &.btn-neutral {
+          font-size: 20px;
+        }
+    }
+
+    &:not(.btn-icon) .nc-icon{
+        position: relative;
+        top: 1px;
+    }
+}
+
+// Apply the mixin to the buttons
+// .btn-default { @include btn-styles($default-color, $default-states-color); }
+.btn-primary { @include btn-styles($primary-color, $primary-states-color); }
+.btn-success { @include btn-styles($success-color, $success-states-color); }
+.btn-info    { @include btn-styles($info-color, $info-states-color); }
+.btn-warning { @include btn-styles($warning-color, $warning-states-color); }
+.btn-danger  { @include btn-styles($danger-color, $danger-states-color); }
+// .btn-neutral { @include btn-styles($white-color, $white-color); }
+
+.btn-outline-default { @include btn-outline-styles($default-color, $default-states-color); }
+.btn-outline-primary { @include btn-outline-styles($primary-color, $primary-states-color); }
+.btn-outline-success { @include btn-outline-styles($success-color, $success-states-color); }
+.btn-outline-info    { @include btn-outline-styles($info-color, $info-states-color); }
+.btn-outline-warning { @include btn-outline-styles($warning-color, $warning-states-color); }
+.btn-outline-danger  { @include btn-outline-styles($danger-color, $danger-states-color); }
+.btn-outline-neutral { @include btn-outline-styles($white-color, $default-states-color);
+    &:hover,
+    &:focus{
+        color: $default-states-color;
+        background-color: $white-color;
+    }
+}
+.btn-neutral {
+    @include btn-styles($white-color, $white-color);
+    color: $default-color;
+    &:hover,
+    &:focus{
+        color: $default-states-color;
+    }
+
+    &.btn-border{
+        &:hover,
+        &:focus{
+            color: $default-color;
+        }
+
+        &:active,
+        &.active,
+        .open > &.dropdown-toggle{
+             background-color: $white-color;
+             color: $default-color;
+        }
+    }
+
+    &.btn-link:active,
+    &.btn-link.active{
+        background-color: transparent;
+    }
+}
+
+.btn{
+     &:disabled,
+     &[disabled],
+     &.disabled{
+        @include opacity(.5);
+        pointer-events: none;
+    }
+}
+.btn-simple{
+    border: $border;
+    border-color: $default-color;
+    padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
+    background-color: $transparent-bg;
+}
+
+.btn-simple,
+.btn-link{
+    &.disabled,
+    &:disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &.focus,
+        &:active,
+        &.active {
+            background-color: $transparent-bg;
+        }
+    }
+}
+
+.btn-link{
+  border: $none;
+  padding: $padding-base-vertical $padding-base-horizontal;
+  background-color: $transparent-bg;
+}
+
+.btn-lg{
+   @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
+}
+.btn-sm{
+    @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small);
+}
+
+.btn-wd {
+    min-width: 140px;
+}
+.btn-group.select{
+    width: 100%;
+}
+.btn-group.select .btn{
+    text-align: left;
+}
+.btn-group.select .caret{
+    position: absolute;
+    top: 50%;
+    margin-top: -1px;
+    right: 8px;
+}
+.btn-group {
+  .btn + .btn {
+    margin-left: -3px;
+  }
+  .btn {
+    &:focus {
+      background-color: $info-color !important;
+    }
+  }
+}
+
+
+.btn-round{
+    border-width: $border-thin;
+    border-radius: $btn-round-radius;
+    padding-right: $padding-round-horizontal;
+    padding-left: $padding-round-horizontal;
+
+    &.btn-simple{
+        padding: $padding-btn-vertical - 1  $padding-round-horizontal - 1;
+    }
+}
+
+.no-caret {
+  &.dropdown-toggle::after {
+    display: none;
+  }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_cards.scss

@@ -0,0 +1,140 @@
+.card{
+  border-radius: $border-radius-extreme;
+  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15);
+  background-color: #FFFFFF;
+  color: $card-black-color;
+  margin-bottom: 20px;
+  position: relative;
+  border: 0 none;
+
+  -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+  -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+  -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+  -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+  transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
+
+    .card-body{
+        padding: 15px 15px 10px 15px;
+
+        &.table-full-width{
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+    .card-header{
+      &:not([data-background-color]){
+        background-color: transparent;
+      }
+      padding: 15px 15px 0;
+      border: 0;
+
+      .card-title{
+          margin-top: 10px;
+      }
+    }
+
+    .map{
+        border-radius: $border-radius-small;
+
+        &.map-big{
+          height: 400px;
+        }
+    }
+
+    &[data-background-color="orange"]{
+        background-color: $primary-color;
+
+        .card-header{
+            background-color: $primary-color;
+        }
+
+        .card-footer{
+            .stats{
+                color: $white-color;
+            }
+        }
+    }
+
+    &[data-background-color="red"]{
+        background-color: $danger-color;
+    }
+
+    &[data-background-color="yellow"]{
+        background-color: $warning-color;
+    }
+
+    &[data-background-color="blue"]{
+        background-color: $info-color;
+    }
+
+    &[data-background-color="green"]{
+        background-color: $success-color;
+    }
+
+    .image{
+        overflow: hidden;
+        height: 200px;
+        position: relative;
+    }
+
+    .avatar{
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+        border-radius: 50%;
+        margin-bottom: 15px;
+    }
+
+    .numbers {
+      font-size: 2em;
+    }
+
+    .big-title {
+      font-size: 12px;
+      text-align: center;
+      font-weight: 500;
+      padding-bottom: 15px;
+    }
+
+    label{
+        font-size: $font-size-small;
+        margin-bottom: 5px;
+        color: $dark-gray;
+    }
+
+    .card-footer{
+        background-color: transparent;
+        border: 0;
+
+
+        .stats{
+            i{
+                margin-right: 5px;
+                position: relative;
+                top: 0px;
+                color: $default-color;
+            }
+        }
+
+        .btn{
+            margin: 0;
+        }
+    }
+
+    &.card-plain{
+        background-color: transparent;
+        box-shadow: none;
+        border-radius: 0;
+
+
+        .card-body{
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+
+        img{
+            border-radius: $border-radius-extreme;
+        }
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_checkboxes-radio.scss

@@ -0,0 +1,142 @@
+.from-check,
+.form-check-radio {
+    margin-bottom: 12px;
+    position: relative;
+}
+
+.form-check {
+  padding-left: 0;
+  margin-bottom: .5rem;
+
+    .form-check-label{
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        padding-left: 35px;
+        line-height: 26px;
+        margin-bottom: 0;
+    }
+
+    .form-check-sign::before,
+    .form-check-sign::after {
+        content: " ";
+        display: inline-block;
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        left: 0;
+        cursor: pointer;
+        border-radius: 6px;
+        top: 0;
+        background-color: #AAA7A4;
+        -webkit-transition: opacity 0.3s linear;
+        -moz-transition: opacity 0.3s linear;
+        -o-transition: opacity 0.3s linear;
+        -ms-transition: opacity 0.3s linear;
+        transition: opacity 0.3s linear;
+    }
+    .form-check-sign::after {
+        font-family: 'FontAwesome';
+        content: "\f00c";
+        top: -1px;
+        text-align: center;
+        font-size: 15px;
+        opacity: 0;
+        color: #FFF;
+        border: 0;
+        background-color: inherit;
+    }
+    &.disabled{
+        .form-check-label{
+            color: $dark-gray;
+            opacity: .5;
+            cursor: not-allowed;
+        }
+    }
+
+}
+
+.form-check.disabled .form-check-label,
+.form-check.disabled .form-check-label {
+
+}
+
+.form-check input[type="checkbox"],
+.form-check-radio input[type="radio"]{
+    opacity: 0;
+    position: absolute;
+    visibility: hidden;
+}
+.form-check input[type="checkbox"]:checked + .form-check-sign::after{
+    opacity: 1;
+}
+
+.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
+.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
+    cursor: not-allowed;
+}
+
+.form-check .form-check-label input[type="checkbox"]:disabled + .form-check-sign,
+.form-check-radio input[type="radio"]:disabled + .form-check-sign{
+    pointer-events: none !important;
+}
+
+.form-check-radio{
+  margin-left: -3px;
+
+    .form-check-label{
+        padding-left: 2rem;
+    }
+    &.disabled{
+        .form-check-label{
+            color: $dark-gray;
+            opacity: .5;
+            cursor: not-allowed;
+        }
+    }
+}
+
+.form-check-radio .form-check-sign::before{
+    font-family: 'FontAwesome';
+    content: "\f10c";
+    font-size: 22px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-block;
+    position: absolute;
+    opacity: .50;
+    left: 5px;
+    top: -5px;
+}
+
+.form-check-label input[type="checkbox"]:checked + .form-check-sign:before{
+    background-color: #66615B;
+}
+
+.form-check-radio input[type="radio"] + .form-check-sign:after,
+.form-check-radio input[type="radio"] {
+    opacity: 0;
+    @include transition-opacity(0.3s, linear);
+    content:" ";
+    display: block;
+}
+
+.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
+    font-family: 'FontAwesome';
+    content: "\f192";
+    top: -5px;
+    position: absolute;
+    left: 5px;
+    opacity: 1;
+    font-size: 22px;
+}
+
+.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
+    opacity: 1;
+}
+
+
+.form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
+.form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
+    color: $dark-gray;
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_dropdown.scss

@@ -0,0 +1,480 @@
+.dropdown,
+.dropup,
+.bootstrap-select{
+    .dropdown-menu{
+        display: block;
+        @include opacity(0);
+        @include box-shadow($dropdown-shadow);
+        visibility: hidden;
+        position: absolute;
+        transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
+
+        &[x-placement="top-start"]{
+            @include transform-translate-y-dropdown(0px);
+
+        }
+        &[x-placement="bottom-start"]{
+            @include transform-translate-y-dropdown(0px);
+        }
+    }
+
+    &.show .dropdown-menu{
+        @include opacity(1);
+        visibility: visible;
+
+        &[x-placement="top-start"]{
+            @include transform-translate-y-dropdown(-50px);
+            top: auto !important;
+            bottom: 0 !important;
+
+        }
+        &[x-placement="bottom-start"]{
+            @include transform-translate-y-dropdown(50px);
+            bottom: auto !important;
+            top: 0 !important;
+        }
+    }
+
+}
+
+.dropup .dropdown-menu,
+.dropdown-btn .dropdown-menu{
+    @include transform-translate-y-dropdown(0px);
+    top: auto !important;
+    bottom: 0 !important;
+
+}
+
+.dropup.show .dropdown-menu,
+.dropdown-btn.show .dropdown-menu{
+    opacity: 1;
+    visibility: visible;
+
+    .dropdown-menu.inner{
+      @include transform-translate-y(0px);
+    }
+}
+
+.bootstrap-select.show{
+  .dropdown-menu.show{
+    &[x-placement="top-start"]{
+        @include transform-translate-y-dropdown(-60px);
+        top: auto !important;
+        bottom: 0 !important;
+    }
+
+    li:last-child {
+      a:hover{
+        border-radius: 0 0 12px 12px;
+      }
+    }
+  }
+}
+
+.bootstrap-select.dropup.show{
+  &:before {
+    top: -1px !important;
+  }
+
+  &:after {
+    top: -2px !important;
+  }
+}
+.dropdown-menu{
+    background-color: $white-color;
+    border: 0 none;
+    border-radius: $border-radius-extreme;
+    margin-top: 10px;
+    padding: 0px;
+
+    .divider{
+        background-color: $medium-pale-bg;
+        margin: 0px;
+    }
+
+    .dropdown-header{
+        color: $dark-gray;
+        font-size: $font-size-small;
+        padding: $padding-dropdown-vertical $padding-dropdown-horizontal;
+    }
+
+    .no-notification{
+        color: #9A9A9A;
+        font-size: 1.2em;
+        padding: 30px 30px;
+        text-align: center;
+    }
+
+    .dropdown-item{
+        color: $font-color;
+        font-size: $font-size-base;
+        padding: 10px 45px 10px 15px;
+        clear: both;
+        white-space: nowrap;
+        width: 100%;
+        display: block;
+
+       img{
+           margin-top: -3px;
+       }
+
+    }
+    .dropdown-item:focus{
+        outline: 0 !important;
+    }
+
+    .btn-group.select &{
+        min-width: 100%;
+    }
+
+    .dropdown-item:first-child{
+       border-top-left-radius: $border-radius-extreme;
+       border-top-right-radius: $border-radius-extreme;
+    }
+
+    .dropdown-item:last-child{
+        border-bottom-left-radius: $border-radius-extreme;
+        border-bottom-right-radius: $border-radius-extreme;
+    }
+
+    .select & .dropdown-item:first-child{
+        border-radius: 0;
+        border-bottom: 0 none;
+    }
+
+    .dropdown-item:hover,
+    .dropdown-item:focus{
+        color: $white-color !important;
+        opacity: 1;
+        text-decoration: none;
+
+    }
+    .dropdown-item:hover,
+    .dropdown-item:focus{
+        background-color: $default-color;
+    }
+
+    &.dropdown-primary .dropdown-item:hover,
+    &.dropdown-primary .dropdown-item:focus{
+        background-color: $bg-primary;
+    }
+    &.dropdown-info .dropdown-item:hover,
+    &.dropdown-info .dropdown-item:focus{
+        background-color: $bg-info;
+    }
+    &.dropdown-success .dropdown-item:hover,
+    &.dropdown-success .dropdown-item:focus{
+        background-color: $bg-success;
+    }
+    &.dropdown-warning .dropdown-item:hover,
+    &.dropdown-warning .dropdown-item:focus{
+        background-color: $bg-warning;
+    }
+    &.dropdown-danger .dropdown-item:hover,
+    &.dropdown-danger .dropdown-item:focus{
+        background-color: $bg-danger;
+    }
+
+}
+.dropdown-divider{
+    margin: 0 !important;
+}
+
+//fix bug for the select items in btn-group
+.btn-group.select{
+    // overflow: hidden;
+}
+.btn-group.select.open{
+    overflow: visible;
+}
+.dropdown-menu-right{
+    right: -2px;
+    left: auto;
+}
+
+.navbar-nav .dropdown-menu:before,
+.dropdown .dropdown-menu[x-placement="bottom-start"]:before,
+.dropdown .dropdown-menu[x-placement="bottom-end"]:before,
+.card.card-just-text .dropdown .dropdown-menu:before,
+.card-just-text .dropdown .dropdown-menu:before,
+.dropdown-btn .dropdown-menu:before{
+    border-bottom: 11px solid $medium-pale-bg;
+    border-left: 11px solid rgba(0, 0, 0, 0);
+    border-right: 11px solid rgba(0, 0, 0, 0);
+    content: "";
+    display: inline-block;
+    position: absolute;
+    right: 12px;
+    top: -12px;
+}
+
+.navbar-nav .dropdown-menu:after,
+.dropdown .dropdown-menu[x-placement="bottom-start"]:after,
+.dropdown .dropdown-menu[x-placement="bottom-end"]:after,
+.card.card-just-text .dropdown .dropdown-menu:after,
+.card-just-text .dropdown .dropdown-menu:after,
+.dropdown-btn .dropdown-menu:after{
+    border-bottom: 11px solid $white-color;
+    border-left: 11px solid rgba(0, 0, 0, 0);
+    border-right: 11px solid rgba(0, 0, 0, 0);
+    content: "";
+    display: inline-block;
+    position: absolute;
+    right: 12px;
+    top: -11px;
+}
+
+.dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:before,
+.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:before{
+    left: 30px !important;
+    right: auto;
+}
+.dropdown .dropdown-menu.dropdown-notification[x-placement="top-start"]:after,
+.dropdown .dropdown-menu.dropdown-notification[x-placement="bottom-start"]:after{
+    left: 30px !important;
+    right: auto;
+}
+//  the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file
+//  code from _responsive.scss
+
+@media screen and (min-width: 768px){
+    .navbar-form {
+      margin-top: 21px;
+      margin-bottom: 21px;
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+    .navbar-search-form{
+      display: none;
+    }
+    .navbar-nav .dropdown-item .dropdown-menu,
+    .dropdown .dropdown-menu,
+    .dropdown-btn .dropdown-menu{
+      transform: translate3d(0px, -40px, 0px);
+      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
+    }
+    .navbar-nav .dropdown-item.show .dropdown-menu,
+    .dropdown.show .dropdown-menu,
+    .dropdown-btn.show .dropdown-menu{
+      transform: translate3d(0px, 0px, 0px);
+      visibility: visible !important;
+    }
+    .bootstrap-select .dropdown-menu{
+      -webkit-transition: all 150ms linear;
+      -moz-transition: all 150ms linear;
+      -o-transition: all 150ms linear;
+      -ms-transition: all 150ms linear;
+      transition: all 150ms linear;
+    }
+    .bootstrap-datetimepicker-widget{
+      visibility: visible !important;
+    }
+
+    .bootstrap-select .show .dropdown-menu{
+      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
+      transform: translate3d(0px, 0px, 0px);
+    }
+
+    .navbar-nav.navbar-right li .dropdown-menu:before,
+    .navbar-nav.navbar-right li .dropdown-menu:after{
+        left: auto;
+        right: 12px;
+    }
+
+
+    .footer:not(.footer-big){
+        nav ul{
+           li:first-child{
+             margin-left: 0;
+           }
+        }
+    }
+
+// no dragging the others navs in page
+    body > .navbar-collapse.collapse{
+        display: none !important;
+    }
+}
+
+.dropdown-sharing{
+    .dropup-item{
+        color: $font-color;
+        font-size: $font-size-base;
+
+        .social-line{
+            line-height: 28px;
+            padding: 10px 20px 5px 20px !important;
+
+            [class*="icon-"]{
+                font-size: 20px;
+            }
+        }
+        &:last-child{
+            margin: 0 13px;
+            display: block;
+        }
+        .btn{
+            margin: 10px;
+        }
+    }
+
+    .dropup-item:hover,
+    .dropup-item:focus{
+        .social-line,
+        .action-line{
+            background-color: $white-color;
+            color: $font-color;
+            opacity: 1;
+            text-decoration: none;
+        }
+    }
+}
+.show .dropdown-sharing,
+.show .dropdown-actions{
+    margin-bottom: 1px;
+}
+
+.dropdown-actions{
+    .dropdown-item{
+        margin: -15px 35px;
+        .action-line{
+            padding: 5px 10px;
+            line-height: 24px;
+            font-weight: bold;
+            [class*="icon-"]{
+                font-size: 24px;
+            }
+            .col-sm-9{
+                line-height: 34px;
+            }
+        }
+        .link-danger{
+            color: $danger-color;
+            &:hover, &:active, &:focus{
+                color: $danger-color;
+            }
+        }
+    }
+    li:hover,
+    li:focus{
+        a{
+            color: $font-color;
+            opacity: 1;
+            text-decoration: none;
+        }
+    }
+    .action-line{
+        .icon-simple{
+            margin-left: -15px;
+        }
+    }
+}
+.dropdown .dropdown-menu[x-placement="top-start"]:before,
+.dropdown .dropdown-menu[x-placement="top-end"]:before,
+.dropup .dropdown-menu:before{
+    border-top: 11px solid #DCD9D1;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    right: 12px;
+    bottom: -12px;
+}
+
+.dropdown .dropdown-menu[x-placement="top-start"]:after,
+.dropdown .dropdown-menu[x-placement="top-end"]:after,
+.dropup .dropdown-menu:after{
+    border-top: 11px solid #FFF;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    right: 12px;
+    bottom: -11px;
+}
+
+.dropup,
+.dropdown{
+    .dropdown-toggle:after{
+        margin-left: 0;
+    }
+}
+
+.dropdown-notification{
+    .dropdown-notification-list{
+            .notification-item{
+                border-bottom: 1px solid #F1EAE0;
+                font-size: 16px;
+                color: #66615b;
+
+                .notification-text{
+                    padding-left: 40px;
+                    position: relative;
+                    min-width: 330px;
+                    min-height: 70px;
+                    white-space: normal;
+
+
+                    .label{
+                        display: block;
+                        position: absolute;
+                        top: 50%;
+                        margin-top: -12px;
+                        left: 7px;
+                    }
+                    .message{
+                        font-size: 0.9em;
+                        line-height: 0.7;
+                        margin-left: 10px;
+                    }
+                    .time{
+                        color: #9A9A9A;
+                        font-size: 0.7em;
+                        margin-left: 10px;
+                    }
+                }
+                .read-notification{
+                    font-size: 12px;
+                    opacity: 0;
+                    position: absolute;
+                    right: 5px;
+                    top: 50%;
+                    margin-top: -12px;
+                }
+                &:hover{
+                    text-decoration: none;
+
+                    .notification-text{
+                        color: #66615b;
+                        background-color: #F0EFEB !important;
+                    }
+                    .read-notification{
+                        opacity: 1 !important;
+                    }
+                }
+            }
+
+    }
+    .dropdown-footer{
+        background-color: #E8E7E3;
+        border-radius: 0 0 8px 8px;
+
+        .dropdown-footer-menu{
+            list-style: outside none none;
+            padding: 0px 5px;
+            li{
+                display: inline-block;
+                text-align: left;
+                padding: 0 10px;
+
+                a{
+                    color: #9C9B99;
+                    font-size: 0.9em;
+                    line-height: 35px;
+                }
+            }
+        }
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_fixed-plugin.scss

@@ -0,0 +1,342 @@
+.fixed-plugin{
+    position: fixed;
+    right: 0;
+    width: 64px;
+    background: rgba(0,0,0,.3);
+    z-index: 1031;
+    border-radius: 8px 0 0 8px;
+    text-align: center;
+    top: 120px;
+
+    li > a,
+    .badge{
+        transition: all .34s;
+        -webkit-transition: all .34s;
+        -moz-transition: all .34s;
+    }
+
+    .fa-cog{
+        color: #FFFFFF;
+        padding: 10px;
+        border-radius: 0 0 6px 6px;
+        width: auto;
+    }
+
+    .dropdown-menu{
+        right: 80px;
+        left: auto !important;
+        top: -52px !important;
+        width: 290px;
+        border-radius: 10px;
+        padding: 0 10px;
+    }
+
+    .dropdown .dropdown-menu .nc-icon{
+      top: 2px;
+      right: 10px;
+      font-size: 14px;
+    }
+
+    .dropdown-menu:after,
+    .dropdown-menu:before{
+        right: 10px;
+        margin-left: auto;
+        left: auto;
+    }
+
+    .fa-circle-thin{
+        color: #FFFFFF;
+    }
+
+    .active .fa-circle-thin{
+        color: #00bbff;
+    }
+
+    .dropdown-menu > .active > a,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus{
+        color: #777777;
+        text-align: center;
+    }
+
+    img{
+        border-radius: 0;
+        width: 100%;
+        height: 100px;
+        margin: 0 auto;
+    }
+
+    .dropdown-menu li > a:hover,
+    .dropdown-menu li > a:focus{
+        box-shadow: none;
+    }
+
+    .badge{
+        border: 3px solid #FFFFFF;
+        border-radius: 50%;
+        cursor: pointer;
+        display: inline-block;
+        height: 23px;
+        margin-right: 5px;
+        position: relative;
+        width: 23px;
+
+      &.badge-light {
+        border: 1px solid $light-gray;
+
+        &.active,
+        &:hover {
+          border: 3px solid #0bf;
+        }
+      }
+    }
+
+    .badge.active,
+    .badge:hover{
+        border-color: #00bbff;
+    }
+
+    .badge-blue{
+        background-color: $brand-info;
+    }
+    .badge-green{
+        background-color: $brand-success;
+    }
+    .badge-orange{
+        background-color: $brand-primary;
+    }
+    .badge-yellow{
+        background-color: $brand-warning;
+    }
+    .badge-red{
+        background-color: $brand-danger;
+    }
+
+    h5{
+        font-size: 14px;
+        margin: 10px;
+    }
+
+    .dropdown-menu li{
+        display: block;
+        padding: 15px 2px;
+        width: 25%;
+        float: left;
+    }
+
+    li.adjustments-line,
+    li.header-title,
+    li.button-container{
+        width: 100%;
+        height: 35px;
+        min-height: inherit;
+    }
+
+    li.button-container{
+        height: auto;
+
+        div{
+            margin-bottom: 5px;
+        }
+    }
+
+    #sharrreTitle{
+        text-align: center;
+        padding: 10px 0;
+        height: 50px;
+    }
+
+    li.header-title{
+        height: 30px;
+        line-height: 25px;
+        font-size: 12px;
+        font-weight: 600;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    .adjustments-line{
+        p{
+            float: left;
+            display: inline-block;
+            margin-bottom: 0;
+            font-size: 1em;
+            color: #3C4858;
+        }
+
+        a{
+            color: transparent;
+
+            .badge-colors{
+                position: relative;
+                top: -2px;
+            }
+
+            a:hover,
+            a:focus{
+                color: transparent;
+            }
+        }
+
+        .togglebutton{
+            text-align: center;
+
+            .label-switch{
+              position: relative;
+              left: -10px;
+              font-size: $font-size-mini;
+              color: $default-color;
+
+              &.label-right{
+                left: 10px;
+              }
+            }
+
+            .toggle{
+                margin-right: 0;
+            }
+        }
+
+        .dropdown-menu > li.adjustments-line > a{
+              padding-right: 0;
+              padding-left: 0;
+              border-bottom: 1px solid #ddd;
+              border-radius: 0;
+              margin: 0;
+        }
+    }
+
+
+
+    .dropdown-menu{
+        > li{
+            & > a.img-holder{
+                  font-size: 16px;
+                  text-align: center;
+                  border-radius: 10px;
+                  background-color: #FFF;
+                  border: 3px solid #FFF;
+                  padding-left: 0;
+                  padding-right: 0;
+                  opacity: 1;
+                  cursor: pointer;
+                  display: block;
+                  max-height: 100px;
+                  overflow: hidden;
+                  padding: 0;
+
+                  img{
+                     margin-top: auto;
+                  }
+            }
+
+            a.switch-trigger:hover,
+            & > a.switch-trigger:focus{
+                background-color: transparent;
+            }
+
+            &:hover,
+            &:focus{
+                > a.img-holder{
+                    border-color: rgba(0, 187, 255, 0.53);;
+                }
+            }
+        }
+
+        > .active > a.img-holder,
+        > .active > a.img-holder{
+            border-color: #00bbff;
+            background-color: #FFFFFF;
+        }
+
+    }
+
+    .btn-social{
+        width: 50%;
+        display: block;
+        width: 48%;
+        float: left;
+        font-weight: 600;
+    }
+
+    .btn-social{
+        i{
+            margin-right: 5px;
+        }
+
+        &:first-child{
+            margin-right: 2%;
+        }
+    }
+
+    .dropdown{
+        .dropdown-menu{
+          transform-origin: 0 0;
+
+          &:before{
+             border-bottom: 16px solid rgba(0, 0, 0, 0);
+             border-left: 16px solid rgba(0,0,0,0.2);
+             border-top: 16px solid rgba(0,0,0,0);
+             right: -27px;
+             bottom: 425px;
+          }
+
+          &:after{
+             border-bottom: 16px solid rgba(0, 0, 0, 0);
+             border-left: 16px solid #FFFFFF;
+             border-top: 16px solid rgba(0,0,0,0);
+             right: -26px;
+             bottom: 425px;
+          }
+
+          &:before,
+          &:after{
+             content: "";
+             display: inline-block;
+             position: absolute;
+             width: 16px;
+             transform: translateY(-50px);
+             -webkit-transform: translateY(-50px);
+             -moz-transform: translateY(-50px);
+          }
+        }
+
+      &.show-dropdown .show{
+        .dropdown-menu .show{
+          transform: translate3d(0, -60px, 0)!important;
+          bottom: auto!important;
+          top: 0!important;
+        }
+      }
+    }
+
+    .bootstrap-switch{
+        margin:0;
+    }
+}
+
+.fixed-plugin {
+  .show-dropdown {
+    .dropdown-menu[x-placement=bottom-start] {
+      @include transform-translate-y-fixed-plugin (-100px);
+
+      &:before,
+      &:after {
+        top: 100px;
+      }
+    }
+    .dropdown-menu[x-placement=top-start] {
+      @include transform-translate-y-fixed-plugin (100px);
+    }
+
+    &.show {
+      .dropdown-menu.show[x-placement=bottom-start] {
+        @include transform-translate-y-fixed-plugin (-60px);
+      }
+
+      .dropdown-menu.show[x-placement=top-start] {
+        @include transform-translate-y-fixed-plugin (470px);
+      }
+    }
+  }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_footers.scss

@@ -0,0 +1,46 @@
+.footer{
+    padding: 24px 0;
+
+    &.footer-default{
+        background-color: #f2f2f2;
+    }
+
+    nav{
+        display: inline-block;
+        float: left;
+        padding-left: 0;
+    }
+
+    ul{
+        margin-bottom: 0;
+        padding: 0;
+        list-style: none;
+
+        li{
+            display: inline-block;
+
+            a{
+                color: inherit;
+                padding: $padding-base-vertical;
+                font-size: $font-size-small;
+                text-transform: uppercase;
+                text-decoration: none;
+
+                &:hover{
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    .copyright{
+        font-size: $font-size-small;
+        line-height: 1.8;
+    }
+
+    &:after{
+        display: table;
+        clear: both;
+        content: " ";
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_images.scss

@@ -0,0 +1,7 @@
+img{
+    max-width: 100%;
+    border-radius: $border-radius-small;
+}
+.img-raised{
+    box-shadow: $box-shadow-raised;
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_inputs.scss

@@ -0,0 +1,403 @@
+@include placeholder() {
+  color: $dark-gray;
+};
+
+
+.form-control {
+    background-color: $white-color;
+    border: 1px solid $medium-gray;
+    border-radius: $border-radius-base;
+    color: $font-color;
+    line-height: normal;
+    font-size: $font-size-base;
+    @include transition-input-focus-color();
+    @include box-shadow(none);
+
+
+
+    &:focus{
+        border: 1px solid $dark-gray;
+        @include box-shadow(none);
+        outline: 0 !important;
+        color: $default-color;
+
+        & + .input-group-append .input-group-text,
+        & ~ .input-group-append .input-group-text,
+        & + .input-group-prepend .input-group-text,
+        & ~ .input-group-prepend .input-group-text{
+            border: 1px solid #ccc;
+            border-left: none;
+            background-color: $transparent-bg;
+        }
+    }
+
+    .has-success &,
+    .has-error &,
+    .has-success &:focus,
+    .has-error &:focus{
+        @include box-shadow(none);
+    }
+
+    .has-success &{
+        border: 1px solid $table-line-color;
+        color: $font-color;
+
+        &.form-control-success{
+            padding-right: 2.5em !important;
+        }
+    }
+    .has-success &:focus{
+        border: 1px solid $success-color;
+        color: $success-color;
+    }
+    .has-danger &{
+        background-color: $danger-input-bg;
+        border: 1px solid $danger-color;
+        color: $danger-color;
+
+        &.form-control-danger{
+            padding-right: 2.5em !important;
+        }
+    }
+    .has-danger &:focus{
+        background-color: $white-color;
+        border: 1px solid $danger-color;
+    }
+
+    & + .form-control-feedback{
+        border-radius: $border-radius-large;
+        font-size: $font-size-base;
+        margin-top: -7px;
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        vertical-align: middle;
+    }
+
+    .open &{
+        border-radius: $border-radius-large $border-radius-large 0 0;
+        border-bottom-color: transparent;
+    }
+
+    & + .input-group-append .input-group-text,
+    & + .input-group-prepend .input-group-text{
+        background-color: $white-bg;
+    }
+}
+
+
+@include form-control-lg-padding($padding-large-vertical, $padding-input-horizontal);
+@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
+
+.input-group {
+  &.has-success {
+    .input-group-prepend,
+    .input-group-append {
+      .input-group-text {
+        border: 1px solid $table-line-color;
+        color: $font-color;
+        background-color: $white-color;
+        border-right: none;
+      }
+    }
+  }
+}
+
+.form-group.no-border,
+.input-group.no-border{
+    .form-control,
+    .form-control + .input-group-prepend .input-group-text,
+    .form-control + .input-group-append .input-group-text{
+        background-color: $opacity-gray-3;
+        border: medium none;
+        &:focus,
+        &:active,
+        &:active{
+            border: medium none;
+            background-color: $opacity-gray-5;
+        }
+    }
+
+    .form-control{
+        &:focus{
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                background-color: $opacity-gray-5;
+            }
+        }
+    }
+
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $opacity-gray-3;
+        border: none;
+    }
+}
+
+.has-error{
+    .form-control-feedback, .control-label{
+        color: $danger-color;
+    }
+}
+.has-success{
+    .form-control-feedback, .control-label{
+        color: $success-color;
+    }
+}
+
+.input-group.has-danger {
+  .input-group-prepend {
+    border-radius: $border-radius-base;
+    .input-group-text {
+      border: 1px solid $danger-color;
+      border-right: none;
+    }
+  }
+  .error {
+    display: block;
+    width: 100%;
+    color: $danger-color;
+    margin-top: 3px;
+  }
+}
+
+.input-group.has-success {
+  .input-group-prepend {
+    border-radius: $border-radius-base;
+    .input-group-text {
+      // border: 1px solid $success-color;
+      border-right: none;
+    }
+  }
+}
+
+
+.input-group-focus{
+  .input-group-prepend .input-group-text,
+  .input-group-append .input-group-text{
+    background-color: $white-bg;
+    border-color: $dark-gray;
+  }
+
+  &.no-border{
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+      background-color: $opacity-gray-5;
+    }
+  }
+
+  &.has-danger {
+    .input-group-append,
+    .input-group-prepend {
+      .input-group-text {
+        background-color: $danger-input-bg;
+      }
+    }
+  }
+
+  &.has-success {
+    .input-group-append,
+    .input-group-prepend {
+      .input-group-text {
+        background-color: $success-input-bg;
+        border: 1px solid $success-color;
+        border-right: none;
+      }
+    }
+  }
+}
+
+.input-group-append .input-group-text,
+.input-group-prepend .input-group-text {
+    background-color: transparent;
+    border: 1px solid $light-gray;
+    color: $default-color;
+    border-top-right-radius: $border-radius-base;
+    border-bottom-right-radius: $border-radius-base;
+
+    & i{
+      opacity: .5;
+    }
+
+    @include transition-input-focus-color();
+
+    .has-danger &{
+      background-color: $danger-input-bg;
+    }
+    .has-success &{
+      background-color: $success-input-bg;
+    }
+    .has-danger.input-group-focus &{
+      background-color: $white-color;
+      color: $danger-color;
+    }
+    .has-success.input-group-focus &{
+      background-color: $white-color;
+      color: $success-color;
+    }
+    .has-danger .form-control:focus + &{
+      color: $danger-color;
+    }
+    .has-success .form-control:focus + &{
+      color: $success-color;
+    }
+
+    & + .form-control,
+    & ~ .form-control{
+        @include input-size($padding-base-vertical - 1, $padding-base-horizontal);
+        padding-left: 18px;
+    }
+
+    i{
+        width: 17px;
+    }
+}
+
+.input-group-append,
+.input-group-prepend{
+  margin: 0;
+}
+
+
+.input-group-append .input-group-text{
+  border-left: none;
+}
+.input-group-prepend .input-group-text{
+  border-right: none;
+}
+
+.input-group,
+.form-group{
+    margin-bottom: 10px;
+    position: relative;
+
+    .form-control-static{
+        margin-top: 9px;
+    }
+    &.has-danger {
+      .error {
+        color: $danger-color;
+      }
+    }
+}
+.input-group[disabled]{
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $light-gray;
+    }
+}
+
+.input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child){
+    border-radius: $border-radius-base;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 0 none;
+}
+
+.input-group .form-control:first-child,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+    border-right: 0 none;
+}
+.input-group .form-control:last-child,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+    border-left: 0 none;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    background-color: $light-gray;
+    color: $default-color;
+    cursor: not-allowed;
+}
+
+.input-group-btn .btn{
+    border-width: $border-thin;
+    padding: $padding-btn-vertical  $padding-base-horizontal;
+}
+.input-group-btn .btn-default:not(.btn-fill){
+    border-color: $medium-gray;
+}
+
+.input-group-btn:last-child > .btn{
+    margin-left: 0;
+}
+textarea.form-control{
+    max-width: 100%;
+    max-height: 80px;
+    padding: 10px 10px 0 0;
+    resize: none;
+    border: none;
+    border: 1px solid $light-gray;
+    border-radius: $border-radius-base;
+    line-height: 2;
+}
+
+.has-success,
+.has-danger{
+
+    &.form-group .form-control,
+    &.form-group.no-border .form-control{
+        padding-right: $padding-input-horizontal + 21;
+    }
+}
+
+.form.form-newsletter .form-group{
+    float: left;
+    width: 78%;
+    margin-right: 2%;
+    margin-top: 9px;
+}
+
+.input-group .input-group-btn{
+    padding: 0 12px;
+}
+
+// Input files - hide actual input - requires specific markup in the sample.
+.form-group input[type=file] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+
+.form-text{
+    font-size: $font-size-small;
+}
+
+.form-control-lg{
+    padding: 0;
+    font-size: inherit;
+    line-height: 0;
+    border-radius: 0;
+}
+
+.form-horizontal{
+    .col-form-label,
+    .label-on-right{
+        padding: 10px 5px 0 15px;
+        text-align: right;
+        max-width: 180px;
+    }
+
+    .checkbox-radios{
+        margin-bottom: 15px;
+
+        .form-check:first-child{
+           margin-top: 8px;
+       }
+    }
+
+    .label-on-right{
+        text-align: left;
+        padding: 10px 15px 0 5px;
+    }
+
+    .form-check-inline{
+        margin-top: 6px;
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_misc.scss

@@ -0,0 +1,150 @@
+body{
+    color: $black-color;
+    font-size: $font-size-base;
+    font-family: $sans-serif-family;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+
+.main{
+    position: relative;
+    background: $white-color;
+}
+/* Animations */
+.nav-pills .nav-link,
+.navbar,
+.nav-tabs .nav-link,
+.sidebar .nav a,
+.sidebar .nav a i,
+.animation-transition-general,
+.tag,
+.tag [data-role="remove"],
+.animation-transition-general{
+    @include transition($general-transition-time, $transition-ease);
+}
+
+//transition for dropdown caret
+.dropdown-toggle:after,
+.bootstrap-switch-label:before,
+.caret{
+    @include transition($fast-transition-time, $transition-ease);
+}
+
+.dropdown-toggle[aria-expanded="true"]:after,
+a[data-toggle="collapse"][aria-expanded="true"] .caret,
+.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i,
+.card-collapse .card a[data-toggle="collapse"].expanded i{
+    @include rotate-180();
+}
+
+.button-bar{
+    display: block;
+    position: relative;
+    width: 22px;
+    height: 1px;
+    border-radius: 1px;
+    background: $white-bg;
+
+    & + .button-bar{
+        margin-top: 7px;
+    }
+
+    &:nth-child(2){
+        width: 17px;
+    }
+}
+
+.caret{
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 2px;
+    vertical-align: middle;
+    border-top: 4px dashed;
+    border-top: 4px solid\9;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+}
+
+.pull-left{
+  float: left;
+}
+.pull-right{
+  float: right;
+}
+
+
+.offline-doc {
+  .navbar.navbar-transparent{
+    padding-top: 25px;
+    border-bottom: none;
+
+    .navbar-minimize {
+      display: none;
+    }
+    .navbar-brand,
+    .collapse .navbar-nav .nav-link {
+      color: $white-color !important;
+    }
+  }
+  .footer {
+    z-index: 3 !important;
+  }
+  .page-header{
+    .container {
+      z-index: 3;
+    }
+    &:after {
+      background-color: rgba(0, 0, 0, 0.5);
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 2;
+    }
+  }
+}
+
+.fixed-plugin {
+  .dropdown-menu li {
+    padding: 2px !important;
+  }
+}
+
+// badge color
+
+.badge{
+  &.badge-default{
+      @include badge-color($default-color);
+  }
+  &.badge-primary{
+      @include badge-color($primary-color);
+  }
+  &.badge-info{
+      @include badge-color($info-color);
+  }
+  &.badge-success{
+      @include badge-color($success-color);
+  }
+  &.badge-warning{
+      @include badge-color($warning-color);
+  }
+  &.badge-danger{
+      @include badge-color($danger-color);
+  }
+  &.badge-neutral{
+      @include badge-color($white-color);
+      color: inherit;
+  }
+}
+
+.card-user {
+  form {
+    .form-group {
+      margin-bottom: 20px;
+    }
+  }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_mixins.scss

@@ -0,0 +1,8 @@
+//Components
+@import "mixins/buttons";
+@import "mixins/vendor-prefixes";
+@import "mixins/inputs";
+@import "mixins/page-header";
+@import "mixins/dropdown";
+@import "mixins/cards";
+@import "mixins/transparency";

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_navbar.scss

@@ -0,0 +1,310 @@
+.navbar{
+    padding-top: $navbar-padding-base;
+    padding-bottom: $navbar-padding-base;
+    min-height: 53px;
+    margin-bottom: 20px;
+
+    a{
+        vertical-align: middle;
+
+        &:not(.btn):not(.dropdown-item){
+            color: $white-color;
+        }
+
+        &.dropdown-item{
+            color: $default-color;
+        }
+    }
+
+
+
+    &.bg-white{
+      .input-group .form-control,
+      .input-group.no-border .form-control{
+        color: $default-color;
+
+        @include placeholder(){
+          color: $default-color;
+        };
+      }
+      .input-group-prepend .input-group-text i,
+      .input-group-append .input-group-text i{
+        color: $default-color;
+        opacity: .5;
+      }
+    }
+
+    .form-group,
+    .input-group{
+      margin: 0;
+      margin-left: -3px;
+      margin-right: 5px;
+
+      .form-group-addon,
+      .input-group-prepend .input-group-text,
+      .input-group-append .input-group-text{
+        color: $default-color;
+
+        i {
+          opacity: 1;
+        }
+      }
+
+      &.no-border{
+        .form-control{
+          color: $default-color;
+
+          @include placeholder(){
+            color: $default-color;
+          };
+        }
+      }
+    }
+
+    p{
+        display: inline-block;
+        margin: 0;
+        line-height: 1.8em;
+        font-size: 1em;
+        font-weight: 400;
+    }
+
+    &.navbar-absolute{
+        position: absolute;
+        width: 100%;
+        padding-top: 10px;
+        z-index: 1029;
+    }
+
+    .documentation &{
+        &.fixed-top{
+            left: 0;
+            width: initial;
+        }
+    }
+
+    .navbar-wrapper{
+        display: inline-flex;
+        align-items: center;
+
+        .navbar-minimize{
+            padding-right: 10px;
+
+            .btn{
+                margin: 0;
+            }
+        }
+
+        .navbar-toggle{
+            .navbar-toggler{
+                padding-left: 0;
+            }
+
+            &:hover{
+                & .navbar-toggler-bar.bar2{
+                    width: 22px;
+                }
+            }
+        }
+    }
+
+
+
+    .navbar-nav{
+        &.navbar-logo{
+            position: absolute;
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            width: 49px;
+            top: -4px;
+        }
+
+        .nav-link.btn{
+            padding: $padding-btn-vertical $padding-btn-horizontal;
+            &.btn-lg{
+                padding: $padding-large-vertical $padding-large-horizontal;
+            }
+            &.btn-sm{
+                padding: $padding-small-vertical $padding-small-horizontal;
+            }
+        }
+
+        .nav-link{
+            text-transform: uppercase;
+            font-size: $font-size-mini;
+            padding: $padding-base-vertical $padding-base-horizontal;
+            line-height: $line-height-nav-link;
+            margin-right: 3px;
+
+            i.fa + p,
+            i.nc-icon + p{
+                margin-left: 3px;
+            }
+
+            i.fa,
+            i.nc-icon{
+                font-size: 18px;
+                position: relative;
+                top: 3px;
+                text-align: center;
+                width: 21px;
+            }
+
+            i.nc-icon{
+                top: 4px;
+                font-size: 16px;
+            }
+
+            &.profile-photo{
+                .profile-photo-small{
+                    width: 27px;
+                    height: 27px;
+                }
+            }
+
+            &.disabled{
+                opacity: .5;
+                color: $white-color;
+            }
+        }
+
+        .nav-item.active .nav-link:not(.btn),
+        .nav-item .nav-link:not(.btn):focus,
+        .nav-item .nav-link:not(.btn):hover,
+        .nav-item .nav-link:not(.btn):active{
+            border-radius: $border-radius-small;
+            color: $default-color;
+        }
+    }
+
+    .logo-container{
+        width: 27px;
+        height: 27px;
+        overflow: hidden;
+        margin: 0 auto;
+        border-radius: 50%;
+        border: 1px solid transparent;
+    }
+
+    .navbar-brand{
+        text-transform: capitalize;
+        font-size: $font-size-large-navbar;
+        padding-top: $padding-base-vertical;
+        padding-bottom: $padding-base-vertical;
+        line-height: $line-height-nav-link;
+    }
+
+    .navbar-toggler{
+        width: 37px;
+        height: 27px;
+        vertical-align: middle;
+        outline: 0;
+        cursor: pointer;
+
+        & .navbar-toggler-bar.navbar-kebab{
+            width: 3px;
+            height: 3px;
+            border-radius: 50%;
+            margin: 0 auto;
+        }
+    }
+
+    .button-dropdown{
+        .navbar-toggler-bar:nth-child(2){
+            width: 17px;
+        }
+    }
+
+    &.navbar-transparent{
+      background-color: $transparent-bg !important;
+      box-shadow: none;
+      border-bottom: 1px solid #ddd;
+
+      a:not(.dropdown-item):not(.btn){
+        color: $default-color;
+
+        &.disabled{
+          opacity: .5;
+          color: $default-color;
+         }
+       }
+
+       .button-bar{
+           background: $default-color;
+       }
+
+      .nav-item .nav-link:not(.btn){
+        color: $default-color;
+      }
+      .nav-item.active .nav-link:not(.btn),
+      .nav-item .nav-link:not(.btn):focus,
+      .nav-item .nav-link:not(.btn):hover,
+      .nav-item .nav-link:not(.btn):focus:hover,
+      .nav-item .nav-link:not(.btn):active {
+        color: $primary-color;
+      }
+    }
+
+    &.bg-white {
+        a:not(.dropdown-item):not(.btn){
+            color: $default-color;
+
+            &.disabled{
+                opacity: .5;
+                color: $default-color;
+            }
+        }
+
+        .button-bar{
+            background: $default-color;
+        }
+
+        .nav-item.active .nav-link:not(.btn),
+        .nav-item .nav-link:not(.btn):focus,
+        .nav-item .nav-link:not(.btn):hover,
+        .nav-item .nav-link:not(.btn):active{
+            color: $info-color;
+        }
+
+        .logo-container{
+            border: 1px solid $default-color;
+        }
+    }
+
+    .navbar-collapse {
+      .nav-item {
+        a {
+          font-size: $font-size-base;
+        }
+      }
+    }
+}
+
+.bg-default{
+    background-color: $default-color !important;
+}
+
+.bg-primary{
+    background-color: $primary-color !important;
+}
+
+.bg-info{
+    background-color: $info-color !important;
+}
+
+.bg-success{
+    background-color: $success-color !important;
+}
+
+.bg-danger{
+    background-color: $danger-color !important;
+}
+
+.bg-warning{
+    background-color: $warning-color !important;
+}
+
+.bg-white{
+    background-color: $white-color !important;
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_nucleo-outline.scss

@@ -0,0 +1,566 @@
+/*--------------------------------
+
+nucleo-icons Web Font - built using nucleoapp.com
+License - nucleoapp.com/license/
+
+-------------------------------- */
+@font-face {
+  font-family: 'nucleo-icons';
+  src: url('../fonts/nucleo-icons.eot');
+  src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+/*------------------------
+	base class definition
+-------------------------*/
+.nc-icon {
+  display: inline-block;
+  font: normal normal normal 14px/1 'nucleo-icons';
+  font-size: inherit;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/*------------------------
+  change icon size
+-------------------------*/
+.nc-icon.lg {
+  font-size: 1.33333333em;
+  vertical-align: -16%;
+}
+.nc-icon.x2 {
+  font-size: 2em;
+}
+.nc-icon.x3 {
+  font-size: 3em;
+}
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+.nc-icon.square,
+.nc-icon.circle {
+  padding: 0.33333333em;
+  vertical-align: -16%;
+  background-color: #eee;
+}
+.nc-icon.circle {
+  border-radius: 50%;
+}
+/*------------------------
+  list icons
+-------------------------*/
+.nc-icon-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.nc-icon-ul > li {
+  position: relative;
+}
+.nc-icon-ul > li > .nc-icon {
+  position: absolute;
+  left: -1.57142857em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.nc-icon-ul > li > .nc-icon.lg {
+  top: 0;
+  left: -1.35714286em;
+}
+.nc-icon-ul > li > .nc-icon.circle,
+.nc-icon-ul > li > .nc-icon.square {
+  top: -0.19047619em;
+  left: -1.9047619em;
+}
+/*------------------------
+  spinning icons
+-------------------------*/
+.nc-icon.spin {
+  -webkit-animation: nc-icon-spin 2s infinite linear;
+  -moz-animation: nc-icon-spin 2s infinite linear;
+  animation: nc-icon-spin 2s infinite linear;
+}
+@-webkit-keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@-moz-keyframes nc-icon-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+@keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+.nc-icon.rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.nc-icon.rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.nc-icon.rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.nc-icon.flip-y {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.nc-icon.flip-x {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+/*------------------------
+	font icons
+-------------------------*/
+
+.nc-air-baloon::before {
+    content: "\ea01";
+}
+
+.nc-album-2::before {
+    content: "\ea02";
+}
+
+.nc-alert-circle-i::before {
+    content: "\ea04";
+}
+
+.nc-align-center::before {
+    content: "\ea03";
+}
+
+.nc-align-left-2::before {
+    content: "\ea05";
+}
+
+.nc-ambulance::before {
+    content: "\ea06";
+}
+
+.nc-app::before {
+    content: "\ea07";
+}
+
+.nc-atom::before {
+    content: "\ea08";
+}
+
+.nc-badge::before {
+    content: "\ea09";
+}
+
+.nc-bag-16::before {
+    content: "\ea0a";
+}
+
+.nc-bank::before {
+    content: "\ea0b";
+}
+
+.nc-basket::before {
+    content: "\ea0c";
+}
+
+.nc-bell-55::before {
+    content: "\ea0d";
+}
+
+.nc-bold::before {
+    content: "\ea0e";
+}
+
+.nc-book-bookmark::before {
+    content: "\ea0f";
+}
+
+.nc-bookmark-2::before {
+    content: "\ea10";
+}
+
+.nc-box-2::before {
+    content: "\ea11";
+}
+
+.nc-box::before {
+    content: "\ea12";
+}
+
+.nc-briefcase-24::before {
+    content: "\ea13";
+}
+
+.nc-bulb-63::before {
+    content: "\ea14";
+}
+
+.nc-bullet-list-67::before {
+    content: "\ea15";
+}
+
+.nc-bus-front-12::before {
+    content: "\ea16";
+}
+
+.nc-button-pause::before {
+    content: "\ea17";
+}
+
+.nc-button-play::before {
+    content: "\ea18";
+}
+
+.nc-button-power::before {
+    content: "\ea19";
+}
+
+.nc-calendar-60::before {
+    content: "\ea1a";
+}
+
+.nc-camera-compact::before {
+    content: "\ea1b";
+}
+
+.nc-caps-small::before {
+    content: "\ea1c";
+}
+
+.nc-cart-simple::before {
+    content: "\ea1d";
+}
+
+.nc-chart-bar-32::before {
+    content: "\ea1e";
+}
+
+.nc-chart-pie-36::before {
+    content: "\ea1f";
+}
+
+.nc-chat-33::before {
+    content: "\ea20";
+}
+
+.nc-check-2::before {
+    content: "\ea21";
+}
+
+.nc-circle-10::before {
+    content: "\ea22";
+}
+
+.nc-cloud-download-93::before {
+    content: "\ea23";
+}
+
+.nc-cloud-upload-94::before {
+    content: "\ea24";
+}
+
+.nc-compass-05::before {
+    content: "\ea25";
+}
+
+.nc-controller-modern::before {
+    content: "\ea26";
+}
+
+.nc-credit-card::before {
+    content: "\ea27";
+}
+
+.nc-delivery-fast::before {
+    content: "\ea28";
+}
+
+.nc-diamond::before {
+    content: "\ea29";
+}
+
+.nc-email-85::before {
+    content: "\ea2a";
+}
+
+.nc-favourite-28::before {
+    content: "\ea2b";
+}
+
+.nc-glasses-2::before {
+    content: "\ea2c";
+}
+
+.nc-globe-2::before {
+    content: "\ea2d";
+}
+
+.nc-globe::before {
+    content: "\ea2e";
+}
+
+.nc-hat-3::before {
+    content: "\ea2f";
+}
+
+.nc-headphones::before {
+    content: "\ea30";
+}
+
+.nc-html5::before {
+    content: "\ea31";
+}
+
+.nc-image::before {
+    content: "\ea32";
+}
+
+.nc-istanbul::before {
+    content: "\ea33";
+}
+
+.nc-key-25::before {
+    content: "\ea34";
+}
+
+.nc-laptop::before {
+    content: "\ea35";
+}
+
+.nc-layout-11::before {
+    content: "\ea36";
+}
+
+.nc-lock-circle-open::before {
+    content: "\ea37";
+}
+
+.nc-map-big::before {
+    content: "\ea38";
+}
+
+.nc-minimal-down::before {
+    content: "\ea39";
+}
+
+.nc-minimal-left::before {
+    content: "\ea3a";
+}
+
+.nc-minimal-right::before {
+    content: "\ea3b";
+}
+
+.nc-minimal-up::before {
+    content: "\ea3c";
+}
+
+.nc-mobile::before {
+    content: "\ea3d";
+}
+
+.nc-money-coins::before {
+    content: "\ea3e";
+}
+
+.nc-note-03::before {
+    content: "\ea3f";
+}
+
+.nc-palette::before {
+    content: "\ea40";
+}
+
+.nc-paper::before {
+    content: "\ea41";
+}
+
+.nc-pin-3::before {
+    content: "\ea42";
+}
+
+.nc-planet::before {
+    content: "\ea43";
+}
+
+.nc-refresh-69::before {
+    content: "\ea44";
+}
+
+.nc-ruler-pencil::before {
+    content: "\ea45";
+}
+
+.nc-satisfied::before {
+    content: "\ea46";
+}
+
+.nc-scissors::before {
+    content: "\ea47";
+}
+
+.nc-send::before {
+    content: "\ea48";
+}
+
+.nc-settings-gear-65::before {
+    content: "\ea49";
+}
+
+.nc-settings::before {
+    content: "\ea4a";
+}
+
+.nc-share-66::before {
+    content: "\ea4b";
+}
+
+.nc-shop::before {
+    content: "\ea4c";
+}
+
+.nc-simple-add::before {
+    content: "\ea4d";
+}
+
+.nc-simple-delete::before {
+    content: "\ea4e";
+}
+
+.nc-simple-remove::before {
+    content: "\ea4f";
+}
+
+.nc-single-02::before {
+    content: "\ea50";
+}
+
+.nc-single-copy-04::before {
+    content: "\ea51";
+}
+
+.nc-sound-wave::before {
+    content: "\ea52";
+}
+
+.nc-spaceship::before {
+    content: "\ea53";
+}
+
+.nc-sun-fog-29::before {
+    content: "\ea54";
+}
+
+.nc-support-17::before {
+    content: "\ea55";
+}
+
+.nc-tablet-2::before {
+    content: "\ea56";
+}
+
+.nc-tag-content::before {
+    content: "\ea57";
+}
+
+.nc-tap-01::before {
+    content: "\ea58";
+}
+
+.nc-tie-bow::before {
+    content: "\ea59";
+}
+
+.nc-tile-56::before {
+    content: "\ea5a";
+}
+
+.nc-time-alarm::before {
+    content: "\ea5b";
+}
+
+.nc-touch-id::before {
+    content: "\ea5c";
+}
+
+.nc-trophy::before {
+    content: "\ea5d";
+}
+
+.nc-tv-2::before {
+    content: "\ea5e";
+}
+
+.nc-umbrella-13::before {
+    content: "\ea5f";
+}
+
+.nc-user-run::before {
+    content: "\ea60";
+}
+
+.nc-vector::before {
+    content: "\ea61";
+}
+
+.nc-watch-time::before {
+    content: "\ea62";
+}
+
+.nc-world-2::before {
+    content: "\ea63";
+}
+
+.nc-zoom-split::before {
+    content: "\ea64";
+}
+
+
+/* all icon font classes list here */

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_page-header.scss

@@ -0,0 +1,85 @@
+.page-header{
+    min-height: 100vh;
+    max-height: 1000px;
+    padding: 0;
+    color: $white-color;
+    position: relative;
+
+    .page-header-image{
+        position: absolute;
+        background-size: cover;
+        background-position: center center;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+    }
+
+    .content-center{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 2;
+        -ms-transform: translate(-50%, -50%);
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+        text-align: center;
+        color: #FFFFFF;
+        padding: 0 15px;
+        width: 100%;
+        max-width: 880px;
+
+    }
+
+    footer{
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+    }
+
+    .container{
+        height: 100%;
+        z-index: 1;
+    }
+
+    .category,
+    .description{
+        color: $opacity-8;
+    }
+
+    &.page-header-small{
+        min-height: 60vh;
+        max-height: 440px;
+    }
+
+    &.page-header-mini{
+        min-height: 40vh;
+        max-height: 340px;
+    }
+
+    .title{
+        margin-bottom: 15px;
+    }
+    .title + h4{
+        margin-top: 10px;
+    }
+
+    &:after,
+    &:before{
+        position: absolute;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        left: 0;
+        top: 0;
+        content: "";
+    }
+
+    &:before{
+        background-color: rgba(0,0,0,.3);
+    }
+
+    &[filter-color="orange"]{
+        @include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6));
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_responsive.scss

@@ -0,0 +1,550 @@
+@media screen and (max-width: 991px){
+
+  .navbar {
+    padding: 0;
+
+    &.navbar-absolute {
+      padding-top: 0;
+    }
+
+    .navbar-brand {
+      font-size: 16px;
+      margin-right: 0;
+    }
+  }
+
+    .profile-photo .profile-photo-small{
+        margin-left: -2px;
+    }
+
+    .button-dropdown{
+        display: none;
+    }
+
+    #minimizeSidebar{
+        display: none;
+    }
+
+    .navbar{
+        .container-fluid{
+            padding-right: 15px;
+            padding-left: 15px;
+        }
+
+        .navbar-collapse{
+          .input-group{
+            margin: 0;
+            margin-top: 5px;
+          }
+        }
+
+        .navbar-nav{
+            .nav-item:first-child{
+              margin-top: 10px;
+            }
+            .nav-item:not(:last-child){
+                margin-bottom: 10px;
+            }
+        }
+
+        .dropdown.show .dropdown-menu{
+            display: block;
+        }
+
+        .dropdown .dropdown-menu{
+            display: none;
+        }
+
+        .dropdown.show .dropdown-menu,
+        .dropdown .dropdown-menu{
+            border: 0;
+            transition: none;
+            -webkit-box-shadow: none;
+            width: auto;
+            margin: 0px 1rem;
+            margin-top: 0px;
+            box-shadow: none;
+            position: static;
+            padding-left: 10px;
+
+            &:before{
+                display: none;
+            }
+        }
+
+        .dropdown-menu .dropdown-item:focus,
+        .dropdown-menu .dropdown-item:hover{
+            color: $white-color;
+        }
+
+        &.bg-white .dropdown-menu .dropdown-item:focus,
+        &.bg-white .dropdown-menu .dropdown-item:hover{
+            color: $default-color;
+        }
+
+        .navbar-toggler-bar{
+            display: block;
+            position: relative;
+            width: 22px;
+            height: 1px;
+            border-radius: 1px;
+            background: $default-color;
+
+            & + .navbar-toggler-bar{
+                margin-top: 7px;
+            }
+
+            & + .navbar-toggler-bar.navbar-kebab{
+                margin-top: 3px;
+            }
+
+            &.bar2{
+                width: 17px;
+                transition: width .2s linear;
+            }
+        }
+
+        &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
+            background-color: $default-color;
+        }
+
+        & .toggled .navbar-toggler-bar{
+            width: 24px;
+
+            & + .navbar-toggler-bar{
+                margin-top: 5px;
+            }
+        }
+
+    }
+
+    .wrapper{
+        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+    }
+
+    .nav-open{
+        .main-panel{
+            right: 0;
+            @include transform-translate-x(260px);
+        }
+
+        .sidebar{
+            @include transform-translate-x(0px);
+        }
+
+        body{
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        .menu-on-right{
+            .main-panel{
+                @include transform-translate-x(-260px);
+            }
+
+            .navbar-collapse,
+            .sidebar{
+                @include transform-translate-x(0px);
+            }
+
+            .navbar-translate{
+                @include transform-translate-x(-300px);
+            }
+
+            #bodyClick{
+                right: 260px;
+                left: auto;
+            }
+        }
+    }
+
+    .menu-on-right{
+        .sidebar{
+            left: auto;
+            right:0;
+            @include transform-translate-x(260px);
+        }
+    }
+
+    .bar1,
+    .bar2,
+    .bar3 {
+      outline: 1px solid transparent;
+    }
+    .bar1 {
+      top: 0px;
+      @include bar-animation($topbar-back);
+    }
+    .bar2 {
+      opacity: 1;
+    }
+    .bar3 {
+      bottom: 0px;
+      @include bar-animation($bottombar-back);
+    }
+    .toggled .bar1 {
+      top: 6px;
+      @include bar-animation($topbar-x);
+    }
+    .toggled .bar2 {
+      opacity: 0;
+    }
+    .toggled .bar3 {
+      bottom: 6px;
+      @include bar-animation($bottombar-x);
+    }
+
+    @include topbar-x-rotation();
+    @include topbar-back-rotation();
+    @include bottombar-x-rotation();
+    @include bottombar-back-rotation();
+
+    @-webkit-keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+    @-moz-keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+    @keyframes fadeIn {
+      0% {opacity: 0;}
+      100% {opacity: 1;}
+    }
+
+    #bodyClick{
+        height: 100%;
+        width: 100%;
+        position: fixed;
+        opacity: 1;
+        top: 0;
+        right: 0;
+        left: 260px;
+        content: "";
+        z-index: 9999;
+        overflow-x: hidden;
+        background-color: transparent;
+        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+    }
+
+    .footer{
+        .copyright{
+            text-align: right;
+        }
+    }
+
+    .section-nucleo-icons .icons-container{
+        margin-top: 65px;
+    }
+
+    .navbar-nav{
+        .nav-link{
+            i.fa,
+            i.nc-icon{
+                opacity: .5;
+            }
+        }
+    }
+
+    .sidebar,
+    .bootstrap-navbar {
+        position: fixed;
+        display: block;
+        top: 0;
+        height: 100%;
+        width: 260px;
+        right: auto;
+        left: 0;
+        z-index: 1032;
+        visibility: visible;
+        overflow-y: visible;
+        padding: 0;
+        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+        @include transform-translate-x(-260px);
+    }
+
+
+
+    .main-panel{
+      width: 100%;
+    }
+
+    .timeline{
+      &:before{
+          left: 5% !important;
+      }
+
+      > li > .timeline-badge{
+          left: 5% !important;
+      }
+
+      > li > .timeline-panel{
+          float: right !important;
+          width: 82% !important;
+
+          &:before{
+              border-left-width: 0 !important;
+              border-right-width: 15px !important;
+              left: -15px !important;
+              right: auto !important;
+          }
+
+          &:after{
+              border-left-width: 0 !important;
+              border-right-width: 14px !important;
+              left: -14px !important;
+              right: auto !important;
+          }
+      }
+  }
+
+}
+@media (max-width: 991px) and (min-width: 768px){
+  .nav-tabs-navigation.verical-navs {
+    padding: 0px 2px;
+  }
+}
+
+@media screen and (min-width: 768px){
+  .footer {
+    .footer-nav {
+      padding-left: 21px;
+    }
+
+    .credits {
+      padding-right: 15px;
+    }
+  }
+}
+
+@media screen and (min-width: 992px){
+    .navbar-collapse{
+        background: none !important;
+    }
+
+    .navbar .navbar-toggle{
+        display: none;
+    }
+
+    .navbar-nav{
+        .nav-link{
+            &.profile-photo{
+                padding: 0;
+                margin: 7px $padding-base-horizontal;
+            }
+        }
+    }
+
+    .section-nucleo-icons .icons-container{
+        margin: 0 0 0 auto;
+    }
+
+    .dropdown-menu .dropdown-item{
+        color: inherit;
+    }
+
+    .footer{
+        .copyright{
+            float: right;
+            padding-right: 15px;
+        }
+    }
+
+    .sidebar{
+      .sidebar-wrapper{
+        li.active{
+          > a:not([data-toggle="collapse"]),
+          > [data-toggle="collapse"] + div .nav li {
+            &:before{
+              border-right: 17px solid $medium-gray;
+              border-top: 17px solid transparent;
+              border-bottom: 17px solid transparent;
+              content: "";
+              display: inline-block;
+              position: absolute;
+              right: -16px;
+              opacity: 1;
+              top: 7px;
+              transition: opacity 150ms ease-in;
+            }
+
+            &:after{
+              border-right: 17px solid $default-body-bg;
+              border-top: 17px solid transparent;
+              border-bottom: 17px solid transparent;
+              content: "";
+              display: inline-block;
+              position: absolute;
+              right: -17px;
+              opacity: 1;
+              top: 7px;
+              transition: opacity 150ms ease-in;
+            }
+          }
+          >[data-toggle="collapse"] + div .nav li {
+            a{
+              &:before,
+              &:after {
+                top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+}
+
+@media screen and (max-width: 768px){
+  .card-stats [class*="col-"] .statistics::after {
+    display: none;
+  }
+
+  .main-panel .content {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+    .footer{
+        nav{
+            display: block;
+            margin-bottom: 5px;
+            float: none;
+        }
+    }
+
+    .landing-page .section-story-overview .image-container:nth-child(2){
+        margin-left: 0;
+        margin-bottom: 30px;
+    }
+
+    .card {
+      .form-horizontal {
+        .col-md-3.col-form-label {
+          text-align: left;
+        }
+      }
+    }
+
+}
+
+@media screen and (max-width: 767px){
+  .nav-tabs-navigation.verical-navs{
+    padding: 0 28px;
+  }
+
+  .typography-line {
+    padding-left: 23% !important;
+
+    span {
+      width: 60px !important;
+    }
+  }
+
+  .login-page,
+  .lock-page,
+  .register-page {
+    .navbar{
+      padding: .5rem 1rem;
+    }
+  }
+
+  .footer {
+    .footer-nav,
+    .credits {
+      margin: 0 auto !important;
+    }
+
+    .footer-nav {
+      margin-bottom: 10px !important;
+    }
+  }
+
+  .register-page {
+    .content {
+      padding-top: 5vh;
+    }
+    .footer {
+      position: relative;
+    }
+    .info-area.info-horizontal {
+      margin-top: 0;
+    }
+  }
+}
+
+@media screen and (max-width: 374px){
+  .login-page {
+    .content {
+      padding-top: 10vh;
+    }
+  }
+}
+
+@media screen and (max-width: 413px){
+  .fixed-plugin {
+    .dropdown.show-dropdown.show{
+      .dropdown-menu.show {
+        width: 225px !important;
+
+        &[x-placement=top-start] {
+          transform: translate3d(0,400px,0)!important;
+        }
+
+        &:before,
+        &:after {
+          bottom: 360px !important;
+        }
+      }
+    }
+  }
+
+}
+
+
+@media screen and (max-width: 576px){
+    .navbar[class*='navbar-toggleable-'] .container{
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .card-contributions .card-stats{
+      flex-direction: column;
+
+      .bootstrap-switch{
+        margin-bottom: 15px;
+      }
+    }
+
+    .footer{
+        .copyright{
+            text-align: center;
+        }
+    }
+
+    .section-nucleo-icons{
+        .icons-container{
+            i{
+                font-size: 30px;
+
+                &:nth-child(6){
+                    font-size: 48px;
+                }
+            }
+        }
+    }
+
+    .page-header{
+        .container h6.category-absolute{
+            width: 90%;
+        }
+    }
+
+    .card-timeline .timeline {
+      .timeline-panel {
+        width: 38%;
+        padding: 15px;
+      }
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_sidebar-and-main-panel.scss

@@ -0,0 +1,361 @@
+.wrapper{
+    position: relative;
+    top: 0;
+    height: 100vh;
+
+    &.wrapper-full-page{
+        min-height: 100vh;
+        height: auto;
+    }
+}
+
+.sidebar,
+.off-canvas-sidebar{
+    position: fixed;
+    top: 0;
+    height: 100%;
+    bottom: 0;
+    width: 260px;
+    left: 0;
+    z-index: 1030;
+    border-right: 1px solid #ddd;
+
+    .sidebar-wrapper{
+        position: relative;
+        height: calc(100vh - 75px);
+        overflow: auto;
+        width: 260px;
+        z-index: 4;
+        padding-bottom: 100px;
+
+        .dropdown .dropdown-backdrop{
+          display: none !important;
+        }
+
+        .navbar-form{
+            border: none;
+        }
+    }
+
+    .navbar-minimize{
+      position: absolute;
+      right: 20px;
+      top: 2px;
+      opacity: 1;
+
+      @extend .animation-transition-general;
+    }
+    .logo-tim{
+      border-radius: 50%;
+      border: 1px solid #333;
+      display: block;
+      height: 61px;
+      width: 61px;
+      float: left;
+      overflow: hidden;
+
+      img{
+          width: 60px;
+          height: 60px;
+      }
+    }
+
+    .nav{
+        margin-top: 20px;
+        display: block;
+
+        .caret{
+            top: 14px;
+            position: absolute;
+            right: 10px;
+        }
+
+        li{
+            > a + div .nav li > a{
+                margin-top: 7px;
+            }
+
+            > a{
+                margin: 10px 15px 0;
+                color: $white-color;
+                display: block;
+                text-decoration: none;
+                position: relative;
+                text-transform: uppercase;
+                cursor: pointer;
+                font-size: 12px;
+                padding: 10px 8px;
+                line-height: 30px;
+                opacity: .7;
+            }
+
+            .nav > li > a{
+              padding: 5px 8px;
+            }
+
+            &.active > a,
+            &.active > a > i {
+              opacity: 1;
+            }
+
+            &:hover:not(.active) > a,
+            &:focus:not(.active) > a {
+                opacity: 1;
+            }
+        }
+
+        i{
+            font-size: 24px;
+            float: left;
+            margin-right: 12px;
+            line-height: 30px;
+            width: 34px;
+            text-align: center;
+            color: $opacity-5;
+            position: relative;
+        }
+
+        p {
+          margin-bottom: 0;
+        }
+
+        .collapse,
+        .collapsing {
+          .nav {
+            margin-top: 0;
+          }
+        }
+    }
+
+    .sidebar-background{
+        position: absolute;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        display: block;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        background-position: center center;
+
+        &:after{
+            position: absolute;
+            z-index: 3;
+            width: 100%;
+            height: 100%;
+            content: "";
+            display: block;
+            background: #FFFFFF;
+            opacity: 1;
+        }
+    }
+
+    .logo{
+        position: relative;
+        padding: 7px $padding-base-horizontal;
+        z-index: 4;
+
+        a.logo-mini,
+        a.logo-normal{
+            @extend .animation-transition-general;
+        }
+
+        a.logo-mini{
+            opacity: 1;
+            float: left;
+            width: 34px;
+            text-align: center;
+            margin-left: 10px;
+            margin-right: 12px;
+        }
+
+        a.logo-normal{
+            display: block;
+            opacity: 1;
+            padding: 11px 0 8px;
+            @include transform-translate-x(0px);
+        }
+
+        &:after{
+            content: '';
+            position: absolute;
+            bottom: 0;
+            right: 15px;
+            height: 1px;
+            width: calc(100% - 30px);
+            background-color: $opacity-5;
+
+        }
+
+        p{
+            float: left;
+            font-size: 20px;
+            margin: 10px 10px;
+            color: $white-color;
+            line-height: 20px;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+
+        .simple-text{
+            text-transform: uppercase;
+            padding: $padding-base-vertical 0;
+            display: block;
+            white-space: nowrap;
+            font-size: $font-size-large;
+            color: $white-color;
+            text-decoration: none;
+            font-weight: $font-weight-normal;
+            line-height: 30px;
+            overflow: hidden;
+        }
+    }
+
+    .logo-tim{
+        border-radius: 50%;
+        border: 1px solid #333;
+        display: block;
+        height: 61px;
+        width: 61px;
+        float: left;
+        overflow: hidden;
+
+        img{
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+    &:before,
+    &:after{
+        display: block;
+        content: "";
+        opacity: 1;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    &:after{
+        @include icon-gradient($default-color);
+        z-index: 3;
+    }
+
+    &[data-color="white"]{
+      @include sidebar-color($white-color);
+      @include sidebar-text-color($default-color);
+    }
+    &[data-color="black"]{
+      @include sidebar-color($dark-color);
+    }
+
+
+    // Active color changing
+
+    &[data-active-color="primary"]{
+        @include sidebar-active-color($primary-color);
+    }
+    &[data-active-color="info"]{
+        @include sidebar-active-color($info-color);
+    }
+    &[data-active-color="success"]{
+        @include sidebar-active-color($success-color);
+    }
+    &[data-active-color="warning"]{
+        @include sidebar-active-color($warning-color);
+    }
+    &[data-active-color="danger"]{
+        @include sidebar-active-color($danger-color);
+    }
+}
+
+.visible-on-sidebar-regular{
+    display: inline-block !important;
+}
+.visible-on-sidebar-mini{
+    display: none !important;
+}
+
+.off-canvas-sidebar{
+    .nav {
+        > li > a,
+        > li > a:hover{
+            color: $white-color;
+        }
+
+        > li > a:focus{
+            background: rgba(200, 200, 200, 0.2);
+        }
+    }
+}
+
+
+.main-panel{
+    position: relative;
+    float: right;
+    width: $sidebar-width;
+    background-color: #f4f3ef;;
+
+
+    @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+    > .content{
+        padding: 0 30px 30px;
+        min-height: calc(100vh - 123px);
+        margin-top: 93px;
+    }
+
+    > .navbar{
+        margin-bottom: 0;
+    }
+
+
+    .header{
+        margin-bottom: 50px;
+    }
+}
+
+
+.perfect-scrollbar-on{
+  .sidebar,
+  .main-panel{
+      height: 100%;
+      max-height: 100%;
+  }
+}
+
+.panel-header {
+  height: 260px;
+  padding-top: 80px;
+  padding-bottom: 45px;
+  background: #141E30;  /* fallback for old browsers */
+  background: -webkit-gradient(linear, left top, right top, from(#0c2646), color-stop(60%, #204065), to(#2a5788));
+  background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
+  position: relative;
+  overflow: hidden;
+
+  .header{
+    .title{
+      color: $white-color;
+    }
+    .category{
+      max-width: 600px;
+      color: $opacity-5;
+      margin: 0 auto;
+      font-size: 13px;
+
+      a{
+        color: $white-color;
+      }
+    }
+  }
+}
+
+.panel-header-sm{
+  height: 135px;
+}
+
+.panel-header-lg{
+  height: 380px
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_tables.scss

@@ -0,0 +1,173 @@
+.table{
+
+    .img-wrapper{
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin: 0 auto;
+    }
+
+    .img-row{
+      max-width: 60px;
+      width: 60px;
+    }
+
+    .form-check{
+        margin: 0;
+
+        & label .form-check-sign::before,
+        & label .form-check-sign::after{
+            top: -17px;
+            left: 4px;
+        }
+    }
+
+    .btn{
+        margin: 0;
+    }
+
+    small,.small{
+      font-weight: 300;
+    }
+
+    .card-tasks .card-body &{
+        margin-bottom: 0;
+
+        > thead > tr > th,
+        > tbody > tr > th,
+        > tfoot > tr > th,
+        > thead > tr > td,
+        > tbody > tr > td,
+        > tfoot > tr > td{
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    }
+
+   > thead > tr > th{
+       font-size: 14px;
+       font-weight: $font-weight-bold;
+       padding-bottom: 0;
+       text-transform: uppercase;
+       border: 0;
+   }
+
+   .radio,
+   .checkbox{
+       margin-top: 0;
+       margin-bottom: 0;
+       padding: 0;
+       width: 15px;
+
+       .icons{
+           position: relative;
+       }
+
+        label{
+            &:after,
+            &:before{
+                top: -17px;
+                left: -3px;
+            }
+        }
+   }
+   > thead > tr > th,
+   > tbody > tr > th,
+   > tfoot > tr > th,
+   > thead > tr > td,
+   > tbody > tr > td,
+   > tfoot > tr > td{
+       padding: 12px 7px;
+       vertical-align: middle;
+   }
+
+   .th-description{
+       max-width: 150px;
+   }
+   .td-price{
+       font-size: 26px;
+       font-weight: $font-weight-light;
+       margin-top: 5px;
+       position: relative;
+       top: 4px;
+       text-align: right;
+   }
+   .td-total{
+        font-weight: $font-weight-bold;
+        font-size: $font-size-h5;
+        padding-top: 20px;
+        text-align: right;
+    }
+
+   .td-actions .btn{
+    margin: 0px;
+    }
+
+    > tbody > tr{
+        position: relative;
+    }
+}
+
+.table-shopping{
+    > thead > tr > th{
+        font-size: $font-size-h6;
+        text-transform: uppercase;
+    }
+    > tbody > tr > td{
+        font-size: $font-paragraph;
+
+        b{
+            display: block;
+            margin-bottom: 5px;
+        }
+    }
+    .td-name{
+        font-weight: $font-weight-normal;
+        font-size: 1.5em;
+        small{
+            color: $dark-gray;
+            font-size: 0.75em;
+            font-weight: $font-weight-light;
+        }
+    }
+    .td-number{
+       font-weight: $font-weight-light;
+       font-size: $font-size-h4;
+   }
+    .td-name{
+        min-width: 200px;
+    }
+    .td-number{
+        text-align: right;
+        min-width: 170px;
+
+        small{
+            margin-right: 3px;
+        }
+    }
+
+    .img-container{
+        width: 120px;
+        max-height: 160px;
+        overflow: hidden;
+        display: block;
+
+        img{
+            width: 100%;
+        }
+    }
+}
+
+.table-responsive{
+  overflow: scroll;
+  padding-bottom: 10px;
+}
+
+#tables .table-responsive{
+    margin-bottom: 30px;
+}
+
+.table-hover>tbody>tr:hover{
+  background-color: #f5f5f5;
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_typography.scss

@@ -0,0 +1,173 @@
+button,
+input,
+optgroup,
+select,
+textarea{
+    font-family: $sans-serif-family;
+}
+h1,h2,h3,h4,h5,h6{
+    font-weight: $font-weight-normal;
+}
+
+a{
+    color: $primary-color;
+    &:hover,
+    &:focus{
+        color: $primary-color;
+    }
+}
+h1, .h1 {
+    font-size: $font-size-h1;
+    line-height: 1.15;
+    margin-bottom: $margin-base-vertical * 2;
+
+    small{
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+        opacity: .8;
+    }
+}
+h2, .h2{
+    font-size: $font-size-h2;
+    margin-bottom: $margin-base-vertical * 2;
+}
+h3, .h3{
+    font-size: $font-size-h3;
+    margin-bottom: $margin-base-vertical * 2;
+    line-height: 1.4em;
+}
+h4, .h4{
+    font-size: $font-size-h4;
+    line-height: 1.45em;
+    margin-top: $margin-base-vertical * 2;
+    margin-bottom: $margin-base-vertical;
+
+    & + .category,
+    &.title + .category{
+        margin-top: -10px;
+    }
+}
+h5, .h5 {
+    font-size: $font-size-h5;
+    line-height: 1.4em;
+    margin-bottom: 15px;
+}
+h6, .h6{
+    font-size: $font-size-h6;
+    font-weight: $font-weight-bold;
+    text-transform: uppercase;
+}
+p{
+    &.description{
+        font-size: 1.14em;
+    }
+}
+
+// i.fa{
+//     font-size: 18px;
+//     position: relative;
+//     top: 1px;
+// }
+
+.title{
+    font-weight: $font-weight-bold;
+
+    &.title-up{
+        text-transform: uppercase;
+
+        a{
+            color: $black-color;
+            text-decoration: none;
+        }
+    }
+    & + .category{
+        margin-top: -10px;
+    }
+}
+
+.description,
+.card-description,
+.footer-big p,
+.card .footer .stats{
+    color: $dark-gray;
+    font-weight: $font-weight-light;
+}
+.category,
+.card-category{
+    text-transform: capitalize;
+    font-weight: $font-weight-normal;
+    color: $dark-gray;
+    font-size: $font-size-mini;
+}
+
+.card-category{
+    font-size: $font-size-h6;
+}
+
+.text-primary,
+a.text-primary:focus, a.text-primary:hover {
+  color: $brand-primary !important;
+}
+.text-info,
+a.text-info:focus, a.text-info:hover {
+  color: $brand-info !important;
+}
+.text-success,
+a.text-success:focus, a.text-success:hover {
+  color: $brand-success !important;
+}
+.text-warning,
+a.text-warning:focus, a.text-warning:hover {
+  color: $brand-warning !important;
+}
+.text-danger,
+a.text-danger:focus, a.text-danger:hover {
+  color: $brand-danger !important;
+}
+
+.text-gray,
+a.text-gray:focus, a.text-gray:hover{
+    color: $light-gray !important;
+}
+
+
+.blockquote{
+    border-left: none;
+    border: 1px solid $default-color;
+    padding: 20px;
+    font-size: $font-size-blockquote;
+    line-height: 1.8;
+
+    small{
+        color: $default-color;
+        font-size: $font-size-small;
+        text-transform: uppercase;
+    }
+
+    &.blockquote-primary{
+        border-color: $primary-color;
+        color: $primary-color;
+
+        small{
+            color: $primary-color;
+        }
+    }
+
+    &.blockquote-danger{
+        border-color: $danger-color;
+        color: $danger-color;
+
+        small{
+            color: $danger-color;
+        }
+    }
+
+    &.blockquote-white{
+        border-color: $opacity-8;
+        color: $white-color;
+
+        small{
+            color: $opacity-8;
+        }
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/_variables.scss

@@ -0,0 +1,404 @@
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$font-color:                 #66615b !default;
+$fill-font-color:            rgba(255, 255, 255, 0.8);
+$font-family-sans-serif:     'Montserrat', "Helvetica", Arial, sans-serif;
+$sans-serif-family:          'Montserrat', 'Helvetica Neue',  Arial, sans-serif;
+
+
+$none:                       0   !default;
+$border-thin:                1px !default;
+$border-thick:               2px !default;
+
+$white-color:                #FFFFFF !default;
+$white-bg:                   #FFFFFF !default;
+$orange-bg:                  #e95e38 !default;
+
+$smoke-bg:                   #F5F5F5 !default;
+$light-black:                #444    !default;
+
+$black-bg:                   rgba(30,30,30,.97) !default;
+
+$black-color:                #2c2c2c !default;
+$black-hr:                   #444444 !default;
+
+$hr-line:                    rgba(0,0,0, .1) !default;
+
+$light-gray:                 #E3E3E3 !default;
+$medium-gray:                #DDDDDD !default;
+$dark-gray:                  #9A9A9A !default;
+
+$table-line-color:           #ccc !default;
+$muted-color:                #a49e93 !default;
+
+$opacity-gray-3:             rgba(222,222,222, .3) !default;
+$opacity-gray-5:             rgba(222,222,222, .5) !default;
+$opacity-gray-8:             rgba(222,222,222, .8) !default;
+
+
+$opacity-5:                  rgba(255,255,255, .5) !default;
+$opacity-8:                  rgba(255,255,255, .8) !default;
+
+$datepicker-color-days:             rgba(255,255,255, .8)  !default;
+$datepicker-color-old-new-days:     rgba(255,255,255, .4)  !default;
+
+
+$opacity-1:                  rgba(255,255,255, .1) !default;
+$opacity-2:                  rgba(255,255,255, .2) !default;
+
+$transparent-bg:             transparent !default;
+$dark-background:            #555555 !default;
+
+$gray-input-bg:              #fffcf5 !default;
+$danger-input-bg:            #FFC0A4 !default;
+$success-input-bg:           #ABF3CB !default;
+$other-medium-gray:          #A49E93 !default;
+$transparent-bg:             transparent !default;
+
+$placeholder-gray:           rgba(210, 210, 210, 1)  !default;
+
+$default-color:              #66615B !default;
+$default-bg:                 #66615B !default;
+$default-states-color:       #403D39 !default;
+
+$smoke-bg:                   #F5F5F5 !default;
+$pale-bg:                    #FFFCF5 !default;
+$medium-pale-bg:             #F1EAE0 !default;
+$default-body-bg:                 #f4f3ef !default;
+
+$primary-color:              #51cbce !default;
+$primary-states-color:       darken($primary-color, 10%) !default;
+
+$success-color:              #6bd098 !default;
+$success-states-color:       darken($success-color, 10%) !default;
+
+$info-color:                 #51bcda !default;
+$info-states-color:          darken($info-color, 10%) !default;
+
+$warning-color:              #fbc658 !default;
+$warning-states-color:       darken($warning-color, 10%) !default;
+
+$danger-color:               #ef8157 !default;
+$danger-states-color:        darken($danger-color, 8%) !default;
+
+$link-disabled-color:        #666666 !default;
+
+$purple-color:               #c178c1 !default;
+$purple-states-color:        darken($purple-color, 8%) !default;
+
+$medium-pale-bg:             #F1EAE0 !default;
+
+$brown-color:                #dcb285 !default;
+$default-color-opacity:      rgba(182, 182, 182, .6) !default;
+$primary-color-opacity:      rgba(249, 99, 50, .3) !default;
+$success-color-opacity:      rgba(24, 206, 15, .3) !default;
+$info-color-opacity:         rgba(44, 168, 255, .3) !default;
+$warning-color-opacity:      rgba(255, 178, 54, .3) !default;
+$danger-color-opacity:       rgba(255, 54, 54, .3) !default;
+
+$new-blue:            #1DC7EA;
+$new-purple:          #9368E9;
+$new-red:             #FB404B;
+$new-green:           #87CB16;
+$new-orange:          #FFA534;
+$new-dark-blue:       #1F77D0;
+$new-black:           #5e5e5e;
+
+$orange-color:               #f96332 !default;
+$color-red-error: rgb(185, 74, 72) !default;
+$color-grey-arrow: rgba(204, 204, 204, 0.2) !default;
+
+$bg-nude:               #FFFCF5 !default;
+$bg-primary:            lighten($primary-color, 7%) !default;
+$bg-info:               lighten($info-color, 7%) !default;
+$bg-success:            lighten($success-color, 7%) !default;
+$bg-warning:            lighten($warning-color, 7%) !default;
+$bg-danger:             lighten($danger-color, 7%) !default;
+$bg-brown:              lighten($brown-color, 7%) !default;
+$bg-purple:             lighten($purple-color, 7%) !default;
+
+//     brand Colors
+$brand-primary:              $primary-color !default;
+$brand-info:                 $info-color !default;
+$brand-success:              $success-color !default;
+$brand-warning:              $warning-color !default;
+$brand-danger:               $danger-color !default;
+$brand-inverse:              $black-color !default;
+
+$link-disabled-color:        #666666 !default;
+$dark-color:                 #212120 !default;
+//     light colors
+$light-blue:                 rgba($primary-color, .2);
+$light-azure:                rgba($info-color, .2);
+$light-green:                rgba($success-color, .2);
+$light-orange:               rgba($warning-color, .2);
+$light-red:                  rgba($danger-color, .2);
+
+// padding for links inside dropdown menu
+$padding-dropdown-vertical:     10px !default;
+$padding-dropdown-horizontal:   15px !default;
+
+$margin-large-vertical:        30px !default;
+$margin-base-vertical:         15px !default;
+
+// border radius for buttons
+$border-radius-none:             0px !default;
+$border-radius-btn-small:      26px !default;
+$border-radius-btn-base:       20px !default;
+$border-radius-btn-large:      50px !default;
+
+
+$margin-bottom:                0 0 10px 0 !default;
+$border-radius-small:           3px !default;
+$border-radius-base:            4px !default;
+$border-radius-large:           6px !default;
+$border-radius-x-large:         8px !default;
+$border-radius-extreme:         12px !default;
+
+//variables used in cards
+$card-black-color:          #252422 !default;
+$card-muted-color:          #ccc5b9 !default;
+
+$card-background-blue:      #b8d8d8 !default;
+$card-font-blue:            #506568 !default;
+$card-subtitle-blue:        #7a9e9f !default;
+
+$card-background-green:      #d5e5a3 !default;
+$card-font-green:            #60773d !default;
+$card-subtitle-green:        #92ac56 !default;
+
+$card-background-yellow:      #ffe28c !default;
+$card-font-yellow:            #b25825 !default;
+$card-subtitle-yellow:        #d88715 !default;
+
+$card-background-brown:      #d6c1ab !default;
+$card-font-brown:            #75442e !default;
+$card-subtitle-brown:        #a47e65 !default;
+
+$card-background-purple:      #baa9ba !default;
+$card-font-purple:            #3a283d !default;
+$card-subtitle-purple:        #5a283d !default;
+
+$card-background-orange:      #ff8f5e !default;
+$card-font-orange:            #772510 !default;
+$card-subtitle-orange:        #e95e37 !default;
+
+
+
+//== Components
+//
+
+$padding-input-vertical:        11px !default;
+$padding-input-horizontal:      11px !default;
+
+$padding-btn-vertical:         11px !default;
+$padding-btn-horizontal:       22px !default;
+
+$padding-base-vertical:        .5rem !default;
+$padding-base-horizontal:      .7rem !default;
+
+$padding-round-horizontal:     23px !default;
+
+$padding-simple-vertical:      10px !default;
+$padding-simple-horizontal:    17px !default;
+
+$padding-large-vertical:       15px !default;
+$padding-large-horizontal:     48px !default;
+
+$padding-small-vertical:        5px !default;
+$padding-small-horizontal:     15px !default;
+
+// $padding-xs-vertical:           1px !default;
+// $padding-xs-horizontal:         5px !default;
+
+$padding-label-vertical:        2px !default;
+$padding-label-horizontal:     12px !default;
+
+$margin-large-vertical:        30px !default;
+$margin-base-vertical:         15px !default;
+
+$margin-base-horizontal:       15px !default;
+
+$margin-bottom:                 10px        !default;
+$border:                        1px solid   !default;
+$border-radius-extra-small:     0.125rem    !default;
+$border-radius-small:           0.1875rem   !default;
+$border-radius-large:           0.25rem     !default;
+$border-radius-extreme:         0.875rem    !default;
+
+$border-radius-large-top:      $border-radius-large $border-radius-large 0 0 !default;
+$border-radius-large-bottom:   0 0 $border-radius-large $border-radius-large !default;
+
+$btn-round-radius:             30px         !default;
+
+$height-base:                  40px         !default;
+
+$btn-icon-size:                 3.5rem       !default;
+$btn-icon-size-regular:         2.375rem      !default;
+$btn-icon-font-size-regular:    0.9375rem     !default;
+$btn-icon-font-size-small:      0.6875rem      !default;
+$btn-icon-size-small:           1.875rem     !default;
+$btn-icon-font-size-lg:         1.325rem     !default;
+$btn-icon-size-lg:              3.6rem         !default;
+
+$font-size-h1:                 3.5em        !default; // ~ 49px
+$font-size-h2:                 2.5em        !default; // ~ 35px
+$font-size-h3:                 2em          !default; // ~ 28px
+$font-size-h4:                 1.714em      !default; // ~ 24px
+$font-size-h5:                 1.57em       !default; // ~ 22px
+$font-size-h6:                 1em          !default; // ~ 14px
+
+$font-paragraph:               1em          !default;
+$font-size-navbar:             1em          !default;
+$font-size-mini:               0.7142em     !default;
+$font-size-small:              0.8571em     !default;
+$font-size-base:               14px         !default;
+$font-size-large:              1rem         !default;
+$font-size-large-navbar:       20px         !default;
+$font-size-blockquote:         1.1em        !default; // ~ 15px
+$font-size-medium:             16px         !default;
+$font-size-xs:                 12px         !default;
+
+$font-weight-light:             300         !default;
+$font-weight-normal:            400         !default;
+$font-weight-semi:              600         !default;
+$font-weight-bold:              700         !default;
+
+$line-height-general:        1.5            !default;
+$line-height-nav-link:       1.625rem       !default;
+$btn-icon-line-height:       2.4em          !default;
+$line-height:                1.35em         !default;
+$line-height-lg:             54px           !default;
+
+
+$border-radius-top:        10px 10px 0 0     !default;
+$border-radius-bottom:     0 0 10px 10px     !default;
+
+$dropdown-shadow:          1px 2px 7px 1px rgba(0,0,0,.125);
+$box-shadow-raised:        0px 10px 25px 0px rgba(0, 0, 0, 0.3);
+$box-shadow:               0 2px 2px rgba(204, 197, 185, 0.5);
+$sidebar-box-shadow:       0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35);
+
+$general-transition-time:  300ms             !default;
+
+$slow-transition-time:           370ms       !default;
+$dropdown-coordinates:      29px -50px       !default;
+
+$fast-transition-time:           150ms       !default;
+$select-coordinates:         50% -40px       !default;
+
+$transition-linear:         linear           !default;
+$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-ease:           ease 0s;
+
+
+//$navbar-padding-a:               9px 13px;
+$navbar-margin-a:                15px 0px;
+
+$padding-social-a:               10px 5px;
+
+$navbar-margin-a-btn:            15px 0px;
+$navbar-margin-a-btn-round:      16px 0px;
+
+$navbar-padding-a-icons:         6px 15px;
+$navbar-margin-a-icons:          6px  3px;
+
+$navbar-padding-base:            0.625rem;
+//$navbar-margin-brand:             5px  0px;
+
+$navbar-margin-brand-icons:      12px auto;
+$navbar-margin-btn:              15px  3px;
+
+$height-icon-sm:				 32px;
+$width-icon-sm:					 32px;
+$padding-icon-sm:			     4px;
+$border-radius-icon-sm:			 7px;
+
+$height-icon-message:			 40px;
+$width-icon-message:			 40px;
+
+$height-icon-message-sm: 		 20px;
+$width-icon-message-sm:			 20px;
+
+$white-navbar:                  rgba(#FFFFFF, .96);
+$primary-navbar:                rgba(#34ACDC, .98);
+$info-navbar:                   rgba(#5BCAFF, .98);
+$success-navbar:                rgba(#4CD964, .98);
+$warning-navbar:                rgba(#FF9500, .98);
+$danger-navbar:                 rgba(#FF4C40, .98);
+
+$topbar-x:             topbar-x !default;
+$topbar-back:          topbar-back !default;
+$bottombar-x:          bottombar-x !default;
+$bottombar-back:       bottombar-back !default;
+
+//Nucleo Icons
+
+$nc-font-path:        '../fonts' !default;
+$nc-font-size-base:   14px !default;
+$nc-css-prefix:       nc !default;
+$nc-background-color:     #eee !default;
+$nc-li-width:         (30em / 14) !default;
+$nc-padding-width:    (1em/3) !default;
+
+// Social icons color
+$social-twitter:                   #55acee !default;
+$social-twitter-state-color:       darken(#55acee, 5%) !default;
+
+$social-facebook: 			       #3b5998 !default;
+$social-facebook-state-color:      darken(#3b5998, 5%) !default;
+
+$social-google: 			       #dd4b39 !default;
+$social-google-state-color:        darken(#dd4b39, 5%) !default;
+
+$social-linkedin: 			         #0077B5 !default;
+$social-linkedin-state-color:        darken(#0077B5, 5%) !default;
+
+// Sidebar variables
+$sidebar-width:              calc(100% - 260px) !default;
+$sidebar-mini-width:         calc(100% - 80px) !default;
+
+
+// Social icons color
+$social-twitter:                   #55acee !default;
+$social-twitter-state-color:       lighten(#55acee, 6%) !default;
+
+$social-facebook: 			       #3b5998 !default;
+$social-facebook-state-color:      lighten(#3b5998, 6%) !default;
+
+$social-google: 			       #dd4b39 !default;
+$social-google-state-color:        lighten(#dd4b39, 6%) !default;
+
+$social-linkedin: 			       #0077B5 !default;
+$social-linkedin-state-color:      lighten(#0077B5, 6%) !default;
+
+$social-pinterest: 			       #cc2127 !default;
+$social-pinterest-state-color:     lighten(#cc2127, 6%) !default;
+
+$social-dribbble: 		           #ea4c89 !default;
+$social-dribbble-state-color:      lighten(#ea4c89, 6%) !default;
+
+$social-github: 		      	   #333333 !default;
+$social-github-state-color:        lighten(#333333, 6%) !default;
+
+$social-youtube: 		    	   #e52d27 !default;
+$social-youtube-state-color:       lighten(#e52d27, 6%) !default;
+
+$social-instagram: 		           #125688 !default;
+$social-instagram-state-color:     lighten(#125688, 6%) !default;
+
+$social-reddit: 		  	       #ff4500 !default;
+$social-reddit-state-color:        lighten(#ff4500, 6%) !default;
+
+$social-tumblr: 			       #35465c !default;
+$social-tumblr-state-color:        lighten(#35465c, 6%) !default;
+
+$social-behance: 			       #1769ff !default;
+$social-behance-state-color:       lighten(#1769ff, 6%) !default;
+
+// Placeholder text color
+$input-color-placeholder: #999 !default;
+
+$zindex-select-dropdown: 1060 !default; // must be higher than a modal background (1050)

explorer/public/paper-dashboard/assets/scss/paper-dashboard/cards/_card-chart.scss

@@ -0,0 +1,48 @@
+.card-chart {
+  .card-header{
+    .card-title{
+      margin-top: 10px;
+      margin-bottom: 0;
+    }
+    .card-category{
+      margin-bottom: 5px;
+    }
+  }
+
+  .table{
+    margin-bottom: 0;
+
+    td{
+      border-top: none;
+      border-bottom: 1px solid #e9ecef;
+    }
+  }
+
+  .card-progress {
+    margin-top: 30px;
+  }
+
+  .chart-area {
+    height: 190px;
+    width: calc(100% + 30px);
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  .card-footer {
+    margin-top: 15px;
+
+    .stats{
+      color: $dark-gray;
+    }
+  }
+
+  .dropdown{
+    position: absolute;
+    right: 20px;
+    top: 20px;
+
+    .btn{
+      margin: 0;
+    }
+  }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/cards/_card-map.scss

@@ -0,0 +1,3 @@
+.map{
+    height: 500px;
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/cards/_card-plain.scss

@@ -0,0 +1,17 @@
+
+.card-plain{
+    background: transparent;
+    box-shadow: none;
+
+    .card-header,
+    .card-footer{
+        margin-left: 0;
+        margin-right: 0;
+        background-color: transparent;
+    }
+
+    &:not(.card-subcategories).card-body{
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/cards/_card-stats.scss

@@ -0,0 +1,48 @@
+%card-stats{
+  hr{
+    margin: 5px 15px;
+  }
+}
+
+
+.card-stats{
+    .card-body{
+        padding: 15px 15px 0px;
+
+        .numbers{
+          text-align: right;
+          font-size: 2em;
+
+            p{
+                margin-bottom: 0;
+            }
+            .card-category {
+              color: $dark-gray;
+              font-size: 16px;
+              line-height: 1.4em;
+            }
+        }
+    }
+    .card-footer{
+        padding: 0px 15px 15px;
+
+        .stats{
+          color: $dark-gray;
+        }
+
+        hr{
+          margin-top: 10px;
+          margin-bottom: 15px;
+        }
+    }
+    .icon-big {
+        font-size: 3em;
+        min-height: 64px;
+
+        i{
+            line-height: 59px;
+        }
+    }
+
+
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/cards/_card-user.scss

@@ -0,0 +1,50 @@
+.card-user{
+    .image{
+        height: 130px;
+
+      img {
+        border-radius: 12px;
+      }
+    }
+
+    .author{
+        text-align: center;
+        text-transform: none;
+        margin-top: -77px;
+
+        a +  p.description{
+            margin-top: -7px;
+        }
+    }
+
+    .avatar{
+        width: 124px;
+        height: 124px;
+        border: 1px solid $white-color;
+        position: relative;
+    }
+
+    .card-body{
+        min-height: 240px;
+    }
+
+    hr{
+        margin: 5px 15px 15px;
+    }
+
+    .card-body + .card-footer {
+      padding-top: 0;
+    }
+
+    .card-footer {
+      h5 {
+        font-size: 1.25em;
+        margin-bottom: 0;
+      }
+    }
+
+    .button-container{
+        margin-bottom: 6px;
+        text-align: center;
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/mixins/_buttons.scss

@@ -0,0 +1,212 @@
+// Mixin for generating new styles
+@mixin btn-styles($btn-color, $btn-states-color) {
+    background-color: $btn-color;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &:active:focus,
+    &:active:hover,
+    &.active:focus,
+    &.active:hover,
+    .show > &.dropdown-toggle,
+    .show > &.dropdown-toggle:focus,
+    .show > &.dropdown-toggle:hover {
+        background-color: $btn-states-color !important;
+        color: $white-color !important;
+        box-shadow: none !important;
+    }
+
+    &:not([data-action]):hover{
+        box-shadow:  none;
+    }
+
+    &.disabled,
+    &:disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &.focus,
+        &:active,
+        &.active {
+            background-color: $btn-color;
+            border-color: $btn-color;
+        }
+    }
+
+    // btn-neutral style
+    @if $btn-color == $white-color{
+        color: $primary-color;
+
+        &.btn-danger{
+            color: $danger-color;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $danger-states-color !important;
+            }
+        }
+
+        &.btn-info{
+            color: $info-color !important;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $info-states-color !important;
+            }
+        }
+
+        &.btn-warning{
+            color: $warning-color !important;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $warning-states-color !important;
+            }
+        }
+
+        &.btn-success{
+            color: $success-color !important;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $success-states-color !important;
+            }
+        }
+
+        &.btn-default{
+            color: $default-color !important;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &:active:focus{
+                color: $default-states-color !important;
+            }
+        }
+
+        &.active,
+        &:active,
+        &:active:focus,
+        &:active:hover,
+        &.active:focus,
+        &.active:hover,
+        .show > &.dropdown-toggle,
+        .show > &.dropdown-toggle:focus,
+        .show > &.dropdown-toggle:hover {
+            background-color: $white-color !important;
+            color: $primary-states-color !important;
+            box-shadow: none !important;
+        }
+
+        &:hover,
+        &:focus{
+            color: $primary-states-color !important;
+
+            &:not(.nav-link){
+                box-shadow: none;
+            }
+
+        }
+
+    } @else {
+        color: $white-color;
+    }
+
+    &.btn-simple{
+        color: $btn-color;
+        border-color: $btn-color;
+
+        &:hover,
+        &:focus,
+        &:active{
+            background-color: $transparent-bg;
+            color: $btn-states-color;
+            border-color: $btn-states-color;
+            box-shadow: none;
+        }
+    }
+
+    &.btn-link{
+        color: $btn-color;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &:active:focus {
+            background-color: $transparent-bg;
+            color: $btn-states-color;
+            text-decoration: none;
+            box-shadow: none;
+        }
+    }
+}
+
+@mixin btn-outline-styles($btn-color, $btn-states-color){
+    background: $transparent-bg;
+    border: 2px solid $btn-color !important;
+    color: $btn-color;
+    @include opacity(1);
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:focus:active,
+    &.active,
+    .open > &.dropdown-toggle {
+      background-color: $btn-color !important;
+      color: $fill-font-color !important;
+      border-color: $btn-color !important;
+      .caret{
+          border-top-color: $fill-font-color !important;
+      }
+    }
+
+    .caret{
+        border-top-color: $white-color !important;
+    }
+
+    &.disabled,
+    &:disabled,
+    &[disabled],
+    fieldset[disabled] & {
+      &,
+      &:hover,
+      &:focus,
+      &.focus,
+      &:active,
+      &.active {
+        background-color: $transparent-bg !important;
+        border-color: $btn-color !important;
+      }
+    }
+}
+
+@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
+   font-size: $font-size;
+   border-radius: $border;
+   padding: $padding-vertical $padding-horizontal;
+
+   &.btn-simple{
+       padding: $padding-vertical - 1 $padding-horizontal - 1;
+   }
+
+}
+
+@mixin rotate-180(){
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/mixins/_cards.scss

@@ -0,0 +1,4 @@
+@mixin icon-color($color) {
+    box-shadow:  0px 9px 30px -6px $color;
+    color: $color;
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/mixins/_dropdown.scss

@@ -0,0 +1,24 @@
+@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
+    background-color: $brand-color;
+
+    &:before{
+        color: $brand-color;
+    }
+
+    .dropdown-header:not([href]):not([tabindex]){
+        color: $dropdown-header-color;
+    }
+
+    .dropdown-item{
+        color: $dropdown-color;
+
+        &:hover,
+        &:focus{
+            background-color: $background-color;
+        }
+    }
+
+    .dropdown-divider{
+        background-color: $background-color;
+    }
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/mixins/_inputs.scss

@@ -0,0 +1,232 @@
+@mixin input-size($padding-vertical, $padding-horizontal){
+    padding: $padding-vertical $padding-horizontal;
+}
+
+@mixin form-control-placeholder($color, $opacity){
+   .form-control::-moz-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+   .form-control:-moz-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+   .form-control::-webkit-input-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+   .form-control:-ms-input-placeholder{
+       color: $color;
+       @include opacity(1);
+   }
+}
+
+@mixin placeholder() {
+  &::-moz-placeholder {@content; } // Firefox
+  &:-ms-input-placeholder {@content; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  {@content; } // Safari and Chrome
+}
+
+@mixin light-form(){
+    border-radius: 0;
+    border:0;
+    padding: 0;
+    background-color: transparent;
+
+}
+
+
+@mixin form-control-lg-padding($padding-vertical, $padding-horizontal) {
+    .form-group.no-border.form-control-lg,
+    .input-group.no-border.form-control-lg{
+        .input-group-append .input-group-text{
+            padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
+        }
+
+        .form-control{
+            padding: $padding-vertical $padding-horizontal;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical $padding-horizontal $padding-vertical 0;
+            }
+        }
+    }
+
+    .form-group.form-control-lg,
+    .input-group.form-control-lg{
+        .form-control{
+            padding: $padding-vertical - 1 $padding-horizontal - 1;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
+
+            & + .form-control{
+                padding: $padding-vertical  $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
+            }
+        }
+    }
+}
+
+
+
+@mixin input-base-padding($padding-vertical, $padding-horizontal) {
+    .form-group.no-border,
+    .input-group.no-border{
+        .form-control{
+            padding: $padding-vertical $padding-horizontal;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical $padding-horizontal $padding-vertical 0;
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
+        }
+    }
+
+    .form-group,
+    .input-group{
+        .form-control{
+            padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
+
+            & + .input-group-prepend .input-group-text,
+            & + .input-group-append .input-group-text{
+                padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
+
+            & + .form-control,
+            & ~ .form-control{
+                padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
+            }
+        }
+    }
+}
+
+
+//color1 = $opacity-5
+//color2 = $opacity-8
+//color3 = $white-color
+//color4 = $transparent-bg
+//color5 = $opacity-1
+//color6 = $opacity-2
+
+
+@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
+    @include form-control-placeholder(darken($color2, 8%), 1);
+
+    .form-control{
+        border-color: $color1;
+        color: $color2;
+
+        &:focus{
+            border-color: $color3;
+            background-color: $color4;
+            color: $color3;
+        }
+    }
+
+    .has-success,
+    .has-danger{
+        &:after{
+            color: $color3;
+        }
+    }
+
+    .has-danger{
+        .form-control{
+            background-color: $color4;
+        }
+    }
+
+    .input-group-prepend .input-group-text,
+    .input-group-append .input-group-text{
+        background-color: $color4;
+        border-color: $color1;
+        color: $color2;
+    }
+
+    .input-group-focus{
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            background-color: $color4;
+            border-color: $color3;
+            color: $color3;
+        }
+    }
+
+    .form-group.no-border,
+    .input-group.no-border{
+        .form-control{
+            background-color: $color5;
+            color: $color2;
+
+            &:focus,
+            &:active,
+            &:active{
+                background-color: $color6;
+                color: $color3;
+            }
+        }
+
+        .form-control + .input-group-prepend .input-group-text,
+        .form-control + .input-group-append .input-group-text{
+            background-color: $color5;
+
+            &:focus,
+            &:active,
+            &:active{
+                background-color: $color6;
+                color: $color3;
+            }
+        }
+
+        .form-control{
+            &:focus{
+                & + .input-group-prepend .input-group-text,
+                & + .input-group-append .input-group-text{
+                    background-color: $color6;
+                    color: $color3;
+                }
+            }
+        }
+
+        .input-group-prepend .input-group-text,
+        .input-group-append .input-group-text{
+            background-color: $color5;
+            border: none;
+            color: $color2;
+        }
+
+        &.input-group-focus{
+            .input-group-prepend .input-group-text,
+            .input-group-append .input-group-text{
+                background-color: $color6;
+                color: $color3;
+            }
+        }
+    }
+}
+
+@mixin transition-input-focus-color() {
+    -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/mixins/_page-header.scss

@@ -0,0 +1,7 @@
+@mixin linear-gradient($color1, $color2){
+    background: $color1; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/mixins/_transparency.scss

@@ -0,0 +1,8 @@
+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/mixins/_vendor-prefixes.scss

@@ -0,0 +1,228 @@
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+@mixin transition($time, $type){
+    -webkit-transition: all $time $type;
+    -moz-transition: all $time $type;
+    -o-transition: all $time $type;
+    -ms-transition: all $time $type;
+    transition: all $time $type;
+}
+
+
+@mixin sidebar-color($color){
+  &:after{
+    background: $color;
+  }
+}
+
+@mixin bar-animation($type){
+     -webkit-animation: $type 500ms linear 0s;
+     -moz-animation: $type 500ms linear 0s;
+     animation: $type 500ms 0s;
+     -webkit-animation-fill-mode: forwards;
+     -moz-animation-fill-mode: forwards;
+     animation-fill-mode: forwards;
+}
+
+@mixin sidebar-active-color($font-color){
+    .nav {
+        li {
+          &.active > a,
+          &.active > a i,
+          &.active > a[data-toggle="collapse"],
+          &.active > a[data-toggle="collapse"] i,
+          &.active > a[data-toggle="collapse"] ~ div > ul > li.active .sidebar-mini-icon,
+          &.active > a[data-toggle="collapse"] ~ div > ul > li.active > a {
+            color: $font-color;
+            opacity: 1;
+          }
+        }
+    }
+}
+
+@mixin transition-opacity($time, $type){
+    -webkit-transition: opacity $time $type;
+    -moz-transition: opacity $time $type;
+    -o-transition: opacity $time $type;
+    -ms-transition: opacity $time $type;
+    transition: opacity $time $type;
+}
+
+@mixin transform-translate-y-dropdown($value) {
+    -webkit-transform:  translate3d(-20px,$value,0) !important;
+       -moz-transform: translate3d(-20px,$value,0) !important;
+       -o-transform: translate3d(-20px,$value,0) !important;
+       -ms-transform: translate3d(-20px,$value,0) !important;
+       transform: translate3d(-20px,$value,0) !important;
+}
+
+@mixin transform-translate-x($value){
+     -webkit-transform:  translate3d($value, 0, 0);
+        -moz-transform: translate3d($value, 0, 0);
+        -o-transform: translate3d($value, 0, 0);
+        -ms-transform: translate3d($value, 0, 0);
+        transform: translate3d($value, 0, 0);
+}
+
+@mixin transform-translate-y($value){
+     -webkit-transform:  translate3d(0,$value,0) !important;
+        -moz-transform: translate3d(0,$value,0) !important;
+        -o-transform: translate3d(0,$value,0) !important;
+        -ms-transform: translate3d(0,$value,0) !important;
+        transform: translate3d(0,$value,0) !important;
+}
+
+@mixin transform-translate-y-fixed-plugin($value){
+     -webkit-transform:  translate3d(0,$value,0) !important;
+        -moz-transform: translate3d(0,$value,0) !important;
+        -o-transform: translate3d(0,$value,0) !important;
+        -ms-transform: translate3d(0,$value,0) !important;
+        transform: translate3d(0,$value,0) !important;
+}
+
+@mixin icon-gradient($color, $bottomColor: #000){
+    background: $color;
+    background: -webkit-linear-gradient($color 0%, $bottomColor 80%);
+    background: -o-linear-gradient($color 0%, $bottomColor 80%);
+    background: -moz-linear-gradient($color 0%, $bottomColor 80%);
+    background: linear-gradient($color 0%, $bottomColor 80%);
+}
+
+@mixin topbar-x-rotation(){
+    @keyframes topbar-x {
+      0% {top: 0px; transform: rotate(0deg); }
+      45% {top: 6px; transform: rotate(145deg); }
+      75% {transform: rotate(130deg); }
+      100% {transform: rotate(135deg); }
+    }
+    @-webkit-keyframes topbar-x {
+      0% {top: 0px; -webkit-transform: rotate(0deg); }
+      45% {top: 6px; -webkit-transform: rotate(145deg); }
+      75% {-webkit-transform: rotate(130deg); }
+      100% { -webkit-transform: rotate(135deg); }
+    }
+    @-moz-keyframes topbar-x {
+      0% {top: 0px; -moz-transform: rotate(0deg); }
+      45% {top: 6px; -moz-transform: rotate(145deg); }
+      75% {-moz-transform: rotate(130deg); }
+      100% { -moz-transform: rotate(135deg); }
+    }
+}
+
+
+@mixin topbar-back-rotation(){
+    @keyframes topbar-back {
+      0% { top: 6px; transform: rotate(135deg); }
+      45% { transform: rotate(-10deg); }
+      75% { transform: rotate(5deg); }
+      100% { top: 0px; transform: rotate(0); }
+    }
+
+    @-webkit-keyframes topbar-back {
+      0% { top: 6px; -webkit-transform: rotate(135deg); }
+      45% { -webkit-transform: rotate(-10deg); }
+      75% { -webkit-transform: rotate(5deg); }
+      100% { top: 0px; -webkit-transform: rotate(0); }
+    }
+
+    @-moz-keyframes topbar-back {
+      0% { top: 6px; -moz-transform: rotate(135deg); }
+      45% { -moz-transform: rotate(-10deg); }
+      75% { -moz-transform: rotate(5deg); }
+      100% { top: 0px; -moz-transform: rotate(0); }
+    }
+}
+
+@mixin bottombar-x-rotation(){
+    @keyframes bottombar-x {
+      0% {bottom: 0px; transform: rotate(0deg);}
+      45% {bottom: 6px; transform: rotate(-145deg);}
+      75% {transform: rotate(-130deg);}
+      100% {transform: rotate(-135deg);}
+    }
+    @-webkit-keyframes bottombar-x {
+      0% {bottom: 0px; -webkit-transform: rotate(0deg);}
+      45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
+      75% {-webkit-transform: rotate(-130deg);}
+      100% {-webkit-transform: rotate(-135deg);}
+    }
+    @-moz-keyframes bottombar-x {
+      0% {bottom: 0px; -moz-transform: rotate(0deg);}
+      45% {bottom: 6px; -moz-transform: rotate(-145deg);}
+      75% {-moz-transform: rotate(-130deg);}
+      100% {-moz-transform: rotate(-135deg);}
+    }
+}
+
+@mixin bottombar-back-rotation{
+    @keyframes bottombar-back {
+      0% { bottom: 6px;transform: rotate(-135deg);}
+      45% { transform: rotate(10deg);}
+      75% { transform: rotate(-5deg);}
+      100% { bottom: 0px;transform: rotate(0);}
+    }
+    @-webkit-keyframes bottombar-back {
+      0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
+      45% {-webkit-transform: rotate(10deg);}
+      75% {-webkit-transform: rotate(-5deg);}
+      100% {bottom: 0px;-webkit-transform: rotate(0);}
+    }
+    @-moz-keyframes bottombar-back {
+      0% {bottom: 6px;-moz-transform: rotate(-135deg);}
+      45% {-moz-transform: rotate(10deg);}
+      75% {-moz-transform: rotate(-5deg);}
+      100% {bottom: 0px;-moz-transform: rotate(0);}
+    }
+
+}
+
+@mixin sidebar-text-color($text-color){
+    .nav {
+      li {
+        a,
+        a i,
+        a[data-toggle="collapse"],
+        a[data-toggle="collapse"] i,
+        a[data-toggle="collapse"] ~ div > ul > li .sidebar-mini-icon,
+        a[data-toggle="collapse"] ~ div > ul > li > a {
+          color: $text-color;
+          opacity: .7;
+        }
+
+        &:hover:not(.active) > a,
+        &:focus:not(.active) > a {
+            opacity: 1;
+        }
+      }
+    }
+
+    .logo {
+      .simple-text {
+        color: $text-color;
+      }
+      &:after {
+        background-color: $text-color;
+        opacity: .4;
+      }
+    }
+
+    .user {
+      .info a span,
+      .nav .sidebar-mini-icon,
+      .nav .sidebar-normal {
+        color: $text-color !important;
+      }
+      &:after {
+        background-color: $text-color;
+        opacity: .4;
+      }
+    }
+}
+
+@mixin badge-color($color) {
+    border-color: $color;
+    background-color: $color;
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/plugins/_plugin-animate-bootstrap-notify.scss

@@ -0,0 +1,227 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@charset "UTF-8";
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2015 Daniel Eden
+*/
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.bounceIn,
+.animated.bounceOut {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+@-webkit-keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+@keyframes shake {
+  from, to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+
+
+@-webkit-keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}

explorer/public/paper-dashboard/assets/scss/paper-dashboard/plugins/_plugin-perfect-scrollbar.scss

@@ -0,0 +1,113 @@
+/* perfect-scrollbar v0.6.13 */
+.ps-container {
+  -ms-touch-action: auto;
+  touch-action: auto;
+  overflow: hidden !important;
+  -ms-overflow-style: none; }
+  @supports (-ms-overflow-style: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps-container {
+      overflow: auto !important; } }
+  .ps-container.ps-active-x > .ps-scrollbar-x-rail,
+  .ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background-color: transparent; }
+  .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 0px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 15px; }
+    .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      bottom: 2px;
+      /* there must be 'bottom' for ps-scrollbar-x */
+      height: 6px; }
+    .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+      height: 11px; }
+  .ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 15px; }
+    .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: #aaa;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+      -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+      transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+      right: 2px;
+      /* there must be 'right' for ps-scrollbar-y */
+      width: 6px; }
+    .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+      width: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+      background-color: #999;
+      height: 11px; }
+  .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+      background-color: #999;
+      width: 11px; }
+  .ps-container:hover > .ps-scrollbar-x-rail,
+  .ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: 0.6; }
+  .ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+      background-color: #999; }
+  .ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: #eee;
+    opacity: 0.9; }
+    .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+      background-color: #999; }

explorer/public/paper-dashboard/docs/documentation.html

@@ -0,0 +1,130 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Components Documentation - Paper Dashboard 2 by Creative Tim
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../assets/demo/demo.css" rel="stylesheet" />
+</head>
+
+<body class="offline-doc">
+  <!-- Navbar -->
+  <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+    <div class="container">
+      <div class="navbar-wrapper">
+        <div class="navbar-toggle">
+          <button type="button" class="navbar-toggler">
+            <span class="navbar-toggler-bar bar1"></span>
+            <span class="navbar-toggler-bar bar2"></span>
+            <span class="navbar-toggler-bar bar3"></span>
+          </button>
+        </div>
+        <a class="navbar-brand" href="#pablo">Paper Dashboard 2</a>
+      </div>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-bar navbar-kebab"></span>
+        <span class="navbar-toggler-bar navbar-kebab"></span>
+        <span class="navbar-toggler-bar navbar-kebab"></span>
+      </button>
+      <div class="collapse navbar-collapse justify-content-end" id="navigation">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link" href="https://github.com/creativetimofficial/paper-dashboard/issues" target="_blank">
+              Have an issue?
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <!-- End Navbar -->
+  <div class="page-header clear-filter">
+    <div class="page-header-image" style="background-image: url('../assets/img/jan-sendereks.jpg');"></div>
+    <div class="container text-center">
+      <div class="col-md-8 ml-auto mr-auto">
+        <div class="brand">
+          <h1 class="title">
+            Paper Dashboard 2
+          </h1>
+          <h3 class="description">Documentation v2.0.0</h3>
+          <br/>
+          <a href="https://creativetimofficial.github.io/paper-dashboard/docs/1.0/getting-started/introduction.html" class="btn btn-primary btn-round btn-lg">View documentation</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <footer class="footer footer-black  footer-white ">
+    <div class="container-fluid">
+      <div class="row">
+        <nav class="footer-nav">
+          <ul>
+            <li>
+              <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>
+            </li>
+            <li>
+              <a href="http://blog.creative-tim.com/" target="_blank">Blog</a>
+            </li>
+            <li>
+              <a href="https://www.creative-tim.com/license" target="_blank">Licenses</a>
+            </li>
+          </ul>
+        </nav>
+        <div class="credits ml-auto">
+          <span class="copyright">
+            ©
+            <script>
+              document.write(new Date().getFullYear())
+            </script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
+          </span>
+        </div>
+      </div>
+    </div>
+  </footer>
+  <!--   Core JS Files   -->
+  <script src="../assets/js/core/jquery.min.js"></script>
+  <script src="../assets/js/core/popper.min.js"></script>
+  <script src="../assets/js/core/bootstrap.min.js"></script>
+  <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!--  Google Maps Plugin    -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+  <!-- Chart JS -->
+  <script src="../assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="../assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="../assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+  <script src="../assets/demo/demo.js"></script>
+</body>
+
+</html>

explorer/public/paper-dashboard/examples/dashboard.html

@@ -0,0 +1,408 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Paper Dashboard 2 by Creative Tim
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../assets/demo/demo.css" rel="stylesheet" />
+</head>
+
+<body class="">
+  <div class="wrapper ">
+    <div class="sidebar" data-color="white" data-active-color="danger">
+      <!--
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
+    -->
+      <div class="logo">
+        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+          <div class="logo-image-small">
+            <img src="../assets/img/logo-small.png">
+          </div>
+        </a>
+        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
+          Creative Tim
+          <!-- <div class="logo-image-big">
+            <img src="../assets/img/logo-big.png">
+          </div> -->
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <ul class="nav">
+          <li class="active ">
+            <a href="./dashboard.html">
+              <i class="nc-icon nc-bank"></i>
+              <p>Dashboard</p>
+            </a>
+          </li>
+          <li>
+            <a href="./icons.html">
+              <i class="nc-icon nc-diamond"></i>
+              <p>Icons</p>
+            </a>
+          </li>
+          <li>
+            <a href="./map.html">
+              <i class="nc-icon nc-pin-3"></i>
+              <p>Maps</p>
+            </a>
+          </li>
+          <li>
+            <a href="./notifications.html">
+              <i class="nc-icon nc-bell-55"></i>
+              <p>Notifications</p>
+            </a>
+          </li>
+          <li>
+            <a href="./user.html">
+              <i class="nc-icon nc-single-02"></i>
+              <p>User Profile</p>
+            </a>
+          </li>
+          <li>
+            <a href="./tables.html">
+              <i class="nc-icon nc-tile-56"></i>
+              <p>Table List</p>
+            </a>
+          </li>
+          <li>
+            <a href="./typography.html">
+              <i class="nc-icon nc-caps-small"></i>
+              <p>Typography</p>
+            </a>
+          </li>
+          <li class="active-pro">
+            <a href="./upgrade.html">
+              <i class="nc-icon nc-spaceship"></i>
+              <p>Upgrade to PRO</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main-panel">
+      <!-- Navbar -->
+      <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+        <div class="container-fluid">
+          <div class="navbar-wrapper">
+            <div class="navbar-toggle">
+              <button type="button" class="navbar-toggler">
+                <span class="navbar-toggler-bar bar1"></span>
+                <span class="navbar-toggler-bar bar2"></span>
+                <span class="navbar-toggler-bar bar3"></span>
+              </button>
+            </div>
+            <a class="navbar-brand" href="#pablo">Paper Dashboard 2</a>
+          </div>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <form>
+              <div class="input-group no-border">
+                <input type="text" value="" class="form-control" placeholder="Search...">
+                <div class="input-group-append">
+                  <div class="input-group-text">
+                    <i class="nc-icon nc-zoom-split"></i>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link btn-magnify" href="#pablo">
+                  <i class="nc-icon nc-layout-11"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Stats</span>
+                  </p>
+                </a>
+              </li>
+              <li class="nav-item btn-rotate dropdown">
+                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="nc-icon nc-bell-55"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Some Actions</span>
+                  </p>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                  <a class="dropdown-item" href="#">Action</a>
+                  <a class="dropdown-item" href="#">Another action</a>
+                  <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-rotate" href="#pablo">
+                  <i class="nc-icon nc-settings-gear-65"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Account</span>
+                  </p>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- End Navbar -->
+      <!-- <div class="panel-header panel-header-lg">
+
+  <canvas id="bigDashboardChart"></canvas>
+
+
+</div> -->
+      <div class="content">
+        <div class="row">
+          <div class="col-lg-3 col-md-6 col-sm-6">
+            <div class="card card-stats">
+              <div class="card-body ">
+                <div class="row">
+                  <div class="col-5 col-md-4">
+                    <div class="icon-big text-center icon-warning">
+                      <i class="nc-icon nc-globe text-warning"></i>
+                    </div>
+                  </div>
+                  <div class="col-7 col-md-8">
+                    <div class="numbers">
+                      <p class="card-category">Capacity</p>
+                      <p class="card-title">150GB
+                        <p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer ">
+                <hr>
+                <div class="stats">
+                  <i class="fa fa-refresh"></i> Update Now
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-3 col-md-6 col-sm-6">
+            <div class="card card-stats">
+              <div class="card-body ">
+                <div class="row">
+                  <div class="col-5 col-md-4">
+                    <div class="icon-big text-center icon-warning">
+                      <i class="nc-icon nc-money-coins text-success"></i>
+                    </div>
+                  </div>
+                  <div class="col-7 col-md-8">
+                    <div class="numbers">
+                      <p class="card-category">Revenue</p>
+                      <p class="card-title">$ 1,345
+                        <p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer ">
+                <hr>
+                <div class="stats">
+                  <i class="fa fa-calendar-o"></i> Last day
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-3 col-md-6 col-sm-6">
+            <div class="card card-stats">
+              <div class="card-body ">
+                <div class="row">
+                  <div class="col-5 col-md-4">
+                    <div class="icon-big text-center icon-warning">
+                      <i class="nc-icon nc-vector text-danger"></i>
+                    </div>
+                  </div>
+                  <div class="col-7 col-md-8">
+                    <div class="numbers">
+                      <p class="card-category">Errors</p>
+                      <p class="card-title">23
+                        <p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer ">
+                <hr>
+                <div class="stats">
+                  <i class="fa fa-clock-o"></i> In the last hour
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-3 col-md-6 col-sm-6">
+            <div class="card card-stats">
+              <div class="card-body ">
+                <div class="row">
+                  <div class="col-5 col-md-4">
+                    <div class="icon-big text-center icon-warning">
+                      <i class="nc-icon nc-favourite-28 text-primary"></i>
+                    </div>
+                  </div>
+                  <div class="col-7 col-md-8">
+                    <div class="numbers">
+                      <p class="card-category">Followers</p>
+                      <p class="card-title">+45K
+                        <p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer ">
+                <hr>
+                <div class="stats">
+                  <i class="fa fa-refresh"></i> Update now
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card ">
+              <div class="card-header ">
+                <h5 class="card-title">Users Behavior</h5>
+                <p class="card-category">24 Hours performance</p>
+              </div>
+              <div class="card-body ">
+                <canvas id=chartHours width="400" height="100"></canvas>
+              </div>
+              <div class="card-footer ">
+                <hr>
+                <div class="stats">
+                  <i class="fa fa-history"></i> Updated 3 minutes ago
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-4">
+            <div class="card ">
+              <div class="card-header ">
+                <h5 class="card-title">Email Statistics</h5>
+                <p class="card-category">Last Campaign Performance</p>
+              </div>
+              <div class="card-body ">
+                <canvas id="chartEmail"></canvas>
+              </div>
+              <div class="card-footer ">
+                <div class="legend">
+                  <i class="fa fa-circle text-primary"></i> Opened
+                  <i class="fa fa-circle text-warning"></i> Read
+                  <i class="fa fa-circle text-danger"></i> Deleted
+                  <i class="fa fa-circle text-gray"></i> Unopened
+                </div>
+                <hr>
+                <div class="stats">
+                  <i class="fa fa-calendar"></i> Number of emails sent
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-8">
+            <div class="card card-chart">
+              <div class="card-header">
+                <h5 class="card-title">NASDAQ: AAPL</h5>
+                <p class="card-category">Line Chart with Points</p>
+              </div>
+              <div class="card-body">
+                <canvas id="speedChart" width="400" height="100"></canvas>
+              </div>
+              <div class="card-footer">
+                <div class="chart-legend">
+                  <i class="fa fa-circle text-info"></i> Tesla Model S
+                  <i class="fa fa-circle text-warning"></i> BMW 5 Series
+                </div>
+                <hr/>
+                <div class="card-stats">
+                  <i class="fa fa-check"></i> Data information certified
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-black  footer-white ">
+        <div class="container-fluid">
+          <div class="row">
+            <nav class="footer-nav">
+              <ul>
+                <li>
+                  <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>
+                </li>
+                <li>
+                  <a href="http://blog.creative-tim.com/" target="_blank">Blog</a>
+                </li>
+                <li>
+                  <a href="https://www.creative-tim.com/license" target="_blank">Licenses</a>
+                </li>
+              </ul>
+            </nav>
+            <div class="credits ml-auto">
+              <span class="copyright">
+                ©
+                <script>
+                  document.write(new Date().getFullYear())
+                </script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--   Core JS Files   -->
+  <script src="../assets/js/core/jquery.min.js"></script>
+  <script src="../assets/js/core/popper.min.js"></script>
+  <script src="../assets/js/core/bootstrap.min.js"></script>
+  <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!--  Google Maps Plugin    -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+  <!-- Chart JS -->
+  <script src="../assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="../assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="../assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+  <script src="../assets/demo/demo.js"></script>
+  <script>
+    $(document).ready(function() {
+      // Javascript method's body can be found in assets/assets-for-demo/js/demo.js
+      demo.initChartsPages();
+    });
+  </script>
+</body>
+
+</html>

explorer/public/paper-dashboard/examples/icons.html

@@ -0,0 +1,696 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Paper Dashboard 2 by Creative Tim
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../assets/demo/demo.css" rel="stylesheet" />
+</head>
+
+<body class="">
+  <div class="wrapper ">
+    <div class="sidebar" data-color="white" data-active-color="danger">
+      <!--
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
+    -->
+      <div class="logo">
+        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+          <div class="logo-image-small">
+            <img src="../assets/img/logo-small.png">
+          </div>
+        </a>
+        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
+          Creative Tim
+          <!-- <div class="logo-image-big">
+            <img src="../assets/img/logo-big.png">
+          </div> -->
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <ul class="nav">
+          <li>
+            <a href="./dashboard.html">
+              <i class="nc-icon nc-bank"></i>
+              <p>Dashboard</p>
+            </a>
+          </li>
+          <li class="active ">
+            <a href="./icons.html">
+              <i class="nc-icon nc-diamond"></i>
+              <p>Icons</p>
+            </a>
+          </li>
+          <li>
+            <a href="./map.html">
+              <i class="nc-icon nc-pin-3"></i>
+              <p>Maps</p>
+            </a>
+          </li>
+          <li>
+            <a href="./notifications.html">
+              <i class="nc-icon nc-bell-55"></i>
+              <p>Notifications</p>
+            </a>
+          </li>
+          <li>
+            <a href="./user.html">
+              <i class="nc-icon nc-single-02"></i>
+              <p>User Profile</p>
+            </a>
+          </li>
+          <li>
+            <a href="./tables.html">
+              <i class="nc-icon nc-tile-56"></i>
+              <p>Table List</p>
+            </a>
+          </li>
+          <li>
+            <a href="./typography.html">
+              <i class="nc-icon nc-caps-small"></i>
+              <p>Typography</p>
+            </a>
+          </li>
+          <li class="active-pro">
+            <a href="./upgrade.html">
+              <i class="nc-icon nc-spaceship"></i>
+              <p>Upgrade to PRO</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main-panel">
+      <!-- Navbar -->
+      <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+        <div class="container-fluid">
+          <div class="navbar-wrapper">
+            <div class="navbar-toggle">
+              <button type="button" class="navbar-toggler">
+                <span class="navbar-toggler-bar bar1"></span>
+                <span class="navbar-toggler-bar bar2"></span>
+                <span class="navbar-toggler-bar bar3"></span>
+              </button>
+            </div>
+            <a class="navbar-brand" href="#pablo">Paper Dashboard 2</a>
+          </div>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <form>
+              <div class="input-group no-border">
+                <input type="text" value="" class="form-control" placeholder="Search...">
+                <div class="input-group-append">
+                  <div class="input-group-text">
+                    <i class="nc-icon nc-zoom-split"></i>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link btn-magnify" href="#pablo">
+                  <i class="nc-icon nc-layout-11"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Stats</span>
+                  </p>
+                </a>
+              </li>
+              <li class="nav-item btn-rotate dropdown">
+                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="nc-icon nc-bell-55"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Some Actions</span>
+                  </p>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                  <a class="dropdown-item" href="#">Action</a>
+                  <a class="dropdown-item" href="#">Another action</a>
+                  <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-rotate" href="#pablo">
+                  <i class="nc-icon nc-settings-gear-65"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Account</span>
+                  </p>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- End Navbar -->
+      <!-- <div class="panel-header panel-header-sm">
+
+
+</div> -->
+      <div class="content">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card demo-icons">
+              <div class="card-header">
+                <h5 class="card-title">100 Awesome Nucleo Icons</h5>
+                <p class="card-category">Handcrafted by our friends from
+                  <a href="https://nucleoapp.com/?ref=1712">NucleoApp</a>
+                </p>
+              </div>
+              <div class="card-body all-icons">
+                <div id="icons-wrapper">
+                  <section>
+                    <ul>
+                      <li>
+                        <i class="nc-icon nc-air-baloon"></i>
+                        <p>nc-air-baloon</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-album-2"></i>
+                        <p>nc-album-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-alert-circle-i"></i>
+                        <p>nc-alert-circle-i</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-align-center"></i>
+                        <p>nc-align-center</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-align-left-2"></i>
+                        <p>nc-align-left-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-ambulance"></i>
+                        <p>nc-ambulance</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-app"></i>
+                        <p>nc-app</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-atom"></i>
+                        <p>nc-atom</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-badge"></i>
+                        <p>nc-badge</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-bag-16"></i>
+                        <p>nc-bag-16</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-bank"></i>
+                        <p>nc-bank</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-basket"></i>
+                        <p>nc-basket</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-bell-55"></i>
+                        <p>nc-bell-55</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-bold"></i>
+                        <p>nc-bold</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-book-bookmark"></i>
+                        <p>nc-book-bookmark</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-bookmark-2"></i>
+                        <p>nc-bookmark-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-box-2"></i>
+                        <p>nc-box-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-box"></i>
+                        <p>nc-box</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-briefcase-24"></i>
+                        <p>nc-briefcase-24</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-bulb-63"></i>
+                        <p>nc-bulb-63</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-bullet-list-67"></i>
+                        <p>nc-bullet-list-67</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-bus-front-12"></i>
+                        <p>nc-bus-front-12</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-button-pause"></i>
+                        <p>nc-button-pause</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-button-play"></i>
+                        <p>nc-button-play</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-button-power"></i>
+                        <p>nc-button-power</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-calendar-60"></i>
+                        <p>nc-calendar-60</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-camera-compact"></i>
+                        <p>nc-camera-compact</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-caps-small"></i>
+                        <p>nc-caps-small</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-cart-simple"></i>
+                        <p>nc-cart-simple</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-chart-bar-32"></i>
+                        <p>nc-chart-bar-32</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-chart-pie-36"></i>
+                        <p>nc-chart-pie-36</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-chat-33"></i>
+                        <p>nc-chat-33</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-check-2"></i>
+                        <p>nc-check-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-circle-10"></i>
+                        <p>nc-circle-10</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-cloud-download-93"></i>
+                        <p>nc-cloud-download-93</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-cloud-upload-94"></i>
+                        <p>nc-cloud-upload-94</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-compass-05"></i>
+                        <p>nc-compass-05</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-controller-modern"></i>
+                        <p>nc-controller-modern</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-credit-card"></i>
+                        <p>nc-credit-card</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-delivery-fast"></i>
+                        <p>nc-delivery-fast</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-diamond"></i>
+                        <p>nc-diamond</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-email-85"></i>
+                        <p>nc-email-85</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-favourite-28"></i>
+                        <p>nc-favourite-28</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-glasses-2"></i>
+                        <p>nc-glasses-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-globe-2"></i>
+                        <p>nc-globe-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-globe"></i>
+                        <p>nc-globe</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-hat-3"></i>
+                        <p>nc-hat-3</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-headphones"></i>
+                        <p>nc-headphones</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-html5"></i>
+                        <p>nc-html5</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-image"></i>
+                        <p>nc-image</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-istanbul"></i>
+                        <p>nc-istanbul</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-key-25"></i>
+                        <p>nc-key-25</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-laptop"></i>
+                        <p>nc-laptop</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-layout-11"></i>
+                        <p>nc-layout-11</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-lock-circle-open"></i>
+                        <p>nc-lock-circle-open</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-map-big"></i>
+                        <p>nc-map-big</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-minimal-down"></i>
+                        <p>nc-minimal-down</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-minimal-left"></i>
+                        <p>nc-minimal-left</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-minimal-right"></i>
+                        <p>nc-minimal-right</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-minimal-up"></i>
+                        <p>nc-minimal-up</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-mobile"></i>
+                        <p>nc-mobile</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-money-coins"></i>
+                        <p>nc-money-coins</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-note-03"></i>
+                        <p>nc-note-03</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-palette"></i>
+                        <p>nc-palette</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-paper"></i>
+                        <p>nc-paper</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-pin-3"></i>
+                        <p>nc-pin-3</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-planet"></i>
+                        <p>nc-planet</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-refresh-69"></i>
+                        <p>nc-refresh-69</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-ruler-pencil"></i>
+                        <p>nc-ruler-pencil</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-satisfied"></i>
+                        <p>nc-satisfied</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-scissors"></i>
+                        <p>nc-scissors</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-send"></i>
+                        <p>nc-send</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-settings-gear-65"></i>
+                        <p>nc-settings-gear-65</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-settings"></i>
+                        <p>nc-settings</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-share-66"></i>
+                        <p>nc-share-66</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-shop"></i>
+                        <p>nc-shop</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-simple-add"></i>
+                        <p>nc-simple-add</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-simple-delete"></i>
+                        <p>nc-simple-delete</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-simple-remove"></i>
+                        <p>nc-simple-remove</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-single-02"></i>
+                        <p>nc-single-02</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-single-copy-04"></i>
+                        <p>nc-single-copy-04</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-sound-wave"></i>
+                        <p>nc-sound-wave</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-spaceship"></i>
+                        <p>nc-spaceship</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-sun-fog-29"></i>
+                        <p>nc-sun-fog-29</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-support-17"></i>
+                        <p>nc-support-17</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-tablet-2"></i>
+                        <p>nc-tablet-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-tag-content"></i>
+                        <p>nc-tag-content</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-tap-01"></i>
+                        <p>nc-tap-01</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-tie-bow"></i>
+                        <p>nc-tie-bow</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-tile-56"></i>
+                        <p>nc-tile-56</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-time-alarm"></i>
+                        <p>nc-time-alarm</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-touch-id"></i>
+                        <p>nc-touch-id</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-trophy"></i>
+                        <p>nc-trophy</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-tv-2"></i>
+                        <p>nc-tv-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-umbrella-13"></i>
+                        <p>nc-umbrella-13</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-user-run"></i>
+                        <p>nc-user-run</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-vector"></i>
+                        <p>nc-vector</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-watch-time"></i>
+                        <p>nc-watch-time</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-world-2"></i>
+                        <p>nc-world-2</p>
+                      </li>
+                      <li>
+                        <i class="nc-icon nc-zoom-split"></i>
+                        <p>nc-zoom-split</p>
+                      </li>
+                      <!-- list of icons here with the proper class-->
+                    </ul>
+                  </section>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-black  footer-white ">
+        <div class="container-fluid">
+          <div class="row">
+            <nav class="footer-nav">
+              <ul>
+                <li>
+                  <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>
+                </li>
+                <li>
+                  <a href="http://blog.creative-tim.com/" target="_blank">Blog</a>
+                </li>
+                <li>
+                  <a href="https://www.creative-tim.com/license" target="_blank">Licenses</a>
+                </li>
+              </ul>
+            </nav>
+            <div class="credits ml-auto">
+              <span class="copyright">
+                ©
+                <script>
+                  document.write(new Date().getFullYear())
+                </script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--   Core JS Files   -->
+  <script src="../assets/js/core/jquery.min.js"></script>
+  <script src="../assets/js/core/popper.min.js"></script>
+  <script src="../assets/js/core/bootstrap.min.js"></script>
+  <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!--  Google Maps Plugin    -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+  <!-- Chart JS -->
+  <script src="../assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="../assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="../assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+  <script src="../assets/demo/demo.js"></script>
+  <script>
+    function SelectText(element) {
+      var doc = document,
+        text = element,
+        range, selection;
+      if (doc.body.createTextRange) {
+        range = document.body.createTextRange();
+        range.moveToElementText(text);
+        range.select();
+      } else if (window.getSelection) {
+        selection = window.getSelection();
+        range = document.createRange();
+        range.selectNodeContents(text);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    }
+    window.onload = function() {
+      var iconsWrapper = document.getElementById('icons-wrapper'),
+        listItems = iconsWrapper.getElementsByTagName('li');
+      for (var i = 0; i < listItems.length; i++) {
+        listItems[i].onclick = function fun(event) {
+          var selectedTagName = event.target.tagName.toLowerCase();
+          if (selectedTagName == 'p' || selectedTagName == 'em') {
+            SelectText(event.target);
+          } else if (selectedTagName == 'input') {
+            event.target.setSelectionRange(0, event.target.value.length);
+          }
+        }
+
+        var beforeContentChar = window.getComputedStyle(listItems[i].getElementsByTagName('i')[0], '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, ""),
+          beforeContent = beforeContentChar.charCodeAt(0).toString(16);
+        var beforeContentElement = document.createElement("em");
+        beforeContentElement.textContent = "\\" + beforeContent;
+        listItems[i].appendChild(beforeContentElement);
+
+        //create input element to copy/paste chart
+        var charCharac = document.createElement('input');
+        charCharac.setAttribute('type', 'text');
+        charCharac.setAttribute('maxlength', '1');
+        charCharac.setAttribute('readonly', 'true');
+        charCharac.setAttribute('value', beforeContentChar);
+        listItems[i].appendChild(charCharac);
+      }
+    }
+  </script>
+</body>
+
+</html>

explorer/public/paper-dashboard/examples/map.html

@@ -0,0 +1,246 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Paper Dashboard 2 by Creative Tim
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../assets/demo/demo.css" rel="stylesheet" />
+</head>
+
+<body class="">
+  <div class="wrapper ">
+    <div class="sidebar" data-color="white" data-active-color="danger">
+      <!--
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
+    -->
+      <div class="logo">
+        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+          <div class="logo-image-small">
+            <img src="../assets/img/logo-small.png">
+          </div>
+        </a>
+        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
+          Creative Tim
+          <!-- <div class="logo-image-big">
+            <img src="../assets/img/logo-big.png">
+          </div> -->
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <ul class="nav">
+          <li>
+            <a href="./dashboard.html">
+              <i class="nc-icon nc-bank"></i>
+              <p>Dashboard</p>
+            </a>
+          </li>
+          <li>
+            <a href="./icons.html">
+              <i class="nc-icon nc-diamond"></i>
+              <p>Icons</p>
+            </a>
+          </li>
+          <li class="active ">
+            <a href="./map.html">
+              <i class="nc-icon nc-pin-3"></i>
+              <p>Maps</p>
+            </a>
+          </li>
+          <li>
+            <a href="./notifications.html">
+              <i class="nc-icon nc-bell-55"></i>
+              <p>Notifications</p>
+            </a>
+          </li>
+          <li>
+            <a href="./user.html">
+              <i class="nc-icon nc-single-02"></i>
+              <p>User Profile</p>
+            </a>
+          </li>
+          <li>
+            <a href="./tables.html">
+              <i class="nc-icon nc-tile-56"></i>
+              <p>Table List</p>
+            </a>
+          </li>
+          <li>
+            <a href="./typography.html">
+              <i class="nc-icon nc-caps-small"></i>
+              <p>Typography</p>
+            </a>
+          </li>
+          <li class="active-pro">
+            <a href="./upgrade.html">
+              <i class="nc-icon nc-spaceship"></i>
+              <p>Upgrade to PRO</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main-panel">
+      <!-- Navbar -->
+      <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+        <div class="container-fluid">
+          <div class="navbar-wrapper">
+            <div class="navbar-toggle">
+              <button type="button" class="navbar-toggler">
+                <span class="navbar-toggler-bar bar1"></span>
+                <span class="navbar-toggler-bar bar2"></span>
+                <span class="navbar-toggler-bar bar3"></span>
+              </button>
+            </div>
+            <a class="navbar-brand" href="#pablo">Paper Dashboard 2</a>
+          </div>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <form>
+              <div class="input-group no-border">
+                <input type="text" value="" class="form-control" placeholder="Search...">
+                <div class="input-group-append">
+                  <div class="input-group-text">
+                    <i class="nc-icon nc-zoom-split"></i>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link btn-magnify" href="#pablo">
+                  <i class="nc-icon nc-layout-11"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Stats</span>
+                  </p>
+                </a>
+              </li>
+              <li class="nav-item btn-rotate dropdown">
+                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="nc-icon nc-bell-55"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Some Actions</span>
+                  </p>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                  <a class="dropdown-item" href="#">Action</a>
+                  <a class="dropdown-item" href="#">Another action</a>
+                  <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-rotate" href="#pablo">
+                  <i class="nc-icon nc-settings-gear-65"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Account</span>
+                  </p>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- End Navbar -->
+      <!-- <div class="panel-header panel-header-sm">
+
+
+</div> -->
+      <div class="content">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card ">
+              <div class="card-header ">
+                Google Maps
+              </div>
+              <div class="card-body ">
+                <div id="map" class="map"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-black  footer-white ">
+        <div class="container-fluid">
+          <div class="row">
+            <nav class="footer-nav">
+              <ul>
+                <li>
+                  <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>
+                </li>
+                <li>
+                  <a href="http://blog.creative-tim.com/" target="_blank">Blog</a>
+                </li>
+                <li>
+                  <a href="https://www.creative-tim.com/license" target="_blank">Licenses</a>
+                </li>
+              </ul>
+            </nav>
+            <div class="credits ml-auto">
+              <span class="copyright">
+                ©
+                <script>
+                  document.write(new Date().getFullYear())
+                </script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--   Core JS Files   -->
+  <script src="../assets/js/core/jquery.min.js"></script>
+  <script src="../assets/js/core/popper.min.js"></script>
+  <script src="../assets/js/core/bootstrap.min.js"></script>
+  <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!--  Google Maps Plugin    -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+  <!-- Chart JS -->
+  <script src="../assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="../assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="../assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+  <script src="../assets/demo/demo.js"></script>
+  <script>
+    $(document).ready(function() {
+      demo.initGoogleMaps();
+    });
+  </script>
+</body>
+
+</html>

explorer/public/paper-dashboard/examples/notifications.html

@@ -0,0 +1,375 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Paper Dashboard 2 by Creative Tim
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../assets/demo/demo.css" rel="stylesheet" />
+</head>
+
+<body class="">
+  <div class="wrapper ">
+    <div class="sidebar" data-color="white" data-active-color="danger">
+      <!--
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
+    -->
+      <div class="logo">
+        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+          <div class="logo-image-small">
+            <img src="../assets/img/logo-small.png">
+          </div>
+        </a>
+        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
+          Creative Tim
+          <!-- <div class="logo-image-big">
+            <img src="../assets/img/logo-big.png">
+          </div> -->
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <ul class="nav">
+          <li>
+            <a href="./dashboard.html">
+              <i class="nc-icon nc-bank"></i>
+              <p>Dashboard</p>
+            </a>
+          </li>
+          <li>
+            <a href="./icons.html">
+              <i class="nc-icon nc-diamond"></i>
+              <p>Icons</p>
+            </a>
+          </li>
+          <li>
+            <a href="./map.html">
+              <i class="nc-icon nc-pin-3"></i>
+              <p>Maps</p>
+            </a>
+          </li>
+          <li class="active ">
+            <a href="./notifications.html">
+              <i class="nc-icon nc-bell-55"></i>
+              <p>Notifications</p>
+            </a>
+          </li>
+          <li>
+            <a href="./user.html">
+              <i class="nc-icon nc-single-02"></i>
+              <p>User Profile</p>
+            </a>
+          </li>
+          <li>
+            <a href="./tables.html">
+              <i class="nc-icon nc-tile-56"></i>
+              <p>Table List</p>
+            </a>
+          </li>
+          <li>
+            <a href="./typography.html">
+              <i class="nc-icon nc-caps-small"></i>
+              <p>Typography</p>
+            </a>
+          </li>
+          <li class="active-pro">
+            <a href="./upgrade.html">
+              <i class="nc-icon nc-spaceship"></i>
+              <p>Upgrade to PRO</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main-panel">
+      <!-- Navbar -->
+      <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+        <div class="container-fluid">
+          <div class="navbar-wrapper">
+            <div class="navbar-toggle">
+              <button type="button" class="navbar-toggler">
+                <span class="navbar-toggler-bar bar1"></span>
+                <span class="navbar-toggler-bar bar2"></span>
+                <span class="navbar-toggler-bar bar3"></span>
+              </button>
+            </div>
+            <a class="navbar-brand" href="#pablo">Paper Dashboard 2</a>
+          </div>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <form>
+              <div class="input-group no-border">
+                <input type="text" value="" class="form-control" placeholder="Search...">
+                <div class="input-group-append">
+                  <div class="input-group-text">
+                    <i class="nc-icon nc-zoom-split"></i>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link btn-magnify" href="#pablo">
+                  <i class="nc-icon nc-layout-11"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Stats</span>
+                  </p>
+                </a>
+              </li>
+              <li class="nav-item btn-rotate dropdown">
+                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="nc-icon nc-bell-55"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Some Actions</span>
+                  </p>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                  <a class="dropdown-item" href="#">Action</a>
+                  <a class="dropdown-item" href="#">Another action</a>
+                  <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-rotate" href="#pablo">
+                  <i class="nc-icon nc-settings-gear-65"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Account</span>
+                  </p>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- End Navbar -->
+      <!-- <div class="panel-header">
+
+
+  <div class="header text-center">
+      <h2 class="title">Notifications</h2>
+      <p class="category">Handcrafted by our friend <a target="_blank" href="https://github.com/mouse0270">Robert McIntosh</a>. Please checkout the <a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">full documentation.</a></p>
+  </div>
+
+</div> -->
+      <div class="content">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-header">
+                <h5 class="card-title">Notifications</h5>
+                <p class="card-category">Handcrafted by our friend
+                  <a target="_blank" href="https://github.com/mouse0270">Robert McIntosh</a>. Please checkout the
+                  <a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">full documentation.</a>
+                </p>
+              </div>
+              <div class="card-body">
+                <div class="row">
+                  <div class="col-md-6">
+                    <div class="card card-plain">
+                      <div class="card-header">
+                        <h5 class="card-title">Notifications Style</h5>
+                      </div>
+                      <div class="card-body">
+                        <div class="alert alert-info">
+                          <span>This is a plain notification</span>
+                        </div>
+                        <div class="alert alert-info alert-dismissible fade show">
+                          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                            <i class="nc-icon nc-simple-remove"></i>
+                          </button>
+                          <span>This is a notification with close button.</span>
+                        </div>
+                        <div class="alert alert-info alert-with-icon alert-dismissible fade show" data-notify="container">
+                          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                            <i class="nc-icon nc-simple-remove"></i>
+                          </button>
+                          <span data-notify="icon" class="nc-icon nc-bell-55"></span>
+                          <span data-notify="message">This is a notification with close button and icon.</span>
+                        </div>
+                        <div class="alert alert-info alert-with-icon alert-dismissible fade show" data-notify="container">
+                          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                            <i class="nc-icon nc-simple-remove"></i>
+                          </button>
+                          <span data-notify="icon" class="nc-icon nc-chart-pie-36"></span>
+                          <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-md-6">
+                    <div class="card card-plain">
+                      <div class="card-header">
+                        <h5 class="card-title">Notification states</h5>
+                      </div>
+                      <div class="card-body">
+                        <div class="alert alert-primary alert-dismissible fade show">
+                          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                            <i class="nc-icon nc-simple-remove"></i>
+                          </button>
+                          <span>
+                            <b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
+                        </div>
+                        <div class="alert alert-info alert-dismissible fade show">
+                          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                            <i class="nc-icon nc-simple-remove"></i>
+                          </button>
+                          <span>
+                            <b> Info - </b> This is a regular notification made with ".alert-info"</span>
+                        </div>
+                        <div class="alert alert-success alert-dismissible fade show">
+                          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                            <i class="nc-icon nc-simple-remove"></i>
+                          </button>
+                          <span>
+                            <b> Success - </b> This is a regular notification made with ".alert-success"</span>
+                        </div>
+                        <div class="alert alert-warning alert-dismissible fade show">
+                          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                            <i class="nc-icon nc-simple-remove"></i>
+                          </button>
+                          <span>
+                            <b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
+                        </div>
+                        <div class="alert alert-danger alert-dismissible fade show">
+                          <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close">
+                            <i class="nc-icon nc-simple-remove"></i>
+                          </button>
+                          <span>
+                            <b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-body">
+                <div class="places-buttons">
+                  <div class="row">
+                    <div class="col-md-6 ml-auto mr-auto text-center">
+                      <h4 class="card-title">
+                        Notifications Places
+                        <p class="category">Click to view notifications</p>
+                      </h4>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-lg-8 ml-auto mr-auto">
+                      <div class="row">
+                        <div class="col-md-4">
+                          <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','left')">Top Left</button>
+                        </div>
+                        <div class="col-md-4">
+                          <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','center')">Top Center</button>
+                        </div>
+                        <div class="col-md-4">
+                          <button class="btn btn-primary btn-block" onclick="demo.showNotification('top','right')">Top Right</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-lg-8 ml-auto mr-auto">
+                      <div class="row">
+                        <div class="col-md-4">
+                          <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','left')">Bottom Left</button>
+                        </div>
+                        <div class="col-md-4">
+                          <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','center')">Bottom Center</button>
+                        </div>
+                        <div class="col-md-4">
+                          <button class="btn btn-primary btn-block" onclick="demo.showNotification('bottom','right')">Bottom Right</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-black  footer-white ">
+        <div class="container-fluid">
+          <div class="row">
+            <nav class="footer-nav">
+              <ul>
+                <li>
+                  <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>
+                </li>
+                <li>
+                  <a href="http://blog.creative-tim.com/" target="_blank">Blog</a>
+                </li>
+                <li>
+                  <a href="https://www.creative-tim.com/license" target="_blank">Licenses</a>
+                </li>
+              </ul>
+            </nav>
+            <div class="credits ml-auto">
+              <span class="copyright">
+                ©
+                <script>
+                  document.write(new Date().getFullYear())
+                </script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--   Core JS Files   -->
+  <script src="../assets/js/core/jquery.min.js"></script>
+  <script src="../assets/js/core/popper.min.js"></script>
+  <script src="../assets/js/core/bootstrap.min.js"></script>
+  <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!--  Google Maps Plugin    -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+  <!-- Chart JS -->
+  <script src="../assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="../assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="../assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+  <script src="../assets/demo/demo.js"></script>
+</body>
+
+</html>

explorer/public/paper-dashboard/examples/tables.html

@@ -0,0 +1,486 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Paper Dashboard 2 by Creative Tim
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../assets/demo/demo.css" rel="stylesheet" />
+</head>
+
+<body class="">
+  <div class="wrapper ">
+    <div class="sidebar" data-color="white" data-active-color="danger">
+      <!--
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
+    -->
+      <div class="logo">
+        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+          <div class="logo-image-small">
+            <img src="../assets/img/logo-small.png">
+          </div>
+        </a>
+        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
+          Creative Tim
+          <!-- <div class="logo-image-big">
+            <img src="../assets/img/logo-big.png">
+          </div> -->
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <ul class="nav">
+          <li>
+            <a href="./dashboard.html">
+              <i class="nc-icon nc-bank"></i>
+              <p>Dashboard</p>
+            </a>
+          </li>
+          <li>
+            <a href="./icons.html">
+              <i class="nc-icon nc-diamond"></i>
+              <p>Icons</p>
+            </a>
+          </li>
+          <li>
+            <a href="./map.html">
+              <i class="nc-icon nc-pin-3"></i>
+              <p>Maps</p>
+            </a>
+          </li>
+          <li>
+            <a href="./notifications.html">
+              <i class="nc-icon nc-bell-55"></i>
+              <p>Notifications</p>
+            </a>
+          </li>
+          <li>
+            <a href="./user.html">
+              <i class="nc-icon nc-single-02"></i>
+              <p>User Profile</p>
+            </a>
+          </li>
+          <li class="active ">
+            <a href="./tables.html">
+              <i class="nc-icon nc-tile-56"></i>
+              <p>Table List</p>
+            </a>
+          </li>
+          <li>
+            <a href="./typography.html">
+              <i class="nc-icon nc-caps-small"></i>
+              <p>Typography</p>
+            </a>
+          </li>
+          <li class="active-pro">
+            <a href="./upgrade.html">
+              <i class="nc-icon nc-spaceship"></i>
+              <p>Upgrade to PRO</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main-panel">
+      <!-- Navbar -->
+      <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+        <div class="container-fluid">
+          <div class="navbar-wrapper">
+            <div class="navbar-toggle">
+              <button type="button" class="navbar-toggler">
+                <span class="navbar-toggler-bar bar1"></span>
+                <span class="navbar-toggler-bar bar2"></span>
+                <span class="navbar-toggler-bar bar3"></span>
+              </button>
+            </div>
+            <a class="navbar-brand" href="#pablo">Paper Dashboard 2</a>
+          </div>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <form>
+              <div class="input-group no-border">
+                <input type="text" value="" class="form-control" placeholder="Search...">
+                <div class="input-group-append">
+                  <div class="input-group-text">
+                    <i class="nc-icon nc-zoom-split"></i>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link btn-magnify" href="#pablo">
+                  <i class="nc-icon nc-layout-11"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Stats</span>
+                  </p>
+                </a>
+              </li>
+              <li class="nav-item btn-rotate dropdown">
+                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="nc-icon nc-bell-55"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Some Actions</span>
+                  </p>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                  <a class="dropdown-item" href="#">Action</a>
+                  <a class="dropdown-item" href="#">Another action</a>
+                  <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-rotate" href="#pablo">
+                  <i class="nc-icon nc-settings-gear-65"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Account</span>
+                  </p>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- End Navbar -->
+      <!-- <div class="panel-header panel-header-sm">
+
+
+</div> -->
+      <div class="content">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title"> Simple Table</h4>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table">
+                    <thead class=" text-primary">
+                      <th>
+                        Name
+                      </th>
+                      <th>
+                        Country
+                      </th>
+                      <th>
+                        City
+                      </th>
+                      <th class="text-right">
+                        Salary
+                      </th>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>
+                          Dakota Rice
+                        </td>
+                        <td>
+                          Niger
+                        </td>
+                        <td>
+                          Oud-Turnhout
+                        </td>
+                        <td class="text-right">
+                          $36,738
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Minerva Hooper
+                        </td>
+                        <td>
+                          Curaçao
+                        </td>
+                        <td>
+                          Sinaai-Waas
+                        </td>
+                        <td class="text-right">
+                          $23,789
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Sage Rodriguez
+                        </td>
+                        <td>
+                          Netherlands
+                        </td>
+                        <td>
+                          Baileux
+                        </td>
+                        <td class="text-right">
+                          $56,142
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Philip Chaney
+                        </td>
+                        <td>
+                          Korea, South
+                        </td>
+                        <td>
+                          Overland Park
+                        </td>
+                        <td class="text-right">
+                          $38,735
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Doris Greene
+                        </td>
+                        <td>
+                          Malawi
+                        </td>
+                        <td>
+                          Feldkirchen in Kärnten
+                        </td>
+                        <td class="text-right">
+                          $63,542
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Mason Porter
+                        </td>
+                        <td>
+                          Chile
+                        </td>
+                        <td>
+                          Gloucester
+                        </td>
+                        <td class="text-right">
+                          $78,615
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Jon Porter
+                        </td>
+                        <td>
+                          Portugal
+                        </td>
+                        <td>
+                          Gloucester
+                        </td>
+                        <td class="text-right">
+                          $98,615
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-12">
+            <div class="card card-plain">
+              <div class="card-header">
+                <h4 class="card-title"> Table on Plain Background</h4>
+                <p class="card-category"> Here is a subtitle for this table</p>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table">
+                    <thead class=" text-primary">
+                      <th>
+                        Name
+                      </th>
+                      <th>
+                        Country
+                      </th>
+                      <th>
+                        City
+                      </th>
+                      <th class="text-right">
+                        Salary
+                      </th>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>
+                          Dakota Rice
+                        </td>
+                        <td>
+                          Niger
+                        </td>
+                        <td>
+                          Oud-Turnhout
+                        </td>
+                        <td class="text-right">
+                          $36,738
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Minerva Hooper
+                        </td>
+                        <td>
+                          Curaçao
+                        </td>
+                        <td>
+                          Sinaai-Waas
+                        </td>
+                        <td class="text-right">
+                          $23,789
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Sage Rodriguez
+                        </td>
+                        <td>
+                          Netherlands
+                        </td>
+                        <td>
+                          Baileux
+                        </td>
+                        <td class="text-right">
+                          $56,142
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Philip Chaney
+                        </td>
+                        <td>
+                          Korea, South
+                        </td>
+                        <td>
+                          Overland Park
+                        </td>
+                        <td class="text-right">
+                          $38,735
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Doris Greene
+                        </td>
+                        <td>
+                          Malawi
+                        </td>
+                        <td>
+                          Feldkirchen in Kärnten
+                        </td>
+                        <td class="text-right">
+                          $63,542
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Mason Porter
+                        </td>
+                        <td>
+                          Chile
+                        </td>
+                        <td>
+                          Gloucester
+                        </td>
+                        <td class="text-right">
+                          $78,615
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          Jon Porter
+                        </td>
+                        <td>
+                          Portugal
+                        </td>
+                        <td>
+                          Gloucester
+                        </td>
+                        <td class="text-right">
+                          $98,615
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-black  footer-white ">
+        <div class="container-fluid">
+          <div class="row">
+            <nav class="footer-nav">
+              <ul>
+                <li>
+                  <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>
+                </li>
+                <li>
+                  <a href="http://blog.creative-tim.com/" target="_blank">Blog</a>
+                </li>
+                <li>
+                  <a href="https://www.creative-tim.com/license" target="_blank">Licenses</a>
+                </li>
+              </ul>
+            </nav>
+            <div class="credits ml-auto">
+              <span class="copyright">
+                ©
+                <script>
+                  document.write(new Date().getFullYear())
+                </script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--   Core JS Files   -->
+  <script src="../assets/js/core/jquery.min.js"></script>
+  <script src="../assets/js/core/popper.min.js"></script>
+  <script src="../assets/js/core/bootstrap.min.js"></script>
+  <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!--  Google Maps Plugin    -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+  <!-- Chart JS -->
+  <script src="../assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="../assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="../assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+  <script src="../assets/demo/demo.js"></script>
+</body>
+
+</html>

explorer/public/paper-dashboard/examples/typography.html

@@ -0,0 +1,324 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Paper Dashboard 2 by Creative Tim
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../assets/demo/demo.css" rel="stylesheet" />
+</head>
+
+<body class="">
+  <div class="wrapper ">
+    <div class="sidebar" data-color="white" data-active-color="danger">
+      <!--
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
+    -->
+      <div class="logo">
+        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+          <div class="logo-image-small">
+            <img src="../assets/img/logo-small.png">
+          </div>
+        </a>
+        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
+          Creative Tim
+          <!-- <div class="logo-image-big">
+            <img src="../assets/img/logo-big.png">
+          </div> -->
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <ul class="nav">
+          <li>
+            <a href="./dashboard.html">
+              <i class="nc-icon nc-bank"></i>
+              <p>Dashboard</p>
+            </a>
+          </li>
+          <li>
+            <a href="./icons.html">
+              <i class="nc-icon nc-diamond"></i>
+              <p>Icons</p>
+            </a>
+          </li>
+          <li>
+            <a href="./map.html">
+              <i class="nc-icon nc-pin-3"></i>
+              <p>Maps</p>
+            </a>
+          </li>
+          <li>
+            <a href="./notifications.html">
+              <i class="nc-icon nc-bell-55"></i>
+              <p>Notifications</p>
+            </a>
+          </li>
+          <li>
+            <a href="./user.html">
+              <i class="nc-icon nc-single-02"></i>
+              <p>User Profile</p>
+            </a>
+          </li>
+          <li>
+            <a href="./tables.html">
+              <i class="nc-icon nc-tile-56"></i>
+              <p>Table List</p>
+            </a>
+          </li>
+          <li class="active ">
+            <a href="./typography.html">
+              <i class="nc-icon nc-caps-small"></i>
+              <p>Typography</p>
+            </a>
+          </li>
+          <li class="active-pro">
+            <a href="./upgrade.html">
+              <i class="nc-icon nc-spaceship"></i>
+              <p>Upgrade to PRO</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main-panel">
+      <!-- Navbar -->
+      <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+        <div class="container-fluid">
+          <div class="navbar-wrapper">
+            <div class="navbar-toggle">
+              <button type="button" class="navbar-toggler">
+                <span class="navbar-toggler-bar bar1"></span>
+                <span class="navbar-toggler-bar bar2"></span>
+                <span class="navbar-toggler-bar bar3"></span>
+              </button>
+            </div>
+            <a class="navbar-brand" href="#pablo">Paper Dashboard 2</a>
+          </div>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <form>
+              <div class="input-group no-border">
+                <input type="text" value="" class="form-control" placeholder="Search...">
+                <div class="input-group-append">
+                  <div class="input-group-text">
+                    <i class="nc-icon nc-zoom-split"></i>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link btn-magnify" href="#pablo">
+                  <i class="nc-icon nc-layout-11"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Stats</span>
+                  </p>
+                </a>
+              </li>
+              <li class="nav-item btn-rotate dropdown">
+                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="nc-icon nc-bell-55"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Some Actions</span>
+                  </p>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                  <a class="dropdown-item" href="#">Action</a>
+                  <a class="dropdown-item" href="#">Another action</a>
+                  <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-rotate" href="#pablo">
+                  <i class="nc-icon nc-settings-gear-65"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Account</span>
+                  </p>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- End Navbar -->
+      <!-- <div class="panel-header panel-header-sm">
+
+
+</div> -->
+      <div class="content">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card">
+              <div class="card-header">
+                <h5 class="title">Paper Table Heading</h5>
+                <p class="category">Created using Montserrat Font Family</p>
+              </div>
+              <div class="card-body">
+                <div class="typography-line">
+                  <h1>
+                    <span>Header 1</span>The Life of Paper Dashboard </h1>
+                </div>
+                <div class="typography-line">
+                  <h2>
+                    <span>Header 2</span>The Life of Paper Dashboard </h2>
+                </div>
+                <div class="typography-line">
+                  <h3>
+                    <span>Header 3</span>The Life of Paper Dashboard </h3>
+                </div>
+                <div class="typography-line">
+                  <h4>
+                    <span>Header 4</span>The Life of Paper Dashboard </h4>
+                </div>
+                <div class="typography-line">
+                  <h5>
+                    <span>Header 5</span>The Life of Paper Dashboard </h5>
+                </div>
+                <div class="typography-line">
+                  <h6>
+                    <span>Header 6</span>The Life of Paper Dashboard </h6>
+                </div>
+                <div class="typography-line">
+                  <p>
+                    <span>Paragraph</span>
+                    I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
+                  </p>
+                </div>
+                <div class="typography-line">
+                  <span>Quote</span>
+                  <blockquote>
+                    <p class="blockquote blockquote-primary">
+                      "I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
+                      <br>
+                      <br>
+                      <small>
+                        - Noaa
+                      </small>
+                    </p>
+                  </blockquote>
+                </div>
+                <div class="typography-line">
+                  <span>Muted Text</span>
+                  <p class="text-muted">
+                    I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
+                  </p>
+                </div>
+                <div class="typography-line">
+                  <span>Primary Text</span>
+                  <p class="text-primary">
+                    I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
+                </div>
+                <div class="typography-line">
+                  <span>Info Text</span>
+                  <p class="text-info">
+                    I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+                </div>
+                <div class="typography-line">
+                  <span>Success Text</span>
+                  <p class="text-success">
+                    I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+                </div>
+                <div class="typography-line">
+                  <span>Warning Text</span>
+                  <p class="text-warning">
+                    I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
+                  </p>
+                </div>
+                <div class="typography-line">
+                  <span>Danger Text</span>
+                  <p class="text-danger">
+                    I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
+                </div>
+                <div class="typography-line">
+                  <h2>
+                    <span>Small Tag</span>
+                    Header with small subtitle
+                    <br>
+                    <small>Use "small" tag for the headers</small>
+                  </h2>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-black  footer-white ">
+        <div class="container-fluid">
+          <div class="row">
+            <nav class="footer-nav">
+              <ul>
+                <li>
+                  <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>
+                </li>
+                <li>
+                  <a href="http://blog.creative-tim.com/" target="_blank">Blog</a>
+                </li>
+                <li>
+                  <a href="https://www.creative-tim.com/license" target="_blank">Licenses</a>
+                </li>
+              </ul>
+            </nav>
+            <div class="credits ml-auto">
+              <span class="copyright">
+                ©
+                <script>
+                  document.write(new Date().getFullYear())
+                </script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--   Core JS Files   -->
+  <script src="../assets/js/core/jquery.min.js"></script>
+  <script src="../assets/js/core/popper.min.js"></script>
+  <script src="../assets/js/core/bootstrap.min.js"></script>
+  <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!--  Google Maps Plugin    -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+  <!-- Chart JS -->
+  <script src="../assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="../assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="../assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+  <script src="../assets/demo/demo.js"></script>
+</body>
+
+</html>

explorer/public/paper-dashboard/examples/upgrade.html

@@ -0,0 +1,301 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Paper Dashboard 2 by Creative Tim
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../assets/demo/demo.css" rel="stylesheet" />
+</head>
+
+<body class="">
+  <div class="wrapper ">
+    <div class="sidebar" data-color="white" data-active-color="danger">
+      <!--
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
+    -->
+      <div class="logo">
+        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+          <div class="logo-image-small">
+            <img src="../assets/img/logo-small.png">
+          </div>
+        </a>
+        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
+          Creative Tim
+          <!-- <div class="logo-image-big">
+            <img src="../assets/img/logo-big.png">
+          </div> -->
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <ul class="nav">
+          <li>
+            <a href="./dashboard.html">
+              <i class="nc-icon nc-bank"></i>
+              <p>Dashboard</p>
+            </a>
+          </li>
+          <li>
+            <a href="./icons.html">
+              <i class="nc-icon nc-diamond"></i>
+              <p>Icons</p>
+            </a>
+          </li>
+          <li>
+            <a href="./map.html">
+              <i class="nc-icon nc-pin-3"></i>
+              <p>Maps</p>
+            </a>
+          </li>
+          <li>
+            <a href="./notifications.html">
+              <i class="nc-icon nc-bell-55"></i>
+              <p>Notifications</p>
+            </a>
+          </li>
+          <li>
+            <a href="./user.html">
+              <i class="nc-icon nc-single-02"></i>
+              <p>User Profile</p>
+            </a>
+          </li>
+          <li>
+            <a href="./tables.html">
+              <i class="nc-icon nc-tile-56"></i>
+              <p>Table List</p>
+            </a>
+          </li>
+          <li>
+            <a href="./typography.html">
+              <i class="nc-icon nc-caps-small"></i>
+              <p>Typography</p>
+            </a>
+          </li>
+          <li class="active  active-pro " class="active-pro">
+            <a href="./upgrade.html">
+              <i class="nc-icon nc-spaceship"></i>
+              <p>Upgrade to PRO</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main-panel">
+      <!-- Navbar -->
+      <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+        <div class="container-fluid">
+          <div class="navbar-wrapper">
+            <div class="navbar-toggle">
+              <button type="button" class="navbar-toggler">
+                <span class="navbar-toggler-bar bar1"></span>
+                <span class="navbar-toggler-bar bar2"></span>
+                <span class="navbar-toggler-bar bar3"></span>
+              </button>
+            </div>
+            <a class="navbar-brand" href="#pablo">Paper Dashboard 2</a>
+          </div>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <form>
+              <div class="input-group no-border">
+                <input type="text" value="" class="form-control" placeholder="Search...">
+                <div class="input-group-append">
+                  <div class="input-group-text">
+                    <i class="nc-icon nc-zoom-split"></i>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link btn-magnify" href="#pablo">
+                  <i class="nc-icon nc-layout-11"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Stats</span>
+                  </p>
+                </a>
+              </li>
+              <li class="nav-item btn-rotate dropdown">
+                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="nc-icon nc-bell-55"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Some Actions</span>
+                  </p>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                  <a class="dropdown-item" href="#">Action</a>
+                  <a class="dropdown-item" href="#">Another action</a>
+                  <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-rotate" href="#pablo">
+                  <i class="nc-icon nc-settings-gear-65"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Account</span>
+                  </p>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- End Navbar -->
+      <!-- <div class="panel-header panel-header-sm">
+
+
+</div> -->
+      <div class="content">
+        <div class="row">
+          <div class="col-md-8 ml-auto mr-auto">
+            <div class="card card-upgrade">
+              <div class="card-header text-center">
+                <h4 class="card-title">Paper Dashboard PRO</h3>
+                  <p class="card-category">Are you looking for more components? Please check our Premium Version of Paper Dashboard PRO.</p>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive table-upgrade">
+                  <table class="table">
+                    <thead>
+                      <th></th>
+                      <th class="text-center">Free</th>
+                      <th class="text-center">PRO</th>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>Components</td>
+                        <td class="text-center">16</td>
+                        <td class="text-center">160</td>
+                      </tr>
+                      <tr>
+                        <td>Plugins</td>
+                        <td class="text-center">4</td>
+                        <td class="text-center">13</td>
+                      </tr>
+                      <tr>
+                        <td>Example Pages</td>
+                        <td class="text-center">7</td>
+                        <td class="text-center">27</td>
+                      </tr>
+                      <tr>
+                        <td>Login, Register, Pricing, Lock Pages</td>
+                        <td class="text-center"><i class="nc-icon nc-simple-remove text-danger"></i></td>
+                        <td class="text-center"><i class="nc-icon nc-check-2 text-success"></i></td>
+                      </tr>
+                      <tr>
+                        <td>DataTables, VectorMap, SweetAlert, Wizard, jQueryValidation, FullCalendar etc...</td>
+                        <td class="text-center"><i class="nc-icon nc-simple-remove text-danger"></i></td>
+                        <td class="text-center"><i class="nc-icon nc-check-2 text-success"></i></td>
+                      </tr>
+                      <tr>
+                        <td>Mini Sidebar</td>
+                        <td class="text-center"><i class="nc-icon nc-simple-remove text-danger"></i></td>
+                        <td class="text-center"><i class="nc-icon nc-check-2 text-success"></i></td>
+                      </tr>
+                      <tr>
+                        <td>Premium Support</td>
+                        <td class="text-center"><i class="nc-icon nc-simple-remove text-danger"></i></td>
+                        <td class="text-center"><i class="nc-icon nc-check-2 text-success"></i></td>
+                      </tr>
+                      <tr>
+                        <td></td>
+                        <td class="text-center">Free</td>
+                        <td class="text-center">Just $39</td>
+                      </tr>
+                      <tr>
+                        <td class="text-center"></td>
+                        <td class="text-center">
+                          <a href="#" class="btn btn-round btn-default disabled">Current Version</a>
+                        </td>
+                        <td class="text-center">
+                          <a target="_blank" href="https://www.creative-tim.com/product/paper-dashboard-2-pro?ref=pd-free-upgrade-live" class="btn btn-round btn-primary">Upgrade to PRO</a>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-black  footer-white ">
+        <div class="container-fluid">
+          <div class="row">
+            <nav class="footer-nav">
+              <ul>
+                <li>
+                  <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>
+                </li>
+                <li>
+                  <a href="http://blog.creative-tim.com/" target="_blank">Blog</a>
+                </li>
+                <li>
+                  <a href="https://www.creative-tim.com/license" target="_blank">Licenses</a>
+                </li>
+              </ul>
+            </nav>
+            <div class="credits ml-auto">
+              <span class="copyright">
+                ©
+                <script>
+                  document.write(new Date().getFullYear())
+                </script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--   Core JS Files   -->
+  <script src="../assets/js/core/jquery.min.js"></script>
+  <script src="../assets/js/core/popper.min.js"></script>
+  <script src="../assets/js/core/bootstrap.min.js"></script>
+  <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!--  Google Maps Plugin    -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+  <!-- Chart JS -->
+  <script src="../assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="../assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="../assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+  <script src="../assets/demo/demo.js"></script>
+</body>
+
+</html>

explorer/public/paper-dashboard/examples/user.html

@@ -0,0 +1,431 @@
+<!--
+=========================================================
+ Paper Dashboard 2 - v2.0.0
+=========================================================
+
+ Product Page: https://www.creative-tim.com/product/paper-dashboard-2
+ Copyright 2019 Creative Tim (https://www.creative-tim.com)
+ Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE)
+
+ Coded by Creative Tim
+
+=========================================================
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>
+    Paper Dashboard 2 by Creative Tim
+  </title>
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <!-- CSS Files -->
+  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="../assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../assets/demo/demo.css" rel="stylesheet" />
+</head>
+
+<body class="">
+  <div class="wrapper ">
+    <div class="sidebar" data-color="white" data-active-color="danger">
+      <!--
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
+    -->
+      <div class="logo">
+        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
+          <div class="logo-image-small">
+            <img src="../assets/img/logo-small.png">
+          </div>
+        </a>
+        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
+          Creative Tim
+          <!-- <div class="logo-image-big">
+            <img src="../assets/img/logo-big.png">
+          </div> -->
+        </a>
+      </div>
+      <div class="sidebar-wrapper">
+        <ul class="nav">
+          <li>
+            <a href="./dashboard.html">
+              <i class="nc-icon nc-bank"></i>
+              <p>Dashboard</p>
+            </a>
+          </li>
+          <li>
+            <a href="./icons.html">
+              <i class="nc-icon nc-diamond"></i>
+              <p>Icons</p>
+            </a>
+          </li>
+          <li>
+            <a href="./map.html">
+              <i class="nc-icon nc-pin-3"></i>
+              <p>Maps</p>
+            </a>
+          </li>
+          <li>
+            <a href="./notifications.html">
+              <i class="nc-icon nc-bell-55"></i>
+              <p>Notifications</p>
+            </a>
+          </li>
+          <li class="active ">
+            <a href="./user.html">
+              <i class="nc-icon nc-single-02"></i>
+              <p>User Profile</p>
+            </a>
+          </li>
+          <li>
+            <a href="./tables.html">
+              <i class="nc-icon nc-tile-56"></i>
+              <p>Table List</p>
+            </a>
+          </li>
+          <li>
+            <a href="./typography.html">
+              <i class="nc-icon nc-caps-small"></i>
+              <p>Typography</p>
+            </a>
+          </li>
+          <li class="active-pro">
+            <a href="./upgrade.html">
+              <i class="nc-icon nc-spaceship"></i>
+              <p>Upgrade to PRO</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main-panel">
+      <!-- Navbar -->
+      <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
+        <div class="container-fluid">
+          <div class="navbar-wrapper">
+            <div class="navbar-toggle">
+              <button type="button" class="navbar-toggler">
+                <span class="navbar-toggler-bar bar1"></span>
+                <span class="navbar-toggler-bar bar2"></span>
+                <span class="navbar-toggler-bar bar3"></span>
+              </button>
+            </div>
+            <a class="navbar-brand" href="#pablo">Paper Dashboard 2</a>
+          </div>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+            <span class="navbar-toggler-bar navbar-kebab"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-end" id="navigation">
+            <form>
+              <div class="input-group no-border">
+                <input type="text" value="" class="form-control" placeholder="Search...">
+                <div class="input-group-append">
+                  <div class="input-group-text">
+                    <i class="nc-icon nc-zoom-split"></i>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link btn-magnify" href="#pablo">
+                  <i class="nc-icon nc-layout-11"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Stats</span>
+                  </p>
+                </a>
+              </li>
+              <li class="nav-item btn-rotate dropdown">
+                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <i class="nc-icon nc-bell-55"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Some Actions</span>
+                  </p>
+                </a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                  <a class="dropdown-item" href="#">Action</a>
+                  <a class="dropdown-item" href="#">Another action</a>
+                  <a class="dropdown-item" href="#">Something else here</a>
+                </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link btn-rotate" href="#pablo">
+                  <i class="nc-icon nc-settings-gear-65"></i>
+                  <p>
+                    <span class="d-lg-none d-md-block">Account</span>
+                  </p>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <!-- End Navbar -->
+      <!-- <div class="panel-header panel-header-sm">
+
+
+</div> -->
+      <div class="content">
+        <div class="row">
+          <div class="col-md-4">
+            <div class="card card-user">
+              <div class="image">
+                <img src="../assets/img/damir-bosnjak.jpg" alt="...">
+              </div>
+              <div class="card-body">
+                <div class="author">
+                  <a href="#">
+                    <img class="avatar border-gray" src="../assets/img/mike.jpg" alt="...">
+                    <h5 class="title">Chet Faker</h5>
+                  </a>
+                  <p class="description">
+                    @chetfaker
+                  </p>
+                </div>
+                <p class="description text-center">
+                  "I like the way you work it
+                  <br> No diggity
+                  <br> I wanna bag it up"
+                </p>
+              </div>
+              <div class="card-footer">
+                <hr>
+                <div class="button-container">
+                  <div class="row">
+                    <div class="col-lg-3 col-md-6 col-6 ml-auto">
+                      <h5>12
+                        <br>
+                        <small>Files</small>
+                      </h5>
+                    </div>
+                    <div class="col-lg-4 col-md-6 col-6 ml-auto mr-auto">
+                      <h5>2GB
+                        <br>
+                        <small>Used</small>
+                      </h5>
+                    </div>
+                    <div class="col-lg-3 mr-auto">
+                      <h5>24,6$
+                        <br>
+                        <small>Spent</small>
+                      </h5>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-header">
+                <h4 class="card-title">Team Members</h4>
+              </div>
+              <div class="card-body">
+                <ul class="list-unstyled team-members">
+                  <li>
+                    <div class="row">
+                      <div class="col-md-2 col-2">
+                        <div class="avatar">
+                          <img src="../assets/img/faces/ayo-ogunseinde-2.jpg" alt="Circle Image" class="img-circle img-no-padding img-responsive">
+                        </div>
+                      </div>
+                      <div class="col-md-7 col-7">
+                        DJ Khaled
+                        <br />
+                        <span class="text-muted">
+                          <small>Offline</small>
+                        </span>
+                      </div>
+                      <div class="col-md-3 col-3 text-right">
+                        <btn class="btn btn-sm btn-outline-success btn-round btn-icon"><i class="fa fa-envelope"></i></btn>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="row">
+                      <div class="col-md-2 col-2">
+                        <div class="avatar">
+                          <img src="../assets/img/faces/joe-gardner-2.jpg" alt="Circle Image" class="img-circle img-no-padding img-responsive">
+                        </div>
+                      </div>
+                      <div class="col-md-7 col-7">
+                        Creative Tim
+                        <br />
+                        <span class="text-success">
+                          <small>Available</small>
+                        </span>
+                      </div>
+                      <div class="col-md-3 col-3 text-right">
+                        <btn class="btn btn-sm btn-outline-success btn-round btn-icon"><i class="fa fa-envelope"></i></btn>
+                      </div>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="row">
+                      <div class="col-md-2 col-2">
+                        <div class="avatar">
+                          <img src="../assets/img/faces/clem-onojeghuo-2.jpg" alt="Circle Image" class="img-circle img-no-padding img-responsive">
+                        </div>
+                      </div>
+                      <div class="col-ms-7 col-7">
+                        Flume
+                        <br />
+                        <span class="text-danger">
+                          <small>Busy</small>
+                        </span>
+                      </div>
+                      <div class="col-md-3 col-3 text-right">
+                        <btn class="btn btn-sm btn-outline-success btn-round btn-icon"><i class="fa fa-envelope"></i></btn>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-8">
+            <div class="card card-user">
+              <div class="card-header">
+                <h5 class="card-title">Edit Profile</h5>
+              </div>
+              <div class="card-body">
+                <form>
+                  <div class="row">
+                    <div class="col-md-5 pr-1">
+                      <div class="form-group">
+                        <label>Company (disabled)</label>
+                        <input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
+                      </div>
+                    </div>
+                    <div class="col-md-3 px-1">
+                      <div class="form-group">
+                        <label>Username</label>
+                        <input type="text" class="form-control" placeholder="Username" value="michael23">
+                      </div>
+                    </div>
+                    <div class="col-md-4 pl-1">
+                      <div class="form-group">
+                        <label for="exampleInputEmail1">Email address</label>
+                        <input type="email" class="form-control" placeholder="Email">
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-6 pr-1">
+                      <div class="form-group">
+                        <label>First Name</label>
+                        <input type="text" class="form-control" placeholder="Company" value="Chet">
+                      </div>
+                    </div>
+                    <div class="col-md-6 pl-1">
+                      <div class="form-group">
+                        <label>Last Name</label>
+                        <input type="text" class="form-control" placeholder="Last Name" value="Faker">
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-12">
+                      <div class="form-group">
+                        <label>Address</label>
+                        <input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia">
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-4 pr-1">
+                      <div class="form-group">
+                        <label>City</label>
+                        <input type="text" class="form-control" placeholder="City" value="Melbourne">
+                      </div>
+                    </div>
+                    <div class="col-md-4 px-1">
+                      <div class="form-group">
+                        <label>Country</label>
+                        <input type="text" class="form-control" placeholder="Country" value="Australia">
+                      </div>
+                    </div>
+                    <div class="col-md-4 pl-1">
+                      <div class="form-group">
+                        <label>Postal Code</label>
+                        <input type="number" class="form-control" placeholder="ZIP Code">
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col-md-12">
+                      <div class="form-group">
+                        <label>About Me</label>
+                        <textarea class="form-control textarea">Oh so, your weak rhyme You doubt I'll bother, reading into it</textarea>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="update ml-auto mr-auto">
+                      <button type="submit" class="btn btn-primary btn-round">Update Profile</button>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer footer-black  footer-white ">
+        <div class="container-fluid">
+          <div class="row">
+            <nav class="footer-nav">
+              <ul>
+                <li>
+                  <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>
+                </li>
+                <li>
+                  <a href="http://blog.creative-tim.com/" target="_blank">Blog</a>
+                </li>
+                <li>
+                  <a href="https://www.creative-tim.com/license" target="_blank">Licenses</a>
+                </li>
+              </ul>
+            </nav>
+            <div class="credits ml-auto">
+              <span class="copyright">
+                ©
+                <script>
+                  document.write(new Date().getFullYear())
+                </script>, made with <i class="fa fa-heart heart"></i> by Creative Tim
+              </span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--   Core JS Files   -->
+  <script src="../assets/js/core/jquery.min.js"></script>
+  <script src="../assets/js/core/popper.min.js"></script>
+  <script src="../assets/js/core/bootstrap.min.js"></script>
+  <script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
+  <!--  Google Maps Plugin    -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
+  <!-- Chart JS -->
+  <script src="../assets/js/plugins/chartjs.min.js"></script>
+  <!--  Notifications Plugin    -->
+  <script src="../assets/js/plugins/bootstrap-notify.js"></script>
+  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
+  <script src="../assets/js/paper-dashboard.min.js?v=2.0.0" type="text/javascript"></script>
+  <!-- Paper Dashboard DEMO methods, don't include it in your project! -->
+  <script src="../assets/demo/demo.js"></script>
+</body>
+
+</html>

explorer/public/paper-dashboard/gulpfile.js

@@ -0,0 +1,34 @@
+var gulp = require('gulp');
+var path = require('path');
+var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
+var sourcemaps = require('gulp-sourcemaps');
+var open = require('gulp-open');
+
+var Paths = {
+  HERE: './',
+  DIST: 'dist/',
+  CSS: './assets/css/',
+  SCSS_TOOLKIT_SOURCES: './assets/scss/paper-dashboard.scss',
+  SCSS: './assets/scss/**/**'
+};
+
+gulp.task('compile-scss', function() {
+  return gulp.src(Paths.SCSS_TOOLKIT_SOURCES)
+    .pipe(sourcemaps.init())
+    .pipe(sass().on('error', sass.logError))
+    .pipe(autoprefixer())
+    .pipe(sourcemaps.write(Paths.HERE))
+    .pipe(gulp.dest(Paths.CSS));
+});
+
+gulp.task('watch', function() {
+  gulp.watch(Paths.SCSS, ['compile-scss']);
+});
+
+gulp.task('open', function() {
+  gulp.src('examples/dashboard.html')
+    .pipe(open());
+});
+
+gulp.task('open-app', ['open', 'watch']);