forked from heierbtc/satdress-mirror
qrcode and copy-to-clipboard.
This commit is contained in:
fiatjaf
parent
2b1d35ea43
commit
2ff031ce4e
84
grab.html
84
grab.html
|
|
@ -4,35 +4,33 @@
|
||||||
<title>Lightning Address Saved | Satdress</title>
|
<title>Lightning Address Saved | Satdress</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" type="image/png" href="https://i.imgur.com/4yaPtA2.png" />
|
<link rel="icon" type="image/png" href="https://i.imgur.com/4yaPtA2.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="stylesheet" href="/static/style.css" />
|
<link rel="stylesheet" href="/static/style.css" />
|
||||||
<meta
|
<meta
|
||||||
property="og:title"
|
property="og:title"
|
||||||
content="Satdress - Federated Lightning Address Server"
|
content="Satdress - Federated Lightning Address Server"
|
||||||
/>
|
/>
|
||||||
<meta
|
<meta property="og:type" content="website" />
|
||||||
property="og:type"
|
<meta property="og:url" content="https://github.com/fiatjaf/satdress" />
|
||||||
content="website"
|
|
||||||
/>
|
|
||||||
<meta
|
|
||||||
property="og:url"
|
|
||||||
content="https://github.com/fiatjaf/satdress"
|
|
||||||
/>
|
|
||||||
<meta
|
<meta
|
||||||
property="og:description"
|
property="og:description"
|
||||||
content="Satdress is a Federated Lightning Address server allowing you to connect Lightning nodes to Lightning Addresses. Satdress follows the Lightning Address protocol and aims to provide an easy-to-deploy Bridge Server."
|
content="Satdress is a Federated Lightning Address server allowing you to connect Lightning nodes to Lightning Addresses. Satdress follows the Lightning Address protocol and aims to provide an easy-to-deploy Bridge Server."
|
||||||
/>
|
/>
|
||||||
<meta
|
<meta property="og:image" content="https://i.imgur.com/PsT2uoR.png" />
|
||||||
property="og:image"
|
|
||||||
content="https://i.imgur.com/PsT2uoR.png"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
<meta name="twitter:site" content="@fiatjaf" />
|
<meta name="twitter:site" content="@fiatjaf" />
|
||||||
<meta name="twitter:creator" content="@fiatjaf" />
|
<meta name="twitter:creator" content="@fiatjaf" />
|
||||||
<meta name="twitter:title" content="Satdress - Federated Lightning Address Server" />
|
<meta
|
||||||
<meta name="twitter:description" content="Satdress is a Federated Lightning Address server allowing you to connect Lightning nodes to Lightning Addresses. Satdress follows the Lightning Address protocol and aims to provide an easy-to-deploy Bridge Server." />
|
name="twitter:title"
|
||||||
|
content="Satdress - Federated Lightning Address Server"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="twitter:description"
|
||||||
|
content="Satdress is a Federated Lightning Address server allowing you to connect Lightning nodes to Lightning Addresses. Satdress follows the Lightning Address protocol and aims to provide an easy-to-deploy Bridge Server."
|
||||||
|
/>
|
||||||
<meta name="twitter:image" content="https://i.imgur.com/PsT2uoR.png" />
|
<meta name="twitter:image" content="https://i.imgur.com/PsT2uoR.png" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main id="main">
|
<main id="main">
|
||||||
|
|
@ -42,37 +40,34 @@
|
||||||
<b>username@domain.com</b> is your new Lightning Address!
|
<b>username@domain.com</b> is your new Lightning Address!
|
||||||
</div>
|
</div>
|
||||||
<div class="bold-small">
|
<div class="bold-small">
|
||||||
In order to edit the configuration of this address in the future you must save this secret pin:
|
In order to edit the configuration of this address in the future you
|
||||||
|
must save this secret pin:
|
||||||
</div>
|
</div>
|
||||||
<div class="code">
|
<div class="code">{{ pin }}</div>
|
||||||
{{ pin }}
|
<button class="copy-button" @click="copyToClipboard">
|
||||||
</div>
|
{{ copied ? 'Copied!' : 'Copy Secret PIN' }}
|
||||||
<button class="copy-button">Copy Secret PIN</button>
|
</button>
|
||||||
<div class="bold-small">
|
<div class="bold-small">
|
||||||
To ensure the connection with your Lightning backend is configured properly, we've created a test invoice that can be seen below.
|
To ensure the connection with your Lightning backend is configured
|
||||||
</div>
|
properly, we've created a test invoice that can be seen below.
|
||||||
<div class="code">
|
|
||||||
{{ invoice }}
|
|
||||||
</div>
|
</div>
|
||||||
|
<canvas id="qr"></canvas>
|
||||||
|
<div class="code">{{ invoice }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="resources">
|
<div class="resources">
|
||||||
<a
|
<a class="resource-button" target="_blank" href="https://t.me/lnurl">
|
||||||
class="resource-button"
|
|
||||||
target="_blank"
|
|
||||||
href="https://t.me/lnurl">
|
|
||||||
Not working? Ask for help!
|
Not working? Ask for help!
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
class="resource-button"
|
class="resource-button"
|
||||||
href="https://github.com/andrerfneves/lightning-address#readme"
|
href="https://github.com/andrerfneves/lightning-address#readme"
|
||||||
target="_blank">
|
target="_blank"
|
||||||
|
>
|
||||||
More information on Lightning Address
|
More information on Lightning Address
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.2/vue.global.prod.min.js"></script>
|
||||||
src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.2/vue.global.prod.min.js"
|
|
||||||
></script>
|
|
||||||
<script>
|
<script>
|
||||||
const initial = {} // REPLACED WITH SERVER DATA
|
const initial = {} // REPLACED WITH SERVER DATA
|
||||||
|
|
||||||
|
|
@ -80,11 +75,30 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
...initial,
|
...initial,
|
||||||
|
copied: false
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
};
|
|
||||||
|
|
||||||
Vue.createApp(Main).mount('#main');
|
methods: {
|
||||||
|
copyToClipboard() {
|
||||||
|
navigator.clipboard.writeText(this.pin)
|
||||||
|
this.copied = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.copied = false
|
||||||
|
}, 5000)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
new QRious({
|
||||||
|
element: document.getElementById('qr'),
|
||||||
|
value: this.invoice,
|
||||||
|
size: 300
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Vue.createApp(Main).mount('#main')
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -175,7 +175,7 @@ select {
|
||||||
|
|
||||||
.resource-button:hover {
|
.resource-button:hover {
|
||||||
color: #8062fb;
|
color: #8062fb;
|
||||||
background: rgba(42,0,255,0.07);
|
background: rgba(42, 0, 255, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.owner {
|
.owner {
|
||||||
|
|
@ -197,7 +197,7 @@ select {
|
||||||
|
|
||||||
.owner-button:hover {
|
.owner-button:hover {
|
||||||
color: #8062fb;
|
color: #8062fb;
|
||||||
background: rgba(42,0,255,0.1);
|
background: rgba(42, 0, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.owner-name {
|
.owner-name {
|
||||||
|
|
@ -219,6 +219,11 @@ select {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#qr {
|
||||||
|
margin: 20px auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 500px) {
|
||||||
body {
|
body {
|
||||||
padding: 20px 5px 30px 5px;
|
padding: 20px 5px 30px 5px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user