mdrockwell/littlelink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: mdrockwell:3f942ebf87419ce60823cd39906589c4707dacac
Branches Tags
mdrockwell:master
...
compare: mdrockwell:master
Branches Tags
mdrockwell:master

16 Commits
3f942ebf87 ... master

Author SHA1 Message Date
Mike Rockwell
b8b6297b46 fix font reference in css 2025-08-01 13:42:11 -04:00
Mike Rockwell
831cc775ce adjust size of qr codes to look better on retina displays 2025-08-01 11:38:39 -04:00
Mike Rockwell
036733f939 Minified CSS 2025-08-01 11:32:27 -04:00
Mike Rockwell
a704288b56 revert to version without combining svg elements 2025-08-01 11:06:43 -04:00
Mike Rockwell
77664faaee fix margin on v4v button and explainer paragraph 2025-07-29 14:00:20 -04:00
Mike Rockwell
e613e3d722 Continue work on getting a working copy notice 2025-07-28 11:41:52 -04:00
Mike Rockwell
e91e7c25eb Tinkering with a more elagent notice when copying the crypto address to clipboard 2025-07-27 14:38:49 -04:00
Mike Rockwell
4d5b88ec95 Remove blank line 2025-07-27 13:12:37 -04:00
Mike Rockwell
6008255509 Drafting a method for replacing the browser alert when copying a crypto wallet to the clipboard 2025-07-26 22:45:42 -04:00
Mike Rockwell
c4cc00cc46 removed duplicate scroll effect 2025-07-26 17:27:08 -04:00
Mike Rockwell
bfadcef287 Adjust scroll delay 2025-07-26 17:24:02 -04:00
Mike Rockwell
d3602622d4 add slight delay to allow for QR code images to load before scrolling 2025-07-26 17:19:31 -04:00
Mike Rockwell
49c8a6fea5 Remove auto scrolling when elements are closed 2025-07-26 17:11:09 -04:00
Mike Rockwell
b30d2ad682 Add smooth scrolling when opening and closing QR code images 2025-07-26 16:48:57 -04:00
Mike Rockwell
cefaa5a672 Fix bug that allowed for multiple QR code images being displayed 2025-07-26 16:44:09 -04:00
Mike Rockwell
0344087136 Add display of QR codes when link is clicked 2025-07-26 16:34:56 -04:00
4 changed files with 84 additions and 22 deletions
Expand all files Collapse all files

70
app.js
View File

@@ -9,10 +9,9 @@ const bodyTop = document.getElementById("top");
document.querySelector('.value-block').addEventListener('toggle', function() {
if (this.open) {
// Scroll to contents of value block when it is opened
setTimeout(() => {
valueBlock.scrollIntoView({ behavior: "smooth" });
} else {
// Scroll to top of button list when value block is closed
bodyTop.scrollIntoView({ behavior: "smooth" });
}, 150);
}
});
@@ -25,7 +24,7 @@ const ethadd = document.getElementById("ethwall").textContent;
const dogeadd = document.getElementById("dogewall").textContent;
// Watch for click on BTC wallet address
document.getElementById("btcwall").addEventListener("click", function(){
document.getElementById("btcwall").addEventListener("click", function(){
// Copy BTC address to clipboard
navigator.clipboard.writeText(btcadd);
// Display alert to confirm the address was added to clipboard
@@ -64,27 +63,72 @@ document.querySelector("#doge-qr-link a").addEventListener("click", function(eve
// Watch for click on BTC QR code link
document.querySelector("#btc-qr-link a").addEventListener("click", function(){
console.log('BTC QR Clicked');
// Hide all other QR codes
if (document.contains(document.querySelector("#eth-js-qr"))) {
document.querySelector("#eth-js-qr").remove();
}
if (document.contains(document.querySelector("#doge-js-qr"))) {
document.querySelector("#doge-js-qr").remove();
}
// Display BTC QR code
if (document.contains(document.querySelector("#btc-js-qr"))) {
document.querySelector("#btc-js-qr").remove();
} else {
document.querySelector("#btcwall").insertAdjacentHTML("afterend", "<span class=\"crypto-js-qr\" id=\"btc-js-qr\"><img src=\"images/crypto/btc-qr.png\"></span>");
setTimeout(() => {
document.querySelector("#btc-qr-link").scrollIntoView({ behavior: "smooth" });
}, 150);
}
});
// Watch for click on ETH QR code link
document.querySelector("#eth-qr-link a").addEventListener("click", function(){
console.log('ETH QR Clicked');
// Hide all other QR codes
if (document.contains(document.querySelector("#btc-js-qr"))) {
document.querySelector("#btc-js-qr").remove();
}
if (document.contains(document.querySelector("#doge-js-qr"))) {
document.querySelector("#doge-js-qr").remove();
}
// Display ETH QR code
if (document.contains(document.querySelector("#eth-js-qr"))) {
document.querySelector("#eth-js-qr").remove();
} else {
document.querySelector("#ethwall").insertAdjacentHTML("afterend", "<span class=\"crypto-js-qr\" id=\"eth-js-qr\"><img src=\"images/crypto/eth-qr.png\"></span>");
setTimeout(() => {
document.querySelector("#eth-qr-link").scrollIntoView({ behavior: "smooth" });
}, 150);
}
});
// Watch for click on DOGE QR code link
document.querySelector("#doge-qr-link a").addEventListener("click", function(){
console.log('DOGE QR Clicked');
// Hide all other QR codes
if (document.contains(document.querySelector("#btc-js-qr"))) {
document.querySelector("#btc-js-qr").remove();
}
if (document.contains(document.querySelector("#eth-js-qr"))) {
document.querySelector("#eth-js-qr").remove();
}
// Display DOGE QR code
if (document.contains(document.querySelector("#doge-js-qr"))) {
document.querySelector("#doge-js-qr").remove();
} else {
document.querySelector("#dogewall").insertAdjacentHTML("afterend", "<span class=\"crypto-js-qr\" id=\"doge-js-qr\"><img src=\"images/crypto/doge-qr.png\"></span>");
setTimeout(() => {
document.querySelector("#doge-qr-link").scrollIntoView({ behavior: "smooth" });
}, 150);
}
});
// An attempt at replacing the browser alert with something nicer
// Watch for click on BTC wallet address
//document.getElementById("btcwall").addEventListener("click", function(){
// // Copy BTC address to clipboard
// navigator.clipboard.writeText(btcadd);
// // Display alert to confirm the address was added to clipboard
// btcwall.insertAdjacentHTML("afterend", "<span id=\"btc-js-copy\" class=\"button button-v4v\" role=\"button\"><img class=\"icon\" aria-hidden=\"true\" src=\"images/icons/generic-bolt-icon.svg\" alt=\"\">Copied to Clipboard</span>");
// setTimeout(() => {
// document.querySelector("#btc-js-copy").remove();
// }, 10000);
//});

1
css/min.css Normal file
View File

File diff suppressed because one or more lines are too long

22
style.css → css/style.css
View File

@@ -3,12 +3,12 @@
@font-face {
font-family: "IBM Plex Sans";
src: url(fonts/IBMPlexSans.ttf)
src: url(../fonts/IBMPlexSans.ttf)
}
@font-face {
font-family: "IBM Plex Mono";
src: url(fonts/IBMPlexMono.ttf)
src: url(../fonts/IBMPlexMono.ttf)
}
/*
@@ -611,5 +611,21 @@ details:not([open]) {
/* /end Fix v4v details block hover and open styles */
p.value-explainer {
margin-top: 16px;
margin-top: 2rem;
}
details.value-block ul li {
margin-bottom:32px
}
details.value-block ul li img {
margin-left:auto;
margin-right:auto;
}
span.button.button-v4v {
margin-bottom:0;
}
span.crypto-js-qr img {
width: 150px;
}

9
index.html
View File

@@ -11,7 +11,7 @@
<meta name="keywords" content="Mike Rockwell, Writer, Blogging, Happiness Engineer, Automattic">
<meta rel="canonical" href="https://mdrockwell.net">
<meta name="author" content="Mike Rockwell">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/min.css">
<!-- Open Graph Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Mike Rockwell" />
@@ -28,6 +28,7 @@
</head>
<body id="top" itemtype="https://schema.org/ProfilePage" itemscope>
<meta itemprop="dateModified" content="2025-07-24T16:00:00-05:00" />
<div class="container" itemprop="mainEntity" itemtype="https://schema.org/Person" itemscope>
@@ -74,9 +75,9 @@
<a class="button button-paypal" href="https://www.paypal.com/donate/?business=LXMQTRPCCLAEG&no_recurring=0&item_name=Support+Initial+Charge%2C+%23OpenWeb%2C+and+my+other+projects+with+value+for+value.&currency_code=USD" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
<ul>
<li id="btc-qr-link"><strong>Bitcoin</strong> &#8226; <a href="images/crypto/btc-qr.png" class="qr-code-link">QR Code</a><br><code id="btcwall">bc1qxj26ssa24a7x8mp0rykn80d6v088p996mt0kcc</code><br>&nbsp;</li>
<li id="eth-qr-link"><strong>Ethereum</strong> &#8226; <a href="images/crypto/eth-qr.png" class="qr-code-link">QR Code</a><br><code id="ethwall">0x41C1689FF03a11205aB22dd0d97889065E971D7f</code><br>&nbsp;</li>
<li id="doge-qr-link"><strong>Dogecoin</strong> &#8226; <a href="images/crypto/doge-qr.png" class="qr-code-link">QR Code</a><br><code id="dogewall">DC27kzyjxVgSjuPj6NJkadKibbf4S9UgGd</code></li>
<li id="btc-qr-link"><strong>Bitcoin</strong> &#8226; <a href="images/crypto/btc-qr.png">QR Code</a><br><code id="btcwall">bc1qxj26ssa24a7x8mp0rykn80d6v088p996mt0kcc</code></li>
<li id="eth-qr-link"><strong>Ethereum</strong> &#8226; <a href="images/crypto/eth-qr.png">QR Code</a><br><code id="ethwall">0x41C1689FF03a11205aB22dd0d97889065E971D7f</code></li>
<li id="doge-qr-link"><strong>Dogecoin</strong> &#8226; <a href="images/crypto/doge-qr.png">QR Code</a><br><code id="dogewall">DC27kzyjxVgSjuPj6NJkadKibbf4S9UgGd</code></li>
</ul>
</details>
</div>