diff --git a/src/css/base/elements.css b/src/css/base/elements.css
index b13ddc8d373..fd3f9b03870 100644
--- a/src/css/base/elements.css
+++ b/src/css/base/elements.css
@@ -59,6 +59,7 @@ h2 {
h3 {
font-size: var(--font-size-l);
+ color: var(--color-secondary);
}
h4, h5, h6 {
diff --git a/src/css/sections/home.css b/src/css/sections/home.css
index e619b197c8b..62c2d6b1eaa 100644
--- a/src/css/sections/home.css
+++ b/src/css/sections/home.css
@@ -57,3 +57,35 @@
border-radius: var(--space-m);
}
}
+
+.lnNodes {
+ display: flex;
+ flex-wrap: wrap;
+
+ @media (--up_to_M) {
+ flex-direction: column;
+ }
+
+ & .lnNode {
+ @media (--up_to_M) {
+ margin-top: var(--space-xl);
+ }
+ @media (--M_and_up) {
+ margin-top: var(--space-l);
+ margin-right: var(--space-xxl);
+ }
+ }
+
+ & img {
+ display: block;
+ width: 240px;
+ height: 240px;
+ border-radius: var(--space-m);
+ margin: var(--space-l) 0;
+ }
+
+ & button {
+ display: block;
+ width: 240px;
+ }
+}
diff --git a/src/index.pug b/src/index.pug
index b296b02de96..3ae46b59c1f 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -72,3 +72,22 @@ block main
Wenn du also einen Shout-Out in unserem Podcast kaufst, unterstützt du damit auch ein Bitcoin Projekt.
a.button(href=site.meta.shoutoutUrl target="_blank") Shout-Out senden
+
+ section
+ :markdown-it(html linkify typographer)
+ ## ⚡️ Unser Lightning Node
+
+ Du kannst einen Kanal zu unserem Lightning Node aufmachen – entweder um im Shop ohne Routinggebühren zu
+ zahlen oder um dich darüber mit anderen Mitgliedern der Community zu verbinden. Der Node ist bereits gut
+ vernetzt und du erhältst durch einen Kanal gute Verbindungen zu weiteren gut vernetzten Nodes.
+
+ .lnNodes
+ .lnNode
+ h3 Clearnet
+ img(src=assetPath("/img/ln/clearnet.svg") alt="Clearnet")
+ button.button(data-clipboard="020d91678bfa7ee9d5e241b244e8eecf3822e6bcedd2426fe97d8de656622285ea@202.61.245.255:9735") Clearnet ID kopieren
+
+ .lnNode
+ h3 Tor
+ img(src=assetPath("/img/ln/tor.svg") alt="Tor")
+ button.button(data-clipboard="020d91678bfa7ee9d5e241b244e8eecf3822e6bcedd2426fe97d8de656622285ea@csgpmpxltdbpvxdwpbv5yzkpicnzhx2k65plksykib2bbzyhzmer5fid.onion:9735") Tor ID kopieren
diff --git a/static/img/ln/clearnet.svg b/static/img/ln/clearnet.svg
new file mode 100644
index 00000000000..6d6fef44e6c
--- /dev/null
+++ b/static/img/ln/clearnet.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/img/ln/tor.svg b/static/img/ln/tor.svg
new file mode 100644
index 00000000000..c8771af38a4
--- /dev/null
+++ b/static/img/ln/tor.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
index 7ab95506c9b..92b8e8ef78d 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -17,6 +17,25 @@ const setColorMode = mode => {
setColorMode(initialColorMode)
+const copyToClipboard = (e, text) => {
+ if (navigator.clipboard) {
+ e.preventDefault()
+ const item = e.currentTarget
+ const data = text || item.getAttribute('data-clipboard')
+ const confirm = item.querySelector('[data-clipboard-confirm]') || item
+ const message = confirm.getAttribute('data-clipboard-confirm') || 'Kopiert ✔'
+ if (!confirm.dataset.clipboardInitialText) {
+ confirm.dataset.clipboardInitialText = confirm.innerText
+ confirm.style.minWidth = confirm.getBoundingClientRect().width + 'px'
+ }
+ navigator.clipboard.writeText(data).then(() => {
+ confirm.innerText = message;
+ setTimeout(() => { confirm.innerText = confirm.dataset.clipboardInitialText; }, 2500)
+ })
+ item.blur()
+ }
+}
+
document.addEventListener("DOMContentLoaded", () => {
// Topbar
if (
@@ -43,20 +62,26 @@ document.addEventListener("DOMContentLoaded", () => {
// Player
if (window.Amplitude && window.player) {
window.Amplitude.init(window.player)
+
document.querySelector('.player__progress').addEventListener('click', function (e) {
- var offset = this.getBoundingClientRect()
- var x = e.pageX - offset.left
+ const offset = this.getBoundingClientRect()
+ const x = e.pageX - offset.left
window.Amplitude.setSongPlayedPercentage((parseFloat(x) / parseFloat(this.offsetWidth)) * 100)
})
}
// Theme Switch
- document.querySelectorAll(".theme").forEach(function (link) {
- link.addEventListener("click", function (e) {
+ document.querySelectorAll('.theme').forEach(link => {
+ link.addEventListener('click', e => {
e.preventDefault()
const current = document.documentElement.getAttribute(THEME_ATTR) || COLOR_MODES[0]
const mode = current === COLOR_MODES[0] ? COLOR_MODES[1] : COLOR_MODES[0]
setColorMode(mode)
- });
- });
+ })
+ })
+
+ // Copy to clipboard
+ document.querySelectorAll('[data-clipboard]').forEach(link => {
+ link.addEventListener('click', copyToClipboard)
+ })
})