<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q3RADIO | Free Online Radio by Genre, Country & Mood</title>
<meta name="description" content="Q3RADIO | the ultimate platform to listen to online radio and music. Find your favorite stations by genre or country on q-3.eu. Simple. Fast. Free.">
<meta name="keywords" content="q3radio, internet radio, listen radio, top music online, music radio station, music radio fm, house music radio, radio listen for free, listen radio">
<!-- Open Graph (Facebook) -->
<meta property="og:title" content="Q3RADIO | Free internet radio by genre and country" />
<meta property="og:site_name" content="q3radio" />
<meta property="og:description" content="Listen to online radio and music on the best selected radio stations. Discover free online radio at q-3.eu" />
<meta property="og:image" content="https://www.q-3.eu/facebook.jpg" />
<meta property="og:url" content="https://www.q-3.eu/" />
<meta property="og:type" content="website" />
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Q3RADIO | Online Radio by Genre & Mood" />
<meta name="twitter:description" content="Listen to the best internet radio by genre, mood or country. Discover the Q3RADIO platform. Free and simple." />
<meta name="twitter:image" content="https://www.q-3.eu/logs.jpg" />
<meta name="twitter:url" content="https://www.q-3.eu/" />
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- Manifest -->
<link rel="manifest" href="/manifest.json">
<link rel="canonical" href="https://www.q-3.eu/" />
<!-- Font Awesome (чисто и стабильно) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Стили -->
<link rel="preload" href="assets/css/home.css?v=22062025" as="style">
<link rel="stylesheet" href="assets/css/home.css?v=22062025">
<!-- Sitemaps -->
<link rel="sitemap" type="application/xml" title="Sitemap XML" href="https://www.q-3.eu/sitemap.xml">
<link rel="sitemap" type="text/plain" title="Sitemap TXT" href="https://www.q-3.eu/sitemap.txt">
<!-- Schema.org Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "RadioStation",
"name": "Q3RADIO",
"alternateName": "q3radio",
"url": "https://www.q-3.eu/",
"sameAs": [
"https://twitter.com/RadioQuake",
"https://www.facebook.com/RadioQuake"
],
"genre": "Various",
"logo": "https://www.q-3.eu/logs.jpg",
"areaServed": "Global",
"hasBroadcastFrequency": "Online"
}
</script>
<!-- Dublin Core Metadata -->
<meta name="DC.Title" content="Q3RADIO | Free internet radio and music online" />
<meta name="DC.Creator" content="Q3RADIO" />
<meta name="DC.Subject" content="Q3RADIO, Online radio, music, various genres, PWA" />
<meta name="DC.Description" content="Q3RADIO is your global platform for free internet radio. Discover radio by genre, country, mood or language. Simple and powerful interface." />
<meta name="DC.Publisher" content="q-3.eu" />
<meta name="DC.Date" content="2025-06-22" />
<meta name="DC.Type" content="PWA Website" />
<meta name="DC.Format" content="text/html" />
<meta name="DC.Identifier" content="https://www.q-3.eu/" />
<meta name="DC.Language" content="en" />
<meta name="DC.Coverage" content="Global" />
<meta name="DC.Rights" content="Copyright © 2025 q-3.eu. All rights reserved." />
<!-- PWA & Mobile Settings -->
<meta name="application-name" content="Q3RADIO" />
<meta name="theme-color" content="#0e1b2b" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Q3RADIO" />
<link rel="icon" sizes="192x192" href="/icons/192/icon-192x192.png" />
<link rel="apple-touch-icon" href="/icons/192/icon-192x192.png" />
</head>
<body>
<header>
<div class="menu"> <div class="dropdown"><button class="dropbtn">🏆 Top 20 stations</button><div class="dropdown-content"><a href="/station/fgdavidguetta">🥇 FG DAVID GUETTA</a><a href="/station/enigmaticdriveradio">🥈 ENIGMATIC DRIVE RADIO</a><a href="/station/radiomanpasand">🥉 Radio Manpasand</a><a href="/station/casinoenligne">🏅 casino en ligne</a><a href="/station/1fmbombaybeatsindiaradio">🏅 1FM Bombay Beats India Radio</a><a href="/station/bestdeepfm">🏅 BEST DEEP FM</a><a href="/station/instrumentalhits">🏅 Instrumental Hits</a><a href="/station/jpoppowerplaykawaii">🏅 J Pop Powerplay Kawaii</a><a href="/station/enigmaticstation">🏅 ENIGMATIC STATION</a><a href="/station/madhurawaz">🏅 Madhur Awaz</a><a href="/station/chilloutlounge">🏅 CHILLOUT LOUNGE</a><a href="/station/maximummetallica">🏅 MAXIMUM METALLICA</a><a href="/station/rautemetal">🏅 RAUTE Metal</a><a href="/station/vintageradio">🏅 Vintage Radio</a><a href="/station/538dancedept">🏅 538 Dance Dept</a><a href="/station/hitradiooldies">🏅 Hitradio Oldies</a><a href="/station/impulsradio">🏅 IMPULS RADIO</a><a href="/station/radiojazz891">🏅 RADIO JAZZ 89 1</a><a href="/station/radiorecordtrancemission">🏅 RADIO RECORD TRANCEMISSION</a><a href="/station/smoothjazz">🏅 Smooth Jazz</a></div></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const dropdown = document.querySelector('.dropdown'); // Весь контейнер дропдауна
const dropbtn = document.querySelector('.dropbtn'); // Кнопка дропдауна
const dropdownContent = document.querySelector('.dropdown-content'); // Выпадающий список
// Клик по кнопке для показа/скрытия списка
dropbtn.addEventListener('click', (event) => {
event.stopPropagation(); // Предотвращаем всплытие события
dropdownContent.classList.toggle('show'); // Переключаем видимость
});
// Клик в любом месте вне дропдауна для его закрытия
document.addEventListener('click', (event) => {
if (!dropdown.contains(event.target)) {
dropdownContent.classList.remove('show'); // Скрываем список
}
});
});
</script>
<img src="/logs.jpg" width="100" height="50" alt="Q3RADIO - Logo of the online radio service">
</div>
</header>
<div id="news-ticker">
<div class="ticker-wrapper">
<div class="ticker-content">Loading news...</div>
<div class="ticker-content duplicate"></div>
</div>
</div>
<script>
async function fetchMarquee() {
try {
let response = await fetch('https://www.q-3.eu/n/');
let text = await response.text();
let parser = new DOMParser();
let doc = parser.parseFromString(text, 'text/html');
let marquee = doc.querySelector('.flash-news-posts-wrapper');
if (marquee) {
let newsItems = marquee.querySelectorAll('.single-post-wrap');
let newsContent = '';
const icons = ['fas fa-newspaper', 'fas fa-globe', 'fas fa-bullhorn', 'fas fa-rss', 'fas fa-star'];
newsItems.forEach(item => {
let randomIcon = icons[Math.floor(Math.random() * icons.length)];
let title = item.querySelector('.flash-title a')?.innerText.toUpperCase() || 'NO TITLE';
let link = item.querySelector('.flash-title a')?.href || '#';
newsContent += `
<div class="flash-news-item">
<i class="${randomIcon} news-icon"></i>
<a href="${link}" target="_blank">${title}</a>
</div>
`;
});
let ticker = document.querySelector("#news-ticker .ticker-content");
let duplicateTicker = document.querySelector("#news-ticker .duplicate");
ticker.innerHTML = newsContent;
duplicateTicker.innerHTML = newsContent;
adjustTickerPosition();
startTickerAnimation();
} else {
console.error('Бегущая строка не найдена');
document.querySelector("#news-ticker .ticker-content").innerHTML = "NO NEWS AVAILABLE";
}
} catch (error) {
console.error('Ошибка загрузки новостей:', error);
}
}
function adjustTickerPosition() {
let player = document.querySelector('.player-selector');
let ticker = document.getElementById('news-ticker');
if (player) {
let playerHeight = player.offsetHeight;
ticker.style.bottom = `${playerHeight + 10}px`;
} else {
ticker.style.bottom = '0';
}
}
let paused = false;
document.getElementById('news-ticker').addEventListener('mouseover', () => paused = true);
document.getElementById('news-ticker').addEventListener('mouseout', () => paused = false);
function startTickerAnimation() {
let tickerContent = document.querySelector('.ticker-content');
let duplicateContent = document.querySelector('.duplicate');
let tickerWidth = tickerContent.offsetWidth;
let currentPosition = 0;
function animate() {
if (!paused) {
if (currentPosition <= -tickerWidth) {
currentPosition = 0;
} else {
currentPosition -= 1;
}
tickerContent.style.transform = `translateX(${currentPosition}px)`;
duplicateContent.style.transform = `translateX(${currentPosition + tickerWidth}px)`;
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
}
window.addEventListener('load', () => {
let observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
fetchMarquee();
observer.disconnect();
}
}, { threshold: 0.1 });
observer.observe(document.getElementById('news-ticker'));
});
window.addEventListener('resize', adjustTickerPosition);
</script>
<style>
#news-ticker {
position: fixed;
left: 0;
width: 100%;
height: 30px;
background: black;
color: #fff;
z-index: 50000;
overflow: hidden;
white-space: nowrap;
padding: 5px 0;
transition: bottom 0.3s ease;
}
.ticker-wrapper {
display: flex;
width: max-content;
}
.ticker-content {
display: inline-flex;
align-items: center;
gap: 20px;
font-size: 16px;
font-weight: bold;
}
.duplicate {
margin-left: 20px;
}
.flash-news-item {
display: flex;
align-items: center;
gap: 10px;
}
.news-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
#news-ticker a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
</style>
<h1 class="sr-only">Listen to the Best Free Online Radio Stations</h1>
<div class="content">
<div class="tabs">
</div>
<div class="grid">
<!-- Карточка "More Genres" -->
<div class="card">
<a href="https://www.q-3.eu/wall.php" aria-label="More genres available on the wall page">
<i class="fas fa-water" aria-hidden="true"></i>
<p><strong>More Genres</strong></p><h6>12323 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Electronic"
aria-label="Electronic - 2514 stations">
<i class="fas fa-compact-disc"
aria-hidden="true"></i>
<p>
<strong>ELECTRONIC</strong>
</p>
<h6>2514 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Dance"
aria-label="Dance - 2486 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>DANCE</strong>
</p>
<h6>2486 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Disco"
aria-label="Disco - 2318 stations">
<i class="fas fa-compact-disc"
aria-hidden="true"></i>
<p>
<strong>DISCO</strong>
</p>
<h6>2318 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Club"
aria-label="Club - 2262 stations">
<i class="fas fa-glass-cheers"
aria-hidden="true"></i>
<p>
<strong>CLUB</strong>
</p>
<h6>2262 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Pop"
aria-label="Pop - 562 stations">
<i class="fas fa-microphone"
aria-hidden="true"></i>
<p>
<strong>POP</strong>
</p>
<h6>562 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Techno"
aria-label="Techno - 214 stations">
<i class="fas fa-headphones"
aria-hidden="true"></i>
<p>
<strong>TECHNO</strong>
</p>
<h6>214 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Lounge"
aria-label="Lounge - 191 stations">
<i class="fas fa-tree"
aria-hidden="true"></i>
<p>
<strong>LOUNGE</strong>
</p>
<h6>191 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Mixed"
aria-label="Mixed - 162 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>MIXED</strong>
</p>
<h6>162 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/2000s"
aria-label="2000s - 118 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>2000S</strong>
</p>
<h6>118 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Chillout"
aria-label="Chillout - 96 stations">
<i class="fas fa-cloud"
aria-hidden="true"></i>
<p>
<strong>CHILLOUT</strong>
</p>
<h6>96 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Rock"
aria-label="Rock - 89 stations">
<i class="fas fa-drum"
aria-hidden="true"></i>
<p>
<strong>ROCK</strong>
</p>
<h6>89 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Various"
aria-label="Various - 77 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>VARIOUS</strong>
</p>
<h6>77 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Jazz"
aria-label="Jazz - 71 stations">
<i class="fas fa-sun"
aria-hidden="true"></i>
<p>
<strong>JAZZ</strong>
</p>
<h6>71 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Ambient"
aria-label="Ambient - 57 stations">
<i class="fas fa-leaf"
aria-hidden="true"></i>
<p>
<strong>AMBIENT</strong>
</p>
<h6>57 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/House"
aria-label="House - 55 stations">
<i class="fas fa-home"
aria-hidden="true"></i>
<p>
<strong>HOUSE</strong>
</p>
<h6>55 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Variety"
aria-label="Variety - 35 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>VARIETY</strong>
</p>
<h6>35 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Trance"
aria-label="Trance - 30 stations">
<i class="fas fa-bolt"
aria-hidden="true"></i>
<p>
<strong>TRANCE</strong>
</p>
<h6>30 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/60s"
aria-label="60s - 29 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>60S</strong>
</p>
<h6>29 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Hits"
aria-label="Hits - 25 stations">
<i class="fas fa-star"
aria-hidden="true"></i>
<p>
<strong>HITS</strong>
</p>
<h6>25 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/DeepHouse"
aria-label="Deep House - 25 stations">
<i class="fas fa-wave-square"
aria-hidden="true"></i>
<p>
<strong>DEEP HOUSE</strong>
</p>
<h6>25 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/News"
aria-label="News - 24 stations">
<i class="fas fa-microphone"
aria-hidden="true"></i>
<p>
<strong>NEWS</strong>
</p>
<h6>24 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/HipHop"
aria-label="Hip Hop - 24 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>HIP HOP</strong>
</p>
<h6>24 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Relax"
aria-label="Relax - 23 stations">
<i class="fas fa-bed"
aria-hidden="true"></i>
<p>
<strong>RELAX</strong>
</p>
<h6>23 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Classical"
aria-label="Classical - 23 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>CLASSICAL</strong>
</p>
<h6>23 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/80s90s"
aria-label="80s 90s - 23 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>80S 90S</strong>
</p>
<h6>23 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Country"
aria-label="Country - 22 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>COUNTRY</strong>
</p>
<h6>22 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Alternative"
aria-label="Alternative - 19 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>ALTERNATIVE</strong>
</p>
<h6>19 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Retro"
aria-label="Retro - 18 stations">
<i class="fas fa-record-vinyl"
aria-hidden="true"></i>
<p>
<strong>RETRO</strong>
</p>
<h6>18 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Christian"
aria-label="Christian - 18 stations">
<i class="fas fa-cross"
aria-hidden="true"></i>
<p>
<strong>CHRISTIAN</strong>
</p>
<h6>18 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Oldies"
aria-label="Oldies - 17 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>OLDIES</strong>
</p>
<h6>17 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/K-pop"
aria-label="K-pop - 17 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>K-POP</strong>
</p>
<h6>17 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Indian"
aria-label="Indian - 17 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>INDIAN</strong>
</p>
<h6>17 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/DrumandBass"
aria-label="Drum and Bass - 17 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>DRUM AND BASS</strong>
</p>
<h6>17 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Talk"
aria-label="Talk - 16 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>TALK</strong>
</p>
<h6>16 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Spiritual"
aria-label="Spiritual - 16 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>SPIRITUAL</strong>
</p>
<h6>16 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Nature"
aria-label="Nature - 15 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>NATURE</strong>
</p>
<h6>15 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Latin"
aria-label="Latin - 15 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>LATIN</strong>
</p>
<h6>15 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/talkradio"
aria-label="talk radio - 14 stations">
<i class="fas fa-microphone-alt"
aria-hidden="true"></i>
<p>
<strong>TALK RADIO</strong>
</p>
<h6>14 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Chanson"
aria-label="Chanson - 14 stations">
<i class="fas fa-guitar"
aria-hidden="true"></i>
<p>
<strong>CHANSON</strong>
</p>
<h6>14 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/SmoothJazz"
aria-label="Smooth Jazz - 13 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>SMOOTH JAZZ</strong>
</p>
<h6>13 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Religious"
aria-label="Religious - 13 stations">
<i class="fas fa-cross"
aria-hidden="true"></i>
<p>
<strong>RELIGIOUS</strong>
</p>
<h6>13 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/EDM"
aria-label="EDM - 13 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>EDM</strong>
</p>
<h6>13 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/TamilMusic"
aria-label="Tamil Music - 12 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>TAMIL MUSIC</strong>
</p>
<h6>12 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/NewAge"
aria-label="New Age - 12 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>NEW AGE</strong>
</p>
<h6>12 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/WorldMusic"
aria-label="World Music - 11 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>WORLD MUSIC</strong>
</p>
<h6>11 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Schlager"
aria-label="Schlager - 11 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>SCHLAGER</strong>
</p>
<h6>11 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Minimal"
aria-label="Minimal - 11 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>MINIMAL</strong>
</p>
<h6>11 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Instrumental"
aria-label="Instrumental - 11 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>INSTRUMENTAL</strong>
</p>
<h6>11 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/enigmatic"
aria-label="enigmatic - 11 stations">
<i class="fas fa-magic"
aria-hidden="true"></i>
<p>
<strong>ENIGMATIC</strong>
</p>
<h6>11 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Sports"
aria-label="Sports - 10 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>SPORTS</strong>
</p>
<h6>10 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Party"
aria-label="Party - 10 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>PARTY</strong>
</p>
<h6>10 STATIONS</h6>
</a>
</div>
<div class="card">
<a href="/genre/Gospel"
aria-label="Gospel - 10 stations">
<i class="fas fa-music"
aria-hidden="true"></i>
<p>
<strong>GOSPEL</strong>
</p>
<h6>10 STATIONS</h6>
</a>
</div>
</div>
</div>
<div class="footer">
<div class="controls">
<!-- Кнопка воспроизведения/паузы -->
<button onclick="togglePlay()" aria-label="Play or Pause" id="play-button">
<i class="fas fa-play" aria-hidden="true"></i>
</button>
<!-- Кнопка следующей станции -->
<button onclick="nextStation()" aria-label="Next Station">
<i class="fas fa-forward" aria-hidden="true"></i>
</button>
<!-- Информация о текущей станции -->
<div class="station-info">
<i id="station-icon" class="fas fa-music" aria-hidden="true"></i>
<span id="station-name" aria-live="polite">Loading...</span>
</div>
</div>
<!-- Аудиоплеер -->
<audio id="audio-player" preload="none" aria-label="Audio player for the current station"></audio>
<!-- Регулятор громкости -->
<input type="range" id="volume-control" min="0" max="1" step="0.1" value="0.5"
onchange="changeVolume(this.value)" aria-label="Volume control">
</div>
<script>
const audioPlayer = document.getElementById('audio-player');
const playButton = document.getElementById('play-button');
const stationName = document.getElementById('station-name');
const stationIcon = document.getElementById('station-icon');
// Список станций из топ-20
const stations = [{"id":920,"name":"club on heinzebi","url":"https:\/\/club-on-heinzebi.stream.laut.fm\/club-on-heinzebi"},{"id":726,"name":"flysound 90s","url":"https:\/\/flysound-90s.stream.laut.fm\/flysound-90s"},{"id":2044,"name":"Radio Sunshine Live Workout","url":"https:\/\/sunsl.streamabc.net\/sunsl-workout-mp3-192-3330865"},{"id":124,"name":"web site","url":"https:\/\/ljs.fun:19000\/felicitaspugli"},{"id":70,"name":"TOP KITSCH","url":"https:\/\/27873.live.streamtheworld.com\/TOP_NEWBEAT.mp3"},{"id":1906,"name":"MAXIMUM 90 E","url":"https:\/\/maximum90.hostingradio.ru\/maximum9096.aacp"},{"id":33,"name":"hard psy amoris","url":"https:\/\/amoris.sknt.ru\/goa.mp3"},{"id":9807,"name":"RADIOLAMPSI RADIO","url":"https:\/\/sp.streams.ovh\/8040\/stream"},{"id":1973,"name":"ALISA","url":"https:\/\/pub0302.101.ru:8443\/stream\/pro\/aac\/64\/137"},{"id":1966,"name":"UPLIFTING RADIO RECORD","url":"https:\/\/radiorecord.hostingradio.ru\/uplift96.aacp"},{"id":4474,"name":"Forest Green Radio","url":"https:\/\/stream.streamaudio.de:8000\/forest-green"},{"id":1130,"name":"radio of disco dance","url":"https:\/\/radio-of-disco-dance.stream.laut.fm\/radio-of-disco-dance"},{"id":1719,"name":"ANIMA AMORIS AMBIENT","url":"https:\/\/amoris.sknt.ru\/ambient.mp3"},{"id":72,"name":"TOPzillion100","url":"https:\/\/28563.live.streamtheworld.com\/TOP_ZILLION100.mp3?dist=website"},{"id":352,"name":"RAUTE BreakZ FM","url":"https:\/\/breakz-high.rautemusik.fm\/stream.mp3"},{"id":1481,"name":"1JAZZ RU HARD BOP","url":"https:\/\/streams.calmradio.com:7828\/stream"},{"id":3155,"name":"RADIO EMSCHER LIPPE","url":"https:\/\/edge10.streamonkey.net\/wf-radiorel"},{"id":28,"name":"web site","url":"https:\/\/templeos.slendi.dev\/louannranking5"},{"id":3848,"name":"Madhur Awaz","url":"https:\/\/stream.madhurawaz.com\/"},{"id":5168,"name":"KLANG RUINEN","url":"https:\/\/klangruinen.stream.laut.fm\/klangruinen"},{"id":1177,"name":"1 FM CHILLOUT LOUNGE RADIO","url":"https:\/\/strm112.1.fm\/chilloutlounge_mobile_mp3"},{"id":510,"name":"1 FM Amsterdam Trance","url":"https:\/\/strmreg.1.fm\/atr_mobile_mp3"},{"id":2021,"name":"RADIO CAFE MECHTY","url":"https:\/\/listen7.myradio24.com\/dreamcafe"},{"id":113,"name":"Minimal Deep Techno","url":"https:\/\/amoris.sknt.ru\/minimal.mp3"},{"id":17321,"name":"RELAX RADIO CZ","url":"https:\/\/icecast7.play.cz\/relax128.mp3"},{"id":2575,"name":"1 FM Deep Techno And Deep House","url":"https:\/\/strmreg.1.fm\/deeptech_mobile_mp3"},{"id":464,"name":"Technolovers HANDSUP","url":"https:\/\/stream.technolovers.fm\/handsup?ref=radiobrowser"},{"id":17246,"name":"Studio21","url":"https:\/\/stream.studio21.ru\/studio2196.aacp"},{"id":1396,"name":"ENIGMATIC STATION","url":"https:\/\/listen2.myradio24.com\/8226"},{"id":1908,"name":"MAXIMUM HEAVY MONDAY","url":"https:\/\/heavymonday.hostingradio.ru\/heavymonday96.aacp"},{"id":1565,"name":"DFM DISCO","url":"https:\/\/dfm-disco.hostingradio.ru\/disco96.aacp"},{"id":12,"name":"IBIZA DANCE","url":"https:\/\/radio2.vip-radios.fm:18024\/stream-128kmp3-IbizaHits"},{"id":2357,"name":"Trap Radio2","url":"https:\/\/trapradio.streamingmedia.it\/play"},{"id":4503,"name":"Instrumental Hits","url":"https:\/\/panel.retrolandigital.com:8130\/listen"},{"id":15,"name":"Techno base","url":"https:\/\/listener2.aach.tb-group.fm\/tb-high.aac"},{"id":1754,"name":"NICE FM","url":"https:\/\/nicefm.ru\/radio\/"},{"id":2839,"name":"FG Deep and Dance","url":"https:\/\/stream.rcs.revma.com\/tmbhq479n98uv"},{"id":1922,"name":"ORIENTAL DEEP HOUSE","url":"https:\/\/live.radiospinner.com\/rntldphs-64"},{"id":653,"name":"infinity fm","url":"https:\/\/infinity-fm.stream.laut.fm\/infinity-fm"},{"id":4626,"name":"BEACH RADIO","url":"https:\/\/beach-radio.stream.laut.fm\/beach-radio"},{"id":347,"name":"RAUTE Rock","url":"https:\/\/rock-high.rautemusik.fm\/stream.mp3"},{"id":643,"name":"80 90channel","url":"https:\/\/80-90channel.stream.laut.fm\/80-90channel"},{"id":626,"name":"recklessrecords","url":"https:\/\/recklessrecords.stream.laut.fm\/recklessrecords"},{"id":17,"name":"website","url":"https:\/\/greenjob.center\/employer\/sports-services"},{"id":17245,"name":"Jiri Svoboda Listens Country Music","url":"https:\/\/ice5.radia.cz\/countryradio128.mp3"},{"id":750,"name":"housemusicuniverse","url":"https:\/\/housemusicuniverse.stream.laut.fm\/housemusicuniverse"},{"id":1670,"name":"DONAT FM RUSSIAN ROCK","url":"https:\/\/c6.radioboss.fm:18097\/stream"},{"id":4322,"name":"Jazz Radio Ireland","url":"https:\/\/carina.streamerr.co:8116\/stream"},{"id":17248,"name":"PULSRADIO TRANCE","url":"https:\/\/str3.openstream.co\/2119"},{"id":49,"name":"Relax Lounge","url":"https:\/\/stream.relaxfm.ee\/international_HD"},{"id":7165,"name":"RADIO MAINWELLE","url":"https:\/\/webstream.mainwelle.de\/radio-mainwelle.mp3"},{"id":3477,"name":"EPIC LOUNGE CHRISTMAS LOUNGE","url":"https:\/\/stream.epic-lounge.com\/christmas-lounge"},{"id":55,"name":"casino en ligne","url":"https:\/\/git.jaronnie.com\/georgiaflorey"},{"id":2979,"name":"Dream Sequence","url":"https:\/\/listen.radioking.com\/radio\/453296\/stream\/508976"},{"id":744,"name":"djtechno","url":"https:\/\/djtechno.stream.laut.fm\/djtechno"},{"id":2033,"name":"USSR HITS","url":"https:\/\/live.radiospinner.com\/sssrht-64"},{"id":1718,"name":"NASHE RADIO","url":"https:\/\/nashe1.hostingradio.ru\/nashe-128.mp3"},{"id":3179,"name":"RELAX FM BOSSA NOVA","url":"https:\/\/pub0202.101.ru:8443\/stream\/pro\/aac\/64\/372"},{"id":1961,"name":"TRANCEHOUSE RADIO RECORD","url":"https:\/\/radiorecord.hostingradio.ru\/trancehouse96.aacp"},{"id":2209,"name":"ADM Hardstyle Radio","url":"https:\/\/kathy.torontocast.com:2930\/stream"},{"id":840,"name":"FluxFM Sound Of Berlin","url":"https:\/\/fluxfm.streamabc.net\/flx-soundofberlin-mp3-128-4733149"},{"id":18,"name":"FRISKY","url":"https:\/\/stream.frisky.friskyradio.com\/mp3_low"},{"id":1098,"name":"ebp","url":"https:\/\/ebp.stream.laut.fm\/ebp"},{"id":51,"name":"casino en ligne","url":"https:\/\/kannadatube.in\/@pozlenora44711?page=about"},{"id":1485,"name":"ETHNO MUSIC RADIO","url":"https:\/\/i-radio.info:8060\/radio"},{"id":1848,"name":"BIG HITS RADIO RECORD","url":"https:\/\/radiorecord.hostingradio.ru\/bighits96.aacp"},{"id":1934,"name":"BEST OF TRANCE RADIO","url":"https:\/\/my.radioprocessor.com:8100\/best_trance-320.mp3"},{"id":116,"name":"Dish FM","url":"https:\/\/server27166.streamplus.de\/stream.mp3"},{"id":2504,"name":"In My House Radio","url":"https:\/\/tcarlita65.radioca.st\/stream"},{"id":1331,"name":"RADIO ULTRA 70 19 FM","url":"https:\/\/nashe2.hostingradio.ru\/ultra-192.mp3"},{"id":71,"name":"casino en ligne","url":"http:\/\/loyalty-coin.io\/bianca02w64660"},{"id":4408,"name":"Cleansing 80s","url":"https:\/\/hemnos.cdnstream.com\/1467_128"},{"id":63,"name":"website","url":"https:\/\/pattern-wiki.win\/wiki\/User:LaureneY33"},{"id":988,"name":"the greatest album of all time","url":"https:\/\/the-greatest-album-of-all-time.stream.laut.fm\/the-greatest-album-of-all-time"},{"id":1773,"name":"SOULPLAY RADIOSTATION","url":"https:\/\/a1.radioheart.ru:9018\/live"},{"id":559,"name":"progressive trance mix","url":"https:\/\/progressive-trance-mix.stream.laut.fm\/progressive-trance-mix"},{"id":627,"name":"resonancespaceradio","url":"https:\/\/resonancespaceradio.stream.laut.fm\/resonancespaceradio"},{"id":17065,"name":"SOMAFM SONIC UNIVERSE","url":"https:\/\/ice6.somafm.com\/sonicuniverse-128-aac"},{"id":1383,"name":"RADIO JAZZ 89 1","url":"https:\/\/nashe1.hostingradio.ru:80\/jazz-128.mp3"},{"id":3042,"name":"Only 80 s Radio","url":"https:\/\/server-28.stream-server.nl:8850\/stream"},{"id":3575,"name":"STRESSFREIEZONE","url":"https:\/\/stressfreiezone.stream.laut.fm\/stressfreiezone"},{"id":168,"name":"IMPULS RADIO","url":"https:\/\/icecast5.play.cz\/impuls128.mp3"},{"id":1909,"name":"MAXIMUM METALLICA","url":"https:\/\/metallica.hostingradio.ru\/metallica96.aacp"},{"id":595,"name":"chronisch elektronisch","url":"https:\/\/chronisch_elektronisch.stream.laut.fm\/chronisch_elektronisch"},{"id":2578,"name":"Radio FG Mix","url":"https:\/\/n03a-eu.rcs.revma.com\/5kucq079n98uv"},{"id":81,"name":"BOLLERWAGEN","url":"https:\/\/ffn-stream23.radiohost.de\/radiobollerwagen_mp3-192"},{"id":634,"name":"panorama80","url":"https:\/\/panorama80.stream.laut.fm\/panorama80"},{"id":20,"name":"Enigmatic Chill","url":"https:\/\/radio.enigmatic.su:8040\/radio"},{"id":17337,"name":"J Pop Powerplay Kawaii","url":"http:\/\/kathy.torontocast.com:3060\/;"},{"id":445,"name":"Pulse EDM Dance Music Radio","url":"https:\/\/naxos.cdnstream.com\/1373_128"},{"id":149,"name":"homepage","url":"http:\/\/jibedotcompany.com\/geoffrey333623"},{"id":7,"name":"DANCE TIESTO","url":"https:\/\/stream02.pcradio.ru\/Tiesto-med"},{"id":1958,"name":"SYNTHWAVE RADIO","url":"https:\/\/live.radiospinner.com\/synthwave-64"},{"id":44,"name":"casino en ligne","url":"https:\/\/members.minersoc.org\/Default.aspx?tabid=132&userId=3340"},{"id":115,"name":"Balearic deep house","url":"https:\/\/radio.balearic-fm.com:8000\/radio.mp3"},{"id":107,"name":"webpage","url":"https:\/\/www.mapsisa.org\/tobiasg1121450"},{"id":1194,"name":"COCKTAIL LOUNGE","url":"https:\/\/stream.epic-lounge.com\/cocktail-lounge?ref=radiobrowser"},{"id":109,"name":"Techno on Radio","url":"https:\/\/0n-techno.radionetz.de\/0n-techno.mp3"},{"id":3530,"name":"NEXT COOL GROOVE RADIO","url":"https:\/\/streaming.radio.co\/sc7177e496\/listen"},{"id":54,"name":"Rock 70s","url":"https:\/\/ouifmrock70s.ice.infomaniak.ch\/ouifmseventies.mp3"},{"id":1880,"name":"ELVIS PRESLEY RADIO","url":"https:\/\/pub0102.101.ru:8443\/stream\/pro\/aac\/64\/111"},{"id":1547,"name":"RADIO RECORD TRANCEMISSION","url":"https:\/\/radiorecord.hostingradio.ru\/tm96.aacp"},{"id":1384,"name":"ROCK FM 95 2","url":"https:\/\/nashe2.hostingradio.ru\/rock-128.mp3"},{"id":17340,"name":"Coromandel s CFM","url":"https:\/\/stream.cfm.co.nz\/low"},{"id":1296,"name":"CHILLOUTZONE","url":"https:\/\/chilloutzone.stream.laut.fm\/chilloutzone"},{"id":2225,"name":"Dirty Bass FM","url":"https:\/\/dirtybass.fm\/endpoint\/dirtybass.aac"},{"id":1380,"name":"CLASSIC FM RUSSIA","url":"https:\/\/jfm1.hostingradio.ru:14536\/rcstream.mp3"},{"id":17259,"name":"FG HITS","url":"https:\/\/stream.rcs.revma.com\/mxfbr0dusd3vv"},{"id":3850,"name":"Taj 923 FM","url":"https:\/\/ice66.securenetsystems.net\/TAJ"},{"id":348,"name":"RAUTE Trance","url":"https:\/\/trance-high.rautemusik.fm\/stream.mp3"},{"id":1586,"name":"RETRO FM 70E","url":"https:\/\/retro70.hostingradio.ru:8025\/retro70-128.mp3"},{"id":3719,"name":"Hitradio Oldies","url":"https:\/\/hitradiooldies.stream.laut.fm\/hitradiooldies"},{"id":27,"name":"casino en ligne","url":"http:\/\/repo.redraion.com\/eularushing254"},{"id":2080,"name":"Synthesizer Greatest","url":"https:\/\/synthesizergreatest.stream.laut.fm\/synthesizergreatest"},{"id":2072,"name":"Douala Radio","url":"https:\/\/doualaradio.stream.laut.fm\/doualaradio"},{"id":58,"name":"Balearic Trance","url":"https:\/\/balearic-trance.stream.laut.fm\/balearic-trance"},{"id":1291,"name":"1000 SMOOTH HITS","url":"https:\/\/1000smoothhits.stream.laut.fm\/1000smoothhits"},{"id":8,"name":"van Buuren Dance","url":"https:\/\/stream02.pcradio.ru\/Armin_van_buuren-med"},{"id":3053,"name":"MOTORADIO MAIN STREAM","url":"https:\/\/stream.motoradio.online\/high-mp3"},{"id":61,"name":"LOVERS Vocal House","url":"https:\/\/stream1-technolovers.radiohost.de\/vocal-trance"},{"id":511,"name":"RadioParty Trance","url":"https:\/\/s2.radioparty.pl:8015\/trance"},{"id":121,"name":"MINIMALRADIO DE","url":"https:\/\/azurafallback.de:8010\/320.mp3"},{"id":1786,"name":"NASHE RADIO MOSKVA","url":"https:\/\/nashe1.hostingradio.ru:80\/nashe-128.mp3"},{"id":2563,"name":"DFM Deep","url":"https:\/\/dfm-dfmdeep.hostingradio.ru\/dfmdeep96.aacp"},{"id":17247,"name":"PULSRADIO DANCE","url":"https:\/\/str3.openstream.co\/1365"},{"id":1999,"name":"80S ROCK HITS RADIO","url":"https:\/\/live.radiospinner.com\/80srckhts-64"},{"id":43,"name":"lounge DNB","url":"https:\/\/128k.co.uk\/stream\/5113\/"},{"id":3728,"name":"Evropa 2","url":"https:\/\/23543.live.streamtheworld.com:443\/EVROPA2AAC.aac"},{"id":53,"name":"Rock 60s","url":"https:\/\/ouifmrock60s.ice.infomaniak.ch\/ouifmsixties.mp3"},{"id":142,"name":"Classic KABL","url":"https:\/\/stationplaylist.com:7104\/listen.aac"},{"id":9239,"name":"BB RADIO ROCK","url":"https:\/\/irmedia.streamabc.net\/irm-bbrrock-mp3-192-9004399"},{"id":1375,"name":"RUSSKOE RADIO2","url":"https:\/\/rusradio.hostingradio.ru\/rusradio96.aacp"},{"id":832,"name":"Radio Sunshine Live Chillout","url":"https:\/\/sunsl.streamabc.net\/sunsl-chillout-mp3-192-3900120"},{"id":386,"name":"RAUTE Coffee Music","url":"https:\/\/streams.rautemusik.fm\/coffee-music\/mp3-192\/stream.mp3"},{"id":16960,"name":"ATAMAN FM","url":"https:\/\/listen5.myradio24.com\/ataman"},{"id":2382,"name":"90 Dance Radio","url":"https:\/\/nrf1.newradio.it:9934\/stream"},{"id":17238,"name":"FRISKY CHILL","url":"https:\/\/stream.chill.friskyradio.com\/mp3_low"},{"id":47,"name":"NRJ Lounge","url":"https:\/\/nrj.de\/lounge"},{"id":198,"name":"TOP HIT RADIO","url":"https:\/\/strw3.openstream.co\/2372"},{"id":1949,"name":"ROCK FM","url":"https:\/\/nashe1.hostingradio.ru:18000\/rock-128.mp3"},{"id":1354,"name":"RADIO NASHE 2 0","url":"https:\/\/nashe1.hostingradio.ru\/nashe20-128.mp3"},{"id":2564,"name":"Trance Is Star Radio","url":"https:\/\/listen7.myradio24.com\/tisradio"},{"id":1594,"name":"OLDXIT","url":"https:\/\/radio.oldxit.ru:8000\/radio"},{"id":1663,"name":"DFM PUMP","url":"https:\/\/dfm-pump.hostingradio.ru\/pump96.aacp"},{"id":1486,"name":"RADIO RECORD ROCK","url":"https:\/\/radiorecord.hostingradio.ru\/rock96.aacp"},{"id":982,"name":"hbs schulradio","url":"https:\/\/hbs-schulradio.stream.laut.fm\/hbs-schulradio"},{"id":3216,"name":"RELAX FM NATURE","url":"https:\/\/pub0202.101.ru:8443\/stream\/trust\/mp3\/128\/263"},{"id":363,"name":"RAUTE 90s","url":"https:\/\/90s-high.rautemusik.fm\/stream.mp3"},{"id":4419,"name":"The River of Calm","url":"https:\/\/listen.radioking.com\/radio\/49831\/stream\/86743"},{"id":3960,"name":"Shuddh Desi Radio","url":"https:\/\/streamer.radio.co\/se30891e37\/listen"},{"id":2002,"name":"CLASSICAL GUITAR","url":"https:\/\/live.radiospinner.com\/clssclgtr-64"},{"id":2572,"name":"Hirschmilch Radio Progressive","url":"https:\/\/hirschmilch.de:7000\/progressive.mp3"},{"id":122,"name":"NIA Radio","url":"https:\/\/radio.nia.nc\/radio\/8000\/pacific-hq-stream.aac"},{"id":365,"name":"RAUTE Country","url":"https:\/\/country-high.rautemusik.fm\/stream.mp3"},{"id":3194,"name":"MGL RADIO","url":"https:\/\/fluxfm.streamabc.net\/flx-fluxlounge-mp3-128-8660249"},{"id":79,"name":"538 Dance Dept","url":"https:\/\/playerservices.streamtheworld.com\/api\/livestream-redirect\/TLPSTR01.mp3"},{"id":1488,"name":"ENIGMATIC DRIVE RADIO","url":"https:\/\/radio.enigmatic.su:8020\/radio"},{"id":29,"name":"RM FM Harder","url":"https:\/\/rautemusik.stream38.radiohost.de\/harder"},{"id":4442,"name":"95 5 Smooth Jazz","url":"https:\/\/login.webinternetradio.com\/955smoothjazzradio"},{"id":57,"name":"Psyndora Trance","url":"https:\/\/cast.magicstreams.gr\/sc\/psyndora\/stream"},{"id":2214,"name":"Radio Alto Minho","url":"https:\/\/ec2.yesstreaming.net:3705\/stream"},{"id":34,"name":"casino en ligne francais","url":"https:\/\/git.signalnine.net\/robin91t507797"},{"id":22,"name":"Enigmatic III","url":"https:\/\/stream02.pcradio.ru\/enigmatic_su3-med"},{"id":48,"name":"Smooth Lounge","url":"https:\/\/smoothjazz.cdnstream1.com\/2586_128.mp3"},{"id":1960,"name":"TRANCE HITS RADIO RECORD","url":"https:\/\/radiorecord.hostingradio.ru\/trancehits96.aacp"},{"id":17239,"name":"FRISKY DEEP","url":"https:\/\/stream.deep.friskyradio.com\/mp3_low"},{"id":3049,"name":"80er Revival","url":"https:\/\/80er-revival.stream.laut.fm\/80er-revival?t302=2023-04-25_19-32-26&uuid=456d5e22-d3f2-48a4-a611-6cdc77f67e90"},{"id":4105,"name":"RTS La Premiere","url":"https:\/\/stream.srg-ssr.ch\/m\/la-1ere\/aacp_32"},{"id":1608,"name":"DFM BASS HOUSE","url":"https:\/\/dfm-basshouse.hostingradio.ru\/basshouse96.aacp"},{"id":6465,"name":"TECHNOLOVERS VOCAL TRANCE","url":"https:\/\/stream.technolovers.fm\/vocal-trance?ref=radiobrowser"},{"id":1709,"name":"RADIOSPINNER MELLOW JAZZ","url":"https:\/\/live.radiospinner.com\/mellow-jazz-64"},{"id":259,"name":"Aplus FM Beat","url":"https:\/\/s.aplus.fm\/aplus_beat_128"},{"id":492,"name":"Radio Deep","url":"https:\/\/s2.radio.co\/s098f4886e\/listen"},{"id":4261,"name":"Calm Radio Solo Piano","url":"https:\/\/streams.calmradio.com:1228\/stream"},{"id":890,"name":"Radio Sunshine Live Psytrance","url":"https:\/\/sunsl.streamabc.net\/sunsl-christmas-mp3-192-7547837"},{"id":59,"name":"Vocal Trance","url":"https:\/\/s2.radioparty.pl:8015\/vocaltrance"},{"id":26,"name":"web site","url":"https:\/\/git.lumilogix.de\/alexisbabb783"},{"id":1302,"name":"RADIO RELAX","url":"https:\/\/radio_relax.stream.laut.fm\/radio_relax"},{"id":21,"name":"Enigma sound","url":"https:\/\/pub0101.101.ru:8000\/stream\/pro\/aac\/64\/175"},{"id":1827,"name":"RUSSKIJ ROK","url":"https:\/\/rock.volna.top\/RusRock"},{"id":56,"name":"casino en ligne","url":"https:\/\/darkevil.club\/avagill3886609"},{"id":103,"name":"dance revolution","url":"https:\/\/s5.radio.co\/s89dcf578d\/listen"},{"id":4251,"name":"RadioNos New Age Channel","url":"https:\/\/nos.radio.br\/stream\/2\/"},{"id":101,"name":"dance machine","url":"https:\/\/edm.streeemer.com\/listen\/edm\/radio.aac"},{"id":1293,"name":"LOUNGE RADIO IBIZA","url":"https:\/\/lounge-radio-ibiza.stream.laut.fm\/lounge-radio-ibiza"},{"id":1084,"name":"armageddon","url":"https:\/\/armageddon.stream.laut.fm\/armageddon"},{"id":4524,"name":"Radio Mega HiT Chill","url":"https:\/\/chill.radiomegahit.eu:8004\/stream"},{"id":117,"name":"egoFM Sachsen","url":"https:\/\/cast.egofm.de\/egofm.mp3"},{"id":62,"name":"Pure Ibiza Radio","url":"https:\/\/pureibizaradio.streaming-pro.com:8028\/stream.mp3"},{"id":24,"name":"casino en ligne","url":"https:\/\/usetiny.link\/maloriebinder"},{"id":1143,"name":"anechoic chamber music","url":"https:\/\/anechoicchambermusic.stream.laut.fm\/anechoic_chamber_music"},{"id":3846,"name":"Radio Manpasand","url":"https:\/\/c5.radioboss.fm:18125\/stream"},{"id":702,"name":"awiydisco","url":"https:\/\/awiydisco.stream.laut.fm\/awiydisco"},{"id":1967,"name":"VOCAL HOUSE RADIO","url":"https:\/\/live.radiospinner.com\/vclhs-64"},{"id":2208,"name":"Radyo Slayt","url":"https:\/\/live.radyo.in\/8050\/stream"},{"id":25,"name":"Era","url":"https:\/\/stream02.pcradio.ru\/Era-med"},{"id":1341,"name":"DNB FM","url":"https:\/\/go.dnbfm.ru:8000\/play"},{"id":150,"name":"AdagioRadio","url":"https:\/\/stream.tunerplay.com\/radio\/8010\/adagioradio.mp3"},{"id":4367,"name":"Bone Pool Radio","url":"https:\/\/streamer.radio.co\/s49a58b236\/listen"},{"id":14,"name":"web page","url":"https:\/\/git.nightime.org\/janniebeavis23"},{"id":4309,"name":"Bluefields Radio","url":"https:\/\/streaming.radio.co\/s6fd216276\/listen"},{"id":3683,"name":"Smooth Jazz","url":"https:\/\/smooth-jazz.stream.laut.fm\/smooth-jazz"},{"id":3388,"name":"101 SMOOTH JAZZ RADIO","url":"https:\/\/101smoothjazz.cdnstream1.com\/b22139_128mp3"},{"id":1304,"name":"NXTRADIO","url":"https:\/\/nxtradio.stream.laut.fm\/nxtradio"},{"id":17326,"name":"RADIO Rivendell","url":"https:\/\/play.radiorivendell.com\/radio\/8000\/radio.mp3"},{"id":892,"name":"House Attack Radio","url":"https:\/\/virtualtronics.net\/proxy\/houseattack?mp=\/stream"},{"id":390,"name":"RAUTE Mittelalter","url":"https:\/\/streams.rautemusik.fm\/mittelalter\/mp3-192\/stream.mp3"},{"id":351,"name":"RAUTE Metal","url":"https:\/\/wackenradio-high.rautemusik.fm\/stream.mp3"},{"id":204,"name":"web site","url":"https:\/\/fakenews.win\/wiki\/User:Maxine0589"},{"id":110,"name":"casino en ligne francais","url":"https:\/\/rc.intaps.com\/mavisl3436162"},{"id":1184,"name":"CAFE DEL MAR","url":"https:\/\/streams.radio.co\/se1a320b47\/listen"},{"id":1981,"name":"casino en ligne","url":"https:\/\/git.petrhlozek.cz\/leonidarotz65"},{"id":719,"name":"goodoldmusic","url":"https:\/\/goodoldmusic.stream.laut.fm\/goodoldmusic"},{"id":1307,"name":"RELAX","url":"https:\/\/relax.stream.laut.fm\/relax"},{"id":3220,"name":"ABSOLUTE CHILLOUT","url":"https:\/\/ais-edge89-dal02.cdnstream.com\/b05055_128mp3"},{"id":1193,"name":"CHILLOUT LOUNGE","url":"https:\/\/stream.epic-lounge.com\/chillout-lounge?ref=radiobrowser"},{"id":437,"name":"Netlabel org Germany","url":"https:\/\/netlabelorg.stream.laut.fm\/netlabel_org"},{"id":2028,"name":"RUSSIAN ROCK","url":"https:\/\/live.radiospinner.com\/rsskjrk-64"},{"id":16945,"name":"K-Pop","url":"https:\/\/listen.moe\/kpop\/fallback"},{"id":1411,"name":"RADIO MAXIMUM","url":"https:\/\/maximum.hostingradio.ru\/maximum128.mp3"},{"id":647,"name":"powerhouse","url":"https:\/\/powerhouse.stream.laut.fm\/powerhouse"},{"id":46,"name":"Big Sunset Lounge","url":"https:\/\/streams.bigfm.de\/bigfm-sunsetlounge-128-mp3"},{"id":3673,"name":"Erotica Lounge","url":"https:\/\/eroticalounge.stream.laut.fm\/eroticalounge"},{"id":69,"name":"TOP 1000","url":"https:\/\/27873.live.streamtheworld.com\/DANCE_TOP1000.mp3"},{"id":82,"name":"Big FM Dance","url":"https:\/\/streams.bigfm.de\/bigfm-dance-128-mp3"},{"id":50,"name":"Blues and Rock","url":"https:\/\/ouifmbluesnrock.ice.infomaniak.ch\/ouifmbluesnrock-128.mp3"},{"id":160,"name":"raw uncut funk","url":"https:\/\/www.wefunkradio.com\/play\/radio.mp3"},{"id":1869,"name":"CYBER SPACE 101 RU","url":"https:\/\/pub0201.101.ru\/stream\/pro\/aac\/64\/79"},{"id":915,"name":"sound machine club","url":"https:\/\/sound-machine-club.stream.laut.fm\/sound-machine-club"},{"id":3148,"name":"RADIO FANTASY LOUNGE","url":"https:\/\/edge12.streamonkey.net\/fantasy-lounge\/stream\/mp3"},{"id":80,"name":"BEST DEEP FM","url":"https:\/\/listen10.myradio24.com\/5129"},{"id":3197,"name":"SMOOTHLOUNGE COM","url":"https:\/\/smoothjazz.cdnstream1.com\/2586_256.mp3"},{"id":68,"name":"VERSUZ TOP","url":"https:\/\/23543.live.streamtheworld.com\/TOPVERSUZ.mp3"},{"id":2024,"name":"RELAX AND NIRVANA","url":"https:\/\/live.radiospinner.com\/complete-relaxation-64"},{"id":1301,"name":"BEST LOUNGE","url":"https:\/\/best-lounge.stream.laut.fm\/best-lounge"},{"id":1577,"name":"RADIO DISCO NOSTALGIA","url":"https:\/\/azura.abcorp.es:8060\/disco"},{"id":3302,"name":"100 GREATEST JAZZ LOUNGE BAR","url":"https:\/\/cast1.torontocast.com:4640\/stream"},{"id":2889,"name":"06AM Ibiza","url":"https:\/\/streams.radio.co\/sd1bcd1376\/listen"},{"id":730,"name":"discomixradio","url":"https:\/\/discomixradio.stream.laut.fm\/discomixradio"},{"id":2026,"name":"ROCK HITS 70S","url":"https:\/\/live.radiospinner.com\/70srckhts-64"},{"id":494,"name":"Viper Oceania Sound Revolution","url":"https:\/\/vipersoundrevolution.radioca.st\/viper-oceania-sound-revolution.fm"},{"id":564,"name":"cainsdorftranceradio","url":"https:\/\/cainsdorftranceradio.stream.laut.fm\/cainsdorftranceradio"},{"id":3872,"name":"1FM Bombay Beats India Radio","url":"https:\/\/strmreg.1.fm\/bombaybeats_mobile_mp3"},{"id":338,"name":"RADIO JAZZ","url":"https:\/\/rozhlas.stream\/jazz_low.aac"},{"id":1,"name":"DANCE LWR","url":"https:\/\/lwrdance-zaklwr10.radioca.st\/live"},{"id":998,"name":"clubradio24","url":"https:\/\/clubradio24.stream.laut.fm\/clubradio24"},{"id":3350,"name":"BESTMIX","url":"https:\/\/bestmix.stream.laut.fm\/bestmix"},{"id":1682,"name":"DONAT FM FOREIGN HITS","url":"https:\/\/c6.radioboss.fm:18089\/stream"},{"id":568,"name":"rock n rave","url":"https:\/\/rock-n-rave.stream.laut.fm\/rock-n-rave"},{"id":1730,"name":"ANIMA AMORIS NEW AGE","url":"https:\/\/amoris.sknt.ru\/newage.mp3"},{"id":3568,"name":"SMOOTH JAZZ DELUXE","url":"https:\/\/mpc1.mediacp.eu\/stream\/smoothjazzdeluxe"},{"id":2933,"name":"DANCE ONE","url":"https:\/\/stream.rcs.revma.com\/hmnxgw5cu5hvv"},{"id":52,"name":"Girls Rock","url":"https:\/\/ouifmgirlsrock.ice.infomaniak.ch\/ouifmgirlsrock.mp3"},{"id":17244,"name":"Enigmatic Drive","url":"https:\/\/radio.enigmatic.su:8015\/radio"},{"id":1407,"name":"SK RADIO","url":"https:\/\/a8.radioheart.ru:9003\/sk-radio"},{"id":3291,"name":"TRACKSAUDIO 80S MUSIC","url":"https:\/\/radiospromo.com\/listen\/tracksaudio.com_-_80s_music\/radio.mp3"},{"id":60,"name":"web site","url":"https:\/\/templeos.slendi.dev\/louannranking5"},{"id":4154,"name":"1 FM Alternative Rock X Hits","url":"https:\/\/strmreg.1.fm\/x_mobile_mp3"},{"id":772,"name":"trancechannel","url":"https:\/\/trancechannel.stream.laut.fm\/trancechannel"},{"id":4561,"name":"Drone Radio MRG fm","url":"https:\/\/uk4-vn.mixstream.net\/:9270\/listen.mp3"},{"id":1134,"name":"mogeschoss17","url":"https:\/\/mogeschoss17.stream.laut.fm\/mogeschoss17"},{"id":129,"name":"Techno4ever Radio","url":"https:\/\/relay04.t4e.dj\/main_high.aac"},{"id":692,"name":"electrotechno","url":"https:\/\/electrotechno.stream.laut.fm\/electrotechno"},{"id":19,"name":"Enigmatic Bar","url":"https:\/\/radio.enigmatic.su:8050\/radio"},{"id":23,"name":"Enigmatic I","url":"https:\/\/stream02.pcradio.ru\/enigmatic_su1-hi"},{"id":3531,"name":"SUPER RELAX FM","url":"https:\/\/streams.radio.menu\/listen\/super-relax-fm\/radio.mp3"},{"id":4379,"name":"MegaHit","url":"https:\/\/media.xseu.net\/MegaHit"},{"id":13,"name":"Nitro Music Life","url":"https:\/\/live.digitalmediaverse.fun:8020\/radio.mp3"},{"id":4310,"name":"Classic KIX Country","url":"https:\/\/streamer.radio.co\/s69faf3fdd\/listen"},{"id":4269,"name":"Celtic Moon","url":"https:\/\/jenny.torontocast.com:8096\/stream"},{"id":491,"name":"EDM Sessions","url":"https:\/\/s2.radio.co\/s30844a0f4\/listen"},{"id":102,"name":"DANCE FM TRANCE","url":"https:\/\/broadcast.dancefmlive.com\/radio\/8010\/radio.mp3"},{"id":3392,"name":"HIT RADIO FFH ACOUSTIC HITS","url":"https:\/\/mp3.ffh.de\/ffhchannels\/hqacoustichits.mp3"},{"id":3993,"name":"Deutschrock","url":"https:\/\/deutschrock.stream.laut.fm\/deutschrock"},{"id":3235,"name":"RADIO ZVUKI NATURE","url":"https:\/\/zvuki.amgradio.ru\/Zvuki"},{"id":1752,"name":"MAXIMUM ROCK HITS","url":"https:\/\/rockhits.hostingradio.ru\/rockhits96.aacp"},{"id":1323,"name":"95 2 ROCK FM","url":"https:\/\/nashe1.hostingradio.ru\/rock-128.mp3"},{"id":17262,"name":"FG DAVID GUETTA","url":"https:\/\/stream.rcs.revma.com\/88h6r9dusd3vv"},{"id":394,"name":"1 FM Deep Techno Deep House","url":"https:\/\/strm112.1.fm\/deeptech_mobile_mp3"},{"id":2005,"name":"COFFEE JAZZ","url":"https:\/\/live.radiospinner.com\/coffee-jazz-96"},{"id":1221,"name":"HUMBOLDT 101","url":"https:\/\/ais-sa2.cdnstream1.com\/2188_64.aac"},{"id":1468,"name":"RADIO BLACK COFFEE","url":"https:\/\/tsfjazz.ice.infomaniak.ch\/tsfjazz-high.mp3"},{"id":2149,"name":"PartyLoverBerlin","url":"https:\/\/partyloverberlin.stream.laut.fm\/partyloverberlin"},{"id":106,"name":"Dance on Radio","url":"https:\/\/0n-dance.radionetz.de\/0n-dance.mp3"},{"id":17237,"name":"Porao da nau radio","url":"https:\/\/stream.zeno.fm\/rwmao7mxxt8vv"},{"id":644,"name":"rock","url":"https:\/\/rock.stream.laut.fm\/rock"},{"id":2337,"name":"Exclusively Drake","url":"https:\/\/streaming.exclusive.radio\/er\/drake\/icecast.audio"},{"id":5657,"name":"COUNTRY STATION","url":"https:\/\/country-station.stream.laut.fm\/country-station"}];
// Начинаем с первой станции из списка (а не случайной!)
let currentStationIndex = 0;
let isPlaying = false;
// Функция для обновления станции
function updateStation(index) {
if (index >= 0 && index < stations.length) {
const station = stations[index];
audioPlayer.src = station.url;
stationName.textContent = station.name.toUpperCase();
stationIcon.className = `fas ${station.icon ?? 'fa-music'}`;
// Обновляем кнопку Play в состояние "Воспроизведение"
isPlaying = false;
playButton.innerHTML = '<i class="fas fa-play" aria-hidden="true"></i>';
}
}
// Функция для переключения на следующую станцию (по кругу)
function nextStation() {
currentStationIndex = (currentStationIndex + 1) % stations.length;
updateStation(currentStationIndex);
}
// Тоггл для воспроизведения/паузы
function togglePlay() {
if (!isPlaying) {
audioPlayer.play().then(() => {
isPlaying = true;
playButton.innerHTML = '<i class="fas fa-pause" aria-hidden="true"></i>';
}).catch(() => {
console.error('Audio cannot be played.');
});
} else {
audioPlayer.pause();
isPlaying = false;
playButton.innerHTML = '<i class="fas fa-play" aria-hidden="true"></i>';
}
}
// Управление громкостью
function changeVolume(value) {
audioPlayer.volume = value;
}
// Запускаем первую станцию из топ-20
updateStation(currentStationIndex);
</script>
<input id="menu-toggle" class="open" type="checkbox" hidden>
<label class="btn" for="menu-toggle" aria-label="Toggle menu"></label>
<div class="top-panel">
<!-- Кнопка с количеством станций -->
<br> <div class="station-button">
STATION COUNT : 12323 </div>
<div class="message">
<h2><b>
<style>
#install-app-button {
display: none;
background-color: #39464e;
color: white;
font-size: 16px;
padding: 10px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
font-weight: bold;
width: 100%;
transition: background-color 0.3s, transform 0.2s;
}
#install-app-button:hover {
background-color: #2f3a42;
transform: scale(1.02);
}
#install-app-button:active {
transform: scale(0.98);
}
</style>
<nav>
<ul style="list-style: none; padding: 0; margin: 0;">
<li>
<button id="install-app-button" aria-label="Install Q3Radio App">
📲 INSTALL Q3RADIO
</button>
</li>
</ul>
</nav>
<script>
document.addEventListener('DOMContentLoaded', () => {
const installButton = document.getElementById('install-app-button');
let deferredPrompt = null;
const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (isStandalone) {
console.log('[Q3Radio] Running in standalone mode');
return;
}
if (isIOS) {
installButton.textContent = '📲 ADD TO HOME SCREEN';
installButton.style.display = 'block';
installButton.addEventListener('click', () => {
alert('To install Q3Radio, tap the Share button in Safari and choose "Add to Home Screen".');
});
return;
}
window.addEventListener('beforeinstallprompt', (e) => {
console.log('[Q3Radio] beforeinstallprompt fired');
e.preventDefault();
deferredPrompt = e;
installButton.style.display = 'block';
});
installButton.addEventListener('click', async () => {
console.log('[Q3Radio] Install button clicked');
if (deferredPrompt) {
deferredPrompt.prompt();
const result = await deferredPrompt.userChoice;
console.log('[Q3Radio] User choice:', result.outcome);
if (result.outcome === 'accepted') {
installButton.style.display = 'none';
console.log('[Q3Radio] User accepted the install');
} else {
console.log('[Q3Radio] User dismissed the install');
}
deferredPrompt = null;
} else {
console.log('[Q3Radio] Install prompt not available');
}
});
});
// Регистрация Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(() => console.log('[Q3Radio] Service Worker registered'))
.catch((err) => console.warn('[Q3Radio] Service Worker error:', err));
}
</script>
<a href="https://www.q-3.eu/" title="Go to Home Page" aria-label="Go to Home Page">🏠 HOME</a>
<a href="https://www.q-3.eu/radio.php" title="Switch to Random Mode" aria-label="Switch to Random Mode">🎲 RANDOM </a>
<a href="https://www.q-3.eu/big/" title="Switch to Random Mode" aria-label="Switch to Random Mode">☢️ BIG BUTTON </a>
<a href="https://www.q-3.eu/search.php" aria-label="Search for radio stations page" title="Search for stations">🔍 SEARCH STATION</a>
<a href="https://www.q-3.eu/all.php" title="View all available stations" aria-label="View all available radio stations">📻 ALL STATIONS</a>
<a href="https://www.q-3.eu/wall.php" title="Filter stations based on your preferences" aria-label="Filter stations based on your preferences">🧹 FILTERS</a>
<a href="https://www.q-3.eu/user/listen.php" title="Listen stations based on your preferences" aria-label="Listen to your favorite stations">⭐ FAVORITES</a>
<a href="https://www.q-3.eu/user/index.php" title="Edit stations based on your preferences" aria-label="Edit your favorite stations">✏️ EDIT FAVORITES</a>
<a href="https://www.q-3.eu/n/" title="Stay Updated with the Latest News" aria-label="Stay Updated with the Latest News">📝 NEWS</a>
<a href="https://www.q-3.eu/tags/cloud.php" title="Edit stations based on your preferences" aria-label="Edit your favorite stations">🌟 POPULAR TAGS</a>
<a href="https://t.me/radio_quake" target="_blank" title="Join our Telegram community" aria-label="Join our Telegram community (opens in a new window)">💬 TELEGRAM</a>
<a href="https://www.q-3.eu/copyright.php" target="_blank" title="Read the legal information and terms of service" aria-label="Read the legal information and terms of service (opens in a new window)">📜 LEGAL INFORMATION</a>
<a href="https://www.q-3.eu/cookie-policy.php" target="_blank" title="Learn about our cookie usage policy" aria-label="Learn about our cookie usage policy (opens in a new window)">🍪 COOKIE POLICY</a>
<a href="https://www.q-3.eu/privacy.php" target="_blank" title="Understand our privacy policy" aria-label="Understand our privacy policy (opens in a new window)">🔒 PRIVACY POLICY</a>
<a href="https://www.q-3.eu/sitemap.php" target="_blank" title="View the sitemap of the website" aria-label="View the website sitemap (opens in a new window)">🗺️ SITEMAP</a>
<!-- Ссылка на админку, видимая только для авторизованных пользователей -->
</b>
</h2>
<style>
.station-button {
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 40px;
background: #39464e; /* Основной цвет кнопки */
border-radius: 5px;
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.8), /* Вдавленная внутренняя тень */
inset -3px -3px 6px rgba(255, 255, 255, 0.1); /* Легкий свет для гравировки */
border: none; /* Убрана рамка */
color: #dce5f5; /* Цвет текста */
font-size: 1rem; /* Размер текста */
font-weight: bold; /* Жирный текст */
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9); /* Гравировочная тень текста */
text-align: center; /* Центрирование текста */
margin: 10px auto; /* Центрирование кнопки */
cursor: default; /* Обычный курсор вместо руки */
opacity: 0.7; /* Прозрачность для эффекта неактивности */
pointer-events: none; /* Отключает взаимодействие с элементом */
}
/* Эффект наведения мыши */
.station-button:hover {
background: #2f3c43; /* Чуть более темный цвет */
color: #ffffff; /* Белый текст на hover */
cursor: pointer; /* Курсор-указатель */
}
</style>
</div>
</div>
<script src="/counter/js/home.js" async></script>
<br><br><br>
<script src="/sw.js" async></script>
<!-- cookies.php -->
<!-- START Cookie-Alert -->
<div id="cookie_note">
<p aria-label="Cookie notification">
We use cookies to improve the functionality of our website. By staying on our site, you agree to the use of cookies.
To learn more about our Privacy Policy and Cookie Usage,
<a href="https://www.q-3.eu/copyright.php" target="_blank" aria-label="Read Privacy Policy and Cookie Usage (opens in a new window)">
Privacy Policy</a>
</p>
<button class="button cookie_accept btn btn-primary btn-sm" aria-label="Accept cookies and proceed">
I Agree
</button>
</div>
<!-- END Cookie-Alert -->
<style>
/* Основной стиль контейнера уведомления */
#cookie_note {
display: none;
position: fixed;
bottom: 90px;
left: 50%;
max-width: 90%;
transform: translateX(-50%);
padding: 20px;
background-color: white;
border-radius: 4px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
z-index: 9999;
font-family: 'Roboto', sans-serif; /* Применяем шрифт Roboto */
}
/* Текст уведомления */
#cookie_note p {
margin: 0;
font-size: 0.9rem;
text-align: left;
color: black;
}
/* Кнопка согласия с чёткой пропорцией 5:2 */
.cookie_accept {
display: flex;
justify-content: center;
align-items: center;
width: 120px; /* Устанавливаем фиксированную ширину */
height: calc(120px / 4); /* Высота высчитывается от пропорции 5:2 */
background-color: #ffd700;
color: black;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: calc(0.15em + 1vw); /* Динамический размер текста */
transition: background-color 0.3s ease, transform 0.2s ease;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-family: 'Roboto', sans-serif; /* Применяем шрифт Roboto */
}
/* Добавляем отступ между текстом и кнопкой */
#cookie_note.show {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px; /* Отступ между текстом и кнопкой */
}
/* Ховер-эффект для кнопки */
.cookie_accept:hover {
background-color: #f0c707;
transform: scale(1.05);
}
/* Адаптивность для больших экранов */
@media (min-width: 576px) {
#cookie_note.show {
flex-direction: row;
}
.cookie_accept {
width: 150px; /* Увеличиваем ширину на больших экранах */
height: calc(150px / 4); /* Высота остаётся пропорциональной */
}
}
/* Адаптивность для маленьких экранов */
@media (max-width: 575px) {
#cookie_note.show {
flex-direction: column; /* Кнопка будет под текстом */
text-align: left;
}
.cookie_accept {
width: 100px; /* Меньший размер для узких экранов */
height: calc(100px / 4); /* Пропорция сохраняется */
}
#cookie_note p {
font-size: 0.8rem;
margin-bottom: 10px; /* Добавляем отступ снизу для текста */
}
}
</style>
<script>
// JavaScript для управления cookies
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = `${name}=${encodeURIComponent(value || "")}${expires}; path=/`;
}
function getCookie(name) {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
function checkCookies() {
let cookieNote = document.getElementById('cookie_note');
let cookieBtnAccept = cookieNote.querySelector('.cookie_accept');
// Если куки cookies_policy нет или она просрочена, показываем уведомление
if (!getCookie('cookies_policy')) {
cookieNote.classList.add('show');
}
// При клике на кнопку устанавливаем куку cookies_policy на один год
cookieBtnAccept.addEventListener('click', function () {
setCookie('cookies_policy', 'true', 365); // Устанавливаем куку на 1 год
cookieNote.classList.remove('show'); // Скрываем уведомление
});
}
// Инициализация проверки куки
checkCookies();
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
checkCookies();
});
</script>