{"id":13,"date":"2024-07-18T18:32:40","date_gmt":"2024-07-18T18:32:40","guid":{"rendered":"https:\/\/danpenradio.net\/?page_id=13"},"modified":"2026-05-22T09:52:53","modified_gmt":"2026-05-22T09:52:53","slug":"home","status":"publish","type":"page","link":"https:\/\/danpenradio.net\/","title":{"rendered":"Radio"},"content":{"rendered":"\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@500;700&#038;family=Inter:wght@300;400;600&#038;display=swap\" rel=\"stylesheet\">\n\n<div class=\"wp-danpen-player-wrapper\">\n    <div class=\"player-container\" id=\"playerCard\">\n        <span class=\"status-tag\" id=\"statusText\">Off-Air<\/span>\n        \n        <div class=\"vinyl-area\">\n            <div class=\"vinyl\">\n                <div class=\"vinyl-center\">\n                    <svg viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <circle cx=\"256\" cy=\"256\" r=\"236\" fill=\"#ffffff\" stroke=\"#000000\" stroke-width=\"40\"\/>\n                        <path d=\"M178 148h168v32l-102 184h-48l94-168h-112v-48z\" fill=\"#000000\"\/>\n                    <\/svg>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"wave-container\">\n            <div class=\"wave-bar\"><\/div>\n            <div class=\"wave-bar\"><\/div>\n            <div class=\"wave-bar\"><\/div>\n            <div class=\"wave-bar\"><\/div>\n            <div class=\"wave-bar\"><\/div>\n            <div class=\"wave-bar\"><\/div>\n        <\/div>\n\n        <h2 class=\"station-name\">DanPen Radio<\/h2>\n        <p class=\"track-info\">TECHNO &#038; HOUSE \/ 24-7<\/p>\n\n        <div class=\"controls\">\n            <button class=\"btn-play\" id=\"wpPlayBtn\" title=\"Play\/Pause\">\n                <svg id=\"wpPlayIcon\" viewBox=\"0 0 24 24\">\n                    <path d=\"M8 5v14l11-7z\"\/>\n                <\/svg>\n            <\/button>\n        <\/div>\n\n        <div class=\"volume-container\">\n            <svg class=\"volume-icon\" viewBox=\"0 0 24 24\">\n                <path d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.25-2.5-4.01v8.01c1.48-.76 2.5-2.24 2.5-4.01zm-2.5-7.03v2.02c2.39.81 4.17 3.08 4.17 5.76s-1.78 4.96-4.17 5.76v2.02c3.5-.86 6.17-4.01 6.17-7.78s-2.67-6.92-6.17-7.78z\"\/>\n            <\/svg>\n            <input type=\"range\" class=\"volume-slider\" id=\"wpVolumeControl\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.8\">\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    \/* \u0418\u0437\u043e\u043b\u0438\u0440\u0430\u043c\u0435 \u0441\u0442\u0438\u043b\u043e\u0432\u0435\u0442\u0435 \u043d\u0430 \u043f\u043b\u0435\u044a\u0440\u0430, \u0437\u0430 \u0434\u0430 \u043d\u0435 \u0441\u0438 \u043f\u0440\u0435\u0447\u0430\u0442 \u0441 \u0442\u0435\u043c\u0430\u0442\u0430 \u043d\u0430 WordPress *\/\n    .wp-danpen-player-wrapper {\n        --bg-color: #080a10;\n        --panel-bg: #0f131e;\n        --accent-glow: #00d2ff;\n        --accent-purple: #7000ff;\n        --text-main: #ffffff;\n        --text-muted: #4b5563;\n        \n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 20px 0;\n        width: 100%;\n    }\n\n    .wp-danpen-player-wrapper * {\n        box-sizing: border-box;\n    }\n\n    .wp-danpen-player-wrapper .player-container {\n        font-family: 'Inter', sans-serif;\n        background: var(--panel-bg);\n        border: 1px solid rgba(0, 210, 255, 0.08);\n        border-radius: 24px;\n        padding: 40px;\n        width: 100%;\n        max-width: 380px;\n        text-align: center;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6),\n                    0 0 40px rgba(0, 210, 255, 0.03);\n        backdrop-filter: blur(10px);\n        transition: all 0.4s ease;\n    }\n\n    .wp-danpen-player-wrapper .player-container:hover {\n        border-color: rgba(0, 210, 255, 0.25);\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7),\n                    0 0 50px rgba(0, 210, 255, 0.08);\n    }\n\n    .wp-danpen-player-wrapper .vinyl-area {\n        position: relative;\n        width: 200px;\n        height: 200px;\n        margin: 0 auto 30px;\n    }\n\n    .wp-danpen-player-wrapper .vinyl {\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n        background: radial-gradient(circle, var(--bg-color) 30%, #131927 31%, #0b0f18 60%, #000 100%);\n        border: 4px solid rgba(255, 255, 255, 0.02);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 10px 25px rgba(0,0,0,0.5);\n        position: relative;\n    }\n\n    .wp-danpen-player-wrapper .vinyl::after {\n        content: '';\n        position: absolute;\n        top: -2px; left: -2px; right: -2px; bottom: -2px;\n        border-radius: 50%;\n        border: 2px solid transparent;\n        background: linear-gradient(45deg, var(--accent-glow), var(--accent-purple)) border-box;\n        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n        -webkit-mask-composite: destination-out;\n        mask-composite: exclude;\n        opacity: 0.3;\n        transition: opacity 0.5s ease;\n    }\n\n    .wp-danpen-player-wrapper .player-container.playing .vinyl::after {\n        opacity: 1;\n        animation: wpNeonPulse 2s infinite alternate;\n    }\n\n    \/* \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043d\u0430 \u043a\u0443\u0442\u0438\u044f\u0442\u0430 \u043d\u0430 \u043b\u043e\u0433\u043e\u0442\u043e *\/\n    .wp-danpen-player-wrapper .vinyl-center {\n        width: 65px;\n        height: 65px;\n        background: #ffffff;\n        border-radius: 50%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);\n        transition: all 0.5s ease;\n        z-index: 2;\n        overflow: hidden;\n        padding: 2px;\n    }\n\n    .wp-danpen-player-wrapper .vinyl-center svg {\n        width: 100%;\n        height: 100%;\n        display: block;\n    }\n\n    \/* \u041a\u043e\u0433\u0430\u0442\u043e \u0440\u0430\u0434\u0438\u043e\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0438, \u043b\u043e\u0433\u043e\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0432\u0430 \u043b\u0435\u043a \u0441\u0438\u043d\u043a\u0430\u0432 \u043d\u0435\u043e\u043d\u043e\u0432 \u043e\u0442\u0431\u043b\u044f\u0441\u044a\u043a \u043e\u043a\u043e\u043b\u043e \u0441\u0435\u0431\u0435 \u0441\u0438 *\/\n    .wp-danpen-player-wrapper .player-container.playing .vinyl-center {\n        box-shadow: 0 0 25px rgba(0, 210, 255, 0.7);\n    }\n\n    .wp-danpen-player-wrapper .wave-container {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end;\n        gap: 4px;\n        height: 30px;\n        margin-bottom: 25px;\n        opacity: 0.2;\n        transition: opacity 0.3s ease;\n    }\n\n    .wp-danpen-player-wrapper .player-container.playing .wave-container {\n        opacity: 1;\n    }\n\n    .wp-danpen-player-wrapper .wave-bar {\n        width: 4px;\n        height: 5px;\n        background: var(--accent-glow);\n        border-radius: 2px;\n    }\n\n    .wp-danpen-player-wrapper .player-container.playing .wave-bar {\n        animation: wpBounce 0.8s infinite alternate ease-in-out;\n    }\n\n    .wp-danpen-player-wrapper .wave-bar:nth-child(2) { animation-delay: 0.1s; }\n    .wp-danpen-player-wrapper .wave-bar:nth-child(3) { animation-delay: 0.3s; }\n    .wp-danpen-player-wrapper .wave-bar:nth-child(4) { animation-delay: 0.5s; }\n    .wp-danpen-player-wrapper .wave-bar:nth-child(5) { animation-delay: 0.2s; }\n    .wp-danpen-player-wrapper .wave-bar:nth-child(6) { animation-delay: 0.4s; }\n\n    @keyframes wpBounce {\n        100% { height: 30px; background: var(--accent-purple); }\n    }\n    @keyframes wpNeonPulse {\n        0% { filter: drop-shadow(0 0 2px var(--accent-glow)); }\n        100% { filter: drop-shadow(0 0 8px var(--accent-purple)); }\n    }\n\n    .wp-danpen-player-wrapper .station-name {\n        font-family: 'Orbitron', sans-serif;\n        font-size: 1.6rem;\n        letter-spacing: 2px;\n        text-transform: uppercase;\n        margin: 0 0 6px 0;\n        line-height: 1.2;\n        background: linear-gradient(to right, #ffffff, #88a0c0);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .wp-danpen-player-wrapper .track-info {\n        font-size: 0.85rem;\n        color: #6b7280;\n        margin: 0 0 30px 0;\n        font-weight: 400;\n        letter-spacing: 2px;\n    }\n\n    .wp-danpen-player-wrapper .status-tag {\n        display: inline-block;\n        padding: 4px 14px;\n        background: rgba(255, 255, 255, 0.02);\n        border: 1px solid rgba(255, 255, 255, 0.05);\n        border-radius: 50px;\n        font-size: 0.75rem;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n        color: #6b7280;\n        margin-bottom: 25px;\n        transition: all 0.3s ease;\n    }\n\n    .wp-danpen-player-wrapper .player-container.playing .status-tag {\n        color: var(--accent-glow);\n        border-color: rgba(0, 210, 255, 0.3);\n        background: rgba(0, 210, 255, 0.05);\n        box-shadow: 0 0 10px rgba(0, 210, 255, 0.1);\n    }\n\n    .wp-danpen-player-wrapper .controls {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 25px;\n        margin-bottom: 25px;\n    }\n\n    .wp-danpen-player-wrapper .btn-play {\n        width: 70px;\n        height: 70px;\n        border-radius: 50%;\n        background: var(--text-main);\n        border: none;\n        cursor: pointer;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        box-shadow: 0 10px 20px rgba(0,0,0,0.4);\n        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        position: relative;\n        padding: 0;\n    }\n\n    .wp-danpen-player-wrapper .btn-play:hover {\n        transform: scale(1.05);\n        background: var(--accent-glow);\n        box-shadow: 0 0 25px rgba(0, 210, 255, 0.5);\n    }\n\n    .wp-danpen-player-wrapper .btn-play svg {\n        width: 26px;\n        height: 26px;\n        fill: var(--bg-color);\n        transition: all 0.2s ease;\n    }\n\n    .wp-danpen-player-wrapper .volume-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n        width: 80%;\n        margin: 0 auto;\n    }\n\n    .wp-danpen-player-wrapper .volume-icon {\n        width: 18px;\n        height: 18px;\n        fill: #4b5563;\n    }\n\n    .wp-danpen-player-wrapper .volume-slider {\n        -webkit-appearance: none;\n        width: 100%;\n        height: 4px;\n        border-radius: 2px;\n        background: #1e293b;\n        outline: none;\n        cursor: pointer;\n        margin: 0;\n    }\n\n    .wp-danpen-player-wrapper .volume-slider::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n        background: var(--text-main);\n        cursor: pointer;\n        transition: transform 0.1s;\n    }\n\n    .wp-danpen-player-wrapper .volume-slider::-webkit-slider-thumb:hover {\n        background: var(--accent-glow);\n        transform: scale(1.3);\n    }\n<\/style>\n\n<script>\n    (function() {\n        \/\/ \u0422\u0432\u043e\u044f\u0442 \u0440\u0435\u0430\u043b\u0435\u043d \u0441\u0442\u0440\u0438\u0439\u043c \u0430\u0434\u0440\u0435\u0441\n        const STREAM_URL = \"https:\/\/server.danpenradio.net\/listen\/danpen_radio\/radio.mp3\";\n        const audio = new Audio();\n        audio.preload = \"none\"; \n        \n        const playBtn = document.getElementById('wpPlayBtn');\n        const playIcon = document.getElementById('wpPlayIcon');\n        const volumeControl = document.getElementById('wpVolumeControl');\n        const playerCard = document.getElementById('playerCard');\n        const statusText = document.getElementById('statusText');\n\n        let isPlaying = false;\n\n        const svgPlay = '<path d=\"M8 5v14l11-7z\"\/>';\n        const svgPause = '<path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\"\/>';\n\n        function togglePlay() {\n            if (!isPlaying) {\n                if(!audio.src) {\n                    audio.src = STREAM_URL;\n                } else {\n                    audio.load(); \n                }\n                \n                statusText.innerText = \"Connecting...\";\n                \n                audio.play()\n                    .then(() => {\n                        isPlaying = true;\n                        playerCard.classList.add('playing');\n                        playIcon.innerHTML = svgPause;\n                        statusText.innerText = \"Live\";\n                    })\n                    .catch(err => {\n                        console.error(\"\u0413\u0440\u0435\u0448\u043a\u0430:\", err);\n                        statusText.innerText = \"Error\";\n                    });\n            } else {\n                audio.pause();\n                audio.src = ''; \n                isPlaying = false;\n                playerCard.classList.remove('playing');\n                playIcon.innerHTML = svgPlay;\n                statusText.innerText = \"Stopped\";\n            }\n        }\n\n        if(playBtn) {\n            playBtn.addEventListener('click', togglePlay);\n        }\n\n        if(volumeControl) {\n            volumeControl.addEventListener('input', (e) => {\n                audio.volume = e.target.value;\n            });\n            audio.volume = volumeControl.value;\n        }\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Off-Air DanPen Radio TECHNO &#038; HOUSE \/ 24-7<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"plain-container","ast-site-content-layout":"default","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/danpenradio.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":29,"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/danpenradio.net\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/danpenradio.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}