Implement hostapd modal dialog

app/css/custom.php

@@ -52,19 +52,23 @@ body {
   font-weight: 500;
 }
 
-.card .card-header {
+.card .card-header, .modal-header {
   border-color: <?php echo $color; ?>;
   color: #fff;
   background-color: <?php echo $color; ?>;
 }
 
+.modal-header {
+  border-radius: 0px;
+}
+
 .btn-primary {
   color: <?php echo $color; ?>;
   border-color: <?php echo $color; ?>;
   background-color: #fff;
 }
 
-.card-footer {
+.card-footer, .modal-footer {
   background-color: #f2f1f0;
 }
 

app/css/hackernews.css

@@ -34,12 +34,12 @@ h5.card-title {
   color: #212529;
 }
 
-.card {
+.card, .modal-dialog {
   border-radius: 1px;
   border-color: #ff6600;
 }
 
-.card>.card-header {
+.card>.card-header, .modal-header {
   border-color: #ff6600;
   background-color: #ff6600;
   color: #000;
@@ -53,11 +53,20 @@ h5.card-title {
   font-size: 1.0rem;
 }
 
-.card-header [class^="fa"] {
+.card-header [class^="fa"], .modal-header [class^="fa"] {
   color: #fff;
   font-size: 1.0rem;
 }
 
+.modal-title {
+  color: #000;
+  font-size: 1.0rem;
+}
+
+.modal-content {
+  border-radius: 0px;
+}
+
 .sidebar-brand-text {
   text-transform: none;
   color: #212529;

app/css/lightsout.css

@@ -119,7 +119,7 @@ a:focus, a:hover {
   color: #d2d2d2;
 }
 
-.card>.card-header {
+.card>.card-header, .modal-content, .modal-header {
   border-color: #404040;
   background-color: #202020;
   color: #afafaf;
@@ -129,6 +129,10 @@ a:focus, a:hover {
   font-weight: 400;
 }
 
+.modal-body {
+  background-color: #141414;
+}
+
 .card>.card-header .fa {
   color: #202020;
 }
@@ -197,11 +201,15 @@ hr {
   width: 6.5rem;
 }
 
-.card-footer {
+.card-footer, .modal-footer {
   background-color: #202020;
   border-top: 0px;
 }
 
+.modal-footer {
+  border-radius: 0.3rem;
+}
+
 .card>.card-header::before, .navbar-default::before {
   content: " ";
   display: block;

app/js/custom.js

@@ -232,6 +232,18 @@ function loadChannel() {
     });
 }
 
+$('#hostapdModal').on('shown.bs.modal', function (e) {
+    var seconds = 9;
+    var countDown = setInterval(function(){
+      if(seconds <= 0){
+        clearInterval(countDown);
+      }
+      var pcg = Math.floor(100-(seconds*100/9));
+      document.getElementsByClassName('progress-bar').item(0).setAttribute('style','width:'+Number(pcg)+'%');
+      seconds --;
+    }, 1000);
+});
+
 /*
 Sets the wirelss channel select options based on hw_mode and country_code.