updated status page

static/css/status.css

@@ -1,4 +1,4 @@
-.status-element{
+.status-element {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -6,32 +6,113 @@
     margin-top: 10px;
     font-size: 15px;
 }
+
 .green-dot {
     font-size: 15px;
     color: #32a852;
 }
+
 .yellow-dot {
     font-size: 15px;
     color: #ccc731;
 }
+
 .editabl-content {
-    font-size: 12px; 
-    display: flex; 
-    justify-content: end; 
+    font-size: 12px;
+    display: flex;
+    justify-content: end;
     align-items: center;
     color: #999999;
 }
+
 .invite-link {
-    margin-top:5px; 
-    font-size:12px; 
-    color:#c434e0; 
+    margin-top: 5px;
+    font-size: 12px;
+    color: #c434e0;
     text-decoration: underline;
 }
+
 @media screen and (max-width: 450px) {
-    .status-element  {
-      gap: 0px;
+    .status-element {
+        gap: 20px;
     }
+
     main {
         zoom: 1.1;
     }
+    #reset-box {
+        top: 30%!important;
+    }
+}
+
+.watchdog-status {
+    position: absolute;
+    right: -22px;
+    top: -3px;
+}
+
+#reset-box {
+    width: 296px;
+    height: 122px;
+    border: 1px solid #c434e0;
+    border-radius: 5px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgb(0, 0, 0);
+    z-index: 1;
+    display: none;
+}
+
+#reset-box .close-button {
+    position: absolute;
+    top: 4px;
+    right: 0;
+}
+
+.reset-box-content {
+    padding: 28px 10px 5px 10px;
+    color: #a3a3a3;
+    font-size: 10px;
+    text-align: left;
+}
+
+.continue-button-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 10px;
+}
+
+.continue-button {
+    display: block;
+    position: relative;
+    border-radius: 100px;
+    text-align: center;
+    width: 134px;
+    height: 30px;
+    margin-top: 10px;
+    padding: 10px;
+    transition: background-color 0.5s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.continue-button::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 15px;
+    border: 1px solid transparent;
+    background: linear-gradient(60deg, #ff7700 0%, #c740c7 100% ) border-box;
+    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+}
+.continue-button:hover {
+    background-color: #373a3d;
+    transition: background-color 0.3s;
 }