From 5105088f93cb8c4a7705d2906e65b2dfe787bf1f Mon Sep 17 00:00:00 2001 From: Logen <79722764+btcforplebs@users.noreply.github.com> Date: Sat, 30 Nov 2024 16:16:55 -0500 Subject: [PATCH] styles and scripts --- .DS_Store | Bin 8196 -> 6148 bytes assets/.DS_Store | Bin 0 -> 6148 bytes assets/css/main.css | 370 +++++++++++++++++++++++++++++++++++++++++++ assets/js/scripts.js | 127 +++++++++++++++ 4 files changed, 497 insertions(+) create mode 100644 assets/.DS_Store create mode 100644 assets/css/main.css create mode 100644 assets/js/scripts.js diff --git a/.DS_Store b/.DS_Store index 94d18a32aad16918435106d32412a6bb6210c3bc..0ba00a5b0ee2439c5ee7f168a1c609b49d5c22f6 100644 GIT binary patch delta 170 zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGqg=C6q~50D98k4GlIlYij#Aa^7C^h7HUs6 zkYUkgVbEhpXUJqIfk}XLu`whv6a!%@LkUAMOoDM^p)dPlb`B0fW{?`7VcbB%6^Pq5 m7Jg@*%rB$M3ABRY01z`ww&9WH0a^-j2*_;=o8x(AFarSPZ6Cn^ literal 8196 zcmeHMU2GIp6h3EK=v+!+%0jyp*RGZlEQOX*C_mb6+ok+dVEYfc?CuQhgxQ&8XLc7P zXyb!_h<~sCznEwY(FX(iWIgNO9T2S}ZL5+I^AX-Um zw@{zX0j^HiqY;lz3+k%Un&R|;o+^4r3>4}#ALimjBOaX=RHy?AbwF=t^iC+~?oN7P zR~#@RsNeb?@I5fs1N`hhA9P4V0wzn&?-!C8L${sw_A4k=RL+}URmG~RtL}?US%sLB zaB_BEB72CBhAhiS7W;|hh^`gl%F=$zbP~F$WnBeb)kx&hs_p8=!~|n9 ziz~rXr#d%nY7KAb>O9>VKDD`{y*1pqe&gxWOkUR1w)J5An2|QECxjX3y$YbF#H=%= zHW`!aVks+~xj}B0&4!)t7k3sFwMCmh_iUCKs}2m0jE=<>C1+~~H6!8Zc`cf7G&`;= zw#odRDa+iS)$(NaXv#8jX_IDZQwbxLBVn!AFk<=xnmy)dCmi0Ju&u1q?+T9Tq|146 zWeL|G%s9Gb+9O)lCd$~kh08*Btz6x{VM}-a_T7UsHH#K2wMznQg1lxr`cYlW4i|LQ znHo>nDa}-Mb8ny<&ygGobH@dnq+xKS+ux@ zH3sfv$~*F5l?>QxseC8Zoe4Asnq~PA=l5qdY6Y9E3bZgKArIMPj96j~Yh#MdhK|uA z7pfhsQ&vw05PV<0fjm+DnjO(mm)b@erY z1A&;VTqYewH}g6{oSuO|y4)0L5$JK<+7xLQqop@Mig$S$Yk*ehh5?v>6qrzeC*dqS z1uw#D@HU)>_u(VB1fRlX_zb>+Z{Y{H3ctcN1Vmhb)mVdza5=8PW?YFKxE1fgZtTG* z?!|q$9}nON#_pz?bl4JcsA;0=|nE@ngJ%pWrw6 zJzmA1@MpXxfh0*4Qk_&Ug{5X`t*}5U2GjU#i=-YJmj;V>!6z9v3zpEff$cl~mSFi} zp%)%Ym)+5{YE8$+tv%O4BrsQm*^TgZ5jzX#E@Iv1T#7a~j+V2~FhN>7Q7)X6DhfL$ z&v5C+FbgU32=rpOqM3&C3GiZgcS|UwNEBycxVA0ClnRO>=IX9*p&@#Mu1$<7l@w2G zrlCGq$Cih>nXG^-80n>Dcy!2r9;dIu8}JrffQy9FEAS zgw0jhf~&C=H((cT#w~=@C=TEb+=;s|hQm0DV>nJYRZ+vEXyI|fszYdf5Ff&6d>GH* zS$rCw!Dn66zJjlp;Be<`9O8SWI80m7sCUsUzuD09$alF9dgsche<+igx^;5M$Finj znUl0OkC6qGEKN`;Ri1#gFa-{!P9x(a_vCCROY^HC1}DKLzD6@`Faj1BkfT0bj?*|w ziPoXo2E#PgAnS4slH%#tBz}hE*F%!{ajLqzQrj(d-skOn(_cnVoapsG45=R` jQLYp5=(M23q4Jks1n>`QKmV8gPWAJD$@lJmH2?n&RDzti diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..58eede071a9a86b0c22880542faf519458f64ac3 GIT binary patch literal 6148 zcmeHKJ8A<#43%ORhBPiy&J}!v!8j-I1x)NJ7+fswx5~M4w7e(DA1FmYvP8*I1?KkMJ8 zj^z^+5d&gC42S_SAO?QJ0D3lM^PDIv2E>3E_-26rhXy6~!Z9&^9We3E2d?1`!8&FM zV50-r3&%uwAYLPaSE<*C;aQG&tGr$~CT6*L+>CSTX0Hjw<97I4q?`9dSur36rVOld zyJi1>g)Yqh(<1G}fEf5!4EXwRJnZpF)mvvD$6ni@Cn$41p%kp61SZ-sFxoLTY{xH= dlzEM7#CzeG80GLsIWW7q9s^`YA_o4BfiD#?7Tf>; literal 0 HcmV?d00001 diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..36a56be --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,370 @@ +/* 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 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 20px 20px auto; + 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); +} \ No newline at end of file diff --git a/assets/js/scripts.js b/assets/js/scripts.js new file mode 100644 index 0000000..aaa1ccf --- /dev/null +++ b/assets/js/scripts.js @@ -0,0 +1,127 @@ +// 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 = ` + $${price.toFixed(2)} + + ${percentageChange >= 0 ? '⬆' : '⬇'} ${percentageChange.toFixed(2)}% + + | 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)); +