349 lines
No EOL
15 KiB
HTML
349 lines
No EOL
15 KiB
HTML
<!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" />
|
|
<link rel="stylesheet" href="css/backup.css" />
|
|
<link rel="stylesheet" href="css/connect.css" />
|
|
<link rel="stylesheet" href="css/status.css" />
|
|
<!-- HTML Meta Tags -->
|
|
<title>Lightning.Pub</title>
|
|
<meta name="description" content="Lightning for Everyone" />
|
|
<link rel="icon" type="image/png" href="img/pub_logo.png" />
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<img src="img/pub_logo.png" width="38px" height="auto" alt="Lightning Pub logo" />
|
|
<img src="img/LightningPub.png" height="26px" alt="Lightning Pub logo" />
|
|
</header>
|
|
|
|
<main>
|
|
<section id="page-node">
|
|
<div class="setup-header">
|
|
<h2>Setup your Pub</h2>
|
|
<p class="header-title">
|
|
</p>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div 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%" id="nodeName" />
|
|
</div>
|
|
|
|
<div class="input-group" style="margin-top: 20px">
|
|
<span>Avatar (shown in wallet):</span>
|
|
<div style="display:flex; align-items:center; gap:12px; width:100%;">
|
|
<img id="avatarPreview" src="" alt="avatar" style="width:56px;height:56px;border-radius:6px;object-fit:cover;box-shadow:0 0 2px rgba(0,0,0,1);" />
|
|
<input type="text" placeholder="" style="flex:1" id="avatarUrl" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group" style="margin-top: 28px">
|
|
<span>If you want to use a specific Nostr relay, enter it now:</span>
|
|
<div style="display:flex; flex-direction: column; gap:10px; width:100%;">
|
|
<input type="text" placeholder="wss://relay.lightning.pub" style="width: 100%" id="relayUrl" />
|
|
<div class="checkbox" style="margin-top: 0">
|
|
<input type="checkbox" id="customCheckbox" />
|
|
<div class="checkbox-shape"></div>
|
|
<label for="customCheckbox">
|
|
Use the default managed relay service and auto-pay 1000 sats
|
|
per month to support developers
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p id="errorText" style="color:red"></p>
|
|
</div>
|
|
|
|
<button class="push-button" style="margin-top: 60px" id="liquidityBtn">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="page-liquidity" style="display: none;">
|
|
<div class="setup-header">
|
|
<button class="icon-button back-button" id="back-to-node">
|
|
<img src="img/back.svg" alt="" />
|
|
</button>
|
|
<h2>Manage Node Liquidity</h2>
|
|
<p class="header-title">
|
|
How do you want to manage Lightning channels?
|
|
</p>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="setup-content">
|
|
<div class="checkbox" style="margin-top: 60px">
|
|
<input type="radio" id="automate" name="service" data-group="service" />
|
|
<label for="automate" class="automate">
|
|
Use Automation Service
|
|
<div class="question-box">
|
|
<button class="icon-button" id="show-question">
|
|
<img src="img/question.svg" />
|
|
</button>
|
|
</div>
|
|
<div class="question-content" id="question-content">
|
|
Automation helps reduce the fees you pay by trusting peers temporarily until your node balance is sufficient
|
|
to open a balanced Lightning channel.
|
|
<button class="icon-button close-button" id="close-question">
|
|
<img src="img/close.svg" alt="" />
|
|
</button>
|
|
<a href="https://docs.shock.network/" target="_blank" class="marked question-more">Learn More</a>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="checkbox" style="margin-top: 30px">
|
|
<input type="radio" id="manual" name="service" data-group="service" />
|
|
<label for="manual">Manage my channels manually</label>
|
|
</div>
|
|
<div>
|
|
<p id="errorTextLiquidity" style="color:red"></p>
|
|
</div>
|
|
<button class="push-button" style="margin-top: 60px" id="backupBtn">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="page-backup" style="display: none;">
|
|
<div class="setup-header">
|
|
<button class="icon-button back-button" id="back-to-liquidity">
|
|
<img src="img/back.svg" alt="" />
|
|
</button>
|
|
<h2>Choose a Recovery Method</h2>
|
|
<p class="header-title">
|
|
<span style="font-weight: bold">New Node! 🎉</span> It's important
|
|
to backup your keys.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
|
|
<div class="setup-content">
|
|
<div class="description-box">
|
|
<div class="description">
|
|
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 file. Fortunately, it's small enough to automatically
|
|
store 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="radio" id="backup" name="backup-option" />
|
|
<label for="backup">
|
|
Encrypted Backup to Nostr Relay
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="checkbox-container">
|
|
<div class="checkbox manual-checkbox" style="margin-top: 12px">
|
|
<input type="radio" id="manual-backup" name="backup-option" />
|
|
<label for="manual-backup">
|
|
DO NOT store on relay (Manual Backups)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p id="errorTextBackup" style="color:red"></p>
|
|
</div>
|
|
<button class="push-button" style="margin-top: 60px;" id="next-button">
|
|
Finish Setup
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="page-connect" style="display: none;">
|
|
<div class="setup-header">
|
|
<button class="icon-button back-button" id="back-to-backup">
|
|
<img src="img/back.svg" alt="" />
|
|
</button>
|
|
<h2>Connect</h2>
|
|
<p class="header-title">You can now manage your node remotely</p>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="setup-content">
|
|
<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" aria-label="Pairing QR and string">
|
|
<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 class="qrcode-viewport">
|
|
<div id="qrcode"></div>
|
|
<div class="qr-veil"><span>Click to reveal</span></div>
|
|
</div>
|
|
<div style="color: #a3a3a3; font-size: 11px; word-break: break-all; overflow-wrap: anywhere; max-width: 220px; margin: 0 auto;">
|
|
<div id="connectString"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="push-button" style="margin-top: 20px" id="to-status">OK, I've connected my wallet</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="page-status" style="display: none;">
|
|
<div class="setup-header">
|
|
<button class="icon-button back-button" id="back-to-connect">
|
|
<img src="img/back.svg" alt="" />
|
|
</button>
|
|
<h2>Node Status</h2>
|
|
<p class="header-title"></p>
|
|
</div>
|
|
<div class="line" style="width: 100%;"></div>
|
|
<section class="node-status">
|
|
<p id="errorText" style="color:red"></p>
|
|
<div>
|
|
<div class="status-element" style="margin-top: 15px;">
|
|
<div style="text-align: left;">Public Node Name:</div>
|
|
<div class="fc-grey editable-content">
|
|
<div class="show-nodey" style="display: flex; flex-direction: column; display: none;">
|
|
<input type="text" value="" name="show-nodey" placeholder="" />
|
|
<div style="display: flex;justify-content: end;">
|
|
<button class="small-btn" id="cancel-show-nodey">Cancel</button>
|
|
<button class="small-btn" id="save-show-nodey">Save</button>
|
|
</div>
|
|
</div>
|
|
<div id="show-nodey-text">Nodey McNodeFace</div>
|
|
<div class="question-box">
|
|
<button class="icon-button" id="show-nodey">
|
|
<img src="img/pencil.svg" style="cursor: pointer;" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="status-element" style="margin-top: 15px;">
|
|
<div style="text-align: left;">Nostr Relay:</div>
|
|
<div class="fc-grey editable-content">
|
|
<div class="show-nostr" style="display: flex; flex-direction: column; display: none;">
|
|
<input type="text" value="" name="show-nostr" placeholder="wss://relay.lightning.pub" />
|
|
<div style="display: flex;justify-content: end;">
|
|
<button class="small-btn" id="cancel-show-nostr">Cancel</button>
|
|
<button class="small-btn" id="save-show-nostr">Save</button>
|
|
</div>
|
|
</div>
|
|
<div id="show-nostr-text">wss://relay.lightning.pub</div>
|
|
<div class="question-box">
|
|
<button class="icon-button" id="show-nostr">
|
|
<img src="img/pencil.svg" style="cursor: pointer;" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="status-element" style="margin-top: 15px;">
|
|
<div>Administrator:</div>
|
|
<div id="adminNpub" style="line-break: anywhere;">Loading...</div>
|
|
</div>
|
|
<div class="status-element" style="margin-top: 15px;">
|
|
<div style="text-align: left;">Avatar:</div>
|
|
<div class="fc-grey editable-content">
|
|
<div class="show-avatar" style="display: flex; flex-direction: column; display: none;">
|
|
<input type="text" value="" name="show-avatar" placeholder="" />
|
|
<div style="display: flex;justify-content: end;">
|
|
<button class="small-btn" id="cancel-show-avatar">Cancel</button>
|
|
<button class="small-btn" id="save-show-avatar">Save</button>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:12px;">
|
|
<img id="avatarImg" src="" alt="avatar" style="width:48px;height:48px;border-radius:6px;object-fit:cover;box-shadow:0 0 2px rgba(0,0,0,1);" />
|
|
<div class="question-box">
|
|
<button class="icon-button" id="show-avatar">
|
|
<img src="img/pencil.svg" style="cursor: pointer;" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: end;padding-right: 12px;">
|
|
<div class="marked" id="show-reset" style="text-decoration: underline; margin-top: 5px;position: relative; display: none;">
|
|
Reset
|
|
<div class="watchdog-status">
|
|
<a href="https://docs.shock.network/pub/watchdog" target="_blank">
|
|
<button class="icon-button" id="show-question">
|
|
<img src="img/question.svg" />
|
|
</button>
|
|
</a>
|
|
</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" id="">Continue</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 40px;">
|
|
<div class="status-element">
|
|
<div>Relay Status:</div>
|
|
<div id="relayStatus"><span class="yellow-dot">●</span> Loading...</div>
|
|
</div>
|
|
<div class="status-element">
|
|
<div>Lightning Status:</div>
|
|
<div id="lndStatus"><span class="yellow-dot">●</span> Loading...</div>
|
|
</div>
|
|
<div class="status-element">
|
|
<div style="position: relative;">Watchdog Status:
|
|
<div class="watchdog-status">
|
|
<a href="https://docs.shock.network/pub/watchdog" target="_blank">
|
|
<button class="icon-button" id="show-question"><img src="img/question.svg" /></button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div id="watchdog-status"><span class="green-dot">●</span> Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 20px;">
|
|
<div style="font-size: 13px; text-align: left;">Guest Invitation Link:</div>
|
|
<a href="#" target="_blank" style="font-size: 11px;line-break: anywhere;" id="inviteLinkHttp" class="invite-link"></a>
|
|
</div>
|
|
</section>
|
|
</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>
|
|
<a href="https://docs.shock.network" class="marked need-help">Need Help?</a>
|
|
</footer>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
|
|
<script src="js/status.js"></script>
|
|
<script src="js/wizard.js"></script>
|
|
</body>
|
|
|
|
</html> |