From 7573347b6c9fadb9e086df2cce3cb2b512d8a309 Mon Sep 17 00:00:00 2001
From: suseendhiran17 <58357088+suseendhiran17@users.noreply.github.com>
Date: Mon, 19 Sep 2022 10:59:42 +0530
Subject: [PATCH] mobile view change : suseendhiran

---
 app/views/status.ejs | 231 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 231 insertions(+)

diff --git a/app/views/status.ejs b/app/views/status.ejs
index dcbf32c..031f9b8 100644
--- a/app/views/status.ejs
+++ b/app/views/status.ejs
@@ -15,6 +15,10 @@
       }, 300000);
     </script>
     <style>
+   
+
+    /* Desktops and laptops ----------- */
+    @media only screen  and (min-width : 1224px) {
       b {
         font-family: Arial, Helvetica, sans-serif;
         color: #3bd671 !important;
@@ -234,7 +238,234 @@
         }
         .xd-content .xd-button.xd-ok {
             background: #734caf;
+        }    
+      }
+
+
+
+       /* Smartphones (portrait and landscape) ----------- */
+    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+      b {
+        font-family: Arial, Helvetica, sans-serif;
+        color: #3bd671 !important;
+      }
+      b1 {
+        font-family: Arial, Helvetica, sans-serif;
+        color: red
+      }
+      .dot {
+        height: 25px;
+        width: 25px;
+        background-color: lightgreen;
+        border-radius: 90%;
+        display: inline-block;
+        cursor: pointer;
+        box-shadow: 0 0 0 rgba(204,169,44, 0.4);
+        animation: pulse 2s infinite;      
+      }
+      .dot:hover {
+        animation: none;
+      }
+      .dot1 {
+        height: 25px;
+        width: 25px;
+        background-color: red;
+        border-radius: 90%;
+        display: inline-block;
+        cursor: pointer;
+        box-shadow: 0 0 0 rgba(204,169,44, 0.4);
+        animation: pulse 2s infinite;      
+      }
+      .dot1:hover {
+        animation: none;
+      }
+      
+      @-webkit-keyframes pulse {
+        0% {
+          -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
         }
+        70% {
+            -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
+        }
+        100% {
+            -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
+        }
+      }
+      @keyframes pulse {
+        0% {
+          -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
+          box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
+        }
+        70% {
+            -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
+            box-shadow: 0 0 0 10px rgba(204,169,44, 0);
+        }
+        100% {
+            -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
+            box-shadow: 0 0 0 0 rgba(204,169,44, 0);
+        }
+      }
+      .header {
+          background: rgb(3, 37, 37);
+          padding: 10px 0;
+          height: 13%;
+          width: 120%;
+      }
+      .with-in-header{
+        color: white;
+        text-align: right;
+        position: relative;
+        right: 70px;
+        padding-left: 2em;
+      }
+      .last-update{
+        color: white;
+        font-size: large;
+        text-align: right;
+        position: relative;
+        right: 70px;
+        padding-left: 2em;
+      }
+      .header1 {
+          background: white;
+          border-radius: 6px;
+          /* border: 2px solid #1f221c; */
+          text-align: left;
+          padding: 10px 0;
+          padding-top: 2em;
+          padding-left: 2em;
+          height: 40%;
+          width: 88%;
+          position: relative;
+          left: 70px;
+          top: 65px;
+      }
+      .header2 {
+          background: white;
+          text-align: left;
+          padding: 10px 0;         
+          width: 80%;
+          position: relative;
+          left: 70px;
+          top: 100px;
+      }
+      .header3 {
+          background: white;
+          text-align: left;
+          padding: 10px 0; 
+          width: 120%;
+          position: relative;
+          left: 60px;
+          top: 100px;
+      }
+      .header4 {
+          background: white;
+          text-align: left;
+          padding: 10px 0;         
+          width: 80%;
+          position: relative;
+          left: 70px;
+          top: 100px;
+      }
+      .header5 {
+          background: white;
+          text-align: left;
+          padding: 10px 0; 
+          width: 120%;
+          position: relative;
+          left: 70px;
+          top: 100px;
+      }
+      .header6 {
+          background: white;
+          text-align: left;
+          padding: 10px 0;         
+          width: 80%;
+          position: relative;
+          left: 70px;
+          top: 100px;
+      }
+      .header7 {
+          background: white;
+          text-align: left;
+          padding: 10px 0; 
+          width: 120%;
+          position: relative;
+          left: 70px;
+          top: 100px;
+      }
+      .uk-text-primary {
+      color: #3bd671 !important;
+      }
+      .uk-text-primary1 {
+      color: red;
+      font-family: Arial, Helvetica, sans-serif;
+      }
+      #tab-des {
+        font-family: Arial, Helvetica, sans-serif;
+        border-collapse: collapse;
+        width: 87%;
+      }
+      
+      #tab-des th , #tab-des td {
+        border: 1px solid #ddd;
+        width: 0em;
+        padding: 8px;
+        text-align: center;
+        
+      }
+
+      #tab-des tr:nth-child(even){background-color: #f2f2f2;}
+      
+      #tab-des tr:hover {
+        background-color: #ddd;
+      }
+      
+      #tab-des th {
+        padding-top: 12px;
+        padding-bottom: 12px;
+        text-align: center;
+        background-color: #04AA6D;
+        color: white;
+      }
+      
+       #tab-des-2 {
+        font-family: Arial, Helvetica, sans-serif;
+        border-collapse: collapse;
+        width: 87%;
+        top: 100px;
+      }
+      
+      #tab-des-2 td, #tab-des-2 th {
+        border: 1px solid #ddd;
+        width: 0em;
+        padding: 8px;
+        text-align: center;
+      }
+  
+      #tab-des-2 tr:nth-child(even){background-color: #f2f2f2;}
+      
+      #tab-des-2 tr:hover {background-color: #ddd;}
+      
+      #tab-des-2 th {
+        padding-top: 12px;
+        padding-bottom: 12px;
+        text-align: center;
+        background-color: #04AA6D;
+        color: white;
+      }
+
+      .xd-content .xd-body .xd-body-inner {
+            max-height: unset;
+        }
+        .xd-content .xd-body p {
+            color: #f0f;
+            text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
+        }
+        .xd-content .xd-button.xd-ok {
+            background: #734caf;
+        }
+    } 
     </style> 
   <title  class="bi-alarm">Status</title>
   <% if ( down == 0) { %>