aiolabs/lightning-pub
2
0
Fork 0
Code Issues 9 Pull requests 4 Projects Releases Packages Wiki Activity Actions

fixed flex box

Browse source
This commit is contained in:
polarDefender 2024-05-27 08:58:46 -07:00
parent c96c340a43
commit 1cb837a523
5 changed files with 49 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

17
static/backup.html
View file

@ -32,11 +32,10 @@
<button class="icon-button back-button" onclick="history.back()">
<img src="img/back.svg" alt="" />
</button>
<h2>Backup</h2>
<h2>Choose a Recovery Method</h2>
<p class="header-title">
It looks like this is a
<span style="font-weight: bold">new</span> node, it's important
establish backups.
<span style="font-weight: bold">New Node! 🎉</span> It's important
to backup your keys.
</p>
</section>
@ -45,17 +44,11 @@
<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.
In addition to your seed phrase, you also need channel details to 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.
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.
</div>
</div>
<div class="warning-text">

32
static/css/styles.css
View file

@ -9,12 +9,17 @@
}
body {
margin-block-start: 15px;
font-family: Montserrat;
background-color: var(--background-color);
color: var(--color);
text-align: center;
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
header {
@ -24,12 +29,14 @@ header {
flex-direction: row;
align-items: center;
gap: 1rem;
height: 4rem;
padding: 0.5rem 1rem;
}
main {
max-width: 500px;
width: 100%;
max-width: 600px;
margin-inline: auto;
padding: 1rem;
}
* {
@ -37,13 +44,13 @@ main {
}
@media (min-width: 768px) {
body {
body > * {
zoom: 1.4;
}
}
@media (min-width: 2000px) {
body {
body > * {
zoom: 1.6;
}
}
@ -143,7 +150,7 @@ a {
/* Display a checkmark when the checkbox is checked */
.checkbox input[type="checkbox"]:checked + .checkbox-shape::before {
content: "✔";
content: "✓";
color: #a012c7;
font-size: 20px;
text-align: center;
@ -182,6 +189,13 @@ a {
.setup-header > h2 {
margin-block-start: 20px;
padding: 0 24px;
}
@media (max-width: 768px) {
.setup-header > h2 {
font-size: 24px;
}
}
.setup-header .header-title {
@ -224,7 +238,9 @@ footer {
max-width: 500px;
width: 100%;
margin-inline: auto;
margin-top: 18px;
padding-top: 18px;
padding-left: 1rem;
padding-right: 1rem;
}
footer .footer-text {

7
static/index.html
View file

@ -27,9 +27,8 @@
<main>
<section class="setup-header">
<h2>Setup</h2>
<h2>Setup your Pub</h2>
<p class="header-title">
Let's confirm some things before we start this Pub
</p>
</section>
@ -37,7 +36,7 @@
<section class="setup-content">
<div class="input-group">
<span>give this node a name that wallet users will see:</span>
<span>Give this node a name that will be seen by wallet users:</span>
<input
type="text"
placeholder="Nodey McNodeFace"
@ -60,7 +59,7 @@
<div class="checkbox-shape"></div>
<label for="customCheckbox">
Use the default managed relay service and auto-pay 1000 sats
permonth to support developers
per month to support developers
</label>
</div>

10
static/js/liquidity.js
View file

@ -6,4 +6,14 @@ $(() => {
$("#close-question").click(() => {
$("#question-content").hide();
});
$("#automate").click(() => {
$('[data-group="service"]').prop("checked", false);
$("#automate").prop("checked", true);
});
$("#manual").click(() => {
$('[data-group="service"]').prop("checked", false);
$("#manual").prop("checked", true);
});
});

13
static/liquidity.html
View file

@ -32,9 +32,9 @@
<button class="icon-button back-button" onclick="history.back()">
<img src="img/back.svg" alt="" />
</button>
<h2>Liquidity</h2>
<h2>Manage Node Liquidity</h2>
<p class="header-title">
How do you want to manage Lightning connectivity?
How do you want to manage your Lightning nodes channels?
</p>
</section>
@ -42,17 +42,16 @@
<section class="setup-content">
<div class="checkbox" style="margin-top: 60px">
<input type="checkbox" id="automate" />
<input type="checkbox" id="automate" data-group="service" />
<div class="checkbox-shape"></div>
<label for="automate">
Use Boostrap Service to Automate
Use Automation Service
<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
Automation helps to reduce overall fees by trusting peers until channel management events cost >1% of their on-demand liquidity requirements
<button class="icon-button close-button" id="close-question">
<img src="img/close.svg" alt="" />
</button>
@ -61,7 +60,7 @@
</label>
</div>
<div class="checkbox" style="margin-top: 60px">
<input type="checkbox" id="manual" />
<input type="checkbox" id="manual" data-group="service" />
<div class="checkbox-shape"></div>
<label for="manual">Manage my channels manually</label>
</div>