<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Радио Плеер</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@900&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            color: #fff;
            margin: 0;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow-x: auto;
            position: relative;
        }
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(135deg, rgba(30, 30, 47, 0.8), rgba(42, 42, 64, 0.8));
        }
        video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
        }
        .player {
            background: rgba(42, 42, 64, 0.9);
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            text-align: center;
            width: 100%;
            max-width: 95vw;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 2rem;
            color: #ff8c42;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            margin-bottom: 10px;
        }
        h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1rem;
            color: #ff8c42;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            margin-bottom: 15px;
        }
        audio {
            width: 100%;
            margin: 10px 0;
        }
        .controls {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 15px;
        }
        .controls button {
            padding: 8px 16px;
            border: none;
            border-radius: 10px;
            background: #ff8c42;
            color: #fff;
            font-weight: bold;
            font-size: 0.9rem;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .controls button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
        }
        .station-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 8px;
        }
        .station-list button {
            padding: 10px 6px;
            border: none;
            border-radius: 10px;
            background: #ff8c42;
            color: #007bff;
            font-weight: bold;
            font-size: 0.8rem;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s, box-shadow 0.2s;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        .station-list button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
        }
        .footer {
            margin-top: 15px;
            font-size: 0.8rem;
            color: #ccc;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <!-- Фоновое видео -->
    <video autoplay loop muted playsinline>
        <source src="https://assets.mixkit.co/videos/1564/1564-720.mp4" type="video/mp4">
        Ваш браузер не поддерживает видео.
    </video>

    <!-- Основной контент -->
    <div class="player">
        <h1>3D Радио Плеер</h1>
        <h2>от CEPBEP_RU56</h2>
        <audio id="audioPlayer" controls>
            Ваш браузер не поддерживает элемент <code>audio</code>.
        </audio>
        <div class="controls">
            <button onclick="play()">▶️ Воспроизвести</button>
            <button onclick="pause()">⏸️ Пауза</button>
            <button onclick="stop()">⏹️ Стоп</button>
        </div>
        <div class="station-list">
            <!-- Список станций -->
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/rr_main96.aacp')">Запись</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/tiesto96.aacp')">Тиесто</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/guetta96.aacp')">Дэвид Гетта</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/armin96.aacp')">Армин ван Бюрен</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/rus96.aacp')">Русский микс</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/sd9096.aacp')">Супердискотека 90-х</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/russianhits64.aacp')">Российские хиты</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/chil96.aacp')">Чилл-аут</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/deep96.aacp')">Глубокий</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/mix96.aacp')">Мегамикс</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/rmx96.aacp')">Ремикс</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/200096.aacp')">Рекорд 00-х</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/bighits96.aacp')">Большие хиты</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/mf96.aacp')">Маятник Фуко</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/chillhouse96.aacp')">Чилл Хаус</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/tm96.aacp')">Трансмиссия</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/198096.aacp')">Рекорд 80-х</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/rock96.aacp')">Скала</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/russiangold96.aacp')">Русское золото</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/ps96.aacp')">Пиратская станция</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/ibiza96.aacp')">Невиновность</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/party96.aacp')">Вечеринка 24/7</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/gold96.aacp')">Рекордное золото</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/summerparty96.aacp')">Летний танец</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/hype96.aacp')">На Хайпе</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/phonk96.aacp')">Фонк</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/rv96.aacp')">Руки Вверх!</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/rap96.aacp')">Рэп-хиты</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/rapclassics96.aacp')">Классика рэпа</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/trancehits96.aacp')">Классика транса</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/vip96.aacp')">VIP Дом</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/jackin96.aacp')">Басс Хаус</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/organic96.aacp')">Органический</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/yo96.aacp')">Черный рэп</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/summerlounge64.aacp')">Summer Lounge</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/drumhits96.aacp')">D'n'B Classics</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/201096.aacp')">10's Dance</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/club96.aacp')">EDM</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/lofi96.aacp')">Lo-Fi</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/workout96.aacp')">Workout</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/neurofunk96.aacp')">Neurofunk</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/brks96.aacp')">Breaks</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/trop96.aacp')">Tropical</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/techouse96.aacp')">Tech House</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/trap96.aacp')">Trap</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/liquidfunk96.aacp')">Liquid Funk</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/dub96.aacp')">Dubstep</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/househits96.aacp')">House Hits</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/goa96.aacp')">GOA/PSY</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/trancehouse96.aacp')">Trancehouse</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/ambient96.aacp')">Ambient</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/top100edm96.aacp')">TOP 100 EDM</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/dream96.aacp')">Dream Dance</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/techno96.aacp')">Techno</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/livedjsets96.aacp')">Live DJ-sets</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/197096.aacp')">70's Dance</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/technopop96.aacp')">Technopop</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/mini96.aacp')">Minimal/Tech</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/dreampop96.aacp')">Dream Pop</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/houseclss96.aacp')">House Classics</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/uplift96.aacp')">Uplifting</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/eurodance96.aacp')">Eurodance</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/cadillac96.aacp')">60's Dance</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/futurerave96.aacp')">Future Rave</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/fut96.aacp')">Future House</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/ukgarage96.aacp')">UK Garage</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/reggae96.aacp')">Reggae</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/discofunk96.aacp')">Disco/Funk</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/dc96.aacp')">Dancecore</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/hbass96.aacp')">Hard Bass</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/elect96.aacp')">Electro</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/pump96.aacp')">Old School</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/progr96.aacp')">Progressive</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/edmhits96.aacp')">EDM Classics</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/teo96.aacp')">Hardstyle</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/darkside96.aacp')">Darkside</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/synth96.aacp')">Synthwave</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/latina96.aacp')">Latina Dance</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/tecktonik96.aacp')">Tecktonik</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/fbass96.aacp')">Future Bass</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/gop96.aacp')">Гоп FM</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/mt96.aacp')">Midtempo</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/jungle96.aacp')">Jungle</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/hypno96.aacp')">Hypnotic</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/rave96.aacp')">Rave FM</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/mmbt96.aacp')">Мумбатон</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/2step96.aacp')">2-ступенчатый</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/mdl96.aacp')">Медляк FM</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/deti96.aacp')">Веснушка FM</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/groovetribal96.aacp')">Грув/Трайбл</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/gast96.aacp')">Гастарбайтер FM</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/naft96.aacp')">Нафталин FM</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/symph96.aacp')">Симфония FM</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/complextro96.aacp')">Комплекстро</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/christmaschill96.aacp')">Рождественская прохлада</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/christmas96.aacp')">Рождество</button>
            <button onclick="changeStation('https://radiorecord.hostingradio.ru/ruszima96.aacp')">Русская Зима</button>
        </div>
        <div class="footer">
            Copyright © 2022-2025 CEPBEP_RU56 Все права защищены.
        </div>
    </div>

    <script>
        const audioPlayer = document.getElementById('audioPlayer');

        function play() {
            audioPlayer.play();
        }

        function pause() {
            audioPlayer.pause();
        }

        function stop() {
            audioPlayer.pause();
            audioPlayer.currentTime = 0;
        }

        function changeStation(url) {
            audioPlayer.src = url;
            audioPlayer.play();
        }
    </script>
</body>
</html>