A.S.O PICARDIE -  <script data-ad-client="" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  </head> <body style="background-image:url(/img/upload/338.jpg); background-repeat: no-repeat; background-attachment: fixed;background-position: center top; background-size: 100% 100%;">  <link href="panel/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> <script src="//code.jquery.com/jquery-2.1.1.js"></script>  <script type="text/javascript" language="javascript"> $(document).ready(function() { $(document).on('submit', '#demandecontact', function(event) { event.preventDefault(); $.ajax({ url: "variables/nouveau_contact.php", method: 'POST', data: new FormData(this), contentType: false, processData: false, success: function(data) { Swal.fire({ title: 'Message envoyé', text: 'Le message a bien été envoyé, une réponse sera apportée sur votre adresse e-mail de contact.', type: 'success', confirmButtonText: 'Fermer' }); } }); }); }); </script>  <script type="text/javascript" language="javascript"> $(document).ready(function() { $(document).on('submit', '#participation', function(event) { event.preventDefault(); $.ajax({ url: "variables/participation.php", method: 'POST', data: new FormData(this), contentType: false, processData: false, success: function(data) { Swal.fire({ title: 'Participation enregistrée !', text: 'Merci, nous vous recontacterons si besoin ! (attention, une seule participation sera enregistrée, merci de ne pas abuser du système, c\'est éliminatoire)', type: 'success', confirmButtonText: 'Fermer' }); } }); }); }); </script>  <script type="text/javascript" language="javascript"> $(document).ready(function() { $(document).on('submit', '#message', function(event) { event.preventDefault(); $.ajax({ url: "variables/nouveau_message.php", method: 'POST', data: new FormData(this), contentType: false, processData: false, success: function(data) { Swal.fire({ title: 'Message envoyé', text: 'Votre message a bien été envoyé !', type: 'success', confirmButtonText: 'Fermer' }); } }); }); }); </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $(document).on('submit', '#lire', function(event) { event.preventDefault(); $.ajax({ url: "variables/nouveau_commentaire.php", method: 'POST', data: new FormData(this), contentType: false, processData: false, success: function(data) { Swal.fire({ title: 'Commentaire ajouté', text: 'Votre commentaire a bien été envoyé', type: 'success', confirmButtonText: 'Fermer' }); } }); }); }); </script> <script> function addEmojipop(a) { b = document.getElementById('dedimsgpop').value; document.getElementById('dedimsgpop').value = b+a; } $(function(){ // Enables popover $("[data-toggle=popover]").popover(); }); </script> <div class="top-search-area"> <div class="modal fade" id="message" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="btn close-btn" data-dismiss="modal"><i class="fa fa-times"></i></button> <center> <h3 style="margin-top: -50px;border-bottom: 3px solid rgba(46,182,210,1);">LAISSER UN MESSAGE À L'ANTENNE</h3> <br> <form id="message" enctype="multipart/form-data" method="POST"> <input type="text" name="pseudo" placeholder="Pseudo" class="form-control" required><br><br> <input type="text" id="dedimsgpop" name="message" placeholder="Message" class="form-control" required><br> <div style="float: right;margin-top: -20px; margin-right: -10px"> <a tabindex="0" style="background-color: transparent;border: 0" class="btn " role="button" data-html="true" data-toggle="popover" data-trigger="focus" title="Cliquez sur l'émoji pour l'ajouter" data-content=' <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f600.svg" onclick="addEmojipop(`:1f600 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f600.svg" onclick="addEmojipop(`:1f600 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f601.svg" onclick="addEmojipop(`:1f601 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f602.svg" onclick="addEmojipop(`:1f602 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f603.svg" onclick="addEmojipop(`:1f603 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f604.svg" onclick="addEmojipop(`:1f604 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f605.svg" onclick="addEmojipop(`:1f605 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f606.svg" onclick="addEmojipop(`:1f606 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f607.svg" onclick="addEmojipop(`:1f607 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f608.svg" onclick="addEmojipop(`:1f608 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f609.svg" onclick="addEmojipop(`:1f609 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f610.svg" onclick="addEmojipop(`:1f610 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f611.svg" onclick="addEmojipop(`:1f611 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f612.svg" onclick="addEmojipop(`:1f612 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f613.svg" onclick="addEmojipop(`:1f613 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f614.svg" onclick="addEmojipop(`:1f614 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f615.svg" onclick="addEmojipop(`:1f615 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f616.svg" onclick="addEmojipop(`:1f616 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f617.svg" onclick="addEmojipop(`:1f617 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f618.svg" onclick="addEmojipop(`:1f618 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f619.svg" onclick="addEmojipop(`:1f619 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f620.svg" onclick="addEmojipop(`:1f620 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f621.svg" onclick="addEmojipop(`:1f621 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f622.svg" onclick="addEmojipop(`:1f622 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f623.svg" onclick="addEmojipop(`:1f623 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f624.svg" onclick="addEmojipop(`:1f624 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f625.svg" onclick="addEmojipop(`:1f625 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f626.svg" onclick="addEmojipop(`:1f626 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f627.svg" onclick="addEmojipop(`:1f627 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f628.svg" onclick="addEmojipop(`:1f628 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f629.svg" onclick="addEmojipop(`:1f629 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f630.svg" onclick="addEmojipop(`:1f630 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f631.svg" onclick="addEmojipop(`:1f631 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f632.svg" onclick="addEmojipop(`:1f632 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f633.svg" onclick="addEmojipop(`:1f633 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f634.svg" onclick="addEmojipop(`:1f634 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f635.svg" onclick="addEmojipop(`:1f635 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f636.svg" onclick="addEmojipop(`:1f636 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f637.svg" onclick="addEmojipop(`:1f637 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f641.svg" onclick="addEmojipop(`:1f641 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f642.svg" onclick="addEmojipop(`:1f642 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f643.svg" onclick="addEmojipop(`:1f643 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f644.svg" onclick="addEmojipop(`:1f644 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f910.svg" onclick="addEmojipop(`:1f910 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f911.svg" onclick="addEmojipop(`:1f911 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f912.svg" onclick="addEmojipop(`:1f912 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f913.svg" onclick="addEmojipop(`:1f913 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f914.svg" onclick="addEmojipop(`:1f914 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f915.svg" onclick="addEmojipop(`:1f915 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f917.svg" onclick="addEmojipop(`:1f917 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f920.svg" onclick="addEmojipop(`:1f920 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f921.svg" onclick="addEmojipop(`:1f921 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f922.svg" onclick="addEmojipop(`:1f922 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f923.svg" onclick="addEmojipop(`:1f923 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f924.svg" onclick="addEmojipop(`:1f924 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f925.svg" onclick="addEmojipop(`:1f925 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f927.svg" onclick="addEmojipop(`:1f927 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f928.svg" onclick="addEmojipop(`:1f928 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f929.svg" onclick="addEmojipop(`:1f929 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f970.svg" onclick="addEmojipop(`:1f970 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f971.svg" onclick="addEmojipop(`:1f971 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f973.svg" onclick="addEmojipop(`:1f973 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f974.svg" onclick="addEmojipop(`:1f974 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f975.svg" onclick="addEmojipop(`:1f975 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/1f976.svg" onclick="addEmojipop(`:1f976 `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/263a.svg" onclick="addEmojipop(`:263a `);"> <img class="emoji" style="padding-left:5px" src="/img/emoticons/2639.svg" onclick="addEmojipop(`:2639 `);"> '><i class="fas fa-smile" alt="Ajouter émoji" style="color: black;font-size: 14px;"></i></a> </div> <br> <input type="submit" name="action" id="action" class="btn btn-primary" style="background-color: rgba(46,182,210,1);width:100px;" value="POSTER"> <input type="hidden" name="operation" id="operation" value="insert"/> </form> </center> <div class="search-btn"><i class="fa fa-comments"></i></div> </div> </div> </div> </div> </div>  <header class="header-area"> <div class="main-header-area"> <div class="classy-nav-container breakpoint-off" style="background-image: linear-gradient(to right top, rgba(255,255,255,1), rgba(255,255,255,1));"> <div class="container"> <nav class="classy-navbar justify-content-between" id="razoNav">  <a class="nav-brand" href="index"><img src="/img/upload/logo3.png" style="max-height:80px;max-width: 250px;margin-left: -40px" alt=""></a>  <div class="classy-navbar-toggler"> <span class="navbarToggler"><span></span><span></span><span></span></span> </div>  <div class="classy-menu"> <div class="classycloseIcon"> <div class="cross-wrap"><font color="white"><span class="top"></span><span class="bottom"></span></font></div> </div>  <div class="classynav"> <ul id="nav"> <li><a href="index" onclick="scrollWin()"><font size="4px"></font> Accueil</a></li> <li> <a href="#"> <font size="4px"></font> Radio</a> <ul class="dropdown" style="width: 250px;"> <li><a href="programmes" onclick="scrollWin()">Programmes</a></li> <li><a href="equipe" onclick="scrollWin()">Notre équipe</a></li> <li><a href="nos_partenaires" onclick="scrollWin()">Nos partenaires</a></li> <li><a href="c-etait-quoi" onclick="scrollWin()">C'était quoi ?</a></li> <li><a href="top_auditeurs" onclick="scrollWin()">Votes des auditeurs</a></li> <li><a href="evenements" onclick="scrollWin()">Agenda</a></li> <li><a href="jeux_concours" onclick="scrollWin()" target="_blank">Jeux et concours</a></li> <li><a href="tchat" onclick="scrollWin()" target="_blank">Tchat</a></li> </ul> </li> <li> <a href="#"> <font size="4px"></font> Nos prestations</a> <ul class="dropdown" style="width: 250px;"> <li><a href="radio?idpages=2" onclick="scrollWin()">Prestation</a></li> </ul> </li> <li> <a href="#"> <font size="4px"></font> Actualités</a> <ul class="dropdown" style="width: 250px;"> <li><a href="actualites" onclick="scrollWin()">Actualités radio</a></li> <li><a href="flux_rss?idpages=2" onclick="scrollWin()">BFM TV actus</a></li> </ul> </li> <li> <a href="#"> <font size="4px"></font> Médias</a> <ul class="dropdown" style="width: 250px;"> <li><a href="photos" onclick="scrollWin()">Photos</a></li> <li><a href="videos" onclick="scrollWin()">Vidéos</a></li> </ul> </li> <li> <a href="nous_contacter" target="_blank" onclick="scrollWin()"> <font size="4px"></font> Contact</a> </li> </ul> <div class="search-icon" data-toggle="modal" data-target="#message" title="Laisser un message à l'antenne" > <font style="font-size: 20px; color: rgba(46,182,210,1)"><i class="fa fa-commenting-o"></i></font> </div> </div> </div> </nav> </div>  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700'> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous"> <style> body { margin: 0; } #player { font-family: Roboto; height: 73px; padding-top: 5px; background-image: linear-gradient(to right top, rgba(46,182,210,1), rgba(46,182,210,1)); border-bottom: solid 2pxrgba(36,68,92,1); border-color: rgba(36,68,92,1); bottom: 0; width: 100%; } #player .contener { margin: auto; padding-top: 5px; max-width: 80%; height: 52px; } #defilement_dedicaces { margin: auto; padding: 10px 0 5px 0; width: 100%; height: 20px; font-size: 16px; color: rgba(46,182,210,1); } #player .lecteur { margin-top: 5px; width: 40px; height: 100%; float: left; } #boutonPlay { margin-top: -5px; margin-left: -10px; border-radius: 0px; background: transparent; background-color: transparent; transition: .3s ease-in-out; border: solid 0px #890500; border-color: rgba(255,255,255,1); } #boutonPlay:hover { border: solid 0pxrgba(255,255,255,1); } #boutonPlay > i { margin: 0px 0 0 0px; color: rgba(255,255,255,1); cursor: pointer; } #player .volume { height: 5px; width: 130px; margin: 12px 0 0 15px; float: left; cursor: pointer; } #player .iconeVolume { height: 15px; width: 15px; margin: 0 10px 0 0px; color: rgba(46,182,210,1); float: left; } #vol-bar { border: solid 0px; height: 8px; border-radius: 15px; width: 130px; float: left; padding: 0px 0 0px 0; margin-top: 4px; background-color: #000; } #vol-bar-value { height: 8px; width: 80%; border-radius: 15px; max-width: 130px; background: #890500; margin-top: 0px; background-color: rgba(36,68,92,1); z-index: 9999999999; } #player .nomSite { color: rgba(255,255,255,1); height: 100%; float: left; display: flex; max-width: 40%; } #player .nomSite > span { font-size: 10px; margin: auto; font-weight: normal; } #player .miniApp { height: 100%; width: 100px; float: left; display: flex; } #player .miniApp > div { margin: auto; } #player .miniApp > div > img { filter: grayscale(100%); transition: .1s ease-in-out; height: 30px; width: 30px; float: left; margin-left: 2px; } #player .miniApp > div > img:hover { filter: grayscale(0); } #player .compteur { margin-left: 10px; color: rgba(46,182,210,1); height: 100%; width: 100px; float: left; display: flex; } #player .compteur > span { font-family: "Arial", sans-serif; font-size: 16px; font-weight: 500; margin: auto; } #logo_casque { width: 40px; height: 40px; border-radius: 20px; background: #890500; background-color: rgba(36,68,92,1); transition: .3s ease-in-out; border: solid 1px #890500; border-color: rgba(36,68,92,1); float: left; margin-top: 7px; } #logo_casque:hover { border: solid 2pxrgba(46,182,210,1); } #logo_casque > i { margin: 8px 0 0 7px; color: rgba(46,182,210,1); cursor: pointer; } #player .pochette { margin-left: 10px; margin-top: -4px; background-size: 100% 100%; border-radius: 5%; height: 60px; width: 60px; float: left; } #player .infoTitre { font-size: 20px; margin: 2px 0 0 8px; float: left; } #player .multiflux { font-size: 16px; margin: 2px 0 0 5px; float: left; text-align-last:center; } #artiste { color: rgba(36,68,92,1); text-transform: uppercase; font-size: 17px; } #titre { color: rgba(255,255,255,1); font-weight: normal; font-size: 17px; } #vote_block { margin-left: 20px; height: 50px; float: left; opacity: 0; line-height: 50px; font-size: 24px; font-weight: bold; } #vote_block span { vertical-align: middle; display: inline-block; line-height: 1.2; } #vote_block a { color: rgba(36,68,92,1); text-decoration: none; } #vote_block a:hover { color: #fff; } #bouton_popup { width: 38px; height: 38px; border-radius: 20px; background: #890500; background-color: rgba(36,68,92,1); transition: .3s ease-in-out; border: solid 1px #890500; border-color: rgba(36,68,92,1); margin: 7px 0 0 15px; float: left; } #bouton_popup:hover { border: solid 1pxrgba(46,182,210,1); } #bouton_popup > i { margin: 7px 0 0 7px; color: rgba(46,182,210,1); cursor: pointer; } #bouton_dedicaces2 { width: auto; height: 40px; border-radius: 20px; background-color: rgba(36,68,92,1); transition: .3s ease-in-out; border-color: rgba(36,68,92,1); margin: 7px 0 0 15px; float: left; display: block; } #bouton_dedicaces { width: auto; height: 40px; border-radius: 20px; background-color: rgba(36,68,92,1); transition: .3s ease-in-out; border-color: rgba(36,68,92,1); margin: 7px 0 0 15px; float: left; display: block } #bouton_dedicaces:hover { border: solid 2pxrgba(46,182,210,1); color: rgba(46,182,210,1); } #bouton_dedicaces > i { margin: 7px 0 0 7px; color: rgba(46,182,210,1); cursor: pointer; } #bouton_dedicaces > span { font-size: 16px; position: absolute; margin: 9px 0 0 2px; color: rgba(46,182,210,1); cursor: pointer; } #fenetreDEDI { width: 320px; margin-left: 100px; height: 380px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; position: absolute; background: #FFF; right: 0; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); display: none; } #fenetreDEDI > i { float: right; margin: 5px 5px 0 0; } #formDEDI { font-family: Roboto; font-size: 18px; margin-left: 10px; } #formDEDI .add { font-family: Roboto; font-size: 14px; font-weight: normal; } #formDEDI .input { margin: 5px 0 5px 0; width: 300px; height: 30px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; padding: 5px; } #formDEDI .input:hover { border-color: rgba(36,68,92,1); } #formDEDI .input:focus { border-color: rgba(36,68,92,1); } #formDEDI .textarea { padding: 5px; height: 80px; } #formDEDI .bouton { background-image: linear-gradient(to right top, rgba(46,182,210,1), rgba(46,182,210,1)); width: 110px; height: 35px; border: none; cursor: pointer; } #emoticones { width: 270px; height: 60px; margin: 5px 0 0 5px; } #emoticones > img { cursor: pointer; } .emoji { height: 25px; width: 25px; vertical-align: bottom; } #fenetreHISTO { width: 400px; height: 352px; margin-top: -2px; border: 2px solidrgba(36,68,92,1); border-top: none; position: absolute; background-image: linear-gradient(to right top, rgba(46,182,210,1), rgba(46,182,210,1)); z-index: 999999999; display: none; } #fenetreHISTO:hover { display: block; } #fenetreHISTO .ligne2 { width: 395px; height: 50px; padding-top: 5px; } #fenetreHISTO .ligne { width: 395px; height: 50px; padding-top: 5px; } #fenetreHISTO .ligne:hover { background-image: url('/img/pixel50.png'); } #fenetreHISTO .heure { width: 60px; height: 40px; float: left; padding: 10px 0 0 10px; } #fenetreHISTO .heure > span { font-size: 16px; font-weight: bold; font-family: Roboto; color: rgba(255,255,255,1); } #fenetreHISTO .pochette { width: 50px; height: 45px; float: left; } #fenetreHISTO .pochette > img { width: 40px; height: 40px; border-radius: 5%; } #fenetreHISTO .track { width: 240px; height: 40px; float: left; } #fenetreHISTO .track > span { width: 270px; height: 20px; float: left; font-size: 14px; font-weight: normal; font-family: Roboto; color: rgba(255,255,255,1); } #fenetreHISTO .download { width: 40px; height: 40px; padding-top: 10px; float: left; } #fenetreHISTO .download > i { font-size: 25px; font-weight: bold; color: rgba(255,255,255,1); cursor: pointer; text-decoration: none; } #fenetreHISTO .download > a { color: black; } .ctquelheure > a { color: black; text-decoration: none; font-size: 30px; font-family: Roboto; } #fenetreHISTO .horloge { color: black; float: left; padding: 0 20px 0 10px; font-size: 40px; } @media only screen and (max-width: 360px) { #player .contener { width: 350px; width: 100%; } #player .volume, #player .compteur, #player .nomSite, #player .miniApp, #logo_casque, #bouton_popup, #bouton_dedicaces { display: none; } } @media only screen and (max-width: 450px) { #player .contener { width: 450px; width: 100%; } #player .volume, #player .compteur, #player .nomSite, #player .miniApp, #logo_casque, #bouton_popup, #bouton_dedicaces > span { display: none; } #bouton_dedicaces { width: 38px; float: right; } #player .pochette { margin-left: 10px; } } @media only screen and (max-width: 800px) { #player .contener { max-width: 700px; width: 95%; } #player .volume, #player .compteur, #player .miniApp, #logo_casque, #bouton_popup { display: none; } } select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; max-width: 100%; outline: 0; box-shadow: none; border: 0 !important; background: rgba(255,255,255,1); background-image: none; flex: 1; padding: 0 .5em; color: rgba(46,182,210,1); cursor: pointer; font-size: 1em; font-family: 'Open Sans', sans-serif; } select::-ms-expand { display: none; } .select { position: relative; display: flex; height: 3em; line-height: 3; background: rgba(255,255,255,1); overflow: hidden; border-radius: .25em; font-size: 14px; font-weight: bold; } .select::after { content: '\25BC'; position: absolute; top: 0; right: 0; padding: 0 1em; background: #2b2e2e; cursor: pointer; pointer-events: none; transition: .25s all ease; } .select:hover::after { color: #23b499; } .magic { display: table; } .magic__title { display: table-cell; vertical-align: middle; font-size: 20px; text-transform: uppercase; } .magic__who { color: rgba(255,255,255,1); } </style> <section id="player"> <div class="contener">  <div class="multiflux" style="margin-top: 5px; max-width: 12%;"> <select id="selection" class="select">  <option selected="selected" value="https://manager5.streamradio.fr/asopicardie/manager/manager5.streamradio.fr:2060/1/"> ASO Picardie - HD </option>  </select> </div>  <div id="pochette" class="pochette" style="max-width: 10%;padding-right: 20px;margin-left: 30px;"></div> <div id="vote_block"> </div> <div class="infoTitre" style="padding-right: 2%;max-width: 20%;;margin-top: 2px;"> <h6><span id="artiste"></span> <br/> <span id="titre"></span></h6> </div> <div class="lecteur" style="margin-left: 5%;max-width: 8%; "> <audio id="LecteurPrincipal" preload="none" src="https://manager5.streamradio.fr/asopicardie"></audio> <div id="boutonPlay"><i class="material-icons" style="font-size: 50px;">play_arrow</i></div> </div> <div class="volume" style="margin-top: 17px;float: left;max-width: 15%"> <div id="vol-bar"> <div id="vol-bar-value"></div> </div> </div> <a href="#" onClick="window.open('includes/vote.php','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=no, resizable=no, copyhistory=0, menuBar=0, width=220, height=190');return(false)" data-toggle="modal"> <div id="logo_casque" style='margin-left:15px;max-width: 7%'> <i class="material-icons">favorite</i> </div> </a> <div style="float: right;max-width: 200px"> <div id="logo_casque" onmouseover="document.getElementById('fenetreHISTO').style.display='block';"> <i class="material-icons">headset</i> </div> <div id="bouton_dedicaces2" style="background-color : transparent"> <a href="#" onClick="window.open('ecouter','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=no, resizable=no, copyhistory=0, menuBar=0, width=1100px, height=90px');return(false)"> <h6 style="margin-top: 7px; padding-left: 10px; padding-right: 10px;"><font style="color: rgba(255,255,255,1)"> <i class="material-icons" style="float: left;font-size: 26px;margin-top: -1px;margin-left: 10px;">open_in_new</i></font> </h6></a> </div> </div> </div> </section> <div id="fenetreHISTO" onmouseover="document.getElementById('fenetreHISTO').style.display='block';" onmouseout="document.getElementById('fenetreHISTO').style.display='none';"> <div class="ligne2"> <div class="ctquelheure"><a href="c-etait-quoi" target="preview-frame"><i class="material-icons horloge" style="color: rgba(36,68,92,1)">history</i> <div style="margin-top: 0px;margin-left: -20px;"><font style="font-size: 22px;font-weight: bold;color: rgba(36,68,92,1)">Derniers titres diffusés</font> </a></div> </div> </div> <div class="ligne"> <div class="heure"><span><h6 style="color: rgba(36,68,92,1)">18:46</h6></span> </div> <div class="pochette"> <img src="https://i.scdn.co/image/ab67616d0000b2733ccffc631692999d681727a2" /> </div> <div class="track"> <span><font face="Arial"><b>Johnny Hallyday</b></font></span> <span><font face="Arial">L'envie </font></span> </div>  </div> <div class="ligne"> <div class="heure"><span><h6 style="color: rgba(36,68,92,1)">18:43</h6></span> </div> <div class="pochette"> <img src="https://i.scdn.co/image/ab67616d0000b2739478c87599550dd73bfa7e02" /> </div> <div class="track"> <span><font face="Arial"><b>Post Malone</b></font></span> <span><font face="Arial">WOW</font></span> </div>  </div> <div class="ligne"> <div class="heure"><span><h6 style="color: rgba(36,68,92,1)">18:41</h6></span> </div> <div class="pochette"> <img src="https://i.scdn.co/image/ab67616d0000b2735214d65f6a3c6985ff3cfc13" /> </div> <div class="track"> <span><font face="Arial"><b>AFROJACK, DAVID GUETTA</b></font></span> <span><font face="Arial">HERO</font></span> </div>  </div> <div class="ligne"> <div class="heure"><span><h6 style="color: rgba(36,68,92,1)">18:38</h6></span> </div> <div class="pochette"> <img src="https://i.scdn.co/image/ab67616d0000b273df16c877f94567573ffa4e62" /> </div> <div class="track"> <span><font face="Arial"><b>JAMES ARTHUR</b></font></span> <span><font face="Arial">SEPTEMBER</font></span> </div>  </div> <div class="ligne"> <div class="heure"><span><h6 style="color: rgba(36,68,92,1)">18:33</h6></span> </div> <div class="pochette"> <img src="https://i.scdn.co/image/ab67616d0000b273b31149736209aedec180c1b2" /> </div> <div class="track"> <span><font face="Arial"><b>Leslie</b></font></span> <span><font face="Arial">Annonce-Moi La Couleur</font></span> </div>  </div> <div class="ligne"> <div class="heure"><span><h6 style="color: rgba(36,68,92,1)">18:28</h6></span> </div> <div class="pochette"> <img src="https://i.scdn.co/image/ab67616d0000b2734dd033f4cf3a0a58059cde69" /> </div> <div class="track"> <span><font face="Arial"><b>Earth Wind And Fire</b></font></span> <span><font face="Arial">Fantasy</font></span> </div>  </div> </div> <script> function millieuDivDEDI() { document.getElementById('fenetreDEDI').style.top = (window.innerHeight / 2 - 270 / 2) + 'px'; document.getElementById('fenetreDEDI').style.right = (window.innerWidth / 2 - 270 / 2) + 'px'; } function centreDivHISTO() { document.getElementById('fenetreHISTO').style.right = (window.innerWidth / 100) + 'px'; } </script> <div id="fenetreDEDI"> <div id="formDEDI"> </div> </div> <script> millieuDivDEDI(); centreDivHISTO(); function formatTime(seconds) { minutes = Math.floor(seconds / 60); minutes = (minutes >= 10) ? minutes : "0" + minutes; seconds = Math.floor(seconds % 60); seconds = (seconds >= 10) ? seconds : "0" + seconds; return minutes + ":" + seconds; } // Constantes player var a = document.getElementById('LecteurPrincipal'); var b = document.getElementById('boutonPlay'); var c = document.getElementById("vol-bar"); var c1 = document.getElementById("vol-bar-value"); var d1 = document.getElementById("vol-min"); var d2 = document.getElementById("vol-max"); var e = document.getElementById("compteur"); // Play - Pause b.addEventListener("click", function () { if (a.paused == true) { a.load(); a.play(); } else if (a.paused == false) { a.pause(); } }); a.onplay = function () { b.firstChild.innerHTML = "pause"; }; a.onpause = function () { b.firstChild.innerHTML = "play_arrow"; }; a.ontimeupdate = function () { e.innerHTML = formatTime(a.currentTime); }; // Volume c.addEventListener("click", function (event) { var e = (event.clientX - c.offsetLeft); c1.style.width = e + '%'; a.volume = Math.round(c1.style.width.slice(0, -1) / 10) / 10; }); d1.addEventListener("click", function () { a.volume = 0; c1.style.width = '0%'; }); d2.addEventListener("click", function () { a.volume = 1; c1.style.width = '100%'; }); </script> <script> var xmlhttp = new XMLHttpRequest(); url = "https://api.moncmsradio.fr/manager.php?url=https://manager5.streamradio.fr:2060&server=1"; function refresh_mdata() { var artiste = document.getElementById("artiste").innerHTML; var titre = document.getElementById("titre").innerHTML; xmlhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { var tableau = JSON.parse(this.responseText); var artistev = tableau.artist; var titlev = tableau.title; console.log("NTM : " + tableau.cover); if (tableau.title != titre) { document.getElementById("artiste").style.opacity = 0; document.getElementById("pochette").style.transition = "opacity 1s"; document.getElementById("vote_block").style.opacity = 0; setTimeout(function () { document.getElementById("artiste").innerHTML = tableau.artist; document.getElementById("artiste").style.opacity = 1; document.getElementById("artiste").style.transition = "opacity 1s"; document.getElementById("vote_block").style.opacity = 1; }, 1000); document.getElementById("titre").style.opacity = 0; document.getElementById("pochette").style.transition = "opacity 1s"; setTimeout(function () { document.getElementById("titre").innerHTML = tableau.title; document.getElementById("titre").style.opacity = 1; document.getElementById("titre").style.transition = "opacity 1s"; }, 1000); document.getElementById("pochette").style.opacity = 0; document.getElementById("pochette").style.transition = "opacity 1s"; if (tableau.picture != "default" && tableau.picture != undefined) { setTimeout(function () { document.getElementById("pochette").style.backgroundImage = "url('" + tableau.picture + "')"; document.getElementById("pochette").style.opacity = 1; document.getElementById("pochette").style.transition = "opacity 1s"; }, 100); } else if (tableau.cover != "null" && tableau.cover != undefined) { setTimeout(function () { document.getElementById("pochette").style.backgroundImage = "url('" + tableau.cover + "')"; document.getElementById("pochette").style.opacity = 1; document.getElementById("pochette").style.transition = "opacity 1s"; }, 100); } else { setTimeout(function () { document.getElementById("pochette").style.backgroundImage = "url('/img/upload/1853058232069868610534652223710589484018741n.jpg')"; document.getElementById("pochette").style.opacity = 1; document.getElementById("pochette").style.transition = "opacity 1s"; }, 100); } } } }; xmlhttp.open("GET", url, true); xmlhttp.send(); setTimeout('refresh_mdata()', 5000); } setTimeout('refresh_mdata()', 1000); $('.vote_link').click(function (e) { e.preventDefault(); var artiste = document.getElementById("artiste").innerHTML; var titre = document.getElementById("titre").innerHTML; var pochette = document.getElementById("pochette").style.backgroundImage; var url = pochette.replace(/^url\(["']?/, '').replace(/["']?\)$/, '').replace(/\)/, ''); $.ajax({ url: '/top/vote.php?choice=like&track=' + artiste + ' - ' + titre + '&image=' + url, success: function (response) { alert(response); } }); return false; }); // SCRIPT JS POUR CHANGER LE FLUX $(document).ready(function () { // Vérification que la page a bien chargé $('#selection').on('change', function () { //Si la balise avce l'id selection change ... change($(this).val()); // Initialiser la fonction change avce comme parametre la veleur de l'option }); }); function change(sourceUrl) { var audio = document.getElementById("player"); var source = document.getElementById("mp3_src"); var newMeta = sourceUrl; var newMetaArray; console.log(newMeta); newMetaArray = newMeta.split('/'); var protocole = newMetaArray[0]; var longUrl = newMetaArray[2]; var mountPoint = newMetaArray[3]; longUrl = longUrl.split(":"); var domaine = longUrl[0]; console.log(longUrl[1]); if (domaine == "www.radioking.com") { var type = newMetaArray[5]; } else { var type = newMetaArray[4]; } if (longUrl[1] !== undefined) { var port = ":" + longUrl[1]; } else if (longUrl[1] === undefined) { var port = "/radio/" + newMetaArray[4]; var type = newMetaArray[6]; var mountPoint = newMetaArray[5]; } else if (protocole === "https:") { var port = ":" + 443; } else { var port = ":" + 80; } a.pause(); if (domaine === "www.radioking.com") { url = "https://api.radioking.io/widget/radio/" + newMetaArray[4] + "/track/current"; a.src = "https://www.radioking.com/play/" + newMetaArray[4]; } else if (type === "manager") { url = "https://api.moncmsradio.fr/manager.php?url=https://" + newMetaArray[5] + "&server=" + newMetaArray[6]; a.src = protocole + "//" + domaine + "" + port + "/" + mountPoint; } else { url = "https://api.moncmsradio.fr/onair.php?url=" + protocole + "//" + domaine + "" + port + "&type=/" + type; a.src = protocole + "//" + domaine + "" + port + "/" + mountPoint; } a.load(); a.play() } $(document).ready(function () { change(""); a.pause(); }); </script>    </div> </div> <script> $(document).ready(function(){ $('#newsTicker9').breakingNews({ effect: 'slide-left' }); }); </script> </div> </header> <div class="bn-breaking-news" id="newsTicker9"> <div class="bn-label">DÉDICACES </div> <div class="bn-news"> <ul> <li style="color: rgba(255,255,255,0.75);"><a><b>lucas</b> : bonjour, très bon sérieux </a></li> <li style="color: rgba(255,255,255,0.75);"><a><b>Virginie </b> : Bonne radio continuer comme ça ????</a></li> <li style="color: rgba(255,255,255,0.75);"><a><b>Sandyii</b> : Radio sympa,bon sons.merci a vous !</a></li> <li style="color: rgba(255,255,255,0.75);"><a><b>Jcharle33 </b> : Trop bon son sur le live de dafito</a></li> <li style="color: rgba(255,255,255,0.75);"><a><b>dafito</b> : super radio merci </a></li> <li style="color: rgba(255,255,255,0.75);"><a><b>momo</b> : bonne radio <img class='emoji' style='max-width:17px;' src='/img/emoticons/1f600.svg'> </a></li> </ul> </div> <div class="bn-controls"> <button><span class="bn-arrow bn-prev"></span></button> <button><span class="bn-action"></span></button> <button><span class="bn-arrow bn-next"></span></button> </div> </div> <div id="page-content">  </div> </div> </div> </div> </div> </section>  </div> <ul id="social-sidebar"> <li> <a class="sbar-facebook" href="https://www.facebook.com/ASOPICARDIEOFFICIEL" target="_blank"><i class="fab fa-facebook"></i><span>Facebook</span></a> </li> <li> <a class="sbar-discord" href="https://discord.gg/R8g53VR3" target="_blank"><i class="fab fa-discord"></i><span>Discord</span></a> </li> <li> <a class="sbar-paper-plane" href="nous_contacter"><i class="fa fa-paper-plane"></i><span>Contact</span></a> </li> </ul>   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="src/js/breaking-news-ticker.js"></script> <script src="js/owl.carousel.min.js"></script> <footer class="footer-area" style=" width:80%;margin: 0 auto;"> <div class="copywrite-area" style="background-image: linear-gradient(to right top, rgba(46,182,210,1), rgba(46,182,210,1));"> <div class="container"> <div class="row"> <div class="col-12"> <div class="copywrite-text"> <p><font style="color:rgba(255,255,255,1);size:6px;"><b>A.S.O PICARDIE</b></a> - Copyright © <script>document.write(new Date().getFullYear());</script> |<a href=" mentions_legales" onclick="scrollWin()"> <font style="color:rgba(255,255,255,1);size:6px;">Nos mentions légales</font></a> | par </font><a href="https://streamradio.fr/" target="_blank"><font style="color:rgba(255,255,255,1);size:6px;"><b>Stream Radio</b></font></a></p> </div> </div> </div> </div> </div> </footer> <script> function scrollWin() { window.scrollTo(0, 0); } </script> <script src='https://www.jqueryscript.net/demo/Instagram-Photos-Without-API-instagramFeed/jquery.instagramFeed.js'></script> <script> const css='\n.insta-feed {\n width: 100%;\n /* background-color: gray; */\n font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",\n sans-serif;\n border: 0px solid rgba(58, 58, 58, 0.3);\n border-radius: 5px;\n}\n.insta-feed-user-info-container {\n padding: ;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: left;\n margin-bottom: 2px;\n}\n.insta-feed-user-img img {\n width: 80px;\n border-radius: 50%;\n margin: 2px;\n}\n.insta-feed-user-info {\n margin-left: 10px;\n}\n.insta-feed-user-info h3 {\n margin: 0;color: rgba(35,35,35,1);\n}\n.insta-feed-user-info p {\n font-size: 20px;color: rgba(35,35,35,1);\n margin: 0;\n margin-top: 2px;\n}\n.insta-feed-follow-button button {\n cursor: pointer;\n border: none;\n outline: none;\n background-color: dodgerblue;\n color: white;\n padding: 5px 15px;\n margin-top: 5px;\n border-radius: 3px;\n}\n.insta-feed-follow-button button:hover {\n background-color: rgb(0, 106, 212);\n}\n.insta-feed-user-stats {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n border-bottom: 0px solid rgba(58, 58, 58, 0.3);\n}\n.insta-feed-user-stats div {\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n margin: 10px 0;\n text-align: center;\n}\n.insta-feed-user-stats div h3 {\n margin: 0;color: rgba(35,35,35,1);\n}\n.insta-feed-user-stats div p {\n text-align: center; color: rgba(35,35,35,1); \n margin: 0;\n}\n.insta-feed-user-posts {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n max-height: 500px;\n overflow: auto;\n align-items:center;\n justify-content:center;\n}\n.insta-feed-user-post-single img {\n width: 100%;\n vertical-align: top;\n}\n.insta-feed-user-post-single:after {\n content: "";\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0, 0, 0, 0.6);\n opacity: 0;\n transition: all 0.3s;\n -webkit-transition: all 0.3s;\n}\n.insta-feed-user-post-single {\n max-width: 32%;\n margin: 1px;\n position: relative;\n}\n.insta-feed-user-post-single:hover:after {\n opacity: 0.6;\n}\n',template=document.createElement("template");template.innerHTML=`\n<style>\n${css}\n</style>\n<div class="insta-feed">\n <div class="insta-feed-user-info-container">\n <div class="insta-feed-user-img">\n <h3 style="color: rgba(35,35,35,1)">Chargement...</h4>\n </div>\n <div class="insta-feed-user-info">\n \n </div>\n </div>\n <div class="insta-feed-user-stats">\n \n </div>\n <div class="insta-feed-user-posts">\n \n </div>\n </div>\n`;class InstaFeed extends HTMLElement{constructor(){super(),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.appendChild(template.content.cloneNode(!0))}connectedCallback(){this.username=this.getAttribute("username"),this.render()}async fetchData(n){const e=await fetch(`https://instagram.com/${n}?__a=1`);return await e.json()}renderPosts(n=[]){n.forEach((n,e)=>{this._shadowRoot.querySelector(".insta-feed-user-posts").innerHTML+=`\n <a href="https://instagram.com/p/${n.node.shortcode}" target="_blank" class="insta-feed-user-post-single"> \n <div>\n <img src="${n.node.display_url}"/>\n </div>\n </a>\n `})}renderInformation(n){this._shadowRoot.querySelector(".insta-feed-user-img").innerHTML=``,this._shadowRoot.querySelector(".insta-feed-user-info").innerHTML=` `,this._shadowRoot.querySelector(".insta-feed-user-stats").innerHTML=` `}renderError(n){this._shadowRoot.querySelector(".insta-feed-user-img").innerHTML="\n <h3>404 ERREUR DE COMPTE</h3>\n "}async render(){try{const{graphql:n}=await this.fetchData(this.username);this.renderInformation(n.user),this.renderPosts(n.user.edge_owner_to_timeline_media.edges)}catch(n){this.renderError(n)}}}customElements.define("insta-feed",InstaFeed); </script> <script> $(document).ready(function() { $("#testimonial-slider2").owlCarousel({ items: 4, itemsDesktop:[1000,3], itemsDesktopSmall:[979,2], itemsTablet:[768, 2], itemsMobile:[1000, 3], pagination: false, autoPlay: true }); });</script> <script> $(document).ready(function() { $("#testimonial-slider").owlCarousel({ items: 4, itemsDesktop:[1000,3], itemsDesktopSmall:[979,2], itemsTablet:[768, 2], itemsMobile:[1000, 3], pagination: false, autoPlay: true }); });</script> <script> $(document).ready(function() { $("#testimonial-slider6").owlCarousel({ items: 4, itemsDesktop:[1000,3], itemsDesktopSmall:[979,2], itemsTablet:[768, 2], itemsMobile:[1000, 3], pagination: false, autoPlay: true }); });</script> <script> $(document).ready(function(){ $('#newsTicker9').breakingNews({ effect: 'slide-left' }); }); </script> <script src="js/app.js"></script>   <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/play.js"></script> <script src="js/default-assets/active.js"></script> <script src="js/ajaxify.js"></script> <script src="js/app.js"></script> <script type="text/javascript"> var frm = $('#tchat'); frm.submit(function (e) { e.preventDefault(); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { console.log('Submission was successful.'); console.log(data); }, error: function (data) { console.log('An error occurred.'); console.log(data); }, }); }); } </script>  <script> $('#page-content').ajaxify({ selector: "a:not(.no-ajaxy)", requestDelay: 0, fade: 0, pop: 0, squeeze: 0, verbosity: 0, deltas: true, inline: false, inlinehints: false, style: false, forms: true, prefetch: false, turbo: false, previewoff: true, memoryoff: true, canonical: false, cb: null, pluginon: true }); </script> </div> </body> </html>