<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PLANTLAND RADIO | Sovereign Bio-Sonification Node</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts: Space Mono for Guerilla/Tactical vibe, Plus Jakarta for clean copy -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'pastel-bg': '#121915', /* Deep muted forest obsidian background */
'pastel-card': '#1C2620', /* Dark sage container */
'pastel-border': '#2E3D34', /* Soft subtle green border */
'pastel-sage': '#A8C3B2', /* Soft pastel sage green text/accents */
'pastel-mint': '#BCE3C5', /* Glowing light pastel green */
'pastel-gold': '#E6C594', /* Warm muted gold highlight */
'pastel-foam': '#EAF4EC', /* Soft chalky white text */
},
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif'],
mono: ['Space Mono', 'monospace'],
}
}
}
}
</script>
<style>
.pulse-live {
box-shadow: 0 0 0 0 rgba(188, 227, 197, 0.6);
animation: pulse-pastel 2.5s infinite;
}
@keyframes pulse-pastel {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(188, 227, 197, 0.6); }
70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(188, 227, 197, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(188, 227, 197, 0); }
}
</style>
</head>
<body class="bg-pastel-bg text-pastel-foam font-sans antialiased min-h-screen flex flex-col justify-between selection:bg-pastel-mint selection:text-pastel-bg">
<!-- TOP NAVIGATION -->
<header class="border-b border-pastel-border bg-pastel-bg/90 backdrop-blur sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-pastel-card border border-pastel-sage/30 flex items-center justify-center text-pastel-mint">
<i class="fa-solid fa-tower-broadcast text-lg"></i>
</div>
<div>
<h1 class="font-bold tracking-wider text-lg font-mono text-pastel-foam">PLANTLAND<span class="text-pastel-mint">.RADIO</span></h1>
<p class="text-[10px] text-pastel-sage font-mono uppercase tracking-widest">// UNAUTHORIZED BIO-FREQUENCY NODE</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="hidden sm:flex items-center gap-2 px-3 py-1 rounded-full bg-pastel-card border border-pastel-sage/30 font-mono text-xs">
<span class="w-2.5 h-2.5 rounded-full bg-pastel-mint pulse-live"></span>
<span class="text-pastel-mint tracking-wide uppercase font-semibold text-[11px]">24/7 Live Field Stream</span>
</div>
<a href="#beca" class="bg-pastel-sage hover:bg-pastel-mint text-pastel-bg transition-all px-4 py-2 rounded-lg text-xs font-bold font-mono tracking-wider uppercase">
BECA Receiver
</a>
</div>
</div>
</header>
<!-- MAIN CONTENT -->
<main class="max-w-6xl mx-auto px-6 py-12 flex-grow w-full space-y-16">
<!-- HERO MANIFESTO & PLAYER -->
<section class="bg-pastel-card/60 border border-pastel-border rounded-2xl p-8 sm:p-10 relative overflow-hidden backdrop-blur-sm">
<div class="absolute -right-20 -top-20 w-80 h-80 bg-pastel-mint/5 rounded-full blur-3xl pointer-events-none"></div>
<div class="max-w-3xl space-y-6">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded bg-pastel-gold/10 border border-pastel-gold/30 text-pastel-gold font-mono text-xs uppercase tracking-widest">
<i class="fa-solid fa-shield-halved"></i> Sovereign Sonic Sanctuary
</div>
<h2 class="text-3xl sm:text-5xl font-extrabold tracking-tight text-pastel-foam leading-tight">
Reclaiming the airwaves for the living world.
</h2>
<p class="text-base sm:text-lg text-pastel-sage leading-relaxed font-mono">
"No corporate noise. No algorithms. Just pure biological transmission."
</p>
<!-- GUERILLA AUDIO PLAYER -->
<div class="bg-pastel-bg/90 border border-pastel-sage/40 rounded-xl p-6 shadow-2xl space-y-4">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-4 w-full sm:w-auto">
<button id="playBtn" onclick="togglePlay()" class="w-16 h-16 rounded-xl bg-pastel-mint hover:bg-pastel-sage text-pastel-bg flex items-center justify-center text-2xl transition-all shadow-lg shrink-0">
<i id="playIcon" class="fa-solid fa-play ml-1"></i>
</button>
<div>
<div class="font-mono text-xs text-pastel-gold tracking-widest uppercase">// CURRENT INTERCEPT</div>
<div id="trackTitle" class="font-bold text-pastel-foam text-lg">Ficus elastica // High Solar Voltage</div>
<div id="trackArtist" class="text-xs text-pastel-sage font-mono">Unedited Bio-Capacitance Stream</div>
</div>
</div>
<div class="flex items-center gap-3 w-full sm:w-auto justify-end border-t sm:border-t-0 border-pastel-border pt-3 sm:pt-0">
<i class="fa-solid fa-sliders text-pastel-sage"></i>
<input id="volumeControl" type="range" min="0" max="1" step="0.01" value="0.8" oninput="setVolume(this.value)" class="accent-pastel-mint bg-pastel-card rounded-lg cursor-pointer">
</div>
</div>
<!-- VISUALIZER BARS -->
<div class="h-10 w-full bg-pastel-card/80 rounded-lg overflow-hidden flex items-end gap-1 px-3 py-1.5 border border-pastel-border">
<div class="w-full bg-pastel-mint/40 h-3 rounded-sm animate-pulse"></div>
<div class="w-full bg-pastel-mint/70 h-6 rounded-sm animate-pulse"></div>
<div class="w-full bg-pastel-mint h-9 rounded-sm animate-pulse"></div>
<div class="w-full bg-pastel-mint/50 h-4 rounded-sm animate-pulse"></div>
<div class="w-full bg-pastel-mint/80 h-7 rounded-sm animate-pulse"></div>
<div class="w-full bg-pastel-mint/30 h-5 rounded-sm animate-pulse"></div>
<div class="w-full bg-pastel-mint/90 h-8 rounded-sm animate-pulse"></div>
<div class="w-full bg-pastel-mint/60 h-4 rounded-sm animate-pulse"></div>
</div>
</div>
<!-- HIDDEN AUDIO STREAM -->
<audio id="radioStream" src="https://stream.zeno.fm/f37ac199g98uv" preload="none"></audio>
</div>
</section>
<!-- THE GUERILLA-BIO TRIAD -->
<section class="grid md:grid-cols-3 gap-6">
<div class="bg-pastel-card/40 border border-pastel-border p-6 rounded-xl space-y-3">
<div class="text-pastel-mint text-xl font-mono"><i class="fa-solid fa-leaf"></i> 01. BIO-COHERENCE</div>
<h3 class="font-bold text-lg text-pastel-foam">Nervous System Alignment</h3>
<p class="text-xs text-pastel-sage leading-relaxed">
Built around 1/f pink noise frequencies and biological electrical current, designed specifically to reduce cortisol and restore calm focus.
</p>
</div>
<div class="bg-pastel-card/40 border border-pastel-border p-6 rounded-xl space-y-3">
<div class="text-pastel-mint text-xl font-mono"><i class="fa-solid fa-walkie-talkie"></i> 02. GUERILLA ETHOS</div>
<h3 class="font-bold text-lg text-pastel-foam">Independent Airwaves</h3>
<p class="text-xs text-pastel-sage leading-relaxed">
Unfiltered, grassroots field recordings, vintage analog warm tube textures, and raw plant synth signals broadcasted without middleman control.
</p>
</div>
<div class="bg-pastel-card/40 border border-pastel-border p-6 rounded-xl space-y-3">
<div class="text-pastel-mint text-xl font-mono"><i class="fa-solid fa-server"></i> 03. SOVEREIGN TECH</div>
<h3 class="font-bold text-lg text-pastel-foam">Open-Source Pipeline</h3>
<p class="text-xs text-pastel-sage leading-relaxed">
Self-hosted on sovereign Linux infrastructure using AzuraCast. Broadcast live from greenhouses, sheds, or wild fields anywhere on Earth.
</p>
</div>
</section>
<!-- FIELD TRANSMISSION INTERCEPTS (STATION LOGS) -->
<section class="space-y-4">
<h3 class="font-mono text-xs text-pastel-gold uppercase tracking-widest">// FIELD INTERCEPT ARCHIVE</h3>
<div class="grid sm:grid-cols-2 gap-4 font-mono text-xs">
<div class="bg-pastel-card border border-pastel-border p-4 rounded-lg space-y-2">
<div class="text-pastel-mint flex justify-between">
<span>[STATION ID #01]</span>
<span>FREQUENCY: 24/7</span>
</div>
<p class="text-pastel-foam italic">"You are tuned to Plantland Radio—broadcasting illegally from the heart of the plant kingdom. Mission: Nervous system recalibration. Stay grounded..."</p>
</div>
<div class="bg-pastel-card border border-pastel-border p-4 rounded-lg space-y-2">
<div class="text-pastel-mint flex justify-between">
<span>[SIGNAL INTERCEPT #04]</span>
<span>SPECIES: Ficus elastica</span>
</div>
<p class="text-pastel-foam italic">"Frequency Intercept: Raw bio-electrical capacitance. High solar voltage detected. Returning to main stream."</p>
</div>
</div>
</section>
<!-- BECA HARDWARE RECEIVER MODULE -->
<section id="beca" class="bg-gradient-to-r from-pastel-card to-pastel-bg border border-pastel-sage/40 rounded-2xl p-8 flex flex-col md:flex-row items-center justify-between gap-8">
<div class="space-y-4 max-w-xl">
<span class="text-xs font-mono text-pastel-gold uppercase tracking-widest font-bold">// THE GUERILLA RECEIVER</span>
<h3 class="text-2xl sm:text-3xl font-bold text-pastel-foam">The BECA Sensor Module</h3>
<p class="text-sm text-pastel-sage leading-relaxed">
Turn your garden or windowsill into an open-source synthesizer node. Hook BECA directly into leaf tissues and intercept biological signals in your own backyard.
</p>
<div class="pt-2 flex flex-wrap gap-3 font-mono text-xs">
<a href="#" class="bg-pastel-sage hover:bg-pastel-mint text-pastel-bg px-5 py-2.5 rounded-lg font-bold transition-all uppercase tracking-wider">
Inspect Schematics
</a>
</div>
</div>
<div class="w-full md:w-64 h-44 bg-pastel-bg border border-pastel-border rounded-xl flex flex-col items-center justify-center p-4 font-mono text-xs text-center space-y-2">
<i class="fa-solid fa-microchip text-4xl text-pastel-mint"></i>
<span class="text-pastel-foam font-bold">BECA v1.0 HARDWARE</span>
<span class="text-[10px] text-pastel-sage">MIDI / CV BIOLOGICAL CONVERTER</span>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="border-t border-pastel-border bg-pastel-bg py-6 font-mono text-xs text-pastel-sage/60">
<div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div>
PLANTLAND RADIO © 2026 // HOVE & COPENHAGEN
</div>
<div class="flex items-center gap-6 text-[11px]">
<a href="#" class="hover:text-pastel-mint transition-colors">AZURACAST NODE</a>
<a href="#" class="hover:text-pastel-mint transition-colors">BANDCAMP</a>
<a href="#" class="hover:text-pastel-mint transition-colors">GITHUB</a>
</div>
</div>
</footer>
<!-- INTERACTION SCRIPT -->
<script>
const audio = document.getElementById('radioStream');
const playBtn = document.getElementById('playBtn');
const playIcon = document.getElementById('playIcon');
function togglePlay() {
if (audio.paused) {
audio.play();
playIcon.classList.remove('fa-play', 'ml-1');
playIcon.classList.add('fa-pause');
} else {
audio.pause();
playIcon.classList.remove('fa-pause');
playIcon.classList.add('fa-play', 'ml-1');
}
}
function setVolume(val) {
audio.volume = val;
}
</script>
</body>
</html>