From b368a77300772a18672c9088f19aaee98030c4ff Mon Sep 17 00:00:00 2001
From: polarDefender <patch.demon115@gmail.com>
Date: Thu, 30 May 2024 13:07:10 -0700
Subject: [PATCH] updated ui

---
 static/backup.html     |   2 +-
 static/connect.html    |  33 +++++++------
 static/css/connect.css |  49 ++++++++++++++++++
 static/css/status.css  |  37 ++++++++++++++
 static/css/styles.css  |   5 +-
 static/img/pencil.svg  |   1 +
 static/index.html      |   2 +-
 static/js/backup.js    |   6 ++-
 static/js/connect.js   |  19 +++++++
 static/liquidity.html  |   2 +-
 static/seed.html       |   3 +-
 static/stauts.html     | 109 +++++++++++++++++++++++++++++++++++++++++
 12 files changed, 243 insertions(+), 25 deletions(-)
 create mode 100644 static/css/connect.css
 create mode 100644 static/css/status.css
 create mode 100644 static/img/pencil.svg
 create mode 100644 static/js/connect.js
 create mode 100644 static/stauts.html

diff --git a/static/backup.html b/static/backup.html
index 7c94bf59..78b5b399 100644
--- a/static/backup.html
+++ b/static/backup.html
@@ -48,7 +48,7 @@
           </div>
           <br />
           <div class="description">
-            It's important always to have the latest version of this file, fortunately it's small enough to be cached on the Nostr relay automatically.
+            It's important always to have the latest version of this file. Fortunately, it's small enough to automatically store on the Nostr relay.
           </div>
         </div>
         <div class="warning-text">
diff --git a/static/connect.html b/static/connect.html
index a7048a81..bfbea0e6 100644
--- a/static/connect.html
+++ b/static/connect.html
@@ -10,6 +10,7 @@
       href="https://fonts.googleapis.com/css?family=Montserrat"
     />
     <link rel="stylesheet" href="css/styles.css" />
+    <link rel="stylesheet" href="css/connect.css" />
     <!-- HTML Meta Tags -->
     <title>Lightning.Pub</title>
     <meta name="description" content="Lightning for Everyone" />
@@ -33,28 +34,29 @@
         </button>
         <h2>Connect</h2>
         <p class="header-title">
-          Who's the Nostr user that owns this node, can recover the backups, and
-          connect to manage it?
+          You can now manage your node remotely
         </p>
       </section>
 
       <div class="line"></div>
 
       <section class="setup-content">
-        <div id="qrcode"></div>
-        <p class="text-gray">
-          strfry.shock.network <br />npub123abcdefghhhhhhhhhhhhhhh
-        </p>
-        <br />
-        <p class="text-gray">Note: Code contains a one-time pairing secret.</p>
+        <div>For dashboard access, use <a href="https://preview.uxpin.com/ae6e6372ab26cd13438d486d4d1ac9d184ec8e82#/pages/164889267" style="color: #2aabe9;" target="_blank">ShockWallet</a> and tap the logo 3 times.</div>
+        <div style="font-size: 13px; margin-top: 5px;">Scan the QR or Copy-Paste the string to establish the connection.</div>
+        <div style="display: flex; justify-content: center;">
+          <div class="qrcode-box" id="codebox">
+            <div style="font-size: 11px;">
+              <div style="text-align: center; color: #a3a3a3;">Code contains a one-time pairing secret</div>
+              <div style="text-align: center; color: #c434e0;" id="click-text">Click to reveal</div>
+            </div>
+            <div id="qrcode"></div>
+            <div style="color: #a3a3a3; font-size: 11px;">
+              <div>npub123abcdefghhhhhhhhhhhhhhh</div>
+              <div>relay.lightning.pub</div>
+            </div>
+          </div>
+        </div>
       </section>
-
-      <button
-        class="push-button"
-        style="margin-top: 32px"
-      >
-        Next
-      </button>
     </main>
 
     <footer>
@@ -73,5 +75,6 @@
     <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
 
     <script src="js/script.js"></script>
+    <script src="js/connect.js"></script>
   </body>
 </html>
diff --git a/static/css/connect.css b/static/css/connect.css
new file mode 100644
index 00000000..0f7d19e9
--- /dev/null
+++ b/static/css/connect.css
@@ -0,0 +1,49 @@
+.qrcode-box::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;
+}
+.qrcode-box {
+    display: block;
+    position: relative;
+    width: 253px;
+    height: 241px;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    margin-top: 10px;
+    padding: 10px;
+    transition: background-color 0.5s;
+    border-radius: 15px;
+}
+.qrcode-box:hover {
+    background-color: #80808062;
+    transition: background-color 0.3s;
+}
+
+.qrcode-box-clicked::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;
+}
+.qrcode-box-clicked {
+    display: block;
+    position: relative;
+    width: 253px;
+    height: 241px;
+    margin-top: 10px;
+    padding: 10px;
+    transition: background-color 0.5s;
+    border-radius: 15px;
+}
\ No newline at end of file
diff --git a/static/css/status.css b/static/css/status.css
new file mode 100644
index 00000000..83ae6c11
--- /dev/null
+++ b/static/css/status.css
@@ -0,0 +1,37 @@
+.status-element{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 100px;
+    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; 
+    align-items: center;
+    color: #999999;
+}
+.invite-link {
+    margin-top:5px; 
+    font-size:12px; 
+    color:#c434e0; 
+    text-decoration: underline;
+}
+@media screen and (max-width: 450px) {
+    .status-element  {
+      gap: 0px;
+    }
+    main {
+        zoom: 1.1;
+    }
+}
\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
index 2927c122..c47b5e00 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -223,10 +223,9 @@ a {
 
 #qrcode {
   display: flex;
-  margin: auto;
   justify-content: center;
-  margin-block-start: 40px;
-  margin-block-end: 15px;
+  margin: 5px;
+  filter: blur(5px);
 }
 
 .input-group {
diff --git a/static/img/pencil.svg b/static/img/pencil.svg
new file mode 100644
index 00000000..715e996c
--- /dev/null
+++ b/static/img/pencil.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="visible" preserveAspectRatio="none" viewBox="0 0 24 24" width="16" height="16"><g><path xmlns:default="http://www.w3.org/2000/svg" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" style="fill: rgb(140, 140, 140);" vector-effect="non-scaling-stroke"/></g></svg>
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index d83e1426..be67e1cf 100644
--- a/static/index.html
+++ b/static/index.html
@@ -36,7 +36,7 @@
 
       <section class="setup-content">
         <div class="input-group">
-          <span>Give this node a name that will be seen by wallet users:</span>
+          <span>Give this node a name that wallet users will see:</span>
           <input
             type="text"
             placeholder="Nodey McNodeFace"
diff --git a/static/js/backup.js b/static/js/backup.js
index ac4c7ea5..e9bf36d1 100644
--- a/static/js/backup.js
+++ b/static/js/backup.js
@@ -2,8 +2,9 @@ $(() => {
   let backup; let manual_backup;
   $("#backup").click(() => {
     backup = $("#backup").prop("checked");
+    $('#manual-backup').prop("checked",false);
     const nextButton = $("#next-button");
-    if (backup || manual_backup) {
+    if (backup) {
       nextButton.removeClass("hidden-button");
     } else {
       nextButton.addClass("hidden-button");
@@ -11,8 +12,9 @@ $(() => {
   });
   $("#manual-backup").click(()=>{
       manual_backup = $('#manual-backup').prop("checked");
+      $("#backup").prop("checked",false);
       const nextButton = $("#next-button");
-      if(backup || manual_backup) {
+      if(manual_backup) {
         nextButton.removeClass("hidden-button");
       } else {
         nextButton.addClass("hidden-button");
diff --git a/static/js/connect.js b/static/js/connect.js
new file mode 100644
index 00000000..de73d954
--- /dev/null
+++ b/static/js/connect.js
@@ -0,0 +1,19 @@
+$(() => {
+    $("#codebox").click(() => {
+        const divText = $("#click-text").text();
+        if(divText == "Click to copy"){
+            var copytext = $("#qrcode")[0].title;
+            var $temp = $("<textarea>");
+            $("body").append($temp);
+            $temp.val(copytext).select();
+            document.execCommand("copy");
+            $temp.remove();
+        } else {
+            $("#click-text").text("Click to copy");
+            $("#qrcode").css({
+                'filter': 'blur(0px)'
+            });
+        };
+    });
+  });
+  
\ No newline at end of file
diff --git a/static/liquidity.html b/static/liquidity.html
index 62cbc8c4..ad9c8d50 100644
--- a/static/liquidity.html
+++ b/static/liquidity.html
@@ -34,7 +34,7 @@
         </button>
         <h2>Manage Node Liquidity</h2>
         <p class="header-title">
-          How do you want to manage your Lightning nodes channels?
+          How do you want to manage Lightning channels?
         </p>
       </section>
 
diff --git a/static/seed.html b/static/seed.html
index b1a71241..0c5d0950 100644
--- a/static/seed.html
+++ b/static/seed.html
@@ -34,8 +34,7 @@
         </button>
         <h2>Seed Phrase</h2>
         <p class="header-title">
-          Store your seed phrase somewhere safe, you'll need it if something
-          ever goes wrong with your nodes hard drive.
+          Store your seed phrase somewhere safe, you will need it if something ever goes wrong with your node hard drive.
         </p>
       </section>
 
diff --git a/static/stauts.html b/static/stauts.html
new file mode 100644
index 00000000..d8ab3eeb
--- /dev/null
+++ b/static/stauts.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Montserrat"
+    />
+    <link rel="stylesheet" href="css/styles.css" />
+    <link rel="stylesheet" href="css/status.css" />
+    <!-- HTML Meta Tags -->
+    <title>Lightning.Pub</title>
+    <meta name="description" content="Lightning for Everyone" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  </head>
+  <body>
+    <header>
+      <img
+        src="img/pub_logo.png"
+        width="38px"
+        height="auto"
+        alt="Lightning Pub logo"
+      />
+      <img src="img/LightningPub.png" height="33px" alt="Lightning Pub logo" />
+    </header>
+
+    <main>
+      <section class="setup-header">
+        <h2>Node Status</h2>
+        <p class="header-title"></p>
+      </section>
+
+      <div class="line" style="width: 100%;"></div>
+
+      <section class="node-status">
+        <div>
+            <div class="status-element" style="margin-top: 15px;">
+                <div>Public Node Name:</div>
+                <div class="fc-grey editabl-content">
+                    Nodey McNodeFace 
+                    <div class="question-box">
+                        <button class="icon-button" id="show-question">
+                          <img src="img/pencil.svg" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="status-element" style="margin-top: 15px;">
+                <div>Nostr Relay:</div>
+                <div class="fc-grey editabl-content">
+                    wss://relay.lightning.pub 
+                    <div class="question-box">
+                        <button class="icon-button" id="show-question">
+                          <img src="img/pencil.svg" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="status-element" style="margin-top: 15px;">
+                <div>Administrator:</div>
+                <div>
+                    npub12334556677889990
+                </div>
+            </div>
+        </div>
+        <div style="display: flex; justify-content: end;">
+            <div class="marked" style="text-decoration: underline; margin-top: 5px;">Reset</div>
+        </div>
+        <div style="margin-top: 40px;">
+            <div class="status-element">
+                <div>Relay Status:</div>
+                <div>
+                    <span class="green-dot">&#9679;</span> Connected
+                </div>
+            </div>
+            <div class="status-element">
+                <div>Lightning Status:</div>
+                <div>
+                    <span class="yellow-dot">&#9679;</span> Syncing
+                </div>
+            </div>
+            <div class="status-element">
+                <div>Watchdog Status:</div>
+                <div>
+                    <span class="green-dot">&#9679;</span> No Alarms
+                </div>
+            </div>
+        </div>
+        <div style="margin-top: 20px;">
+            <div style="font-size: 13px; text-align: left;">Guest Invitation Link:</div>
+            <div class="invite-link">
+                https://my.shockwallet.app/invite/nprofile12345678899988
+            </div>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div class="footer-text" style="width: 80%">
+      <div class="line"></div>
+      <p class="marked">Need Help?</p>
+    </footer>
+
+    <script src="js/seed.js"></script>
+  </body>
+</html>