goodmorningbitcoin/goodmorningbitcoin-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
saulteafarmer 2025-04-17 12:48:02 +00:00
parent 9b4548321d
commit b179acaeea
1 changed files with 148 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

295
index.html
View File

@ -1,155 +1,152 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="This a Bitcoin content focused radio station designed primarily for the Orange Rust Server" /> <title>Good Morning Bitcoin</title>
<meta name="author" content="Good Morning Bitcoin" /> <link rel="stylesheet" href="https://unpkg.com/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" />
<title>Good Morning Bitcoin</title> <!-- MailerLite styles -->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <style type="text/css">@import url("https://assets.mlcdn.com/fonts.css?version=1744733");</style>
<!-- Font Awesome icons (free version)--> <style type="text/css">
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script> .ml-form-embedSubmitLoad { display:inline-block;width:20px;height:20px; }
<!-- Google fonts--> .ml-form-embedSubmitLoad:after { content:" ";display:block;width:11px;height:11px;margin:1px;border-radius:50%;border:4px solid #fff;border-color:#fff #fff #fff transparent;animation:ml-form-embedSubmitLoad 1.2s linear infinite; }
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" /> @keyframes ml-form-embedSubmitLoad {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" /> </style>
<!-- Core theme CSS (includes Bootstrap)--> <style>
<link href="css/styles.css" rel="stylesheet" /> body { font-family:sans-serif; background-color:#fefdfc; }
</head> .orange { color:#e86228; }
<body id="page-top"> .bg-orange { background-color:#e86228; }
<!-- Navigation--> .text-xl-bold { font-size:1.5rem; font-weight:bold; }
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"> </style>
<div class="container px-4 px-lg-5"> </head>
<a class="navbar-brand" href="#page-top">Good Morning Bitcoin</a> <body class="text-gray-900">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.orangem.art/">Orange</a></li>
<li class="nav-item"><a class="nav-link" href="https://snort.social./p/npub1n35s0hnjukw675njzqargeym7l9qzpg2dr6q9924yr798kafwvxsgp63m0">Snort</a></li>
<li class="nav-item"><a class="nav-link" href="shows.html">Shows</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
<div class="d-flex justify-content-center">
<div class="text-center">
<h1 class="mx-auto my-0 text-uppercase">Good Morning</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5"></h2>
<br><br><br><br>
<iframe src="https://radio.goodmorningbitcoin.com/public/goodmorningbitcoin/embed?theme=dark" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 150px; border: 0;"></iframe>
</div>
</div>
</div>
</header>
<!-- About-->
<section class="about-section text-center" id="about">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8">
<h2 class="text-white mb-4">Join the conversation on Nostr</h2>
<!-- NostriChat-->
<script
src="https://nostri.chat/public/bundle.js"
// YOUR PUBKEY IN HEX FORMAT
data-website-owner-pubkey="npub1n35s0hnjukw675njzqargeym7l9qzpg2dr6q9924yr798kafwvxsgp63m0"
// THE TYPE OF CHAT YOU WANT: GLOBAL or DMs
data-chat-type="GLOBAL"
// If you use GLOBAL you can choose set a comma-separated list of hashtags
data-chat-tags="goodmorningbitcoin"
// Relays you'd like to use, change this this as you wish
data-relays="wss://relay.f7z.io,wss://nos.lol,wss://relay.nostr.info,wss://nostr-pub.wellorder.net,wss://relay.current.fyi,wss://relay.nostr.band"
></script>
<link rel="stylesheet" href="https://nostri.chat/public/bundle.css"><p class="text-white-50"><br>
<p class="text-white-50">
Use the NostriChat button to join the conversation about Good Morning Bitcoin on Nostr!
Feel free to spin up a new set of keys just for the podcast or use NostrConnect or any NIP-07 compatiabile plugin to join the fun!
</p>
</div>
</div>
<img class="img-fluid" src="assets/img/ipad.png" alt="..." />
</div>
</section>
<!-- Projects-->
<section class="projects-section bg-light" id="projects">
<div class="container px-4 px-lg-5">
<!-- Featured Project Row-->
<div class="row gx-0 mb-4 mb-lg-5 align-items-center">
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="assets/img/bg-masthead.jpg" alt="..." /></div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h4><a href="shows.html">Our Shows</a></h4>
<p class="text-black-50 mb-0">We are extremely thankful to the content creators who have decided to share their content on Good Morning Bitcoin. We've linked profiles for each show below so you can subscribe to their podcast directly if you liked their show.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Signup-->
<section class="signup-section" id="signup">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
<h2 class="text-white mb-5">Subscribe to receive updates!</h2>
</div> <!-- Header -->
<header class="bg-orange text-white p-4">
<div class="max-w-5xl mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">GOOD MORNING BITCOIN.COM</h1>
<nav class="space-x-4">
<a href="https://goodmorningbitcoin.com/about.html" class="hover:underline">About</a>
<a href="https://rustysats.com" class="hover:underline">RustySats</a>
<a href="https://www.orangem.art/" class="hover:underline">Orange</a>
<a href="https://ditto.pub/npub1n35s0hnjukw675njzqargeym7l9qzpg2dr6q9924yr798kafwvxsgp63m0" class="hover:underline">Nostr</a>
<a href="https://goodmorningbitcoin.com/shows.html" class="hover:underline">Shows</a>
</nav>
</div>
</header>
<!-- Now Playing -->
<section class="bg-black text-white py-6">
<div class="max-w-5xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-2">The Voice of Bitcoin, Every Morning.</h2>
<iframe src="https://radio.goodmorningbitcoin.com/public/goodmorningbitcoin/embed?theme=dark" frameborder="0" allowtransparency="true" style="width:100%;min-height:150px;border:0;"></iframe>
</div>
</section>
<!-- Main Content -->
<main class="max-w-5xl mx-auto py-10 grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Featured Show -->
<section class="md:col-span-1 p-4 border rounded">
<h3 class="text-xl-bold mb-2">Featured Show</h3>
<div id="featured-show">Loading show…</div>
</section>
<!-- Bitcoin News Brief -->
<section class="md:col-span-1 p-4 border rounded">
<h3 class="text-xl-bold mb-2">Bitcoin News Brief</h3>
<ul id="news-briefs" class="space-y-2">
<li>Loading news…</li>
</ul>
</section>
<!-- Bitcoin 101 + Email Signup Stack -->
<div class="md:col-span-1 space-y-6">
<!-- Bitcoin 101 -->
<section class="p-4 border rounded">
<h3 class="text-xl-bold mb-2">Bitcoin 101</h3>
<p>Learn about Bitcoin basics.</p>
<a href="https://bitcoin101.goodmorningbitcoin.com" class="inline-block mt-2 bg-orange text-white px-4 py-2 rounded">Get Started</a>
</section>
<!-- Email Signup -->
<section class="p-4 border rounded">
<h3 class="text-xl-bold mb-2">Email Signup</h3>
<div id="mlb2-24950357" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-24950357">
<div class="ml-form-align-center">
<div class="ml-form-embedWrapper embedForm">
<div class="ml-form-embedBody row-form">
<div class="ml-form-embedContent mb-2">
<p>Signup for the latest Bitcoin news!</p>
</div> </div>
<form class="ml-block-form mt-2" action="https://assets.mailerlite.com/jsonp/1459975/forms/151930403370829428/subscribe" method="post" target="_blank">
<div class="ml-form-formContent">
<div class="ml-form-fieldRow ml-last-item">
<div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">
<input type="email" name="fields[email]" placeholder="Email" required class="w-full p-3 border border-gray-300 rounded mb-2" />
</div>
</div>
</div>
<input type="hidden" name="ml-submit" value="1">
<div class="ml-form-embedSubmit">
<button type="submit" class="bg-black text-white px-4 py-2 rounded w-full">Subscribe</button>
<button disabled style="display:none;" class="loading"><div class="ml-form-embedSubmitLoad"></div><span class="sr-only">Loading...</span></button>
</div>
<input type="hidden" name="anticsrf" value="true">
</form>
</div>
</div> </div>
</section> </div>
<!-- Contact--> </div>
<section class="contact-section bg-black"> <script src="https://groot.mailerlite.com/js/w/webforms.min.js?v176e10baa5e7ed80d35ae235be3d5024" async></script>
<div class="container px-4 px-lg-5"> </section>
<div class="row gx-4 gx-lg-5"> </div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100"> <!-- Network Stats -->
<div class="card-body text-center"> <section class="md:col-span-3 p-4 bg-black text-white rounded">
<i class="fas fa-map-marked-alt text-primary mb-2"></i> <div id="network-stats" class="text-lg font-mono text-center">Loading stats…</div>
<h4 class="text-uppercase m-0">Address</h4> </section>
<hr class="my-4 mx-auto" />
<div class="small text-black-50">Meet Me at OrangeMart</div> <!-- Latest Episodes -->
</div> <section class="md:col-span-3 p-4 border rounded">
</div> <h3 class="text-xl-bold mb-2">Latest Episodes</h3>
</div> <iframe src="https://radio.goodmorningbitcoin.com/public/goodmorningbitcoin/history?theme=light" frameborder="0" allowtransparency="true" style="width:100%;min-height:300px;border:0;"></iframe>
<div class="col-md-4 mb-3 mb-md-0"> </section>
<div class="card py-4 h-100">
<div class="card-body text-center"> </main>
<i class="fas fa-envelope text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Email</h4> <!-- Scripts -->
<hr class="my-4 mx-auto" /> <script>
<div class="small text-black-50"><a href="mailto:hello@goodmorningbitcoin.com">hello@goodmorningbitcoin.com</a></div> // Network stats
</div> Promise.all([
</div> fetch("https://mempool.space/api/v1/fees/recommended").then(r=>r.json()),
</div> fetch("https://mempool.space/api/v1/blocks/tip/height").then(r=>r.json()),
<div class="col-md-4 mb-3 mb-md-0"> fetch("https://mempool.space/api/v1/mining/hashrate/3d").then(r=>r.json()),
<div class="card py-4 h-100"> fetch("https://mempool.space/api/v1/difficulty-adjustment").then(r=>r.json()),
<div class="card-body text-center"> fetch("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd").then(r=>r.json())
<i class="fas fa-mobile-alt text-primary mb-2"></i> ]).then(([fees,height,hrData,diffAdj,priceData])=>{
<h4 class="text-uppercase m-0">Phone</h4> const price=priceData.bitcoin?.usd?`$${priceData.bitcoin.usd.toLocaleString()}`:"N/A";
<hr class="my-4 mx-auto" /> const fee=fees.fastestFee?`${fees.fastestFee} sat/vB`:"N/A";
<div class="small text-black-50">TBD</div> let difficulty="N/A";
</div> if(hrData.currentDifficulty){const exp=Math.floor(Math.log10(hrData.currentDifficulty));const power=Math.floor(exp/3)*3;const base=hrData.currentDifficulty/Math.pow(10,power);difficulty=`${base.toFixed(1)}×10<sup>${power}</sup>`;}
</div> let nextDate="N/A";
</div> if(diffAdj.estimatedRetargetDate){let ts=diffAdj.estimatedRetargetDate;let ms=ts<1e12?ts*1000:ts;nextDate=new Date(ms).toLocaleDateString('en-US',{month:'long',day:'numeric',year:'numeric'});}
</div> let hashRate="N/A";
<div class="social d-flex justify-content-center"> if(hrData.currentHashrate){const units=["H/s","kH/s","MH/s","GH/s","TH/s","PH/s","EH/s","ZH/s"];let v=hrData.currentHashrate,i=0;while(v>=1000&&i<units.length-1){v/=1000;i++;}hashRate=v.toFixed(2)+" "+units[i];}
<a class="mx-2" href="https://twitter.com/goodmorningbtc"><i class="fab fa-twitter"></i></a> document.getElementById("network-stats").innerHTML=`${price} | ${fee} | ${height} | ${difficulty} | Next Difficulty: ${nextDate} | ${hashRate}`;
<a class="mx-2" href="https://snort.social./p/npub1n35s0hnjukw675njzqargeym7l9qzpg2dr6q9924yr798kafwvxsgp63m0"><i class="fa-solid fa-handshake"></i></a> }).catch(e=>{console.error(e);document.getElementById("network-stats").innerText="Failed to load stats.";});
<a class="mx-2" href="#!"><i class="fab fa-github"></i></a>
</div> // Bitcoin news
</div> async function fetchNostrContent(){const relay=window.NostrTools.relayInit("wss://relay.nostr.example.com");await relay.connect();relay.sub([{authors:["npub1yourpubkey"],kinds:[1],limit:3}]).on("event",ev=>{const li=document.createElement("li");li.innerText=ev.content;document.getElementById("news-briefs").appendChild(li);});}
</section>
<!-- Footer--> // Featured show
<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Good Morning Bitcoin 2023</div></footer> fetch("https://raw.githubusercontent.com/goodmorningbitcoin/goodmorningbitcoin-website/main/shows.json")
<!-- Bootstrap core JS--> .then(r=>r.json())
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> .then(data=>{if(Array.isArray(data)&&data.length){const s=data[Math.floor(Math.random()*data.length)];const imgUrl=`https://raw.githubusercontent.com/goodmorningbitcoin/goodmorningbitcoin-website/main/${s.imgsrc}`;document.getElementById("featured-show").innerHTML=`<img src="${imgUrl}" alt="${s.title}" class="w-full h-auto mb-2 rounded"/><strong>${s.title}</strong><br/><a href="${s.fountainlink}" class="text-blue-600 underline" target="_blank">Listen now</a>`;}})
<!-- Core theme JS--> .catch(e=>console.error("Error loading shows:",e));
<script src="js/scripts.js"></script>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script> // Load nostr-tools
</body> const s=document.createElement("script");s.src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js";s.onload=fetchNostrContent;document.body.appendChild(s);
</script>
</body>
</html> </html>