From f67609adb68d86a00df3d887960046097a350c7b Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Thu, 4 Mar 2021 22:37:44 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Add=20LN=20node=20IDs=20to?= =?UTF-8?q?=20homepage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/base/elements.css | 1 + src/css/sections/home.css | 32 ++++++++++++++++++++++++++++++++ src/index.pug | 19 +++++++++++++++++++ static/img/ln/clearnet.svg | 1 + static/img/ln/tor.svg | 1 + static/js/main.js | 37 +++++++++++++++++++++++++++++++------ 6 files changed, 85 insertions(+), 6 deletions(-) create mode 100644 static/img/ln/clearnet.svg create mode 100644 static/img/ln/tor.svg 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) + }) })