added web pages
This commit is contained in:
polarDefender
parent
e570167a5e
commit
c96c340a43
19 changed files with 877 additions and 238 deletions
100
static/backup.html
Normal file
100
static/backup.html
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<!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/backup.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">
|
||||
<button class="icon-button back-button" onclick="history.back()">
|
||||
<img src="img/back.svg" alt="" />
|
||||
</button>
|
||||
<h2>Backup</h2>
|
||||
<p class="header-title">
|
||||
It looks like this is a
|
||||
<span style="font-weight: bold">new</span> node, it's important
|
||||
establish backups.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<section class="setup-content">
|
||||
<div class="description-box">
|
||||
<div class="description">
|
||||
In addition to your seed phrase, you'll need a channel backup to
|
||||
</div>
|
||||
<div class="description">
|
||||
recover funds should your node experience a hardware failure.
|
||||
</div>
|
||||
<br />
|
||||
<div class="description">
|
||||
It's important always to have the latest version of this backup,
|
||||
</div>
|
||||
<div class="description">
|
||||
fortunately they're small enough to be cached on the Nostr relay.
|
||||
</div>
|
||||
</div>
|
||||
<div class="warning-text">
|
||||
If you did not choose the developers relay, be sure your relay has
|
||||
adequate storage policies to hold NIP78 events.
|
||||
</div>
|
||||
<div class="checkbox-container">
|
||||
<div class="checkbox" style="margin-top: 12px">
|
||||
<input type="checkbox" id="backup" />
|
||||
<div class="checkbox-shape"></div>
|
||||
<label for="backup">
|
||||
Encrypted Backup to Nostr Relay
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="push-button hidden-button"
|
||||
onclick="location.href='seed.html'"
|
||||
style="margin-top: 92px;"
|
||||
id="next-button"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
<div>By proceeding you acknowledge that this is</div>
|
||||
<div>bleeding-edge software, and agree to the providers</div>
|
||||
<div>
|
||||
<span style="color: #c434e0">terms</span> regarding any services
|
||||
herein.
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<p class="marked">Need Help?</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/backup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="styles.css">
|
||||
<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" />
|
||||
<!-- HTML Meta Tags -->
|
||||
<title>Lightning.Pub</title>
|
||||
<meta name="description" content="Lightning for Everyone">
|
||||
</head>
|
||||
<body>
|
||||
<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="pub_logo.png" width="38px" height="auto" alt="Lightning Pub logo">
|
||||
<img src="LightningPub.png" height="33px" alt="Lightning Pub logo">
|
||||
<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>Connect</h2>
|
||||
<a href=""><p>To access the dashboard, use <span class="linked">ShockWallet</span> and tap the logo 3 times.</p></a>
|
||||
<a href=""><p>Scan the QR with <span class="linked">ShockWallet</span> to insert the connection details.</p></a>
|
||||
</section>
|
||||
<section class="setup-header">
|
||||
<button class="icon-button back-button" onclick="history.back()">
|
||||
<img src="img/back.svg" alt="" />
|
||||
</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?
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="line"></div>
|
||||
<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>
|
||||
</section>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<section class="setup-footer">
|
||||
<p class="marked">Need Help?</p><br>
|
||||
</section>
|
||||
<button
|
||||
class="push-button"
|
||||
style="margin-top: 32px"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
<div>By proceeding you acknowledge that this is</div>
|
||||
<div>bleeding-edge software, and agree to the providers</div>
|
||||
<div>
|
||||
<span style="color: #c434e0">terms</span> regarding any services
|
||||
herein.
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<p class="marked">Need Help?</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
18
static/css/backup.css
Normal file
18
static/css/backup.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
27
static/css/liquidity.css
Normal file
27
static/css/liquidity.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
35
static/css/seed.css
Normal file
35
static/css/seed.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
244
static/css/styles.css
Normal file
244
static/css/styles.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
1
static/img/back.svg
Normal file
1
static/img/back.svg
Normal file
|
|
@ -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="24" height="24"><g><path xmlns:default="http://www.w3.org/2000/svg" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" style="fill: rgb(255, 255, 255);" vector-effect="non-scaling-stroke"/></g></svg>
|
||||
|
After Width: | Height: | Size: 383 B |
1
static/img/close.svg
Normal file
1
static/img/close.svg
Normal file
|
|
@ -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 41 41" width="20" height="20"><g><path xmlns:default="http://www.w3.org/2000/svg" d="M35.6,41.5c-0.8,0-1.6-0.3-2.1-0.9L20.7,27.8L8,40.6c-1.1,1.1-3.1,1.1-4.2,0l-2.8-2.8c-1.2-1.2-1.2-3.1,0-4.3l12.7-12.8 L0.9,7.9C0.3,7.4,0,6.6,0,5.8s0.3-1.6,0.9-2.1l2.8-2.8c1.1-1.1,3.1-1.1,4.2,0l12.7,12.8L33.5,0.9c1.1-1.1,3.1-1.1,4.2,0l2.8,2.8 c0.6,0.6,0.9,1.3,0.9,2.1s-0.3,1.6-0.9,2.1L27.8,20.7l12.7,12.8c1.2,1.2,1.2,3.1,0,4.3l-2.8,2.8C37.1,41.1,36.4,41.5,35.6,41.5z M20.7,25l14.2,14.2c0.4,0.4,1,0.4,1.4,0l2.8-2.8c0.4-0.4,0.4-1,0-1.4L25,20.7L39.1,6.5c0.2-0.2,0.3-0.4,0.3-0.7s-0.1-0.5-0.3-0.7 l-2.8-2.8c-0.4-0.4-1-0.4-1.4,0L20.7,16.5L6.5,2.3c-0.4-0.4-1-0.4-1.4,0L2.3,5.1C2.1,5.3,2,5.6,2,5.8s0.1,0.5,0.3,0.7l14.2,14.2 L2.3,34.9c-0.4,0.4-0.4,1,0,1.4l2.8,2.8c0.4,0.4,1,0.4,1.4,0L20.7,25z" style="fill: rgb(196, 52, 224);" vector-effect="non-scaling-stroke"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1,008 B |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
1
static/img/question.svg
Normal file
1
static/img/question.svg
Normal file
|
|
@ -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" id="question-circle" d="M13.24,17.24c-0.06,0.06-0.15,0.09-0.24,0.09h-2c-0.18,0.01-0.32-0.13-0.33-0.31c0-0.01,0-0.01,0-0.02 v-2c-0.01-0.18,0.13-0.32,0.31-0.33c0.01,0,0.01,0,0.02,0h2c0.18-0.01,0.32,0.13,0.33,0.31c0,0.01,0,0.01,0,0.02v2 C13.33,17.09,13.3,17.18,13.24,17.24z M16,10c0,0.29-0.04,0.57-0.13,0.84c-0.07,0.22-0.17,0.43-0.29,0.63 c-0.13,0.19-0.28,0.36-0.46,0.5c-0.15,0.13-0.31,0.25-0.48,0.36l-0.51,0.3c-0.23,0.13-0.42,0.31-0.57,0.52 c-0.12,0.15-0.2,0.33-0.22,0.52c0.01,0.18-0.13,0.32-0.31,0.33c-0.01,0-0.02,0-0.03,0h-2c-0.18,0.01-0.32-0.13-0.33-0.31 c0-0.01,0-0.01,0-0.02v-0.38c0.01-0.48,0.21-0.94,0.54-1.29c0.33-0.38,0.74-0.69,1.2-0.9c0.27-0.11,0.51-0.27,0.71-0.47 c0.15-0.18,0.22-0.4,0.21-0.63c-0.02-0.26-0.17-0.49-0.39-0.61c-0.55-0.35-1.24-0.35-1.79,0c-0.34,0.29-0.64,0.63-0.9,1 c-0.06,0.08-0.16,0.12-0.26,0.12c-0.07,0.01-0.14-0.02-0.2-0.06l-1.37-1c-0.14-0.09-0.19-0.27-0.1-0.41 c0.01-0.01,0.01-0.02,0.02-0.03C9.11,7.6,10.6,6.74,12.2,6.79c1.25-0.02,2.44,0.54,3.22,1.51C15.8,8.79,16,9.38,16,10L16,10z M18.93,8c-0.7-1.21-1.71-2.22-2.93-2.92C14.79,4.37,13.41,3.99,12,4c-1.41-0.01-2.79,0.37-4,1.08C6.79,5.78,5.78,6.79,5.08,8 C4.37,9.21,3.99,10.59,4,12c-0.01,1.41,0.36,2.79,1.07,4c0.7,1.21,1.71,2.22,2.93,2.92c1.21,0.71,2.59,1.09,4,1.08 c1.41,0.01,2.79-0.36,4-1.07c1.21-0.7,2.22-1.71,2.92-2.93c0.71-1.21,1.09-2.59,1.08-4c0.01-1.41-0.37-2.79-1.08-4H18.93z" style="fill: rgb(163, 163, 163);" vector-effect="non-scaling-stroke"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,49 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="styles.css">
|
||||
<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" />
|
||||
<!-- HTML Meta Tags -->
|
||||
<title>Lightning.Pub</title>
|
||||
<meta name="description" content="Lightning for Everyone">
|
||||
</head>
|
||||
<body>
|
||||
<meta name="description" content="Lightning for Everyone" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="pub_logo.png" width="38px" height="auto" alt="Lightning Pub logo">
|
||||
<img src="LightningPub.png" height="33px" alt="Lightning Pub logo">
|
||||
<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>Setup</h2>
|
||||
<p>To manage your Pub, you will connect a via remote dashboard.</p>
|
||||
<p>Confirm a few things to generate a connection string:</p>
|
||||
</section>
|
||||
<section class="setup-header">
|
||||
<h2>Setup</h2>
|
||||
<p class="header-title">
|
||||
Let's confirm some things before we start this Pub
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
|
||||
<section class="setup-content">
|
||||
<p class="text-gray">Use default managed relay, <br>1000 sats per month paid automatically after grace period.</p>
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="customCheckbox">
|
||||
<label for="customCheckbox"></label>
|
||||
</div>
|
||||
<p>Or, enter a custom relay:</p>
|
||||
<input type="text" placeholder="strfry.shock.network" value="" /><br><br><br>
|
||||
<button onclick="window.location.href='/connect.html'">Generate</button>
|
||||
<p class="marked">Need Help?</p>
|
||||
</section>
|
||||
<section class="setup-content">
|
||||
<div class="input-group">
|
||||
<span>give this node a name that wallet users will see:</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Nodey McNodeFace"
|
||||
value=""
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="line"></div>
|
||||
<div class="input-group" style="margin-top: 38px">
|
||||
<span>If you want to use a specific Nostr relay, enter it now:</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="wss://relay.lightning.pub"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section class="setup-footer">
|
||||
<p class="text-gray">npub of this instance:</p>
|
||||
<p>npub123abcdesdfsdfsdfsdfsfsd456abc123</p>
|
||||
</section>
|
||||
<div class="checkbox" style="margin-top: 12px">
|
||||
<input type="checkbox" id="customCheckbox" />
|
||||
<div class="checkbox-shape"></div>
|
||||
<label for="customCheckbox">
|
||||
Use the default managed relay service and auto-pay 1000 sats
|
||||
permonth to support developers
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="push-button"
|
||||
onclick="location.href='liquidity.html'"
|
||||
style="margin-top: 92px"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
<div>By proceeding you acknowledge that this is</div>
|
||||
<div>bleeding-edge software, and agree to the providers</div>
|
||||
<div>
|
||||
<span style="color: #c434e0">terms</span> regarding any services
|
||||
herein.
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<p class="marked">Need Help?</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
11
static/js/backup.js
Normal file
11
static/js/backup.js
Normal file
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
});
|
||||
9
static/js/liquidity.js
Normal file
9
static/js/liquidity.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
$(() => {
|
||||
$("#show-question").click(() => {
|
||||
$("#question-content").show();
|
||||
});
|
||||
|
||||
$("#close-question").click(() => {
|
||||
$("#question-content").hide();
|
||||
});
|
||||
});
|
||||
|
|
@ -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
|
||||
});
|
||||
});
|
||||
15
static/js/seed.js
Normal file
15
static/js/seed.js
Normal file
|
|
@ -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");
|
||||
}
|
||||
})
|
||||
});
|
||||
93
static/liquidity.html
Normal file
93
static/liquidity.html
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<!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/liquidity.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">
|
||||
<button class="icon-button back-button" onclick="history.back()">
|
||||
<img src="img/back.svg" alt="" />
|
||||
</button>
|
||||
<h2>Liquidity</h2>
|
||||
<p class="header-title">
|
||||
How do you want to manage Lightning connectivity?
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<section class="setup-content">
|
||||
<div class="checkbox" style="margin-top: 60px">
|
||||
<input type="checkbox" id="automate" />
|
||||
<div class="checkbox-shape"></div>
|
||||
<label for="automate">
|
||||
Use Boostrap Service to Automate
|
||||
<div class="question-box">
|
||||
<button class="icon-button" id="show-question">
|
||||
<img src="img/question.svg" />
|
||||
</button>
|
||||
<div class="question-content" id="question-content">
|
||||
Bootstrapping uses a trusted peer until channel management
|
||||
events cost less than 1% to execute
|
||||
<button class="icon-button close-button" id="close-question">
|
||||
<img src="img/close.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox" style="margin-top: 60px">
|
||||
<input type="checkbox" id="manual" />
|
||||
<div class="checkbox-shape"></div>
|
||||
<label for="manual">Manage my channels manually</label>
|
||||
</div>
|
||||
<button
|
||||
class="push-button"
|
||||
onclick="location.href='backup.html'"
|
||||
style="margin-top: 92px"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
<div>By proceeding you acknowledge that this is</div>
|
||||
<div>bleeding-edge software, and agree to the providers</div>
|
||||
<div>
|
||||
<span style="color: #c434e0">terms</span> regarding any services
|
||||
herein.
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<p class="marked">Need Help?</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/liquidity.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
181
static/seed.html
Normal file
181
static/seed.html
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<!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/seed.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">
|
||||
<button class="icon-button back-button" onclick="history.back()">
|
||||
<img src="img/back.svg" alt="" />
|
||||
</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.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<section class="setup-content">
|
||||
<div class="seed-box-container blur-filter" id="seed-box-container">
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
<div class="seed-box">
|
||||
<span>1</span>
|
||||
<span>albert</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="reveal-button" id="reveal-button">Click To Reveal</button>
|
||||
|
||||
<div class="checkbox-container">
|
||||
<div class="checkbox" style="margin-top: 12px">
|
||||
<input type="checkbox" id="copied" />
|
||||
<div class="checkbox-shape"></div>
|
||||
<label for="copied">
|
||||
I have copied this somewhere safe
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
id="next-button"
|
||||
class="push-button hidden-button"
|
||||
onclick="location.href='connect.html'"
|
||||
style="margin-top: 92px"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-text">
|
||||
<div>By proceeding you acknowledge that this is</div>
|
||||
<div>bleeding-edge software, and agree to the providers</div>
|
||||
<div>
|
||||
<span style="color: #c434e0">terms</span> regarding any services
|
||||
herein.
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<p class="marked">Need Help?</p>
|
||||
</footer>
|
||||
|
||||
<script src="js/seed.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue