<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gold FM Canarias | The Greatest Hits of All Time</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');
:root {
--gold-primary: #ffcc29; /* Exacte warme geelkleur uit het logo gold.jpeg */
--gold-light: #ffe58f;
--bg-dark: #111111;
--bg-card: #1a1a1a;
--text-main: #ffffff;
--text-muted: #aaaaaa;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-dark);
color: var(--text-main);
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
overflow-x: hidden;
}
/* Header & Navigatie */
header {
background: rgba(17, 17, 17, 0.95);
border-bottom: 2px solid var(--gold-primary);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
/* REPRODUCTIE VAN LOGO 'GOLD.JPEG' */
.goldfm-logo-link {
text-decoration: none;
display: inline-block;
}
.logo-gold-jpeg {
display: inline-flex;
align-items: center;
background-color: transparent;
font-family: 'Arial Black', 'Montserrat', sans-serif;
height: 60px;
user-select: none;
}
.logo-gold-jpeg .part-gold {
color: #ffffff;
font-size: 52px;
font-weight: 900;
letter-spacing: -3px;
line-height: 1;
padding-right: 8px;
}
.logo-gold-jpeg .yellow-block {
background-color: var(--gold-primary);
height: 100%;
display: flex;
align-items: center;
border-radius: 0 12px 12px 0;
padding-right: 12px;
}
.logo-gold-jpeg .black-bar {
background-color: #000000;
color: #ffffff;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
font-size: 26px;
font-weight: 900;
letter-spacing: -1px;
writing-mode: vertical-lr;
transform: rotate(180deg);
line-height: 1;
}
.logo-gold-jpeg .part-fm {
color: #000000;
font-size: 42px;
font-weight: 900;
letter-spacing: -2px;
line-height: 1;
padding-left: 6px;
display: inline-block;
transform: translateY(2px);
}
.nav-links {
display: flex;
list-style: none;
gap: 25px;
}
.nav-links a {
color: var(--text-main);
text-decoration: none;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--gold-primary);
}
/* Hero & Live Sectie */
.hero-section {
background: linear-gradient(rgba(17,17,17,0.7), rgba(17,17,17,1)), url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1920&auto=format&fit=crop') no-repeat center center/cover;
padding: 50px 20px;
text-align: center;
}
.hero-content h1 {
font-size: 2.6rem;
font-weight: 800;
margin-bottom: 10px;
text-transform: uppercase;
}
.hero-content h1 span {
color: var(--gold-primary);
}
.hero-content p {
color: var(--text-muted);
font-size: 1.1rem;
margin-bottom: 45px;
}
.main-dashboard {
max-width: 950px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
/* WEBPLAYER STYLING */
.goldfm-advanced-player {
background: linear-gradient(135deg, #1e1e1e 0%, #0a0a0a 100%);
border: 3px solid var(--gold-primary);
border-radius: 20px;
padding: 35px 20px;
flex: 1;
min-width: 320px;
max-width: 380px;
text-align: center;
box-shadow: 0 15px 35px rgba(0,0,0,0.7), inset 0 0 20px rgba(251,204,41,0.1);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.player-brand-logo {
margin: 0 auto 25px auto;
transform: scale(0.8);
}
.live-indicator {
background: rgba(229, 9, 20, 0.15);
color: #ff4d4d;
border: 1px solid #e50914;
padding: 4px 12px;
font-size: 10px;
font-weight: 700;
border-radius: 50px;
letter-spacing: 1.5px;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 20px;
align-self: center;
text-transform: uppercase;
}
.live-indicator .dot {
width: 7px;
height: 7px;
background-color: #e50914;
border-radius: 50%;
animation: blink 1.5s infinite;
}
@keyframes blink {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* STRENG VIERKANTE ALBUMHOES STYLING */
.artist-artwork-container {
width: 200px;
height: 200px;
margin: 0 auto 20px auto;
border-radius: 8px; /* Subtiele afronding van de hoeken voor een premium look */
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.8);
border: 2px solid rgba(251,204,41,0.4);
background-color: #222;
}
#artist-artwork {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Live Metadata Info */
.track-info {
margin: 10px 0 20px 0;
min-height: 75px;
}
#track-title {
font-size: 21px;
font-weight: 700;
color: var(--gold-primary);
margin: 0 0 6px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#track-artist {
font-size: 14px;
color: #dddddd;
margin: 0;
font-weight: 400;
}
/* Controls & Volume */
.player-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
#gold-play-btn {
background: radial-gradient(circle, var(--gold-light) 0%, var(--gold-primary) 100%);
border: none;
width: 75px;
height: 75px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(251,204,41,0.3);
transition: transform 0.2s, box-shadow 0.2s;
}
#gold-play-btn:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(251,204,41,0.5);
}
.play-icon {
width: 32px;
height: 32px;
fill: #111;
}
.volume-container {
display: flex;
align-items: center;
gap: 10px;
width: 70%;
}
#volume-slider {
-webkit-appearance: none;
width: 100%;
height: 4px;
border-radius: 2px;
background: #333;
outline: none;
}
#volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--gold-primary);
cursor: pointer;
}
.player-footer {
margin-top: 25px;
border-top: 1px solid #222;
padding-top: 15px;
}
.player-footer p { font-size: 10px; color: #666; margin: 0; letter-spacing: 1px; text-transform: uppercase;}
/* STUDIO FORMULIER */
.goldfm-interaction-form {
background: var(--bg-card);
border: 1px solid #222;
border-radius: 20px;
padding: 35px;
flex: 1.3;
min-width: 320px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.goldfm-interaction-form h3 {
font-size: 24px;
color: var(--gold-primary);
margin-bottom: 8px;
}
.goldfm-interaction-form p {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 25px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
display: block;
font-size: 11px;
font-weight: 700;
margin-bottom: 8px;
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
}
.form-group input, .form-group select, .form-group textarea {
width: 100%;
background: #222;
border: 1px solid #333;
border-radius: 8px;
padding: 14px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
transition: border-color 0.3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color: var(--gold-primary);
outline: none;
}
#submit-btn {
background: var(--gold-primary);
color: #111;
border: none;
padding: 16px;
font-size: 15px;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
width: 100%;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: background 0.3s;
}
#submit-btn:hover { background: var(--gold-light); }
.status-msg {
margin-top: 15px;
font-size: 14px;
font-weight: 600;
display: none;
padding: 10px;
border-radius: 6px;
text-align: center;
}
.status-msg.success { background: rgba(75, 181, 67, 0.2); color: #4bb543; display: block; }
/* Frequenties & Info */
.info-section {
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
text-align: center;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 30px;
}
.info-card {
background: var(--bg-card);
padding: 25px;
border-radius: 12px;
border-bottom: 3px solid #222;
}
.info-card i {
font-size: 30px;
color: var(--gold-primary);
margin-bottom: 15px;
}
.info-card h4 { font-size: 18px; margin-bottom: 10px; }
.info-card p { font-size: 14px; color: var(--text-muted); }
footer {
background: #0a0a0a;
text-align: center;
padding: 30px 20px;
font-size: 12px;
color: #555;
border-top: 1px solid #222;
}
@media (max-width: 768px) {
.nav-links { display: none; }
.hero-content h1 { font-size: 2rem; }
}
</style>
</head>
<body>
<!-- NAVIGATIEBALK MET HET LOGO UIT GOLD.JPEG -->
<header>
<div class="nav-container">
<a href="#" class="goldfm-logo-link">
<div class="logo-gold-jpeg">
<div class="part-gold">GOLD</div>
<div class="yellow-block">
<div class="black-bar">103.8</div>
<div class="part-fm">fm</div>
</div>
</div>
</a>
<ul class="nav-links">
<li><a href="#">Listen Live</a></li>
<li><a href="#about">Frequencies</a></li>
<li><a href="#contact">Studio Message</a></li>
</ul>
</div>
</header>
<!-- HERO / LIVE SECTIE -->
<section class="hero-section">
<div class="hero-content">
<h1>Welcome to <span>Gold FM Canarias</span></h1>
<p>The Greatest Hits of All Time — 60s, 70s & 80s Live from Gran Canaria</p>
<div class="main-dashboard">
<!-- 📻 DE WEBPLAYER -->
<div class="goldfm-advanced-player">
<!-- Logo uit gold.jpeg gecentreerd boven de player -->
<div class="logo-gold-jpeg player-brand-logo">
<div class="part-gold">GOLD</div>
<div class="yellow-block">
<div class="black-bar">103.8</div>
<div class="part-fm">fm</div>
</div>
</div>
<div class="player-header">
<span class="live-indicator"><span class="dot"></span> ON AIR</span>
</div>
<!-- Audio Stream Link -->
<audio id="gold-audio" src="http://amediastream.eu:9500/goldfm" preload="none"></audio>
<!-- Strakke VIERKANTE Album/Artist Hoes -->
<div class="artist-artwork-container">
<img id="artist-artwork" src="https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?q=80&w=300&auto=format&fit=crop" alt="Gold FM">
</div>
<!-- Live Metadata -->
<div class="track-info">
<h2 id="track-title">Loading Stream...</h2>
<h3 id="track-artist">Gold FM Canarias</h3>
</div>
<!-- Knoppen & Volume -->
<div class="player-controls">
<button id="gold-play-btn" onclick="toggleGoldPlay()">
<svg class="play-icon" id="play-svg-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
<div class="volume-container">
<span style="font-size:11px; opacity: 0.6;">🔈</span>
<input type="range" id="volume-slider" min="0" max="1" step="0.05" value="0.8" oninput="changeVolume(this.value)">
<span style="font-size:11px; opacity: 0.6;">🔊</span>
</div>
</div>
<div class="player-footer">
<p>Gran Canaria's Number One Oldies Station</p>
</div>
</div>
<!-- ✍️ INTERACTIE / VERZOEKFORMULIER -->
<div class="goldfm-interaction-form" id="contact">
<h3>Contact the DJ</h3>
<p>Send a song request or say hello to the studio in Gran Canaria!</p>
<form id="studio-form" onsubmit="handleFormSubmit(event)">
<div class="form-group">
<label for="form-name">Your Name</label>
<input type="text" id="form-name" required placeholder="e.g. Gary from London">
</div>
<div class="form-group">
<label for="form-location">Your Location</label>
<input type="text" id="form-location" placeholder="e.g. Playa del Inglés / UK">
</div>
<div class="form-group">
<label for="form-type">Message Type</label>
<select id="form-type">
<option value="Song Request">🎶 Song Request</option>
<option value="Shoutout">👋 Just saying hello!</option>
<option value="Competition">🏆 Competition Entry</option>
</select>
</div>
<div class="form-group">
<label for="form-message">Message / Artist & Song title</label>
<textarea id="form-message" rows="3" required placeholder="What would you like to hear or share?"></textarea>
</div>
<button type="submit" id="submit-btn">Send to Studio</button>
</form>
<div id="form-status-message" class="status-msg"></div>
</div>
</div>
</div>
</section>
<!-- EXTRA INFO SECTIE -->
<section class="info-section" id="about">
<h3>Broadcasting Everywhere</h3>
<p style="color: var(--text-muted);">Tune in on your traditional radio across the islands or online worldwide via <strong>goldfm.eu</strong>.</p>
<div class="info-grid">
<div class="info-card">
<i class="fa-solid fa-radio"></i>
<h4>103.8 FM</h4>
<p>Crisp, clear FM coverage across South Gran Canaria, including Playa del Inglés, San Agustín and Maspalomas.</p>
</div>
<div class="info-card">
<i class="fa-solid fa-compact-disc"></i>
<h4>Non-Stop Gold</h4>
<p>The perfect blend of your favorite oldies from the 60s, 70s, and 80s, keeping great music alive.</p>
</div>
<div class="info-card">
<i class="fa-solid fa-globe"></i>
<h4>Global Stream</h4>
<p>Take the Canary Islands sunshine with you anywhere in the world by streaming via goldfm.eu.</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<p>© 2026 Gold FM Canarias — All Rights Reserved. Streaming live via goldfm.eu.</p>
</footer>
<!-- INTERNE LOGICA -->
<script>
const audio = document.getElementById('gold-audio');
const playBtn = document.getElementById('gold-play-btn');
const titleEl = document.getElementById('track-title');
const artistEl = document.getElementById('track-artist');
const artworkEl = document.getElementById('artist-artwork');
const defaultArtwork = "https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?q=80&w=300&auto=format&fit=crop";
const playSVG = '<path d="M8 5v14l11-7z"/>';
const pauseSVG = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
let lastTrackString = "";
function toggleGoldPlay() {
if (audio.paused) {
audio.load();
audio.play().then(() => {
document.getElementById('play-svg-icon').innerHTML = pauseSVG;
}).catch(err => console.log("Stream playback error:", err));
} else {
audio.pause();
document.getElementById('play-svg-icon').innerHTML = playSVG;
}
}
function changeVolume(val) {
audio.volume = val;
}
function fetchArtwork(artist, title) {
const trackString = `${artist} ${title}`;
if (trackString === lastTrackString) return;
lastTrackString = trackString;
const searchTerm = encodeURIComponent(trackString);
const itunesUrl = `https://itunes.apple.com/search?term=${searchTerm}&media=music&limit=1`;
fetch(itunesUrl)
.then(res => res.json())
.then(data => {
if (data.results && data.results.length > 0) {
let artworkUrl = data.results[0].artworkUrl100.replace('100x100bb', '400x400bb');
artworkEl.src = artworkUrl;
} else {
artworkEl.src = defaultArtwork;
}
})
.catch(() => { artworkEl.src = defaultArtwork; });
}
function updateMetadata() {
const statsUrl = `https://api.allorigins.win/get?url=${encodeURIComponent('http://amediastream.eu:9500/status-json.xsl')}`;
fetch(statsUrl)
.then(response => response.ok ? response.json() : null)
.then(data => {
if (!data) return;
try {
const jsonData = JSON.parse(data.contents);
const source = jsonData.icestats.source;
let currentSong = "";
if (Array.isArray(source)) {
const goldSource = source.find(s => s.listenurl.includes('/goldfm'));
currentSong = goldSource ? goldSource.title : source[0].title;
} else {
currentSong = source.title;
}
if (currentSong && currentSong.includes(' - ')) {
const parts = currentSong.split(' - ');
const artist = parts[0].trim();
const title = parts[1].trim();
artistEl.innerText = artist;
titleEl.innerText = title;
fetchArtwork(artist, title);
} else {
titleEl.innerText = currentSong || "Streaming Live";
artistEl.innerText = "Gold FM Canarias";
artworkEl.src = defaultArtwork;
}
} catch (e) {
titleEl.innerText = "Streaming Live";
artistEl.innerText = "Gold FM Canarias";
}
})
.catch(() => {
titleEl.innerText = "Streaming Live";
artistEl.innerText = "Gold FM Canarias";
});
}
function handleFormSubmit(event) {
event.preventDefault();
const name = document.getElementById('form-name').value;
const type = document.getElementById('form-type').value;
const statusMsg = document.getElementById('form-status-message');
statusMsg.className = "status-msg success";
statusMsg.innerText = `Thank you ${name}! Your ${type.toLowerCase()} has been sent to the Gold FM Studio.`;
document.getElementById('studio-form').reset();
setTimeout(() => { statusMsg.style.display = 'none'; }, 6000);
}
updateMetadata();
setInterval(updateMetadata, 12000);
</script>
</body>
</html>