Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Valuga - Das Radio das einfach anders ist</title>
    <meta name="twitter:title" content="Valuga - Das Radio das einfach anders ist">
    <meta name="twitter:image" content="assets/img/vr.png">
    <meta property="og:image" content="assets/img/vr.png">
    <meta name="description" content="Wir sind Valuga, das Radio das einfach anders ist.
Wir bieten dir viele coole Dinge wie zum Beispiel einen 24/7 erreichbaren Webstream.">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:description" content="Wir sind Valuga, das Radio das einfach anders ist.
Wir bieten dir viele coole Dinge wie zum Beispiel einen 24/7 erreichbaren Webstream.">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=ABeeZee">
    <link rel="stylesheet" href="assets/css/Features-Clean.css">
    <link rel="stylesheet" href="assets/css/Footer-Basic.css">
    <link rel="stylesheet" href="assets/css/Highlight-Clean.css">
    <link rel="stylesheet" href="assets/css/Highlight-Phone.css">
    <link rel="stylesheet" href="assets/css/Play-Pause-Volume.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body style="background-image: url(&quot;assets/img/background.jpg&quot;);background-repeat: round;">
    <section><br><br><br><br><br><br><br><br><br>
        <h1
            class="text-center" style="color: rgba(255,255,255,0.74);font-size: 50px;font-family: ABeeZee, sans-serif;">Valuga</h1><br><br><br>
            <h2 class="text-center" style="color: rgb(255,255,255);">Das Radio das einfach <strong>anders</strong> ist!<br></h2><br><br><br><br><center>
    <a class="btn btn-primary" href="#webstream" role="button" style="background-color: rgba(255,255,255,0);color: rgba(255,255,255,0.64);"><i class="fa fa-chevron-down"></i></a>
</center></section>
    <div
        id="webstream" class="highlight-phone">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="intro">
                        <h2>Webstream</h2>
                        <p>Mit unserem <strong>legendären</strong>&nbsp;Webstream kannst du immer und überall unserem Radio zuhören! Egal ob am PC oder am Smartphone!</p><a class="btn btn-primary" role="button" href="#webs">Zum WEbstream</a></div>
                </div>
                <div class="col-sm-4">
                    <div class="d-none d-md-block iphone-mockup"><img class="device" src="assets/img/iphone.svg"></div>
                </div>
            </div>
        </div>
        </div>
        <div class="features-clean" style="background-color: transparent;">
            <div class="container">
                <div class="intro">
                    <h2 class="text-center" style="color: rgba(255,255,255,0.75);">Was uns einzigartig macht!</h2>
                    <p class="text-center" style="color: rgba(255,255,255,0.75);">Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae. </p>
                </div>
                <div class="row features">
                    <div class="col-sm-6 col-lg-4 item"><i class="fa fa-server icon" style="color: rgba(255,255,255,0.75);"></i>
                        <h3 class="name" style="color: rgba(255,255,255,0.75);">Performance</h3>
                        <p class="description" style="color: rgba(255,255,255,0.75);">Dank starken Servern läuft unser Radio immer ohne Laags oder Verzögerungen!¹<br></p>
                    </div>
                    <div class="col-sm-6 col-lg-4 item"><i class="fa fa-clock-o icon" style="color: rgba(255,255,255,0.75);"></i>
                        <h3 class="name" style="color: rgba(255,255,255,0.75);">24/7 Erreichbar</h3>
                        <p class="description" style="color: rgba(255,255,255,0.75);">Wir sind mit einer Uptime von 99,9% immer für euch erreichbar!²</p>
                    </div>
                    <div class="col-sm-6 col-lg-4 item"><i class="fa fa-mobile-phone icon" style="color: rgba(255,255,255,0.75);"></i>
                        <h3 class="name" style="color: rgba(255,255,255,0.75);">Smartphone</h3>
                        <p class="description" style="color: rgba(255,255,255,0.75);">Unsere Website ist für jeden Gerätetypen erreichbar. Egal ob PC, Tablet oder Smartphone unsere Website wird immer richtig dargestellt!³</p>
                    </div>
                    <div class="col-sm-6 col-lg-4 item"><i class="fa fa-money icon" style="color: rgba(255,255,255,0.75);"></i>
                        <h3 class="name" style="color: rgba(255,255,255,0.75);">Kostenlos</h3>
                        <p class="description" style="color: rgba(255,255,255,0.75);">Egal ob du als Partner einen Musikbot von uns hast oder einfach nur unser Radio hören willst, du bezahlst keinen Cent!</p>
                    </div>
                    <div class="col-sm-6 col-lg-4 item"><i class="fa fa-headphones icon" style="color: rgba(255,255,255,0.75);"></i>
                        <h3 class="name" style="color: rgba(255,255,255,0.75);">Webstream</h3>
                        <p class="description" style="color: rgba(255,255,255,0.75);">Mit unserem Webstream kannst du unserem Radio zuhören, ohne eine App zu installieren.</p>
                    </div>
                    <div class="col-sm-6 col-lg-4 item"><i class="fa fa-support icon" style="color: rgba(255,255,255,0.75);"></i>
                        <h3 class="name" style="color: rgba(255,255,255,0.75);">Support</h3>
                        <p class="description" style="color: rgba(255,255,255,0.75);">Dank unserem fleißigem Support werden deine Anliegen innerhalb kürzester Zeit bearbeitet!⁴</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="webs" class="highlight-clean">
            <div class="container">
                <div class="intro">
                    <h2 class="text-center">Webstream</h2>
                    <p class="text-center">Hier kannst du all unseren Sendern zuhören!</p>
                </div>
                <div class="buttons"><center>
<button class="btn btn-primary" style="background-color: rgba(0,123,255,0);color: rgb(0,0,0);" onclick="playOrPauseSong()" type="button"><i class="fa fa-play"></i>/<i class="fa fa-pause"></i></button><input type="range" min="1" max="100" value="50" class="slider" id="volume">
</center>
</div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col"><img src="assets/img/vr.png" width="200"></div>
                            <div class="col">
                                <h1 style="margin-top: 29px;">Valugaa</h1>
                                <h3 style="margin-top: 80px;"></h3>
                                <h5></h5>
                            </div>
                            <div class="col"><button class="btn btn-primary" style="background-color: rgba(0,123,255,0);color: rgb(0,0,0);" onclick="valugaa()" type="button"><i class="fa fa-play-circle-o"></i></button>

                                <h6><i class="fa fa-headphones"></i>Hörer:</h6>
                                <h6 id="ilr">0<i class="fa fa-headphones"></i></h6>
                                <div role="tablist" id="accordion-1">
                                    <div class="card">
                                        <div class="card-header" role="tab">
                                            <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-1" href="div#accordion-1 .item-1">Stream URL</a></h5>
                                        </div>
                                        <div class="collapse item-1" role="tabpanel" data-parent="#accordion-1">
                                            <div class="card-body">
                                                <p class="card-text"><a href="http://valugaa.stream.laut.fm:8080/valugaa">http://valugaa.stream.laut.fm:8080/valugaa</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col"><img src="assets/img/radio.png" width="150"></div>
                            <div class="col">
                                <h1 style="margin-top: 29px;">WeLoveGaming</h1>
                                <h3 style="margin-top: 80px;"></h3>
                                <h5></h5>
                            </div>
                            <div class="col"><button class="btn btn-primary" style="background-color: rgba(0,123,255,0);color: rgb(0,0,0);" onclick="wlg()" type="button"><i class="fa fa-play-circle-o"></i></button>

                                <h6><i class="fa fa-headphones"></i>Hörer:</h6>
                                <h6 id="wlg">0<i class="fa fa-headphones"></i></h6>
                                <div role="tablist" id="accordion-2">
                                    <div class="card">
                                        <div class="card-header" role="tab">
                                            <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-2 .item-1" href="div#accordion-2 .item-1">Stream URL</a></h5>
                                        </div>
                                        <div class="collapse item-1" role="tabpanel" data-parent="#accordion-2">
                                            <div class="card-body">
                                                <p class="card-text"><a href="http://welovegaming.stream.laut.fm:8080/welovegaming">http://welovegaming.stream.laut.fm:8080/welovegaming</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-basic"><br><br><br><br>
            <p class="text-center" style="font-size: 10px;">¹: Wir übernehmen keine Garantie für die Performance der Server.<br>²: Wir übernehmen keine Garantie für die Erreichbarkeit unserer Website, unseres Webstreams oder anderer Services.<br>³: Wir übernehmen keine Garantie für die korrekte Darstellung
                der Website.<br>⁴: Wir übernehmen keine Garantie für die Zuverlässigkeit und Schnelligkeit des Supports.<br></p>
            <footer>
                <div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a></div>
                <ul class="list-inline">
                    <li class="list-inline-item"><a href="#">Impressum</a></li>
                    <li class="list-inline-item"><a href="#">AGB</a></li>
                    <li class="list-inline-item"><a href="#">Haftungsausschluss</a></li>
                    <li class="list-inline-item"><a href="#">Datenschutzerklärung</a></li>
                </ul>
                <p class="copyright">© Copyright 2019 Valuga</p>
            </footer>
        </div><script type="text/javascript">


    function Get(yourUrl){
    var Httpreq = new XMLHttpRequest();
    Httpreq.open("GET",yourUrl,false);
    Httpreq.send(null);
    return Httpreq.responseText;
}

    var valugaaListeners = JSON.parse(Get("http://api.laut.fm/station/valugaa/listeners"));

    var wlgListeners = JSON.parse(Get("http://api.laut.fm/station/welovegaming/listeners"));


        var songs = ["http://valugaa.stream.laut.fm:8080/valugaa"];
        var poster = ["logo.jpeg"];


        var fillBar = document.getElementById("fill");
    var listener = document.getElementById("ilr");
    var listenerwlg = document.getElementById("wlg");

        var song = new Audio();
        var currentSong = 0;

         window.onload = playSong;


        function playSong(){
            song.src = songs[currentSong];
            song.volume = 0.5;
            listener.innerText = "Fehler";
            listener.innerText = valugaaListeners;
            listenerwlg.innerText = "Fehler";
            listenerwlg.innerText = wlgListeners;

        }


        function playOrPauseSong(){

            if(song.paused){
                song.play();
                listener.innerText = "Fehler";
            listener.innerText = valugaaListeners;
                listenerwlg.innerText = "Fehler";
            listenerwlg.innerText = wlgListeners;
                $("#play img").attr("src","/assets/img/Pause.png");
            }
            else{
                song.pause();
                listener.innerText = "Fehler";
            listener.innerText = valugaaListeners;
                listenerwlg.innerText = "Fehler";
            listenerwlg.innerText = wlgListeners;
                $("#play img").attr("src","/assets/img/Play.png");
            }
        }

        song.addEventListener('timeupdate',function(){

            var position = song.volume / 1;

            fillBar.style.width = position * 100 +'%';
        });


        function next(){
            if(song.volume == 1){
			}
			else{
            song.volume = song.volume + 0.05;
                slider.value = song.value * 100;
			}
        }

        function pre(){

            if(song.volume == 0){
			}
			else{
            song.volume = song.volume - 0.05;
                slider.value = song.value * 100;
			}
        }

    function wlg(){
        song.pause();
        song.src = "http://welovegaming.stream.laut.fm:8080/welovegaming";
        song.play();
    }

    function ilr(){
        song.pause();
        song.src = "http://stream01.iloveradio.de/iloveradio1.mp3";
        song.play();
    }

    function valugaa(){
        song.pause();
        song.src = "http://valugaa.stream.laut.fm:8080/valugaa";
        song.play();
    }

        var slider = document.getElementById("volume");

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    song.volume = slider.value / 100;
}

    </script>
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>