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

Update shows.html

Browse Source
This commit is contained in:
saulteafarmer 2025-04-17 15:09:26 +00:00
parent a0371f37ac
commit 36790d461c
1 changed files with 64 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
shows.html
View File

@ -1,109 +1,69 @@
<!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 - Shows</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> <style>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> body { font-family: sans-serif; background-color: #fefdfc; }
<!-- Font Awesome icons (free version)--> .orange { color: #e86228; }
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script> .bg-orange { background-color: #e86228; }
<!-- Google fonts--> .text-xl-bold { font-size: 1.5rem; font-weight: bold; }
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" /> </style>
<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" /> </head>
<!-- Core theme CSS (includes Bootstrap)--> <body class="text-gray-900">
<link href="css/styles.css" rel="stylesheet" /> <header class="bg-orange text-white p-4">
</head> <div class="max-w-5xl mx-auto flex justify-between items-center">
<body id="page-top"> <h1 class="text-2xl font-bold">GOOD MORNING BITCOIN.COM</h1>
<!-- Navigation--> <nav class="space-x-4">
<nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-shrink" id="mainNav"> <a href="https://goodmorningbitcoin.com/about.html" class="hover:underline">About</a>
<div class="container px-4 px-lg-5"> <a href="https://rustysats.com" class="hover:underline">RustySats</a>
<a class="navbar-brand" href="https://goodmorningbitcoin.com/">Good Morning Bitcoin</a> <a href="https://www.orangem.art/" class="hover:underline">Orange</a>
<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"> <a href="https://ditto.pub/npub1n35s0hnjukw675njzqargeym7l9qzpg2dr6q9924yr798kafwvxsgp63m0" class="hover:underline">Nostr</a>
Menu <a href="https://goodmorningbitcoin.com/shows.html" class="hover:underline">Shows</a>
<i class="fas fa-bars"></i> </nav>
</button> </div>
<div class="collapse navbar-collapse" id="navbarResponsive"> </header>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html#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>
<!-- Shows Section-->
<section class="projects-section bg-light" id="shows">
<div class="container bg-black px-lg-0">
<div id="shows-container">
<!-- Shows will be dynamically inserted here -->
</div>
</div>
<script> <main class="max-w-5xl mx-auto py-10 space-y-12">
document.addEventListener("DOMContentLoaded", function() { <section>
fetch('https://raw.githubusercontent.com/goodmorningbitcoin/goodmorningbitcoin-website/main/shows.json') <h2 class="text-2xl font-bold mb-6">All Shows</h2>
.then(response => response.json()) <div id="shows-container" class="space-y-10"></div>
.then(data => { </section>
const showsContainer = document.getElementById('shows-container'); </main>
let isLeft = true; // To alternate image positioning
data.forEach(show => { <script>
const showRow = document.createElement('div'); document.addEventListener("DOMContentLoaded", function () {
showRow.className = 'row bg-black gx-0 align-items-center'; // Full black background fetch('https://raw.githubusercontent.com/goodmorningbitcoin/goodmorningbitcoin-website/main/shows.json')
.then(response => response.json())
.then(data => {
const container = document.getElementById('shows-container');
data.forEach((show, index) => {
const wrapper = document.createElement('div');
wrapper.className = `md:flex md:items-center md:space-x-8 ${index % 2 ? 'md:flex-row-reverse' : ''}`;
const imgColClass = isLeft ? 'col-md-6' : 'col-md-6 order-md-2'; const img = document.createElement('img');
const contentColClass = isLeft ? 'col-md-6 d-flex flex-column align-items-center justify-content-center text-center' : 'col-md-6 d-flex flex-column align-items-center justify-content-center text-center order-md-1'; img.src = show.imgsrc;
img.alt = show.title;
img.className = 'w-full md:w-1/2 rounded shadow';
const imgDiv = document.createElement('div'); const content = document.createElement('div');
imgDiv.className = imgColClass; content.className = 'mt-4 md:mt-0 md:w-1/2';
const img = document.createElement('img'); content.innerHTML = `$1<div class=\"space-x-2 flex justify-center\">
img.src = show.imgsrc; ${show.fountainlink ? `<a href="${show.fountainlink}" class="bg-orange text-white px-3 py-1 rounded">Fountain</a>` : ''}
img.alt = show.title; ${show.xlink ? `<a href="${show.xlink}" class="bg-orange text-white px-3 py-1 rounded">X</a>` : ''}
img.className = 'img-fluid rounded'; ${show.nostrlink ? `<a href="${show.nostrlink}" class="bg-orange text-white px-3 py-1 rounded">Nostr</a>` : ''}
imgDiv.appendChild(img); </div>
`;
const contentDiv = document.createElement('div');
contentDiv.className = contentColClass;
const title = document.createElement('h2');
title.className = 'font-weight-light text-white'; // Centered white title
title.textContent = show.title;
const description = document.createElement('p');
description.className = 'text-secondary'; // Centered off-white description
description.textContent = show.description;
const linksDiv = document.createElement('div');
linksDiv.className = 'mt-2';
addLink(show.fountainlink, 'Fountain', linksDiv);
addLink(show.xlink, 'X', linksDiv);
addLink(show.nostrlink, 'Nostr', linksDiv);
contentDiv.appendChild(title);
contentDiv.appendChild(description);
contentDiv.appendChild(linksDiv);
showRow.appendChild(imgDiv);
showRow.appendChild(contentDiv);
showsContainer.appendChild(showRow);
isLeft = !isLeft; // Alternate for the next show
});
})
.catch(error => console.error('Error fetching the show data:', error));
});
function addLink(url, text, container) {
if (url) {
const link = document.createElement('a');
link.href = url;
link.textContent = text;
link.className = 'btn btn-primary btn-sm mx-1';
container.appendChild(link);
}
}
</script>
wrapper.appendChild(img);
wrapper.appendChild(content);
container.appendChild(wrapper);
});
})
.catch(error => console.error('Error loading shows:', error));
});
</script>
</body> </body>
</html> </html>