<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="theme-color" content="#000000">
        <title>КАНАЛ 77 - ЕДНА ВЕБ СТРАНА 10 РАДИО СТАНИЦИ</title>
        <link rel="icon" type="image/x-icon" href="https://radio.kanal77.mk/favicon.ico" />
        <meta property="og:image" content="https://kanal77.mk/wp-content/uploads/2023/08/cropped-Ikona-1.png"/>
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous" async></script>
        <link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
        <!-- Core theme CSS (includes Bootstrap)-->
        <!--<link href="css/styles.css" rel="stylesheet" /> !-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css">
    <style>
       body {
            background-color: rgb(114, 113, 113);
            position: relative;
        }
        body, h1, h2, h3, h4, h5, h6 { 
            font-family: 'PT Sans', sans-serif; }

        .background {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            transition: opacity 1s ease-in-out;
            z-index: -1;
            opacity: 1;
        }

        .image-fadeout {
            opacity: 0;
        }

        .content {
            position: relative;
            z-index: 1;
        }


        .circle-container {
            border: 2px solid rgb(173, 43, 43);
            width: 130px;
            height: 130px;
            border-radius: 50%;
            overflow: block;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            background-color: #fff;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.8);
        }

        .circle-image {
            width: 100px;
            height: 100px;
        }

        .text-below {
            font-size: 12px;
            font-weight: bold;
            text-align: left;
            color: black;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            min-height:55px;
        }

        .volume-slider {
        width: 100px;
        -webkit-appearance: none;
        appearance: none;
        height: 8px;
        background: rgba(255, 255, 255, 0.5);
        border: 0px solid rgba(255, 255, 255, 0.5);
        border-radius: 5px;
        outline: none;
    }

    .volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 0, 0, 0.9);
        border: 2px solid #d33232;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    }

    .volume-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: rgba(255, 0, 0, 0.9);
        border: 2px solid #d33232;
        border-radius: 50%;
        cursor: pointer;
    }

    .radio-item {
        min-width: 150px;
        flex: 1 1 auto;
        box-sizing: border-box;
        padding-bottom:10px;
    }

    @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
                width: 70px;
                height: 70px;
            }
        }

        .spin {
            animation: spin 4s linear infinite;
            width: 70px;
            height: 70px;
            
        }

        .live-badge {
    animation: pulse 2s infinite;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 5px;
    background-color: red;
    color: white;
    /* font-size: 12px; */
     font-size: calc(0.4em + 0.3vw);
    font-weight: bold;
    border-radius: 12px;
    text-transform: uppercase;
    margin: -2px 4px -1px;
    line-height: 1.6;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    vertical-align: top;
}

#programa {
margin-top:5px;
margin-bottom: 5px;
margin-left: 4px;
}

.voeter {
vertical-align: top;
}


@media (max-width: 576px) {
    .live-badge {
        justify-content: flex-start;
        align-items: center;
        padding: 1px 5px;
        margin: -1px 4px -1px;
        margin-right: 2px;
        vertical-align: top;
        font-size: 10px;
        line-height:1.2;
        max-height: 20px;
    }

    #programa {
        margin-top: 5px;
        margin-bottom: 10px;
        display: inline-block;
        vertical-align: top;
        height:auto;
        display: flex-start;
        align-items: top;
    }
}


        @keyframes pulse {
            0% {
                box-shadow: 0 0 5px 0 rgba(255, 0, 0, 0.8);
            }
            50% {
                box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.8);
            }
            100% {
                box-shadow: 0 0 5px 0 rgba(255, 0, 0, 0.8);
            }
        }



    </style>
    </head>
    <body ondragstart="return false;" ondrop="return false;" style="user-select: none;">
        <audio id="radiopleer" src="" style="display:none" autoplay></audio>
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top" style="display:none">
            <div class="container px-5">
                <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item"><a class="nav-link" href="#!">Sign Up</a></li>
                        <li class="nav-item"><a class="nav-link" href="#!">Log In</a></li>
                    </ul>
                </div>
            </div>
        </nav>


        <div class="background" id="background" style="background-image: url('');"></div>
        <div class="content">
    <section id="scroll">
    <div class="container col-12 mt-2">
    <div class="row">
        <div class="col-12 col-md-6 col-sm-7 mb-5 pl-md-0 ml-md-0 order-2 m-0 p-0 pr-0">
            <div class="container ml-md-0 pr-0" style="background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 10px; padding: 0px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); color: #000000; border: 2px solid rgba(255, 255, 255, 0.2)">
                <div class="container">
                <div class="row justify-content-center font-weight-bold pt-1 pb-1" style="border-bottom: 2px solid rgba(255, 255, 255, 0.2);background-color: rgba(255, 255, 255, 0.2); border-radius: 5px;border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;">
                  <div class="col text-center p-0 m-0 ml-1"><button type="button" class="btn btn-outline-dark btn-sm btn-block font-weight-bold active" onclick="odberimeni(this, 'radio');odberi('stopiraj');$('#potkast').hide();$('#vesti').hide();$('#stanici').fadeIn();">РАДИО</button></div>
                 <!-- <div class="col text-center p-0 m-0 ml-1"><button type="button" class="btn btn-outline-dark btn-sm btn-block font-weight-bold" onclick="odberimeni(this, 'vesti');odberi('stopiraj');$('#stanici').hide();$('#potkast').hide();$('#vesti').fadeIn();">ВЕСТИ</div> !-->
                  <div class="col text-center p-0 m-0 ml-1 mr-1"><button type="button" class="btn btn-outline-dark btn-sm btn-block font-weight-bold" onclick="odberimeni(this, 'potkast');odberi('stopiraj');promenislika('/sliki/potkast.jpg');$('#stanici').hide();$('#vesti').hide();$('#potkast').fadeIn();">ПОТКАСТ</div>
                </div>
                    <div id="stanici">
                    <div class="row justify-content-center">
                        <div class="col-auto mt-2" style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);color: white;width: 100%; text-align: center; font-weight: bold;font-size:23px;">
                                                ЕДНА ВЕБ СТРАНА 10 РАДИО СТАНИЦИ
                        </div></div>
                <div class="d-flex flex-wrap pl-md-0 pl-3 pr-0 pt-3">
                    <div class="col-6 col-md-4 col-lg-3 mb-0 radio-item" onclick="odberi('samohitovi');">
                        <div class="circle-container">
                            <img id="samohitovilogo" class="img-fluid circle-image" src="https://kanal77.mk/wp-content/uploads/2023/08/cropped-Ikona-1.png" alt="" style="max-width:80px; max-height: 80px">
                        </div>
                        <div class="text-wrapper" style="position: relative;">
                            <div id="pesnasamohitovi" class="m-2 text-below" alt="">
                                &nbsp;<br>&nbsp;
                            </div>
                        </div>
                    </div>
        
                    <div class="col-6 col-md-4 col-lg-3 mb-0 radio-item" onclick="odberi('makedonsko');">
                        <div class="circle-container">
                            <img id="makedonskologo" class="img-fluid circle-image" src="/sliki/mk.png" alt=""> <!--style="max-width:80px; max-height: 80px;!-->
                        </div>
                        <div class="text-wrapper" style="position: relative;">
                            <div id="pesnamakedonsko" class="m-2 text-below" alt="">
                                &nbsp;<br>&nbsp;
                            </div>
                        </div>
                    </div>

                    <div class="col-6 col-md-4 col-lg-3 mb-0 radio-item" onclick="odberi('exyu');">
                        <div class="circle-container ">
                            <img id="exyulogo" class="img-fluid circle-image" src="/sliki/exyu.png" alt="">
                        </div>
                        <div class="text-wrapper" style="position: relative;">
                            <div id="pesnaexyu" class="m-2 text-below" alt="">
                                &nbsp;<br>&nbsp;
                            </div>
                        </div>
                    </div>
        
                    <div class="col-6 col-md-4 col-lg-3 mb-0 radio-item" onclick="odberi('cafe');">
                        <div class="circle-container" onclick="odberi('cafe');">
                            <img id="cafelogo" class="img-fluid circle-image" src="/sliki/cafe.png" alt="">
                        </div>
                        <div class="text-wrapper" style="position: relative;">
                            <div id="pesnacafe" class="m-2 text-below" alt="">
                                &nbsp;<br>&nbsp;
                            </div>
                        </div>
                    </div>
        
                    <div class="col-6 col-md-4 col-lg-3 mb-0 radio-item" onclick="odberi('fresh');">
                        <div class="circle-container" onclick="odberi('fresh');">
                            <img id="freshlogo" class="img-fluid circle-image" src="/sliki/fresh.png" alt="">
                        </div>
                        <div class="text-wrapper" style="position: relative;">
                            <div id="pesnafresh" class="m-2 text-below" alt="">
                                &nbsp;<br>&nbsp;
                            </div>
                        </div>
                    </div>
        
                    <div class="col-6 col-md-4 col-lg-3 mb-0 radio-item" onclick="odberi('rock');">
                        <div class="circle-container" onclick="odberi('rock');">
                            <img id="rocklogo" class="img-fluid circle-image" src="/sliki/rock.png" alt="">
                        </div>
                        <div class="text-wrapper" style="position: relative;">
                            <div id="pesnarock" class="m-2 text-below" alt="">
                                &nbsp;<br>&nbsp;
                            </div>
                        </div>
                    </div>
        
                    <div class="col-6 col-md-4 col-lg-3 mb-0 radio-item" onclick="odberi('deephouse')">
                        <div class="circle-container">
                            <img id="deephouselogo" class="img-fluid circle-image" src="/sliki/deephouse.png" alt="">
                        </div>
                        <div class="text-wrapper" style="position: relative;">
                            <div id="pesnadeephouse" class="m-2 text-below" alt="">
                                 &nbsp;<br>&nbsp;
                            </div>
                        </div>
                    </div>

                    <div class="col-6 col-md-4 col-lg-3 mb-0 radio-item" onclick="odberi('millennium')">
                        <div class="circle-container">
                            <img id="millenniumlogo" class="img-fluid circle-image" src="/sliki/millenium.png" alt="">
                        </div>
                        <div class="text-wrapper" style="position: relative;">
                            <div id="pesnamillennium" class="m-2 text-below" alt="">
                                 &nbsp;<br>&nbsp;
                            </div>
                        </div>
                    </div>

                    <div class="col-6 col-md-4 col-lg-3 mb-0 radio-item" onclick="odberi('folk')">
                        <div class="circle-container">
                            <img id="folklogo" class="img-fluid circle-image" src="/sliki/folk.png" alt="">
                        </div>
                        <div class="text-wrapper" style="position: relative;">
                            <div id="pesnafolk" class="m-2 text-below" alt="">
                                 &nbsp;<br>&nbsp;
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
 
    <div id="vesti" style="display:none";>
    <div class="row justify-content-center">
                        <div class="col-auto mt-2" style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);color: white;width: 100%; text-align: center; font-weight: bold;font-size:23px;">
                                                ВО ИЗРАБОТКА<br><br>
                        </div></div>
    </div>
    <div id="potkast" style="display:none";>
        <div id="potkastmeni">
    <div class="row justify-content-center">
                        <div class="col-auto mt-2" style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);color: white;width: 100%; text-align: center; font-weight: bold;font-size:23px;">
                                                ОДБЕРЕТЕ ПОТКАСТ
                        </div></div>
                        <div class="d-flex justify-content-center align-items-center pl-md-0 pr-0 pt-3 mx-auto">
                        <div class="col-6 col-md-5 col-lg-5 mb-3 radio-item">
                        <div class="">
                        <a href="#" onclick="odberipotkast('PLX-qt8EPoQ1bbfFIIfxbBzWUBJwdqY-g-')">
                            <img id="dabidepojasno" class="img-fluid" src="/sliki/dabidepojasno.jpg" alt="" style="max-width:100%; max-height: 100%;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
                        </div>
                        </a>
                    </div>
        
                    <div class="col-6 col-md-5 col-lg-5 mb-3 radio-item">
                        <div class="">
                        <a href="#" onclick="odberipotkast('PLX-qt8EPoQ1bTAP2QptrC3tIrp_nUmqZZ')">
                            <img id="daneselazeme" class="img-fluid" src="/sliki/daneselazeme.jpg" alt="" style="max-width:100%; max-height: 100%;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
                        </div>
                         </a>
    </div>

                 </div>
                 
    </div>
    <div id="potkastdata" style="display:none">
    </div>
    
    </div>
    </div>
    </div>


        
        <div class="col col-md-3 pb-2 order-1 p-0 m-0">
            <div class="d-flex justify-content-center p-0 m-0">
                <ins data-revive-zoneid="85" data-revive-ct0="{clickurl_enc}" data-revive-id="99bd19a24a3dd7bb6f8b5a3422f0055c" style="border: 3px solid rgba(255, 255, 255, 0.5); border-radius: 5px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);"></ins>
            </div>
        </div>        
        <div class="col col-md-3 pb-4 order-3">
            <div class="container ml-0 ml-md-0 mb-0 mt-5 mt-md-0" style="background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 10px; padding: 20px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); color: #e42f2f; border: 2px solid rgba(255, 255, 255, 0.2);">
                <h4>Честитај роденден или нарачај prank повик!</h4>
                <div class="container form-container">
                    <form id="formaprank"> <div class="form-group"> <label for="prijavuvac">Име и презиме на пријавувачот</label> <input type="text" class="form-control" id="prijavuvac" name="prijavuvac" placeholder="Внесете име и презиме" required> </div> <div class="form-group"> <label for="telefonprijavuvac">Телефонски број на пријавувачот</label> <input type="number" inputmode="numeric" pattern="[0-9]*" class="form-control" id="telefonprijavuvac" name="telefonprijavuvac" placeholder="Внесете телефонски број" required> </div> <div class="form-group"> <label for="imeprijaven">Име и презиме на пријавениот</label> <input type="text" class="form-control" id="imeprijaven" name="imeprijaven" placeholder="Внесете име и презиме" required> </div> <div class="form-group"> <label for="telefonprijaven">Телефонски број на пријавениот</label> <input type="number" inputmode="numeric" pattern="[0-9]*" class="form-control" id="telefonprijaven" name="telefonprijaven" placeholder="Внесете телефонски број" required> </div> <div class="form-group"> <label for="detali">Идеја за повик и детали за пријавениот</label> <textarea class="form-control" id="detali" name="detali" rows="2" placeholder="Внесете детали" required></textarea> </div> <button type="submit" class="btn btn-dark btn-block">Испрати</button> </form>
            </div>
        </div>
       </div>
    </div>
</div></div>
<br><br><br><br><br>
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" async></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" async></script>
    <script async="" src="//ads.mms.mk/www/delivery/asyncjs.php"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" async></script>

        </section>
        
        <div id="pleer1" class="d-flex justify-content-center" style="position: fixed; bottom: -200px; width: 100%; z-index: 2; transition: bottom 1.5s ease;">

        <div style="position:absolute; bottom: 99px; z-index: 2; width:100%; max-width: 900px;" class="d-flex justify-content-end">
    <div style="background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); border-radius: 10px; padding: 2px; box-shadow: -4px 0 6px rgba(0, 0, 0, 0.5), 4px 0 6px rgba(0, 0, 0, 0.5); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top: 2px solid rgba(255, 255, 255, 0.2); border-left: 2px solid rgba(255, 255, 255, 0.2); border-right: 2px solid rgba(255, 255, 255, 0.2);">
        <a href="#Сподели" onclick="spodeli();" style="color: black;">
            <b><u>Сподели</u>
            <i class="bi bi-share-fill"></i>
            <i class="bi bi-facebook"></i>
            <i class="bi bi-messenger"></i>
            <i class="fa-brands fa-viber"></i>
        </a></b>
    </div>
</div>

            <div id="pleer" style="max-width: 900px; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top-left-radius: 10px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; padding: 0px; box-shadow: -4px 0 6px rgba(0, 0, 0, 0.5), 4px 0 6px rgba(0, 0, 0, 0.5); color: #d33232; border-top: 2px solid rgba(255, 255, 255, 0.2); border-left: 2px solid rgba(255, 255, 255, 0.2); border-right: 2px solid rgba(255, 255, 255, 0.2); position: relative; z-index: 2; width: 100%; height: 100px;">
                <div class="row m-0 p-0" style="display: flex; align-items: flex-start;">
                    <div style="margin-top:-0.6px;width: 97px; height: 97px;border: 2px solid transparent; border-radius: 5px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
                        <div id="slikanapleer" style="background-image: url(''); width: 100%; height: 100%;background-size: 100% 100%; background-position: center;border: 1px solid transparent; border-radius: 5px;"></div>
                    </div>
                    <div class="col col-md" style="padding-left: 5px; color: #000000;">
                    <div style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); font-weight: bold; margin-left: -5px; font-size: calc(0.6em + 0.6vw);line-height:1;" id="programa">
                    <i class='bi bi-caret-right-fill'></i><font color='red'>САМО</font> ХИТОВИ</div>
                        <div class="d-flex flex-column justify-content-between">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <div class="mt-0" id="pesna" style="line-height:1.2;margin-bottom:-9px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);font-size: calc(1em + 0.5vw);font-weight: bold;"></div>
                                    <div class="mt-2 pt-1 fw-bold" id="izveduvac" style="line-height:1.2;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);font-size: calc(1em + 0.1vw);"></div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="volume-container d-none d-md-flex" style="position: relative; display: flex; align-items: center">
                                        <i class="bi bi-volume-up-fill" style="font-size: 1.5em; margin-right: 10px; color: rgba(255, 0, 0, 0.7);text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);"></i>
                                        <span id="volumeLabel" style="position: absolute; top: -25px; right: 50%; transform: translateX(50%); background: rgba(255, 0, 0, 0.7); color: white; padding: 2px 5px; border-radius: 5px; font-size: 0.9em; display: none;"></span>
                                        <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" class="volume-slider" style="margin-right: 15px; width: 150px;">
                                    </div>
                                    <button id="stopkopce" onclick="odberi('stopiraj');" class="btn btn-circle btn-danger" style="border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
                                        <i class="bi bi-stop-fill" style="font-size: 2em; line-height: 50px; text-align: center;"></i>
                                    </button>
                                    <button id="startkopce" onclick="$('#radiopleer')[0].play(); $('#startkopce').hide(); $('#stopkopce').show();" class="btn btn-circle btn-success" style="border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
                                        <i class="bi bi-play-fill" style="font-size: 2em; line-height: 50px; text-align: center;"></i>
                                    </button>                                                                                                     
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</div>

        </div>
                            
        <script>

function odberipotkast(playlistId) {
    event.preventDefault();
    const apiKey = 'AIzaSyCe_RfYWX4BQASMHpTyZ5L2ZQWSPzoBM54';
    const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${playlistId}&key=${apiKey}&maxResults=5000`;

    $.getJSON(url, function(data) {
        const videos = data.items;
        let videoListHtml = `
                <button class="btn btn-light font-weight-bold mt-3 mb-3 ml-2" onclick="$('#potkastdata').hide().empty();$('#potkastmeni').fadeIn();"><i class="bi bi-arrow-left-circle-fill"></i> Врати се назад</button>

            <div class="row justify-content-center p-2">
        `;

        videos.forEach(video => {
            const title = video.snippet.title;
            const videoId = video.snippet.resourceId.videoId;
const thumbnail = video.snippet.thumbnails.maxres
    ? video.snippet.thumbnails.maxres.url
    : video.snippet.thumbnails.standard
    ? video.snippet.thumbnails.standard.url
    : video.snippet.thumbnails.high
    ? video.snippet.thumbnails.high.url
    : video.snippet.thumbnails.medium
    ? video.snippet.thumbnails.medium.url
    : video.snippet.thumbnails.default.url;


            videoListHtml += `
                <div class="col-6 col-sm-6 col-md-6 col-lg-6 mb-6 radio-item">
                    <div style="cursor:pointer" onclick="startuvajVideo('${videoId}')">
                        <img id="dabidepojasno" class="img-fluid video-thumbnail" src="${thumbnail}" alt="${title}" style="width: 100%; max-height: 100%; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);" data-video-id="${videoId}">
                    </div>
                    <div class="text-wrapper" style="position: relative;">
                        <div id="" class="m-2 text-below">
                            ${title}
                        </div>
                    </div>
                </div>
            `;
        });

        videoListHtml += `</div>`;
        $('#potkastmeni').hide();
        $('#potkastdata').html(videoListHtml).fadeIn();
    });
}

function startuvajVideo(videoId) {
    const videoUrl = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
    Swal.fire({
        html: `<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
                  <iframe src="${videoUrl}" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
               </div>`,
        showCloseButton: true,
        showCancelButton: false,
        showConfirmButton: false,
        focusConfirm: false,
        width: '80%',
        padding: '0',
        background: 'rgba(0, 0, 0, 1)',
        showClass: {
            popup: ''
        },
        hideClass: {
            popup: ''
        },
        didOpen: () => {
            Swal.getContent().querySelector('iframe').src = videoUrl;
        }
    });
}

function odberimeni(kopce, a) {
    const activeButton = document.querySelector('.btn-outline-dark.active');
    
    if (activeButton) {
        activeButton.classList.remove('active');
    }
    kopce.classList.add('active');
}

function spodeli() {
    event.preventDefault();
    Swal.fire({
        title: "Сподели го моментот со најблиските преку:",
        showCancelButton: true,
        showCloseButton: false,
        showConfirmButton: false,
        focusConfirm: false,
        focusCancel: true,
        cancelButtonText: 'Откажи',
        showClass: {
            popup: 'animate__animated animate__zoomIn animate__faster'
        },
        hideClass: {
            popup: 'animate__animated animate__zoomOut animate__faster'
        },
        html: `
            <div id="share-buttons" style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;font-weight: bold">
            <b>
                <a href="https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}" target="_blank" class="btn btn-primary mr-2 mt-3" style="width:200px">
                    <i class="bi bi-facebook"></i> Facebook
                </a>
                <a href="https://twitter.com/share?url=${encodeURIComponent(window.location.href)}" target="_blank" class="btn btn-primary mr-2 mt-3" style="width:200px">
                    <i class="bi bi-twitter-x"></i> Twitter
                </a>
                <a href="fb-messenger://share?link=${encodeURIComponent(window.location.href)}" target="_blank" class="btn btn-primary mr-2 mt-3" style="width:200px">
                    <i class="bi bi-messenger"></i> Messenger
                </a>
                <a href="viber://forward?text=${encodeURIComponent(`Слушам ${$("#pesna").text()} од ${$("#izveduvac").text()}. Придружи ми се на линкот: ${window.location.href}`)}" target="_blank" class="btn btn-primary mr-2 mt-3" style="width:200px">
                    <i class="fa-brands fa-viber"></i> Viber
                </a><br>
                <a id="copy-link" href="#" class="btn btn-primary mr-2 mt-3" style="width:202px"><i class="bi bi-clipboard"></i> Копирај го линкот</a><br>
                </b>
            </div>
        `,
        customClass: {
            cancelButton: 'btn btn-danger'
        },
        buttonsStyling: false,
        didOpen: () => {
           // document.body.style.overflow = 'auto';
            Swal.getCancelButton().blur();
            const shareButtons = document.querySelectorAll('#share-buttons a');
            shareButtons.forEach(button => {
                button.addEventListener('click', () => {
                    Swal.close();
                });
            });

            const copyButton = document.getElementById('copy-link');
            copyButton.addEventListener('click', () => {
                event.preventDefault();
                navigator.clipboard.writeText(window.location.href).then(() => {
                    Swal.fire({
                        title: 'Линкот е копиран и спремен за лепење',
                        showConfirmButton: false,
                        timer: 1500
                    });
                }).catch(err => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Настана некоја грешка.',
                        showConfirmButton: false,
                        timer: 1500
                    });
                });
            });
        }
    });
}


function setMediaSession(naslov, izveduvac, slika) {
            if ('mediaSession' in navigator) {
                navigator.mediaSession.metadata = new MediaMetadata({
                    title: naslov,
                    artist: izveduvac,
                    album: 'Радио Мрежа Канал 77',
                    artwork: [
                        { src: slika, sizes: '512x512', type: 'image/png' }
                    ]
                });

            }}

            function skrij(){
                $("#pleer1").css("bottom", "-200px");
            }

            function pokazi(){
                $("#pleer1").css("bottom", "0px");
            }

            function promenislika(url) {
                var bgDiv = document.getElementById('background');
                if (url === "nisto"){
                    bgDiv.classList.add('image-fadeout');
                }else{
            bgDiv.classList.add('image-fadeout');
            var bgImg = new Image();
            bgImg.src = url;

            bgImg.onload = function() {
                setTimeout(function() {
                    bgDiv.style.backgroundImage = 'url(' + url + ')';
                    bgDiv.classList.remove('image-fadeout');
                }, 1000);
            };
        }}

        function promenislikamala(url) {
    var bgDiv = $('#slikanapleer');

    if (url === "nisto") {
        bgDiv.fadeOut(function() {
            bgDiv.css('background-image', '');
            bgDiv.fadeIn();
        });
    } else {
        var bgImg = new Image();
        bgImg.src = url;

        bgImg.onload = function() {
            bgDiv.fadeOut(function() {
                bgDiv.css('background-image', 'url(' + url + ')');
                bgDiv.fadeIn();
            });
        };
    }
}


            var isAnimating = false;
        
            function odberi(stanica) {
                if (isAnimating) {
                    return false;  
                }
                    window.momentalno = stanica;
                if (stanica == "stopiraj") {
                    history.replaceState(null, null, window.location.href.split('#')[0]);
                    $('.spin').removeClass('spin');
                    document.title = 'КАНАЛ 77 - ЕДНА ВЕБ СТРАНА 10 РАДИО СТАНИЦИ';
                    $("#radiopleer")[0].pause();
                    $("#radiopleer").attr('src', '');
                    skrij();
                    var odbranoElement = $(".odbrano");
                
                if (odbranoElement.length > 0) {
                    var newTextt = '<i class="bi bi-caret-right-fill"></i> ' + odbranoElement.attr("alt");

                    odbranoElement.animate({
                        opacity: 0,
                        top: '-180px'
                    }, 500, function() { 
                        
                        odbranoElement.html(newTextt) 
                            .css({
                                'position': 'relative',
                                'top': '50px',
                                'opacity': '0',
                                'text-align': 'left',
                                'width': '100%',
                                'color': 'black',
                                'left'  : '-10px',
                                'transform': 'rotate(-0deg)'
                            })
                            .show()
                            .animate({
                                opacity: 1,
                                top: '0'
                            }, 500);  
                        
                        odbranoElement.removeClass("odbrano");
                    });
                }
                    promenislika('nisto');

                    $("#stopkopce").hide();
                    $("#startkopce").show();

                    return false;

                }
                var element = $("#pesna" + stanica);
                
                if (element.hasClass("odbrano")) {
                    return false;  
                }
                $('.spin').removeClass('spin');
                $("#"+stanica+"logo").addClass('spin');
                $("#stopkopce").show();
                $("#startkopce").hide();
                document.location.href ='#'+stanica;

                pokazi();

                $("#radiopleer")[0].pause();
                switch (stanica) {
                    case 'samohitovi':
                        $("#radiopleer").attr('src', 'https://radiocnd.mms.mk/proxy/reactradio/stream');
                        break;
                  case 'makedonsko':
                        $("#radiopleer").attr('src', 'https://radiocnd.mms.mk/proxy/makedonsko/stream');
                        break;
                    case 'exyu':
                    $("#radiopleer").attr('src', 'https://radiocnd.mms.mk/proxy/exyunew/stream');
                    break;
                    case 'cafe':
                    $("#radiopleer").attr('src', 'https://radiocnd.mms.mk/proxy/cafe/stream');
                    break;
                    case 'fresh':
                    $("#radiopleer").attr('src', 'https://radiocnd.mms.mk/proxy/freshnew/stream');
                    break;
                    case 'rock':
                    $("#radiopleer").attr('src', 'https://radiocnd.mms.mk/proxy/rock/stream');
                    break;
                    case 'deephouse':
                    $("#radiopleer").attr('src', 'https://radiocnd.mms.mk/proxy/deephouse/stream');
                    break;
                    case 'millennium':
                    $("#radiopleer").attr('src', 'https://radiocnd.mms.mk/proxy/millennium/stream');
                    break;
                    case 'folk':
                    $("#radiopleer").attr('src', 'https://radiocnd.mms.mk/proxy/folk/stream');
                    break;
                }

                var play = $("#radiopleer")[0].play();
                    play.catch(error => {

                    setTimeout(function() {
                    $("#stopkopce").hide();
                    $("#startkopce").show();
                }, 500);
});

                    var pesna = $("#pesna"+stanica).attr("alt").split(' - ');
                $("#pesna").fadeOut(function() {
                    $(this).empty().append(pesna[0]).fadeIn();
                });

                $("#izveduvac").fadeOut(function() {
                    $(this).empty().append(pesna[1]).fadeIn();
                });
                if (stanica == "exyu") {
                        $("#programa").fadeOut(function() {
                            document.title = 'КАНАЛ 77 - EX-YU';
                    $(this).empty().html(`<i class="bi bi-caret-right-fill"></i>КАНАЛ 77 <font color='red'>EX-</font>YU`).fadeIn();
                            });
                }

                if (stanica == "cafe") {
                        $("#programa").fadeOut(function() {
                            document.title = 'КАНАЛ 77 - CAFÉ';
                    $(this).empty().html(`<i class="bi bi-caret-right-fill"></i>КАНАЛ 77 <font color='red'>CAFÉ</font>`).fadeIn();
                            });
                }

                if (stanica == "fresh") {
                        $("#programa").fadeOut(function() {
                            document.title = 'КАНАЛ 77 - FRESH';
                    $(this).empty().html(`<i class="bi bi-caret-right-fill"></i>КАНАЛ 77 <font color='red'>FRESH</font>`).fadeIn();
                            });
                }

                if (stanica == "rock") {
                        $("#programa").fadeOut(function() {
                            document.title = 'КАНАЛ 77 - ROCK';
                    $(this).empty().html(`<i class="bi bi-caret-right-fill"></i>КАНАЛ 77 <font color='red'>ROCK</font>`).fadeIn();
                            });
                }

                if (stanica == "samohitovi") {
                        $("#programa").fadeOut(function() {
                            document.title = 'КАНАЛ 77 - САМО ХИТОВИ';
                    $(this).empty().html(voeter).fadeIn();
                            });
                }

                if (stanica == "makedonsko") {
                        $("#programa").fadeOut(function() {
                            document.title = 'КАНАЛ 77 - МАКЕДОНСКО';
                    $(this).empty().html(`<i class="bi bi-caret-right-fill"></i>КАНАЛ 77 <font color='red'>МАКЕДОНСКО</font>`).fadeIn();
                            });
                }

                if (stanica == "deephouse") {
                        $("#programa").fadeOut(function() {
                            document.title = 'КАНАЛ 77 - DEEP HOUSE';
                    $(this).empty().html(`<i class="bi bi-caret-right-fill"></i>КАНАЛ 77 <font color='red'>DEEP-</font>HOUSE`).fadeIn();
                            });
                }

                if (stanica == "millennium") {
                        $("#programa").fadeOut(function() {
                            document.title = 'КАНАЛ 77 - MILLENNIUM';
                    $(this).empty().html(`<i class="bi bi-caret-right-fill"></i>КАНАЛ 77 <font color='red'>MILLENNIUM</font>`).fadeIn();
                            });
                }

                if (stanica == "folk") {
                        $("#programa").fadeOut(function() {
                            document.title = 'КАНАЛ 77 - FOLK';
                    $(this).empty().html(`<i class="bi bi-caret-right-fill"></i>КАНАЛ 77 <font color='red'>FOLK</font>`).fadeIn();
                            });
                }
        
                isAnimating = true;  
                
                var odbranoElement = $(".odbrano");
                element.addClass("odbrano");
                if (odbranoElement.length > 0) {
                    var newTextt = '<i class="bi bi-caret-right-fill"></i> ' + odbranoElement.attr("alt");

                    odbranoElement.animate({
                        opacity: 0,
                        top: '-180px'
                    }, 500, function() { 
                        
                        odbranoElement.html(newTextt) 
                            .css({
                                'position': 'relative',
                                'top': '-80px',
                                'opacity': '0',
                                'text-align': 'left',
                                'width': '100%',
                                'color': 'black',
                                'left'  : '-10px',
                                'transform': 'rotate(-0deg)'
                            })
                            .show()
                            .animate({
                                opacity: 1,
                                top: '0'
                            }, 500);  
                        
                        odbranoElement.removeClass("odbrano");
                    });
                }
            
                element.animate({
                    opacity: 0,
                    top: '-50px'
                }, 500, function() {  
                    var newText = '<img src="racka.png" style="width:82px;height:128px"></img>';  
                    
                    element.html(newText)  
                        .css({
                            'position': 'absolute',
                            'z-index': 1,
                            'bottom': '45px',
                            'left'  : '68px',
                            'top'   : '-120px',  
                            'opacity': '0', 
                            'text-align': 'right',
                            'width': '50%', 
                            'color': 'black',
                            'transform': 'rotate(-0deg)'
                        })
                        .show()
                        .animate({
                            opacity: 1,
                            top: '-150px',
                            left: '72px',
                        }, 400, function() {  
                            isAnimating = false;
                        });
                });
 
                $.post("", { slika: $("#pesna"+stanica).attr("alt") }, function(data) {
                    if (data == "|"){
                        promenislikamala('/sliki/default-artwork.jpg');
                        promenislika('nisto');
                        setMediaSession(pesna[0], pesna[1], '/sliki/default-artwork.jpg');
                    }else{
                    var slika = data.split('|');
                    promenislikamala(slika[0]);
                    promenislika(slika[1]);
                    mediaslika = slika[0].replace(/100x100/g, '512x512');
                    setMediaSession(pesna[0], pesna[1], mediaslika);
                    }
                });

               //     alert(momentalno);
            }
        </script>
        
        
        
<script src="/js/jquery-3.7.1.js" crossorigin="anonymous"></script>
        <script>
$(document).ready(function() {
    $(document).on("submit", "#formaprank", function(event) {
        event.preventDefault();

        Swal.fire({
            title: "Испрати ја пораката?",
            icon: "question",
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: "Да, испрати",
            cancelButtonText: "Не, врати се назад",
            showClass: {
                popup: 'animate__animated animate__fadeInUp animate__faster'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutDown animate__faster'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                var formData = new FormData(this);

                $.ajax({
                    url: "isprati.php",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(rezultat) {
                        if (rezultat == "OK") {
                            Swal.close();
                            Swal.fire({
                                icon: "success",
                                title: "Пораката е успешно испратена!",
                                text: "Наскоро ќе бидете контактирани.",
                                showConfirmButton: true,
                                confirmButtonText: "Затвори",
                                confirmButtonColor: `#3085d6`,
                                focusConfirm: true,
                                showClass: {
                                    popup: 'animate__animated animate__fadeInUp animate__faster'
                                },
                                hideClass: {
                                    popup: 'animate__animated animate__fadeOutDown animate__faster'
                                },
                                didOpen: () => {
                                    const confirmButton = Swal.getConfirmButton();
                                    $('#formaprank')[0].reset();
                                }
                            });
                        } else {
                            Swal.fire({
                                title: "Неуспешно",
                                text: rezultat,
                                icon: "error",
                                confirmButtonColor: "#6c757d",
                                confirmButtonText: "Во ред"
                            });
                        }
                    },
                    error: function() {
                        alert("Се случи грешка...");
                        location.href="/";
                    }
                });
            }
        });
    });


let momentalno;
window.voeter = "<i class='bi bi-caret-right-fill'></i><font color='red'>САМО</font> ХИТОВИ";

$('#radiopleer')[0].addEventListener('pause', function() { 
                    setTimeout(function() {
                    $("#stopkopce").hide();
                    $("#startkopce").show();
                }, 500);
});

$('#radiopleer')[0].addEventListener('play', function() { 
                    setTimeout(function() {
                    $("#stopkopce").show();
                    $("#startkopce").hide();
                }, 500);
});

    var fadeTimeout;

    $("#volumeSlider").on("input", function() {
        var volume = $(this).val();
        $("#radiopleer")[0].volume = volume;
        $("#volumeLabel").text(Math.round(volume * 100) + "%").fadeIn();

        clearTimeout(fadeTimeout);
        fadeTimeout = setTimeout(function() {
            $("#volumeLabel").fadeOut();
        }, 1000);




        document.cookie = "volume=" + volume + "; expires=" + new Date(new Date().getTime() + 365*24*60*60*1000).toUTCString() + "; path=/";
    });

    // Initialize the volume label
    $("#volumeLabel").text("100%");

    var hash = window.location.hash;
    if (hash) {
        window.momentalno = hash.substring(1);
        setTimeout(function() {
        odberi(hash.substring(1));
    }, 1000);
      //  $('#radiopleer')[0].play();

    } else {
    //    document.location.href = '#live';
     //   odberi('live');
    }

    function apdejtirajpesna(stanica) {
    var pesnaElement = $("#pesna" + stanica);

    if (pesnaElement.length > 0) { // Check if pesnaElement is defined
        var newText = '<i class="bi bi-caret-right-fill"></i> ' + pesnaElement.attr("alt");

        if (typeof newText !== 'undefined' && pesnaElement.html() !== undefined) {
            var pesnaHtml = pesnaElement.html();
            var escapedNewText = newText.replace(/\\/g, '');
          //  var escapedNewText = newText.replace(/'/g, "\\'");
          //  var pesnaHtml = pesnaElement.html().replace(/'/g, "\\'")
           // var pesnaHtml = pesnaElement.html().replace(/'/g, "\\'").replace(/É/g, "&Eacute;").replace(/&/g, "&amp;");

            if (pesnaHtml !== escapedNewText) {
                if (!pesnaElement.hasClass('odbrano')) {
                    pesnaElement.animate({
                        opacity: 0,
                        top: '-50px'
                    }, 500, function() { 
                        pesnaElement.html(newText)
                            .css({
                                'position': 'relative',
                                'top': '50px',
                                'opacity': '0',
                                'text-align': 'left',
                                'width': '100%',
                                'color': 'black',
                                'left': '-10px',
                                'transform': 'rotate(-0deg)'
                            })
                            .show()
                            .animate({
                                opacity: 1,
                                top: '0'
                            }, 500);  
                    });
                } else {
                    var pesna = pesnaElement.attr('alt').split(" - ");
                    if ($("#pesna").text() !== pesna[0]) {
                        $("#pesna").fadeOut(function() {
                            $("#pesna").empty().append(pesna[0]).fadeIn();
                        });
                        $("#izveduvac").fadeOut(function() {
                            $("#izveduvac").empty().append(pesna[1]).fadeIn();
                        });
                        $.post("", { slika: pesnaElement.attr("alt") }, function(data) {
                            if (data == "|") {
                                promenislikamala('/sliki/default-artwork.jpg');
                                promenislika('nisto');
                                setMediaSession(pesna[0], pesna[1], '/sliki/default-artwork.jpg');
                            } else {
                                var slika = data.split('|');
                                promenislikamala(slika[0]);
                                promenislika(slika[1]);
                                var mediaslika = slika[0].replace(/100x100/g, '512x512');
                                setMediaSession(pesna[0], pesna[1], mediaslika);
                            }
                        });
                    }
                }
            }
        }
    } else {
        console.log("pesnaElement is undefined");
    }
}


    var volume = document.cookie.split('; ').find(row => row.startsWith('volume='));
    if (volume) {
        var glas = volume.split('=')[1];
        $("#radiopleer")[0].volume = glas;
        $("#volumeSlider").val(glas);
    }

    let socket;

    function connect() {
        const socket = new WebSocket('wss://' + window.location.hostname + ':8765');

        socket.addEventListener('open', (event) => {
            console.log('Конектиран на серверот на Канал 77.');
        });

        socket.addEventListener('message', (event) => {
            const data = JSON.parse(event.data);
          //  console.log('Received data:', data);

            function updateAltText(selector, newAlt) {
		if ($(selector).attr('alt') !== newAlt && newAlt.length > 5) {
                    $(selector).attr('alt', newAlt);
                }
            }

            updateAltText("#pesnasamohitovi", `${data.live.momentalno}`);
            updateAltText("#pesnamakedonsko", `${data.makedonsko.momentalno}`)
            updateAltText("#pesnaexyu", `${data.exyu.momentalno}`);
            updateAltText("#pesnacafe", `${data.cafe.momentalno}`);
            updateAltText("#pesnafresh", `${data.fresh.momentalno}`);
            updateAltText("#pesnarock", `${data.rock.momentalno}`);
            updateAltText("#pesnadeephouse", `${data.dh.momentalno}`);
            updateAltText("#pesnamillennium", `${data.millennium.momentalno}`);
            updateAltText("#pesnafolk", `${data.folk.momentalno}`);
            apdejtirajpesna('samohitovi');
            apdejtirajpesna('makedonsko');
            apdejtirajpesna('exyu');
            apdejtirajpesna('cafe');
            apdejtirajpesna('fresh');
            apdejtirajpesna('rock');
            apdejtirajpesna('deephouse');
            apdejtirajpesna('millennium');
            apdejtirajpesna('folk');

            window.voeter = data.live.programa;
            if(window.momentalno == "samohitovi"){
let currentContent = $("#programa").html()
    .replace(/&nbsp;/g, ' ')
    .replace(/"/g, "'")
    .replace(/&#039;/g, "'")
    .replace(/\\/g, '')
    .replace(/\s+/g, '')
    .toLowerCase();

let newContent = window.voeter
    .replace(/&nbsp;/g, ' ')
    .replace(/"/g, "'")
    .replace(/&#039;/g, "'")
    .replace(/\\/g, '')
    .replace(/\s+/g, '')
    .toLowerCase();

if (currentContent !== newContent) {

    $("#programa").fadeOut().empty().html(window.voeter).fadeIn();
}
            }

        });

        socket.addEventListener('close', (event) => {
            console.log('Се дисконекира од серверот, пробувам да се реконектирам...');
            setTimeout(connect, 5000);
        });

        //socket.addEventListener('error', (event) => {
         //   console.error('WebSocket error:', event);
        //});
    }

    connect();
});
</script>


        
        
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" async></script>
        <!-- Core theme JS-->
       <!-- <script src="js/scripts.js"></script> !-->
    </body>
</html>