83 lines
3.4 KiB
HTML
83 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Good Morning Bitcoin - Shows</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/@tailwindcss/ui@latest/dist/tailwind-ui.min.css">
|
|
<style>
|
|
body { font-family: sans-serif; background-color: #fefdfc; }
|
|
.orange { color: #e86228; }
|
|
.bg-orange { background-color: #e86228; }
|
|
.text-xl-bold { font-size: 1.5rem; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body class="text-gray-900">
|
|
<header class="bg-orange text-white p-4">
|
|
<div class="max-w-5xl mx-auto flex justify-between items-center">
|
|
<a href="/" class="text-2xl font-bold hover:underline">GOOD MORNING BITCOIN.COM</a>
|
|
<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>
|
|
|
|
<main class="max-w-5xl mx-auto py-10 space-y-12">
|
|
<section>
|
|
<h2 class="text-2xl font-bold mb-6">All Shows</h2>
|
|
<div id="shows-container" class="space-y-10"></div>
|
|
<style>
|
|
.show-box {
|
|
border: 1px solid #333;
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
background-color: #000;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
color: white;
|
|
}
|
|
</style>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
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 = `show-box md:flex md:items-center md:space-x-8 ${index % 2 ? 'md:flex-row-reverse' : ''}`;
|
|
|
|
const img = document.createElement('img');
|
|
img.src = show.imgsrc;
|
|
img.alt = show.title;
|
|
img.className = 'w-full md:w-1/2 rounded shadow';
|
|
|
|
const content = document.createElement('div');
|
|
content.className = 'mt-4 md:mt-0 md:w-1/2 px-4 md:px-6';
|
|
content.innerHTML = `
|
|
<h3 class=\"text-2xl font-extrabold mb-2 text-white\">${show.title}</h3>
|
|
<p class=\"mb-4 text-white\">${show.description}</p>
|
|
<div class=\"space-x-2 flex justify-center\">
|
|
${show.fountainlink ? `<a href=\"${show.fountainlink}\" class=\"bg-orange text-white px-3 py-1 rounded\">Fountain</a>` : ''}
|
|
${show.xlink ? `<a href=\"${show.xlink}\" class=\"bg-orange text-white px-3 py-1 rounded\">X</a>` : ''}
|
|
${show.nostrlink ? `<a href=\"${show.nostrlink}\" class=\"bg-orange text-white px-3 py-1 rounded\">Nostr</a>` : ''}
|
|
</div>
|
|
`;
|
|
|
|
wrapper.appendChild(img);
|
|
wrapper.appendChild(content);
|
|
container.appendChild(wrapper);
|
|
});
|
|
})
|
|
.catch(error => console.error('Error loading shows:', error));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|