public folder

public/.well-known/nostr.json

@@ -0,0 +1,6 @@
+  {
+    "names": {
+      "btcforplebs": "75462f4dece4fbde54a535cfa09eb0d329bda090a9c2f9ed6b5f9d1d2fb6c15b",
+      "logen": "61bf790b2094afb03495c9e136acf615be0fccc2cb95b5acfb5f6ccefe18b062"
+    }
+  }

public/README.md

@@ -0,0 +1 @@
+Http hosted website

public/assets/css/main.css

@@ -0,0 +1,371 @@
+/* General Variables (Light Mode by Default) */
+:root {
+    --background-color: #f4f4f4;
+    --text-color: #333;
+    --container-background: #e6e6e6;
+    --button-bg-top: #ffffff;
+    --button-bg-bottom: #e6e6e6;
+    --button-border: #aaa;
+    --button-hover-bg-top: #f9f9f9;
+    --button-hover-bg-bottom: #d9d9d9;
+    --btt-button:#aaa;
+    --price-banner-bg-top: #ffd149;
+    --price-banner-bg-bottom: #d7ac00;
+    --button-bg-top-active:  #ffd149;
+    --button-bg-bottom-active:  #d7ac00;
+    --section-background: #f7f7f7; 
+}
+
+/* Dark Mode Variables */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #666;
+        --text-color: #f4f4f4;
+        --container-background: rgba(26, 26, 26, 0.5);
+        --button-bg-top: #444;
+        --button-bg-bottom: #555;
+        --button-border: #666;
+        --button-hover-bg-top: #555;
+        --button-hover-bg-bottom: #666;
+        --btt-button: #afafaf;
+        --price-banner-bg-top: #ffd149;
+        --price-banner-bg-bottom: #d7ac00;
+        --button-bg-top-active:  #ffd149;
+        --button-bg-bottom-active:  #d7ac00;
+        --section-background: #777777; 
+    }
+}
+
+/* General Page Style */
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: "Lucida Grande", Arial, sans-serif;
+    text-align: center;
+    margin: 0;
+    padding: 0px 0;
+    padding-top: 0px;
+    padding-bottom: 4%;
+    box-sizing: border-box;
+}
+
+.container {
+
+    margin: auto;
+    padding: 10px;
+    box-sizing: border-box;
+    text-align: center;
+    background: var(--container-background);
+    border-radius: 12px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+    .container {
+        max-width: 96%; /* Full width for mobile */
+    }
+}
+
+/* Desktop styles */
+@media (min-width: 769px) {
+    .container {
+        max-width: 70%; /* Different width for desktop */
+        margin: 20px auto; /* Center the container */
+    }
+}
+
+.dropdown select {
+    display: block;
+    width: 250px;
+    margin: 21px auto;
+    padding: 15px 15px;
+    font-size: 16px;
+    background: linear-gradient(to bottom, var(--button-bg-top), var(--button-bg-bottom));
+    color: #F7931A;
+    font-weight: bold;
+    border: 1px solid var(--button-border);
+    border-radius: 8px;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    line-height: 1.5em;
+    transition: all 0.2s ease-in-out;
+}
+
+.dropdown select:hover {
+    background: linear-gradient(to bottom, var(--button-hover-bg-top), var(--button-hover-bg-bottom));
+    border-color: var(--button-border-hover, #888);
+}
+
+.dropdown select:focus {
+    outline: none;
+    background: linear-gradient(to bottom, var(--button-bg-top), var(--button-bg-bottom));
+    border-color: #333;
+}
+
+section {
+    margin: 50px auto;
+    position: relative;
+    padding: 10px;
+    padding-bottom: 60px;
+    max-width: 100%;
+    text-align: center;
+    border-radius: 12px;
+    background: var(--section-background);
+    box-shadow: 4px 4px 4px 4px rgba(0.1, 0.1, 0.1, 0.1);
+}
+
+
+h1 {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+h2 {
+    font-size: 26px;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+h3 {
+    font-size: 20px;
+    font-weight: normal;
+    margin-bottom: 20px;
+}
+
+p {
+    margin-bottom: 20px;
+    color: var(--text-color);
+    font-size: 18px;
+}
+
+small {   
+    font-size: 12px;
+}
+
+.profile-picture {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    border: 2px solid var(--button-border);
+    margin: 0 auto 15px;
+    display: block;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+}
+
+/* Button Style (Common for All Buttons) */
+.button {
+    display: block;
+    background: linear-gradient(to bottom, var(--button-bg-top), var(--button-bg-bottom));
+    border: 1px solid var(--button-border);
+    border-radius: 8px;
+    text-decoration: none;
+    color: var(--text-color);
+    padding: 10px 0;
+    font-size: 16px;
+    cursor: pointer;
+    margin: 21px auto;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+    width: 80%;
+    text-align: center;
+    line-height: 1.5em;
+    transition: all 0.2s ease-in-out;
+}
+.button.active {
+    background: linear-gradient(to bottom, var(--button-bg-top-active), var(--button-bg-bottom-active)); /* Subtle gold gradient */
+    border-color: #333; /* Darker border for active state */
+    font-weight: bold; /* Make text bold */
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Add a stronger shadow */
+}
+.button:hover {
+    background: linear-gradient(to bottom, var(--button-hover-bg-top), var(--button-hover-bg-bottom));
+    border-color: var(--button-border-hover, #888);
+}
+
+.button-container {
+    display: flex;
+    justify-content: center; /* Center buttons horizontally */
+    gap: 10px; /* Add space between buttons */
+    flex-wrap: wrap; /* Ensure buttons wrap if they don't fit in one row */
+}
+
+.video-container {
+        max-width: 70%;
+        margin: auto;
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+    .video-container {
+        max-width: 100%; /* Full width for mobile */
+    }
+}
+
+
+.links {
+    display: none; /* Hidden by default */
+    margin-top: 10px;
+    text-decoration: none;
+        text-align: center; /* Center folder items */
+}
+.links a {
+    display: block;
+    background: linear-gradient(to bottom, var(--button-bg-top), var(--button-bg-bottom));
+    color: var(--text-color);
+    text-decoration: none;
+    padding: 10px 0;
+    border: 1px solid var(--button-border);
+    border-radius: 6px;
+    width: 75%;
+    margin: 5px auto;
+    font-size: 14px;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    line-height: 1.5em;
+}
+
+.links a:hover {
+    background: linear-gradient(to bottom, var(--button-hover-bg-top), var(--button-hover-bg-bottom));
+    border-color: var(--button-border-hover, #888);
+}
+
+/* Align the logo-container to the left */
+.logo-container {
+    text-align: center; /* Align content to the left */
+    margin-bottom: 0px; /* Add spacing below the logo */
+}
+
+.logo-container a {
+    display: inline-block; /* Ensure the link and image behave properly */
+}
+
+/* Header Logo Styling */
+.header-logo {
+    width: 40px; /* Smaller size for better fit in the header */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 6px; /* Slightly rounded corners for aesthetics */
+    cursor: pointer; /* Indicate it's clickable */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+    position: left;
+}
+
+.header-logo:hover {
+    opacity: 0.8; /* Slight hover effect */
+}
+/* Social Icons Container */
+.social-icons {
+    display: flex;
+    justify-content: center; /* Center the icons */
+    gap: 20px; /* Add spacing between icons */
+    margin: 20px 0; /* Add spacing around the section */
+}
+
+/* Individual Social Icon Links */
+.social-icons a {
+    display: inline-block;
+    color: #999; /* Default color */
+    font-size: 24px; /* Icon size */
+    transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
+}
+
+/* Hover Effect for Icons */
+.social-icons a:hover {
+    color: #d7ac00; /* Hover color */
+    transform: scale(1.2); /* Slightly enlarge on hover */
+}
+
+/* Social Icons Font Fix */
+.social-icons i {
+    font-family: 'Font Awesome 6 Brands', 'Font Awesome 6 Free'; /* Cover multiple sets */
+    font-weight: 900;
+}
+
+#back-to-top {
+    position: sticky; /* Position the button relative to the section */
+    bottom: 20px; /* Space from the bottom of the section */
+    left: 20px; /* Space from the right of the section */
+    background-color: var(--btt-button);
+    border: 1px solid var(--button-border);
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 50px;
+    height: 50px;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+    z-index: 10; /* Ensures it stays above other content */
+}
+
+/* Wrap the <a> around the button area */
+#back-to-top a {
+    display: flex; /* Ensures the link fills the button */
+    justify-content: center;
+    align-items: center;
+    width: 100%; /* Make the link fill the button's width */
+    height: 100%; /* Make the link fill the button's height */
+    text-decoration: none; /* Removes underline from the link */
+    font-size: 24px; /* Size of the 🔝 emoji */
+    color: #ffffff; /* Set emoji color to white */
+}
+
+#back-to-top:hover {
+    background-color: var(--btt-button); /* Changes color on hover */
+    transform: scale(1.1); /* Slight zoom on hover */
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+#btc-price-banner {
+    background: linear-gradient(to bottom, var(--price-banner-bg-top), var(--price-banner-bg-bottom));
+    color: var(--text-color);
+    font-size: 14px;
+    font-weight: bold;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    max-width: 90%;
+    margin: 20px auto;
+}
+
+.qr-button {
+    display: inline-block;
+    background: linear-gradient(to bottom, var(--button-bg-top), var(--button-bg-bottom));
+    border: 1px solid var(--button-border);
+    border-radius: 8px;
+    text-decoration: none;
+    color: #F7931A;
+    padding: 10px 10px;
+    font-size: 16px;
+    cursor: pointer;
+    margin: auto auto auto 10px;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    line-height: 1.5em;
+    transition: all 0.2s ease-in-out;
+}
+
+.qr-button:hover {
+    background: linear-gradient(to bottom, var(--button-hover-bg-top), var(--button-hover-bg-bottom));
+    border-color: var(--button-border-hover, #888);
+}
+
+#qrCodes img {
+    margin-top: 10px; /* Spacing above the QR code */
+    width: 150px; /* Set a width for the QR code */
+    height: auto; /* Maintain aspect ratio */
+}
+
+
+footer {
+    padding: 10px;
+    text-align: center;
+    font-size: 12px;
+    margin-top: 20px;
+    color: var(--text-color);
+}

public/assets/js/scripts.js

@@ -0,0 +1,142 @@
+// Fetch Bitcoin Price, Percentage Change, and Block Time
+async function fetchBitcoinData() {
+    try {
+        // Fetch Bitcoin price and percentage change from CoinDesk API
+        const priceResponse = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json');
+        if (!priceResponse.ok) {
+            throw new Error('Failed to fetch Bitcoin price');
+        }
+        const priceData = await priceResponse.json();
+
+        const price = parseFloat(priceData.bpi.USD.rate.replace(',', '')); // Remove commas
+        const percentageChange = Math.random() * 4 - 2; // Mock % change as CoinDesk doesn't provide it
+        const updatedAt = new Date(priceData.time.updatedISO).toLocaleString();
+
+        // Fetch block height (Mocked API)
+        const blockResponse = await fetch('https://mempool.space/api/blocks/tip/height');
+        if (!blockResponse.ok) {
+            throw new Error('Failed to fetch block height');
+        }
+        const blockHeight = await blockResponse.json();
+
+        // Update the banner
+        const banner = document.getElementById('btc-price-banner');
+        banner.innerHTML = `
+            <strong>$${price.toFixed(2)}</strong> 
+            <span style="color: ${percentageChange >= 0 ? 'green' : 'red'};">
+                ${percentageChange >= 0 ? '⬆' : '⬇'} ${percentageChange.toFixed(2)}%
+            </span>
+            | Block #${blockHeight} 
+        `;
+    } catch (error) {
+        console.error('Error fetching Bitcoin data:', error);
+        document.getElementById('btc-price-banner').textContent = 'Unable to fetch Bitcoin data.';
+    }
+}
+
+// Refresh Bitcoin data every 60 seconds
+fetchBitcoinData();
+setInterval(fetchBitcoinData, 60000);
+
+// Folder Toggle Function
+function toggleFolder(folderId, buttonId) {
+    const folder = document.getElementById(folderId);
+    const button = document.getElementById(buttonId);
+
+    // 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');
+    }
+}
+
+// Section Navigation Function
+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
+fetch('/parts/footer.html')
+    .then(response => response.text())
+    .then(data => {
+        document.getElementById('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';
+
+        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
+        });
+
+        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
+        });
+    })
+    .catch(error => console.error('Error loading footer:', error));
+
+        // Fetch the latest commit information 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 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}`;
+            })
+            .catch(error => {
+                console.error('Error fetching last update:', error);
+                document.getElementById('last-updated-text').textContent = 'Last update: Error fetching data.';
+            });

public/index.html

@@ -0,0 +1,81 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BTCforPlebs</title>
+
+        <!-- Meta Description -->
+        <meta name="description" content="BTCforPlebs is a resource to help ordinary people learn about Bitcoin. Explore guides, tools, and resources to start your Bitcoin journey.">
+
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="BTCforPlebs">
+    <meta property="og:description" content="A place to help ordinary people learn about Bitcoin">
+    <meta property="og:image" content="/images/thumb.jpeg">
+    <meta property="og:url" content="https://btcforplebs.com">
+    <meta name="twitter:card" content="summary_large_image">
+
+    <!-- favicon -->
+    <link rel="icon" href="/images/favicon.png" type="image/png">
+
+    <!-- scripts -->
+    <script src="/assets/js/scripts.js" defer></script>
+</head>
+<link rel="stylesheet" href="/assets/css/main.css">
+<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
+<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
+<body>
+    
+<!-- Bitcoin Price Banner -->
+    <div id="btc-price-banner">Bitcoin price loading...</div>
+
+    <div class="container">
+        <h1>Welcome to BTCforPlebs</h1>
+        <h3>A place to help ordinary people learn about Bitcoin</h3>
+        <img src="/images/btcforplebs_profile.gif" alt="Profile Picture" class="profile-picture">
+        <p>Watch the video below to learn more about this site</p>
+        <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1031252195?h=c19910fb6b&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="btcforplebs opening video"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
+
+        <div class="button-div">
+        <!-- Buttons -->
+        <a href="/learn-bitcoin" class="button" class="prefetch">Learn About Bitcoin</a>
+        <a href="/learn-nostr" class="button" class="prefetch">Learn About Nostr</a>
+
+        <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">
+            <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://price.btcforplebs.com" target="_blank" class="prefetch">Charts</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">
+            <a href="https://nostr.btcforplebs.com" target="_blank" class="prefetch">Nostr Client</a>
+            <a href="https://nostrapps.com" target="_blank">More Nostr Apps</a>
+        </div>
+        <a href="https://btcforplebs.com/live" class="button" target="_blank" class="prefetch">WATCH LIVE</a>
+
+           <!-- Social Links Section -->
+    <div class="social-icons">
+        <a href="https://nostrudel.ninja/#/u/npub1w4rz7n0vunaau499xh86p84s6v5mmgys48p0nmttt7w36takc9dsf4382j" target="_blank" title="Nostr" class="prefetch">
+            <i class="fa-solid fa-link"></i>
+        </a>
+        <a href="https://youtube.com/@btcforplebs" target="_blank" title="YouTube" class="prefetch">
+            <i class="fa-brands fa-youtube"></i>
+        </a>
+        <a href="https://x.com/btcforplebs" target="_blank" title="X" class="prefetch">
+            <i class="fa-brands fa-twitter"></i>
+        </a>
+        <a href="btcforplebs@gmail.com" target="_blank" title="Email" class="prefetch">
+            <i class="fa-solid fa-envelope"></i>
+            <a href="https://github.com/btcforplebs/BTCforPlebs.com" target="_blank" title="GitHub" class="prefetch">
+                <i class="fa-solid fa-github"></i>
+        </a>
+    </div>
+    <div class="last-update">
+        <small id="last-updated-text"></small>
+    </div>
+    </div>
+</div>
+<div id="footer"></div>
+
+</body>
+</html>

public/learn-bitcoin/index.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Learn Bitcoin</title>
+    
+    <!-- scripts -->
+    <script src="/assets/js/scripts.js" defer></script>
+
+</head>
+<link rel="stylesheet" href="/assets/css/main.css">
+<body>
+    <!-- Bitcoin Price Banner -->
+    <div id="btc-price-banner">This page is under construction</div>
+
+    <div class="container">
+        <div class="logo-container">
+            <a href="/index.html" class="prefetch">
+                <img src="/images/btcforplebs_logo.gif" alt="Home" class="header-logo">
+            </a>
+    </div>
+    <div id="top"></div>
+        <h1>Learn About Bitcoin</h1>
+        <p>Bitcoin is decentralized money for the internet. It has a capped supply of 21 million bitcoin which is auditable and verifiable by yourself.</p>
+           <!-- Dropdown Navigation -->
+    <div class="dropdown">
+        <select onchange="navigateToSection(this)">
+            <option value="">Select a Topic</option>
+            <option value="where to start">Where To Start</option>
+            <option value="exchanges">Exchanges</option>
+            <option value="ownership">Ownership/Custody</option>
+            <option value="price">Price</option>
+            <option value="divisibility">Divisibility</option>
+            <option value="keys">Keys</option>
+            <option value="scarcity">Scarcity</option>
+            <option value="permissionlessness">Permissionlessness</option>
+            <option value="wallets">Wallets</option>
+            <option value="transacting">Transacting</option>
+            <option value="utxo">Unspent Transaction Output (UTXO)</option>
+            <option value="issuance">Issuance</option>
+            <option value="mining">Mining</option>
+            <option value="security">Secuirty</option>
+            <option value="verifyability">Verifyability</option>
+            <option value="regulation">Regulation</option>
+            <option value="nodes">Nodes</option>
+            <option value="lightning">Lightning</option>
+        </select>
+    </div>
+
+     <!-- Sections -->
+     <section id="where to start">
+        <h2>Where To Start</h2>
+        <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1035707374?h=9fa1299744&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="1.0 Where to start"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
+        <p>Buying Bitcoin is the first step in understanding its role in it's financial innovation. Knowing how to buy and sell Bitcoin is essential because it allows you to move between monetary systems and determine who truly owns the Bitcoin. <br> 
+            This knowledge helps you make informed decisions about where and with whom to store your Bitcoin. Ultimately, understand ownership within bitcoin will allow you to make the most of it's innovations and potential.</p>
+    </section>
+
+    <section id="exchanges">
+        <h2>Bitcoin Exchanges</h2>
+        <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1033222798?h=bc453bcef5&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="2.0 Bitcoin Exchanges"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
+        <p>Bitcoin exchanges are the on and off ramp between the each financial system. Exchanges are the most common way to buy Bitcoin. They act as marketplaces where you can trade your local currency for Bitcoin. Popular options like Coinbase or Kraken make the process simple, but they often hold your Bitcoin for you unless you transfer it to your wallet. Using exchanges is convenient, but the real power of Bitcoin comes when you take ownership yourself.</p>
+        <a href="https://river.com/signup?r=ERX2MWNH" class="button" target="_blank" class="prefetch">River.com</a>
+        <a href="https://invite.strike.me/ZJ15X4" class="button" target="_blank" class="prefetch">Strike.com</a>
+    </section>
+
+    <section id="ownership">
+        <h2>Ownership</h2>
+        <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1035707450?h=4c10ac1e20&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="3.0 Ownership"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
+        <p>Understanding ownership is a fundamental aspect of engaging with Bitcoin. The journey begins with purchasing Bitcoin, which serves as your introduction to its significant role in financial innovation. Knowing how to buy and sell Bitcoin is crucial, as it empowers you to transition between various monetary systems and discern who genuinely holds the Bitcoin. </p>
+
+        <p>This understanding is essential for making informed choices about the storage of your Bitcoin, whether you use wallets or leave it on an exchange. In the world of Bitcoin, ownership is defined by control over private keys. These keys are what grant you access to your Bitcoin and determine your sovereignty over it. Thus, grasping the importance of private keys and the responsibilities that come with them is a critical step in mastering Bitcoin.</p>
+    </section>
+
+    <section id="price">
+        <h2>Bitcoin's Price</h2>
+        <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1037554432?h=6472acd808&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="4.0 Price"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
+        <p>When we talk about the price of bitcoin, we are actually talking about bitcoin's spending power. Just like we can't eat bitocoin, we can't eat dollars. So while comparing bitcoin to dollars to get a proper price point. We should actually be looking forward to valuing the bitcoin against what the bitcoin can purchase you today, and in the future; but most importantly. Why thats the case.</p>
+            <a href="https://price.btcforplebs.com" class="button" target="_blank" class="prefetch">My Favorite BTC Chart</a>
+            <a href="https://www.pricedinbitcoin21.com/landing" class="button" target="_blank" class="prefetch">PricedInBitcoin21.com</a>
+        </section>
+
+    <section id="divisibility">
+        <h2>Divisibility</h2>
+        <p>Bitcoin's divisibility is one of its key features, allowing it to be broken down into smaller units called satoshis, with one Bitcoin equal to 100 million satoshis. This high level of divisibility enables users to transact with Bitcoin in very small amounts, making it accessible for various types of purchases, regardless of size. Just as traditional currencies can be divided into cents, Bitcoin's structure allows for flexible use in everyday transactions and microtransactions, promoting its usability in diverse economic scenarios. This divisibility not only enhances Bitcoin's utility but also supports its integration into the global economy, where varying transaction sizes and values are common.</p>
+
+    </section>
+
+    <section id="keys">
+        <h2>Keys</h2>
+        <p>In the world of Bitcoin, **private keys** and **public keys** serve distinct but crucial roles. A private key is a confidential code that allows you to access and control your Bitcoin. It is essential to keep this key secure, as anyone with access to it can manage your funds.</p>
+        <p>On the other hand, a public key is shared with others; it acts like your bank account number. People can use your public key to send you Bitcoin, but it does not grant them access to your funds. Together, these keys ensure that you can securely send and receive Bitcoin while maintaining control over your assets.</p>
+
+    </section>
+
+    <section id="scarcity">
+        <h2>Scarcity</h2>
+        <p>Recognizing the concept of scarcity is vital for fully understanding Bitcoin. It begins with the notion that Bitcoin is a limited resource, distinguishing it from traditional fiat currencies that can be printed endlessly. This inherent scarcity not only drives demand but also plays a crucial role in shaping its value within various financial ecosystems.</p>
+
+        <p>A firm grasp of scarcity is indispensable when making decisions about your Bitcoin investments and managing its storage. As Bitcoin is limited by design, understanding its supply dynamics can help you navigate the market more effectively. Moreover, appreciating the implications of scarcity aids in recognizing the significance of securing your Bitcoin through proper wallet management and the importance of safeguarding your private keys.</p>
+
+    </section>
+
+    <section id="permissionlessness">
+        <h2>Permissionlessness</h2>
+        <p>Understanding Bitcoin’s permissionless nature is essential for grasping its revolutionary impact on finance. Satoshi Nakamoto designed Bitcoin to operate without a central authority, allowing anyone to participate freely in the network. This means that users can transact directly with one another without needing permission from banks or governments, fostering greater financial inclusion.</p>
+        <p>Moreover, Bitcoin offers a level of anonymity that is not typically found in traditional financial systems. While all transactions are recorded on a public ledger, the identities of users are not directly tied to their wallet addresses. This design empowers individuals to transact without revealing personal information, aligning with Satoshi's vision of a system that respects privacy and promotes freedom. Understanding these principles of permissionless access and anonymity is crucial for effectively navigating the Bitcoin ecosystem.</p>
+
+    </section>
+
+    <section id="wallets">
+        <h2>Bitcoin Wallets</h2>
+        <div class="video-container">
+            <video controls playsinline width="100%" height="auto" poster="/images/thumb.jpeg">
+                <source src="https://player.vimeo.com/progressive_redirect/playback/923501921/rendition/1080p/file.mp4?loc=external&log_user=0&signature=e022ef23130ac67e4cde36be1ba11f9c269e081371af72fa36095a84cc0850a5" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+        <p>A Bitcoin wallet is where you store your Bitcoin and manage ownership. Hot wallets, connected to the internet, are great for everyday use, while cold wallets, kept offline, offer maximum security. The most important part of any wallet is the private keys—these keys are your access to the Bitcoin network, so keeping them secure is critical.</p>
+
+    </section>
+
+    <section id="transacting">
+        <h2>Transacting Bitcoin</h2>
+        <p>Transacting with Bitcoin is straightforward once you understand the basics. You send Bitcoin to another wallet using the recipient’s address, and the Bitcoin network verifies the transaction. Fees and confirmation times can vary, but they’re a small price to pay for being able to send value anywhere in the world, anytime.</p>
+
+    </section>
+
+    <section id="utxo">
+        <h2>Unspent Transactions Output (UTXO)</h2>
+        <p>The Unspent Transaction Output (UTXO) model is fundamental to Bitcoin's transaction process. It refers to the Bitcoin that is available for spending after previous transactions have been completed. Each UTXO represents a specific amount of Bitcoin that can be used in future transactions. This model not only helps maintain the integrity of the blockchain by ensuring that coins cannot be double-spent, but it also allows for a clear and precise accounting of Bitcoin’s availability. Understanding the UTXO model is essential for anyone looking to engage with Bitcoin transactions effectively.</p>
+
+    </section>
+
+    <section id="issuance">
+        <h2>Issuance</h2>
+        <p>Bitcoin issuance refers to the creation of new coins, which occurs through a process called mining. New Bitcoins are generated as miners solve complex mathematical problems to validate transactions on the network. This structured issuance is capped at 21 million coins, making Bitcoin a deflationary asset. Understanding Bitcoin's issuance helps you appreciate its scarcity and how it differs from traditional currencies, which can be printed without limit. This unique system ensures that Bitcoin maintains value over time and provides a predictable monetary supply.</p>
+
+    </section>
+
+    <section id="mining">
+        <h2>Mining Bitcoin</h2>
+        <p>Mining Bitcoin is how new coins are generated. Mining is the process that secures the Bitcoin network and keeps it decentralized. Miners use powerful computers to solve puzzles that validate transactions and create new Bitcoin. While mining isn’t something most people do themselves, understanding it helps you appreciate how Bitcoin stays secure without relying on any single authority.</p>
+
+    </section>
+
+    <section id="security">
+        <h2>Secuirty</h2>
+        <p>Bitcoin's security relies heavily on the SHA-256 hashing algorithm, which ensures that transactions are processed securely. This algorithm generates unique hashes for each transaction, making it nearly impossible to alter any part of the transaction history without detection. Additionally, SHA-256 helps prevent wallet collisions by creating distinct addresses for each user's wallet. Each address is derived from a unique public key, ensuring that no two addresses are the same. This uniqueness is crucial for maintaining the integrity of the Bitcoin network and ensuring that funds are safely attributed to the correct owners.</p>
+
+    </section>
+
+    <section id="verifyability">
+        <h2>Verifyability</h2>
+        <p>Bitcoin’s verifiability is a fundamental aspect of its design, ensuring that all transactions can be independently confirmed by participants in the network. Each transaction is recorded on a public ledger called the blockchain, where it can be accessed and verified by anyone. This transparency allows users to validate transaction history and confirm the authenticity of funds without needing a trusted intermediary. Additionally, the SHA-256 hashing algorithm plays a critical role in this process, as it generates unique hashes for each block of transactions. This makes it virtually impossible to alter any part of the blockchain without altering all subsequent blocks, providing a high level of security and trust in the network. Such verifiability ensures that users can confidently engage in transactions, knowing that the information is accurate and immutable.</p>
+
+    </section>
+
+    <section id="regulation">
+        <h2>State and Federal Regulations</h2>
+        <p>State and federal regulations regarding Bitcoin are continually evolving as governments seek to understand and manage the implications of cryptocurrencies. These regulations can vary significantly from one jurisdiction to another, impacting everything from how Bitcoin is classified (as a commodity, currency, or something else) to the requirements for exchanges and wallet providers. Compliance with laws related to anti-money laundering (AML) and know your customer (KYC) is often mandated, aimed at preventing illegal activities. Understanding these regulations is essential for users and businesses involved with Bitcoin to operate within the legal framework, ensuring that they can engage in transactions safely and transparently in a regulated environment.</p>
+
+    </section>
+
+    <section id="nodes">
+        <h2>Bitcoin Nodes</h2>
+        <p>Nodes are the backbone of the bitcoin network. They store the entire history of Bitcoin transactions and help verify new ones. Running a node lets you participate directly in Bitcoin’s decentralized system and ensures you can verify your own transactions without needing to trust anyone else.</p>
+        <a href="/learn-bitcoin/nodes.html" class="button" target="_blank" class="prefetch">Run your own Node</a>
+    </section>
+
+    <section id="lightning">
+        <h2>Bitcoin Lightning</h2>
+        <p>The Lightning Network is Bitcoin’s way of making transactions faster and cheaper. Instead of sending every transaction directly on the blockchain, Lightning allows you to create payment channels with others, making small and frequent transactions instant and nearly free. It’s an exciting development for using Bitcoin in everyday life.</p>
+
+
+    </section>
+    </div>
+    <div id="footer"></div>   
+    <div id="back-to-top">
+        <a href="#top" title="Back to Top">🔝</a>
+    </div>
+
+
+</html>

public/learn-bitcoin/nodes.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Run Your Own Bitcoin Node</title>
+    
+    <!-- scripts -->
+    <script src="/scripts.js" defer></script>
+
+</head>
+<link rel="stylesheet" href="/styles.css">
+<body>
+    <!-- Bitcoin Price Banner -->
+    <div id="btc-price-banner">This page is under SEVERE construction</div>
+
+    <div class="container">
+        <div class="logo-container">
+            <a href="/index.html" class="prefetch">
+                <img src="/images/btcforplebs_logo.gif" alt="Home" class="header-logo">
+            </a>
+    </div>
+    <div id="top"></div>
+        <h1>Bitcoin Nodes</h1>
+        <p>Learn about the inner workings of Bitcoin's peer-to-peer network of nodes. Dig deep into the technical details of the code and build your own node to participate in the network on a greater level than merely holding the asset. Help be PART of securing the bitcoin Network.</p>
+           <!-- Dropdown Navigation -->
+    <div class="dropdown">
+        <select onchange="navigateToSection(this)">
+            <option value="">Select a Topic</option>
+            <option value="where to start">Where To Start</option>
+        </select>
+    </div>
+
+     <!-- Sections -->
+     <section id="where to start">
+        <h2>Where To Start with Node Running</h2>
+        <div class="video-container">
+            <video controls playsinline width="100%" height="auto" poster="/images/thumb.jpeg">
+                <source src="https://player.vimeo.com/progressive_redirect/playback/1032394528/rendition/1080p/file.mp4?loc=external&log_user=0&signature=ee9903d404061750be460862d009490c3f88d9073bde78c16a3df728e02aadb3" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+            <p>Node Running is how you verify the Bitcoin network. Running a node is a crucial part of securing the Bitcoin network.</p>
+    </section>
+
+    <div id="footer"></div>   
+    <div id="back-to-top">
+        <a href="#top" title="Back to Top">🔝</a>
+    </div>
+
+
+</html>

public/learn-bitcoin/wallets.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wallest</title>
+    
+    <!-- scripts -->
+    <script src="/scripts.js" defer></script>
+
+</head>
+<link rel="stylesheet" href="/styles.css">
+<body>
+    <!-- Bitcoin Price Banner -->
+    <div id="btc-price-banner">This page is under SEVERE construction</div>
+
+    <div class="container">
+        <div class="logo-container">
+            <a href="/index.html" class="prefetch">
+                <img src="/images/btcforplebs_logo.gif" alt="Home" class="header-logo">
+            </a>
+    </div>
+    <div id="top"></div>
+        <h1>Choosing A Wallet</h1>
+        <p>Choosing a Wallet is the most important part of securing your Bitcoin. Here are some tips to help you make an informed decision</p>
+           <!-- Dropdown Navigation -->
+    <div class="dropdown">
+        <select onchange="navigateToSection(this)">
+            <option value="">Select a Topic</option>
+            <option value="where to start">Where To Start</option>
+        </select>
+    </div>
+
+     <!-- Sections -->
+     <section id="where to start">
+        <h2>Where To Start with Wallets</h2>
+            <p>Selecting a wallet is a critical decision that can have a significant impact on your security and privacy. You can make as many </p>
+    </section>
+
+    <div id="footer"></div>   
+    <div id="back-to-top">
+        <a href="#top" title="Back to Top">🔝</a>
+    </div>
+
+
+</html>

public/learn-nostr/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Learn Nostr</title>
+
+</head>
+<link rel="stylesheet" href="/assets/css/main.css">
+<body>
+        
+    <!-- Bitcoin Price Banner -->
+    <div id="btc-price-banner">This page is under construction</div>
+
+    <div class="container">
+        <div class="logo-container">
+            <a href="https://btcforplebs.com">
+                <img src="/images/btcforplebs_logo.gif" alt="Home" class="header-logo">
+            </a>
+    </div>
+
+        <h1>Learn About Nostr</h1>
+        <p>Nostr is a decentralized, censorship-resistant protocol for communication. Learn more about its potential by watching the video below.</p>
+        <h2>What is Nostr and Why Should You Care?</h2>
+        
+        <div class="video-container">
+            <video controls playsinline width="100%" height="auto" poster="https://img.youtube.com/vi/8aZkg3OQc5c/maxresdefault.jpg">
+                <source src="https://player.vimeo.com/progressive_redirect/playback/920597331/rendition/1080p/file.mp4?loc=external&log_user=0&signature=679fc1e260d7c0a66c6cb9f5168b4d117e6cc79c2e895ca6c34723066c912687" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+
+        <a href="/index.html" class="button">Home</a>
+    </div>
+    <div id="footer"></div>
+    
+</body>
+</html>

public/parts/footer.html

@@ -0,0 +1,18 @@
+<link rel="stylesheet" href="/assets/css/main.css">
+<footer>
+    <h3>We operate on solely on Bitcoin donations; from a pleb just like you!</h3>
+    <button class="qr-button" id="onChainButton">Donate with On-Chain</button>
+    <button class="qr-button" id="lightningButton">Donate Via Lightning</button>
+    <div id="qrCodes" style="display: none;">
+        <div id="onChainQRCode" style="display: none;">
+            <img src="/images/on-chain-donate.png" alt="On-Chain QR Code">
+            <h3>bc1qcx7zwjgjzqm32yd4lhu2upnm06jqutl6w8yruq</h3>
+        </div>
+        <div id="lightningQRCode" style="display: none;">
+            <img src="/images/lightning-donate.png" alt="Lightning QR Code"><br>
+            <h3>me@lightning.btcforplebs.com</h3>
+        </div>
+    </div>
+    <br>
+    <small>This website is a work in progress and always under development. None of the content on this website is Financial Advice. Do Your Own Research (DYOR) before converting your worthless Fiat Money into the Hardest Money ever known to mankind.<br> - Stack Sats <br> - HODL your keys<br> - It's not that complicated</small>
+</footer>

public/robots.txt

@@ -0,0 +1,15 @@
+# robots.txt for BTCforPlebs
+
+# Allow all crawlers
+User-agent: *
+
+# Block unnecessary directories or paths (add paths as needed)
+Disallow: /private/      # Example: Block /private/ directory
+Disallow: /test/         # Example: Block /test/ directory
+Disallow: /scripts/      # Example: Block /scripts/ directory
+
+# Allow everything else
+Allow: /
+
+# Specify the location of your sitemap
+Sitemap: https://btcforplebs.com/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>https://btcforplebs.com/</loc>
+        <lastmod>2024-11-19</lastmod>
+        <changefreq>daily</changefreq>
+        <priority>1.0</priority>
+    </url>
+    <url>
+        <loc>https://btcforplebs.com/learn-bitcoin.html</loc>
+        <lastmod>2024-11-19</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.8</priority>
+    </url>
+    <url>
+        <loc>https://btcforplebs.com/learn-bitcoin/nodes.html</loc>
+        <lastmod>2024-11-19</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.8</priority>
+    </url>
+    <url>
+        <loc>https://btcforplebs.com/learn-nostr.html</loc>
+        <lastmod>2024-11-19</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.8</priority>
+    </url>
+    <url>
+        <loc>https://btcforplebs.com/learn-bitcoin/wallets.html</loc>
+        <lastmod>2024-11-19</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
+    
+</urlset>