<!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/bestdeepfm">🥉 BEST DEEP FM</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/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":1594,"name":"OLDXIT","url":"https:\/\/radio.oldxit.ru:8000\/radio"},{"id":491,"name":"EDM Sessions","url":"https:\/\/s2.radio.co\/s30844a0f4\/listen"},{"id":2033,"name":"USSR HITS","url":"https:\/\/live.radiospinner.com\/sssrht-64"},{"id":113,"name":"Minimal Deep Techno","url":"https:\/\/amoris.sknt.ru\/minimal.mp3"},{"id":8,"name":"van Buuren Dance","url":"https:\/\/stream02.pcradio.ru\/Armin_van_buuren-med"},{"id":2382,"name":"90 Dance Radio","url":"https:\/\/nrf1.newradio.it:9934\/stream"},{"id":2889,"name":"06AM Ibiza","url":"https:\/\/streams.radio.co\/sd1bcd1376\/listen"},{"id":14,"name":"web page","url":"https:\/\/git.nightime.org\/janniebeavis23"},{"id":17065,"name":"SOMAFM SONIC UNIVERSE","url":"https:\/\/ice6.somafm.com\/sonicuniverse-128-aac"},{"id":1293,"name":"LOUNGE RADIO IBIZA","url":"https:\/\/lounge-radio-ibiza.stream.laut.fm\/lounge-radio-ibiza"},{"id":347,"name":"RAUTE Rock","url":"https:\/\/rock-high.rautemusik.fm\/stream.mp3"},{"id":1177,"name":"1 FM CHILLOUT LOUNGE RADIO","url":"https:\/\/strm112.1.fm\/chilloutlounge_mobile_mp3"},{"id":4561,"name":"Drone Radio MRG fm","url":"https:\/\/uk4-vn.mixstream.net\/:9270\/listen.mp3"},{"id":1967,"name":"VOCAL HOUSE RADIO","url":"https:\/\/live.radiospinner.com\/vclhs-64"},{"id":1973,"name":"ALISA","url":"https:\/\/pub0302.101.ru:8443\/stream\/pro\/aac\/64\/137"},{"id":626,"name":"recklessrecords","url":"https:\/\/recklessrecords.stream.laut.fm\/recklessrecords"},{"id":2578,"name":"Radio FG Mix","url":"https:\/\/n03a-eu.rcs.revma.com\/5kucq079n98uv"},{"id":4503,"name":"Instrumental Hits","url":"https:\/\/panel.retrolandigital.com:8130\/listen"},{"id":3531,"name":"SUPER RELAX FM","url":"https:\/\/streams.radio.menu\/listen\/super-relax-fm\/radio.mp3"},{"id":1323,"name":"95 2 ROCK FM","url":"https:\/\/nashe1.hostingradio.ru\/rock-128.mp3"},{"id":3053,"name":"MOTORADIO MAIN STREAM","url":"https:\/\/stream.motoradio.online\/high-mp3"},{"id":33,"name":"hard psy amoris","url":"https:\/\/amoris.sknt.ru\/goa.mp3"},{"id":2214,"name":"Radio Alto Minho","url":"https:\/\/ec2.yesstreaming.net:3705\/stream"},{"id":82,"name":"Big FM Dance","url":"https:\/\/streams.bigfm.de\/bigfm-dance-128-mp3"},{"id":149,"name":"homepage","url":"http:\/\/jibedotcompany.com\/geoffrey333623"},{"id":634,"name":"panorama80","url":"https:\/\/panorama80.stream.laut.fm\/panorama80"},{"id":2979,"name":"Dream Sequence","url":"https:\/\/listen.radioking.com\/radio\/453296\/stream\/508976"},{"id":1909,"name":"MAXIMUM METALLICA","url":"https:\/\/metallica.hostingradio.ru\/metallica96.aacp"},{"id":68,"name":"VERSUZ TOP","url":"https:\/\/23543.live.streamtheworld.com\/TOPVERSUZ.mp3"},{"id":1958,"name":"SYNTHWAVE RADIO","url":"https:\/\/live.radiospinner.com\/synthwave-64"},{"id":890,"name":"Radio Sunshine Live Psytrance","url":"https:\/\/sunsl.streamabc.net\/sunsl-christmas-mp3-192-7547837"},{"id":1906,"name":"MAXIMUM 90 E","url":"https:\/\/maximum90.hostingradio.ru\/maximum9096.aacp"},{"id":2024,"name":"RELAX AND NIRVANA","url":"https:\/\/live.radiospinner.com\/complete-relaxation-64"},{"id":3148,"name":"RADIO FANTASY LOUNGE","url":"https:\/\/edge12.streamonkey.net\/fantasy-lounge\/stream\/mp3"},{"id":3719,"name":"Hitradio Oldies","url":"https:\/\/hitradiooldies.stream.laut.fm\/hitradiooldies"},{"id":17326,"name":"RADIO Rivendell","url":"https:\/\/play.radiorivendell.com\/radio\/8000\/radio.mp3"},{"id":116,"name":"Dish FM","url":"https:\/\/server27166.streamplus.de\/stream.mp3"},{"id":1663,"name":"DFM PUMP","url":"https:\/\/dfm-pump.hostingradio.ru\/pump96.aacp"},{"id":492,"name":"Radio Deep","url":"https:\/\/s2.radio.co\/s098f4886e\/listen"},{"id":46,"name":"Big Sunset Lounge","url":"https:\/\/streams.bigfm.de\/bigfm-sunsetlounge-128-mp3"},{"id":59,"name":"Vocal Trance","url":"https:\/\/s2.radioparty.pl:8015\/vocaltrance"},{"id":1486,"name":"RADIO RECORD ROCK","url":"https:\/\/radiorecord.hostingradio.ru\/rock96.aacp"},{"id":1966,"name":"UPLIFTING RADIO RECORD","url":"https:\/\/radiorecord.hostingradio.ru\/uplift96.aacp"},{"id":2933,"name":"DANCE ONE","url":"https:\/\/stream.rcs.revma.com\/hmnxgw5cu5hvv"},{"id":1307,"name":"RELAX","url":"https:\/\/relax.stream.laut.fm\/relax"},{"id":5657,"name":"COUNTRY STATION","url":"https:\/\/country-station.stream.laut.fm\/country-station"},{"id":47,"name":"NRJ Lounge","url":"https:\/\/nrj.de\/lounge"},{"id":390,"name":"RAUTE Mittelalter","url":"https:\/\/streams.rautemusik.fm\/mittelalter\/mp3-192\/stream.mp3"},{"id":3960,"name":"Shuddh Desi Radio","url":"https:\/\/streamer.radio.co\/se30891e37\/listen"},{"id":1396,"name":"ENIGMATIC STATION","url":"https:\/\/listen2.myradio24.com\/8226"},{"id":3291,"name":"TRACKSAUDIO 80S MUSIC","url":"https:\/\/radiospromo.com\/listen\/tracksaudio.com_-_80s_music\/radio.mp3"},{"id":110,"name":"casino en ligne francais","url":"https:\/\/rc.intaps.com\/mavisl3436162"},{"id":1827,"name":"RUSSKIJ ROK","url":"https:\/\/rock.volna.top\/RusRock"},{"id":3350,"name":"BESTMIX","url":"https:\/\/bestmix.stream.laut.fm\/bestmix"},{"id":17262,"name":"FG DAVID GUETTA","url":"https:\/\/stream.rcs.revma.com\/88h6r9dusd3vv"},{"id":1354,"name":"RADIO NASHE 2 0","url":"https:\/\/nashe1.hostingradio.ru\/nashe20-128.mp3"},{"id":204,"name":"web site","url":"https:\/\/fakenews.win\/wiki\/User:Maxine0589"},{"id":1922,"name":"ORIENTAL DEEP HOUSE","url":"https:\/\/live.radiospinner.com\/rntldphs-64"},{"id":18,"name":"FRISKY","url":"https:\/\/stream.frisky.friskyradio.com\/mp3_low"},{"id":1296,"name":"CHILLOUTZONE","url":"https:\/\/chilloutzone.stream.laut.fm\/chilloutzone"},{"id":9807,"name":"RADIOLAMPSI RADIO","url":"https:\/\/sp.streams.ovh\/8040\/stream"},{"id":365,"name":"RAUTE Country","url":"https:\/\/country-high.rautemusik.fm\/stream.mp3"},{"id":1488,"name":"ENIGMATIC DRIVE RADIO","url":"https:\/\/radio.enigmatic.su:8020\/radio"},{"id":4261,"name":"Calm Radio Solo Piano","url":"https:\/\/streams.calmradio.com:1228\/stream"},{"id":348,"name":"RAUTE Trance","url":"https:\/\/trance-high.rautemusik.fm\/stream.mp3"},{"id":351,"name":"RAUTE Metal","url":"https:\/\/wackenradio-high.rautemusik.fm\/stream.mp3"},{"id":1331,"name":"RADIO ULTRA 70 19 FM","url":"https:\/\/nashe2.hostingradio.ru\/ultra-192.mp3"},{"id":27,"name":"casino en ligne","url":"http:\/\/repo.redraion.com\/eularushing254"},{"id":982,"name":"hbs schulradio","url":"https:\/\/hbs-schulradio.stream.laut.fm\/hbs-schulradio"},{"id":1304,"name":"NXTRADIO","url":"https:\/\/nxtradio.stream.laut.fm\/nxtradio"},{"id":7,"name":"DANCE TIESTO","url":"https:\/\/stream02.pcradio.ru\/Tiesto-med"},{"id":4154,"name":"1 FM Alternative Rock X Hits","url":"https:\/\/strmreg.1.fm\/x_mobile_mp3"},{"id":4310,"name":"Classic KIX Country","url":"https:\/\/streamer.radio.co\/s69faf3fdd\/listen"},{"id":48,"name":"Smooth Lounge","url":"https:\/\/smoothjazz.cdnstream1.com\/2586_128.mp3"},{"id":1547,"name":"RADIO RECORD TRANCEMISSION","url":"https:\/\/radiorecord.hostingradio.ru\/tm96.aacp"},{"id":726,"name":"flysound 90s","url":"https:\/\/flysound-90s.stream.laut.fm\/flysound-90s"},{"id":1301,"name":"BEST LOUNGE","url":"https:\/\/best-lounge.stream.laut.fm\/best-lounge"},{"id":564,"name":"cainsdorftranceradio","url":"https:\/\/cainsdorftranceradio.stream.laut.fm\/cainsdorftranceradio"},{"id":692,"name":"electrotechno","url":"https:\/\/electrotechno.stream.laut.fm\/electrotechno"},{"id":1719,"name":"ANIMA AMORIS AMBIENT","url":"https:\/\/amoris.sknt.ru\/ambient.mp3"},{"id":129,"name":"Techno4ever Radio","url":"https:\/\/relay04.t4e.dj\/main_high.aac"},{"id":29,"name":"RM FM Harder","url":"https:\/\/rautemusik.stream38.radiohost.de\/harder"},{"id":1949,"name":"ROCK FM","url":"https:\/\/nashe1.hostingradio.ru:18000\/rock-128.mp3"},{"id":1709,"name":"RADIOSPINNER MELLOW JAZZ","url":"https:\/\/live.radiospinner.com\/mellow-jazz-64"},{"id":1193,"name":"CHILLOUT LOUNGE","url":"https:\/\/stream.epic-lounge.com\/chillout-lounge?ref=radiobrowser"},{"id":44,"name":"casino en ligne","url":"https:\/\/members.minersoc.org\/Default.aspx?tabid=132&userId=3340"},{"id":17248,"name":"PULSRADIO TRANCE","url":"https:\/\/str3.openstream.co\/2119"},{"id":1184,"name":"CAFE DEL MAR","url":"https:\/\/streams.radio.co\/se1a320b47\/listen"},{"id":2572,"name":"Hirschmilch Radio Progressive","url":"https:\/\/hirschmilch.de:7000\/progressive.mp3"},{"id":17239,"name":"FRISKY DEEP","url":"https:\/\/stream.deep.friskyradio.com\/mp3_low"},{"id":51,"name":"casino en ligne","url":"https:\/\/kannadatube.in\/@pozlenora44711?page=about"},{"id":352,"name":"RAUTE BreakZ FM","url":"https:\/\/breakz-high.rautemusik.fm\/stream.mp3"},{"id":107,"name":"webpage","url":"https:\/\/www.mapsisa.org\/tobiasg1121450"},{"id":4251,"name":"RadioNos New Age Channel","url":"https:\/\/nos.radio.br\/stream\/2\/"},{"id":464,"name":"Technolovers HANDSUP","url":"https:\/\/stream.technolovers.fm\/handsup?ref=radiobrowser"},{"id":1754,"name":"NICE FM","url":"https:\/\/nicefm.ru\/radio\/"},{"id":80,"name":"BEST DEEP FM","url":"https:\/\/listen10.myradio24.com\/5129"},{"id":1,"name":"DANCE LWR","url":"https:\/\/lwrdance-zaklwr10.radioca.st\/live"},{"id":3683,"name":"Smooth Jazz","url":"https:\/\/smooth-jazz.stream.laut.fm\/smooth-jazz"},{"id":702,"name":"awiydisco","url":"https:\/\/awiydisco.stream.laut.fm\/awiydisco"},{"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":9239,"name":"BB RADIO ROCK","url":"https:\/\/irmedia.streamabc.net\/irm-bbrrock-mp3-192-9004399"},{"id":2357,"name":"Trap Radio2","url":"https:\/\/trapradio.streamingmedia.it\/play"},{"id":198,"name":"TOP HIT RADIO","url":"https:\/\/strw3.openstream.co\/2372"},{"id":1682,"name":"DONAT FM FOREIGN HITS","url":"https:\/\/c6.radioboss.fm:18089\/stream"},{"id":2072,"name":"Douala Radio","url":"https:\/\/doualaradio.stream.laut.fm\/doualaradio"},{"id":2839,"name":"FG Deep and Dance","url":"https:\/\/stream.rcs.revma.com\/tmbhq479n98uv"},{"id":57,"name":"Psyndora Trance","url":"https:\/\/cast.magicstreams.gr\/sc\/psyndora\/stream"},{"id":115,"name":"Balearic deep house","url":"https:\/\/radio.balearic-fm.com:8000\/radio.mp3"},{"id":3568,"name":"SMOOTH JAZZ DELUXE","url":"https:\/\/mpc1.mediacp.eu\/stream\/smoothjazzdeluxe"},{"id":17238,"name":"FRISKY CHILL","url":"https:\/\/stream.chill.friskyradio.com\/mp3_low"},{"id":121,"name":"MINIMALRADIO DE","url":"https:\/\/azurafallback.de:8010\/320.mp3"},{"id":3155,"name":"RADIO EMSCHER LIPPE","url":"https:\/\/edge10.streamonkey.net\/wf-radiorel"},{"id":3993,"name":"Deutschrock","url":"https:\/\/deutschrock.stream.laut.fm\/deutschrock"},{"id":1380,"name":"CLASSIC FM RUSSIA","url":"https:\/\/jfm1.hostingradio.ru:14536\/rcstream.mp3"},{"id":72,"name":"TOPzillion100","url":"https:\/\/28563.live.streamtheworld.com\/TOP_ZILLION100.mp3?dist=website"},{"id":17245,"name":"Jiri Svoboda Listens Country Music","url":"https:\/\/ice5.radia.cz\/countryradio128.mp3"},{"id":5168,"name":"KLANG RUINEN","url":"https:\/\/klangruinen.stream.laut.fm\/klangruinen"},{"id":3179,"name":"RELAX FM BOSSA NOVA","url":"https:\/\/pub0202.101.ru:8443\/stream\/pro\/aac\/64\/372"},{"id":338,"name":"RADIO JAZZ","url":"https:\/\/rozhlas.stream\/jazz_low.aac"},{"id":915,"name":"sound machine club","url":"https:\/\/sound-machine-club.stream.laut.fm\/sound-machine-club"},{"id":840,"name":"FluxFM Sound Of Berlin","url":"https:\/\/fluxfm.streamabc.net\/flx-soundofberlin-mp3-128-4733149"},{"id":103,"name":"dance revolution","url":"https:\/\/s5.radio.co\/s89dcf578d\/listen"},{"id":363,"name":"RAUTE 90s","url":"https:\/\/90s-high.rautemusik.fm\/stream.mp3"},{"id":1773,"name":"SOULPLAY RADIOSTATION","url":"https:\/\/a1.radioheart.ru:9018\/live"},{"id":2563,"name":"DFM Deep","url":"https:\/\/dfm-dfmdeep.hostingradio.ru\/dfmdeep96.aacp"},{"id":3728,"name":"Evropa 2","url":"https:\/\/23543.live.streamtheworld.com:443\/EVROPA2AAC.aac"},{"id":106,"name":"Dance on Radio","url":"https:\/\/0n-dance.radionetz.de\/0n-dance.mp3"},{"id":2149,"name":"PartyLoverBerlin","url":"https:\/\/partyloverberlin.stream.laut.fm\/partyloverberlin"},{"id":17340,"name":"Coromandel s CFM","url":"https:\/\/stream.cfm.co.nz\/low"},{"id":494,"name":"Viper Oceania Sound Revolution","url":"https:\/\/vipersoundrevolution.radioca.st\/viper-oceania-sound-revolution.fm"},{"id":3850,"name":"Taj 923 FM","url":"https:\/\/ice66.securenetsystems.net\/TAJ"},{"id":26,"name":"web site","url":"https:\/\/git.lumilogix.de\/alexisbabb783"},{"id":394,"name":"1 FM Deep Techno Deep House","url":"https:\/\/strm112.1.fm\/deeptech_mobile_mp3"},{"id":2021,"name":"RADIO CAFE MECHTY","url":"https:\/\/listen7.myradio24.com\/dreamcafe"},{"id":1384,"name":"ROCK FM 95 2","url":"https:\/\/nashe2.hostingradio.ru\/rock-128.mp3"},{"id":1565,"name":"DFM DISCO","url":"https:\/\/dfm-disco.hostingradio.ru\/disco96.aacp"},{"id":559,"name":"progressive trance mix","url":"https:\/\/progressive-trance-mix.stream.laut.fm\/progressive-trance-mix"},{"id":1481,"name":"1JAZZ RU HARD BOP","url":"https:\/\/streams.calmradio.com:7828\/stream"},{"id":4269,"name":"Celtic Moon","url":"https:\/\/jenny.torontocast.com:8096\/stream"},{"id":4442,"name":"95 5 Smooth Jazz","url":"https:\/\/login.webinternetradio.com\/955smoothjazzradio"},{"id":17244,"name":"Enigmatic Drive","url":"https:\/\/radio.enigmatic.su:8015\/radio"},{"id":22,"name":"Enigmatic III","url":"https:\/\/stream02.pcradio.ru\/enigmatic_su3-med"},{"id":17337,"name":"J Pop Powerplay Kawaii","url":"http:\/\/kathy.torontocast.com:3060\/;"},{"id":4626,"name":"BEACH RADIO","url":"https:\/\/beach-radio.stream.laut.fm\/beach-radio"},{"id":644,"name":"rock","url":"https:\/\/rock.stream.laut.fm\/rock"},{"id":1730,"name":"ANIMA AMORIS NEW AGE","url":"https:\/\/amoris.sknt.ru\/newage.mp3"},{"id":56,"name":"casino en ligne","url":"https:\/\/darkevil.club\/avagill3886609"},{"id":2002,"name":"CLASSICAL GUITAR","url":"https:\/\/live.radiospinner.com\/clssclgtr-64"},{"id":17259,"name":"FG HITS","url":"https:\/\/stream.rcs.revma.com\/mxfbr0dusd3vv"},{"id":1880,"name":"ELVIS PRESLEY RADIO","url":"https:\/\/pub0102.101.ru:8443\/stream\/pro\/aac\/64\/111"},{"id":1221,"name":"HUMBOLDT 101","url":"https:\/\/ais-sa2.cdnstream1.com\/2188_64.aac"},{"id":4105,"name":"RTS La Premiere","url":"https:\/\/stream.srg-ssr.ch\/m\/la-1ere\/aacp_32"},{"id":4367,"name":"Bone Pool Radio","url":"https:\/\/streamer.radio.co\/s49a58b236\/listen"},{"id":730,"name":"discomixradio","url":"https:\/\/discomixradio.stream.laut.fm\/discomixradio"},{"id":4322,"name":"Jazz Radio Ireland","url":"https:\/\/carina.streamerr.co:8116\/stream"},{"id":647,"name":"powerhouse","url":"https:\/\/powerhouse.stream.laut.fm\/powerhouse"},{"id":437,"name":"Netlabel org Germany","url":"https:\/\/netlabelorg.stream.laut.fm\/netlabel_org"},{"id":1961,"name":"TRANCEHOUSE RADIO RECORD","url":"https:\/\/radiorecord.hostingradio.ru\/trancehouse96.aacp"},{"id":4524,"name":"Radio Mega HiT Chill","url":"https:\/\/chill.radiomegahit.eu:8004\/stream"},{"id":52,"name":"Girls Rock","url":"https:\/\/ouifmgirlsrock.ice.infomaniak.ch\/ouifmgirlsrock.mp3"},{"id":7165,"name":"RADIO MAINWELLE","url":"https:\/\/webstream.mainwelle.de\/radio-mainwelle.mp3"},{"id":3220,"name":"ABSOLUTE CHILLOUT","url":"https:\/\/ais-edge89-dal02.cdnstream.com\/b05055_128mp3"},{"id":17,"name":"website","url":"https:\/\/greenjob.center\/employer\/sports-services"},{"id":1848,"name":"BIG HITS RADIO RECORD","url":"https:\/\/radiorecord.hostingradio.ru\/bighits96.aacp"},{"id":386,"name":"RAUTE Coffee Music","url":"https:\/\/streams.rautemusik.fm\/coffee-music\/mp3-192\/stream.mp3"},{"id":259,"name":"Aplus FM Beat","url":"https:\/\/s.aplus.fm\/aplus_beat_128"},{"id":653,"name":"infinity fm","url":"https:\/\/infinity-fm.stream.laut.fm\/infinity-fm"},{"id":160,"name":"raw uncut funk","url":"https:\/\/www.wefunkradio.com\/play\/radio.mp3"},{"id":3235,"name":"RADIO ZVUKI NATURE","url":"https:\/\/zvuki.amgradio.ru\/Zvuki"},{"id":122,"name":"NIA Radio","url":"https:\/\/radio.nia.nc\/radio\/8000\/pacific-hq-stream.aac"},{"id":2564,"name":"Trance Is Star Radio","url":"https:\/\/listen7.myradio24.com\/tisradio"},{"id":643,"name":"80 90channel","url":"https:\/\/80-90channel.stream.laut.fm\/80-90channel"},{"id":3530,"name":"NEXT COOL GROOVE RADIO","url":"https:\/\/streaming.radio.co\/sc7177e496\/listen"},{"id":2026,"name":"ROCK HITS 70S","url":"https:\/\/live.radiospinner.com\/70srckhts-64"},{"id":595,"name":"chronisch elektronisch","url":"https:\/\/chronisch_elektronisch.stream.laut.fm\/chronisch_elektronisch"},{"id":70,"name":"TOP KITSCH","url":"https:\/\/27873.live.streamtheworld.com\/TOP_NEWBEAT.mp3"},{"id":49,"name":"Relax Lounge","url":"https:\/\/stream.relaxfm.ee\/international_HD"},{"id":511,"name":"RadioParty Trance","url":"https:\/\/s2.radioparty.pl:8015\/trance"},{"id":2208,"name":"Radyo Slayt","url":"https:\/\/live.radyo.in\/8050\/stream"},{"id":744,"name":"djtechno","url":"https:\/\/djtechno.stream.laut.fm\/djtechno"},{"id":19,"name":"Enigmatic Bar","url":"https:\/\/radio.enigmatic.su:8050\/radio"},{"id":3848,"name":"Madhur Awaz","url":"https:\/\/stream.madhurawaz.com\/"},{"id":2225,"name":"Dirty Bass FM","url":"https:\/\/dirtybass.fm\/endpoint\/dirtybass.aac"},{"id":1485,"name":"ETHNO MUSIC RADIO","url":"https:\/\/i-radio.info:8060\/radio"},{"id":16945,"name":"K-Pop","url":"https:\/\/listen.moe\/kpop\/fallback"},{"id":2575,"name":"1 FM Deep Techno And Deep House","url":"https:\/\/strmreg.1.fm\/deeptech_mobile_mp3"},{"id":1999,"name":"80S ROCK HITS RADIO","url":"https:\/\/live.radiospinner.com\/80srckhts-64"},{"id":1577,"name":"RADIO DISCO NOSTALGIA","url":"https:\/\/azura.abcorp.es:8060\/disco"},{"id":124,"name":"web site","url":"https:\/\/ljs.fun:19000\/felicitaspugli"},{"id":117,"name":"egoFM Sachsen","url":"https:\/\/cast.egofm.de\/egofm.mp3"},{"id":16960,"name":"ATAMAN FM","url":"https:\/\/listen5.myradio24.com\/ataman"},{"id":23,"name":"Enigmatic I","url":"https:\/\/stream02.pcradio.ru\/enigmatic_su1-hi"},{"id":1084,"name":"armageddon","url":"https:\/\/armageddon.stream.laut.fm\/armageddon"},{"id":1981,"name":"casino en ligne","url":"https:\/\/git.petrhlozek.cz\/leonidarotz65"},{"id":17246,"name":"Studio21","url":"https:\/\/stream.studio21.ru\/studio2196.aacp"},{"id":4309,"name":"Bluefields Radio","url":"https:\/\/streaming.radio.co\/s6fd216276\/listen"},{"id":1407,"name":"SK RADIO","url":"https:\/\/a8.radioheart.ru:9003\/sk-radio"},{"id":55,"name":"casino en ligne","url":"https:\/\/git.jaronnie.com\/georgiaflorey"},{"id":3302,"name":"100 GREATEST JAZZ LOUNGE BAR","url":"https:\/\/cast1.torontocast.com:4640\/stream"},{"id":3197,"name":"SMOOTHLOUNGE COM","url":"https:\/\/smoothjazz.cdnstream1.com\/2586_256.mp3"},{"id":1908,"name":"MAXIMUM HEAVY MONDAY","url":"https:\/\/heavymonday.hostingradio.ru\/heavymonday96.aacp"},{"id":1786,"name":"NASHE RADIO MOSKVA","url":"https:\/\/nashe1.hostingradio.ru:80\/nashe-128.mp3"},{"id":43,"name":"lounge DNB","url":"https:\/\/128k.co.uk\/stream\/5113\/"},{"id":54,"name":"Rock 70s","url":"https:\/\/ouifmrock70s.ice.infomaniak.ch\/ouifmseventies.mp3"},{"id":6465,"name":"TECHNOLOVERS VOCAL TRANCE","url":"https:\/\/stream.technolovers.fm\/vocal-trance?ref=radiobrowser"},{"id":60,"name":"web site","url":"https:\/\/templeos.slendi.dev\/louannranking5"},{"id":20,"name":"Enigmatic Chill","url":"https:\/\/radio.enigmatic.su:8040\/radio"},{"id":750,"name":"housemusicuniverse","url":"https:\/\/housemusicuniverse.stream.laut.fm\/housemusicuniverse"},{"id":3872,"name":"1FM Bombay Beats India Radio","url":"https:\/\/strmreg.1.fm\/bombaybeats_mobile_mp3"},{"id":1934,"name":"BEST OF TRANCE RADIO","url":"https:\/\/my.radioprocessor.com:8100\/best_trance-320.mp3"},{"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":445,"name":"Pulse EDM Dance Music Radio","url":"https:\/\/naxos.cdnstream.com\/1373_128"},{"id":13,"name":"Nitro Music Life","url":"https:\/\/live.digitalmediaverse.fun:8020\/radio.mp3"},{"id":3477,"name":"EPIC LOUNGE CHRISTMAS LOUNGE","url":"https:\/\/stream.epic-lounge.com\/christmas-lounge"},{"id":2028,"name":"RUSSIAN ROCK","url":"https:\/\/live.radiospinner.com\/rsskjrk-64"},{"id":12,"name":"IBIZA DANCE","url":"https:\/\/radio2.vip-radios.fm:18024\/stream-128kmp3-IbizaHits"},{"id":34,"name":"casino en ligne francais","url":"https:\/\/git.signalnine.net\/robin91t507797"},{"id":3846,"name":"Radio Manpasand","url":"https:\/\/c5.radioboss.fm:18125\/stream"},{"id":3388,"name":"101 SMOOTH JAZZ RADIO","url":"https:\/\/101smoothjazz.cdnstream1.com\/b22139_128mp3"},{"id":17321,"name":"RELAX RADIO CZ","url":"https:\/\/icecast7.play.cz\/relax128.mp3"},{"id":998,"name":"clubradio24","url":"https:\/\/clubradio24.stream.laut.fm\/clubradio24"},{"id":2080,"name":"Synthesizer Greatest","url":"https:\/\/synthesizergreatest.stream.laut.fm\/synthesizergreatest"},{"id":15,"name":"Techno base","url":"https:\/\/listener2.aach.tb-group.fm\/tb-high.aac"},{"id":150,"name":"AdagioRadio","url":"https:\/\/stream.tunerplay.com\/radio\/8010\/adagioradio.mp3"},{"id":627,"name":"resonancespaceradio","url":"https:\/\/resonancespaceradio.stream.laut.fm\/resonancespaceradio"},{"id":3042,"name":"Only 80 s Radio","url":"https:\/\/server-28.stream-server.nl:8850\/stream"},{"id":4419,"name":"The River of Calm","url":"https:\/\/listen.radioking.com\/radio\/49831\/stream\/86743"},{"id":4379,"name":"MegaHit","url":"https:\/\/media.xseu.net\/MegaHit"},{"id":71,"name":"casino en ligne","url":"http:\/\/loyalty-coin.io\/bianca02w64660"},{"id":892,"name":"House Attack Radio","url":"https:\/\/virtualtronics.net\/proxy\/houseattack?mp=\/stream"},{"id":920,"name":"club on heinzebi","url":"https:\/\/club-on-heinzebi.stream.laut.fm\/club-on-heinzebi"},{"id":79,"name":"538 Dance Dept","url":"https:\/\/playerservices.streamtheworld.com\/api\/livestream-redirect\/TLPSTR01.mp3"},{"id":1869,"name":"CYBER SPACE 101 RU","url":"https:\/\/pub0201.101.ru\/stream\/pro\/aac\/64\/79"},{"id":1960,"name":"TRANCE HITS RADIO RECORD","url":"https:\/\/radiorecord.hostingradio.ru\/trancehits96.aacp"},{"id":102,"name":"DANCE FM TRANCE","url":"https:\/\/broadcast.dancefmlive.com\/radio\/8010\/radio.mp3"},{"id":510,"name":"1 FM Amsterdam Trance","url":"https:\/\/strmreg.1.fm\/atr_mobile_mp3"},{"id":17237,"name":"Porao da nau radio","url":"https:\/\/stream.zeno.fm\/rwmao7mxxt8vv"},{"id":3392,"name":"HIT RADIO FFH ACOUSTIC HITS","url":"https:\/\/mp3.ffh.de\/ffhchannels\/hqacoustichits.mp3"},{"id":1194,"name":"COCKTAIL LOUNGE","url":"https:\/\/stream.epic-lounge.com\/cocktail-lounge?ref=radiobrowser"},{"id":1098,"name":"ebp","url":"https:\/\/ebp.stream.laut.fm\/ebp"},{"id":1302,"name":"RADIO RELAX","url":"https:\/\/radio_relax.stream.laut.fm\/radio_relax"},{"id":3673,"name":"Erotica Lounge","url":"https:\/\/eroticalounge.stream.laut.fm\/eroticalounge"},{"id":62,"name":"Pure Ibiza Radio","url":"https:\/\/pureibizaradio.streaming-pro.com:8028\/stream.mp3"},{"id":1752,"name":"MAXIMUM ROCK HITS","url":"https:\/\/rockhits.hostingradio.ru\/rockhits96.aacp"},{"id":2044,"name":"Radio Sunshine Live Workout","url":"https:\/\/sunsl.streamabc.net\/sunsl-workout-mp3-192-3330865"},{"id":24,"name":"casino en ligne","url":"https:\/\/usetiny.link\/maloriebinder"},{"id":832,"name":"Radio Sunshine Live Chillout","url":"https:\/\/sunsl.streamabc.net\/sunsl-chillout-mp3-192-3900120"},{"id":50,"name":"Blues and Rock","url":"https:\/\/ouifmbluesnrock.ice.infomaniak.ch\/ouifmbluesnrock-128.mp3"},{"id":2209,"name":"ADM Hardstyle Radio","url":"https:\/\/kathy.torontocast.com:2930\/stream"},{"id":3575,"name":"STRESSFREIEZONE","url":"https:\/\/stressfreiezone.stream.laut.fm\/stressfreiezone"},{"id":1130,"name":"radio of disco dance","url":"https:\/\/radio-of-disco-dance.stream.laut.fm\/radio-of-disco-dance"},{"id":53,"name":"Rock 60s","url":"https:\/\/ouifmrock60s.ice.infomaniak.ch\/ouifmsixties.mp3"},{"id":69,"name":"TOP 1000","url":"https:\/\/27873.live.streamtheworld.com\/DANCE_TOP1000.mp3"},{"id":1411,"name":"RADIO MAXIMUM","url":"https:\/\/maximum.hostingradio.ru\/maximum128.mp3"},{"id":21,"name":"Enigma sound","url":"https:\/\/pub0101.101.ru:8000\/stream\/pro\/aac\/64\/175"},{"id":1134,"name":"mogeschoss17","url":"https:\/\/mogeschoss17.stream.laut.fm\/mogeschoss17"},{"id":1608,"name":"DFM BASS HOUSE","url":"https:\/\/dfm-basshouse.hostingradio.ru\/basshouse96.aacp"},{"id":1291,"name":"1000 SMOOTH HITS","url":"https:\/\/1000smoothhits.stream.laut.fm\/1000smoothhits"},{"id":2005,"name":"COFFEE JAZZ","url":"https:\/\/live.radiospinner.com\/coffee-jazz-96"},{"id":2504,"name":"In My House Radio","url":"https:\/\/tcarlita65.radioca.st\/stream"},{"id":28,"name":"web site","url":"https:\/\/templeos.slendi.dev\/louannranking5"},{"id":1383,"name":"RADIO JAZZ 89 1","url":"https:\/\/nashe1.hostingradio.ru:80\/jazz-128.mp3"},{"id":1670,"name":"DONAT FM RUSSIAN ROCK","url":"https:\/\/c6.radioboss.fm:18097\/stream"},{"id":1143,"name":"anechoic chamber music","url":"https:\/\/anechoicchambermusic.stream.laut.fm\/anechoic_chamber_music"},{"id":25,"name":"Era","url":"https:\/\/stream02.pcradio.ru\/Era-med"},{"id":17247,"name":"PULSRADIO DANCE","url":"https:\/\/str3.openstream.co\/1365"},{"id":63,"name":"website","url":"https:\/\/pattern-wiki.win\/wiki\/User:LaureneY33"},{"id":1718,"name":"NASHE RADIO","url":"https:\/\/nashe1.hostingradio.ru\/nashe-128.mp3"},{"id":568,"name":"rock n rave","url":"https:\/\/rock-n-rave.stream.laut.fm\/rock-n-rave"},{"id":719,"name":"goodoldmusic","url":"https:\/\/goodoldmusic.stream.laut.fm\/goodoldmusic"},{"id":58,"name":"Balearic Trance","url":"https:\/\/balearic-trance.stream.laut.fm\/balearic-trance"},{"id":4408,"name":"Cleansing 80s","url":"https:\/\/hemnos.cdnstream.com\/1467_128"},{"id":2337,"name":"Exclusively Drake","url":"https:\/\/streaming.exclusive.radio\/er\/drake\/icecast.audio"},{"id":168,"name":"IMPULS RADIO","url":"https:\/\/icecast5.play.cz\/impuls128.mp3"},{"id":101,"name":"dance machine","url":"https:\/\/edm.streeemer.com\/listen\/edm\/radio.aac"},{"id":81,"name":"BOLLERWAGEN","url":"https:\/\/ffn-stream23.radiohost.de\/radiobollerwagen_mp3-192"},{"id":1586,"name":"RETRO FM 70E","url":"https:\/\/retro70.hostingradio.ru:8025\/retro70-128.mp3"},{"id":142,"name":"Classic KABL","url":"https:\/\/stationplaylist.com:7104\/listen.aac"},{"id":1468,"name":"RADIO BLACK COFFEE","url":"https:\/\/tsfjazz.ice.infomaniak.ch\/tsfjazz-high.mp3"},{"id":1341,"name":"DNB FM","url":"https:\/\/go.dnbfm.ru:8000\/play"},{"id":772,"name":"trancechannel","url":"https:\/\/trancechannel.stream.laut.fm\/trancechannel"},{"id":3194,"name":"MGL RADIO","url":"https:\/\/fluxfm.streamabc.net\/flx-fluxlounge-mp3-128-8660249"},{"id":4474,"name":"Forest Green Radio","url":"https:\/\/stream.streamaudio.de:8000\/forest-green"},{"id":1375,"name":"RUSSKOE RADIO2","url":"https:\/\/rusradio.hostingradio.ru\/rusradio96.aacp"},{"id":109,"name":"Techno on Radio","url":"https:\/\/0n-techno.radionetz.de\/0n-techno.mp3"},{"id":61,"name":"LOVERS Vocal House","url":"https:\/\/stream1-technolovers.radiohost.de\/vocal-trance"},{"id":3216,"name":"RELAX FM NATURE","url":"https:\/\/pub0202.101.ru:8443\/stream\/trust\/mp3\/128\/263"}];
// Начинаем с первой станции из списка (а не случайной!)
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>