---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>CrayMusic 1.26.5</title>
    <style>
        /* Текущая тема и Глобальные переменные */
        :root {
            --bg: #121212; --text: #fff; --accent: #a855f7; --accent-hover: #9333ea;
            --panel: #1e1e1e;
        }
        /* Тема Хэллоуин */
        body.theme-halloween {
            --bg: linear-gradient(180deg, #3d1c00 0%, #1a0b00 100%);
            --text: #ffb454; --accent: #ff6600; --panel: #2e1500;
        }
        /* Тема Нового года */
        body.theme-newyear {
            --bg: linear-gradient(180deg, #d8f0ff 0%, #a4dbff 100%);
            --text: #003b5c; --accent: #007acc; --panel: rgba(255, 255, 255, 0.7);
        }

        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-bottom: 90px; overflow-x: hidden; }
        
        /* Плеер */
        #player { position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel); padding: 15px; display: flex; align-items: center; gap: 15px; z-index: 1000; transition: all 0.3s ease; }
        #player.mini { width: 60px; height: 60px; border-radius: 50%; bottom: 20px; right: 20px; left: auto; padding: 0; justify-content: center; overflow: hidden; cursor: pointer; }
        
        .controls button { background: none; border: none; color: var(--text); font-size: 20px; cursor: pointer; }
        .controls button:hover { color: var(--accent); }
        
        /* 3D График (Имитация) */
        .chart-3d-container { display: flex; align-items: flex-end; height: 200px; gap: 10px; perspective: 1000px; }
        .bar-3d { width: 30px; background: linear-gradient(to top, #9333ea, #ec4899); transform: rotateX(20deg); box-shadow: -5px 5px 15px rgba(0,0,0,0.5); border-radius: 4px 4px 0 0; transition: height 0.5s; }

        /* Всплывающее окно LISTEN */
        #listen-check { display: none; position: fixed; top: 0; left: 0; right: 0; background: #ff004c; color: white; text-align: center; padding: 10px; z-index: 9999; font-weight: bold; }

        /* Всплывающее окно Рефералов */
        .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 2000; align-items: center; justify-content: center; }
        .modal-content { background: var(--panel); padding: 30px; border-radius: 12px; text-align: center; max-width: 400px; width: 90%; }
        .modal-content input { width: 100%; padding: 10px; margin: 15px 0; border-radius: 6px; border: 1px solid #444; background: #222; color: white; }
        .btn { background: var(--accent); color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; }

        /* Рамки и предметы */
        .rarity-1 { border: 2px solid gray; }
        .rarity-2 { border: 2px solid pink; }
        .rarity-3 { border: 2px solid purple; }
        .rarity-4 { border: 2px solid gold; box-shadow: 0 0 10px gold; }
        .rgb-frame { animation: rgbBorder 3s infinite linear; border: 3px solid transparent; border-radius: 50%; }
        @keyframes rgbBorder { 0% { border-color: red; } 33% { border-color: lime; } 66% { border-color: blue; } 100% { border-color: red; } }

        /* Адаптив для телефона */
        @media (max-width: 768px) {
            #player { flex-direction: column; padding: 10px; }
            .modal-content { width: 95%; }
        }
    </style>
</head>
<body>

    <!-- Плашка LISTEN проверки -->
    <div id="listen-check">Вы на сайте? Окно закроется через <span id="listen-timer">150</span> сек. <button onclick="confirmListen()" class="btn" style="margin-left: 10px; padding: 5px 10px;">Я ТУТ</button></div>

    <!-- Модалка ввода реферального кода -->
    <div id="ref-modal" class="modal">
        <div class="modal-content">
            <h2>Добро пожаловать в CrayMusic!</h2>
            <p>Введите код пригласившего (если есть), чтобы получить 100 монет!</p>
            <input type="text" id="ref-code-input" placeholder="Код (например X5F9A)" maxlength="8">
            <button class="btn" onclick="submitRef()">Подтвердить</button>
            <button class="btn" style="background: #444; margin-top: 10px;" onclick="document.getElementById('ref-modal').style.display='none'">У меня нет кода</button>
        </div>
    </div>

    <!-- Основной контент -->
    <div style="padding: 20px;">
        <h1 id="logo">CrayMusic <span style="font-size: 12px; color: gray; border: 1px solid gray; padding: 2px 5px; border-radius: 4px;">1.26.5</span></h1>
        
        <!-- Меню с новыми вкладками -->
        <div style="display: flex; gap: 15px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 10px;">
            <button class="btn">Главная</button>
            <button class="btn">Чарты</button>
            <button class="btn">Задания</button>
            <button class="btn">Магазин</button>
            <button class="btn">Азарт (18+)</button>
            <button class="btn">Уведомления</button>
            <button class="btn">Профиль</button>
        </div>

        <div id="main-content">
            <!-- Пример 3D Графика -->
            <h3>Твой прогресс (Баллы за неделю)</h3>
            <div class="chart-3d-container">
                <div class="bar-3d" style="height: 40%;"></div>
                <div class="bar-3d" style="height: 60%;"></div>
                <div class="bar-3d" style="height: 30%;"></div>
                <div class="bar-3d" style="height: 90%;"></div>
                <div class="bar-3d" style="height: 75%;"></div>
            </div>

            <!-- Зона загрузки трека (Драфт) -->
            <div style="margin-top: 30px; background: var(--panel); padding: 20px; border-radius: 12px;">
                <h3>Загрузить трек</h3>
                <input type="text" placeholder="Название" style="width: 100%; padding: 10px; margin-bottom: 10px; background: #111; color: white; border: none; border-radius: 6px;">
                <select style="width: 100%; padding: 10px; margin-bottom: 10px; background: #111; color: white; border: none; border-radius: 6px;">
                    <option value="none" disabled selected>-- Выберите Настроение (Обязательно) --</option>
                    <option value="sad">Грустная</option>
                    <option value="happy">Веселая</option>
                    <option value="aggressive">Агрессивная</option>
                    <option value="sk">SK</option>
                </select>
                <select style="width: 100%; padding: 10px; margin-bottom: 10px; background: #111; color: white; border: none; border-radius: 6px;">
                    <option value="none" disabled selected>-- Версия трека (Обязательно) --</option>
                    <option value="original">Оригинал</option>
                    <option value="remix">Ремикс</option>
                    <option value="slowed">Slowed</option>
                    <option value="speedup">Speed up</option>
                </select>
                <label><input type="checkbox" id="ai-check"> Сгенерировано ИИ (Харизма и Сведение = 5)</label><br><br>
                <button class="btn">Загрузить</button>
            </div>
        </div>
    </div>

    <!-- Плеер -->
    <div id="player">
        <img src="placeholder.jpg" width="50" height="50" style="border-radius: 6px;" id="player-cover">
        <div style="flex-grow: 1;">
            <div style="font-weight: bold;">Трек не выбран</div>
            <div style="font-size: 12px; color: gray;">Артист</div>
        </div>
        <div class="controls">
            <button title="Скорость" onclick="changeSpeed()">1x</button>
            <button title="Предыдущий (Стрелка Влево)">⏮</button>
            <button title="Пауза (Пробел)">⏯</button>
            <button title="Следующий (Стрелка Вправо, N)">⏭</button>
            <button title="Лайк (L)">❤️</button>
            <button onclick="toggleMiniPlayer()">Свернуть</button>
        </div>
        <div id="visualizer" style="height: 20px; flex-grow: 1; display: flex; gap: 2px; align-items: flex-end;">
            <!-- Полоски визуала -->
        </div>
    </div>

    <script>
        // Горячие клавиши (Шорткаты)
        document.addEventListener('keydown', (e) => {
            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
            if (e.code === 'Space') { e.preventDefault(); /* Play/Pause logic */ }
            if (e.code === 'KeyL') { /* Like logic */ }
            if (e.code === 'KeyN' || e.code === 'ArrowRight') { /* Next logic */ }
            if (e.code === 'ArrowLeft') { /* Prev logic */ }
        });

        // Показ рефералки при первом входе
        if (!localStorage.getItem('refShown')) {
            document.getElementById('ref-modal').style.display = 'flex';
            localStorage.setItem('refShown', 'true');
        }

        function submitRef() {
            const code = document.getElementById('ref-code-input').value;
            // Fetch API logic here
            alert('Код ' + code + ' применен! +100 монет.');
            document.getElementById('ref-modal').style.display = 'none';
        }

        // Мини плеер
        function toggleMiniPlayer() {
            document.getElementById('player').classList.toggle('mini');
        }

        // Плашка Listen (когда на трек нажимают "СЛУШАЕМ")
        let listenTimerInterval;
        function triggerListenCheck() {
            document.getElementById('listen-check').style.display = 'block';
            let time = 150; // 2 минуты 30 сек
            document.getElementById('listen-timer').innerText = time;
            listenTimerInterval = setInterval(() => {
                time--;
                document.getElementById('listen-timer').innerText = time;
                if(time <= 0) {
                    clearInterval(listenTimerInterval);
                    document.getElementById('listen-check').style.display = 'none';
                    alert('Время вышло! Трек удален из очереди.');
                }
            }, 1000);
        }

        function confirmListen() {
            clearInterval(listenTimerInterval);
            document.getElementById('listen-check').style.display = 'none';
        }

        // Push-уведомления браузера
        if ('Notification' in window && Notification.permission !== 'granted') {
            Notification.requestPermission();
        }
        function sendBrowserNotification(title, body) {
            if (Notification.permission === 'granted') {
                new Notification(title, { body: body, icon: '/logo.png' });
            }
        }
    </script>
</body>
</html>