110 lines
6.0 KiB
HTML
110 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
<meta name="description" content="This a Bitcoin content focused radio station designed primarily for the Orange Rust Server" />
|
|
<meta name="author" content="Good Morning Bitcoin" />
|
|
<title>Good Morning Bitcoin</title>
|
|
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
|
|
<!-- Font Awesome icons (free version)-->
|
|
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
|
|
<!-- Google fonts-->
|
|
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
|
|
<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" />
|
|
<!-- Core theme CSS (includes Bootstrap)-->
|
|
<link href="css/styles.css" rel="stylesheet" />
|
|
</head>
|
|
<body id="page-top">
|
|
<!-- Navigation-->
|
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-shrink" id="mainNav">
|
|
<div class="container px-4 px-lg-5">
|
|
<a class="navbar-brand" href="https://goodmorningbitcoin.com/">Good Morning Bitcoin</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">
|
|
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="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>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
fetch('https://raw.githubusercontent.com/goodmorningbitcoin/goodmorningbitcoin-website/main/shows.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const showsContainer = document.getElementById('shows-container');
|
|
let isLeft = true; // To alternate image positioning
|
|
|
|
data.forEach(show => {
|
|
const showRow = document.createElement('div');
|
|
showRow.className = 'row bg-black gx-0 align-items-center'; // Full black background
|
|
|
|
const imgColClass = isLeft ? 'col-md-6' : 'col-md-6 order-md-2';
|
|
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';
|
|
|
|
const imgDiv = document.createElement('div');
|
|
imgDiv.className = imgColClass;
|
|
const img = document.createElement('img');
|
|
img.src = show.imgsrc;
|
|
img.alt = show.title;
|
|
img.className = 'img-fluid rounded';
|
|
imgDiv.appendChild(img);
|
|
|
|
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>
|
|
|
|
</body>
|
|
</html>
|