<!DOCTYPE HTML>
<!--
	RFE NEW SITE
	Strata by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Radio Free Elsewhere</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

		<meta property="og:title" content="Radio Free Elsewhere" />
		<meta property="og:description" content="Something different. Somewhere else." />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="https://cyberpunklibrarian.nohost.me/rfe/" />
		<meta property="og:image" content="https://cyberpunklibrarian.nohost.me/rfe/images/rfe-social.jpg" />
		<meta name="twitter:title" content="Radio Free Elsewhere">
		<meta name="twitter:description" content="Something different. Somewhere else.">
		<meta name="twitter:image" content="https://cyberpunklibrarian.nohost.me/rfe/images/rfe-social.jpg">
		<meta name="twitter:card" content="summary_large_image">
		
		<link rel="stylesheet" href="assets/css/main.css" />

		<style>
		        #now-playing {
		            font-family: Arial, sans-serif;
		            font-size: .7em;
		            padding: 10px;
		            background-color: #46494A;
		            color: #97C9D3;
		            border-radius: 5px;
		            display: inline-block;
		        }
		</style>
	</head>

	<body class="is-preload">

		<!-- Header -->
			<header id="header">
				<div class="inner">
					<a href="#" class="image avatar"><img src="images/avatar-rfe.jpg" alt="Radio Free Elsewhere logo" /></a>
					<h1><strong>Radio Free Elsewhere</strong><br />
					Something different<br />
					Somewhere else</h1>
					
					<hr>

					<audio controls src="https://radio.cyberpunklibrarian.nohost.me/rfe"></audio>
					<br />
					Now playing<br />
					<div id="now-playing">Loading current song...</div>

					<script>
						function fetchNowPlaying() {
							fetch('now_playing.php')
							.then(response => response.text())
							.then(data => {
								document.getElementById('now-playing').innerHTML = data;
								})
							.catch(error => {
								document.getElementById('now-playing').innerHTML = "Unable to load song data.";
								console.error('Error fetching song data:', error);
								});
							}			
							// Fetch immediately and then every 15 seconds
							fetchNowPlaying();
							setInterval(fetchNowPlaying, 15000);
					</script>
				</div>
				<p><span style = "color:white;">Add <a href="https://radio.cyberpunklibrarian.nohost.me/rfe">Radio Free Elsewhere</a> to VLC or your favourite audio streaming app.</span></p>
			</header>

		<!-- Main -->
			<div id="main">

				<!-- Upcoming & Schedule -->
				<section id="one">
						<header class="major">
							<h2>Upcoming Schedule</h2>
						</header>
						<h3>Bisexual Surfers from the Twilight of Time<br />Wednesday, February 26 @ 7:30pm Central</h3>
						
						
					</section>

				<!-- About -->
					<section id="two">
						<header class="major">
							<h2>About</h2>
						</header>
						<p>Radio Free Elsewhere goes live a few times per week, usually in the evenings around 7:30pm, Central (UTC-6:00). The typical stream length is two hours or so, but durations can vary. Check us out for eclectic, different sorts of music you won't typically hear out in the world. Celtic folk, ambient and space, and surf rock. How are those genres connected? Well that's the easy part....</p>
						
						<p>We connect them right here.</p>
						
						<p>Follow me on <a href="https://hackers.town/@cyberpunklibrarian">Mastodon</a> or <a href="https://bsky.app/profile/cyberpunklibrarian.bsky.social">Bluesky</a> to know when the stream is going live. I'll try and give as much notice as I can before pushing the button. Goddess willing, maybe I'll get a schedule in place sometime in the next few weeks. In the meantime, tune in when you can, and thanks for being here.</p>
						
							<h3>Shows</h3>
						<p>Currently, we've got three shows that can go live, depending on what we're feeling at the time. Chances are good we'll add a couple more, but for now, you can tune in for:<br>
						<ul>
							<li><strong>O'Morain's Pub</strong> - Celtic folk from both sides of the Atlantic, from the old countries to the new world.</li>
							<li><strong>Cosmoeuhporia</strong>  - Audio psychedelia and musical LSD brought to you from the depths of outer, and inner, space. </li>
							<li><strong>Bisexual Surfers from the Twilight of Time</strong> - At first we feared them, with their glassy eyes, their waxed surf boards, their perfect bodies, and their electric guitars. "Surf's up," they said. And off in the far distance, we heard the screams of pleasure. 
						</ul>
					</section>				

			</div>

		<!-- Footer -->
			<footer id="footer">
				<div class="inner">
					<ul class="icons">
						<li><a href="https://hackers.town/@cyberpunklibrarian" class="icon brands fa-mastodon"><span class="label">Mastodon</span></a></li>
						<li><a href="https://cyberpunklibrarian.nohost.me/gitlab/code/radio-free-elsewhere" class="icon brands fa-gitlab"><span class="label">Github</span></a></li>
					</ul>
					<ul class="copyright">
						<li>&copy; 2025 CC-By-NC-SA Tanglewood Hill Studio</li><li><a href="http://html5up.net">HTML5 UP</a></li>
					</ul>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.poptrox.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>
			<script>
				if ('addEventListener' in window) {
					document.addEventListener('DOMContentLoaded', function() { document.body.className = document.body.className.replace(/\bis-preload\b/, ''); });
					document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
				}
			</script>

	</body>
</html>