From c96c340a43c7b73fb7e66868fd7013ad98ad9bd3 Mon Sep 17 00:00:00 2001 From: polarDefender Date: Fri, 17 May 2024 13:29:33 -0700 Subject: [PATCH] added web pages --- static/backup.html | 100 ++++++++++++ static/connect.html | 92 +++++++---- static/css/backup.css | 18 +++ static/css/liquidity.css | 27 ++++ static/css/seed.css | 35 +++++ static/css/styles.css | 244 ++++++++++++++++++++++++++++++ static/{ => img}/LightningPub.png | Bin static/img/back.svg | 1 + static/img/close.svg | 1 + static/{ => img}/pub_logo.png | Bin static/img/question.svg | 1 + static/index.html | 113 +++++++++----- static/js/backup.js | 11 ++ static/js/liquidity.js | 9 ++ static/{ => js}/script.js | 6 +- static/js/seed.js | 15 ++ static/liquidity.html | 93 ++++++++++++ static/seed.html | 181 ++++++++++++++++++++++ static/styles.css | 168 -------------------- 19 files changed, 877 insertions(+), 238 deletions(-) create mode 100644 static/backup.html create mode 100644 static/css/backup.css create mode 100644 static/css/liquidity.css create mode 100644 static/css/seed.css create mode 100644 static/css/styles.css rename static/{ => img}/LightningPub.png (100%) create mode 100644 static/img/back.svg create mode 100644 static/img/close.svg rename static/{ => img}/pub_logo.png (100%) create mode 100644 static/img/question.svg create mode 100644 static/js/backup.js create mode 100644 static/js/liquidity.js rename static/{ => js}/script.js (66%) create mode 100644 static/js/seed.js create mode 100644 static/liquidity.html create mode 100644 static/seed.html delete mode 100644 static/styles.css diff --git a/static/backup.html b/static/backup.html new file mode 100644 index 00000000..9f09e81e --- /dev/null +++ b/static/backup.html @@ -0,0 +1,100 @@ + + + + + + + + + + + + Lightning.Pub + + + + +
+ Lightning Pub logo + Lightning Pub logo +
+ +
+
+ +

Backup

+

+ It looks like this is a + new node, it's important + establish backups. +

+
+ +
+ +
+
+
+ In addition to your seed phrase, you'll need a channel backup to +
+
+ recover funds should your node experience a hardware failure. +
+
+
+ It's important always to have the latest version of this backup, +
+
+ fortunately they're small enough to be cached on the Nostr relay. +
+
+
+ If you did not choose the developers relay, be sure your relay has + adequate storage policies to hold NIP78 events. +
+
+
+ +
+ +
+
+ +
+
+ + + + + + diff --git a/static/connect.html b/static/connect.html index 9e6a60e5..a7048a81 100644 --- a/static/connect.html +++ b/static/connect.html @@ -1,47 +1,77 @@ - - + + - - - - + + + + Lightning.Pub - - - + + + +
- Lightning Pub logo - Lightning Pub logo + Lightning Pub logo + Lightning Pub logo
-
-

Connect

-

To access the dashboard, use ShockWallet and tap the logo 3 times.

 -

Scan the QR with ShockWallet to insert the connection details.

 -
- -
+
+ +

Connect

+

+ Who's the Nostr user that owns this node, can recover the backups, and + connect to manage it? +

+
-
-
-

strfry.shock.network
npub123abcdefghhhhhhhhhhhhhhh


-

Note: Code contains a one-time pairing secret.

-
+
-
+
+
+

+ strfry.shock.network
npub123abcdefghhhhhhhhhhhhhhh +

+
+

Note: Code contains a one-time pairing secret.

+
-
-

Need Help?


-
+
- + + - - - \ No newline at end of file + + + diff --git a/static/css/backup.css b/static/css/backup.css new file mode 100644 index 00000000..08f98a8b --- /dev/null +++ b/static/css/backup.css @@ -0,0 +1,18 @@ +.description { + font-size: 14px; + color: #a3a3a3; + text-decoration: none solid rgb(163, 163, 163); + text-align: center; + text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); +} + +.warning-text { + font-size: 14px; + color: #c434e0; + font-style: italic; + text-decoration: none solid rgb(196, 52, 224); + text-align: center; + text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); + margin-top: 16px; +} + diff --git a/static/css/liquidity.css b/static/css/liquidity.css new file mode 100644 index 00000000..495f1f93 --- /dev/null +++ b/static/css/liquidity.css @@ -0,0 +1,27 @@ +.question-box { + display: inline-block; + position: relative; + top: -8px; + left: -4px; +} + +.question-box .question-content { + display: none; + position: absolute; + min-width: 280px; + background-color: var(--background-color); + color: #a3a3a3; + padding: 12px; + border: 2px solid #c423e0; + border-radius: 4px; + font-size: 14px; + transform: translate(-50%, -50%); + padding-top: 28px; + z-index: 200; +} + +.question-content .close-button { + position: absolute; + top: 4px; + right: 0; +} diff --git a/static/css/seed.css b/static/css/seed.css new file mode 100644 index 00000000..9f7d4d19 --- /dev/null +++ b/static/css/seed.css @@ -0,0 +1,35 @@ +.seed-box-container { + display: grid; + grid-template-columns: auto auto auto auto auto auto; + justify-content: center; + row-gap: 4px; + column-gap: 12px; +} + +@media (max-width: 680px) { + .seed-box-container { + grid-template-columns: auto auto auto auto; + } +} + +.blur-filter { + filter: blur(5px); +} + +.seed-box { + display: flex; + align-items: center; + gap: 4px; +} + +.reveal-button { + font-size: 14px; + color: #c434e0; + font-style: italic; + text-decoration: none solid rgb(196, 52, 224); + text-align: center; + text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); + background-color: transparent; + border: none; + margin-top: 16px; +} diff --git a/static/css/styles.css b/static/css/styles.css new file mode 100644 index 00000000..fae30a11 --- /dev/null +++ b/static/css/styles.css @@ -0,0 +1,244 @@ +:root { + --background-color: #16191c; + --color: #ffffff; + --color-marked: #ff7700; + --color-linked: #2aabe9; + --gradient: linear-gradient(60deg, #ff7700 0%, #c740c7 100%); + --font-size-h2: 36px; + --font-size-p: 16px; +} + +body { + margin-block-start: 15px; + font-family: Montserrat; + background-color: var(--background-color); + color: var(--color); + text-align: center; + overflow: scroll; +} + +header { + background-color: var(--background-color); + padding-inline: 2%; + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; +} + +main { + max-width: 500px; + width: 100%; + margin-inline: auto; +} + +* { + box-sizing: border-box; +} + +@media (min-width: 768px) { + body { + zoom: 1.4; + } +} + +@media (min-width: 2000px) { + body { + zoom: 1.6; + } +} + +@media screen and (max-width: 425px) { + header > img:nth-child(1) { + width: 30px; + height: auto; + } + + header > img:nth-child(2) { + width: auto; + height: 26px; + } +} + +input[type="text"] { + background-color: transparent; + padding: 7px 10px; + border: 1px solid #c740c7; + border-radius: 5px; + font-size: 14px; + color: #999999; + box-shadow: 0px 0px 2px rgba(0, 0, 0, 1); +} + +.icon-button { + background-color: transparent; + border: none; +} + +.push-button { + background-color: transparent; + padding: 10px 55px; + font-size: 20px; + color: var(--color); + text-align: center; + box-shadow: 0px 0px 2px rgba(0, 0, 0, 1); + background: linear-gradient(var(--background-color), var(--background-color)) + padding-box, + var(--gradient) border-box; + border-radius: 5px; + border: 2px solid transparent; +} + +h2 { + font-size: var(--font-size-h2); + font-weight: 400; +} + +p { + font-size: var(--font-size-p); +} + +a { + color: var(--color); + text-decoration: none; +} + +.text-gray { + color: #a3a3a3; + margin-block-end: 5px; +} + +.checkbox { + position: relative; +} + +/* Hide the default checkbox */ +.checkbox input[type="checkbox"] { + display: none; +} + +/* Create a new box */ +.checkbox label { + padding-left: 32px; + display: inline-block; + width: 100%; + font-size: 14px; + color: #a3a3a3; + text-decoration: none solid rgb(163, 163, 163); + text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); + text-align: left; +} + +.checkbox .checkbox-shape { + width: 20px; + height: 20px; + background-color: transparent; + border: 1px solid #a3a3a3; + border-radius: 5px; + position: absolute; + top: 50%; + transform: translate(0, -50%); + z-index: -1; +} + +/* Display a checkmark when the checkbox is checked */ +.checkbox input[type="checkbox"]:checked + .checkbox-shape::before { + content: "✔"; + color: #a012c7; + font-size: 20px; + text-align: center; + line-height: 1; +} + +.line { + margin-block: 24px; + background: var(--gradient); + width: 100%; + height: 1px; + margin-inline: auto; +} + +.marked { + color: var(--color-marked); +} + +.linked { + color: var(--color-linked); +} + +.setup-footer > p { + line-height: 4px; +} + +.setup-header { + position: relative; +} + +.setup-header > .back-button { + position: absolute; + top: 0; + left: 0; +} + +.setup-header > h2 { + margin-block-start: 20px; +} + +.setup-header .header-title { + font-size: 16px; + text-align: center; + text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); +} + +#qrcode { + display: flex; + margin: auto; + justify-content: center; + margin-block-start: 40px; + margin-block-end: 15px; +} + +.input-group { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; +} + +.input-group span { + font-size: 16px; + color: #ffffff; + font-weight: bold; + text-decoration: none solid rgb(255, 255, 255); + text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); +} + +.input-group > input { + align-self: center; +} + +footer { + display: flex; + flex-direction: column; + align-items: center; + max-width: 500px; + width: 100%; + margin-inline: auto; + margin-top: 18px; +} + +footer .footer-text { + font-size: 12px; + color: #999999; + text-align: center; +} + +.checkbox-container { + display: flex; + justify-content: center; + margin-top: 12px; +} + +.hidden-button { + visibility: hidden; +} \ No newline at end of file diff --git a/static/LightningPub.png b/static/img/LightningPub.png similarity index 100% rename from static/LightningPub.png rename to static/img/LightningPub.png diff --git a/static/img/back.svg b/static/img/back.svg new file mode 100644 index 00000000..dd311c59 --- /dev/null +++ b/static/img/back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/close.svg b/static/img/close.svg new file mode 100644 index 00000000..1ff717e6 --- /dev/null +++ b/static/img/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/pub_logo.png b/static/img/pub_logo.png similarity index 100% rename from static/pub_logo.png rename to static/img/pub_logo.png diff --git a/static/img/question.svg b/static/img/question.svg new file mode 100644 index 00000000..aafbaff4 --- /dev/null +++ b/static/img/question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/index.html b/static/index.html index 54674617..092684a5 100644 --- a/static/index.html +++ b/static/index.html @@ -1,49 +1,90 @@ - - + + - - - - + + + + Lightning.Pub - - - + + +
- Lightning Pub logo - Lightning Pub logo + Lightning Pub logo + Lightning Pub logo
-
-

Setup

-

To manage your Pub, you will connect a via remote dashboard.

-

Confirm a few things to generate a connection string:

-
- -
+
+

Setup

+

+ Let's confirm some things before we start this Pub +

+
-
-

Use default managed relay,
1000 sats per month paid automatically after grace period.

-
- - -
-

Or, enter a custom relay:

-


- -

Need Help?

-
+
-
+
+
+ give this node a name that wallet users will see: + +
-
-

npub of this instance:

-

npub123abcdesdfsdfsdfsdfsfsd456abc123

-
+
+ If you want to use a specific Nostr relay, enter it now: + +
+ +
+ +
+ +
+ + +
- - \ No newline at end of file + + + + diff --git a/static/js/backup.js b/static/js/backup.js new file mode 100644 index 00000000..9579648f --- /dev/null +++ b/static/js/backup.js @@ -0,0 +1,11 @@ +$(() => { + $("#backup").click(() => { + const checked = $("#backup").prop("checked"); + const nextButton = $("#next-button"); + if (checked) { + nextButton.removeClass("hidden-button"); + } else { + nextButton.addClass("hidden-button"); + } + }); +}); diff --git a/static/js/liquidity.js b/static/js/liquidity.js new file mode 100644 index 00000000..4418542a --- /dev/null +++ b/static/js/liquidity.js @@ -0,0 +1,9 @@ +$(() => { + $("#show-question").click(() => { + $("#question-content").show(); + }); + + $("#close-question").click(() => { + $("#question-content").hide(); + }); +}); diff --git a/static/script.js b/static/js/script.js similarity index 66% rename from static/script.js rename to static/js/script.js index f21f547c..2b980019 100644 --- a/static/script.js +++ b/static/js/script.js @@ -3,8 +3,8 @@ $(document).ready(function() { text: "strfry.shock.network npub123abcdefghhhhhhhhhhhhhhh", width: 157, height: 157, - colorDark : "#ffffff", - colorLight : "#000000", - correctLevel : QRCode.CorrectLevel.H + colorDark : "#000000", + colorLight : "#ffffff", + // correctLevel : QRCode.CorrectLevel.H }); }); \ No newline at end of file diff --git a/static/js/seed.js b/static/js/seed.js new file mode 100644 index 00000000..2574aa40 --- /dev/null +++ b/static/js/seed.js @@ -0,0 +1,15 @@ +$(() => { + $("#reveal-button").click(() => { + $("#seed-box-container").removeClass("blur-filter"); + }); + + $('#copied').click(() => { + const checked = $("#copied").prop('checked'); + const nextButton = $("#next-button"); + if (checked) { + nextButton.removeClass("hidden-button"); + } else { + nextButton.addClass("hidden-button"); + } + }) +}); diff --git a/static/liquidity.html b/static/liquidity.html new file mode 100644 index 00000000..46bae1e5 --- /dev/null +++ b/static/liquidity.html @@ -0,0 +1,93 @@ + + + + + + + + + + + + Lightning.Pub + + + + +
+ Lightning Pub logo + Lightning Pub logo +
+ +
+
+ +

Liquidity

+

+ How do you want to manage Lightning connectivity? +

+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+ +
+
+ + + + + + diff --git a/static/seed.html b/static/seed.html new file mode 100644 index 00000000..97b07183 --- /dev/null +++ b/static/seed.html @@ -0,0 +1,181 @@ + + + + + + + + + + + + Lightning.Pub + + + + +
+ Lightning Pub logo + Lightning Pub logo +
+ +
+
+ +

Seed Phrase

+

+ Store your seed phrase somewhere safe, you'll need it if something + ever goes wrong with your nodes hard drive. +

+
+ +
+ +
+
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ 1 + albert +
+
+ + + +
+
+ +
+ +
+
+ +
+
+ + + + + + diff --git a/static/styles.css b/static/styles.css deleted file mode 100644 index 80fef982..00000000 --- a/static/styles.css +++ /dev/null @@ -1,168 +0,0 @@ -:root { - --background-color: #16191c; - --color: #ffffff; - --color-marked: #ff7700; - --color-linked: #2aabe9; - --gradient: linear-gradient(60deg, #ff7700 0%, #c740c7 100%); - --font-size-h2: 36px; - --font-size-p: 16px; -} - -body { - margin-block-start: 15px; - font-family: Montserrat; - background-color: var(--background-color); - color: var(--color); - text-align: center; - overflow: scroll; -} - -header { - background-color: var(--background-color); - padding-inline: 2%; - display: flex; - flex-direction: row; - align-items: center; - gap: 1rem; -} - -main { - max-width: 700px; - width: 100%; - margin-inline: auto; -} - -@media (min-width: 768px) { - body { - zoom: 1.4; - } - -} - -@media (min-width: 2000px) { - body { - zoom: 1.6; - } - -} - -@media screen and (max-width: 425px) { - header>img:nth-child(1){ - width: 30px; - height: auto; - } - - header>img:nth-child(2){ - width: auto; - height: 26px; - } -} - -input[type="text"] { - background-color: transparent; - padding: 7px 10px; - border: 1px solid #c740c7; - border-radius: 5px; - font-size: 14px; - color: #999999; - text-align: center; - box-shadow: 0px 0px 2px rgba(0,0,0,1); -} - -button { - background-color: transparent; - padding: 10px 55px; - font-size: 20px; - color: var(--color); - text-align: center; - box-shadow: 0px 0px 2px rgba(0,0,0,1); - background: linear-gradient(var(--background-color), var(--background-color)) padding-box, var(--gradient) border-box; - border-radius: 5px; - border: 1px solid transparent; -} - - -h2 { - font-size: var(--font-size-h2); - font-weight: 400; -} - -p { - font-size: var(--font-size-p); -} - -a { - color: var(--color); - text-decoration: none; -} - -.text-gray { - color: #a3a3a3; - margin-block-end: 5px; -} - -/* Hide the default checkbox */ -.checkbox input[type="checkbox"] { - display: none; -} - -/* Create a new box */ -.checkbox label { - position: relative; -} - -.checkbox label::before { - content: ""; - display: inline-block; - width: 20px; - height: 20px; - margin-right: 10px; - background-color: transparent; - border: 1px solid #a3a3a3; - border-radius: 5px; -} - -/* Display a checkmark when the checkbox is checked */ -.checkbox input[type="checkbox"]:checked + label::after { - content: "✔"; - color: #a012c7; - font-size: 20px; - position: absolute; - left: 1px; - top: -11px; - width: 20px; - height: 20px; - text-align: center; -} - -.line { - margin-block: 30px; - background: var(--gradient); - width: 347px; - height: 2px; - margin-inline: auto; -} - -.marked { - color: var(--color-marked); -} - -.linked { - color: var(--color-linked); -} - -.setup-footer>p { - line-height: 4px; -} - -.setup-header>h2 { - margin-block-start: 20px; -} - -#qrcode { - display: flex; - margin: auto; - justify-content: center; - margin-block-start: 40px; - margin-block-end: 15px; -}