From 980c31104d0ec302d2650ffe015d7ac0bd2b813b Mon Sep 17 00:00:00 2001
From: saulteafarmer <ulrich.patrickr@gmail.com>
Date: Thu, 17 Apr 2025 13:19:45 +0000
Subject: [PATCH] Update index.html

---
 index.html | 131 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 90 insertions(+), 41 deletions(-)
diff --git a/index.html b/index.html
index ebafd29..2ce7572 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,6 @@
   </style>
 </head>
 <body class="text-gray-900">
-
   <!-- Header -->
   <header class="bg-orange text-white p-4">
     <div class="max-w-5xl mx-auto flex justify-between items-center">
@@ -34,7 +33,6 @@
       </nav>
     </div>
   </header>
-
   <!-- Now Playing -->
   <section class="bg-black text-white py-6">
     <div class="max-w-5xl mx-auto text-center">
@@ -42,16 +40,13 @@
       <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>
@@ -59,8 +54,7 @@
         <li>Loading news…</li>
       </ul>
     </section>
-
-    <!-- Bitcoin 101 + Email Signup Stack -->
+    <!-- Bitcoin 101 + Email Signup -->
     <div class="md:col-span-1 space-y-6">
       <!-- Bitcoin 101 -->
       <section class="p-4 border rounded">
@@ -75,9 +69,7 @@
           <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 class="ml-form-embedContent mb-2"><p>Signup for the latest Bitcoin news!</p></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">
@@ -100,53 +92,110 @@
         <script src="https://groot.mailerlite.com/js/w/webforms.min.js?v176e10baa5e7ed80d35ae235be3d5024" async></script>
       </section>
     </div>
-
     <!-- Network Stats -->
     <section class="md:col-span-3 p-4 bg-black text-white rounded">
       <div id="network-stats" class="text-lg font-mono text-center">Loading stats…</div>
     </section>
-
     <!-- Latest Episodes -->
     <section class="md:col-span-3 p-4 border rounded">
       <h3 class="text-xl-bold mb-2">Latest Episodes</h3>
       <iframe src="https://radio.goodmorningbitcoin.com/public/goodmorningbitcoin/history?theme=light" frameborder="0" allowtransparency="true" style="width:100%;min-height:300px;border:0;"></iframe>
     </section>
-
   </main>
-
   <!-- Scripts -->
   <script>
-    // Network stats
+    // Fetch network stats
     Promise.all([
-      fetch("https://mempool.space/api/v1/fees/recommended").then(r=>r.json()),
-      fetch("https://mempool.space/api/v1/blocks/tip/height").then(r=>r.json()),
-      fetch("https://mempool.space/api/v1/mining/hashrate/3d").then(r=>r.json()),
-      fetch("https://mempool.space/api/v1/difficulty-adjustment").then(r=>r.json()),
-      fetch("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd").then(r=>r.json())
-    ]).then(([fees,height,hrData,diffAdj,priceData])=>{
-      const price=priceData.bitcoin?.usd?`$${priceData.bitcoin.usd.toLocaleString()}`:"N/A";
-      const fee=fees.fastestFee?`${fees.fastestFee} sat/vB`:"N/A";
-      let difficulty="N/A";
-      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>`;}
-      let nextDate="N/A";
-      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'});}      
-      let hashRate="N/A";
-      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];}
-      document.getElementById("network-stats").innerHTML=`${price} | ${fee} | ${height} | ${difficulty} | Next Difficulty: ${nextDate} | ${hashRate}`;
-    }).catch(e=>{console.error(e);document.getElementById("network-stats").innerText="Failed to load stats.";});
+      fetch("https://mempool.space/api/v1/fees/recommended").then(r => r.json()),
+      fetch("https://mempool.space/api/v1/blocks/tip/height").then(r => r.json()),
+      fetch("https://mempool.space/api/v1/mining/hashrate/3d").then(r => r.json()),
+      fetch("https://mempool.space/api/v1/difficulty-adjustment").then(r => r.json()),
+      fetch("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd").then(r => r.json())
+    ])
+    .then(([fees, height, hrData, diffAdj, priceData]) => {
+      const price = priceData.bitcoin?.usd ? `$${priceData.bitcoin.usd.toLocaleString()}` : "N/A";
+      const fee   = fees.fastestFee ? `${fees.fastestFee} sat/vB` : "N/A";
+      // difficulty
+      let difficulty = "N/A";
+      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>`;
+      }
+      // next retarget date
+      let nextDate = "N/A";
+      if (diffAdj.estimatedRetargetDate) {
+        const ts = diffAdj.estimatedRetargetDate;
+        const ms = ts < 1e12 ? ts * 1000 : ts;
+        nextDate = new Date(ms).toLocaleDateString('en-US',{month:'long',day:'numeric',year:'numeric'});
+      }
+      // dynamic hash rate
+      let hashRate = "N/A";
+      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];
+      }
+      document.getElementById("network-stats").innerHTML =
+        `${price} | ${fee} | ${height} | ${difficulty} | Next Difficulty: ${nextDate} | ${hashRate}`;
+    })
+    .catch(error => {
+      console.error(error);
+      document.getElementById("network-stats").innerText = "Failed to load stats.";
+    });
 
-    // Bitcoin news
-    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);});}
+    // Bitcoin News via WordPress REST API with images (top 4)
+    fetch("https://bitcoinnews.com/wp-json/wp/v2/posts?per_page=4&_embed")
+      .then(response => response.json())
+      .then(posts => {
+        const container = document.getElementById("news-briefs");
+        container.innerHTML = "";
+        posts.forEach(post => {
+          const title = post.title?.rendered || "Untitled";
+          const link  = post.link || "#";
+          let imgUrl = '';
+          if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {
+            imgUrl = post._embedded['wp:featuredmedia'][0].source_url;
+          }
+          const li = document.createElement("li");
+          li.className = "flex items-center space-x-2";
+          if (imgUrl) {
+            const img = document.createElement("img");
+            img.src = imgUrl;
+            img.alt = title;
+            img.className = "w-10 h-10 object-cover rounded";
+            li.appendChild(img);
+          }
+          const a = document.createElement("a");
+          a.href = link;
+          a.innerHTML = title;
+          a.target = "_blank";
+          a.className = "text-blue-600 underline flex-1";
+          li.appendChild(a);
+          container.appendChild(li);
+        });
+      })
+      .catch(err => {
+        console.error("Error loading news posts:", err);
+        document.getElementById("news-briefs").innerHTML = "<li>Failed to load news.</li>";
+      });
 
-    // Featured show
+    // Featured show loader
     fetch("https://raw.githubusercontent.com/goodmorningbitcoin/goodmorningbitcoin-website/main/shows.json")
-      .then(r=>r.json())
-      .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>`;}})
-      .catch(e=>console.error("Error loading shows:",e));
-
-    // Load nostr-tools
-    const s=document.createElement("script");s.src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js";s.onload=fetchNostrContent;document.body.appendChild(s);
+      .then(r => r.json())
+      .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>`;
+        }
+      })
+      .catch(e => console.error("Error loading shows:", e));
   </script>
-
 </body>
 </html>
\ No newline at end of file
