<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(to bottom right, beige, darkcyan);
            height: 100vh;
            overflow: hidden;
        }

        .container {
            width: 100%;
            height: 100vh;
            margin: auto;
            padding-top: 100px;
            background: inherit;
        }

        .body {
            width: 340px;
            height: 420px;
            background-color: rgba(0, 0, 0, .8);
            border-radius: 20px 5px;
            box-shadow: 3px 3px 15px black;
            margin: auto;
        }

        .singer {
            width: 70%;
            height: 330px;
            float: left;
        }

        .singer > .img {
            width: 200px;
            height: 240px;
            background: darkcyan;
            border-radius: 20px;
            margin: 20px 0 0 -20px;
            overflow: hidden;
            color: darkcyan;
            border: 1px solid;
            box-shadow: 2px 2px 15px;
            background-size: cover;
            background-position: center;
            float: left;
            position: relative;
        }

        .img video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
        }

        .extentions {
            width: 40px;
            height: 240px;
            float: left;
            margin: 20px 0 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .extentions > i {
            font-size: 17pt;
            color: white;
            opacity: .8;
            text-shadow: 1px 1px 3px black;
            cursor: pointer;
        }

        .extentions > i:hover {
            opacity: .6;
        }

        #like {
            color: darkcyan;
        }

        .singer > .names {
            width: 100%;
            height: 70px;
            padding: 10px;
            font-family: fantasy;
            float: left;
            text-shadow: 1px 1px 3px black;
        }

        #singer-name {
            font-size: 16pt;
            color: white;
        }

        #song-name {
            font-size: 20pt;
            color: darkcyan;
            font-weight: lighter;
        }

        .playing {
            width: 100%;
            height: 70px;
            float: left;
        }

        .playLine {
            display: flex;
            overflow: hidden;
        }

        .range {
            width: 100%;
            height: 55px;
            display: flex;
        }

        .cell {
            width: 1px;
            height: 2px;
            background: white;
            margin-right: .5px;
            position: relative;
            align-self: baseline;
            top: 22px;
            cursor: pointer;
        }

        .activeCell {
            background: darkcyan;
            transition: 5s;
        }

        .playLine > i {
            color: white;
            border: 2px solid;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 5px 0 0 8px;
            font-size: 20pt;
            padding: 10px 15px;
            text-shadow: 2px 2px 4px black;
            background: rgba(222, 222, 222, .5);
            z-index: 1;
        }

        .playLine i:hover {
            text-shadow: 3px 3px 4px gray;
            color: wheat;
            cursor: pointer;
        }

        .playLine > .fa-pause {
            color: darkcyan;
            padding-left: 12px;
            display: none;
        }

        .playLine i:active {
            opacity: .9;
        }

        .time {
            max-width: 150px;
            height: 20px;
            text-align: center;
            padding: 2px;
            border-radius: 3px;
            margin: -20px 0 0 60px;
            font-size: 11pt;
            font-family: sans-serif;
            color: white;
            text-shadow: 2px 2px 4px black;
            background: darkcyan;
            overflow: hidden;
        }

        .copyright {
            text-align: center;
            font-size: 9pt; /* Уменьшен размер шрифта */
            color: rgba(255, 255, 255, 0.7); /* Бледный цвет текста */
            margin-top: 5px;
            font-family: sans-serif;
        }

        .volume {
            width: 90px;
            float: right;
            display: flex;
            align-items: center;
            margin-right: 10px;
        }

        .volume i {
            text-shadow: 2px 2px 4px black;
            cursor: pointer;
            display: block;
            width: 18px;
        }

        .fa-volume {
            margin-top: -3px;
            font-size: 14pt;
            color: darkcyan;
        }

        .fa-volume-slash {
            color: white;
            font-size: 10pt;
        }

        .volCell {
            width: 5px;
            background: white;
            margin: -9px 4px 0 -3px;
            border-radius: 5px;
            align-self: baseline;
            cursor: pointer;
            transition: .5s;
        }

        .activeVolCell {
            background: darkcyan;
            transition: .5s;
        }

        .muted {
            opacity: .7;
        }

        .color-setting {
            width: 25px;
            height: 33px;
            float: left;
            margin: 5px 0 0 20px;
            border-radius: 0 0 5px 5px;
            background: darkcyan;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 1px 1px 5px black;
            padding-left: 5px;
            overflow: hidden;
        }

        .color-setting:hover {
            opacity: .9;
        }

        .color-setting > i {
            color: white;
            margin-top: 10px;
            font-weight: lighter;
            float: left;
        }

        .color-setting > i:hover {
            color: black;
        }

        .theme {
            width: 25px;
            height: 80px;
            float: right;
            margin: -20px 10px 0 0;
            background: white;
            transform: rotate(30deg);
            box-shadow: 1px 1px 3px black;
            display: none;
        }

        .theme:hover {
            box-shadow: 2px 2px 3px black;
        }

        .theme:nth-child(1) {
            background: darkcyan;
        }

        .theme:nth-child(2) {
            background: darkred;
        }

        .theme:nth-child(3) {
            background: yellow;
        }

        .theme:nth-child(4) {
            background: orange;
        }

        .theme:nth-child(5) {
            background: mediumorchid;
        }

        .other_songs {
            min-width: 50px;
            height: 330px;
            float: right;
            margin-right: -10px;
            color: white;
        }

        .other_cont {
            width: 50px;
            height: 100%;
            float: left;
            padding-top: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .next,
        .prev {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: darkcyan;
            box-shadow: 1px 1px 3px black;
            margin: 5px 5px 5px 10px;
            font-size: 18pt;
            padding-top: 8px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .next {
            margin-top: 10px;
        }

        .prev {
            margin-bottom: 10px;
        }

        .prev:hover,
        .next:hover {
            box-shadow: -1px 1px 3px gray;
        }

        .alert {
            width: 0px;
            height: 100px;
            background: darkcyan;
            position: absolute;
            top: 150px;
            border-radius: 0 20px 20px 0;
            text-align: center;
            font-size: 18pt;
            font-family: fantasy;
            color: antiquewhite;
            text-shadow: 2px 2px 3px black;
            box-shadow: 2px 2px 10px black;
            padding-top: 15px;
            overflow: hidden;
        }

        .alert > span {
            display: none;
        }

        .vignette {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            border: 5px solid darkcyan;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }

        .vignette img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .volume-slider {
            width: 60px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="body">
            <div class="singer">
                <div class="img">
                    <video autoplay loop muted>
                        <source src="https://assets.mixkit.co/videos/4669/4669-720.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <div class="extentions">
                    <i class="fas fa-heart" id="like" title="like" onclick="window.open('https://t.me/MuP_TAHKOB_CEPBEP_RU56', '_blank')"></i>
                    <i class="fas fa-heart" id="dislike" title="disLike" onclick="window.open('https://t.me/MuP_TAHKOB_CEPBEP_RU56', '_blank')"></i>
                    <i class="fa fa-share-square" title="share" id="share-btn"></i>
                    <i class="fas fa-comment" title="comment" onclick="window.open('https://t.me/MuP_TAHKOB_CEPBEP_RU56', '_blank')"></i>
                    <i class="fas fa-download" title="download"></i>
                </div>
                <div class="names">
                    <span id="song-name"></span>
                    <br>
                    <span id="singer-name"></span>
                </div>
            </div>
            <div class="other_songs">
                <div class="other_cont">
                    <div class="prev">
                        <i class="fas fa-backward" title="назад"></i>
                    </div>
                    <div class="next">
                        <i class="fas fa-forward" title="вперед"></i>
                    </div>
                </div>
            </div>
            <div class="playing">
                <hr>
                <div>
                    <div class="playLine">
                        <audio></audio>
                        <i class="fas fa-play"></i>
                        <i class="fas fa-pause"></i>
                        <div class="range">
                            <div class="cell"></div>
                            <div class="cell" style="height:2px"></div>
                            <div class="cell" style="height:4px"></div>
                        </div>
                    </div>
                    <div class="volume">
                        <i class="fas fa-volume-slash" id="volume-off" title="ummute"></i>
                        <i class="fas fa-volume" id="volume-on" title="mute"></i>
                        <input type="range" min="0" max="1" step="0.1" value="1" class="volume-slider" id="volume-slider">
                    </div>
                    <div class="time">
                        <span id="current-time"></span>
                    </div>
                    <div class="copyright">
                        Copyright © 2022-2025 CEPBEP_RU56 Все права защищены.
                    </div>
                </div>
            </div>
            <div class="color-setting">
                <i class="fas fa-palette" alt="off"></i>
                <div class="themes">
                    <div class="theme"></div>
                    <div class="theme"></div>
                    <div class="theme"></div>
                    <div class="theme"></div>
                    <div class="theme"></div>
                </div>
            </div>
        </div>
        <div class="alert">
            <span>Feature doesn`t developed yet.</span>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            var radioStations = [
                { name: "Record", url: "https://radiorecord.hostingradio.ru/rr_main96.aacp" },
                { name: "Tiesto", url: "https://radiorecord.hostingradio.ru/tiesto96.aacp" },
                { name: "David Guetta", url: "https://radiorecord.hostingradio.ru/guetta96.aacp" },
                { name: "Armin van Buuren", url: "https://radiorecord.hostingradio.ru/armin96.aacp" },
                { name: "Russian Mix", url: "https://radiorecord.hostingradio.ru/rus96.aacp" },
                { name: "Супердискотека 90-х", url: "https://radiorecord.hostingradio.ru/sd9096.aacp" },
                { name: "Russian Hits", url: "https://radiorecord.hostingradio.ru/russianhits64.aacp" },
                { name: "Chill-Out", url: "https://radiorecord.hostingradio.ru/chil96.aacp" },
                { name: "Deep", url: "https://radiorecord.hostingradio.ru/deep96.aacp" },
                { name: "Megamix", url: "https://radiorecord.hostingradio.ru/mix96.aacp" },
                { name: "Remix", url: "https://radiorecord.hostingradio.ru/rmx96.aacp" },
                { name: "Рекорд 00-х", url: "https://radiorecord.hostingradio.ru/200096.aacp" },
                { name: "Big Hits", url: "https://radiorecord.hostingradio.ru/bighits96.aacp" },
                { name: "Маятник Фуко", url: "https://radiorecord.hostingradio.ru/mf96.aacp" },
                { name: "Chill House", url: "https://radiorecord.hostingradio.ru/chillhouse96.aacp" },
                { name: "Trancemission", url: "https://radiorecord.hostingradio.ru/tm96.aacp" },
                { name: "Record 80-х", url: "https://radiorecord.hostingradio.ru/198096.aacp" },
                { name: "Rock", url: "https://radiorecord.hostingradio.ru/rock96.aacp" },
                { name: "Russian Gold", url: "https://radiorecord.hostingradio.ru/russiangold96.aacp" },
                { name: "Pirate Station", url: "https://radiorecord.hostingradio.ru/ps96.aacp" },
                { name: "Innocence", url: "https://radiorecord.hostingradio.ru/ibiza96.aacp" },
                { name: "Party 24/7", url: "https://radiorecord.hostingradio.ru/party96.aacp" },
                { name: "Record Gold", url: "https://radiorecord.hostingradio.ru/gold96.aacp" },
                { name: "Summer Dance", url: "https://radiorecord.hostingradio.ru/summerparty96.aacp" },
                { name: "На Хайпе", url: "https://radiorecord.hostingradio.ru/hype96.aacp" },
                { name: "Phonk", url: "https://radiorecord.hostingradio.ru/phonk96.aacp" },
                { name: "Руки Вверх!", url: "https://radiorecord.hostingradio.ru/rv96.aacp" },
                { name: "Rap Hits", url: "https://radiorecord.hostingradio.ru/rap96.aacp" },
                { name: "Rap Classics", url: "https://radiorecord.hostingradio.ru/rapclassics96.aacp" },
                { name: "Trance Classics", url: "https://radiorecord.hostingradio.ru/trancehits96.aacp" },
                { name: "VIP House", url: "https://radiorecord.hostingradio.ru/vip96.aacp" },
                { name: "Bass House", url: "https://radiorecord.hostingradio.ru/jackin96.aacp" },
                { name: "Organic", url: "https://radiorecord.hostingradio.ru/organic96.aacp" },
                { name: "Black Rap", url: "https://radiorecord.hostingradio.ru/yo96.aacp" },
                { name: "Summer Lounge", url: "https://radiorecord.hostingradio.ru/summerlounge64.aacp" },
                { name: "D'n'B Classics", url: "https://radiorecord.hostingradio.ru/drumhits96.aacp" },
                { name: "10's Dance", url: "https://radiorecord.hostingradio.ru/201096.aacp" },
                { name: "EDM", url: "https://radiorecord.hostingradio.ru/club96.aacp" },
                { name: "Lo-Fi", url: "https://radiorecord.hostingradio.ru/lofi96.aacp" },
                { name: "Workout", url: "https://radiorecord.hostingradio.ru/workout96.aacp" },
                { name: "Neurofunk", url: "https://radiorecord.hostingradio.ru/neurofunk96.aacp" },
                { name: "Breaks", url: "https://radiorecord.hostingradio.ru/brks96.aacp" },
                { name: "Tropical", url: "https://radiorecord.hostingradio.ru/trop96.aacp" },
                { name: "Tech House", url: "https://radiorecord.hostingradio.ru/techouse96.aacp" },
                { name: "Trap", url: "https://radiorecord.hostingradio.ru/trap96.aacp" },
                { name: "Liquid Funk", url: "https://radiorecord.hostingradio.ru/liquidfunk96.aacp" },
                { name: "Dubstep", url: "https://radiorecord.hostingradio.ru/dub96.aacp" },
                { name: "House Hits", url: "https://radiorecord.hostingradio.ru/househits96.aacp" },
                { name: "GOA/PSY", url: "https://radiorecord.hostingradio.ru/goa96.aacp" },
                { name: "Trancehouse", url: "https://radiorecord.hostingradio.ru/trancehouse96.aacp" },
                { name: "Ambient", url: "https://radiorecord.hostingradio.ru/ambient96.aacp" },
                { name: "TOP 100 EDM", url: "https://radiorecord.hostingradio.ru/top100edm96.aacp" },
                { name: "Dream Dance", url: "https://radiorecord.hostingradio.ru/dream96.aacp" },
                { name: "Techno", url: "https://radiorecord.hostingradio.ru/techno96.aacp" },
                { name: "Live DJ-sets", url: "https://radiorecord.hostingradio.ru/livedjsets96.aacp" },
                { name: "70's Dance", url: "https://radiorecord.hostingradio.ru/197096.aacp" },
                { name: "Technopop", url: "https://radiorecord.hostingradio.ru/technopop96.aacp" },
                { name: "Minimal/Tech", url: "https://radiorecord.hostingradio.ru/mini96.aacp" },
                { name: "Dream Pop", url: "https://radiorecord.hostingradio.ru/dreampop96.aacp" },
                { name: "House Classics", url: "https://radiorecord.hostingradio.ru/houseclss96.aacp" },
                { name: "Uplifting", url: "https://radiorecord.hostingradio.ru/uplift96.aacp" },
                { name: "Eurodance", url: "https://radiorecord.hostingradio.ru/eurodance96.aacp" },
                { name: "60's Dance", url: "https://radiorecord.hostingradio.ru/cadillac96.aacp" },
                { name: "Future Rave", url: "https://radiorecord.hostingradio.ru/futurerave96.aacp" },
                { name: "Future House", url: "https://radiorecord.hostingradio.ru/fut96.aacp" },
                { name: "UK Garage", url: "https://radiorecord.hostingradio.ru/ukgarage96.aacp" },
                { name: "Reggae", url: "https://radiorecord.hostingradio.ru/reggae96.aacp" },
                { name: "Disco/Funk", url: "https://radiorecord.hostingradio.ru/discofunk96.aacp" },
                { name: "Dancecore", url: "https://radiorecord.hostingradio.ru/dc96.aacp" },
                { name: "Hard Bass", url: "https://radiorecord.hostingradio.ru/hbass96.aacp" },
                { name: "Electro", url: "https://radiorecord.hostingradio.ru/elect96.aacp" },
                { name: "Old School", url: "https://radiorecord.hostingradio.ru/pump96.aacp" },
                { name: "Progressive", url: "https://radiorecord.hostingradio.ru/progr96.aacp" },
                { name: "EDM Classics", url: "https://radiorecord.hostingradio.ru/edmhits96.aacp" },
                { name: "Hardstyle", url: "https://radiorecord.hostingradio.ru/teo96.aacp" },
                { name: "Darkside", url: "https://radiorecord.hostingradio.ru/darkside96.aacp" },
                { name: "Synthwave", url: "https://radiorecord.hostingradio.ru/synth96.aacp" },
                { name: "Latina Dance", url: "https://radiorecord.hostingradio.ru/latina96.aacp" },
                { name: "Tecktonik", url: "https://radiorecord.hostingradio.ru/tecktonik96.aacp" },
                { name: "Future Bass", url: "https://radiorecord.hostingradio.ru/fbass96.aacp" },
                { name: "Гоп FM", url: "https://radiorecord.hostingradio.ru/gop96.aacp" },
                { name: "Midtempo", url: "https://radiorecord.hostingradio.ru/mt96.aacp" },
                { name: "Jungle", url: "https://radiorecord.hostingradio.ru/jungle96.aacp" },
                { name: "Hypnotic", url: "https://radiorecord.hostingradio.ru/hypno96.aacp" },
                { name: "Rave FM", url: "https://radiorecord.hostingradio.ru/rave96.aacp" },
                { name: "Moombahton", url: "https://radiorecord.hostingradio.ru/mmbt96.aacp" },
                { name: "2-step", url: "https://radiorecord.hostingradio.ru/2step96.aacp" },
                { name: "Медляк FM", url: "https://radiorecord.hostingradio.ru/mdl96.aacp" },
                { name: "Веснушка FM", url: "https://radiorecord.hostingradio.ru/deti96.aacp" },
                { name: "Groove/Tribal", url: "https://radiorecord.hostingradio.ru/groovetribal96.aacp" },
                { name: "Гастарбайтер FM", url: "https://radiorecord.hostingradio.ru/gast96.aacp" },
                { name: "Нафталин FM", url: "https://radiorecord.hostingradio.ru/naft96.aacp" },
                { name: "Симфония FM", url: "https://radiorecord.hostingradio.ru/symph96.aacp" },
                { name: "Complextro", url: "https://radiorecord.hostingradio.ru/complextro96.aacp" },
                { name: "Christmas Chill", url: "https://radiorecord.hostingradio.ru/christmaschill96.aacp" },
                { name: "Christmas", url: "https://radiorecord.hostingradio.ru/christmas96.aacp" },
                { name: "Русская Зима", url: "https://radiorecord.hostingradio.ru/ruszima96.aacp" }
            ];

            var videoBackgrounds = [
                "https://assets.mixkit.co/videos/4669/4669-720.mp4",
                "https://assets.mixkit.co/videos/41576/41576-720.mp4",
                "https://assets.mixkit.co/videos/1610/1610-720.mp4",
                "https://assets.mixkit.co/videos/2213/2213-720.mp4",
                "https://assets.mixkit.co/videos/5016/5016-720.mp4",
                "https://assets.mixkit.co/videos/4633/4633-720.mp4",
                "https://assets.mixkit.co/videos/41537/41537-720.mp4",
                "https://assets.mixkit.co/videos/4078/4078-720.mp4",
                "https://assets.mixkit.co/videos/1954/1954-720.mp4",
                "https://assets.mixkit.co/videos/18305/18305-720.mp4",
                "https://assets.mixkit.co/videos/43153/43153-720.mp4",
                "https://assets.mixkit.co/videos/3300/3300-720.mp4"
            ];

            var audio = new Audio();
            var currentStation = 0;

            function playStation(index) {
                currentStation = index;
                audio.src = radioStations[index].url;
                audio.play();
                $('#song-name').text(radioStations[index].name);
                $('#singer-name').text("Radio Station");
                $('.fa-play').hide();
                $('.fa-pause').show();

                var videoIndex = index % videoBackgrounds.length;
                $('.img video').attr('src', videoBackgrounds[videoIndex]);
            }

            $('.fa-play').click(function () {
                $(this).hide();
                $('.fa-pause').show();
                audio.play();
            });

            $('.fa-pause').click(function () {
                $(this).hide();
                $('.fa-play').show();
                audio.pause();
            });

            $('.next').click(function () {
                currentStation = (currentStation + 1) % radioStations.length;
                playStation(currentStation);
            });

            $('.prev').click(function () {
                currentStation = (currentStation - 1 + radioStations.length) % radioStations.length;
                playStation(currentStation);
            });

            playStation(0);

            $('#volume-off').hide();
            $('#volume-on').click(function () {
                audio.muted = true;
                $(this).hide();
                $('#volume-off').show();
            });

            $('#volume-off').click(function () {
                audio.muted = false;
                $(this).hide();
                $('#volume-on').show();
            });

            $('#volume-slider').on('input', function () {
                audio.volume = $(this).val();
            });

            var themes = ['darkcyan', 'darkred', 'yellow', 'orange', 'mediumorchid'];
            $('.theme').click(function () {
                var index = $(this).index();
                $('body').css('background', 'linear-gradient(to bottom right, beige, ' + themes[index] + ')');
                $('.color-setting').css('background-color', themes[index]);
                $('.theme').hide();
                $('.color-setting').animate({ width: '25px' }, 500);
                $('.color-setting i').attr('alt', 'off');
            });

            $('.color-setting i').click(function () {
                if ($(this).attr('alt') == "off") {
                    $('.theme').fadeIn();
                    $('.color-setting').animate({ width: '220px' }).css({ backgroundColor: 'gray' });
                    $(this).attr('alt', "on");
                } else {
                    $('.theme').fadeOut();
                    $('.color-setting').animate({ width: '25px' }, 500).css({ backgroundColor: themes[currentTheme] });
                    $(this).attr('alt', "off");
                }
            });

            $('#share-btn').click(function () {
                window.open('https://trovo.live/s/_CEPBEP_', '_blank');

                var vignette = $('<div class="vignette"></div>');
                $('body').append(vignette);

                vignette.fadeIn();

                setTimeout(function () {
                    vignette.fadeOut(function () {
                        $(this).remove();
                    });
                }, 3000);
            });

            // Функция для отображения реального времени
            function updateTime() {
                var now = new Date();
                var hours = now.getHours().toString().padStart(2, '0');
                var minutes = now.getMinutes().toString().padStart(2, '0');
                var seconds = now.getSeconds().toString().padStart(2, '0');
                var date = now.toLocaleDateString();
                $('#current-time').text(`${date} ${hours}:${minutes}:${seconds}`);
            }

            // Обновляем время каждую секунду
            setInterval(updateTime, 1000);
            updateTime(); // Инициализация времени сразу
        });
    </script>
</body>
</html>