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; 
+    font-size: 12px;
-    display: flex; 
+    display: flex;
-    justify-content: end; 
+    justify-content: end;
     align-items: center;
     color: #999999;
 }
+
 .invite-link {
-    margin-top:5px; 
+    margin-top: 5px;
-    font-size:12px; 
+    font-size: 12px;
-    color:#c434e0; 
+    color: #c434e0;
     text-decoration: underline;
 }
+
 @media screen and (max-width: 450px) {
-    .status-element  {
+    .status-element {
-      gap: 0px;
+        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;
 }

static/js/status.js

@@ -0,0 +1,13 @@
+$(() => {
+    $("#show-reset").click(() => {
+        $("#reset-content").text('Reset the administrator account if you lost access via the Dashboard.');
+        $("#reset-box").show();
+    });
+    $("#close-reset-box").click(() => {
+        $("#reset-box").hide();
+    });
+    $("#show-nostr").click(() => {
+        $("#reset-content").text("Changing the Nostr relay may cause some clients to lose connection. We'll make one last update to the old relay to tell clients about the new relay.");
+        $("#reset-box").show();
+    });
+});

static/stauts.html

@@ -42,7 +42,7 @@
                 <div class="fc-grey editabl-content">
                     Nodey McNodeFace 
                     <div class="question-box">
-                        <button class="icon-button" id="show-question">
+                        <button class="icon-button" id="show-nodey">
                           <img src="img/pencil.svg" />
                         </button>
                     </div>
@@ -53,7 +53,7 @@
                 <div class="fc-grey editabl-content">
                     wss://relay.lightning.pub 
                     <div class="question-box">
-                        <button class="icon-button" id="show-question">
+                        <button class="icon-button" id="show-nostr">
                           <img src="img/pencil.svg" />
                         </button>
                     </div>
@@ -66,8 +66,26 @@
                 </div>
             </div>
         </div>
-        <div style="display: flex; justify-content: end;">
+        <div style="display: flex; justify-content: end;padding-right: 12px;">
-            <div class="marked" style="text-decoration: underline; margin-top: 5px;">Reset</div>
+            <div class="marked" id="show-reset" style="text-decoration: underline; margin-top: 5px;position: relative;">Reset 
+              <div class="watchdog-status">
+                <button class="icon-button" id="show-question">
+                  <img src="img/question.svg" />
+                </button>
+              </div>
+            </div>
+        </div>
+        <div id="reset-box">
+          <div style="width: 100%;height: 100%;position: relative;">
+            <button class="icon-button close-button" id="close-reset-box">
+              <img src="img/close.svg" alt="">
+            </button>
+            <div class="reset-box-content" id="reset-content">
+            </div>
+            <div class="continue-button-container">
+              <div class="continue-button" onclick="location.href='connect.html'">Continue</div>
+            </div>
+          </div>
         </div>
         <div style="margin-top: 40px;">
             <div class="status-element">
@@ -83,7 +101,14 @@
                 </div>
             </div>
             <div class="status-element">
-                <div>Watchdog Status:</div>
+                <div style="position: relative;">
+                  Watchdog Status: 
+                  <div class="watchdog-status">
+                    <button class="icon-button" id="show-question">
+                      <img src="img/question.svg" />
+                    </button>
+                  </div>  
+                </div>
                 <div>
                     <span class="green-dot">&#9679;</span> No Alarms
                 </div>
@@ -91,8 +116,8 @@
         </div>
         <div style="margin-top: 20px;">
             <div style="font-size: 13px; text-align: left;">Guest Invitation Link:</div>
-            <div class="invite-link">
+            <a href="https://my.shockwallet.app/invite/nprofile12345678899988" target="_blank" style="font-size: 11px;" class="invite-link">
-                https://my.shockwallet.app/invite/nprofile12345678899988
+              https://my.shockwallet.app/invite/nprofile12345678899988
             </div>
         </div>
       </section>
@@ -104,6 +129,6 @@
       <p class="marked">Need Help?</p>
     </footer>
 
-    <script src="js/seed.js"></script>
+    <script src="js/status.js"></script>
   </body>
 </html>