<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VBS Radio | Live Stream</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #f5f5f5;
            --surface: #ffffff;
            --border: #e0e0e0;
            --text: #1a1a1a;
            --text-muted: #6b6b6b;
            --accent: #1a1a1a;
            --accent-hover: #333333;
            --danger: #8a8a8a;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            margin: 0;
            padding: 40px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        header {
            margin-bottom: 40px;
            text-align: center;
        }

        header h1 {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--text);
            margin: 0;
            letter-spacing: 2px;
        }

        header p {
            margin: 8px 0 0;
            color: var(--text-muted);
            font-size: 0.85rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .player-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 32px;
            width: 100%;
            max-width: 460px;
            text-align: center;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
            margin-bottom: 20px;
            background: #f0f0f0;
            color: var(--text-muted);
            border: 1px solid var(--border);
        }

        .status-badge::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-muted);
        }

        .status-badge.online {
            background: #eaf6ea;
            color: #2d6a2d;
            border-color: #cce4cc;
        }

        .status-badge.online::before {
            background: #2d6a2d;
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        .loader {
            display: none;
            width: 32px;
            height: 32px;
            border: 2px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        #track-info {
            margin-bottom: 24px;
            min-height: 24px;
        }

        #track-info span {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            margin: 24px 0;
        }

        .btn {
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--text);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            outline: none;
            padding: 0;
        }

        .btn:hover {
            background: #f0f0f0;
            border-color: var(--text-muted);
        }

        .btn-play {
            background: var(--accent);
            color: var(--surface);
            border-color: var(--accent);
            width: 64px;
            height: 64px;
        }

        .btn-play:hover {
            background: var(--accent-hover);
            border-color: var(--accent-hover);
        }

        .btn svg {
            fill: currentColor;
            width: 22px;
            height: 22px;
        }

        .btn-play svg {
            width: 26px;
            height: 26px;
        }

        .volume-container {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 8px 0;
        }

        .volume-icon {
            color: var(--text-muted);
            font-size: 0.9rem;
            min-width: 20px;
            text-align: center;
        }

        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            background: var(--border);
            height: 3px;
            border-radius: 3px;
            outline: none;
            cursor: pointer;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            background: var(--accent);
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.2s;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        input[type="range"]::-moz-range-thumb {
            width: 14px;
            height: 14px;
            background: var(--accent);
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }

        .info-section {
            width: 100%;
            max-width: 800px;
            margin-top: 32px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 32px;
        }

        .info-section h2 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text);
            margin: 0 0 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
            letter-spacing: 0.5px;
        }

        .info-section p {
            font-size: 0.95rem;
            line-height: 1.65;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .info-section p strong {
            color: var(--text);
            font-weight: 600;
        }

        .info-section .tagline {
            color: var(--text);
            font-weight: 500;
            margin-top: 16px;
            padding: 12px 16px;
            background: #f5f5f5;
            border-left: 3px solid var(--accent);
            border-radius: 4px;
        }

        .announce-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
            margin-top: 8px;
        }

        .announce-card {
            background: #fafafa;
            border: 1px solid var(--border);
            padding: 16px 18px;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .announce-card:hover {
            background: #f0f0f0;
            border-color: var(--text-muted);
        }

        .announce-date {
            color: var(--text-muted);
            font-size: 0.75rem;
            letter-spacing: 1px;
            margin-bottom: 8px;
            font-weight: 500;
            text-transform: uppercase;
        }

        .announce-title {
            font-weight: 600;
            color: var(--text);
            font-size: 1rem;
            margin-bottom: 6px;
        }

        .announce-desc {
            font-size: 0.875rem;
            color: var(--text-muted);
            line-height: 1.5;
        }

        .contacts-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .contacts-list li {
            padding: 14px 0;
            font-size: 0.95rem;
            color: var(--text);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .contacts-list li:last-child {
            border-bottom: none;
        }

        .contacts-list a {
            color: var(--text);
            text-decoration: none;
            border-bottom: 1px solid var(--border);
            transition: border-color 0.2s;
        }

        .contacts-list a:hover {
            border-bottom-color: var(--accent);
        }

        .contact-label {
            color: var(--text-muted);
            min-width: 140px;
            font-size: 0.875rem;
        }

        .socials {
            display: flex;
            gap: 10px;
            margin-top: 24px;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .social-btn {
            display: inline-block;
            padding: 8px 16px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text);
            text-decoration: none;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .social-btn:hover {
            background: var(--accent);
            color: var(--surface);
            border-color: var(--accent);
        }

        footer {
            margin-top: 48px;
            font-size: 0.85rem;
            color: var(--text-muted);
            text-align: center;
            padding-bottom: 20px;
        }

        footer p {
            margin: 4px 0;
        }

        footer .small {
            font-size: 0.75rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        @media (max-width: 480px) {
            header h1 { font-size: 1.8rem; }
            .player-card { padding: 24px; }
            .info-section { padding: 20px; }
            .contacts-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
            .contact-label { min-width: auto; }
        }
    </style>
</head>
<body>

    <header>
        <h1>VBS Radio</h1>
        <p>Live Stream · 24/7</p>
    </header>

    <main class="player-card">
        <div id="loader" class="loader"></div>
        <div id="status" class="status-badge">Готов к воспроизведению</div>
        
        <div id="track-info">
            <span>Прямой эфир</span>
        </div>

        <audio id="audioPlayer" preload="none">
            <source src="http://185.173.93.132:8080/" type="audio/mpeg">
            Ваш браузер не поддерживает аудио элементы.
        </audio>

        <div class="controls">
            <button id="stopBtn" class="btn" title="Стоп" aria-label="Стоп">
                <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z"/></svg>
            </button>

            <button id="playBtn" class="btn btn-play" title="Воспроизвести" aria-label="Воспроизвести">
                <svg id="playIcon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                <svg id="pauseIcon" viewBox="0 0 24 24" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
            </button>

            <button id="refreshBtn" class="btn" title="Обновить поток" aria-label="Обновить">
                <svg viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
            </button>
        </div>

        <div class="volume-container">
            <span class="volume-icon">🔈</span>
            <input type="range" id="volumeSlider" min="0" max="1" step="0.05" value="0.8">
            <span class="volume-icon">🔊</span>
        </div>
    </main>

    <section class="info-section">
        <h2>О радиостанции</h2>
        <p>
            <strong>VBS Radio</strong> — сетевая радиостанция, работающая в режиме 24/7. 
            Мы транслируем джаз в различных его вариациях - от привычной "классики" до R'n'B и фолк джаза, а так же познавательные программы и радиоспектакли.
        </p>
        <p>
            Наша миссия — создать пространство для тех, кто ценит музыку. Мы объединяем 
            Владивосток и Приморье с мировой джазовой культурой и литературой.
        </p>
        <p class="tagline">
            Джазз и литература без границ. Эфир без перерывов.
        </p>
    </section>

    <section class="info-section">
        <h2>Анонсы эфира</h2>
        <div class="announce-grid">
            <div class="announce-card">
                <div class="announce-date">каждую ночь в 00:00</div>
                <div class="announce-title">"Ночные чтения"</div>
                <div class="announce-desc">Чтение детективов и научной фантастики начала и средины двацатого века, которая стала классикой.</div>
            </div>
            <div class="announce-card">
                <div class="announce-date">каждые два часа</div>
                <div class="announce-title">"Факты"</div>
                <div class="announce-desc">Познавательная программа "Факты" - интересные факты о мире и человечестве.</div>
            </div>
            
        </div>
    </section>

    <section class="info-section">
        <h2>Контакты</h2>
        <ul class="contacts-list">
            <li>
                <span class="contact-label">Email</span>
                <a href="mailto:vladivostokbs@gmail.com">vladivostokbs@gmail.com</a>
            </li>
           
            <li>
                <span class="contact-label">Телефон студии</span>
                <a href="tel:+7 (999) 617-69-51">+7 (999) 617-69-51</a>
            </li>
           
        </ul>

        <div class="socials">
            <a href="https://t.me/vbsmedia" class="social-btn">Telegram</a>
            
        </div>
    </section>

    <footer>
        <p>VBS Network | 2026</p>
        <p class="small">24/7 Live Broadcast</p>
    </footer>

    <script>
        const audio = document.getElementById('audioPlayer');
        const playBtn = document.getElementById('playBtn');
        const stopBtn = document.getElementById('stopBtn');
        const refreshBtn = document.getElementById('refreshBtn');
        const volumeSlider = document.getElementById('volumeSlider');
        const statusBadge = document.getElementById('status');
        const loader = document.getElementById('loader');
        const playIcon = document.getElementById('playIcon');
        const pauseIcon = document.getElementById('pauseIcon');

        const STREAM_URL = "http://185.173.93.132:8080/";

        audio.volume = volumeSlider.value;

        function togglePlay() {
            if (audio.paused) {
                if (!audio.src || audio.src === window.location.href) {
                    audio.src = STREAM_URL;
                }
                audio.play().catch(err => {
                    console.error('Ошибка воспроизведения:', err);
                    statusBadge.textContent = "Ошибка соединения";
                    statusBadge.classList.remove('online');
                    loader.style.display = "none";
                });
                statusBadge.textContent = "Подключение...";
                statusBadge.classList.remove('online');
                loader.style.display = "block";
            } else {
                audio.pause();
            }
        }

        function stopStream() {
            audio.pause();
            audio.removeAttribute('src');
            audio.load();
            updateUI();
            statusBadge.textContent = "Остановлено";
            statusBadge.classList.remove('online');
            loader.style.display = "none";
        }

        function updateUI() {
            if (audio.paused) {
                playIcon.style.display = "block";
                pauseIcon.style.display = "none";
                playBtn.setAttribute('title', 'Воспроизвести');
            } else {
                playIcon.style.display = "none";
                pauseIcon.style.display = "block";
                playBtn.setAttribute('title', 'Пауза');
            }
        }

        audio.addEventListener('play', updateUI);

        audio.addEventListener('playing', () => {
            statusBadge.textContent = "В эфире";
            statusBadge.classList.add('online');
            loader.style.display = "none";
            updateUI();
        });

        audio.addEventListener('waiting', () => {
            statusBadge.textContent = "Буферизация...";
            statusBadge.classList.remove('online');
            loader.style.display = "block";
        });

        audio.addEventListener('pause', () => {
            updateUI();
            if (audio.src && audio.src !== window.location.href) {
                statusBadge.textContent = "Пауза";
                statusBadge.classList.remove('online');
                loader.style.display = "none";
            }
        });

        audio.addEventListener('error', () => {
            statusBadge.textContent = "Поток недоступен";
            statusBadge.classList.remove('online');
            loader.style.display = "none";
            updateUI();
        });

        playBtn.addEventListener('click', togglePlay);
        stopBtn.addEventListener('click', stopStream);
        refreshBtn.addEventListener('click', () => {
            stopStream();
            setTimeout(togglePlay, 200);
        });

        volumeSlider.addEventListener('input', (e) => {
            audio.volume = e.target.value;
        });

        document.addEventListener('keydown', (e) => {
            if (e.code === "Space" && e.target.tagName !== 'INPUT') {
                e.preventDefault();
                togglePlay();
            }
        });
    </script>
</body>
</html>