auto update script executed

web/components/status.html

@@ -1,70 +1,70 @@
-<div class="ui stackable four column grid">
-        <div class="column">
-            <div id="serverstatus" class="ui green statustab inverted segment">
-                <h4 class="ui header">
-                    <i class="power off icon"></i>
-                    <div class="content">
-                      <span id="statusTitle">Offline</span>
-                      <div style="color: white;" class="sub header" id="statusText">Reverse proxy server is offline</div>
-                    </div>
-                </h4>
+<div class="ui stackable grid">
+    <div class="ten wide column">
+        <div id="serverstatus" class="ui green statustab inverted segment">
+            <h1 class="ui header" style="margin-top: 1em; margin-left: 0.4em; padding-bottom: 1em;">
+                <i class="power off icon"></i>
+                <div class="content">
+                    <span id="statusTitle">Offline</span>
+                    <div class="sub header" id="statusText">Reverse proxy server is offline</div>
+                </div>
+            </h1>
+            <div class="dot-container">
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
             </div>
         </div>
-        <div class="column">
-            <div id="connections" class="ui statustab summary segment">
-                <h4 class="ui header">
-                    <i class="exchange icon"></i>
-                    <div class="content">
-                      <span id="summaryTotalCount"></span> <small>Req. Today</small>
-                      <div class="sub header" style="margin-top: 0.4em;">
-                        <i class="green circle check icon"></i> <span id="summarySuccCount"></span>
-                         / <i class="red red exclamation circle icon"></i> <span id="summaryErrCount"></span>
-                      </div>
+    </div>
+    <div class="six wide column">
+        <div class="ui greybackground statustab segment">
+            <h5 class="ui header">
+                <i class="exchange icon"></i>
+                <div class="content">
+                    <span id="summaryTotalCount"></span> <small>Req. Today</small>
+                    <div class="sub header" style="margin-top: 0.4em;">
+                    <i class="green circle check icon"></i> <span id="summarySuccCount"></span>
+                        / <i class="red red exclamation circle icon"></i> <span id="summaryErrCount"></span>
                     </div>
-                </h4>
-            </div>
-        </div>
-        <div class="column">
-            <div id="connections" class="ui statustab segment" style="background-color: #f0ece1; border: 0px solid transparent;">
-                <h4 class="ui header">
-                    <i class="arrows alternate horizontal icon"></i>
-                    <div class="content">
-                      <span id="forwardtype"></span>
-                      <div class="sub header" id="forwardtypeList">
+                </div>
+            </h5>
+            <div class="ui divider"></div>
+            <h5 class="ui header">
+                <i class="arrows alternate horizontal icon"></i>
+                <div class="content">
+                    <span id="forwardtype"></span>
+                    <div class="sub header" id="forwardtypeList">
 
-                      </div>
                     </div>
-                </h4>
-            </div>
-        </div>
-        <div class="column">
-            <div id="connections" class="ui statustab inverted segment" style="background-color: #7d8e88;">
-                <h4 class="ui header">
-                    <i class="map marker alternate icon"></i>
-                    <div class="content">
-                      <span id="country"></span>
-                      <div class="sub header" id="countryList">
+                </div>
+            </h5>
+            <div class="ui divider"></div>
+            <h5 class="ui header">
+                <i class="map marker alternate icon"></i>
+                <div class="content">
+                    <span id="country"></span>
+                    <div class="sub header" id="countryList">
 
-                      </div>
                     </div>
-                </h4>
-            </div>
+                </div>
+            </h5>
         </div>
+    </div>
 </div>
 
 <div class="ui divider"></div>
 <p>Inbound Port (Port to be proxied)</p>
-<div class="ui action fluid input">
+<div class="ui action fluid notloopbackOnly input">
     <input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
-    <button class="ui button" onclick="handlePortChange();">Apply</button>
+    <button class="ui basic green notloopbackOnly button" onclick="handlePortChange();">Apply</button>
 </div>
 <br>
-<div id="tls" class="ui toggle checkbox">
+<div id="tls" class="ui toggle notloopbackOnly checkbox">
     <input type="checkbox">
     <label>Use TLS to serve proxy request</label>
 </div>
 <br>
-<div id="redirect" class="ui toggle checkbox" style="margin-top: 0.6em;">
+<div id="redirect" class="ui toggle notloopbackOnly checkbox" style="margin-top: 0.6em;">
     <input type="checkbox">
     <label>Force redirect HTTP request to HTTPS<br>
         <small>(Only apply when listening port is not 80)</small></label>
@@ -75,7 +75,7 @@
 </div>
 <Br>
 <button id="startbtn" class="ui teal button" onclick="startService();">Start Service</button>
-<button id="stopbtn" class="ui red disabled button" onclick="stopService();">Stop Service</button>
+<button id="stopbtn" class="ui red notloopbackOnly disabled button" onclick="stopService();">Stop Service</button>
 <div id="rploopbackWarning" class="ui segment" style="display:none;">
     <b><i class="yellow warning icon"></i> Loopback Routing Warning</b><br>
     <small>This management interface is a loopback proxied service. <br>If you want to shutdown the reverse proxy server, please remove the proxy rule for the management interface and refresh.</small>
@@ -125,10 +125,10 @@
         if (data == true){
             //This management interface is reverse proxied by itself
             //do not allow turning off the proxy
-            $("#stopbtn").addClass("disabled");
+            $(".notloopbackOnly").addClass("disabled");
             loopbackProxiedInterface = true;
             $("#rploopbackWarning").show();
-        }
+        }   
     });
 
     //Get the latest server status from proxy server
@@ -192,7 +192,7 @@
             data = sortObjectByValue(data);
             $("#country").html((Object.keys(data)[0])?Object.keys(data)[0]:"No Data");
             $("#countryList").html(`
-            <div style="color: white;">
+            <div>
                 ${(Object.keys(data)[1])?Object.keys(data)[1]:"No Data"}<br>
                 ${(Object.keys(data)[2])?Object.keys(data)[2]:"No Data"}
             </div>

web/main.css

@@ -116,7 +116,7 @@ body{
 }
 
 .ui.red.button:not(.basic){
-    background-color: #c78e70 !important;
+    background-color: #cc3b3b !important;
 }
 
 .ui.menu .item{
@@ -144,14 +144,75 @@ body{
 /*
     Status style overwrite
 */
+#serverstatus{
+    height: 100%;
+}
+
+#statusTitle{
+    font-weight: 300;
+}
+
+.statustab{
+    border-radius: 0 !important;
+}
+
+.greybackground.statustab{
+    background-color: #414141 !important;
+    color: white;
+}
+
+.greybackground.statustab .ui.header:not(:first-child){
+    margin-top: 1em;
+}
+
+.greybackground.statustab span,
+.greybackground.statustab h1,
+.greybackground.statustab h2,
+.greybackground.statustab h3,
+.greybackground.statustab h4,
+.greybackground.statustab h5 {
+    color: white !important;
+}
+
+.greybackground.statustab .header{
+    color: #b7b7b7 !important;
+}
+
 #serverstatus.green{
-    background-color: #7fbbc5 !important;
+    background-color: #f6f6f6 !important;
+    border-bottom: 2px solid #3d9c64;
+}
+#serverstatus.green .sub.header{
+    color: rgb(224, 224, 224);
+}
+#serverstatus.green i,
+#serverstatus.green #statusTitle{
+    color: #3d9c64;
+}
+#serverstatus.green #statusText{
+    color: #2c583d;
+}
+
+
+#serverstatus:not(.green) .dot-container{
+    display:none;
 }
 
 #serverstatus:not(.green){
-    background-color: #5f5e5c !important;
+    background-color: #f6f6f6 !important;
+    background-image: url("img/plant.png");
+    background-position: right;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
 }
 
+#serverstatus:not(.green) #statusTitle,
+#serverstatus:not(.green) i,
+#serverstatus:not(.green) .sub.header{
+    color: #4c4c4c;
+}
+
+
 .statustab{
     min-height: 5.5em;
 }
@@ -170,6 +231,60 @@ body{
     color: rgb(37, 37, 37);
 }
 
+/* Decorative Animation */
+.dot-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    position: absolute;
+    bottom: 0.6em;
+    right: 1.2em;
+}
+  
+  .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #d9d9d9;
+    margin-right: 6px;
+    animation-name: dot-animation;
+    animation-duration: 4s;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+  }
+  
+  .dot:nth-child(1) {
+    animation-delay: 0s;
+  }
+  
+  .dot:nth-child(2) {
+    animation-delay: 1s;
+  }
+  
+  .dot:nth-child(3) {
+    animation-delay: 2s;
+  }
+  
+  .dot:nth-child(4) {
+    animation-delay: 3s;
+  }
+  
+  @keyframes dot-animation {
+    0% {
+      background-color: #d9d9d9;
+      transform: scale(1);
+    }
+    50% {
+      background-color: #3d9c64;
+      transform: scale(1.5);
+    }
+    100% {
+      background-color: #d9d9d9;
+      transform: scale(1);
+    }
+  }
+
 /*
     Uptime Monitor
 */