BTCforPlebs/BTCforPlebs.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweaks

Browse Source
This commit is contained in:
Logen
2025-09-26 21:29:41 -04:00
parent d55333a652
commit 7da034e08b
8 changed files with 174 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
public/assets/js/scripts.js
View File

@@ -1,105 +1,64 @@
// Folder Toggle Function
document.addEventListener('DOMContentLoaded', () => {
function toggleFolder(folderId, buttonId) {
const folder = document.getElementById(folderId);
const button = document.getElementById(buttonId);
// public/assets/js/scripts.js
// ---------------------------------------------
// 1. Global toggle function – now accessible from the HTML onclick
// 2. Properly closed DOMContentLoaded
// 3. Minor style helper (display toggling)
// ---------------------------------------------
// Close other folders and deactivate buttons
document.querySelectorAll('.links').forEach(link => {
if (link.id !== folderId) {
link.style.display = 'none';
}
});
document.querySelectorAll('.button').forEach(btn => {
if (btn.id !== buttonId) {
btn.classList.remove('active');
}
});
// Toggle the selected folder
if (folder.style.display === 'block') {
folder.style.display = 'none';
button.classList.remove('active');
} else {
folder.style.display = 'block';
button.classList.add('active');
}
}
function navigateToSection(select) {
const sectionId = select.value;
if (sectionId) {
document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
}
}
// Function to prefetch a URL
function prefetch(url) {
const link = document.createElement('link');
link.rel = 'prefetch';
link.href = url;
document.head.appendChild(link);
}
// Add event listeners to your links
const links = document.querySelectorAll('a.prefetch');
links.forEach(link => {
link.addEventListener('mouseenter', () => {
const url = link.href; // Get the link URL
prefetch(url); // Call prefetch function
});
});
// Footer Loader and Event Listeners
// --- 4. Load Footer and QR Code Toggle Logic ----------------------------
fetch('/parts/footer.html')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
const footer = document.getElementById('footer');
if (!footer) return;
footer.innerHTML = data;
// Attach event listeners after footer is loaded
const onChainButton = document.getElementById('onChainButton');
const lightningButton = document.getElementById('lightningButton');
const qrCodes = document.getElementById('qrCodes');
const onChainQRCode = document.getElementById('onChainQRCode');
const lightningQRCode = document.getElementById('lightningQRCode');
// Initially hide the QR codes section
qrCodes.style.display = 'none';
if (qrCodes) qrCodes.style.display = 'none';
onChainButton.addEventListener('click', function () {
// Toggle visibility of On-Chain QR Code
const isOnChainVisible = onChainQRCode.style.display === 'block';
qrCodes.style.display = 'block'; // Show QR codes section
onChainQRCode.style.display = isOnChainVisible ? 'none' : 'block'; // Toggle On-Chain
lightningQRCode.style.display = 'none'; // Hide Lightning QR code
});
if (onChainButton && lightningButton && qrCodes && onChainQRCode && lightningQRCode) {
onChainButton.addEventListener('click', function () {
const isOnChainVisible = onChainQRCode.style.display === 'block';
qrCodes.style.display = 'block';
onChainQRCode.style.display = isOnChainVisible ? 'none' : 'block';
lightningQRCode.style.display = 'none';
});
lightningButton.addEventListener('click', function () {
// Toggle visibility of Lightning QR Code
const isLightningVisible = lightningQRCode.style.display === 'block';
qrCodes.style.display = 'block'; // Show QR codes section
lightningQRCode.style.display = isLightningVisible ? 'none' : 'block'; // Toggle Lightning
onChainQRCode.style.display = 'none'; // Hide On-Chain QR code
});
lightningButton.addEventListener('click', function () {
const isLightningVisible = lightningQRCode.style.display === 'block';
qrCodes.style.display = 'block';
lightningQRCode.style.display = isLightningVisible ? 'none' : 'block';
onChainQRCode.style.display = 'none';
});
}
})
.catch(error => console.error('Error loading footer:', error));
// --- 5. Fetch and Display Last Update from GitHub -----------------------
fetch('https://api.github.com/repos/btcforplebs/BTCforPlebs.com/commits/main')
.then(response => response.json())
.then(data => {
const lastUpdate = new Date(data.commit.author.date); // Commit date
const lastUpdate = new Date(data.commit.author.date);
const formattedDate = lastUpdate.toLocaleDateString();
const formattedTime = lastUpdate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
// Update the text content of the last-updated-text element
document.getElementById('last-updated-text').textContent = `Website last updated: ${formattedDate} ${formattedTime}`;
const updateText = document.getElementById('last-updated-text');
if (updateText) {
updateText.textContent = `Website last updated: ${formattedDate} ${formattedTime}`;
}
})
.catch(error => {
console.error('Error fetching last update:', error);
document.getElementById('last-updated-text').textContent = 'Last update: Error fetching data.';
});
});
const updateText = document.getElementById('last-updated-text');
if (updateText) {
updateText.textContent = 'Last update: Error fetching data.';
}
});

29
public/index.html
View File

@@ -17,8 +17,8 @@
<link rel="icon" href="/images/favicon.png" type="image/png">
<!-- scripts -->
<script src="/assets/js/scripts.js" defer></script>
<script src="/assets/js/scripts.js"></script>
<link rel="stylesheet" href="/assets/css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
</head>
@@ -40,32 +40,47 @@
</div>
<button class="button" id="bitcoin-folder-btn" onclick="toggleFolder('folder2', 'bitcoin-folder-btn')">Use Bitcoin <span style="color: #F7931A;">↓</span></button>
<div class="links" id="folder2">
All apps hosted by BTCforPlebs<br></br>
<a href="https://lightning.btcforplebs.com" target="_blank" class="prefetch">Lightning</a>
<a href="https://mempool.btcforplebs.com" target="_blank" class="prefetch">Mempool</a>
<a href="https://bitview.space/" target="_blank" class="prefetch">Bitview.space (external host)</a>
<a href="https://bitview.space/" target="_blank" class="prefetch">Bitview.space</a>
</div>
<button class="button" id="nostr-folder-btn" onclick="toggleFolder('folder1', 'nostr-folder-btn')">Use Nostr <span style="color: #F7931A;">↓</span></button>
<div class="links" id="folder1">
All apps hosted by BTCforPlebs<br></br>
<a href="https://nostrudel.btcforplebs.com" target="_blank" class="prefetch">Nostrudel</a>
<a href="https://nosotros.btcforplebs.com" target="_blank" class="prefetch">Nosotros</a>
<a href="https://bloom.btcforplebs.com" target="_blank" class="prefetch">Bloom</a>
<a href="https://btcforplebs.com/relay" target="_blank" class="prefetch">Relay</a>
<br></br>
<a href="https://nostrapps.com" target="_blank">NostrApps.com</a>
</div>
<button class="button" id="cashu-folder-btn" onclick="toggleFolder('folder3', 'cashu-folder-btn')">Use Cashu <span style="color: #F7931A;">↓</span></button>
<div class="links" id="folder3">
<a href="https://cashu.me" class="prefetch">Cashu.me</a>
<a href="https://cashu.btcforplebs.com" class="prefetch">Cashu Web App</a>
<a href="https://macadamia.cash" class="prefetch">Macadamia(iOS)</a>
<a href="https://minibits.cash" class="prefetch">Minibits(Android)</a>
</div>
<a href="https://live.btcforplebs.com" class="button" class="prefetch">BTCforPlebs Live</a>
<br></br>
</div>
<div id="footer"></div>
<script>
function toggleFolder(folderId, buttonId) {
const folder = document.getElementById(folderId);
const button = document.getElementById(buttonId);
if (!folder || !button) return;
// Toggle visibility
if (folder.style.display === "none" || folder.style.display === "") {
folder.style.display = "block";
button.innerHTML = button.innerHTML.replace("↓", "↑");
} else {
folder.style.display = "none";
button.innerHTML = button.innerHTML.replace("↑", "↓");
}
}</script>
<div id="footer"></div>
</body>
</html>

16
public/learn-bitcoin/index.html
View File

@@ -190,11 +190,19 @@
</section>
</div>
<script>
// --- 2. Dropdown navigation ---------------------------------------------
window.navigateToSection = function (select) {
const sectionId = select.value;
if (sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
};</script>
<div id="footer"></div>
<div id="back-to-top">
<a href="#top" title="Back to Top">🔝</a>
</body>
</html>

13
public/learn-bitcoin/nodes.html
View File

@@ -51,5 +51,16 @@
<a href="#top" title="Back to Top">🔝</a>
</div>
<script>
// --- 2. Dropdown navigation ---------------------------------------------
window.navigateToSection = function (select) {
const sectionId = select.value;
if (sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
};</script>
</body>
</html>

13
public/learn-bitcoin/wallets.html
View File

@@ -45,5 +45,16 @@
<a href="#top" title="Back to Top">🔝</a>
</div>
<script>
// --- 2. Dropdown navigation ---------------------------------------------
window.navigateToSection = function (select) {
const sectionId = select.value;
if (sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
};</script>
</body>
</html>

12
public/learn-cashu/index.html
View File

@@ -107,5 +107,17 @@
</div>
<div id="footer"></div>
<a href="#top" title="Back to Top">🔝</a>
<script>
// --- 2. Dropdown navigation ---------------------------------------------
window.navigateToSection = function (select) {
const sectionId = select.value;
if (sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
};</script>
</body>
</html>

12
public/learn-nostr/index.html
View File

@@ -48,7 +48,17 @@
<div id="footer"></div>
<a href="#top" title="Back to Top">🔝</a>
<script>
// --- 2. Dropdown navigation ---------------------------------------------
window.navigateToSection = function (select) {
const sectionId = select.value;
if (sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({ behavior: 'smooth' });
}
}
};</script>
</body>
</html>

57
public/parts/footer.html
View File

@@ -1,6 +1,61 @@
<link rel="stylesheet" href="/assets/css/main.css">
<footer>
<script src="/assets/js/scripts.js" defer></script>
<script> // --- 4. Load Footer and QR Code Toggle Logic ----------------------------
fetch('/parts/footer.html')
.then(response => response.text())
.then(data => {
const footer = document.getElementById('footer');
if (!footer) return;
footer.innerHTML = data;
const onChainButton = document.getElementById('onChainButton');
const lightningButton = document.getElementById('lightningButton');
const qrCodes = document.getElementById('qrCodes');
const onChainQRCode = document.getElementById('onChainQRCode');
const lightningQRCode = document.getElementById('lightningQRCode');
if (qrCodes) qrCodes.style.display = 'none';
if (onChainButton && lightningButton && qrCodes && onChainQRCode && lightningQRCode) {
onChainButton.addEventListener('click', function () {
const isOnChainVisible = onChainQRCode.style.display === 'block';
qrCodes.style.display = 'block';
onChainQRCode.style.display = isOnChainVisible ? 'none' : 'block';
lightningQRCode.style.display = 'none';
});
lightningButton.addEventListener('click', function () {
const isLightningVisible = lightningQRCode.style.display === 'block';
qrCodes.style.display = 'block';
lightningQRCode.style.display = isLightningVisible ? 'none' : 'block';
onChainQRCode.style.display = 'none';
});
}
})
.catch(error => console.error('Error loading footer:', error));
// --- 5. Fetch and Display Last Update from GitHub -----------------------
fetch('https://api.github.com/repos/btcforplebs/BTCforPlebs.com/commits/main')
.then(response => response.json())
.then(data => {
const lastUpdate = new Date(data.commit.author.date);
const formattedDate = lastUpdate.toLocaleDateString();
const formattedTime = lastUpdate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const updateText = document.getElementById('last-updated-text');
if (updateText) {
updateText.textContent = `Website last updated: ${formattedDate} ${formattedTime}`;
}
})
.catch(error => {
console.error('Error fetching last update:', error);
const updateText = document.getElementById('last-updated-text');
if (updateText) {
updateText.textContent = 'Last update: Error fetching data.';
}
});
</script>
<h3>We operate on solely on Bitcoin donations; from a pleb just like you!</h3>
<!-- Button Section -->