commit

2024-03-01 13:23:55 +02:00 · 2024-03-01 13:23:55 +02:00 · 15bbd3d15b
parent 54ea9d7aef
commit 15bbd3d15b
8712 changed files with 1456491 additions and 0 deletions
--- a/NewBindexindex.html
+++ b/NewBindexindex.html
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -0,0 +1,771 @@
+body {
+	padding-top: 0px !important;
+}
+/* Header */
+.header {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 2;
+  font-family: "Poppins", sans-serif;
+  font-size: 15px;
+}
+.header .topbar {
+  width: 100%;
+  height: 82px;
+  line-height: 60px;
+  background-color: #896a40;
+  color: #fff;
+  text-align: center;
+}
+.header .topbar .container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.header .topbar .container .tagline {
+  font-weight: 600;
+}
+.header .topbar .container .social-media {
+  margin: 0 auto;
+  padding: 0;
+}
+.header .topbar .container .social-media li {
+  float: left;
+  margin: 0 8px;
+  padding: 0;
+  list-style: none;
+}
+.header .topbar .container .social-media li a {
+  color: #fff;
+  float: left;
+  font-size: 12px;
+}
+.header .topbar .container .social-media li a:hover {
+  opacity: 0.7;
+}
+.header .topbar .container .phone {
+  margin-left: auto;
+}
+.header .topbar .container .phone img {
+  height: 30px;
+  margin-top: -1px;
+  margin-right: 7px;
+}
+.header .topbar .container .phone b {
+  font-weight: 400;
+  font-size: 13px;
+  opacity: 0.7;
+}
+.header .topbar .container .phone span {
+  font-weight: 600;
+}
+.header .navbar {
+  width: 100%;
+  max-width: 1380px;
+  margin: 0 auto;
+  padding: 0;
+  margin-top: -24px;
+  background: #fff;
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.10), 0 8px 30px rgba(0, 0, 0, 0.10);
+  height: auto;
+}
+.navbar>.container {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+.header .navbar .container {
+  position: relative;
+}
+.header .navbar .container .logo {
+  margin-right: auto;
+}
+.header .navbar .container .logo a {
+  float: left;
+}
+.header .navbar .container .logo a img {
+  height: 110px;
+}
+.header .navbar .container .nav-menu {
+  margin: 0 auto;
+}
+.header .navbar .container .nav-menu li {
+  float: left;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  z-index: 2;
+  position: relative;
+}
+.header .navbar .container .nav-menu li a {
+  float: left;
+  padding: 0 15px;
+  height: 100px;
+  line-height: 100px;
+  color: #663333;
+  font-weight: 600;
+  position: relative;
+}
+.header .navbar .container .nav-menu li a:hover {
+  textcolor: #f65935;
+  text-decoration: none;
+  color: #f65935;
+}
+.header .navbar .container .nav-menu li a:hover:before {
+  width: 100%;
+  background: #f65935;
+  transition: width 0.25s ease;
+}
+.header .navbar .container .nav-menu li a:hover:after {
+  width: 100%;
+  background: transparent;
+  transition: all 0s ease;
+}
+.header .navbar .container .nav-menu li a:before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  bottom: -5px;
+  height: 5px;
+  width: 0;
+  transition: width 0s ease, background 0.25s ease;
+}
+.header .navbar .container .nav-menu li a:after {
+  content: '';
+  display: block;
+  position: absolute;
+  right: 0;
+  bottom: -5px;
+  height: 5px;
+  width: 0;
+  background: #f65935;
+  transition: width 0.25s ease;
+}
+.header .navbar .container .nav-menu li .dropdown {
+  min-width: 190px;
+  position: absolute;
+  left: -10px;
+  top: 100%;
+  margin: 0;
+  padding: 10px 0;
+  margin-top: 5px;
+  background: #fff;
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.10), 0 8px 30px rgba(0, 0, 0, 0.10);
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: 0.25s ease-in-out;
+  -moz-transition: 0.25s ease-in-out;
+  -ms-transition: 0.25s ease-in-out;
+  -o-transition: 0.25s ease-in-out;
+  transition: 0.25s ease-in-out;
+}
+.header .navbar .container .nav-menu li .dropdown li {
+  width: 100%;
+  float: left;
+  margin: 0;
+  padding: 0;
+}
+.header .navbar .container .nav-menu li .dropdown li .dropdown {
+  opacity: 0;
+  visibility: hidden;
+  top: 0;
+  left: 100%;
+}
+.header .navbar .container .nav-menu li .dropdown li .dropdown li {
+  position: relative;
+}
+.header .navbar .container .nav-menu li .dropdown li .dropdown li .dropdown {
+  opacity: 0;
+  visibility: hidden;
+}
+.header .navbar .container .nav-menu li .dropdown li .dropdown li:hover .dropdown {
+  opacity: 1;
+  visibility: visible;
+}
+.header .navbar .container .nav-menu li .dropdown li a {
+  width: 100%;
+  height: 40px;
+  line-height: 48px;
+  float: left;
+  padding: 0 25px;
+  white-space: nowrap;
+}
+.header .navbar .container .nav-menu li .dropdown li a:before {
+  display: none;
+}
+.header .navbar .container .nav-menu li .dropdown li a:after {
+  display: none;
+}
+.header .navbar .container .nav-menu li .dropdown li:hover .dropdown {
+  opacity: 1;
+  visibility: visible;
+}
+.header .navbar .container .nav-menu li:hover .dropdown {
+  opacity: 1;
+  visibility: visible;
+}
+.header .navbar .container .search-btn {
+  height: 50px;
+  line-height: 50px;
+  margin-left: 10px;
+  padding-left: 20px;
+  border-left: 1px solid #eaebee;
+  order: 3;
+  cursor: pointer;
+  font-size: 17px;
+  color: #663333;
+}
+.header .navbar .container .search-btn a {
+  color: #663333;
+}
+.header .navbar .container .search-btn a:hover {
+  color: #f65935;
+}
+.header .navbar .container .search-btn:hover {
+  color: #f65935;
+}
+.header .navbar .container .sandwich-btn {
+  margin-right: 0;
+  margin-left: auto;
+  order: 2;
+}
+.header .navbar .container .language {
+  margin-left: auto;
+  order: 1;
+  margin: 0;
+  padding: 0;
+}
+.header .navbar .container .language li {
+  float: left;
+  margin: 0 5px;
+  padding: 0;
+  list-style: none;
+}
+.header .navbar .container .language li a {
+  float: left;
+  color: #663333;
+  font-weight: 600;
+}
+.header .navbar .container .language li a:hover {
+  color: #f65935;
+  text-decoration: none;
+}
+.header .navbar .container .language li a.active {
+  color: #f65935;
+}
+.header .navbar .container .bottom-bar {
+  width: 100%;
+  height: 5px;
+  background: #aaaec1;
+  position: absolute;
+  left: 0;
+  bottom: -5px;
+}
+@media only screen and (max-width: 1199px), only screen and (max-device-width: 1199px) {
+  .header .container {
+    max-width: 100%;
+  }
+  .header .navbar {
+    max-width: 100%;
+  }
+  .header .navbar .container {
+    overflow: hidden;
+  }
+  .header .topbar .tagline {
+    display: none;
+  }
+  .header .topbar .container .social-media {
+    margin-left: 0;
+  }
+  .header .navbar .container .nav-menu {
+    display: none;
+  }
+  .header .navbar {
+    padding: 20px 0;
+  }
+  .header .navbar .container .sandwich-btn {
+    margin-left: 20px;
+  }
+}
+/* RESPONSIVE MOBILE FIXES */
+@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
+  .header .navbar .container .search-btn {
+    padding-right: 10px;
+  }
+  .header .navbar .container .language {
+    display: none;
+  }
+}
+/* SANDWICH BUTTON */
+.sandwich-btn {
+  width: 46px;
+  height: 46px;
+  float: right;
+  position: relative;
+  cursor: pointer;
+  -webkit-transition: 0.25s ease-in-out;
+  -moz-transition: 0.25s ease-in-out;
+  -ms-transition: 0.25s ease-in-out;
+  -o-transition: 0.25s ease-in-out;
+  transition: 0.25s ease-in-out;
+  border-radius: 50%;
+}
+.sandwich-btn span {
+  display: block;
+  height: 2px;
+  width: 22px;
+  background: #405089;
+  opacity: 1;
+  position: absolute;
+  right: 12px;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: 0.25s ease-in-out;
+  -moz-transition: 0.25s ease-in-out;
+  -o-transition: 0.25s ease-in-out;
+  transition: 0.25s ease-in-out;
+}
+.sandwich-btn span:nth-child(1) {
+  top: 18px;
+}
+.sandwich-btn span:nth-child(2) {
+  top: 22px;
+  opacity: 0;
+}
+.sandwich-btn span:nth-child(3) {
+  top: 26px;
+}
+.sandwich-btn:hover span {
+  width: 22px;
+  right: 12px;
+  background: #f65935;
+}
+.sandwich-btn.open span:nth-child(1) {
+  top: 22px;
+  -webkit-transform: rotate(135deg);
+  -moz-transform: rotate(135deg);
+  -o-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+.sandwich-btn.open span:nth-child(2) {
+  opacity: 0;
+  right: -10px;
+}
+.sandwich-btn.open span:nth-child(3) {
+  top: 22px;
+  -webkit-transform: rotate(-135deg);
+  -moz-transform: rotate(-135deg);
+  -o-transform: rotate(-135deg);
+  transform: rotate(-135deg);
+}
+/* SANDWICH MENU */
+.sandwich-menu {
+  width: 400px;
+  height: 100%;
+  min-height: 700px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: fixed;
+  left: -100%;
+  top: 0;
+  background: #896A40;
+  z-index: 1001;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  transition-duration: 500ms;
+  -webkit-transition-duration: 500ms;
+  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+  padding: 30px 40px;
+  font-family: "Poppins", sans-serif;
+}
+.sandwich-menu .logo {
+  width: 100%;
+  float: left;
+  margin-bottom: 40px;
+}
+.sandwich-menu .logo img {
+  height: 110px;
+  border-radius: 6px;
+}
+.sandwich-menu .nav-menu {
+  display: none;
+}
+.sandwich-menu p {
+  display: block;
+  margin-bottom: 30px;
+  color: #fff;
+}
+.sandwich-menu address {
+  display: block;
+}
+.sandwich-menu address a {
+  color: #fff;
+  opacity: 0.7;
+  text-decoration: underline;
+}
+.sandwich-menu .photo-gallery {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+  padding: 0;
+}
+.sandwich-menu .photo-gallery li {
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  margin-right: 4px;
+  list-style: none;
+}
+.sandwich-menu .photo-gallery li:last-child {
+  margin-right: 0;
+}
+.sandwich-menu .photo-gallery li a {
+  float: left;
+  border: 1px solid #fff;
+}
+.sandwich-menu .social-media {
+  display: inline-block;
+  margin-bottom: 40px;
+  padding: 0;
+}
+.sandwich-menu .social-media li {
+  float: left;
+  margin-right: 16px;
+  padding: 0;
+  list-style: none;
+}
+.sandwich-menu .social-media li a {
+  color: #fff;
+  float: left;
+  font-size: 12px;
+}
+.sandwich-menu .social-media li a:hover {
+  opacity: 0.7;
+}
+.sandwich-menu .copyright {
+  display: block;
+  color: #fff;
+  opacity: 0.7;
+  font-size: 11px;
+}
+.sandwich-menu.open {
+  left: 0;
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.10), 0 8px 30px rgba(0, 0, 0, 0.10);
+}
+.sandwich-menu .nav-menu {
+  width: 100%;
+  float: left;
+  margin: 0;
+  padding: 0;
+}
+.sandwich-menu .nav-menu li {
+  width: 100%;
+  float: left;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+}
+.sandwich-menu .nav-menu li a {
+  width: 100%;
+  float: left;
+  color: #fff;
+  font-weight: 600;
+}
+.sandwich-menu .nav-menu li a:hover {
+  text-decoration: none;
+  opacity: 0.7;
+}
+.sandwich-menu .nav-menu li .dropdown {
+  display: none;
+  margin: 0;
+  padding-left: 20px;
+}
+@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
+  .sandwich-menu .nav-menu {
+    display: block;
+    margin-bottom: 40px;
+    text-transform: uppercase;
+  }
+  .sandwich-menu p {
+    display: none;
+  }
+  .sandwich-menu address {
+    display: none;
+  }
+  .sandwich-menu .photo-gallery {
+    display: none;
+  }
+}
+@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
+  .sandwich-menu {
+    width: 70vw;
+    padding: 30px;
+  }
+}
+/* FOOTER */
+.footer {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  background: #262d57;
+  margin-top: 54px;
+  font-family: "Poppins", sans-serif;
+  font-size: 15px;
+}
+.footer .contact-wrapper {
+  width: 100%;
+  max-width: 1380px;
+  margin: 0 auto;
+  padding: 0;
+  margin-top: -54px;
+  background: #fff;
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.10), 0 8px 30px rgba(0, 0, 0, 0.10);
+  margin-bottom: 60px;
+}
+.footer .contact-wrapper .container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.footer .contact-wrapper .container .content-box {
+  flex: 1;
+  padding: 40px 0;
+  padding-right: 30px;
+  margin-right: 30px;
+  border-right: 1px solid #eaebee;
+}
+.footer .contact-wrapper .container .content-box:last-child {
+  padding-right: 0;
+  margin-right: 0;
+  border-right: none;
+}
+.footer .contact-wrapper .container img {
+  height: 40px;
+  margin-bottom: 10px;
+}
+.footer .contact-wrapper .container h3 {
+  display: block;
+  font-family: 'Playfair Display', serif;
+  font-weight: 700;
+  color: #896a40;
+  font-size: 25px;
+  margin-bottom: 15px;
+}
+.footer .contact-wrapper .container p {
+  display: block;
+  color: #9aa0ae;
+  margin: 0;
+}
+.footer .contact-wrapper .container p a {
+  color: #405089;
+  text-decoration: underline;
+}
+.footer .content-wrapper {
+  width: 100%;
+  display: flex;
+  margin-bottom: 50px;
+  padding-top: 30px;
+}
+.footer .content-wrapper p {
+  color: #fff;
+}
+.footer .content-wrapper .logo {
+  height: 41px;
+  margin-bottom: 15px;
+}
+.footer .content-wrapper .footer-menu {
+  display: block;
+  margin: 0;
+}
+.footer .content-wrapper .footer-menu li {
+  width: 100%;
+  float: left;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+}
+.footer .content-wrapper .footer-menu li a {
+  float: left;
+  color: #fff;
+}
+.footer .content-wrapper .contact-box {
+  float: right;
+  color: #fff;
+  text-align: right;
+}
+.footer .content-wrapper .contact-box h5 {
+  margin: 0;
+  font-size: 16px;
+}
+.footer .content-wrapper .contact-box h3 {
+  font-weight: 600;
+  margin: 0;
+}
+.footer .content-wrapper .contact-box p {
+  margin-bottom: 10px;
+  color: #9aa0ae;
+}
+.footer .content-wrapper .contact-box p a {
+  color: #fff;
+}
+.footer .content-wrapper .contact-box ul {
+  float: right;
+  margin: 0;
+  padding: 0;
+}
+.footer .content-wrapper .contact-box ul li {
+  float: left;
+  margin-left: 15px;
+  padding: 0;
+  list-style: none;
+}
+.footer .content-wrapper .contact-box ul li a {
+  float: left;
+  font-size: 13px;
+  color: #fff;
+}
+.footer .content-wrapper .contact-box ul li a:hover {
+  color: #896a40;
+}
+.footer .sub-footer {
+  width: 100%;
+  display: flex;
+  color: #fff;
+  padding: 30px 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.footer .sub-footer .copyright {
+  font-size: 11px;
+  float: left;
+}
+.footer .sub-footer .creation {
+  font-size: 11px;
+  float: right;
+}
+.footer .sub-footer .creation a {
+  font-weight: 600;
+  color: #fff;
+}
+@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
+  .footer .content-wrapper .footer-menu {
+    padding: 0;
+  }
+  .footer .content-wrapper .contact-box {
+    float: left;
+    text-align: left;
+    margin-top: 40px;
+  }
+  .footer .content-wrapper .contact-box ul {
+    float: left;
+  }
+  .footer .content-wrapper .contact-box ul li {
+    margin-left: 0;
+    margin-right: 15px;
+  }
+}
+@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
+  .footer .content-wrapper p {
+    margin-bottom: 40px;
+  }
+  .footer .content-wrapper .footer-menu li a {
+    font-weight: 600;
+  }
+  .footer .contact-wrapper .container {
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
+  .footer .contact-wrapper .container .content-box {
+    padding-right: 0;
+    margin-right: 0;
+    border-right: 0;
+    border-bottom: 1px solid #eaebee;
+    text-align: center;
+  }
+  .footer .sub-footer .creation {
+    float: left;
+  }
+}
+/* PAGE HEADER */
+.page-header {
+  font-family: "Poppins", sans-serif;
+  width: 100%;
+  display: flex;
+  position: relative;
+  z-index: 0;
+  margin-top: -76px;
+  padding-top: 130px;
+  padding-bottom: 50px;
+  background: #663333;
+}
+.page-header .print {
+  float: right;
+  line-height: 26px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  margin-top: 35px;
+}
+.page-header .print img {
+  height: 26px;
+  float: right;
+  margin-left: 6px;
+}
+.page-header .print:hover {
+  text-decoration: none;
+  opacity: 0.7;
+}
+.page-header .breadcrumb {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  background: none;
+}
+.page-header .breadcrumb li {
+  color: #fff;
+  font-size: 12px;
+  padding-left: 10px;
+  font-weight: 600;
+}
+.page-header .breadcrumb li:first-child {
+  padding: 0;
+}
+.page-header .breadcrumb li:first-child:before {
+  display: none;
+  padding: 0;
+}
+.page-header .breadcrumb li:before {
+  content: "";
+  color: #fff;
+  font-family: fontAwesome;
+  font-size: 8px;
+  padding-right: 10px;
+  transform: translateY(-1px);
+}
+.page-header .breadcrumb li a {
+  color: #fff;
+}
+.page-header h2 {
+  font-weight: 800;
+  color: #fff;
+  font-size: 54px;
+}
+.page-header p {
+  color: #fff;
+  opacity: 0.7;
+  margin: 0;
+}
--- a/assets/js/form.settings.js
+++ b/assets/js/form.settings.js
@ -0,0 +1,109 @@
+var table_tmpl;
+var column_sc_tmpl;
+
+jQuery(document).ready(function () {
+
+
+    table_tmpl = document.getElementById('table-tmpl').innerHTML;
+    Mustache.parse(table_tmpl);
+
+    column_sc_tmpl = document.getElementById('column-selection-tmpl').innerHTML;
+    Mustache.parse(column_sc_tmpl);
+
+    single_column_sc_tmpl = document.getElementById('single-column-selection-tmpl').innerHTML;
+    Mustache.parse(single_column_sc_tmpl);
+
+    jQuery('#save-options').change(function () {
+        var s = jQuery(this).val();
+        jQuery("[id^=w12_]").hide();
+        jQuery('#w12_' + s).show();
+        jQuery('#connection_id_' + s).val('');
+        openMappingBox(s);
+    });
+
+    jQuery('#create_table_1, #create_table_2').click(function () {
+
+        var settingsData = jQuery('#w0').serialize();
+
+        ajaxRequest('developer/formbuilder/form/create/table', 'post' ,'json', settingsData, function (html) {
+            if (html['status'] == 200) {
+
+            } else {
+
+            }
+            jQuery('#db_notify').html(html.msg);
+        })
+    });
+
+    jQuery('#connection_id_3').change(function () {
+        var value = jQuery(this).val();
+        //Metronic.startPageLoading();
+        ajaxRequest('db/just/table/' + value + '/true', 'get', 'json', {}, function (data) {
+
+            if (data['status'] == 200) {
+
+                jQuery('#table_name_3').html('');
+                jQuery('#table_name_3').append(Mustache.render(table_tmpl, data));
+
+
+            } else {
+                alert(data['error']);
+            }
+            //Metronic.stopPageLoading();
+        })
+    })
+
+    jQuery('#table_name_3').change(function () {
+        var value = jQuery(this).val();
+        var connection_id = jQuery('#connection_id_3').val();
+
+        var postdata = {
+            tables: value,
+            "data-source": connection_id
+        }
+        //Metronic.startPageLoading();
+        ajaxRequest('db/table/column', 'get', 'json', postdata, function (data) {
+
+            if (data['status'] == 200) {
+                jQuery('#column-sc').html(Mustache.render(column_sc_tmpl, {columns: data['columns'], fields: fields}));
+
+                if (save == 3) {
+
+                    jQuery.each(mapping, function (key, data) {
+                        jQuery('#col_' + key).val(data.COLUMN_NAME);
+                    });
+                }
+            } else {
+                alert(data['error']);
+            }
+
+            //Metronic.stopPageLoading();
+        })
+    })
+    
+    var s = jQuery('#save-options').val();
+    if ( s == 3) {
+        jQuery('#table_name_3').trigger("change");
+    }else if (s == 1 || s == 2){
+        openMappingBox(s);
+    }
+
+    jQuery('#create_table_3').click(function () {
+
+        var settingsData = jQuery('#w0').serialize();
+        ajaxRequest('developer/formbuilder/form/existing/table','post' ,'json', settingsData, function (html) {
+            console.log(html);
+            if (html['status'] == 200) {
+            } else {
+            }
+            jQuery('#db_notify').html(html.msg);
+        });
+    })
+
+});
+
+function openMappingBox(s) {
+    if (s == 1 || s == 2) {
+        jQuery('#w_12_' + s + '_column-sc').html(Mustache.render(single_column_sc_tmpl, {fields: fields, mapping: mapping}));
+    }
+}
--- a/assets/js/main-434d2056d5.js
+++ b/assets/js/main-434d2056d5.js
--- a/assets/js/main-446a5d9bda.js
+++ b/assets/js/main-446a5d9bda.js
--- a/assets/js/main.js.map
+++ b/assets/js/main.js.map
--- a/assets/js/map-598144a0f9.js
+++ b/assets/js/map-598144a0f9.js
--- a/assets/js/map-d607428046.js
+++ b/assets/js/map-d607428046.js
--- a/assets/js/map-f2b178f97b.js
+++ b/assets/js/map-f2b178f97b.js
--- a/assets/js/map-p-8df02ca7d8.js
+++ b/assets/js/map-p-8df02ca7d8.js
--- a/assets/js/map-p-d304c664e4.js
+++ b/assets/js/map-p-d304c664e4.js
--- a/assets/js/map-p.js.map
+++ b/assets/js/map-p.js.map
--- a/assets/js/map-preview-79cfe96ace.js
+++ b/assets/js/map-preview-79cfe96ace.js
@ -0,0 +1,158 @@
+L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
+
+    onAdd: function (map) {
+        // Triggered when the layer is added to a map.
+        //   Register a click listener, then do all the upstream WMS things
+        L.TileLayer.WMS.prototype.onAdd.call(this, map);
+        map.on('click', this.getFeatureInfo, this);
+    },
+
+    onRemove: function (map) {
+        // Triggered when the layer is removed from a map.
+        //   Unregister a click listener, then do all the upstream WMS things
+        L.TileLayer.WMS.prototype.onRemove.call(this, map);
+        map.off('click', this.getFeatureInfo, this);
+    },
+
+    getFeatureInfo: function (evt) {
+        // Make an AJAX request to the server and hope for the best
+        var url = this.getFeatureInfoUrl(evt.latlng),
+                showResults = L.Util.bind(this.showGetFeatureInfo, this);
+        $.ajax({
+            url: url,
+            success: function (data, status, xhr) {
+                var err = typeof data === 'string' ? null : data;
+                showResults(err, evt.latlng, data);
+            },
+            error: function (xhr, status, error) {
+                showResults(error);
+            }
+        });
+    },
+
+    getFeatureInfoUrl: function (latlng) {
+        // Construct a GetFeatureInfo request URL given a point
+        var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
+                size = this._map.getSize(),
+                params = {
+                    request: 'GetFeatureInfo',
+                    service: 'WMS',
+                    srs: 'EPSG:4326',
+                    styles: this.wmsParams.styles,
+                    transparent: this.wmsParams.transparent,
+                    version: this.wmsParams.version,
+                    format: this.wmsParams.format,
+                    bbox: this._map.getBounds().toBBoxString(),
+                    height: size.y,
+                    width: size.x,
+                    layers: this.wmsParams.layers,
+                    query_layers: this.wmsParams.layers,
+                    info_format: 'text/html'
+                };
+
+        params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
+        params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;
+
+        return this._url + L.Util.getParamString(params, this._url, true);
+    },
+
+    showGetFeatureInfo: function (err, latlng, content) {
+        if (err) {
+            console.log(err);
+            return;
+        } // do nothing if there's an error
+
+
+        if (jQuery(content).find("tr").length < 2) {
+            return;
+        }
+
+        content = content.toLowerCase();
+
+        //var content = content.replace('/g', "<table");
+
+        jQuery(content).filter("table").addClass("table");
+
+        // Otherwise show the content in a popup, or something.
+        L.popup({maxWidth: 'auto'})
+                .setLatLng(latlng)
+                .setContent(content)
+                .openOn(this._map);
+
+//           $('.leaflet-popup-content-wrapper').find('table').each(function(){
+//                       jQuery(this).replaceWith( jQuery(this).html()
+//   .replace(/<tbody/gi, "<div id='table'")
+//   .replace(/<tr/gi, "<div")
+//   .replace(/<\/tr>/gi, "</div>")
+//   .replace(/<td/gi, "<span")
+//   .replace(/<\/td>/gi, "</span>")
+//   .replace(/<\/tbody/gi, "<\/div")
+//);
+//           });
+
+
+        //$('.leaflet-popup-content-wrapper').find('table').addClass("table");
+
+//        each(function (){
+//            $(this).replaceWith( $(this).html()
+//                .replace(/<tbody/gi, "<div class='table'")
+//                .replace(/<tr/gi, "<div class='ccbnOutline'")
+//                .replace(/<\/tr>/gi, "</div>")
+//                .replace(/<td/gi, "<span")
+//                .replace(/<\/td>/gi, "</span>")
+//                .replace(/<\/tbody/gi, "<\/div")
+//            );
+        // });
+    }
+});
+
+L.tileLayer.myWms = function (url, options) {
+    return new L.TileLayer.BetterWMS(url, options);
+};
+
+
+jQuery(document).ready(function () {
+
+    var mymap = L.map('mapid', {
+        zoom: 8,
+        crs: L.CRS.EPSG4326
+    });
+
+    mymap.setView([parseFloat(lat1), parseFloat(lng1)], 8);
+
+    if (isGoogle()){
+        
+         currentBaseMap = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
+            maxZoom: 20,
+            subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
+        }).addTo(mymap);
+     
+
+    } else {
+
+          currentBaseMap = L.tileLayer(baseLayers['mymap'][layername]._url, {
+            maxZoom: 18,
+            attribution: baseLayers['mymap'][layername].options.attribution,
+            id: baseLayers['mymap'][layername].options.id
+        }).addTo(mymap);
+    }
+
+    var states = L.tileLayer.myWms(url, {
+        format: 'image/png',
+        layers: layerName,
+        format: 'image/png',
+        transparent: true,
+        //crs: L.CRS.EPSG4326
+    });
+    states.addTo(mymap);
+
+    var bounds = new L.LatLngBounds([parseFloat(lat1), parseFloat(lng1)], [parseFloat(lat2), parseFloat(lng2)]);
+    mymap.fitBounds(bounds);
+    mymap.options.minZoom = mymap.getZoom();
+
+    mymap.setMaxBounds(bounds);
+    //var l = L.latLng(lat, lng);
+    //console.log(states.getFeatureInfoUrl(l));
+})
+
+//# sourceMappingURL=map-preview.js.map
--- a/assets/js/map-preview.js.map
+++ b/assets/js/map-preview.js.map
--- a/assets/js/map-share-bdf5b7a63f.js
+++ b/assets/js/map-share-bdf5b7a63f.js
--- a/assets/js/map-share-f77f7e4a93.js
+++ b/assets/js/map-share-f77f7e4a93.js
--- a/assets/js/map-share.js.map
+++ b/assets/js/map-share.js.map
--- a/assets/js/map.js.map
+++ b/assets/js/map.js.map
--- a/assets/js/mustache.min.js
+++ b/assets/js/mustache.min.js
--- a/assets/js/npm.js
+++ b/assets/js/npm.js
@ -0,0 +1,13 @@
+// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
+require('../../js/transition.js')
+require('../../js/alert.js')
+require('../../js/button.js')
+require('../../js/carousel.js')
+require('../../js/collapse.js')
+require('../../js/dropdown.js')
+require('../../js/modal.js')
+require('../../js/tooltip.js')
+require('../../js/popover.js')
+require('../../js/scrollspy.js')
+require('../../js/tab.js')
+require('../../js/affix.js')
--- a/assets/js/playkit_main-bd302aaadc.js
+++ b/assets/js/playkit_main-bd302aaadc.js
@ -0,0 +1,630 @@
+/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * Version: 1.3.8
+ *
+ */
+(function(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event;
+var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,g,e){k=!1;var f=b.outerHeight()-c.outerHeight();g&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),f),g=0<d?Math.ceil(g):Math.floor(g),c.css({top:g+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());g=
+l*(b[0].scrollHeight-b.outerHeight());e&&(g=d,d=g/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),f),c.css({top:d+"px"}));b.scrollTop(g);b.trigger("slimscrolling",~~g);w();p()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0,
+!0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height",
+h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
+width:a.width,height:a.height});var m=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,
+WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",
+function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});
+x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);
+//  json2.js
+//  2016-10-28
+//  Public Domain.
+//  NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+//  See http://www.JSON.org/js.html
+//  This code should be minified before deployment.
+//  See http://javascript.crockford.com/jsmin.html
+
+//  USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
+//  NOT CONTROL.
+
+//  This file creates a global JSON object containing two methods: stringify
+//  and parse. This file provides the ES5 JSON capability to ES3 systems.
+//  If a project might run on IE8 or earlier, then this file should be included.
+//  This file does nothing on ES5 systems.
+
+//      JSON.stringify(value, replacer, space)
+//          value       any JavaScript value, usually an object or array.
+//          replacer    an optional parameter that determines how object
+//                      values are stringified for objects. It can be a
+//                      function or an array of strings.
+//          space       an optional parameter that specifies the indentation
+//                      of nested structures. If it is omitted, the text will
+//                      be packed without extra whitespace. If it is a number,
+//                      it will specify the number of spaces to indent at each
+//                      level. If it is a string (such as "\t" or "&nbsp;"),
+//                      it contains the characters used to indent at each level.
+//          This method produces a JSON text from a JavaScript value.
+//          When an object value is found, if the object contains a toJSON
+//          method, its toJSON method will be called and the result will be
+//          stringified. A toJSON method does not serialize: it returns the
+//          value represented by the name/value pair that should be serialized,
+//          or undefined if nothing should be serialized. The toJSON method
+//          will be passed the key associated with the value, and this will be
+//          bound to the value.
+
+//          For example, this would serialize Dates as ISO strings.
+
+//              Date.prototype.toJSON = function (key) {
+//                  function f(n) {
+//                      // Format integers to have at least two digits.
+//                      return (n < 10)
+//                          ? "0" + n
+//                          : n;
+//                  }
+//                  return this.getUTCFullYear()   + "-" +
+//                       f(this.getUTCMonth() + 1) + "-" +
+//                       f(this.getUTCDate())      + "T" +
+//                       f(this.getUTCHours())     + ":" +
+//                       f(this.getUTCMinutes())   + ":" +
+//                       f(this.getUTCSeconds())   + "Z";
+//              };
+
+//          You can provide an optional replacer method. It will be passed the
+//          key and value of each member, with this bound to the containing
+//          object. The value that is returned from your method will be
+//          serialized. If your method returns undefined, then the member will
+//          be excluded from the serialization.
+
+//          If the replacer parameter is an array of strings, then it will be
+//          used to select the members to be serialized. It filters the results
+//          such that only members with keys listed in the replacer array are
+//          stringified.
+
+//          Values that do not have JSON representations, such as undefined or
+//          functions, will not be serialized. Such values in objects will be
+//          dropped; in arrays they will be replaced with null. You can use
+//          a replacer function to replace those with JSON values.
+
+//          JSON.stringify(undefined) returns undefined.
+
+//          The optional space parameter produces a stringification of the
+//          value that is filled with line breaks and indentation to make it
+//          easier to read.
+
+//          If the space parameter is a non-empty string, then that string will
+//          be used for indentation. If the space parameter is a number, then
+//          the indentation will be that many spaces.
+
+//          Example:
+
+//          text = JSON.stringify(["e", {pluribus: "unum"}]);
+//          // text is '["e",{"pluribus":"unum"}]'
+
+//          text = JSON.stringify(["e", {pluribus: "unum"}], null, "\t");
+//          // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
+
+//          text = JSON.stringify([new Date()], function (key, value) {
+//              return this[key] instanceof Date
+//                  ? "Date(" + this[key] + ")"
+//                  : value;
+//          });
+//          // text is '["Date(---current time---)"]'
+
+//      JSON.parse(text, reviver)
+//          This method parses a JSON text to produce an object or array.
+//          It can throw a SyntaxError exception.
+
+//          The optional reviver parameter is a function that can filter and
+//          transform the results. It receives each of the keys and values,
+//          and its return value is used instead of the original value.
+//          If it returns what it received, then the structure is not modified.
+//          If it returns undefined then the member is deleted.
+
+//          Example:
+
+//          // Parse the text. Values that look like ISO date strings will
+//          // be converted to Date objects.
+
+//          myData = JSON.parse(text, function (key, value) {
+//              var a;
+//              if (typeof value === "string") {
+//                  a =
+//   /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
+//                  if (a) {
+//                      return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
+//                          +a[5], +a[6]));
+//                  }
+//              }
+//              return value;
+//          });
+
+//          myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
+//              var d;
+//              if (typeof value === "string" &&
+//                      value.slice(0, 5) === "Date(" &&
+//                      value.slice(-1) === ")") {
+//                  d = new Date(value.slice(5, -1));
+//                  if (d) {
+//                      return d;
+//                  }
+//              }
+//              return value;
+//          });
+
+//  This is a reference implementation. You are free to copy, modify, or
+//  redistribute.
+
+/*jslint
+    eval, for, this
+*/
+
+/*property
+    JSON, apply, call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
+    getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
+    lastIndex, length, parse, prototype, push, replace, slice, stringify,
+    test, toJSON, toString, valueOf
+*/
+
+
+// Create a JSON object only if one does not already exist. We create the
+// methods in a closure to avoid creating global variables.
+
+if (typeof JSON !== "object") {
+    JSON = {};
+}
+
+(function () {
+    "use strict";
+
+    var rx_one = /^[\],:{}\s]*$/;
+    var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
+    var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
+    var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
+    var rx_escapable = /[\\"\u0000-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
+    var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
+
+    function f(n) {
+        // Format integers to have at least two digits.
+        return n < 10
+            ? "0" + n
+            : n;
+    }
+
+    function this_value() {
+        return this.valueOf();
+    }
+
+    if (typeof Date.prototype.toJSON !== "function") {
+
+        Date.prototype.toJSON = function () {
+
+            return isFinite(this.valueOf())
+                ? this.getUTCFullYear() + "-" +
+                        f(this.getUTCMonth() + 1) + "-" +
+                        f(this.getUTCDate()) + "T" +
+                        f(this.getUTCHours()) + ":" +
+                        f(this.getUTCMinutes()) + ":" +
+                        f(this.getUTCSeconds()) + "Z"
+                : null;
+        };
+
+        Boolean.prototype.toJSON = this_value;
+        Number.prototype.toJSON = this_value;
+        String.prototype.toJSON = this_value;
+    }
+
+    var gap;
+    var indent;
+    var meta;
+    var rep;
+
+
+    function quote(string) {
+
+// If the string contains no control characters, no quote characters, and no
+// backslash characters, then we can safely slap some quotes around it.
+// Otherwise we must also replace the offending characters with safe escape
+// sequences.
+
+        rx_escapable.lastIndex = 0;
+        return rx_escapable.test(string)
+            ? "\"" + string.replace(rx_escapable, function (a) {
+                var c = meta[a];
+                return typeof c === "string"
+                    ? c
+                    : "\\u" + ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
+            }) + "\""
+            : "\"" + string + "\"";
+    }
+
+
+    function str(key, holder) {
+
+// Produce a string from holder[key].
+
+        var i;          // The loop counter.
+        var k;          // The member key.
+        var v;          // The member value.
+        var length;
+        var mind = gap;
+        var partial;
+        var value = holder[key];
+
+// If the value has a toJSON method, call it to obtain a replacement value.
+
+        if (value && typeof value === "object" &&
+                typeof value.toJSON === "function") {
+            value = value.toJSON(key);
+        }
+
+// If we were called with a replacer function, then call the replacer to
+// obtain a replacement value.
+
+        if (typeof rep === "function") {
+            value = rep.call(holder, key, value);
+        }
+
+// What happens next depends on the value's type.
+
+        switch (typeof value) {
+        case "string":
+            return quote(value);
+
+        case "number":
+
+// JSON numbers must be finite. Encode non-finite numbers as null.
+
+            return isFinite(value)
+                ? String(value)
+                : "null";
+
+        case "boolean":
+        case "null":
+
+// If the value is a boolean or null, convert it to a string. Note:
+// typeof null does not produce "null". The case is included here in
+// the remote chance that this gets fixed someday.
+
+            return String(value);
+
+// If the type is "object", we might be dealing with an object or an array or
+// null.
+
+        case "object":
+
+// Due to a specification blunder in ECMAScript, typeof null is "object",
+// so watch out for that case.
+
+            if (!value) {
+                return "null";
+            }
+
+// Make an array to hold the partial results of stringifying this object value.
+
+            gap += indent;
+            partial = [];
+
+// Is the value an array?
+
+            if (Object.prototype.toString.apply(value) === "[object Array]") {
+
+// The value is an array. Stringify every element. Use null as a placeholder
+// for non-JSON values.
+
+                length = value.length;
+                for (i = 0; i < length; i += 1) {
+                    partial[i] = str(i, value) || "null";
+                }
+
+// Join all of the elements together, separated with commas, and wrap them in
+// brackets.
+
+                v = partial.length === 0
+                    ? "[]"
+                    : gap
+                        ? "[\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "]"
+                        : "[" + partial.join(",") + "]";
+                gap = mind;
+                return v;
+            }
+
+// If the replacer is an array, use it to select the members to be stringified.
+
+            if (rep && typeof rep === "object") {
+                length = rep.length;
+                for (i = 0; i < length; i += 1) {
+                    if (typeof rep[i] === "string") {
+                        k = rep[i];
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (
+                                gap
+                                    ? ": "
+                                    : ":"
+                            ) + v);
+                        }
+                    }
+                }
+            } else {
+
+// Otherwise, iterate through all of the keys in the object.
+
+                for (k in value) {
+                    if (Object.prototype.hasOwnProperty.call(value, k)) {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (
+                                gap
+                                    ? ": "
+                                    : ":"
+                            ) + v);
+                        }
+                    }
+                }
+            }
+
+// Join all of the member texts together, separated with commas,
+// and wrap them in braces.
+
+            v = partial.length === 0
+                ? "{}"
+                : gap
+                    ? "{\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "}"
+                    : "{" + partial.join(",") + "}";
+            gap = mind;
+            return v;
+        }
+    }
+
+// If the JSON object does not yet have a stringify method, give it one.
+
+    if (typeof JSON.stringify !== "function") {
+        meta = {    // table of character substitutions
+            "\b": "\\b",
+            "\t": "\\t",
+            "\n": "\\n",
+            "\f": "\\f",
+            "\r": "\\r",
+            "\"": "\\\"",
+            "\\": "\\\\"
+        };
+        JSON.stringify = function (value, replacer, space) {
+
+// The stringify method takes a value and an optional replacer, and an optional
+// space parameter, and returns a JSON text. The replacer can be a function
+// that can replace values, or an array of strings that will select the keys.
+// A default replacer method can be provided. Use of the space parameter can
+// produce text that is more easily readable.
+
+            var i;
+            gap = "";
+            indent = "";
+
+// If the space parameter is a number, make an indent string containing that
+// many spaces.
+
+            if (typeof space === "number") {
+                for (i = 0; i < space; i += 1) {
+                    indent += " ";
+                }
+
+// If the space parameter is a string, it will be used as the indent string.
+
+            } else if (typeof space === "string") {
+                indent = space;
+            }
+
+// If there is a replacer, it must be a function or an array.
+// Otherwise, throw an error.
+
+            rep = replacer;
+            if (replacer && typeof replacer !== "function" &&
+                    (typeof replacer !== "object" ||
+                    typeof replacer.length !== "number")) {
+                throw new Error("JSON.stringify");
+            }
+
+// Make a fake root object containing our value under the key of "".
+// Return the result of stringifying the value.
+
+            return str("", {"": value});
+        };
+    }
+
+
+// If the JSON object does not yet have a parse method, give it one.
+
+    if (typeof JSON.parse !== "function") {
+        JSON.parse = function (text, reviver) {
+
+// The parse method takes a text and an optional reviver function, and returns
+// a JavaScript value if the text is a valid JSON text.
+
+            var j;
+
+            function walk(holder, key) {
+
+// The walk method is used to recursively walk the resulting structure so
+// that modifications can be made.
+
+                var k;
+                var v;
+                var value = holder[key];
+                if (value && typeof value === "object") {
+                    for (k in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, k)) {
+                            v = walk(value, k);
+                            if (v !== undefined) {
+                                value[k] = v;
+                            } else {
+                                delete value[k];
+                            }
+                        }
+                    }
+                }
+                return reviver.call(holder, key, value);
+            }
+
+
+// Parsing happens in four stages. In the first stage, we replace certain
+// Unicode characters with escape sequences. JavaScript handles many characters
+// incorrectly, either silently deleting them, or treating them as line endings.
+
+            text = String(text);
+            rx_dangerous.lastIndex = 0;
+            if (rx_dangerous.test(text)) {
+                text = text.replace(rx_dangerous, function (a) {
+                    return "\\u" +
+                            ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
+                });
+            }
+
+// In the second stage, we run the text against regular expressions that look
+// for non-JSON patterns. We are especially concerned with "()" and "new"
+// because they can cause invocation, and "=" because it can cause mutation.
+// But just to be safe, we want to reject all unexpected forms.
+
+// We split the second stage into 4 regexp operations in order to work around
+// crippling inefficiencies in IE's and Safari's regexp engines. First we
+// replace the JSON backslash pairs with "@" (a non-JSON character). Second, we
+// replace all simple value tokens with "]" characters. Third, we delete all
+// open brackets that follow a colon or comma or that begin the text. Finally,
+// we look to see that the remaining characters are only whitespace or "]" or
+// "," or ":" or "{" or "}". If that is so, then the text is safe for eval.
+
+            if (
+                rx_one.test(
+                    text
+                        .replace(rx_two, "@")
+                        .replace(rx_three, "]")
+                        .replace(rx_four, "")
+                )
+            ) {
+
+// In the third stage we use the eval function to compile the text into a
+// JavaScript structure. The "{" operator is subject to a syntactic ambiguity
+// in JavaScript: it can begin a block or an object literal. We wrap the text
+// in parens to eliminate the ambiguity.
+
+                j = eval("(" + text + ")");
+
+// In the optional fourth stage, we recursively walk the new structure, passing
+// each name/value pair to a reviver function for possible transformation.
+
+                return (typeof reviver === "function")
+                    ? walk({"": j}, "")
+                    : j;
+            }
+
+// If the text is not JSON parseable, then a SyntaxError is thrown.
+
+            throw new SyntaxError("JSON.parse");
+        };
+    }
+}());
+
+function showMsg(type, msg) {
+    if (type == "add") {
+        swal("Added!", msg, "success");
+    } else if (type == "update") {
+        swal("Updated!", msg, "success");
+    } else if (type == "deleted") {
+        swal("Deleted!", msg, "success");
+    }else if(type == "success"){
+        
+        swal({
+            title:"Success!",        
+            text: msg,
+            html: true,
+            type: "success"
+        });
+    
+    }else{
+        swal({
+            title:"Error!",        
+            text: msg,
+            html: true,
+            type: "error"
+        });
+    }
+}
+function ajaxRequest(url, method, type, data, callback) {
+    
+    jQuery.ajax({
+        url: baseURL + url,
+        type: method,
+        dataType: type,
+        data: data,
+    }).done(function (html) {
+        callback(html);
+    })
+    .fail(function (response) {
+          var response = JSON.parse(response.responseText);
+            var errorString = '<ul>';
+            $.each(response, function (key, value) {               
+                errorString += '<li>' + value + '</li>';
+            });
+            errorString += '</ul>';
+            //console.log(errorString);
+        showMsg("error", errorString);
+    })
+    .always(function () {
+    });
+}
+jQuery(document).ready(function(){
+    jQuery('#global_geoserver_id').change(function(){
+        window.location = baseURL + "/developer/geoserver/current/update/" + jQuery(this).val();
+    })
+})
+
+function getDetailsByAttr(obj, key, val) {
+    var objects = [];
+    for (var i in obj) {
+        if (!obj.hasOwnProperty(i))
+            continue;
+        if (typeof obj[i] == 'object') {
+            objects = objects.concat(getDetailsByAttr(obj[i], key, val));
+        } else if (i == key && obj[key] == val) {
+            objects.push(obj);
+        }
+    }
+    return objects;
+}
+
+function validateForm(formEle){
+
+    formEle.validate({
+        errorElement: 'span', //default input error message container
+        errorClass: 'help-inline', // default input error message class
+        focusInvalid: false, // do not focus the last invalid input                
+        rules: {
+        },
+        messages: {
+        }        
+    });
+}
+
+// Should work for most cases
+function uniqId(prefix) {
+  return  prefix + Math.round(new Date().getTime() + (Math.random() * 10000000000000));
+}
+
+
+function sort_value_layer(a,b) {
+  if (a['order'] < b['order'])
+    return -1;
+  if (a['order'] > b['order'])
+    return 1;
+  return 0;
+}
+
+function isGoogle(){
+     if ( (typeof map != "undefined" && map.id == 92) || googleMapsDefault == 1){
+         return true;
+     }
+     
+     return false;
+}
+
+
+
+
+//# sourceMappingURL=playkit_main.js.map
--- a/assets/js/playkit_main.js.map
+++ b/assets/js/playkit_main.js.map
--- a/assets/js/script.js
+++ b/assets/js/script.js
@ -0,0 +1,13 @@
+$(document).ready(function() {
+	// SANDWICH BUTTON
+	$('.sandwich-btn').on('click', function(e) {
+		$(this).toggleClass("open")
+		$(".sandwich-menu").toggleClass("open")
+	});
+	
+	// TREE MENU
+	$('.sandwich-menu .nav-menu li a').on('click', function(e) {
+		$(this).parent().children('.sandwich-menu .dropdown').slideToggle(300);
+		return true;
+	});
+});
--- a/assets/js/sentinel_imaginary-2215a3b858.js
+++ b/assets/js/sentinel_imaginary-2215a3b858.js
@ -0,0 +1,25 @@
+$(document).ready(function () {
+    $('#share-modal').on('shown.bs.modal', function () {
+        var URL = baseURL;
+        if (!map.settings.https && map.settings.https != 1) {
+            URL = baseURL.replace("s://", "://");
+        }
+        var ifrmecode = '<iframe src="' + URL + "map/embed/" + map.random_token + '" height="' + map.settings.height + '" width="' + map.settings.width + '"></iframe>';
+        jQuery('#ds_iframe_code').val(ifrmecode);
+        jQuery('#ds_share_url').val(URL + "map/share/" + map.random_token);
+        jQuery('#ds_json_url').val(URL + "map/json/" + map.random_token);
+
+    });
+
+
+
+    $(".dashboard-download-link").on("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var image_1 = $("#before_images_1 option:selected").data("id");
+        var image_2 = $("#after_images_1 option:selected").data("id");
+        var type = $(this).data("type");
+        window.location.href = $(this).attr("href") + "?image_1=" + image_1 + "&image_2=" + image_2;
+    });
+});
+//# sourceMappingURL=sentinel_imaginary.js.map
--- a/assets/js/sentinel_imaginary.js.map
+++ b/assets/js/sentinel_imaginary.js.map
@ -0,0 +1 @@
+{"version":3,"sources":["sentinel_imaginary.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"sentinel_imaginary.js","sourcesContent":["$(document).ready(function () {\r\n    $('#share-modal').on('shown.bs.modal', function () {\r\n        var URL = baseURL;\r\n        if (!map.settings.https && map.settings.https != 1) {\r\n            URL = baseURL.replace(\"s://\", \"://\");\r\n        }\r\n        var ifrmecode = '<iframe src=\"' + URL + \"map/embed/\" + map.random_token + '\" height=\"' + map.settings.height + '\" width=\"' + map.settings.width + '\"></iframe>';\r\n        jQuery('#ds_iframe_code').val(ifrmecode);\r\n        jQuery('#ds_share_url').val(URL + \"map/share/\" + map.random_token);\r\n        jQuery('#ds_json_url').val(URL + \"map/json/\" + map.random_token);\r\n\r\n    });\r\n\r\n\r\n\r\n    $(\".dashboard-download-link\").on(\"click\", function (e) {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        var image_1 = $(\"#before_images_1 option:selected\").data(\"id\");\r\n        var image_2 = $(\"#after_images_1 option:selected\").data(\"id\");\r\n        var type = $(this).data(\"type\");\r\n        window.location.href = $(this).attr(\"href\") + \"?image_1=\" + image_1 + \"&image_2=\" + image_2;\r\n    });\r\n});"]}
--- a/assets/js/style-map-407e4821c6.js
+++ b/assets/js/style-map-407e4821c6.js
--- a/assets/js/style-map.js.map
+++ b/assets/js/style-map.js.map
--- a/assets/playkit/_login/css/bootstrap.css
+++ b/assets/playkit/_login/css/bootstrap.css
--- a/assets/playkit/_login/css/main.css
+++ b/assets/playkit/_login/css/main.css
@ -0,0 +1,214 @@
+body {
+	margin: 0;
+	padding: 0; 
+}
+#header {
+	float: left;
+	width: 100%;
+	position: relative; height:80vh; background:url(../images/top-bg.png) bottom center; background-size:cover;
+}
+#header img {
+	width: 100%;
+}
+.logo {
+	position: absolute;
+	top: -10px;
+	left: 0;
+	width: 30%;
+}
+
+.thumb-1{float:left; width:20%; max-width:160px; position:absolute; top:8vh; left:2%; text-align:center;}
+.thumb-2{float:left; width:20%; max-width:160px; position:absolute; top:-6vh; left:20%; text-align:center;}
+.thumb-3{float:left; width:20%; max-width:160px; position:absolute; top:-20vh; left:40%; text-align:center;}
+.thumb-4{float:left; width:20%; max-width:160px; position:absolute; top:-31vh; left:60%; text-align:center;}
+.thumb-5{float:left; width:20%; max-width:160px; position:absolute; top:-37vh; left:80%; text-align:center;}
+.thumb-main{float:left; width:100%; position:absolute; top:50vh;}
+.field-tip img{max-width:100%;}
+#footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: #000;
+}
+#footer ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    float: right;
+}
+#footer ul li {
+    margin: 15px 0;
+    padding: 0 20px;
+    display: inline-block;
+    line-height: 14px;
+    border-right: 1px solid #fff;
+}
+#footer ul li a {
+    font-size: 13px;
+    text-decoration: none;
+    color: #fff;
+}
+/* Hover tooltips */
+.field-tip.thumb-5:hover .tip-content {    left: -20px;
+    opacity: 1; margin-left:-220px;
+}
+.field-tip.thumb-5 .tip-content:before {
+	    content: ' ';
+    position: absolute;
+    top: 50%;
+    right: -7px;
+    width: 0;
+    height: 0;
+    margin-top: -8px;
+    border: 8px solid transparent;
+    border-left-color: #333;
+    border-right: transparent;
+    left: initial; 
+}
+.field-tip .tip-content {
+	position: absolute;
+	top: -10px; /* - top padding */
+	right: 9999px;
+	width: 200px;
+	margin-right: -220px; /* width + left/right padding */
+	padding: 10px;
+	color: #fff;
+	background: #333;
+	-webkit-box-shadow: 2px 2px 5px #aaa;
+	-moz-box-shadow: 2px 2px 5px #aaa;
+	box-shadow: 2px 2px 5px #aaa;
+	opacity: 0;
+	-webkit-transition: opacity 250ms ease-out;
+	-moz-transition: opacity 250ms ease-out;
+	-ms-transition: opacity 250ms ease-out;
+	-o-transition: opacity 250ms ease-out;
+	transition: opacity 250ms ease-out; z-index:999
+}
+/* <http://css-tricks.com/snippets/css/css-triangle/> */
+.field-tip .tip-content:before {
+	content: ' '; /* Must have content to display */
+	position: absolute;
+	top: 50%;
+	left: -16px; /* 2 x border width */
+	width: 0;
+	height: 0;
+	margin-top: -8px; /* - border width */
+	border: 8px solid transparent;
+	border-right-color: #333;
+}
+.field-tip:hover .tip-content {
+	right: -20px;
+	opacity: 1;
+}
+
+
+/****** LOGIN MODAL ******/
+.loginmodal-container {
+       padding: 15px;
+    max-width: 300px;
+    width: 100% !important;
+    background-color: #F7F7F7;
+    margin: 0 auto;
+    border-radius: 2px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    font-family: roboto;
+    position: absolute;
+    right: 20px;
+    top: 40vh;
+}
+
+.loginmodal-container h1 {
+  text-align: center;
+  font-size: 1.8em;
+  font-family: roboto;
+}
+
+.loginmodal-container input[type=submit] {
+  width: 100%;
+  display: block;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.loginmodal-container input[type=text], input[type=password] {
+  height: 44px;
+  font-size: 16px;
+  width: 100%;
+  margin-bottom: 10px;
+  -webkit-appearance: none;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-top: 1px solid #c0c0c0;
+  /* border-radius: 2px; */
+  padding: 0 8px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+.loginmodal-container input[type=text]:hover, input[type=password]:hover {
+  border: 1px solid #b9b9b9;
+  border-top: 1px solid #a0a0a0;
+  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+}
+
+.loginmodal {
+  text-align: center;
+  font-size: 14px;
+  font-family: 'Arial', sans-serif;
+  font-weight: 700;
+  height: 36px;
+  padding: 0 8px;
+/* border-radius: 3px; */
+/* -webkit-user-select: none;
+  user-select: none; */
+}
+
+.loginmodal-submit {
+  /* border: 1px solid #3079ed; */
+  border: 0;
+  color: #fff;
+    text-shadow: 0 1px rgba(0,0,0,0.1);
+    
+    padding: 10px 0px;
+    font-family: roboto;
+    border-radius: 6px;
+    font-size: 16px;
+    /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
+    text-transform: uppercase;
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a5d19+0,00300b+100 */
+background: rgb(10,93,25); /* Old browsers */
+background: -moz-linear-gradient(top, rgba(10,93,25,1) 0%, rgba(0,48,11,1) 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(top, rgba(10,93,25,1) 0%,rgba(0,48,11,1) 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(to bottom, rgba(10,93,25,1) 0%,rgba(0,48,11,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a5d19', endColorstr='#00300b',GradientType=0 ); /* IE6-9 */
+  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
+}
+
+.loginmodal-submit:hover {
+  /* border: 1px solid #2f5bb7; */
+  border: 0px;
+  text-shadow: 0 1px rgba(0,0,0,0.3);
+  background-color: #0a5d19;
+  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
+}
+
+.loginmodal-container a {
+  text-decoration: none;
+  color: #666;
+  font-weight: 400;
+  text-align: center;
+  display: inline-block;
+  opacity: 0.6;
+  transition: opacity ease 0.5s;
+} 
+
+.login-help{
+  font-size: 12px;
+}
+.field-tip .popover{min-width: 300px; max-width: 400px;}
+.field-tip .popover .bottom{top: 100% !important;}
+.field-tip a{display: block}
--- a/assets/playkit/_login/images/aquatic.png
+++ b/assets/playkit/_login/images/aquatic.png
--- a/assets/playkit/_login/images/crops.png
+++ b/assets/playkit/_login/images/crops.png
--- a/assets/playkit/_login/images/forestry.png
+++ b/assets/playkit/_login/images/forestry.png
--- a/assets/playkit/_login/images/livestock.png
+++ b/assets/playkit/_login/images/livestock.png
--- a/assets/playkit/_login/images/logo.png
+++ b/assets/playkit/_login/images/logo.png
--- a/assets/playkit/_login/images/top-bg.png
+++ b/assets/playkit/_login/images/top-bg.png
--- a/assets/playkit/_login/images/wildlife.png
+++ b/assets/playkit/_login/images/wildlife.png
--- a/assets/playkit/_login/js/bootstrap.js
+++ b/assets/playkit/_login/js/bootstrap.js
--- a/assets/playkit/_login/js/logo.png
+++ b/assets/playkit/_login/js/logo.png
--- a/assets/playkit/css/all-990941daa0.css
+++ b/assets/playkit/css/all-990941daa0.css
--- a/assets/playkit/css/all.css
+++ b/assets/playkit/css/all.css
--- a/assets/playkit/css/all.css.map
+++ b/assets/playkit/css/all.css.map
--- a/assets/playkit/css/formgeo-menu.css
+++ b/assets/playkit/css/formgeo-menu.css
--- a/assets/playkit/css/google.css
+++ b/assets/playkit/css/google.css
@ -0,0 +1,168 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Oxygen';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Oxygen Light'), local('Oxygen-Light'), url(https://fonts.gstatic.com/s/oxygen/v8/2sDcZG1Wl4LcnbuCJW8zZmW5O7w.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Oxygen';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Oxygen Light'), local('Oxygen-Light'), url(https://fonts.gstatic.com/s/oxygen/v8/2sDcZG1Wl4LcnbuCJW8zaGW5.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Oxygen';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v8/2sDfZG1Wl4LcnbuKgE0mV0Q.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Oxygen';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Oxygen Regular'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v8/2sDfZG1Wl4LcnbuKjk0m.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Oxygen';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Oxygen Bold'), local('Oxygen-Bold'), url(https://fonts.gstatic.com/s/oxygen/v8/2sDcZG1Wl4LcnbuCNWgzZmW5O7w.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Oxygen';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Oxygen Bold'), local('Oxygen-Bold'), url(https://fonts.gstatic.com/s/oxygen/v8/2sDcZG1Wl4LcnbuCNWgzaGW5.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Poppins Light'), local('Poppins-Light'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Poppins Light'), local('Poppins-Light'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Poppins Light'), local('Poppins-Light'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Poppins Medium'), local('Poppins-Medium'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Poppins Medium'), local('Poppins-Medium'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Poppins Medium'), local('Poppins-Medium'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Poppins Bold'), local('Poppins-Bold'), url(https://fonts.gstatic.com/s/poppins/v6/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/assets/playkit/css/mytheme.css
+++ b/assets/playkit/css/mytheme.css
@ -0,0 +1,40 @@
+.custom-theme-header.bg-faded, .custom-theme-header .navbar-header{
+    background: #ffffff !important;
+   
+}
+.custom-theme-header.navbar-light .navbar-nav .nav-link,.custom-theme-header.navbar-inverse .navbar-nav .nav-link{
+     color: #000000 !important;
+}
+.custom-theme-header .brand-name, .custom-theme-header div ul li div a span{
+    color: #000000 !important;
+}
+
+.custom-theme-header div ul li div a i{
+    color:  #000000 !important;
+}
+.custom-theme-sidebar.site-menubar{
+     background: #ffffff !important;
+}
+.custom-theme-sidebar .site-menu li.open, .custom-theme-sidebar .site-menu li.active, .custom-theme-sidebar .site-menu li:hover{
+    background-color: #ffffff !important;
+}
+
+body.menubar-fold .site-menu > li > .submenu{
+    background: #ffffff !important;
+}
+body.menubar-fold .site-menu > li > .submenu > li{
+  border:0;
+}
+.custom-theme-sidebar .site-menu li a{
+     color: #000000 !important;
+}
+.custom-theme-sidebar .list-group-item:first-child{
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+}
+.custom-theme-sidebar .list-group-item{
+   border: 0;
+}
+#visiable-layers{
+  display:none;
+}
--- a/assets/playkit/css/site-84bd7b771b.css
+++ b/assets/playkit/css/site-84bd7b771b.css
--- a/assets/playkit/css/site-left-sidebar.css
+++ b/assets/playkit/css/site-left-sidebar.css
--- a/assets/playkit/css/site.css
+++ b/assets/playkit/css/site.css
--- a/assets/playkit/css/site.css.map
+++ b/assets/playkit/css/site.css.map
--- a/assets/playkit/css/site_backup.css
+++ b/assets/playkit/css/site_backup.css
--- a/assets/playkit/examples/css/apps/calendar.css
+++ b/assets/playkit/examples/css/apps/calendar.css
--- a/assets/playkit/examples/css/apps/inbox.css
+++ b/assets/playkit/examples/css/apps/inbox.css
--- a/assets/playkit/examples/css/apps/messaging.css
+++ b/assets/playkit/examples/css/apps/messaging.css
--- a/assets/playkit/examples/css/apps/projects.css
+++ b/assets/playkit/examples/css/apps/projects.css
--- a/assets/playkit/examples/css/dashboards/dashboard.v1.css
+++ b/assets/playkit/examples/css/dashboards/dashboard.v1.css
--- a/assets/playkit/examples/css/demos/demos.css
+++ b/assets/playkit/examples/css/demos/demos.css
@ -0,0 +1,67 @@
+body.demo-examples {
+  background: #fafafb; }
+  body.demo-examples .demo-wrapper {
+    font-size: 1rem; }
+  body.demo-examples .demo-header {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; }
+  body.demo-examples .demo-heading {
+    font-size: 1.75rem;
+    margin: 0;
+    margin-right: auto;
+    -webkit-transition: font-size .25s;
+    transition: font-size .25s; }
+  body.demo-examples .docs-brief-intro {
+    padding: 1rem 1.5rem;
+    border-left: 5px solid #39527b; }
+  body.demo-examples .card {
+    border: none;
+    padding: 2rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }
+
+.bd-example {
+  padding: 0;
+  border: none;
+  margin-bottom: 1.5rem; }
+
+#contents-wrapper {
+  position: relative; }
+  .stuck #contents-wrapper {
+    position: fixed;
+    top: 66px;
+    right: 0;
+    z-index: 999; }
+    .stuck #contents-wrapper #contents-heading {
+      background: #fff;
+      box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.08); }
+  #contents-wrapper #contents-heading {
+    cursor: pointer;
+    margin: 0;
+    padding: 1rem; }
+  #contents-wrapper #contents-index {
+    position: absolute;
+    z-index: 999;
+    top: 3.5rem;
+    min-width: 260px;
+    right: 0;
+    max-height: 380px;
+    overflow: auto;
+    display: none;
+    background: #fff;
+    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.08); }
+    .stuck #contents-wrapper #contents-index {
+      top: 100%; }
+  #contents-wrapper #contents-list {
+    padding: 1rem;
+    margin: 0;
+    margin-left: 1.5rem; }
+    #contents-wrapper #contents-list li {
+      margin-left: 0;
+      -webkit-transition: margin-left .3s;
+      transition: margin-left .3s; }
+    #contents-wrapper #contents-list li:hover {
+      margin-left: .5rem; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRlbW9zLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLG9CQUFvQixFQUFFO0VBQ3RCO0lBQ0UsZ0JBQWdCLEVBQUU7RUFDcEI7SUFDRSxtQkFBbUI7SUFDbkIscUJBQWM7SUFBZCxxQkFBYztJQUFkLGNBQWMsRUFBRTtFQUNsQjtJQUNFLG1CQUFtQjtJQUNuQixVQUFVO0lBQ1YsbUJBQW1CO0lBQ25CLG1DQUEyQjtJQUEzQiwyQkFBMkIsRUFBRTtFQUMvQjtJQUNFLHFCQUFxQjtJQUNyQiwrQkFBK0IsRUFBRTtFQUNuQztJQUNFLGFBQWE7SUFDYixjQUFjO0lBQ2QsMENBQTBDLEVBQUU7O0FBRWhEO0VBQ0UsV0FBVztFQUNYLGFBQWE7RUFDYixzQkFBc0IsRUFBRTs7QUFFMUI7RUFDRSxtQkFBbUIsRUFBRTtFQUNyQjtJQUNFLGdCQUFnQjtJQUNoQixVQUFVO0lBQ1YsU0FBUztJQUNULGFBQWEsRUFBRTtJQUNmO01BQ0UsaUJBQWlCO01BQ2pCLDZDQUE2QyxFQUFFO0VBQ25EO0lBQ0UsZ0JBQWdCO0lBQ2hCLFVBQVU7SUFDVixjQUFjLEVBQUU7RUFDbEI7SUFDRSxtQkFBbUI7SUFDbkIsYUFBYTtJQUNiLFlBQVk7SUFDWixpQkFBaUI7SUFDakIsU0FBUztJQUNULGtCQUFrQjtJQUNsQixlQUFlO0lBQ2YsY0FBYztJQUNkLGlCQUFpQjtJQUNqQiw2Q0FBNkMsRUFBRTtJQUMvQztNQUNFLFVBQVUsRUFBRTtFQUNoQjtJQUNFLGNBQWM7SUFDZCxVQUFVO0lBQ1Ysb0JBQW9CLEVBQUU7SUFDdEI7TUFDRSxlQUFlO01BQ2Ysb0NBQTRCO01BQTVCLDRCQUE0QixFQUFFO0lBQ2hDO01BQ0UsbUJBQW1CLEVBQUUiLCJmaWxlIjoiZGVtb3MvZGVtb3MuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiYm9keS5kZW1vLWV4YW1wbGVzIHtcbiAgYmFja2dyb3VuZDogI2ZhZmFmYjsgfVxuICBib2R5LmRlbW8tZXhhbXBsZXMgLmRlbW8td3JhcHBlciB7XG4gICAgZm9udC1zaXplOiAxcmVtOyB9XG4gIGJvZHkuZGVtby1leGFtcGxlcyAuZGVtby1oZWFkZXIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBkaXNwbGF5OiBmbGV4OyB9XG4gIGJvZHkuZGVtby1leGFtcGxlcyAuZGVtby1oZWFkaW5nIHtcbiAgICBmb250LXNpemU6IDEuNzVyZW07XG4gICAgbWFyZ2luOiAwO1xuICAgIG1hcmdpbi1yaWdodDogYXV0bztcbiAgICB0cmFuc2l0aW9uOiBmb250LXNpemUgLjI1czsgfVxuICBib2R5LmRlbW8tZXhhbXBsZXMgLmRvY3MtYnJpZWYtaW50cm8ge1xuICAgIHBhZGRpbmc6IDFyZW0gMS41cmVtO1xuICAgIGJvcmRlci1sZWZ0OiA1cHggc29saWQgIzM5NTI3YjsgfVxuICBib2R5LmRlbW8tZXhhbXBsZXMgLmNhcmQge1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBwYWRkaW5nOiAycmVtO1xuICAgIGJveC1zaGFkb3c6IDAgMnB4IDRweCByZ2JhKDAsIDAsIDAsIDAuMDgpOyB9XG5cbi5iZC1leGFtcGxlIHtcbiAgcGFkZGluZzogMDtcbiAgYm9yZGVyOiBub25lO1xuICBtYXJnaW4tYm90dG9tOiAxLjVyZW07IH1cblxuI2NvbnRlbnRzLXdyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7IH1cbiAgLnN0dWNrICNjb250ZW50cy13cmFwcGVyIHtcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgdG9wOiA2NnB4O1xuICAgIHJpZ2h0OiAwO1xuICAgIHotaW5kZXg6IDk5OTsgfVxuICAgIC5zdHVjayAjY29udGVudHMtd3JhcHBlciAjY29udGVudHMtaGVhZGluZyB7XG4gICAgICBiYWNrZ3JvdW5kOiAjZmZmO1xuICAgICAgYm94LXNoYWRvdzogLTJweCAycHggNnB4IHJnYmEoMCwgMCwgMCwgMC4wOCk7IH1cbiAgI2NvbnRlbnRzLXdyYXBwZXIgI2NvbnRlbnRzLWhlYWRpbmcge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMXJlbTsgfVxuICAjY29udGVudHMtd3JhcHBlciAjY29udGVudHMtaW5kZXgge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB6LWluZGV4OiA5OTk7XG4gICAgdG9wOiAzLjVyZW07XG4gICAgbWluLXdpZHRoOiAyNjBweDtcbiAgICByaWdodDogMDtcbiAgICBtYXgtaGVpZ2h0OiAzODBweDtcbiAgICBvdmVyZmxvdzogYXV0bztcbiAgICBkaXNwbGF5OiBub25lO1xuICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgYm94LXNoYWRvdzogLTJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4wOCk7IH1cbiAgICAuc3R1Y2sgI2NvbnRlbnRzLXdyYXBwZXIgI2NvbnRlbnRzLWluZGV4IHtcbiAgICAgIHRvcDogMTAwJTsgfVxuICAjY29udGVudHMtd3JhcHBlciAjY29udGVudHMtbGlzdCB7XG4gICAgcGFkZGluZzogMXJlbTtcbiAgICBtYXJnaW46IDA7XG4gICAgbWFyZ2luLWxlZnQ6IDEuNXJlbTsgfVxuICAgICNjb250ZW50cy13cmFwcGVyICNjb250ZW50cy1saXN0IGxpIHtcbiAgICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgICAgdHJhbnNpdGlvbjogbWFyZ2luLWxlZnQgLjNzOyB9XG4gICAgI2NvbnRlbnRzLXdyYXBwZXIgI2NvbnRlbnRzLWxpc3QgbGk6aG92ZXIge1xuICAgICAgbWFyZ2luLWxlZnQ6IC41cmVtOyB9XG4iXX0= */
--- a/assets/playkit/examples/css/demos/documentation.css
+++ b/assets/playkit/examples/css/demos/documentation.css
@ -0,0 +1,21 @@
+body.documentation-page {
+  background: #fff;
+  font-size: 1rem;
+  line-height: 1.6; }
+  body.documentation-page .demo-wrapper {
+    color: #555; }
+  body.documentation-page .demo-heading {
+    font-size: 2.5rem; }
+  body.documentation-page code {
+    display: inline-block;
+    margin-right: .5rem;
+    margin-top: .25rem;
+    margin-bottom: .25rem; }
+  body.documentation-page strong {
+    display: inline-block;
+    margin-left: .25rem;
+    margin-right: .25rem;
+    color: #39527b;
+    font-weight: 300; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRvY3VtZW50YXRpb24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsaUJBQWlCO0VBQ2pCLGdCQUFnQjtFQUNoQixpQkFBaUIsRUFBRTtFQUNuQjtJQUNFLFlBQVksRUFBRTtFQUNoQjtJQUNFLGtCQUFrQixFQUFFO0VBQ3RCO0lBQ0Usc0JBQXNCO0lBQ3RCLG9CQUFvQjtJQUNwQixtQkFBbUI7SUFDbkIsc0JBQXNCLEVBQUU7RUFDMUI7SUFDRSxzQkFBc0I7SUFDdEIsb0JBQW9CO0lBQ3BCLHFCQUFxQjtJQUNyQixlQUFlO0lBQ2YsaUJBQWlCLEVBQUUiLCJmaWxlIjoiZGVtb3MvZG9jdW1lbnRhdGlvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJib2R5LmRvY3VtZW50YXRpb24tcGFnZSB7XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIGZvbnQtc2l6ZTogMXJlbTtcbiAgbGluZS1oZWlnaHQ6IDEuNjsgfVxuICBib2R5LmRvY3VtZW50YXRpb24tcGFnZSAuZGVtby13cmFwcGVyIHtcbiAgICBjb2xvcjogIzU1NTsgfVxuICBib2R5LmRvY3VtZW50YXRpb24tcGFnZSAuZGVtby1oZWFkaW5nIHtcbiAgICBmb250LXNpemU6IDIuNXJlbTsgfVxuICBib2R5LmRvY3VtZW50YXRpb24tcGFnZSBjb2RlIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgbWFyZ2luLXJpZ2h0OiAuNXJlbTtcbiAgICBtYXJnaW4tdG9wOiAuMjVyZW07XG4gICAgbWFyZ2luLWJvdHRvbTogLjI1cmVtOyB9XG4gIGJvZHkuZG9jdW1lbnRhdGlvbi1wYWdlIHN0cm9uZyB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIG1hcmdpbi1sZWZ0OiAuMjVyZW07XG4gICAgbWFyZ2luLXJpZ2h0OiAuMjVyZW07XG4gICAgY29sb3I6ICMzOTUyN2I7XG4gICAgZm9udC13ZWlnaHQ6IDMwMDsgfVxuIl19 */
--- a/assets/playkit/examples/css/demos/form.fileupload.css
+++ b/assets/playkit/examples/css/demos/form.fileupload.css
@ -0,0 +1,92 @@
+.fileupload-wrapper {
+  height: 400px;
+  background: #fff;
+  border: 1px solid #eceeef;
+  padding: .5rem;
+  border-radius: 0.25rem;
+  margin-bottom: 2rem; }
+
+.fade.in {
+  opacity: 1; }
+
+.fileupload-drop-area {
+  position: relative;
+  height: 100%;
+  background-color: #f7f7f9;
+  border: 3px dashed #e6e9ea;
+  border-radius: 0.25rem; }
+  .fileupload-drop-area input {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    opacity: 0; }
+  .fileupload-drop-area .fileupload-icons {
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center; }
+    .fileupload-drop-area .fileupload-icons > svg:nth-child(1) {
+      -webkit-transform: rotate(-15deg);
+          -ms-transform: rotate(-15deg);
+              transform: rotate(-15deg);
+      margin-right: .5rem; }
+    .fileupload-drop-area .fileupload-icons > svg:nth-child(2) {
+      margin-bottom: 1rem; }
+    .fileupload-drop-area .fileupload-icons > svg:nth-child(3) {
+      -webkit-transform: rotate(15deg);
+          -ms-transform: rotate(15deg);
+              transform: rotate(15deg);
+      margin-left: .5rem; }
+  .fileupload-drop-area .fileupload-hint {
+    position: absolute;
+    left: 50%;
+    -webkit-transform: translate(-50%, 50px);
+        -ms-transform: translate(-50%, 50px);
+            transform: translate(-50%, 50px);
+    color: #ddd;
+    font-size: 1.25rem;
+    font-style: italic; }
+
+.fileupload-buttonbar .checkbox {
+  margin: 0; }
+
+.fileupload-buttonbar .btn {
+  font-size: .875rem; }
+
+.overall-progress {
+  height: 6px;
+  background-color: #39527b;
+  border-radius: 0; }
+
+.file-item {
+  background: #f7f7f9;
+  margin-bottom: 1.5rem; }
+  .file-item:last-child {
+    margin-bottom: 0; }
+  .file-item .file-item-inner {
+    padding: .75rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .file-item .file-item-progress {
+    height: .25rem;
+    border-radius: 0;
+    background: #39527b; }
+  .file-item .preview {
+    max-width: 100px;
+    max-height: 100px; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvcm0uZmlsZXVwbG9hZC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxjQUFjO0VBQ2QsaUJBQWlCO0VBQ2pCLDBCQUEwQjtFQUMxQixlQUFlO0VBQ2YsdUJBQXVCO0VBQ3ZCLG9CQUFvQixFQUFFOztBQUV4QjtFQUNFLFdBQVcsRUFBRTs7QUFFZjtFQUNFLG1CQUFtQjtFQUNuQixhQUFhO0VBQ2IsMEJBQTBCO0VBQzFCLDJCQUEyQjtFQUMzQix1QkFBdUIsRUFBRTtFQUN6QjtJQUNFLG1CQUFtQjtJQUNuQixnQkFBZ0I7SUFDaEIsT0FBTztJQUNQLFNBQVM7SUFDVCxVQUFVO0lBQ1YsUUFBUTtJQUNSLFlBQVk7SUFDWixXQUFXLEVBQUU7RUFDZjtJQUNFLGFBQWE7SUFDYixxQkFBYztJQUFkLHFCQUFjO0lBQWQsY0FBYztJQUNkLDBCQUFvQjtRQUFwQix1QkFBb0I7WUFBcEIsb0JBQW9CO0lBQ3BCLHlCQUF3QjtRQUF4QixzQkFBd0I7WUFBeEIsd0JBQXdCLEVBQUU7SUFDMUI7TUFDRSxrQ0FBMEI7VUFBMUIsOEJBQTBCO2NBQTFCLDBCQUEwQjtNQUMxQixvQkFBb0IsRUFBRTtJQUN4QjtNQUNFLG9CQUFvQixFQUFFO0lBQ3hCO01BQ0UsaUNBQXlCO1VBQXpCLDZCQUF5QjtjQUF6Qix5QkFBeUI7TUFDekIsbUJBQW1CLEVBQUU7RUFDekI7SUFDRSxtQkFBbUI7SUFDbkIsVUFBVTtJQUNWLHlDQUFpQztRQUFqQyxxQ0FBaUM7WUFBakMsaUNBQWlDO0lBQ2pDLFlBQVk7SUFDWixtQkFBbUI7SUFDbkIsbUJBQW1CLEVBQUU7O0FBRXpCO0VBQ0UsVUFBVSxFQUFFOztBQUVkO0VBQ0UsbUJBQW1CLEVBQUU7O0FBRXZCO0VBQ0UsWUFBWTtFQUNaLDBCQUEwQjtFQUMxQixpQkFBaUIsRUFBRTs7QUFFckI7RUFDRSxvQkFBb0I7RUFDcEIsc0JBQXNCLEVBQUU7RUFDeEI7SUFDRSxpQkFBaUIsRUFBRTtFQUNyQjtJQUNFLGdCQUFnQjtJQUNoQixxQkFBYztJQUFkLHFCQUFjO0lBQWQsY0FBYztJQUNkLDBCQUFvQjtRQUFwQix1QkFBb0I7WUFBcEIsb0JBQW9CLEVBQUU7RUFDeEI7SUFDRSxlQUFlO0lBQ2YsaUJBQWlCO0lBQ2pCLG9CQUFvQixFQUFFO0VBQ3hCO0lBQ0UsaUJBQWlCO0lBQ2pCLGtCQUFrQixFQUFFIiwiZmlsZSI6ImRlbW9zL2Zvcm0uZmlsZXVwbG9hZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZmlsZXVwbG9hZC13cmFwcGVyIHtcbiAgaGVpZ2h0OiA0MDBweDtcbiAgYmFja2dyb3VuZDogI2ZmZjtcbiAgYm9yZGVyOiAxcHggc29saWQgI2VjZWVlZjtcbiAgcGFkZGluZzogLjVyZW07XG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07XG4gIG1hcmdpbi1ib3R0b206IDJyZW07IH1cblxuLmZhZGUuaW4ge1xuICBvcGFjaXR5OiAxOyB9XG5cbi5maWxldXBsb2FkLWRyb3AtYXJlYSB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjdmN2Y5O1xuICBib3JkZXI6IDNweCBkYXNoZWQgI2U2ZTllYTtcbiAgYm9yZGVyLXJhZGl1czogMC4yNXJlbTsgfVxuICAuZmlsZXVwbG9hZC1kcm9wLWFyZWEgaW5wdXQge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgdG9wOiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIGJvdHRvbTogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG9wYWNpdHk6IDA7IH1cbiAgLmZpbGV1cGxvYWQtZHJvcC1hcmVhIC5maWxldXBsb2FkLWljb25zIHtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOyB9XG4gICAgLmZpbGV1cGxvYWQtZHJvcC1hcmVhIC5maWxldXBsb2FkLWljb25zID4gc3ZnOm50aC1jaGlsZCgxKSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgtMTVkZWcpO1xuICAgICAgbWFyZ2luLXJpZ2h0OiAuNXJlbTsgfVxuICAgIC5maWxldXBsb2FkLWRyb3AtYXJlYSAuZmlsZXVwbG9hZC1pY29ucyA+IHN2ZzpudGgtY2hpbGQoMikge1xuICAgICAgbWFyZ2luLWJvdHRvbTogMXJlbTsgfVxuICAgIC5maWxldXBsb2FkLWRyb3AtYXJlYSAuZmlsZXVwbG9hZC1pY29ucyA+IHN2ZzpudGgtY2hpbGQoMykge1xuICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMTVkZWcpO1xuICAgICAgbWFyZ2luLWxlZnQ6IC41cmVtOyB9XG4gIC5maWxldXBsb2FkLWRyb3AtYXJlYSAuZmlsZXVwbG9hZC1oaW50IHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgbGVmdDogNTAlO1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIDUwcHgpO1xuICAgIGNvbG9yOiAjZGRkO1xuICAgIGZvbnQtc2l6ZTogMS4yNXJlbTtcbiAgICBmb250LXN0eWxlOiBpdGFsaWM7IH1cblxuLmZpbGV1cGxvYWQtYnV0dG9uYmFyIC5jaGVja2JveCB7XG4gIG1hcmdpbjogMDsgfVxuXG4uZmlsZXVwbG9hZC1idXR0b25iYXIgLmJ0biB7XG4gIGZvbnQtc2l6ZTogLjg3NXJlbTsgfVxuXG4ub3ZlcmFsbC1wcm9ncmVzcyB7XG4gIGhlaWdodDogNnB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzk1MjdiO1xuICBib3JkZXItcmFkaXVzOiAwOyB9XG5cbi5maWxlLWl0ZW0ge1xuICBiYWNrZ3JvdW5kOiAjZjdmN2Y5O1xuICBtYXJnaW4tYm90dG9tOiAxLjVyZW07IH1cbiAgLmZpbGUtaXRlbTpsYXN0LWNoaWxkIHtcbiAgICBtYXJnaW4tYm90dG9tOiAwOyB9XG4gIC5maWxlLWl0ZW0gLmZpbGUtaXRlbS1pbm5lciB7XG4gICAgcGFkZGluZzogLjc1cmVtO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjsgfVxuICAuZmlsZS1pdGVtIC5maWxlLWl0ZW0tcHJvZ3Jlc3Mge1xuICAgIGhlaWdodDogLjI1cmVtO1xuICAgIGJvcmRlci1yYWRpdXM6IDA7XG4gICAgYmFja2dyb3VuZDogIzM5NTI3YjsgfVxuICAuZmlsZS1pdGVtIC5wcmV2aWV3IHtcbiAgICBtYXgtd2lkdGg6IDEwMHB4O1xuICAgIG1heC1oZWlnaHQ6IDEwMHB4OyB9XG4iXX0= */
--- a/assets/playkit/examples/css/demos/form.validation.css
+++ b/assets/playkit/examples/css/demos/form.validation.css
@ -0,0 +1,15 @@
+.parsley-errors-list {
+  padding: 0;
+  margin: .5rem 0;
+  list-style-type: none; }
+  .parsley-errors-list li {
+    color: #ff7473; }
+  .parsley-errors-list:not(.filled) {
+    display: none; }
+
+.form-section {
+  display: none; }
+  .form-section.current {
+    display: block; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvcm0udmFsaWRhdGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxXQUFXO0VBQ1gsZ0JBQWdCO0VBQ2hCLHNCQUFzQixFQUFFO0VBQ3hCO0lBQ0UsZUFBZSxFQUFFO0VBQ25CO0lBQ0UsY0FBYyxFQUFFOztBQUVwQjtFQUNFLGNBQWMsRUFBRTtFQUNoQjtJQUNFLGVBQWUsRUFBRSIsImZpbGUiOiJkZW1vcy9mb3JtLnZhbGlkYXRpb24uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnBhcnNsZXktZXJyb3JzLWxpc3Qge1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IC41cmVtIDA7XG4gIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTsgfVxuICAucGFyc2xleS1lcnJvcnMtbGlzdCBsaSB7XG4gICAgY29sb3I6ICNmZjc0NzM7IH1cbiAgLnBhcnNsZXktZXJyb3JzLWxpc3Q6bm90KC5maWxsZWQpIHtcbiAgICBkaXNwbGF5OiBub25lOyB9XG5cbi5mb3JtLXNlY3Rpb24ge1xuICBkaXNwbGF5OiBub25lOyB9XG4gIC5mb3JtLXNlY3Rpb24uY3VycmVudCB7XG4gICAgZGlzcGxheTogYmxvY2s7IH1cbiJdfQ== */
--- a/assets/playkit/examples/css/demos/form.wizard.css
+++ b/assets/playkit/examples/css/demos/form.wizard.css
--- a/assets/playkit/examples/css/demos/form.wysiwyg-editor.css
+++ b/assets/playkit/examples/css/demos/form.wysiwyg-editor.css
@ -0,0 +1,20 @@
+/*
+ * Summernote depends on bootstrap 3
+ * so some default styles should
+ * be altered to look fine
+ * for bootstrap 4
+ */
+.note-editor.note-frame {
+  border-color: #eceeef; }
+
+.note-toolbar {
+  background: #f7f7f9; }
+  .note-toolbar .dropdown-menu .btn-group {
+    display: inline-block; }
+
+.note-btn {
+  padding: .5rem .75rem; }
+  .note-btn:hover {
+    background-color: #f7f7f9; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZvcm0ud3lzaXd5Zy1lZGl0b3IuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7OztHQUtHO0FBQ0g7RUFDRSxzQkFBc0IsRUFBRTs7QUFFMUI7RUFDRSxvQkFBb0IsRUFBRTtFQUN0QjtJQUNFLHNCQUFzQixFQUFFOztBQUU1QjtFQUNFLHNCQUFzQixFQUFFO0VBQ3hCO0lBQ0UsMEJBQTBCLEVBQUUiLCJmaWxlIjoiZGVtb3MvZm9ybS53eXNpd3lnLWVkaXRvci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogU3VtbWVybm90ZSBkZXBlbmRzIG9uIGJvb3RzdHJhcCAzXG4gKiBzbyBzb21lIGRlZmF1bHQgc3R5bGVzIHNob3VsZFxuICogYmUgYWx0ZXJlZCB0byBsb29rIGZpbmVcbiAqIGZvciBib290c3RyYXAgNFxuICovXG4ubm90ZS1lZGl0b3Iubm90ZS1mcmFtZSB7XG4gIGJvcmRlci1jb2xvcjogI2VjZWVlZjsgfVxuXG4ubm90ZS10b29sYmFyIHtcbiAgYmFja2dyb3VuZDogI2Y3ZjdmOTsgfVxuICAubm90ZS10b29sYmFyIC5kcm9wZG93bi1tZW51IC5idG4tZ3JvdXAge1xuICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsgfVxuXG4ubm90ZS1idG4ge1xuICBwYWRkaW5nOiAuNXJlbSAuNzVyZW07IH1cbiAgLm5vdGUtYnRuOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjdmN2Y5OyB9XG4iXX0= */
--- a/assets/playkit/examples/css/demos/uikit.icons.css
+++ b/assets/playkit/examples/css/demos/uikit.icons.css
@ -0,0 +1,7 @@
+.icon-list-item {
+  padding: .5rem 1rem;
+  color: #555; }
+  .icon-list-item i {
+    margin-right: 1.25rem; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVpa2l0Lmljb25zLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLG9CQUFvQjtFQUNwQixZQUFZLEVBQUU7RUFDZDtJQUNFLHNCQUFzQixFQUFFIiwiZmlsZSI6ImRlbW9zL3Vpa2l0Lmljb25zLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5pY29uLWxpc3QtaXRlbSB7XG4gIHBhZGRpbmc6IC41cmVtIDFyZW07XG4gIGNvbG9yOiAjNTU1OyB9XG4gIC5pY29uLWxpc3QtaXRlbSBpIHtcbiAgICBtYXJnaW4tcmlnaHQ6IDEuMjVyZW07IH1cbiJdfQ== */
--- a/assets/playkit/examples/css/pages/blog.css
+++ b/assets/playkit/examples/css/pages/blog.css
@ -0,0 +1,16 @@
+.single-post .post-author-avatar {
+  left: 24px;
+  border-width: 2px; }
+
+.blog-wrapper {
+  width: 96%;
+  margin: 0 auto;
+  max-width: 600px; }
+  @media (min-width: 768px) {
+    .blog-wrapper {
+      width: 90%; } }
+  @media (min-width: 1200px) {
+    .blog-wrapper {
+      width: 60%; } }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJsb2cuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBVztFQUNYLGtCQUFrQixFQUFFOztBQUV0QjtFQUNFLFdBQVc7RUFDWCxlQUFlO0VBQ2YsaUJBQWlCLEVBQUU7RUFDbkI7SUFDRTtNQUNFLFdBQVcsRUFBRSxFQUFFO0VBQ25CO0lBQ0U7TUFDRSxXQUFXLEVBQUUsRUFBRSIsImZpbGUiOiJwYWdlcy9ibG9nLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zaW5nbGUtcG9zdCAucG9zdC1hdXRob3ItYXZhdGFyIHtcbiAgbGVmdDogMjRweDtcbiAgYm9yZGVyLXdpZHRoOiAycHg7IH1cblxuLmJsb2ctd3JhcHBlciB7XG4gIHdpZHRoOiA5NiU7XG4gIG1hcmdpbjogMCBhdXRvO1xuICBtYXgtd2lkdGg6IDYwMHB4OyB9XG4gIEBtZWRpYSAobWluLXdpZHRoOiA3NjhweCkge1xuICAgIC5ibG9nLXdyYXBwZXIge1xuICAgICAgd2lkdGg6IDkwJTsgfSB9XG4gIEBtZWRpYSAobWluLXdpZHRoOiAxMjAwcHgpIHtcbiAgICAuYmxvZy13cmFwcGVyIHtcbiAgICAgIHdpZHRoOiA2MCU7IH0gfVxuIl19 */
--- a/assets/playkit/examples/css/pages/error.css
+++ b/assets/playkit/examples/css/pages/error.css
@ -0,0 +1,37 @@
+html {
+  height: 100%; }
+
+body.error-page {
+  padding: 0;
+  min-height: 100%;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center; }
+
+.error-page-content {
+  padding: 4rem 1.5rem;
+  width: 94%;
+  border-radius: 0.25rem; }
+  @media (min-width: 768px) {
+    .error-page-content {
+      width: 80%; } }
+  @media (min-width: 992px) {
+    .error-page-content {
+      width: 60%; } }
+
+.error-page-404 {
+  background: -webkit-linear-gradient(45deg, #39527b 50%, #60c84c 50%);
+  background: linear-gradient(45deg, #39527b 50%, #60c84c 50%); }
+
+.error-page-500 .box-shadow {
+  box-shadow: 0 0 100px #ccc; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVycm9yLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGFBQWEsRUFBRTs7QUFFakI7RUFDRSxXQUFXO0VBQ1gsaUJBQWlCO0VBQ2pCLGFBQWE7RUFDYixZQUFZO0VBQ1oscUJBQWM7RUFBZCxxQkFBYztFQUFkLGNBQWM7RUFDZCwwQkFBb0I7TUFBcEIsdUJBQW9CO1VBQXBCLG9CQUFvQjtFQUNwQix5QkFBd0I7TUFBeEIsc0JBQXdCO1VBQXhCLHdCQUF3QixFQUFFOztBQUU1QjtFQUNFLHFCQUFxQjtFQUNyQixXQUFXO0VBQ1gsdUJBQXVCLEVBQUU7RUFDekI7SUFDRTtNQUNFLFdBQVcsRUFBRSxFQUFFO0VBQ25CO0lBQ0U7TUFDRSxXQUFXLEVBQUUsRUFBRTs7QUFFckI7RUFDRSxxRUFBNkQ7RUFBN0QsNkRBQTZELEVBQUU7O0FBRWpFO0VBQ0UsMkJBQTJCLEVBQUUiLCJmaWxlIjoicGFnZXMvZXJyb3IuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiaHRtbCB7XG4gIGhlaWdodDogMTAwJTsgfVxuXG5ib2R5LmVycm9yLXBhZ2Uge1xuICBwYWRkaW5nOiAwO1xuICBtaW4taGVpZ2h0OiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsgfVxuXG4uZXJyb3ItcGFnZS1jb250ZW50IHtcbiAgcGFkZGluZzogNHJlbSAxLjVyZW07XG4gIHdpZHRoOiA5NCU7XG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07IH1cbiAgQG1lZGlhIChtaW4td2lkdGg6IDc2OHB4KSB7XG4gICAgLmVycm9yLXBhZ2UtY29udGVudCB7XG4gICAgICB3aWR0aDogODAlOyB9IH1cbiAgQG1lZGlhIChtaW4td2lkdGg6IDk5MnB4KSB7XG4gICAgLmVycm9yLXBhZ2UtY29udGVudCB7XG4gICAgICB3aWR0aDogNjAlOyB9IH1cblxuLmVycm9yLXBhZ2UtNDA0IHtcbiAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KDQ1ZGVnLCAjMzk1MjdiIDUwJSwgIzYwYzg0YyA1MCUpOyB9XG5cbi5lcnJvci1wYWdlLTUwMCAuYm94LXNoYWRvdyB7XG4gIGJveC1zaGFkb3c6IDAgMCAxMDBweCAjY2NjOyB9XG4iXX0= */
--- a/assets/playkit/examples/css/pages/faq.css
+++ b/assets/playkit/examples/css/pages/faq.css
@ -0,0 +1,49 @@
+.accordion-custom .card {
+  padding: .25rem;
+  background: #f7f7f9;
+  border: 1px solid #eceeef;
+  border-radius: 0.25rem;
+  margin-bottom: 1.5rem; }
+
+.accordion-custom .card-header,
+.accordion-custom .card-block {
+  background: #fff;
+  border-radius: 0.25rem;
+  border: 1px solid #eceeef; }
+
+.accordion-custom .card-header {
+  padding: 0; }
+
+.accordion-custom .card-heading {
+  display: block;
+  width: 100%;
+  cursor: pointer;
+  padding: .75rem 1rem;
+  position: relative;
+  font-size: 1rem; }
+
+.accordion-custom .card-block {
+  padding: 1rem;
+  font-size: 1rem;
+  color: #818a91;
+  line-height: 1.6; }
+
+.accordion-custom .card-heading::after {
+  content: '\f067';
+  font: normal normal normal 14px/1 FontAwesome;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  display: inline-block;
+  color: #fff;
+  background: #60c84c;
+  position: absolute;
+  right: .5rem;
+  top: .5rem;
+  border-radius: 0.25rem; }
+
+.accordion-custom .card-heading[aria-expanded="true"]::after {
+  content: '\f068'; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZhcS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxnQkFBZ0I7RUFDaEIsb0JBQW9CO0VBQ3BCLDBCQUEwQjtFQUMxQix1QkFBdUI7RUFDdkIsc0JBQXNCLEVBQUU7O0FBRTFCOztFQUVFLGlCQUFpQjtFQUNqQix1QkFBdUI7RUFDdkIsMEJBQTBCLEVBQUU7O0FBRTlCO0VBQ0UsV0FBVyxFQUFFOztBQUVmO0VBQ0UsZUFBZTtFQUNmLFlBQVk7RUFDWixnQkFBZ0I7RUFDaEIscUJBQXFCO0VBQ3JCLG1CQUFtQjtFQUNuQixnQkFBZ0IsRUFBRTs7QUFFcEI7RUFDRSxjQUFjO0VBQ2QsZ0JBQWdCO0VBQ2hCLGVBQWU7RUFDZixpQkFBaUIsRUFBRTs7QUFFckI7RUFDRSxpQkFBaUI7RUFDakIsOENBQThDO0VBQzlDLFlBQVk7RUFDWixhQUFhO0VBQ2Isa0JBQWtCO0VBQ2xCLG1CQUFtQjtFQUNuQixzQkFBc0I7RUFDdEIsWUFBWTtFQUNaLG9CQUFvQjtFQUNwQixtQkFBbUI7RUFDbkIsYUFBYTtFQUNiLFdBQVc7RUFDWCx1QkFBdUIsRUFBRTs7QUFFM0I7RUFDRSxpQkFBaUIsRUFBRSIsImZpbGUiOiJwYWdlcy9mYXEuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFjY29yZGlvbi1jdXN0b20gLmNhcmQge1xuICBwYWRkaW5nOiAuMjVyZW07XG4gIGJhY2tncm91bmQ6ICNmN2Y3Zjk7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNlY2VlZWY7XG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07XG4gIG1hcmdpbi1ib3R0b206IDEuNXJlbTsgfVxuXG4uYWNjb3JkaW9uLWN1c3RvbSAuY2FyZC1oZWFkZXIsXG4uYWNjb3JkaW9uLWN1c3RvbSAuY2FyZC1ibG9jayB7XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07XG4gIGJvcmRlcjogMXB4IHNvbGlkICNlY2VlZWY7IH1cblxuLmFjY29yZGlvbi1jdXN0b20gLmNhcmQtaGVhZGVyIHtcbiAgcGFkZGluZzogMDsgfVxuXG4uYWNjb3JkaW9uLWN1c3RvbSAuY2FyZC1oZWFkaW5nIHtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHdpZHRoOiAxMDAlO1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIHBhZGRpbmc6IC43NXJlbSAxcmVtO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGZvbnQtc2l6ZTogMXJlbTsgfVxuXG4uYWNjb3JkaW9uLWN1c3RvbSAuY2FyZC1ibG9jayB7XG4gIHBhZGRpbmc6IDFyZW07XG4gIGZvbnQtc2l6ZTogMXJlbTtcbiAgY29sb3I6ICM4MThhOTE7XG4gIGxpbmUtaGVpZ2h0OiAxLjY7IH1cblxuLmFjY29yZGlvbi1jdXN0b20gLmNhcmQtaGVhZGluZzo6YWZ0ZXIge1xuICBjb250ZW50OiAnXFxmMDY3JztcbiAgZm9udDogbm9ybWFsIG5vcm1hbCBub3JtYWwgMTRweC8xIEZvbnRBd2Vzb21lO1xuICB3aWR0aDogMnJlbTtcbiAgaGVpZ2h0OiAycmVtO1xuICBsaW5lLWhlaWdodDogMnJlbTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIGNvbG9yOiAjZmZmO1xuICBiYWNrZ3JvdW5kOiAjNjBjODRjO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAuNXJlbTtcbiAgdG9wOiAuNXJlbTtcbiAgYm9yZGVyLXJhZGl1czogMC4yNXJlbTsgfVxuXG4uYWNjb3JkaW9uLWN1c3RvbSAuY2FyZC1oZWFkaW5nW2FyaWEtZXhwYW5kZWQ9XCJ0cnVlXCJdOjphZnRlciB7XG4gIGNvbnRlbnQ6ICdcXGYwNjgnOyB9XG4iXX0= */
--- a/assets/playkit/examples/css/pages/invoice.css
+++ b/assets/playkit/examples/css/pages/invoice.css
@ -0,0 +1,31 @@
+@import 'https://fonts.googleapis.com/css?family=Great+Vibes';
+.invoice-wrapper.invoice-bg {
+  background: -webkit-linear-gradient(#60c84c 400px, #fff 0, #fff 70%);
+  background: linear-gradient(#60c84c 400px, #fff 0, #fff 70%); }
+
+.invoice-inner {
+  padding: 1.5rem;
+  padding: 3rem; }
+
+.invoice-logo svg {
+  -webkit-transform: rotateY(180deg);
+          transform: rotateY(180deg); }
+
+.page-invoice .table th, .page-invoice .table td {
+  white-space: nowrap;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem; }
+
+.invoice-btn {
+  height: 45px;
+  border-radius: 0; }
+  @media (max-width: 575px) {
+    .invoice-btn:first-child {
+      margin-bottom: 1.5rem; } }
+
+.signature {
+  font-size: 24px;
+  font-weight: 300;
+  font-family: 'Great Vibes', cursive; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImludm9pY2UuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLDhEQUE4RDtBQUM5RDtFQUNFLHFFQUE2RDtFQUE3RCw2REFBNkQsRUFBRTs7QUFFakU7RUFDRSxnQkFBZ0I7RUFDaEIsY0FBYyxFQUFFOztBQUVsQjtFQUNFLG1DQUEyQjtVQUEzQiwyQkFBMkIsRUFBRTs7QUFFL0I7RUFDRSxvQkFBb0I7RUFDcEIsc0JBQXNCO0VBQ3RCLHFCQUFxQixFQUFFOztBQUV6QjtFQUNFLGFBQWE7RUFDYixpQkFBaUIsRUFBRTtFQUNuQjtJQUNFO01BQ0Usc0JBQXNCLEVBQUUsRUFBRTs7QUFFaEM7RUFDRSxnQkFBZ0I7RUFDaEIsaUJBQWlCO0VBQ2pCLG9DQUFvQyxFQUFFIiwiZmlsZSI6InBhZ2VzL2ludm9pY2UuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCAnaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3M/ZmFtaWx5PUdyZWF0K1ZpYmVzJztcbi5pbnZvaWNlLXdyYXBwZXIuaW52b2ljZS1iZyB7XG4gIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCgjNjBjODRjIDQwMHB4LCAjZmZmIDAsICNmZmYgNzAlKTsgfVxuXG4uaW52b2ljZS1pbm5lciB7XG4gIHBhZGRpbmc6IDEuNXJlbTtcbiAgcGFkZGluZzogM3JlbTsgfVxuXG4uaW52b2ljZS1sb2dvIHN2ZyB7XG4gIHRyYW5zZm9ybTogcm90YXRlWSgxODBkZWcpOyB9XG5cbi5wYWdlLWludm9pY2UgLnRhYmxlIHRoLCAucGFnZS1pbnZvaWNlIC50YWJsZSB0ZCB7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHBhZGRpbmctcmlnaHQ6IDEuNXJlbTtcbiAgcGFkZGluZy1sZWZ0OiAxLjVyZW07IH1cblxuLmludm9pY2UtYnRuIHtcbiAgaGVpZ2h0OiA0NXB4O1xuICBib3JkZXItcmFkaXVzOiAwOyB9XG4gIEBtZWRpYSAobWF4LXdpZHRoOiA1NzVweCkge1xuICAgIC5pbnZvaWNlLWJ0bjpmaXJzdC1jaGlsZCB7XG4gICAgICBtYXJnaW4tYm90dG9tOiAxLjVyZW07IH0gfVxuXG4uc2lnbmF0dXJlIHtcbiAgZm9udC1zaXplOiAyNHB4O1xuICBmb250LXdlaWdodDogMzAwO1xuICBmb250LWZhbWlseTogJ0dyZWF0IFZpYmVzJywgY3Vyc2l2ZTsgfVxuIl19 */
--- a/assets/playkit/examples/css/pages/login.css
+++ b/assets/playkit/examples/css/pages/login.css
--- a/assets/playkit/examples/css/pages/price.css
+++ b/assets/playkit/examples/css/pages/price.css
@ -0,0 +1,34 @@
+@media (max-width: 1199px) {
+  .price-page-wrapper {
+    padding: 0 3rem; } }
+
+.price-column {
+  border: 1px solid #eceeef;
+  border-radius: 0.25rem;
+  margin-bottom: 4.5rem; }
+  @media (max-width: 991px) {
+    .price-column {
+      max-width: 480px;
+      margin-right: auto;
+      margin-left: auto; } }
+
+.pc__footer .btn {
+  width: 100%;
+  padding: .75rem 1rem;
+  font-size: .875rem; }
+
+.star-rating {
+  color: gold; }
+  .star-rating i {
+    font-size: 1.25rem;
+    margin-right: 4px; }
+
+.price-plan-name {
+  width: 80%;
+  max-width: 180px;
+  height: 42px;
+  line-height: 42px;
+  margin: 0 auto -20px;
+  border-radius: 1000px; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByaWNlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFO0lBQ0UsZ0JBQWdCLEVBQUUsRUFBRTs7QUFFeEI7RUFDRSwwQkFBMEI7RUFDMUIsdUJBQXVCO0VBQ3ZCLHNCQUFzQixFQUFFO0VBQ3hCO0lBQ0U7TUFDRSxpQkFBaUI7TUFDakIsbUJBQW1CO01BQ25CLGtCQUFrQixFQUFFLEVBQUU7O0FBRTVCO0VBQ0UsWUFBWTtFQUNaLHFCQUFxQjtFQUNyQixtQkFBbUIsRUFBRTs7QUFFdkI7RUFDRSxZQUFZLEVBQUU7RUFDZDtJQUNFLG1CQUFtQjtJQUNuQixrQkFBa0IsRUFBRTs7QUFFeEI7RUFDRSxXQUFXO0VBQ1gsaUJBQWlCO0VBQ2pCLGFBQWE7RUFDYixrQkFBa0I7RUFDbEIscUJBQXFCO0VBQ3JCLHNCQUFzQixFQUFFIiwiZmlsZSI6InBhZ2VzL3ByaWNlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBtZWRpYSAobWF4LXdpZHRoOiAxMTk5cHgpIHtcbiAgLnByaWNlLXBhZ2Utd3JhcHBlciB7XG4gICAgcGFkZGluZzogMCAzcmVtOyB9IH1cblxuLnByaWNlLWNvbHVtbiB7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNlY2VlZWY7XG4gIGJvcmRlci1yYWRpdXM6IDAuMjVyZW07XG4gIG1hcmdpbi1ib3R0b206IDQuNXJlbTsgfVxuICBAbWVkaWEgKG1heC13aWR0aDogOTkxcHgpIHtcbiAgICAucHJpY2UtY29sdW1uIHtcbiAgICAgIG1heC13aWR0aDogNDgwcHg7XG4gICAgICBtYXJnaW4tcmlnaHQ6IGF1dG87XG4gICAgICBtYXJnaW4tbGVmdDogYXV0bzsgfSB9XG5cbi5wY19fZm9vdGVyIC5idG4ge1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZzogLjc1cmVtIDFyZW07XG4gIGZvbnQtc2l6ZTogLjg3NXJlbTsgfVxuXG4uc3Rhci1yYXRpbmcge1xuICBjb2xvcjogZ29sZDsgfVxuICAuc3Rhci1yYXRpbmcgaSB7XG4gICAgZm9udC1zaXplOiAxLjI1cmVtO1xuICAgIG1hcmdpbi1yaWdodDogNHB4OyB9XG5cbi5wcmljZS1wbGFuLW5hbWUge1xuICB3aWR0aDogODAlO1xuICBtYXgtd2lkdGg6IDE4MHB4O1xuICBoZWlnaHQ6IDQycHg7XG4gIGxpbmUtaGVpZ2h0OiA0MnB4O1xuICBtYXJnaW46IDAgYXV0byAtMjBweDtcbiAgYm9yZGVyLXJhZGl1czogMTAwMHB4OyB9XG4iXX0= */
--- a/assets/playkit/examples/css/pages/profile.css
+++ b/assets/playkit/examples/css/pages/profile.css
--- a/assets/playkit/examples/css/pages/search.css
+++ b/assets/playkit/examples/css/pages/search.css
@ -0,0 +1,93 @@
+.s__form-wrap {
+  padding: 2rem 1.5rem;
+  border: 1px solid #eceeef;
+  border-radius: 0.25rem;
+  margin-bottom: 2rem; }
+  @media (min-width: 576px) {
+    .s__form-wrap {
+      padding: 2.5rem 2rem; } }
+  @media (min-width: 768px) {
+    .s__form-wrap {
+      padding: 3.5rem; } }
+
+.s__form-inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column; }
+  .s__form-inner .s__form-input-group {
+    margin-bottom: 24px; }
+  .s__form-inner .s__form-field,
+  .s__form-inner .s__form-cats-btn,
+  .s__form-inner .s__form-submit-btn {
+    box-shadow: none;
+    outline: none; }
+  .s__form-inner .s__form-cats-btn {
+    color: #818a91; }
+  .s__form-inner .s__form-submit-btn,
+  .s__form-inner .s__form-input-group {
+    height: 3.5rem; }
+  @media (min-width: 576px) {
+    .s__form-inner {
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: row;
+              flex-direction: row; }
+      .s__form-inner .s__form-input-group {
+        margin-right: 2rem;
+        margin-bottom: 0; }
+      .s__form-inner .s__form-submit-btn {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 25%;
+                flex: 0 0 25%;
+        width: 25%; } }
+  @media (min-width: 768px) {
+    .s__form-inner {
+      height: 4rem; }
+      .s__form-inner .s__form-submit-btn,
+      .s__form-inner .s__form-input-group {
+        height: 4rem; }
+      .s__form-inner .s__form-submit-btn {
+        -webkit-box-flex: 0;
+            -ms-flex: 0 0 18%;
+                flex: 0 0 18%;
+        width: 18%; } }
+
+.s__type-wrap {
+  border: 1px solid #eceeef;
+  border-radius: 0.25rem;
+  margin-bottom: 2rem;
+  margin-right: auto;
+  margin-left: auto; }
+  .s__type-wrap ul {
+    padding: 0;
+    margin: 0;
+    list-style-type: none; }
+  @media (min-width: 768px) {
+    .s__type-wrap {
+      width: 80%; } }
+  @media (min-width: 992px) {
+    .s__type-wrap {
+      width: 60%; } }
+
+.s__type-list li {
+  margin-bottom: -2px; }
+
+.s__type-list a {
+  display: block;
+  font-weight: 400;
+  letter-spacing: 1px;
+  padding: 1.5rem .5rem;
+  font-size: 1rem;
+  text-transform: uppercase;
+  border-bottom: 2px solid transparent; }
+
+.s__type-list a:hover,
+.s__type-list a:focus,
+.s__type-list li.active a {
+  border-bottom-color: #60c84c; }
+
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxxQkFBcUI7RUFDckIsMEJBQTBCO0VBQzFCLHVCQUF1QjtFQUN2QixvQkFBb0IsRUFBRTtFQUN0QjtJQUNFO01BQ0UscUJBQXFCLEVBQUUsRUFBRTtFQUM3QjtJQUNFO01BQ0UsZ0JBQWdCLEVBQUUsRUFBRTs7QUFFMUI7RUFDRSxxQkFBYztFQUFkLHFCQUFjO0VBQWQsY0FBYztFQUNkLDZCQUF1QjtFQUF2Qiw4QkFBdUI7TUFBdkIsMkJBQXVCO1VBQXZCLHVCQUF1QixFQUFFO0VBQ3pCO0lBQ0Usb0JBQW9CLEVBQUU7RUFDeEI7OztJQUdFLGlCQUFpQjtJQUNqQixjQUFjLEVBQUU7RUFDbEI7SUFDRSxlQUFlLEVBQUU7RUFDbkI7O0lBRUUsZUFBZSxFQUFFO0VBQ25CO0lBQ0U7TUFDRSwrQkFBb0I7TUFBcEIsOEJBQW9CO1VBQXBCLHdCQUFvQjtjQUFwQixvQkFBb0IsRUFBRTtNQUN0QjtRQUNFLG1CQUFtQjtRQUNuQixpQkFBaUIsRUFBRTtNQUNyQjtRQUNFLG9CQUFjO1lBQWQsa0JBQWM7Z0JBQWQsY0FBYztRQUNkLFdBQVcsRUFBRSxFQUFFO0VBQ3JCO0lBQ0U7TUFDRSxhQUFhLEVBQUU7TUFDZjs7UUFFRSxhQUFhLEVBQUU7TUFDakI7UUFDRSxvQkFBYztZQUFkLGtCQUFjO2dCQUFkLGNBQWM7UUFDZCxXQUFXLEVBQUUsRUFBRTs7QUFFdkI7RUFDRSwwQkFBMEI7RUFDMUIsdUJBQXVCO0VBQ3ZCLG9CQUFvQjtFQUNwQixtQkFBbUI7RUFDbkIsa0JBQWtCLEVBQUU7RUFDcEI7SUFDRSxXQUFXO0lBQ1gsVUFBVTtJQUNWLHNCQUFzQixFQUFFO0VBQzFCO0lBQ0U7TUFDRSxXQUFXLEVBQUUsRUFBRTtFQUNuQjtJQUNFO01BQ0UsV0FBVyxFQUFFLEVBQUU7O0FBRXJCO0VBQ0Usb0JBQW9CLEVBQUU7O0FBRXhCO0VBQ0UsZUFBZTtFQUNmLGlCQUFpQjtFQUNqQixvQkFBb0I7RUFDcEIsc0JBQXNCO0VBQ3RCLGdCQUFnQjtFQUNoQiwwQkFBMEI7RUFDMUIscUNBQXFDLEVBQUU7O0FBRXpDOzs7RUFHRSw2QkFBNkIsRUFBRSIsImZpbGUiOiJwYWdlcy9zZWFyY2guY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnNfX2Zvcm0td3JhcCB7XG4gIHBhZGRpbmc6IDJyZW0gMS41cmVtO1xuICBib3JkZXI6IDFweCBzb2xpZCAjZWNlZWVmO1xuICBib3JkZXItcmFkaXVzOiAwLjI1cmVtO1xuICBtYXJnaW4tYm90dG9tOiAycmVtOyB9XG4gIEBtZWRpYSAobWluLXdpZHRoOiA1NzZweCkge1xuICAgIC5zX19mb3JtLXdyYXAge1xuICAgICAgcGFkZGluZzogMi41cmVtIDJyZW07IH0gfVxuICBAbWVkaWEgKG1pbi13aWR0aDogNzY4cHgpIHtcbiAgICAuc19fZm9ybS13cmFwIHtcbiAgICAgIHBhZGRpbmc6IDMuNXJlbTsgfSB9XG5cbi5zX19mb3JtLWlubmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsgfVxuICAuc19fZm9ybS1pbm5lciAuc19fZm9ybS1pbnB1dC1ncm91cCB7XG4gICAgbWFyZ2luLWJvdHRvbTogMjRweDsgfVxuICAuc19fZm9ybS1pbm5lciAuc19fZm9ybS1maWVsZCxcbiAgLnNfX2Zvcm0taW5uZXIgLnNfX2Zvcm0tY2F0cy1idG4sXG4gIC5zX19mb3JtLWlubmVyIC5zX19mb3JtLXN1Ym1pdC1idG4ge1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgb3V0bGluZTogbm9uZTsgfVxuICAuc19fZm9ybS1pbm5lciAuc19fZm9ybS1jYXRzLWJ0biB7XG4gICAgY29sb3I6ICM4MThhOTE7IH1cbiAgLnNfX2Zvcm0taW5uZXIgLnNfX2Zvcm0tc3VibWl0LWJ0bixcbiAgLnNfX2Zvcm0taW5uZXIgLnNfX2Zvcm0taW5wdXQtZ3JvdXAge1xuICAgIGhlaWdodDogMy41cmVtOyB9XG4gIEBtZWRpYSAobWluLXdpZHRoOiA1NzZweCkge1xuICAgIC5zX19mb3JtLWlubmVyIHtcbiAgICAgIGZsZXgtZGlyZWN0aW9uOiByb3c7IH1cbiAgICAgIC5zX19mb3JtLWlubmVyIC5zX19mb3JtLWlucHV0LWdyb3VwIHtcbiAgICAgICAgbWFyZ2luLXJpZ2h0OiAycmVtO1xuICAgICAgICBtYXJnaW4tYm90dG9tOiAwOyB9XG4gICAgICAuc19fZm9ybS1pbm5lciAuc19fZm9ybS1zdWJtaXQtYnRuIHtcbiAgICAgICAgZmxleDogMCAwIDI1JTtcbiAgICAgICAgd2lkdGg6IDI1JTsgfSB9XG4gIEBtZWRpYSAobWluLXdpZHRoOiA3NjhweCkge1xuICAgIC5zX19mb3JtLWlubmVyIHtcbiAgICAgIGhlaWdodDogNHJlbTsgfVxuICAgICAgLnNfX2Zvcm0taW5uZXIgLnNfX2Zvcm0tc3VibWl0LWJ0bixcbiAgICAgIC5zX19mb3JtLWlubmVyIC5zX19mb3JtLWlucHV0LWdyb3VwIHtcbiAgICAgICAgaGVpZ2h0OiA0cmVtOyB9XG4gICAgICAuc19fZm9ybS1pbm5lciAuc19fZm9ybS1zdWJtaXQtYnRuIHtcbiAgICAgICAgZmxleDogMCAwIDE4JTtcbiAgICAgICAgd2lkdGg6IDE4JTsgfSB9XG5cbi5zX190eXBlLXdyYXAge1xuICBib3JkZXI6IDFweCBzb2xpZCAjZWNlZWVmO1xuICBib3JkZXItcmFkaXVzOiAwLjI1cmVtO1xuICBtYXJnaW4tYm90dG9tOiAycmVtO1xuICBtYXJnaW4tcmlnaHQ6IGF1dG87XG4gIG1hcmdpbi1sZWZ0OiBhdXRvOyB9XG4gIC5zX190eXBlLXdyYXAgdWwge1xuICAgIHBhZGRpbmc6IDA7XG4gICAgbWFyZ2luOiAwO1xuICAgIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTsgfVxuICBAbWVkaWEgKG1pbi13aWR0aDogNzY4cHgpIHtcbiAgICAuc19fdHlwZS13cmFwIHtcbiAgICAgIHdpZHRoOiA4MCU7IH0gfVxuICBAbWVkaWEgKG1pbi13aWR0aDogOTkycHgpIHtcbiAgICAuc19fdHlwZS13cmFwIHtcbiAgICAgIHdpZHRoOiA2MCU7IH0gfVxuXG4uc19fdHlwZS1saXN0IGxpIHtcbiAgbWFyZ2luLWJvdHRvbTogLTJweDsgfVxuXG4uc19fdHlwZS1saXN0IGEge1xuICBkaXNwbGF5OiBibG9jaztcbiAgZm9udC13ZWlnaHQ6IDQwMDtcbiAgbGV0dGVyLXNwYWNpbmc6IDFweDtcbiAgcGFkZGluZzogMS41cmVtIC41cmVtO1xuICBmb250LXNpemU6IDFyZW07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCB0cmFuc3BhcmVudDsgfVxuXG4uc19fdHlwZS1saXN0IGE6aG92ZXIsXG4uc19fdHlwZS1saXN0IGE6Zm9jdXMsXG4uc19fdHlwZS1saXN0IGxpLmFjdGl2ZSBhIHtcbiAgYm9yZGVyLWJvdHRvbS1jb2xvcjogIzYwYzg0YzsgfVxuIl19 */
--- a/assets/playkit/examples/css/pages/timeline.css
+++ b/assets/playkit/examples/css/pages/timeline.css
--- a/assets/playkit/examples/css/theme-customizer.css
+++ b/assets/playkit/examples/css/theme-customizer.css
--- a/assets/playkit/examples/js/apps/calendar.js
+++ b/assets/playkit/examples/js/apps/calendar.js
@ -0,0 +1,125 @@
+function($){ "use strict";
+	$('.external-event').each(function(){
+		$(this).data('event', {
+			title: $.trim($(this).text()),
+			className: [$(this).data('class')]
+		});
+	});
+
+	$('.external-event').draggable({
+		revert: true,
+		revertDuration: 0
+	});
+
+	var cal = $('#fullcalendar').fullCalendar({
+		theme: true,
+		editable: true,
+		droppable: true,
+		defaultDate: '2016-05-15',
+		header: false,
+		buttonText: {
+			prev: '',
+			next: ''
+		},
+		events: [
+			{
+				"category": "warning",
+				"title": "My First Event",
+				"start": "2016-05-05",
+				"end": "2016-05-8",
+				"className": ["bg-warning"]
+			},
+			{
+				"category": "success",
+				"title": "Three Days Event",
+				"start": "2016-05-11",
+				"className": ["bg-success"]
+			},
+			{
+				"category": "warning",
+				"title": "Imporatnt Event",
+				"start": "2016-05-13",
+				"end": "2016-05-15",
+				"className": ["bg-danger"]
+			},
+			{
+				"category": "primary",
+				"title": "Four Days Event",
+				"start": "2016-05-22",
+				"end": "2016-05-25",
+				"className": ["bg-primary"]
+			}
+		],
+		drop: function(date) {
+			if ($('#drop-remove').is(':checked')) {
+				$(this).remove();
+			}
+		},
+		dayClick: function(date, jsEvent, view) {
+			var modal = $('#new_event_modal');
+			modal.modal('show');
+			modal.find('#event_start').val(date.format());
+		}
+	});
+
+	$.fn.windowCheck = function() {
+		var ww = $(window).width();
+		if(ww > 768) {
+			cal.fullCalendar('changeView', 'month');
+		} else if(ww < 768 && ww > 540) {
+			cal.fullCalendar('changeView', 'basicWeek');
+		} else {
+			cal.fullCalendar('changeView', 'basicDay');
+		}
+	};
+
+	$(window).on('resize', function(e){
+		$().windowCheck();
+	});
+
+	$('.fc-prev-button').append('<i class="fa fa-chevron-left"><i>');
+	$('.fc-next-button').append('<i class="fa fa-chevron-right"><i>');
+
+	// add new event category
+	$('#new_event_cat_form').on('submit', function(e){
+		e.preventDefault();
+
+		var name = $(this).find('#category_name').val();
+		var color = $(this).find('#category_color').val();
+		var category = $('<div class="external-event"></div>');
+
+		category.text(name);
+		category.addClass(color);
+		category.data('event', {
+			title: name,
+			className: [color]
+		});
+
+		category.draggable({
+			revert: true,
+			revertDuration: 0
+		});
+
+		$('#external-events').append(category);
+
+ 		$('#new_event_cat_modal').modal('hide');
+	});
+
+	// add new event
+	$('#new_event_form').on('submit', function(e){
+		e.preventDefault();
+
+		var title = $(this).find('#event_title').val();
+		var category = $(this).find('#event_category').val();
+		var start = $(this).find('#event_start').val();
+
+		cal.fullCalendar('addEventSource', [
+			{
+				title: title,
+				start: start,
+				className: [category]
+			}
+		])
+		$('#new_event_modal').modal('hide');
+	});
+}(jQuery);
--- a/assets/playkit/examples/js/apps/projects.js
+++ b/assets/playkit/examples/js/apps/projects.js
@ -0,0 +1,17 @@
+!function() { "use strict";
+
+	// Picks task Due date
+	$('input[name="task_due_date"]').daterangepicker({
+		singleDatePicker: true,
+		showDropdowns: true,
+		autoUpdateInput: false
+	});
+
+	$('input[name="task_due_date"]').on('apply.daterangepicker', function(ev, picker) {
+		$(this).val(picker.startDate.format('MM/DD/YYYY'));
+	});
+
+	$('input[name="task_due_date"]').on('cancel.daterangepicker', function(ev, picker) {
+		$(this).val('');
+	});
+}();
--- a/assets/playkit/examples/js/dashboards/dashboard.v1.js
+++ b/assets/playkit/examples/js/dashboards/dashboard.v1.js
@ -0,0 +1,163 @@
+$(function() {
+  !function() {
+    if ($('#world-map').length) {  
+      $('#world-map').vectorMap({
+        map: 'world_mill',
+        backgroundColor: '#ffffff',
+        regionsSelectable: true,
+        regionStyle: {
+        initial: { fill: '#39527b', 'fill-opacity': .6, stroke: 'none', 'stroke-width': 0, 'stroke-opacity': 1 },
+          hover: { 'fill-opacity': 0.8, cursor: 'pointer' },
+          selected: { fill: '#2980b9' },
+        },
+        markerStyle: {
+          initial: { fill: '#f1c40f', 'fill-opacity': 1, stroke: '#f1c40f', 'stroke-width': 10, 'stroke-opacity': .5 },
+          hover: { 'fill-opacity': 1, stroke: '#f1c40f', 'stroke-width': 10, 'stroke-opacity': 1 }
+        },
+        markers: [
+          {latLng: [41.90, 12.45], name: 'Vatican City'},
+          {latLng: [37.4200756, -122.0727955], name: 'Mountain View'},
+          {latLng: [30.0444196, 31.2357116], name: 'Ciro City'},
+          {latLng: [25.697717409104378, 32.6398587481324], name: 'Luxor City'},
+          {latLng: [35.71591543556279, 139.73647358577884], name: 'Tokyo'},
+          {latLng: [40.432109135597095, -3.6912417157348276], name: 'Madrid'},
+          {latLng: [645.9938550249877, -40.7213303307281], name: 'New York'},
+          {latLng: [-23.501280327970314, -46.65224788028561], name: 'Sao Paulo'}
+        ]
+      });
+    }
+  }(),
+  function() {
+    var uploads = [[0, 6], [1, 4.5], [2, 6], [3, 5], [4, 6.5], [5, 5], [6, 6],[7, 7], [8, 6], [9, 5], [10, 6], [11, 7], [12, 5.5]];
+    var downloads = [[0, 5], [1, 4], [2, 5], [3, 4.5], [4, 5.5], [5, 4], [6, 5],[7, 6], [8, 5], [9, 4], [10, 5], [11, 6], [12, 6]];
+    $.plot($('#dash1-flotchart-1'),
+      [
+        {
+          data: uploads,
+          label: 'Uploads'
+        }, {
+          data: downloads,
+          label: 'Downloads'
+        }
+      ], {
+      series: {
+        lines: {
+          show: true,
+          zero: true,
+          fill: true,
+          fillColor: {
+            colors: [{ opacity: 0 }, { opacity: .2 }]
+          }
+        },
+        points: { show: !0, radius: 4 },
+        highlightColor: $.colors.warning
+      },
+      colors: ['#71ce60', '#415e8c'],
+      grid: {
+        show: !0,
+        hoverable: !0,
+        borderWidth: 0,
+        margin: { left: 0, right: 0, bottom: 0, top: 0 }
+      },
+      xaxis: { show: !1 },
+      yaxis: { show: !1 },
+      legend : {
+        position : "nw",
+        margin : [10, -90],
+        labelFormatter: function(label, series) {
+          return "<div class='ml-1' style='color: "+series.color+";'>"+ label +"</div>";
+        }
+      },
+      tooltip: { 
+        show: !0,
+        content: '%s',
+        cssClass: 'flotTip-with-arrow',
+        defaultTheme: !1,
+        shifts: { x: -45, y: -60 }
+      }
+    });
+  }(),
+  function() {
+    var data = [ ['SUN', 120], ['MON', 95], ['TUE', 90], ['WED', 74], ['THU', 80], ['FRI', 110], ['SAT', 88] ];
+    var series = [
+      {
+        data: data,
+        lines: { show: true, fill: 1, fillColor: 'rgba(243, 247, 249, .4)', lineWidth: 2 },
+        points: { show: true },
+        color: $.colors.primary
+      }
+    ];
+    $.plot($("#dash1-flotchart-2"), series, {
+      xaxis: { mode: 'categories' },
+      yaxis: { min: 0, max: 120, tickSize: 20 },
+      grid: { 
+        hoverable: true,
+        borderWidth: 0,
+        color: $.colors.primary
+      },
+      tooltip: {
+        show: !0,
+        content: '%x : %y'
+      }
+    });
+  }(),
+  function() {
+    var data = [], labels = ['A', 'B', 'C', 'D', 'E', 'F'];
+    for (var i = 0; i < labels.length; i++) {
+      var val = parseInt(Math.random() * 20);
+      if (val < 6) val = 6; else if (val > 20) val = 20;
+      data.push([labels[i], val]);
+    }
+    $.plot($('#dash1-flotchart-3'), [ data ], {
+      series: {
+        bars: {
+          show: !0,
+          barWidth: .12,
+          align: 'center',
+          fillColor: $.colors.success
+        },
+        highlightColor: $.colors.primary
+      },
+      grid: { 
+        show: !0,
+        borderWidth: 0,
+        hoverable: !0,
+        labelMargin: 24,
+        color: 'rgba(0,0,0,0)'
+      },
+      xaxis: { show: !0, mode: 'categories' },
+      yaxis: {tickSize: 4},
+      colors: [$.colors.success],
+      tooltip: {
+        show: !0,
+        cssClass: 'flotTip-with-arrow',
+        content: '%y',
+        shifts: {x: -25, y: -50}
+      }
+    });
+  }(),
+  function () {
+    $('.dash1-tasks-peitycharts').peity('pie', {
+      fill: [$.colors.success, $.colors.primary],
+      width: 20,
+      height: 20
+    });
+
+    $('.dash1-peity-chart').peity('line', {
+      delimiter: ",",
+      fill: false,
+      height: 16,
+      max: null,
+      min: 0,
+      strokeWidth: 3,
+      width: 40
+    });
+
+    $('#dash1-easypiechart-1').easyPieChart({
+      barColor: $.colors.success,
+      scaleLength: false,
+      trackColor: '#f7f7f7',
+      size: 80
+    });
+  }();
+});
--- a/assets/playkit/examples/js/demos/charts.chartist.js
+++ b/assets/playkit/examples/js/demos/charts.chartist.js
@ -0,0 +1,572 @@
+$(function() {
+  typeof Chartist != 'undefined' && (
+    function() {
+      new Chartist.Line('#chartist-line-1', {
+        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
+        series: [
+          [12, 9, 7, 8, 5],
+          [2, 1, 3.5, 7, 3],
+          [1, 3, 4, 5, 6]
+        ]
+      }, {
+        fullWidth: true,
+        chartPadding: {
+          right: 40
+        }
+      });
+    }(),
+
+    function() {
+      var chart = new Chartist.Line('#chartist-line-2', {
+        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+        series: [
+          [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
+          [4,  5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
+          [5,  3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
+          [3,  4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
+        ]
+      }, {
+        low: 0
+      });
+
+      // Let's put a sequence number aside so we can use it in the event callbacks
+      var seq = 0,
+        delays = 80,
+        durations = 500;
+
+      // Once the chart is fully created we reset the sequence
+      chart.on('created', function() {
+        seq = 0;
+      });
+
+      // On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
+      chart.on('draw', function(data) {
+        seq++;
+
+        if(data.type === 'line') {
+          // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
+          data.element.animate({
+            opacity: {
+              // The delay when we like to start the animation
+              begin: seq * delays + 1000,
+              // Duration of the animation
+              dur: durations,
+              // The value where the animation should start
+              from: 0,
+              // The value where it should end
+              to: 1
+            }
+          });
+        } else if(data.type === 'label' && data.axis === 'x') {
+          data.element.animate({
+            y: {
+              begin: seq * delays,
+              dur: durations,
+              from: data.y + 100,
+              to: data.y,
+              // We can specify an easing function from Chartist.Svg.Easing
+              easing: 'easeOutQuart'
+            }
+          });
+        } else if(data.type === 'label' && data.axis === 'y') {
+          data.element.animate({
+            x: {
+              begin: seq * delays,
+              dur: durations,
+              from: data.x - 100,
+              to: data.x,
+              easing: 'easeOutQuart'
+            }
+          });
+        } else if(data.type === 'point') {
+          data.element.animate({
+            x1: {
+              begin: seq * delays,
+              dur: durations,
+              from: data.x - 10,
+              to: data.x,
+              easing: 'easeOutQuart'
+            },
+            x2: {
+              begin: seq * delays,
+              dur: durations,
+              from: data.x - 10,
+              to: data.x,
+              easing: 'easeOutQuart'
+            },
+            opacity: {
+              begin: seq * delays,
+              dur: durations,
+              from: 0,
+              to: 1,
+              easing: 'easeOutQuart'
+            }
+          });
+        } else if(data.type === 'grid') {
+          // Using data.axis we get x or y which we can use to construct our animation definition objects
+          var pos1Animation = {
+            begin: seq * delays,
+            dur: durations,
+            from: data[data.axis.units.pos + '1'] - 30,
+            to: data[data.axis.units.pos + '1'],
+            easing: 'easeOutQuart'
+          };
+
+          var pos2Animation = {
+            begin: seq * delays,
+            dur: durations,
+            from: data[data.axis.units.pos + '2'] - 100,
+            to: data[data.axis.units.pos + '2'],
+            easing: 'easeOutQuart'
+          };
+
+          var animations = {};
+          animations[data.axis.units.pos + '1'] = pos1Animation;
+          animations[data.axis.units.pos + '2'] = pos2Animation;
+          animations['opacity'] = {
+            begin: seq * delays,
+            dur: durations,
+            from: 0,
+            to: 1,
+            easing: 'easeOutQuart'
+          };
+
+          data.element.animate(animations);
+        }
+      });
+
+      // For the sake of the example we update the chart every time it's created with a delay of 10 seconds
+      chart.on('created', function() {
+        if(window.__exampleAnimateTimeout) {
+          clearTimeout(window.__exampleAnimateTimeout);
+          window.__exampleAnimateTimeout = null;
+        }
+        window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 12000);
+      });
+    }(),
+
+    function() {
+      var times = function(n) {
+        return Array.apply(null, new Array(n));
+      };
+
+      var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
+        data.labels.push(index + 1);
+        data.series.forEach(function(series) {
+          series.push(Math.random() * 100)
+        });
+
+        return data;
+      }, {
+        labels: [],
+        series: times(4).map(function() { return new Array() })
+      });
+
+      var options = {
+        showLine: false,
+        axisX: {
+          labelInterpolationFnc: function(value, index) {
+            return index % 13 === 0 ? 'W' + value : null;
+          }
+        }
+      };
+
+      var responsiveOptions = [
+        ['screen and (min-width: 640px)', {
+          axisX: {
+            labelInterpolationFnc: function(value, index) {
+              return index % 4 === 0 ? 'W' + value : null;
+            }
+          }
+        }]
+      ];
+
+      new Chartist.Line('#chartist-line-3', data, options, responsiveOptions);
+    }(),
+
+    function() {
+      var chart = new Chartist.Line('#chartist-line-4', {
+        labels: [1, 2, 3, 4, 5],
+        series: [
+          [12, 9, 7, 8, 5]
+        ]
+      });
+
+      // Listening for draw events that get emitted by the Chartist chart
+      chart.on('draw', function(data) {
+        // If the draw event was triggered from drawing a point on the line chart
+        if(data.type === 'point') {
+          // We are creating a new path SVG element that draws a triangle around the point coordinates
+          var triangle = new Chartist.Svg('path', {
+            d: ['M',
+              data.x,
+              data.y - 15,
+              'L',
+              data.x - 15,
+              data.y + 8,
+              'L',
+              data.x + 15,
+              data.y + 8,
+              'z'].join(' '),
+            style: 'fill-opacity: 1'
+          }, 'ct-area');
+
+          // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
+          data.element.replace(triangle);
+        }
+      });
+    }(),
+
+
+    // Area Charts
+    function() {
+      new Chartist.Line('#chartist-area-1', {
+        labels: [1, 2, 3, 4, 5, 6, 7, 8],
+        series: [
+          [5, 9, 7, 8, 5, 3, 5, 4]
+        ]
+      }, {
+        low: 0,
+        showArea: true
+      });
+    }(),
+
+    function() {
+      var chart = new Chartist.Line('#chartist-area-2', {
+        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        series: [
+          [1, 5, 2, 5, 4, 3],
+          [2, 3, 4, 8, 1, 2],
+          [5, 4, 3, 2, 1, 0.5]
+        ]
+      }, {
+        low: 0,
+        showArea: true,
+        showPoint: false,
+        fullWidth: true
+      });
+
+      chart.on('draw', function(data) {
+        if(data.type === 'line' || data.type === 'area') {
+          data.element.animate({
+            d: {
+              begin: 2000 * data.index,
+              dur: 2000,
+              from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
+              to: data.path.clone().stringify(),
+              easing: Chartist.Svg.Easing.easeOutQuint
+            }
+          });
+        }
+      });
+    }(),
+
+    function() {
+      new Chartist.Line('#chartist-area-3', {
+        labels: [1, 2, 3, 4, 5, 6, 7, 8],
+        series: [
+          [1, 2, 3, 1, -2, 0, 1, 0],
+          [-2, -1, -2, -1, -2.5, -1, -2, -1],
+          [0, 0, 0, 1, 2, 2.5, 2, 1],
+          [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
+        ]
+      }, {
+        high: 3,
+        low: -3,
+        showArea: true,
+        showLine: false,
+        showPoint: false,
+        fullWidth: true,
+        axisX: {
+          showLabel: false,
+          showGrid: false
+        }
+      });
+    }(),
+
+    function() {
+      var chart = new Chartist.Line('#chartist-area-4', {
+        labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
+        // Naming the series with the series object array notation
+        series: [{
+          name: 'series-1',
+          data: [5, 2, -4, 2, 0, -2, 5, -3]
+        }, {
+          name: 'series-2',
+          data: [4, 3, 5, 3, 1, 3, 6, 4]
+        }, {
+          name: 'series-3',
+          data: [2, 4, 3, 1, 4, 5, 3, 2]
+        }]
+      }, {
+        fullWidth: true,
+        // Within the series options you can use the series names
+        // to specify configuration that will only be used for the
+        // specific series.
+        series: {
+          'series-1': {
+            lineSmooth: Chartist.Interpolation.step()
+          },
+          'series-2': {
+            lineSmooth: Chartist.Interpolation.simple(),
+            showArea: true
+          },
+          'series-3': {
+            showPoint: false
+          }
+        }
+      }, [
+        // You can even use responsive configuration overrides to
+        // customize your series configuration even further!
+        ['screen and (max-width: 320px)', {
+          series: {
+            'series-1': {
+              lineSmooth: Chartist.Interpolation.none()
+            },
+            'series-2': {
+              lineSmooth: Chartist.Interpolation.none(),
+              showArea: false
+            },
+            'series-3': {
+              lineSmooth: Chartist.Interpolation.none(),
+              showPoint: true
+            }
+          }
+        }]
+      ]);
+    }(),
+
+
+    // Bar Chart Examples
+    function() {
+      var data = {
+        labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
+        series: [
+          [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
+        ]
+      };
+
+      var options = {
+        high: 10,
+        low: -10,
+        axisX: {
+          labelInterpolationFnc: function(value, index) {
+            return index % 2 === 0 ? value : null;
+          }
+        }
+      };
+      new Chartist.Bar('#chartist-bar-1', data, options);
+    }(),
+
+    function() {
+      var data = {
+        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        series: [
+          [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
+          [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
+        ]
+      };
+
+      var options = {
+        seriesBarDistance: 10
+      };
+
+      var responsiveOptions = [
+        ['screen and (max-width: 640px)', {
+          seriesBarDistance: 5,
+          axisX: {
+            labelInterpolationFnc: function (value) {
+              return value[0];
+            }
+          }
+        }]
+      ];
+      new Chartist.Bar('#chartist-bar-2', data, options, responsiveOptions);
+    }(),
+
+    function() {
+      new Chartist.Bar('#chartist-bar-3', {
+        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+        series: [
+          [800000, 1200000, 1400000, 1300000],
+          [200000, 400000, 500000, 300000],
+          [100000, 200000, 400000, 600000]
+        ]
+      }, {
+        stackBars: true,
+        axisY: {
+          labelInterpolationFnc: function(value) {
+            return (value / 1000) + 'k';
+          }
+        }
+      }).on('draw', function(data) {
+        if(data.type === 'bar') {
+          data.element.attr({
+            style: 'stroke-width: 30px'
+          });
+        }
+      });
+    }(),
+
+    function() {
+      new Chartist.Bar('#chartist-bar-4', {
+        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+        series: [
+          [5, 4, 3, 7, 5, 10, 3],
+          [3, 2, 9, 5, 4, 6, 4]
+        ]
+      }, {
+        seriesBarDistance: 10,
+        reverseData: true,
+        horizontalBars: true,
+        axisY: {
+          offset: 70
+        }
+      });
+    }(),
+
+    function() {
+      new Chartist.Bar('#chartist-bar-5', {
+        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        series: [
+          [5, 4, 3, 7, 5, 10, 3],
+          [3, 2, 9, 5, 4, 6, 4]
+        ]
+      }, {
+        axisX: {
+          // On the x-axis start means top and end means bottom
+          position: 'start'
+        },
+        axisY: {
+          // On the y-axis start means left and end means right
+          position: 'end'
+        }
+      });
+    }(),
+
+    function() {
+      new Chartist.Bar('#chartist-bar-6', {
+        labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
+        series: [20, 60, 120, 200, 180, 20, 10]
+      }, {
+        distributeSeries: true
+      });
+    }(),
+
+
+    // Pie Chart Examples
+    function() {
+      var data = {
+        series: [5, 3, 4]
+      };
+
+      var sum = function(a, b) { return a + b };
+
+      new Chartist.Pie('#chartist-pie-1', data, {
+        labelInterpolationFnc: function(value) {
+          return Math.round(value / data.series.reduce(sum) * 100) + '%';
+        }
+      });
+    }(),
+
+    function() {
+      var data = {
+        labels: ['Bananas', 'Apples', 'Grapes'],
+        series: [20, 15, 40]
+      };
+
+      var options = {
+        labelInterpolationFnc: function(value) {
+          return value[0]
+        }
+      };
+
+      var responsiveOptions = [
+        ['screen and (min-width: 640px)', {
+          chartPadding: 30,
+          labelOffset: 100,
+          labelDirection: 'explode',
+          labelInterpolationFnc: function(value) {
+            return value;
+          }
+        }],
+        ['screen and (min-width: 1024px)', {
+          labelOffset: 80,
+          chartPadding: 20
+        }]
+      ];
+
+      new Chartist.Pie('#chartist-pie-2', data, options, responsiveOptions);
+    }(),
+
+    function() {
+      new Chartist.Pie('#chartist-pie-3', {
+        series: [20, 10, 30, 40]
+      }, {
+        donut: true,
+        donutWidth: 60,
+        startAngle: 270,
+        total: 200,
+        showLabel: false
+      });
+    }(),
+
+    function() {
+      var chart = new Chartist.Pie('#chartist-pie-4', {
+        series: [10, 20, 50, 20, 5, 50, 15],
+        labels: [1, 2, 3, 4, 5, 6, 7]
+      }, {
+        donut: true,
+        showLabel: false
+      });
+
+      chart.on('draw', function(data) {
+        if(data.type === 'slice') {
+          // Get the total path length in order to use for dash array animation
+          var pathLength = data.element._node.getTotalLength();
+
+          // Set a dasharray that matches the path length as prerequisite to animate dashoffset
+          data.element.attr({
+            'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
+          });
+
+          // Create animation definition while also assigning an ID to the animation for later sync usage
+          var animationDefinition = {
+            'stroke-dashoffset': {
+              id: 'anim' + data.index,
+              dur: 1000,
+              from: -pathLength + 'px',
+              to:  '0px',
+              easing: Chartist.Svg.Easing.easeOutQuint,
+              // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
+              fill: 'freeze'
+            }
+          };
+
+          // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
+          if(data.index !== 0) {
+            animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
+          }
+
+          // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
+          data.element.attr({
+            'stroke-dashoffset': -pathLength + 'px'
+          });
+
+          // We can't use guided mode as the animations need to rely on setting begin manually
+          // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
+          data.element.animate(animationDefinition, false);
+        }
+      });
+
+      // For the sake of the example we update the chart every time it's created with a delay of 8 seconds
+      chart.on('created', function() {
+        if(window.__anim21278907124) {
+          clearTimeout(window.__anim21278907124);
+          window.__anim21278907124 = null;
+        }
+        window.__anim21278907124 = setTimeout(chart.update.bind(chart), 10000);
+      });
+    }()
+  );
+});
--- a/assets/playkit/examples/js/demos/charts.chartjs.js
+++ b/assets/playkit/examples/js/demos/charts.chartjs.js
@ -0,0 +1,478 @@
+$(function() {
+  "use strict";
+
+  var chartColors = {
+    red: 'rgb(255, 99, 132)',
+    orange: 'rgb(255, 159, 64)',
+    yellow: 'rgb(255, 205, 86)',
+    green: 'rgb(75, 192, 192)',
+    blue: 'rgb(54, 162, 235)',
+    purple: 'rgb(153, 102, 255)',
+    grey: 'rgb(231,233,237)'
+  };
+
+  typeof Chart != 'undefined' && (
+    function() {
+      var randomScalingFactor = function() {
+        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+      };
+
+      var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+      var config = {
+        type: 'line',
+        data: {
+          labels: ["January", "February", "March", "April", "May", "June", "July"],
+          datasets: [{
+            label: "My First dataset",
+            backgroundColor: chartColors.red,
+            borderColor: chartColors.red,
+            data: [
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor()
+            ],
+            fill: false,
+          }, {
+            label: "My Second dataset",
+            fill: false,
+            backgroundColor: chartColors.blue,
+            borderColor: chartColors.blue,
+            data: [
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor()
+            ],
+          }]
+        },
+        options: {
+          responsive: true,
+          title:{
+            display:true,
+            text:'Chart.js Line Chart'
+          },
+          tooltips: {
+            mode: 'index',
+            intersect: false,
+          },
+          hover: {
+            mode: 'nearest',
+            intersect: true
+          },
+          scales: {
+            xAxes: [{
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: 'Month'
+              }
+            }],
+            yAxes: [{
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: 'Value'
+              }
+            }]
+          }
+        }
+      };
+
+      var ctx = document.getElementById("chartjs-line-1").getContext("2d");
+      var myLine = new Chart(ctx, config);
+
+      document.getElementById('randomizeData').addEventListener('click', function() {
+        config.data.datasets.forEach(function(dataset) {
+          dataset.data = dataset.data.map(function() {
+            return randomScalingFactor();
+          });
+        });
+
+        myLine.update();
+      });
+
+      var colorNames = Object.keys(chartColors);
+      document.getElementById('addDataset').addEventListener('click', function() {
+        var colorName = colorNames[config.data.datasets.length % colorNames.length];
+        var newColor = chartColors[colorName];
+        var newDataset = {
+          label: 'Dataset ' + config.data.datasets.length,
+          backgroundColor: newColor,
+          borderColor: newColor,
+          data: [],
+          fill: false
+        };
+
+        for (var index = 0; index < config.data.labels.length; ++index) {
+          newDataset.data.push(randomScalingFactor());
+        }
+
+        config.data.datasets.push(newDataset);
+        myLine.update();
+      });
+
+      document.getElementById('addData').addEventListener('click', function() {
+        if (config.data.datasets.length > 0) {
+          var month = MONTHS[config.data.labels.length % MONTHS.length];
+          config.data.labels.push(month);
+
+          config.data.datasets.forEach(function(dataset) {
+              dataset.data.push(randomScalingFactor());
+          });
+
+          myLine.update();
+        }
+      });
+
+      document.getElementById('removeDataset').addEventListener('click', function() {
+        config.data.datasets.splice(0, 1);
+        myLine.update();
+      });
+
+      document.getElementById('removeData').addEventListener('click', function() {
+        config.data.labels.splice(-1, 1); // remove the label first
+
+        config.data.datets.forEach(function(dataset, datasetIndex) {
+          dataset.data.pop();
+        });
+
+        myLine.update();
+      });
+    }(),
+
+    function() {
+      var randomScalingFactor = function() {
+        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+      };
+
+      var color = Chart.helpers.color;
+      var barChartData = {
+        labels: ["January", "February", "March", "April", "May", "June", "July"],
+        datasets: [{
+          label: 'Dataset 1',
+          backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
+          borderColor: chartColors.red,
+          borderWidth: 1,
+          data: [
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor()
+          ]
+        }, {
+          label: 'Dataset 2',
+          backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
+          borderColor: chartColors.blue,
+          borderWidth: 1,
+          data: [
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor()
+          ]
+        }]
+      };
+
+      var ctx = document.getElementById("chartjs-bar-1").getContext("2d");
+      window.myBar = new Chart(ctx, {
+        type: 'bar',
+        data: barChartData,
+        options: {
+          responsive: true,
+          legend: {
+            position: 'top',
+          },
+          title: {
+            display: true,
+            text: 'Chart.js Bar Chart'
+          }
+        }
+      });
+    }(),
+
+    function() {
+      var randomScalingFactor = function() {
+        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+      };
+
+      var color = Chart.helpers.color;
+      var horizontalBarChartData = {
+        labels: ["January", "February", "March", "April", "May", "June", "July"],
+        datasets: [{
+          label: 'Dataset 1',
+          backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
+          borderColor: chartColors.red,
+          borderWidth: 1,
+          data: [
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor()
+          ]
+        }, {
+          label: 'Dataset 2',
+          backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
+          borderColor: chartColors.blue,
+          data: [
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor(), 
+            randomScalingFactor()
+          ]
+        }]
+      };
+
+      var ctx = document.getElementById("chartjs-bar-2").getContext("2d");
+      window.myHorizontalBar = new Chart(ctx, {
+        type: 'horizontalBar',
+        data: horizontalBarChartData,
+        options: {
+          elements: {
+            rectangle: {
+              borderWidth: 2,
+            }
+          },
+          responsive: true,
+          legend: {
+            position: 'top',
+          },
+          title: {
+            display: true,
+            text: 'Chart.js Horizontal Bar Chart'
+          }
+        }
+      });
+    }(),
+
+    function() {
+      var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+      };
+
+      var config = {
+        type: 'pie',
+        data: {
+          datasets: [{
+            data: [
+              randomScalingFactor(),
+              randomScalingFactor(),
+              randomScalingFactor(),
+              randomScalingFactor(),
+              randomScalingFactor(),
+            ],
+            backgroundColor: [
+              chartColors.red,
+              chartColors.orange,
+              chartColors.yellow,
+              chartColors.green,
+              chartColors.blue,
+            ],
+            label: 'Dataset 1'
+          }],
+          labels: [
+            "Red",
+            "Orange",
+            "Yellow",
+            "Green",
+            "Blue"
+          ]
+        },
+        options: {
+          responsive: true
+        }
+      };
+
+      var ctx = document.getElementById("chartjs-pie").getContext("2d");
+      new Chart(ctx, config);
+    }(),
+
+    function() {
+      var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+      };
+
+      var config = {
+        type: 'doughnut',
+        data: {
+          datasets: [{
+            data: [
+              randomScalingFactor(),
+              randomScalingFactor(),
+              randomScalingFactor(),
+              randomScalingFactor(),
+              randomScalingFactor(),
+            ],
+            backgroundColor: [
+              chartColors.red,
+              chartColors.orange,
+              chartColors.yellow,
+              chartColors.green,
+              chartColors.blue,
+            ],
+            label: 'Dataset 1'
+          }],
+          labels: [
+            "Red",
+            "Orange",
+            "Yellow",
+            "Green",
+            "Blue"
+          ]
+        },
+        options: {
+          responsive: true,
+          legend: {
+            position: 'top',
+          },
+          title: {
+            display: true,
+            text: 'Chart.js Doughnut Chart'
+          },
+          animation: {
+            animateScale: true,
+            animateRotate: true
+          }
+        }
+      };
+
+      var ctx = document.getElementById("chartjs-donut").getContext("2d");
+      new Chart(ctx, config);
+    }(),
+    
+    function() {
+      var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+      };
+
+      var color = Chart.helpers.color;
+      var config = {
+        type: 'radar',
+        data: {
+          labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
+          datasets: [{
+            label: "My First dataset",
+            backgroundColor: color(chartColors.red).alpha(0.2).rgbString(),
+            borderColor: chartColors.red,
+            pointBackgroundColor: chartColors.red,
+            data: [
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor()
+            ]
+          }, {
+            label: "My Second dataset",
+            backgroundColor: color(chartColors.blue).alpha(0.2).rgbString(),
+            borderColor: chartColors.blue,
+            pointBackgroundColor: chartColors.blue,
+            data: [
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor(), 
+              randomScalingFactor()
+            ]
+          },]
+        },
+        options: {
+          legend: {
+            position: 'top',
+          },
+          title: {
+            display: true,
+            text: 'Chart.js Radar Chart'
+          },
+          scale: {
+            ticks: {
+            beginAtZero: true
+            }
+          }
+        }
+      };
+      
+      new Chart(document.getElementById("chartjs-radar"), config);
+    }(),
+
+    function() {
+      var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+      };
+      var color = Chart.helpers.color;
+      var config = {
+        data: {
+          datasets: [{
+            data: [
+              randomScalingFactor(),
+              randomScalingFactor(),
+              randomScalingFactor(),
+              randomScalingFactor(),
+              randomScalingFactor(),
+            ],
+            backgroundColor: [
+              color(chartColors.red).alpha(0.5).rgbString(),
+              color(chartColors.orange).alpha(0.5).rgbString(),
+              color(chartColors.yellow).alpha(0.5).rgbString(),
+              color(chartColors.green).alpha(0.5).rgbString(),
+              color(chartColors.blue).alpha(0.5).rgbString(),
+            ],
+            label: 'My dataset' // for legend
+          }],
+          labels: [
+            "Red",
+            "Orange",
+            "Yellow",
+            "Green",
+            "Blue"
+          ]
+        },
+        options: {
+          responsive: true,
+          legend: {
+            position: 'right',
+          },
+          title: {
+            display: true,
+            text: 'Chart.js Polar Area Chart'
+          },
+          scale: {
+            ticks: {
+            beginAtZero: true
+            },
+            reverse: false
+          },
+          animation: {
+            animateRotate: false,
+            animateScale: true
+          }
+        }
+      };
+
+      var ctx = document.getElementById("chartjs-polar-area");
+      Chart.PolarArea(ctx, config);
+    }()
+  );
+});
--- a/assets/playkit/examples/js/demos/charts.echarts.js
+++ b/assets/playkit/examples/js/demos/charts.echarts.js
--- a/assets/playkit/examples/js/demos/charts.flot.js
+++ b/assets/playkit/examples/js/demos/charts.flot.js
@ -0,0 +1,297 @@
+$(function() {
+  var colors = {
+    primary   : "#9FA8DA",
+    success   : "#A5D6A7",
+    info      : "#80DEEA",
+    warning   : "#FFE082",
+    danger    : "#EF9A9A",
+    faded     : '#EEEEEE'
+  };
+
+
+  /*
+  * Realtime Chart Example
+  */
+  !function() {
+    var data = [],
+      totalPoints = 300;
+    function getRandomData() {
+      if (data.length > 0)
+        data = data.slice(1);
+      // Do a random walk
+
+      while (data.length < totalPoints) {
+        var prev = data.length > 0 ? data[data.length - 1] : 50,
+          y = prev + Math.random() * 10 - 5;
+
+        if (y < 0) {
+          y = 0;
+        } else if (y > 100) {
+          y = 100;
+        }
+
+        data.push(y);
+      }
+
+      var res = [];
+      for (var i = 0; i < data.length; ++i) {
+        res.push([i, data[i]])
+      }
+      return res;
+    }
+
+    var plot = $.plot("#flot-realtime", [ getRandomData() ], {
+      series: {
+        shadowSize: 0,
+        lines: {
+          lineWidth: 0,
+          fill: true,
+          fillColor: colors.faded
+        }
+      },
+      yaxis: {
+        min: 0,
+        max: 100
+      },
+      xaxis: {
+        show: false
+      },
+      grid: { show: true, borderWidth: 0, color: colors.faded }
+    });
+
+    !function update() {
+      plot.setData([getRandomData()]);
+      plot.draw();
+      setTimeout(update, 30);
+    }();
+  }(),
+
+
+  /*
+  * Line Chart Examples
+  */
+  function() {
+    var d1 = [], d2 = [];
+    for (var i = 0; i < 14; i += 0.5) {
+      d1.push([i, Math.sin(i)]);
+    }
+
+    for (var i = 0; i < 14; i += 0.5) {
+      d2.push([i, Math.sin(i)]);
+    }
+
+    $.plot("#flot-line-basic", [d1], {
+      series: {
+        lines:{ show: true, fill: false }
+      },
+      colors: [colors.faded],
+      grid: { show: true, borderWidth: 0, color: colors.faded },
+    });
+
+    $.plot("#flot-line-area",
+      [{
+          data: d1,
+          lines: {
+            lineWidth: 0,
+            show: true,
+            fill: true,
+            fillColor: colors.faded
+          }
+        }, {
+          data: d2,
+          lines: {
+            lineWidth: 0,
+            show: true,
+            fill: true,
+            fillColor: colors.faded
+          },
+        }
+      ], {
+      series: {
+        
+      },
+      grid: { show: true, borderWidth: 0, color: colors.faded },
+    });
+  }(),
+
+
+  /*
+  * Pie Chart examples
+  */
+  function() {
+    function labelFormatter(label, series) {
+      return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
+    }
+
+    var data = [], series = 3;
+    for (var i = 0; i < series; i++) {
+      data[i] = {
+        label: "Series" + (i + 1),
+        data: Math.floor(Math.random() * 100) + 1
+      }
+    }
+
+    // Pie 1 - Default pie chart
+    $.plot($('#flot-pie-1'), data, {
+      series: { pie: { show: true } },
+      colors: [colors.primary, colors.faded, colors.warning]
+    });
+
+    // Pie 2 - Combined Slice
+    $.plot($('#flot-pie-2'), data, {
+      series: {
+        pie: { 
+          show: true,
+          combine: {
+            color: "#999",
+            threshold: 0.05
+          }
+        }
+      },
+      legend: { show: false },
+      colors: [colors.primary, colors.faded, colors.warning]
+    });
+
+    // Pie 3 - Custom Label Formatter
+    $.plot($('#flot-pie-3'), data, {
+      series: {
+        pie: { 
+          show: true,
+          radius: 1,
+          label: {
+            show: true,
+            radius: 1,
+            formatter: labelFormatter,
+            background: {
+              opacity: 0.8
+            }
+          }
+        }
+      },
+      legend: { show: false },
+      colors: [colors.primary, colors.faded, colors.warning]
+    });
+
+    // Pie 4 - Rectangular Pie
+    $.plot('#flot-pie-4', data, {
+      series: {
+        pie: { 
+          show: true,
+          radius: 500,
+          label: {
+            show: true,
+            formatter: labelFormatter,
+            threshold: 0.1
+          }
+        }
+      },
+      legend: { show: false },
+      colors: [colors.primary, colors.faded, colors.warning]
+    });
+
+    // Pie 5 - Donut Hole
+    $.plot($('#flot-pie-5'), data, {
+      series: {
+        pie: { 
+          innerRadius: 0.5,
+          show: true
+        }
+      },
+      colors: [colors.primary, colors.faded, colors.warning]
+    });
+
+    // Pie 6 - Interactivity
+    $.plot($('#flot-pie-6'), data, {
+      series: {
+        pie: { 
+          show: true
+        }
+      },
+      grid: {
+        hoverable: true,
+        clickable: true
+      },
+      colors: [colors.primary, colors.faded, colors.warning]
+    });
+  }(),
+
+
+  /*
+  * Bar Chart Examples
+  */
+  function() {
+    var d1 = [], d2 = [], d3 = [];
+    for (var i = 0; i <= 6; i += 1) {
+      d1.push([i, parseInt(Math.random() * 30)]);
+    }
+
+    for (var i = 0; i <= 6; i += 1) {
+      d2.push([i, parseInt(Math.random() * 30)]);
+    }
+
+    for (var i = 1; i <= 6; i += 1) {
+      d3.push([parseInt(Math.random() * 30), i]);
+    }
+
+    $.plot("#flot-bar-basic", [ d1 ], {
+      series: {
+        stack: false,
+        bars: {
+          show: true,
+          barWidth: 0.55,
+          lineWidth: 0
+        }
+      },
+      grid: { show: true, borderWidth: 0, color: colors.faded },
+      colors: [colors.primary]
+    });
+
+    // bar horizontal
+    $.plot("#flot-bar-horizontal", [ d3 ], {
+      series: {
+        stack: true,
+        bars: {
+          show: true,
+          barWidth: 0.55,
+          lineWidth: 0,
+          horizontal: true
+        }
+      },
+      grid: { show: true, borderWidth: 0, color: colors.faded },
+      colors: [colors.primary]
+    });
+
+    // bar Categories
+    var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9]];
+    $.plot("#flot-bar-categories", [ data ], {
+      series: {
+        bars: {
+          show: true,
+          lineWidth: 0,
+          barWidth: 0.55,
+          align: "center"
+        }
+      },
+      xaxis: {
+        mode: "categories",
+        tickLength: 0
+      },
+      grid:{ show: true, borderWidth: 0, color: colors.faded },
+      colors: [colors.warning]
+    });
+
+    // bar stacked
+    $.plot("#flot-bar-stacked", [ d1, d2 ], {
+      series: {
+        stack: false,
+        bars: {
+          show: true,
+          barWidth: 0.55,
+          lineWidth: 0
+        }
+      },
+      grid: { show: true, borderWidth: 0, color: colors.faded },
+      colors: [colors.warning, colors.danger]
+    });
+  }();
+});
--- a/assets/playkit/examples/js/demos/charts.morris.js
+++ b/assets/playkit/examples/js/demos/charts.morris.js
@ -0,0 +1,84 @@
+$(function() {
+
+  // Line Example
+  Morris.Line({
+    element: 'morris-line-1',
+    data: [
+      { y: '2006', a: 100, b: 90 },
+      { y: '2007', a: 75,  b: 65 },
+      { y: '2008', a: 50,  b: 40 },
+      { y: '2009', a: 75,  b: 65 },
+      { y: '2010', a: 50,  b: 40 },
+      { y: '2011', a: 75,  b: 65 },
+      { y: '2012', a: 100, b: 90 }
+    ],
+    xkey: 'y',
+    ykeys: ['a', 'b'],
+    labels: ['Series A', 'Series B']
+  });
+
+  // Area Example
+  Morris.Area({
+    element: 'morris-area-1',
+    data: [
+      { y: '2006', a: 100, b: 90 },
+      { y: '2007', a: 75,  b: 65 },
+      { y: '2008', a: 50,  b: 40 },
+      { y: '2009', a: 75,  b: 65 },
+      { y: '2010', a: 50,  b: 40 },
+      { y: '2011', a: 75,  b: 65 },
+      { y: '2012', a: 100, b: 90 }
+    ],
+    xkey: 'y',
+    ykeys: ['a', 'b'],
+    labels: ['Series A', 'Series B'],
+    hideHover: 'auto'
+  });
+
+  // Bar Example
+  Morris.Bar({
+    element: 'morris-bar-1',
+    data: [
+      { y: '2006', a: 100, b: 90 },
+      { y: '2007', a: 75,  b: 65 },
+      { y: '2008', a: 50,  b: 40 },
+      { y: '2009', a: 75,  b: 65 },
+      { y: '2010', a: 50,  b: 40 },
+      { y: '2011', a: 75,  b: 65 },
+      { y: '2012', a: 100, b: 90 }
+    ],
+    xkey: 'y',
+    ykeys: ['a', 'b'],
+    labels: ['Series A', 'Series B'],
+    hideHover: 'auto'
+  });
+
+  // Stacked Bar Example
+  Morris.Bar({
+    element: 'morris-bar-stacked',
+    data: [
+      { y: '2006', a: 100, b: 90 },
+      { y: '2007', a: 75,  b: 65 },
+      { y: '2008', a: 50,  b: 40 },
+      { y: '2009', a: 75,  b: 65 },
+      { y: '2010', a: 50,  b: 40 },
+      { y: '2011', a: 75,  b: 65 },
+      { y: '2012', a: 100, b: 90 }
+    ],
+    xkey: 'y',
+    stacked: !0,
+    ykeys: ['a', 'b'],
+    labels: ['Series A', 'Series B'],
+    hideHover: 'auto'
+  });
+
+  // Donut Example
+  Morris.Donut({
+    element: 'morris-donut-1',
+    data: [
+      {label: "Download Sales", value: 12},
+      {label: "In-Store Sales", value: 30},
+      {label: "Mail-Order Sales", value: 20}
+    ]
+  });
+});
--- a/assets/playkit/examples/js/demos/demos-bs-docs.js
+++ b/assets/playkit/examples/js/demos/demos-bs-docs.js
@ -0,0 +1,63 @@
+(function ($) {
+  'use strict'
+
+  $(function () {
+
+    // Tooltip and popover demos
+    $('.tooltip-demo').tooltip({
+      selector: '[data-toggle="tooltip"]',
+      container: 'body'
+    })
+
+    $('[data-toggle="popover"]').popover()
+
+    // Demos within modals
+    $('.tooltip-test').tooltip()
+    $('.popover-test').popover()
+
+    // Indeterminate checkbox example
+    $('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
+
+    // Disable empty links in docs examples
+    $('.bd-content [href="#"]').click(function (e) {
+      e.preventDefault()
+    })
+
+    // Insert copy to clipboard button before .highlight
+    $('.highlight').each(function () {
+      var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'
+      $(this).before(btnHtml)
+      $('.btn-clipboard').tooltip()
+    })
+
+    var clipboard = new Clipboard('.btn-clipboard', {
+      target: function (trigger) {
+        return trigger.parentNode.nextElementSibling
+      }
+    })
+
+    clipboard.on('success', function (e) {
+      $(e.trigger)
+        .attr('title', 'Copied!')
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle')
+
+      e.clearSelection()
+    })
+
+    clipboard.on('error', function (e) {
+      var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
+      var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
+
+      $(e.trigger)
+        .attr('title', fallbackMsg)
+        .tooltip('_fixTitle')
+        .tooltip('show')
+        .attr('title', 'Copy to clipboard')
+        .tooltip('_fixTitle')
+    })
+  })
+
+}(jQuery))
--- a/assets/playkit/examples/js/demos/demos.js
+++ b/assets/playkit/examples/js/demos/demos.js
@ -0,0 +1,11 @@
+$(function() {
+  // sticky demos page header
+  new Waypoint.Sticky({
+    element: $('.demo-header'),
+    offset: 64
+  });
+
+  $('#contents-heading').on('click', function() {
+    $('#contents-index').slideToggle(500);
+  });
+});
--- a/assets/playkit/examples/js/demos/documentation.js
+++ b/assets/playkit/examples/js/demos/documentation.js
@ -0,0 +1,3 @@
+$(function() {
+  $('#file_structure').jstree();
+});
--- a/assets/playkit/examples/js/demos/form.fileupload.js
+++ b/assets/playkit/examples/js/demos/form.fileupload.js
@ -0,0 +1,62 @@
+$(function () {
+    'use strict';
+
+    // Initialize the jQuery File Upload widget:
+    $('#fileupload').fileupload({
+        // Uncomment the following to send cross-domain cookies:
+        //xhrFields: {withCredentials: true},
+        url: '//jquery-file-upload.appspot.com/',
+        dropZone: $('#fileupload-drop-area')
+    });
+
+    // Enable iframe cross-domain access via redirect option:
+    $('#fileupload').fileupload(
+        'option',
+        'redirect',
+        window.location.href.replace(
+            /\/[^\/]*$/,
+            '/cors/result.html?%s'
+        )
+    );
+
+    if (window.location.hostname === 'blueimp.github.io') {
+        // Demo settings:
+        $('#fileupload').fileupload('option', {
+            url: '//jquery-file-upload.appspot.com/',
+            // Enable image resizing, except for Android and Opera,
+            // which actually support image resizing, but fail to
+            // send Blob objects via XHR requests:
+            disableImageResize: /Android(?!.*Chrome)|Opera/
+                .test(window.navigator.userAgent),
+            maxFileSize: 999000,
+            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
+        });
+        // Upload server status check for browsers with CORS support:
+        if ($.support.cors) {
+            $.ajax({
+                url: '//jquery-file-upload.appspot.com/',
+                type: 'HEAD'
+            }).fail(function () {
+                $('<div class="alert alert-danger"/>')
+                    .text('Upload server currently unavailable - ' +
+                            new Date())
+                    .appendTo('#fileupload');
+            });
+        }
+    } else {
+        // Load existing files:
+        $('#fileupload').addClass('fileupload-processing');
+        $.ajax({
+            // Uncomment the following to send cross-domain cookies:
+            //xhrFields: {withCredentials: true},
+            url: $('#fileupload').fileupload('option', 'url'),
+            dataType: 'json',
+            context: $('#fileupload')[0]
+        }).always(function () {
+            $(this).removeClass('fileupload-processing');
+        }).done(function (result) {
+            $(this).fileupload('option', 'done')
+                .call(this, $.Event('done'), {result: result});
+        });
+    }
+});
--- a/assets/playkit/examples/js/demos/form.validation.js
+++ b/assets/playkit/examples/js/demos/form.validation.js
@ -0,0 +1,189 @@
+$(function() { "use strict";
+
+    /*
+    * Each Example is wrapped within a self-invoking function
+    */
+
+    // #parsleyjs-example-1
+    !function() {
+      $('#parsleyjs-example-1').parsley().on('field:validated', function() {
+        var ok = $('.parsley-error').length === 0;
+        $('.alert-info').toggleClass('d-none', !ok);
+        $('.alert-warning').toggleClass('d-none', ok);
+      })
+      .on('form:submit', function() {
+        return false; // Don't submit form for this demo
+      });
+    }(),
+    // #parsleyjs-example-2
+    function() {
+      var $sections = $('.form-section');
+
+      function navigateTo(index) {
+        // Mark the current section with the class 'current'
+        $sections
+          .removeClass('current')
+          .eq(index)
+            .addClass('current');
+        // Show only the navigation buttons that make sense for the current section:
+        $('.form-navigation .previous').toggle(index > 0);
+        var atTheEnd = index >= $sections.length - 1;
+        $('.form-navigation .next').toggle(!atTheEnd);
+        $('.form-navigation [type=submit]').toggle(atTheEnd);
+      }
+
+      function curIndex() {
+        // Return the current index by looking at which section has the class 'current'
+        return $sections.index($sections.filter('.current'));
+      }
+
+      // Previous button is easy, just go back
+      $('.form-navigation .previous').click(function() {
+        navigateTo(curIndex() - 1);
+      });
+
+      // Next button goes forward iff current block validates
+      $('.form-navigation .next').click(function() {
+        if ($('#parsleyjs-example-2').parsley().validate({group: 'block-' + curIndex()}))
+          navigateTo(curIndex() + 1);
+      });
+
+      // Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
+      $sections.each(function(index, section) {
+        $(section).find(':input').attr('data-parsley-group', 'block-' + index);
+      });
+      navigateTo(0); // Start at the beginning
+    }(),
+    // #jq-validation-example-1 Example
+    !function() {
+        $("#jq-validation-example-1").validate({
+            rules: {
+                firstname: "required",
+                lastname: "required",
+                username: {
+                    required: true,
+                    minlength: 2
+                },
+                password: {
+                    required: true,
+                    minlength: 5
+                },
+                confirm_password: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password"
+                },
+                email: {
+                    required: true,
+                    email: true
+                },
+                agree: "required"
+            },
+            messages: {
+                firstname: "Please enter your firstname",
+                lastname: "Please enter your lastname",
+                username: {
+                    required: "Please enter a username",
+                    minlength: "Your username must consist of at least 2 characters"
+                },
+                password: {
+                    required: "Please provide a password",
+                    minlength: "Your password must be at least 5 characters long"
+                },
+                confirm_password: {
+                    required: "Please provide a password",
+                    minlength: "Your password must be at least 5 characters long",
+                    equalTo: "Please enter the same password as above"
+                },
+                email: "Please enter a valid email address",
+                agree: "Please accept our policy"
+            },
+            errorElement: "div",
+            errorPlacement: function (error, element) {
+                // Add the `help-block` class to the error element
+                error.addClass("form-control-feedback");
+
+                if (element.prop("type") === "checkbox") {
+                    error.insertAfter(element.parent(".checkbox"));
+                } else {
+                    error.insertAfter(element);
+                }
+            },
+            highlight: function (element, errorClass, validClass) {
+                $(element).closest(".form-group").addClass("has-danger").removeClass("has-success");
+            },
+            unhighlight: function (element, errorClass, validClass) {
+                $(element).closest(".form-group").addClass("has-success").removeClass("has-danger");
+            }
+        });
+    }(),
+    // #jq-validation-example-2 Example
+    function() {
+        $("#jq-validation-example-2").validate({
+            rules: {
+                firstname1: "required",
+                lastname1: "required",
+                username1: {
+                    required: true,
+                    minlength: 2
+                },
+                password1: {
+                    required: true,
+                    minlength: 5
+                },
+                confirm_password1: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password1"
+                },
+                email1: {
+                    required: true,
+                    email: true
+                },
+                agree1: "required"
+            },
+            messages: {
+                firstname1: "Please enter your firstname",
+                lastname1: "Please enter your lastname",
+                username1: {
+                    required: "Please enter a username",
+                    minlength: "Your username must consist of at least 2 characters"
+                },
+                password1: {
+                    required: "Please provide a password",
+                    minlength: "Your password must be at least 5 characters long"
+                },
+                confirm_password1: {
+                    required: "Please provide a password",
+                    minlength: "Your password must be at least 5 characters long",
+                    equalTo: "Please enter the same password as above"
+                },
+                email1: "Please enter a valid email address",
+                agree1: "Please accept our policy"
+            },
+            errorElement: "div",
+            errorPlacement: function (error, element) {
+                // Add the `help-block` class to the error element
+                error.addClass("form-control-feedback");
+
+                // Add `has-feedback` class to the parent div.form-group
+                // in order to add icons to inputs
+                element.closest(".form-group").addClass("has-danger");
+
+                if (element.prop("type") === "checkbox") {
+                    error.insertAfter(element.parent(".checkbox"));
+                } else {
+                    error.insertAfter(element);
+                }
+            },
+            highlight: function (element, errorClass, validClass) {
+                $(element).closest(".form-group").addClass("has-danger").removeClass("has-success");
+                $(element).removeClass('form-control-success').addClass('form-control-danger');
+            },
+            unhighlight: function (element, errorClass, validClass) {
+                $(element).closest(".form-group").addClass("has-success").removeClass("has-danger");
+                $(element).removeClass('form-control-danger').addClass('form-control-success');
+            }
+        });
+    }();
+});
--- a/assets/playkit/examples/js/demos/form.wizard.js
+++ b/assets/playkit/examples/js/demos/form.wizard.js
@ -0,0 +1,180 @@
+$(function() {
+	/*
+	* For Simplisty each example is wrapped
+	* into a self-invoking function
+	*/
+
+	// First Example (inline)
+	!function() {
+		var $validator = $("#bootstrap-wizard-form").validate({
+			rules: {
+				email: {
+					required: true,
+					email: true
+				},
+				name: {
+					required: true,
+					minlength: 3
+				},
+				country: "required",
+				city: "required",
+				payment_method: "required",
+				spending: {
+					required: true,
+					number: true
+				},
+				services: "required",
+				message: {
+					required: true,
+					minlength: 6,
+					maxlength: 140
+				}
+			},
+			errorElement: "div",
+			errorPlacement: function (error, element) {
+				error.addClass("form-control-feedback");
+
+				element.closest(".form-group").addClass("has-danger");
+
+				if (element.prop("type") === "checkbox") {
+					error.insertAfter(element.parent(".checkbox"));
+				} else {
+					error.insertAfter(element);
+				}
+			},
+			highlight: function (element, errorClass, validClass) {
+				$(element).closest(".form-group").addClass("has-danger").removeClass("has-success");
+				$(element).removeClass('form-control-success').addClass('form-control-danger');
+			},
+			unhighlight: function (element, errorClass, validClass) {
+				$(element).closest(".form-group").addClass("has-success").removeClass("has-danger");
+				$(element).removeClass('form-control-danger').addClass('form-control-success');
+			}
+		});
+		 
+		function isValid() {
+			if (!$("#bootstrap-wizard-form").valid()) {
+				$validator.focusInvalid();
+				return false;
+			} else {
+				return true;
+			}
+		}
+
+		$('#bootstrap-wizard-1').bootstrapWizard({
+			tabClass: 'nav-tabs',
+			nextSelector: '.pager>.btn.next',
+			previousSelector: '.pager>.btn.previous',
+			onTabShow: function(tab, navigation, index) {
+				$(tab).addClass('visited');
+				var $finishBtn = $('#finish-btn');
+				var $nextBtn = $('#next-btn');
+				var total = navigation.find('li').length;
+
+				if (index + 1 == total) {
+					$finishBtn.show();
+					$nextBtn.hide();
+				} else {
+					$finishBtn.hide();
+					$nextBtn.show();
+				}
+			},
+			onTabClick: function() {
+				return isValid();
+			},
+			onPrevious: function(tab, navigation, index) {
+				$(tab).removeClass('visited');
+			},
+			onNext: function(tab, navigation, index) {
+				return isValid();
+			}
+		});
+
+		$('#finish-btn').on('click', function(e) {
+			if (isValid()) {
+				swal("Good job!", "Thanks for your time taking this surve", "success");
+			} else {
+				swal("Faild", "Please fill in all fields", "error");
+			}
+		});
+	}(),
+	// wizard-small-vertex-demo
+	function() {
+		$('#wizard-small-vertex-demo').bootstrapWizard({
+			tabClass: 'nav-tabs',
+			nextSelector: '.pager>.btn.next',
+			previousSelector: '.pager>.btn.previous',
+			onTabShow: function(tab, navigation, index) {
+				$(tab).addClass('visited');
+			},
+			onTabClick: function() {
+				return false;
+			},
+			onPrevious: function(tab, navigation, index) {
+				$(tab).removeClass('visited');
+			}
+		});
+	}(),
+	// wizard-circle-vertex-demo
+	function() {
+		$('#wizard-circle-vertex-demo').bootstrapWizard({
+			tabClass: 'nav-tabs',
+			nextSelector: '.pager>.btn.next',
+			previousSelector: '.pager>.btn.previous',
+			onTabShow: function(tab, navigation, index) {
+				$(tab).addClass('visited');
+			},
+			onTabClick: function() {
+				return false;
+			},
+			onPrevious: function(tab, navigation, index) {
+				$(tab).removeClass('visited');
+			}
+		});
+	}(),
+	// wizard-keep-prefix-suffix-demo
+	function() {
+		$('#wizard-keep-prefix-suffix-demo').bootstrapWizard({
+			tabClass: 'nav-tabs',
+			nextSelector: '.pager>.btn.next',
+			previousSelector: '.pager>.btn.previous',
+			onTabShow: function(tab, navigation, index) {
+				$(tab).addClass('visited');
+			},
+			onTabClick: function() {
+				return false;
+			},
+			onPrevious: function(tab, navigation, index) {
+				$(tab).removeClass('visited');
+			}
+		});
+	}(),
+	// wizard-basic-demo
+	function() {
+		$('#wizard-basic-demo').bootstrapWizard({
+			tabClass: 'nav-tabs',
+			nextSelector: '.pager>.btn.next',
+			previousSelector: '.pager>.btn.previous',
+			onTabShow: function(tab, navigation, index) {
+				$(tab).addClass('visited');
+			},
+			onPrevious: function(tab, navigation, index) {
+				$(tab).removeClass('visited');
+			}
+		});
+	}(),
+	// Modal Example
+	function() {
+		$('#modal-wizard').bootstrapWizard({
+			tabClass: 'nav-tabs',
+			nextSelector: '.pager>.btn.next',
+			previousSelector: '.pager>.btn.previous',
+			onTabShow: function(tab, navigation, index) {
+				$(tab).addClass('visited');
+			},
+			onPrevious: function(tab, navigation, index) {
+				$(tab).removeClass('visited');
+			},
+		});
+	}();
+});
--- a/assets/playkit/examples/js/demos/form.wysiwyg-editor.js
+++ b/assets/playkit/examples/js/demos/form.wysiwyg-editor.js
@ -0,0 +1,40 @@
+$(function() {
+  // Default editor example
+  $('#summernote').summernote({
+    minHeight: null,
+    maxHeight: 200,
+  });
+
+  // Air-Mode example
+  $('#summernote-airmode').summernote({airMode: true});
+
+  // Custom Toolbar example
+  $('#summernote-custom-toolbar').summernote({
+    placeholder: 'Write here...',
+    toolbar: [
+      // [groupName, [list of button]]
+      ['style', ['bold', 'italic', 'underline', 'clear']],
+      ['font', ['strikethrough', 'superscript', 'subscript']],
+      ['fontsize', ['fontsize']],
+      ['color', ['color']],
+      ['para', ['ul', 'ol', 'paragraph']],
+      ['height', ['height']]
+    ]
+  });
+
+  // Click to edit example
+  var edit = function() {
+    $('#summernote-click-to-edit').summernote({focus: true});
+  };
+
+  var save = function() {
+    var makrup = $('#summernote-click-to-edit').summernote('code');
+    $('#summernote-click-to-edit').summernote('destroy');
+  };
+
+  $('#edit-btn').on('click', function() {
+    edit();
+  }), $('#save-btn').on('click', function() {
+    save();
+  });
+});
--- a/assets/playkit/examples/js/demos/forms.datetime.js
+++ b/assets/playkit/examples/js/demos/forms.datetime.js
@ -0,0 +1,67 @@
+$(function() {
+	!function() {
+		$('#daterange-ex-2').daterangepicker({
+			timePicker: true,
+			timePickerIncrement: 30,
+			locale: {
+				format: 'MM/DD/YYYY h:mm A'
+			}
+		});
+
+		$('#daterange-ex-3').daterangepicker({
+		    singleDatePicker: true,
+		    showDropdowns: true
+		},
+
+		function(start, end, label) {
+		    var years = moment().diff(start, 'years');
+		    alert("You are " + years + " years old.");
+		});
+	}(),
+	function() {
+		var start = moment().subtract(29, 'days');
+		var end = moment();
+
+		function cb(start, end) {
+		    $('#daterange-ex-4 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
+		}
+
+		$('#daterange-ex-4').daterangepicker({
+		    startDate: start,
+		    endDate: end,
+		    ranges: {
+		       'Today': [moment(), moment()],
+		       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+		       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+		       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+		       'This Month': [moment().startOf('month'), moment().endOf('month')],
+		       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+		    }
+		}, cb);
+
+		cb(start, end);
+	}(),
+	function() {
+		$('#clockpicker-3').clockpicker({
+		    placement: 'right',
+		    align: 'left',
+		    donetext: 'Done'
+		});
+	}(),
+	function() {
+		var input = $('#single-input').clockpicker({
+		    placement: 'bottom',
+		    align: 'left',
+		    autoclose: true,
+		    'default': 'now'
+		});
+
+		// Manually toggle to the minutes view
+		$('#check-minutes').click(function(e){
+		    // Have to stop propagation here
+		    e.stopPropagation();
+		    input.clockpicker('show')
+		            .clockpicker('toggleView', 'minutes');
+		});
+	}()
+});
--- a/assets/playkit/examples/js/demos/maps.google.js
+++ b/assets/playkit/examples/js/demos/maps.google.js
@ -0,0 +1,30 @@
+!function() {
+    window.initMap = function() {
+      var chicago = {lat: 41.85, lng: -87.65};
+      var indianapolis = {lat: 39.79, lng: -86.14};
+
+      var map = new google.maps.Map(document.getElementById('map-google'), {
+        center: chicago,
+        scrollwheel: false,
+        zoom: 7
+      });
+
+      var directionsDisplay = new google.maps.DirectionsRenderer({ map: map });
+
+      // Set destination, origin and travel mode.
+      var request = {
+        destination: indianapolis,
+        origin: chicago,
+        travelMode: 'DRIVING'
+      };
+
+      // Pass the directions request to the directions service.
+      var directionsService = new google.maps.DirectionsService();
+      directionsService.route(request, function(response, status) {
+        if (status == 'OK') {
+          // Display the route on the map.
+          directionsDisplay.setDirections(response);
+        }
+      });
+    }
+}();
--- a/assets/playkit/examples/js/demos/maps.jqvmap.js
+++ b/assets/playkit/examples/js/demos/maps.jqvmap.js
@ -0,0 +1,89 @@
+$(function() {
+  var options = {
+    backgroundColor: 'none',
+    colors: {
+      primary   : "#4D92B2",
+      success   : "#60c84c",
+      info      : "#7FB5CE",
+      warning   : "#ffc952",
+      danger    : "#ff7473",
+      faded     : '#EEEEEE'
+    }
+  };
+
+  // World
+  $('#vmap-world').length > 0 && $('#vmap-world').vectorMap({
+    map: 'world_en',
+    backgroundColor: options.backgroundColor,
+    hoverOpacity: 0.7,
+    selectedColor: options.colors.warning,
+    enableZoom: true,
+    showTooltip: true,
+    scaleColors: ['#C8EEFF', '#006491'],
+    values: sample_data,
+    normalizeFunction: 'polynomial'
+  }),
+
+  // Africa
+  $('#vmap-africa').length > 0 && $('#vmap-africa').vectorMap({
+    map: 'africa_en',
+    backgroundColor: options.backgroundColor,
+    hoverOpacity: 0.7,
+    selectedColor: options.colors.success,
+    enableZoom: true,
+    showTooltip: true,
+    values: sample_data,
+    scaleColors: ['#C8EEFF', '#006491'],
+    normalizeFunction: 'polynomial'
+  }),
+
+  // Asia
+  $('#vmap-asia').length > 0 && $('#vmap-asia').vectorMap({
+    map: 'asia_en',
+    backgroundColor: options.backgroundColor,
+    hoverOpacity: 0.7,
+    selectedColor: options.colors.danger,
+    enableZoom: true,
+    showTooltip: true,
+    values: sample_data,
+    scaleColors: ['#C8EEFF', '#006491'],
+    normalizeFunction: 'polynomial'
+  }),
+
+  // USA
+  $('#vmap-usa').length > 0 && $('#vmap-usa').vectorMap({
+    map: 'usa_en',
+    backgroundColor: options.backgroundColor,
+    color: options.colors.primary,
+    enableZoom: true,
+    showTooltip: true,
+    selectedColor: options.colors.success,
+    hoverColor: options.colors.success,
+    colors: {
+      mo: options.colors.info,
+      fl: options.colors.info,
+      or: options.colors.info
+    },
+    onRegionClick: function(event, code, region){
+      event.preventDefault();
+    }
+  }),
+
+  // Russia
+  $('#vmap-russia').length > 0 && $('#vmap-russia').vectorMap({
+    map: 'russia_en',
+    backgroundColor: options.backgroundColor,
+    color: options.colors.info,
+    hoverOpacity: 0.7,
+    selectedColor: options.colors.warning,
+    enableZoom: true,
+    showTooltip: true,
+    colors: {
+      ya: options.colors.primary,
+      sa: options.colors.primary,
+      ko: options.colors.primary
+    },
+    scaleColors: ['#C8EEFF', '#006491'],
+    normalizeFunction: 'polynomial'
+  });
+});
--- a/assets/playkit/examples/js/demos/maps.jqvmap.sampledata.js
+++ b/assets/playkit/examples/js/demos/maps.jqvmap.sampledata.js
@ -0,0 +1 @@
+var sample_data = {"af":"16.63","al":"11.58","dz":"158.97","ao":"85.81","ag":"1.1","ar":"351.02","am":"8.83","au":"1219.72","at":"366.26","az":"52.17","bs":"7.54","bh":"21.73","bd":"105.4","bb":"3.96","by":"52.89","be":"461.33","bz":"1.43","bj":"6.49","bt":"1.4","bo":"19.18","ba":"16.2","bw":"12.5","br":"2023.53","bn":"11.96","bg":"44.84","bf":"8.67","bi":"1.47","kh":"11.36","cm":"21.88","ca":"1563.66","cv":"1.57","cf":"2.11","td":"7.59","cl":"199.18","cn":"5745.13","co":"283.11","km":"0.56","cd":"12.6","cg":"11.88","cr":"35.02","ci":"22.38","hr":"59.92","cy":"22.75","cz":"195.23","dk":"304.56","dj":"1.14","dm":"0.38","do":"50.87","ec":"61.49","eg":"216.83","sv":"21.8","gq":"14.55","er":"2.25","ee":"19.22","et":"30.94","fj":"3.15","fi":"231.98","fr":"2555.44","ga":"12.56","gm":"1.04","ge":"11.23","de":"3305.9","gh":"18.06","gr":"305.01","gd":"0.65","gt":"40.77","gn":"4.34","gw":"0.83","gy":"2.2","ht":"6.5","hn":"15.34","hk":"226.49","hu":"132.28","is":"12.77","in":"1430.02","id":"695.06","ir":"337.9","iq":"84.14","ie":"204.14","il":"201.25","it":"2036.69","jm":"13.74","jp":"5390.9","jo":"27.13","kz":"129.76","ke":"32.42","ki":"0.15","kr":"986.26","undefined":"5.73","kw":"117.32","kg":"4.44","la":"6.34","lv":"23.39","lb":"39.15","ls":"1.8","lr":"0.98","ly":"77.91","lt":"35.73","lu":"52.43","mk":"9.58","mg":"8.33","mw":"5.04","my":"218.95","mv":"1.43","ml":"9.08","mt":"7.8","mr":"3.49","mu":"9.43","mx":"1004.04","md":"5.36","mn":"5.81","me":"3.88","ma":"91.7","mz":"10.21","mm":"35.65","na":"11.45","np":"15.11","nl":"770.31","nz":"138","ni":"6.38","ne":"5.6","ng":"206.66","no":"413.51","om":"53.78","pk":"174.79","pa":"27.2","pg":"8.81","py":"17.17","pe":"153.55","ph":"189.06","pl":"438.88","pt":"223.7","qa":"126.52","ro":"158.39","ru":"1476.91","rw":"5.69","ws":"0.55","st":"0.19","sa":"434.44","sn":"12.66","rs":"38.92","sc":"0.92","sl":"1.9","sg":"217.38","sk":"86.26","si":"46.44","sb":"0.67","za":"354.41","es":"1374.78","lk":"48.24","kn":"0.56","lc":"1","vc":"0.58","sd":"65.93","sr":"3.3","sz":"3.17","se":"444.59","ch":"522.44","sy":"59.63","tw":"426.98","tj":"5.58","tz":"22.43","th":"312.61","tl":"0.62","tg":"3.07","to":"0.3","tt":"21.2","tn":"43.86","tr":"729.05","tm":0,"ug":"17.12","ua":"136.56","ae":"239.65","gb":"2258.57","us":"14624.18","uy":"40.71","uz":"37.72","vu":"0.72","ve":"285.21","vn":"101.99","ye":"30.02","zm":"15.69","zw":"5.57"};
--- a/assets/playkit/examples/js/demos/tables.datatables.js
+++ b/assets/playkit/examples/js/demos/tables.datatables.js
@ -0,0 +1,3 @@
+$(function() {
+  $('#datatables-example-1').DataTable();
+});
--- a/assets/playkit/examples/js/demos/uikit.sweetalert.js
+++ b/assets/playkit/examples/js/demos/uikit.sweetalert.js
@ -0,0 +1,64 @@
+$(function() {
+    $('#swal-example-1 > button').on('click', function() {
+        swal("Here's a message!");
+    });
+
+    $('#swal-example-2 > button').on('click', function() {
+        swal("Here's a message!", "It's pretty, isn't it?");
+    });
+
+    $('#swal-example-3 > button').on('click', function() {
+        swal("Good job!", "You clicked the button!", "success");
+    });
+
+    $('#swal-example-4 > button').on('click', function() {
+        swal({
+            title: "Are you sure?",
+            text: "You will not be able to recover this imaginary file!",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: '#DD6B55',
+            confirmButtonText: 'Yes, delete it!',
+            closeOnConfirm: false
+        },
+        function(){
+            swal("Deleted!", "Your imaginary file has been deleted!", "success");
+        });
+    });
+
+    $('#swal-example-5 > button').on('click', function() {
+        swal({
+            title: "Are you sure?",
+            text: "You will not be able to recover this imaginary file!",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: '#DD6B55',
+            confirmButtonText: 'Yes, delete it!',
+            cancelButtonText: "No, cancel plx!",
+            closeOnConfirm: false,
+            closeOnCancel: false
+        },
+        function(isConfirm){
+            if (isConfirm){
+              swal("Deleted!", "Your imaginary file has been deleted!", "success");
+            } else {
+              swal("Cancelled", "Your imaginary file is safe :)", "error");
+            }
+        });
+    });
+
+    $("#swal-example-6 > button").on('click', function() {
+        swal({
+            title: 'Ajax request example',
+            text: 'Submit to run ajax request',
+            type: 'info',
+            showCancelButton: true,
+            closeOnConfirm: false,
+            showLoaderOnConfirm: true,
+        }, function(){
+            setTimeout(function() {
+                swal('Ajax request finished!');
+            }, 2000);
+        });
+    });
+});
--- a/assets/playkit/examples/js/pages/login.js
+++ b/assets/playkit/examples/js/pages/login.js
@ -0,0 +1,26 @@
+!function() { "use strict";
+	$('[data-plugin="owlCarousel"]').each(function() {
+	  var $this     = $(this);
+	  var defaults  = {
+	    slideSpeed : 300,
+	    paginationSpeed : 400,
+	    singleItem: !0,
+	    autoPlay: !0
+	  };
+	  var _config = $.extend({}, defaults, $this.data());
+
+	  if (typeof $.fn.owlCarousel === 'function') {
+	    $this.owlCarousel(_config);
+	  }
+	});
+
+	$('#form-switch-btns').on('click', '.btn', function (e) {
+		var $target 			= $($(this).data('target'));
+		var siblingTarget = $(this).attr('disabled', true)
+			.siblings('.btn')
+			.removeAttr('disabled')
+			.data('target');
+			
+		$target.addClass('show') && $(siblingTarget).removeClass('show');
+	});
+}();
--- a/assets/playkit/examples/js/theme-customizer.js
+++ b/assets/playkit/examples/js/theme-customizer.js
@ -0,0 +1,100 @@
+!function(window, document, $) { "use strict";
+	var $body     = $(document.body);
+	var $navbar   = $('.site-navbar');
+	var $menubar  = $('.site-menubar');
+
+	$.customizer = {
+		navbarType: null,
+		navbarSkin: null,
+		menubarType: null,
+		init: function() {
+			if (typeof $.settings != "undefined" && $.settings.isStored()) {
+				this.menubarType = $.settings.get('menubar').type;
+				this.navbarType = $.settings.get('navbar').type;
+				this.navbarSkin = $.settings.get('navbar').skin;
+				this.setMenubarTheme(this.menubarType);
+				this.setNavbarTheme(this.navbarType, this.navbarSkin);
+			} else {
+				this.menubarType = this._getAppliedMenubarType,
+				this.navbarType = this._getAppliedNavbarType,
+				this.navbarSkin = this._getAppliedNavbarSkin;
+			}
+			
+			// check the the theme on load
+			this.checkTheme();
+		},
+		save: function() {
+			$.settings.set("navbar", {
+				type: this.navbarType,
+				skin: this.navbarSkin
+			}).set("menubar", {
+				type: this.menubarType
+			}).save();
+		},
+		reset: function() {
+			$.settings.clear(), location.reload();
+		},
+		setTheme: function(trigger) {
+			var options = typeof trigger === 'object' ? trigger instanceof HTMLElement ? $(trigger).data() : trigger : {};
+
+			if ($.isEmptyObject(options)) {
+				console.warn("You must specify options object or a DOM Element containing data-* attributes");
+			}
+
+			if (options.menubarType) {
+				this.setMenubarTheme(options.menubarType);
+			}
+
+			if (options.navbarType && options.navbarSkin) {
+				this.setNavbarTheme(options.navbarType, options.navbarSkin);
+			}
+
+			return this.checkTheme(), this;
+		},
+		setNavbarTheme: function(type, skin) {
+			// set navbar theme (inverse|light)
+			if (type === 'light' && $navbar.is('.navbar-inverse')) {
+				this.navbarType = 'light', $navbar.addClass('navbar-light').removeClass('navbar-inverse');
+			} else if (type === 'inverse' && $navbar.is('.navbar-light')) {
+				this.navbarType = 'inverse', $navbar.addClass('navbar-inverse').removeClass('navbar-light');
+			}
+
+			// set navbar background (primary, faded, warning, etc..)
+			var currentSkin = this._getAppliedNavbarSkin();
+			this.navbarSkin = skin, currentSkin !== skin && $navbar.addClass(skin).removeClass(currentSkin);
+
+			return this;
+		},
+		setMenubarTheme: function(type) {
+			// set menubar theme (light|inverse)
+			if (type === 'light' && $body.is('.menubar-inverse')) {
+				this.menubarType = 'light', $body.addClass('menubar-light').removeClass('menubar-inverse');
+			} else if (type === 'inverse' && $body.is('.menubar-light')) {
+				this.menubarType = 'inverse', $body.addClass('menubar-inverse').removeClass('menubar-light');
+			}
+
+			return this;
+		},
+		checkTheme: function() {
+			return $('[name="theme-option"][data-menubar-type="'+this.menubarType+'"][data-navbar-type="'+this.navbarType+'"][data-navbar-skin="'+this.navbarSkin+'"]').prop('checked', true),
+			$('[name="navbar-skin-option"][data-navbar-type="'+this.navbarType+'"][data-navbar-skin="'+this.navbarSkin+'"]').prop('checked', true),
+			$('[name="menubar-type-option"][data-menubar-type="'+this.menubarType+'"]').prop('checked', true), this;
+		},
+		_getAppliedNavbarSkin: function() {
+			var navbar      = document.querySelector('.site-navbar');
+			var currentSkin = null;
+
+			$.each(navbar.classList, function (index, className) {
+				className.search('bg') !== -1 && (currentSkin = className);
+			});
+			
+			return currentSkin;
+		},
+		_getAppliedNavbarType: function() {
+			return $navbar.is('.navbar-inverse') ? 'inverse' : 'light';
+		},
+		_getAppliedMenubarType: function() {
+			return $body.is('.menubar-inverse') ? 'inverse' : 'light';
+		}
+	};
+}(window, document, jQuery);
--- a/assets/playkit/examples/scss/_base.scss
+++ b/assets/playkit/examples/scss/_base.scss
@ -0,0 +1,4 @@
+@import '../../vendor/bower_components/bootstrap/scss/variables';
+@import '../../vendor/bower_components/bootstrap/scss/mixins';
+@import '../../global/scss/variables';
+@import '../../global/scss/mixins';
--- a/assets/playkit/examples/scss/apps/_base.scss
+++ b/assets/playkit/examples/scss/apps/_base.scss
@ -0,0 +1,146 @@
+@import '../base';
+
+.app-wrapper {
+  display: flex;
+  font-family: 'Raleway', sans-serif;
+  width: 100%;
+  border: 1px solid $border-color-default;
+  border-radius: $border-radius;
+}
+
+.app-main {
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid $border-color-default;
+  background: $bg-faded;
+}
+
+.app-main-header {
+  height: 90px;
+  background: #fff;
+  padding: 1.5rem;
+  border-bottom: 1px solid $border-color-default;
+}
+
+.app-main-heading {
+  margin-bottom: 0;
+  line-height: 40px;
+}
+
+.app-main-content {
+  flex: 2 2 0%;
+}
+
+//= App-panel style
+.app-panel {
+  height: calc(100% - #{$navbar-height});
+  top: $navbar-height;
+  position: fixed;
+  width: 340px;
+  left: -340px;
+  right: auto;
+  z-index: 997;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  transition: left .5s, top .5s;
+  flex: 0 0 340px;
+  &.show {
+    left: 0;
+  }
+  box-shadow: 2px 0 4px rgba(0,0,0,.08);
+  
+  body.navbar-collapse-in & {
+    top: 2 * $navbar-height;
+  }
+
+  body.menubar-open & {
+    left: -340px;
+  }
+
+  @include media-breakpoint-up(md) {
+    position: static;
+    height: auto;
+    box-shadow: none;
+  }
+}
+
+.app-panel-inner {
+  height: auto;
+  @include media-breakpoint-down(sm) {
+    height: calc(100% - 90px);
+    overflow: hidden;
+  }
+}
+
+.app-panel-toggle {
+  position: absolute;
+  top: 25%;
+  right: -30px;
+  display: block;
+  width: 30px;
+  height: 50px;
+  background: #fff;
+  box-shadow: 2px 2px 6px rgba(0,0,0,.08);
+
+  .fa {
+    text-align: center;
+    line-height: 50px;
+    width: 25px;
+    font-size: 1.13rem;
+  }
+
+  .fa-chevron-left {
+    display: none;
+  }
+
+  .show & .fa-chevron-left {
+    display: block;
+  }
+
+  .show & .fa-chevron-right {
+    display: none;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: none;
+  }
+}
+
+.panel-item {
+  border: 1px solid $border-color-default;
+  border-radius: $border-radius;
+  margin-bottom: .5rem;
+  padding: .75rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+a.panel-item {
+  display: block;
+}
+
+.app-search {
+  position: relative;
+  height: 90px;
+  padding: 1.5rem;
+  border-bottom: 1px solid $border-color-default;
+
+  .search-field {
+    @include reset-input;
+    width: 100%;
+    height: 40px;
+    padding: .75rem;
+    border-radius: 500px;
+    border: 1px solid $border-color-default;
+  }
+
+  .search-icon {
+    position: absolute;
+    top: 2.25rem;
+    right: 2.25rem;
+  }
+}
--- a/assets/playkit/examples/scss/apps/calendar.scss
+++ b/assets/playkit/examples/scss/apps/calendar.scss
@ -0,0 +1,157 @@
+@import 'base';
+
+.calendar-panel {
+	margin-bottom: 3rem;
+}
+
+.fullcalendar,
+#fullcalendar{
+	margin-bottom: 24px;
+	background: #fff;
+	padding: 24px 16px;
+	@include box-shadow;
+}
+
+.fc th.fc-day-header{
+	color: $brand-success;
+	padding: 12px 0;
+	border: none;
+	text-align: left;
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.fc .fc-row.ui-widget-header,
+.fc .fc-row.fc-week.ui-widget-content {
+	margin-right: 0 !important;
+	border-width: 0 !important;
+}
+
+.fc-day{
+	background-color: #fff;
+}
+
+
+.fc-basic-view .fc-day-number{
+	font-size: 16px;
+	color: gray;
+	padding-top: 8px !important;
+	padding-right: 16px !important;
+	display: none;
+}
+
+.fc-head > tr > td {
+	border: none;
+}
+
+.fc th, .fc td{
+	border-color: $border-color-default;
+}
+
+/* fullCalendar toolbar */
+.fc-toolbar{
+	margin-bottom: 24px;
+}
+
+.fc-toolbar .fc-center h2{
+	font-size: 16px;
+}
+
+.fc-toolbar .ui-button{
+	border: none;
+	box-shadow: 0 0 2px #ccc;
+	background: #fff;
+	color: #6a6c6f;
+	height: 35px;
+	border-radius: 2px;
+}
+
+.fc-toolbar .ui-button:hover{
+	background: $body-bg;
+}
+
+.fc-toolbar .ui-state-disabled{
+	color: #ccc;
+	box-shadow: none;
+	border: 1px solid #eee;
+}
+.fc-toolbar .ui-state-disabled:hover{
+	background: #fff;
+}
+
+.fc-today-button{
+	width: 70px;	
+}
+
+
+/* Event Styling*/
+.fc-content-skeleton .fc-event-container{
+	padding: 12px;
+}
+
+.fc-event-container .fc-event{
+	padding: .5rem;
+	font-size: 14px;
+	font-weight: 400;
+	margin-bottom: 8px;
+	border-radius: 2px;
+	border: none;
+	color: #fff !important;
+}
+
+.external-events-wrap {
+	border: 1px solid $border-color-default;
+	padding: 1rem;
+	border-radius: $border-radius;
+}
+
+// darggable-events
+.external-events{
+	display: flex;
+	flex-flow: row wrap;
+	.external-event {
+		flex-grow: 1;
+		flex-basis: 20%;
+		margin-right: 1.5rem;
+		color: #fff;
+		width: 100%;
+		padding: 8px 16px;
+		font-size: 14px;
+		font-weight: 400;
+		margin-bottom: 8px;
+		border-radius: 2px;
+		&:nth-child(4n),
+		&:last-child {
+			margin-right: 0;
+		}
+		&.ui-draggable-dragging{
+			z-index: 999;
+		}
+		cursor: move;
+	}
+
+	@media (max-width: map-get($grid-breakpoints, md)) {
+		.external-event {
+			flex-basis: 40%;
+			&:nth-child(2n) {
+				margin-right: 0;
+			}
+		}
+	}
+
+	@media (max-width: map-get($grid-breakpoints, sm)) {
+		flex-flow: column nowrap;
+	}
+}
+
+.new_event_cat_form {
+	.btn {
+		height: 40px;
+	}
+	.form-control {
+		height: 40px !important;
+		@media (max-width: map-get($grid-breakpoints, md)) {
+			margin-bottom: 1rem;
+		}
+	}
+}
--- a/assets/playkit/examples/scss/apps/inbox.scss
+++ b/assets/playkit/examples/scss/apps/inbox.scss
@ -0,0 +1,59 @@
+@import 'base';
+
+.inbox-cat-list {
+  .panel-item {
+    &.active,
+    &:focus,
+    &:hover {
+      color: #fff;
+      border-color: $brand-success;
+      background: $brand-success;
+      * { color: #fff; }
+    }
+  }
+}
+
+.mail-cat-name {
+  margin: 0;
+  font-size: 1rem;
+
+  small {
+    color: $brand-success;
+    font-size: .75rem;
+  }
+}
+
+
+.mail-item {
+  display: flex;
+  align-items: center;
+  border: 1px solid $border-color-default;
+  padding: .75rem;
+  margin-bottom: .5rem;
+  background: #fff;
+  border-radius: $border-radius;
+  
+  &:last-child{
+    margin-bottom: 0;
+  }
+
+  .mail-item-check,
+  .mail-item-star {
+    margin-right: 1rem;
+  }
+  
+  .mail-item-star {
+    color: $gray-lighter;
+    font-size: 1rem;
+    cursor: pointer;
+    &.checked,
+    &:hover {
+      color: $brand-success;
+    }
+  }
+
+  .mail-item-title {
+    margin: 0 0 auto 0;
+    font-size: 1rem;
+  }
+}
--- a/assets/playkit/examples/scss/apps/messaging.scss
+++ b/assets/playkit/examples/scss/apps/messaging.scss
@ -0,0 +1,77 @@
+@import 'base';
+
+.app-messaging {
+  .app-main-content {
+    max-height: 300px;
+  }
+  
+  @include media-breakpoint-up(md) {
+    .app-main-content .scroll-container {
+      max-height: 300px;
+    }
+    .app-panel-inner .scroll-container {
+      max-height: 400px;
+    }
+  }
+}
+
+.contacts-list {
+  .media {
+    &.active,
+    &:hover {
+      border-color: $brand-success;
+    }
+  }
+
+  .connection-methods {
+    .btn {
+      border-color: $border-color-default;
+      &:hover,
+      &.active {
+        border-color: $brand-success;
+        background: $brand-success;
+      }
+    }
+  }
+}
+
+.messages-list {
+  .msg {
+    padding: 1rem;
+    border: 1px solid $border-color-default;
+    border-radius: $border-radius;
+    margin-bottom: 1.5rem;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .msg-in {
+    background: #fff;
+  }
+  .msg-out {
+    background: $gray-lighter;
+  }
+}
+
+#app-messaging-form {
+  border-top: 1px solid $border-color-default;
+  background: #fff;
+  padding: 1.5rem;
+  display: flex;
+
+  .msg-form-field,
+  .msg-form-submit {
+    @include reset-input;
+    height: 51px;
+  }
+
+  .msg-form-field {
+    line-height: 50px;
+    font-size: 1.25rem;
+    flex: 1 1 0%;
+  }
+
+  .msg-form-submit {
+    flex: 0 0 150px;
+  }
+}
--- a/assets/playkit/examples/scss/apps/projects.scss
+++ b/assets/playkit/examples/scss/apps/projects.scss
@ -0,0 +1,189 @@
+@import 'base';
+
+.project-task {
+	padding: 1rem 1.5rem;
+	border-bottom: 1px solid $border-color-default;
+	
+	label {
+		font-size: 1rem;
+	}
+	input[type="checkbox"]:checked + label {
+		color: #aaa;
+		font-style: italic;
+		text-decoration: line-through;
+	}
+}
+
+.projects-list {
+	padding: 1rem;
+	
+	.avatar {
+		flex: 0 0 64px;
+	}
+
+	.media {
+		padding: .5rem 0;
+		cursor: pointer;
+		&.selected,
+		&:hover {
+			.project-icon {
+				border-color: $brand-success;
+				background: #fff;
+				color: $brand-success;
+			}
+
+			.project-name {
+				color: $brand-success;
+			}
+		}
+	}
+	
+	.project-icon {
+		color: gray;
+		background: $bg-faded;
+		border: 1px solid $border-color-default;
+	}
+
+	.project-name {
+		margin-bottom: .25rem;
+		font-weight: 500;
+		white-space: nowrap;
+	}
+
+	.project-detail {
+		color: #bbb;
+		font-size: .875rem;
+		white-space: nowrap;
+	}
+}
+
+.people-list {
+	.avatar {
+		font-weight: 600;
+		font-size: 18px;
+		margin-right: .5rem;
+		margin-bottom: 1rem;
+	}
+}
+
+.add-people-btn {
+	@include reset-input;
+	&:focus {
+		outline: none;
+	}
+	cursor: pointer;
+	background: none;
+	padding: 0;
+	color: $brand-success !important;
+	border: 2px solid $brand-success;
+}
+
+#projects-task-modal {
+	.modal-dialog {
+		margin-top: 100px;
+	}
+	
+	.modal-content {
+		box-shadow: none;
+		border: none;
+	}
+
+	input::-webkit-input-placeholder {
+	  color: #ccc !important;
+	}
+	 
+	input:-moz-placeholder {
+	  color: #ccc !important;  
+	}
+	 
+	input::-moz-placeholder {
+	  color: #ccc !important;  
+	}
+	 
+	input:-ms-input-placeholder {  
+	  color: #ccc !important;  
+	}
+
+	.task-pickers {
+		display: flex;
+	}
+
+	.task-field-picker {
+		margin-right: 1rem;
+		label {
+			cursor: pointer;
+			width: 50px;
+			height: 50px;
+			line-height: 50px;
+			border-radius: 500px;
+			text-align: center;
+			color: $text-muted;
+			border: 1px dashed #ccc;
+			font-size: 1.5rem;
+			color: #ccc;
+			margin-right: 1rem;
+			margin-bottom: 0;
+		}
+
+		input {
+			@include reset-input;
+			font-size: 1rem;
+			color: #ccc;
+			font-weight: 400;
+			width: 100px;
+		}
+	}
+
+	.close {
+		@include reset-input;
+		position: absolute;
+		right: 1rem;
+		top: 1rem;
+		width: 25px;
+		height: 25px;
+		line-height: 25px;
+		text-align: center;
+		font-size: 1.13rem;
+		border-radius: 500px;
+		border: 1px solid $gray;
+	}
+	
+	.task-name-wrap {
+		position: relative;
+		span {
+			display: inline-block;
+			width: 32px;
+			height: 32px;
+			line-height: 32px;
+			text-align: center;
+			border-radius: 500px;
+			position: absolute;
+			left: 0;
+			top: calc(50% - 15px);
+			border: 1px solid #ccc;
+			font-size: 1.5rem;
+			color: #ccc;
+		}
+	}
+
+	.task-name-field,
+	.task-desc-field {
+		@include reset-input;
+		width: 100%;
+		color: $text-muted;
+	}
+
+	.task-name-field {
+		padding-left: 42px;
+		height: 60px;
+		font-size: 1.75rem;
+		font-weight: 500;
+	}
+
+	.task-desc-field {
+		height: 180px;
+		resize: none;
+		padding: 1.5rem;
+		font-size: 1rem;
+	}
+}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				{"version":3,"sources":["sentinel_imaginary.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"sentinel_imaginary.js","sourcesContent":["$(document).ready(function () {\r\n $('#share-modal').on('shown.bs.modal', function () {\r\n var URL = baseURL;\r\n if (!map.settings.https && map.settings.https != 1) {\r\n URL = baseURL.replace(\"s://\", \"://\");\r\n }\r\n var ifrmecode = '<iframe src=\"' + URL + \"map/embed/\" + map.random_token + '\" height=\"' + map.settings.height + '\" width=\"' + map.settings.width + '\"></iframe>';\r\n jQuery('#ds_iframe_code').val(ifrmecode);\r\n jQuery('#ds_share_url').val(URL + \"map/share/\" + map.random_token);\r\n jQuery('#ds_json_url').val(URL + \"map/json/\" + map.random_token);\r\n\r\n });\r\n\r\n\r\n\r\n $(\".dashboard-download-link\").on(\"click\", function (e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n var image_1 = $(\"#before_images_1 option:selected\").data(\"id\");\r\n var image_2 = $(\"#after_images_1 option:selected\").data(\"id\");\r\n var type = $(this).data(\"type\");\r\n window.location.href = $(this).attr(\"href\") + \"?image_1=\" + image_1 + \"&image_2=\" + image_2;\r\n });\r\n});"]}
				`@ -0,0 +1 @@`
				var sample_data = {"af":"16.63","al":"11.58","dz":"158.97","ao":"85.81","ag":"1.1","ar":"351.02","am":"8.83","au":"1219.72","at":"366.26","az":"52.17","bs":"7.54","bh":"21.73","bd":"105.4","bb":"3.96","by":"52.89","be":"461.33","bz":"1.43","bj":"6.49","bt":"1.4","bo":"19.18","ba":"16.2","bw":"12.5","br":"2023.53","bn":"11.96","bg":"44.84","bf":"8.67","bi":"1.47","kh":"11.36","cm":"21.88","ca":"1563.66","cv":"1.57","cf":"2.11","td":"7.59","cl":"199.18","cn":"5745.13","co":"283.11","km":"0.56","cd":"12.6","cg":"11.88","cr":"35.02","ci":"22.38","hr":"59.92","cy":"22.75","cz":"195.23","dk":"304.56","dj":"1.14","dm":"0.38","do":"50.87","ec":"61.49","eg":"216.83","sv":"21.8","gq":"14.55","er":"2.25","ee":"19.22","et":"30.94","fj":"3.15","fi":"231.98","fr":"2555.44","ga":"12.56","gm":"1.04","ge":"11.23","de":"3305.9","gh":"18.06","gr":"305.01","gd":"0.65","gt":"40.77","gn":"4.34","gw":"0.83","gy":"2.2","ht":"6.5","hn":"15.34","hk":"226.49","hu":"132.28","is":"12.77","in":"1430.02","id":"695.06","ir":"337.9","iq":"84.14","ie":"204.14","il":"201.25","it":"2036.69","jm":"13.74","jp":"5390.9","jo":"27.13","kz":"129.76","ke":"32.42","ki":"0.15","kr":"986.26","undefined":"5.73","kw":"117.32","kg":"4.44","la":"6.34","lv":"23.39","lb":"39.15","ls":"1.8","lr":"0.98","ly":"77.91","lt":"35.73","lu":"52.43","mk":"9.58","mg":"8.33","mw":"5.04","my":"218.95","mv":"1.43","ml":"9.08","mt":"7.8","mr":"3.49","mu":"9.43","mx":"1004.04","md":"5.36","mn":"5.81","me":"3.88","ma":"91.7","mz":"10.21","mm":"35.65","na":"11.45","np":"15.11","nl":"770.31","nz":"138","ni":"6.38","ne":"5.6","ng":"206.66","no":"413.51","om":"53.78","pk":"174.79","pa":"27.2","pg":"8.81","py":"17.17","pe":"153.55","ph":"189.06","pl":"438.88","pt":"223.7","qa":"126.52","ro":"158.39","ru":"1476.91","rw":"5.69","ws":"0.55","st":"0.19","sa":"434.44","sn":"12.66","rs":"38.92","sc":"0.92","sl":"1.9","sg":"217.38","sk":"86.26","si":"46.44","sb":"0.67","za":"354.41","es":"1374.78","lk":"48.24","kn":"0.56","lc":"1","vc":"0.58","sd":"65.93","sr":"3.3","sz":"3.17","se":"444.59","ch":"522.44","sy":"59.63","tw":"426.98","tj":"5.58","tz":"22.43","th":"312.61","tl":"0.62","tg":"3.07","to":"0.3","tt":"21.2","tn":"43.86","tr":"729.05","tm":0,"ug":"17.12","ua":"136.56","ae":"239.65","gb":"2258.57","us":"14624.18","uy":"40.71","uz":"37.72","vu":"0.72","ve":"285.21","vn":"101.99","ye":"30.02","zm":"15.69","zw":"5.57"};