<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="robots" content="noindex,nofollow">
        
        <title>Radio Anton</title>
        
        <!-- Favicon-->
        <link rel="apple-touch-icon" sizes="180x180" href="{{ theme_url }}/assets/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="{{ theme_url }}/assets/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="{{ theme_url }}/assets/favicon-16x16.png">
        <link rel="manifest" href="{{ theme_url }}/assets/site.webmanifest">
        
        <!-- Bootstrap -->
        <link rel="stylesheet" href="{{ theme_url }}/bootstrap-5.3.0-dist/css/bootstrap.min.css">
        <script src="{{ theme_url }}/bootstrap-5.3.0-dist/js/bootstrap.min.js"></script>
        
        <!-- Fonts -->
        <link rel="stylesheet" href="{{ theme_url }}/css/roboto.css" type="text/css" />
        <link rel="stylesheet" href="{{ theme_url }}/css/contrailone.css" type="text/css" />
        
        <style>
            .nav-link { font-family: 'Roboto'; font-size: 16px; }
            
            .nav-link { position: relative; display: inline-block; }
            
            .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.1em; background-color: #8a42dd; transition: opacity 300ms, transform 300ms; }
            .nav-link::after { opacity: 1; transform: scale(0); transform-origin: center; }
            .nav-link:hover::after, .nav-link:focus::after { transform: scale(1); }
            
            .zoom { transition: transform .2s; }
            .zoom:hover { transform: scale(1.1); }
            
            h1 { font-family: 'Roboto'; font-weight: bold; font-style: italic; }
        </style>
    </head>
    <body>
        <!-- Responsive navbar-->
        <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
            <div class="container px-5">              <!-- {{ theme_url }}/ -->
                <a class="navbar-brand" href="#!"><img src="{{ theme_url }}/assets/radioanton-logo-transparent.png" height="50" class="d-inline-block align-top" alt="Radio Anton"></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item"><a class="nav-link active" aria-current="page" href="#radio">Radio</a></li>
                        <li class="nav-item"><a class="nav-link" href="#podcast">Podcast</a></li>
                        <li class="nav-item"><a class="nav-link" href="#about">Über uns</a></li>
                        <li class="nav-item"><a class="nav-link" href="#contact">Kontakt</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Header-->
        <header class="bg-dark px-5 py-5 text-center border-bottom" style="height: 26em; background-image: url('{{ theme_url }}/assets/2014-10-05 11-39-05.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;">
            <div class="container px-5 py-5">
                <div class="row gx-5 justify-content-center">
                    <div class="col-lg-6">
                        <div class="text-center my-5">
                            <h1 class="display-5 fw-bolder text-white mb-2">Radio Anton</h1>
                            <div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
                                <a class="btn btn-primary btn-lg px-4 me-sm-3" href="#radio">Hören!</a>
                                <a class="btn btn-outline-light btn-lg px-4" href="#about">Mehr erfahren</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        <!-- Radio -->
        <div class="container col-xxl-8 px-4 py-5 my-5" id="radio">
            <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
                <div class="col-10 col-sm-8 col-lg-6" style="overflow:hidden; padding:0; margin:0;">
                    <img src="{{ theme_url }}/assets/photo-onair.webp" class="zoom d-block mx-lg-auto img-fluid" alt="On Air" loading="lazy" style="height: 400px; object-fit: cover;">
                </div>
                <div class="col-lg-6 text-center">
                    <h1 class="display-5 fw-bold lh-1 mb-3">Live als Stream</h1>
                    <p class="lead">Immer samstags und sonntags ab 15:00 Uhr im</p>
                    <p>
                        <a id="streamBtn" class="btn btn-primary btn-lg px-4 me-sm-3" href="https://www.nodebucket.de:8444/radioanton">Livestream</a>
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Podcast -->
        <div class="container col-xxl-8 px-4 py-5 my-5" id="podcast">
            <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
                <div class="col-lg-6">
                    <h1 class="text-center display-5 fw-bold lh-1 mb-3">Radio Anton als Podcast</h1>
                    <p>Folge 1</p>
                    <p>Folge 2</p>
                </div>
                <div class="col-10 col-sm-8 col-lg-6" style="overflow:hidden; padding:0; margin:0;">
                    <img src="{{ theme_url }}/assets/photo-mic.webp" class="zoom d-block mx-lg-auto img-fluid" alt="Microphone" loading="lazy" style="height: 400px; object-fit: cover;">
                </div>
            </div>
        </div>
        
        <!-- Über uns -->
        <div class="container col-xxl-8 px-4 py-5 my-5" id="about">
            <h1 class="text-center">Das Team</h1>
            <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
                <div class="text-center col-10 col-sm-8 col-lg-6">
                    <img src="{{ theme_url }}/assets/portrait-anton.jpg" class="rounded-circle shadow img-fluid" style="height: 200px;" loading="lazy">
                </div>
                <div class="col-lg-6 lead">
                   Anton hat Radio Anton ins Leben gerufen, gestaltet das Programm und ist bei jeder Sendung am Mikrofon
                </div>
            </div>
            <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
                <div class="text-center col-10 col-sm-8 col-lg-6">
                    <img src="{{ theme_url }}/assets/portrait-jacob.jpg" class="rounded-circle shadow img-fluid" style="height: 200px;" loading="lazy">
                </div>
                <div class="col-lg-6 lead">
                   Jacob ist Co-Moderator und zuständig für den Witze-Wahnsinn
                </div>
            </div>
            <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
                <div class="text-center col-10 col-sm-8 col-lg-6">
                    <img src="{{ theme_url }}/assets/portrait-anica.jpg" class="rounded-circle shadow img-fluid" style="height: 200px;" loading="lazy">
                </div>
                <div class="col-lg-6 lead">
                   Anica gibt euch das Wetter-Update bei Radio Anton
                </div>
            </div>
            <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
                <div class="text-center col-10 col-sm-8 col-lg-6">
                    <img src="{{ theme_url }}/assets/portrait-tilman.jpg" class="rounded-circle shadow img-fluid" style="height: 200px;" loading="lazy">
                </div>
                <div class="col-lg-6 lead">
                   Tilman kennt sich mit der Technik aus und sorgt dafür, dass unser Stream auf euer Gerät kommt
                </div>
            </div>
        </div>
        
        <!-- Kontakt -->
        <div class="container col-xxl-8 px-4 py-5 my-5" id="contact">
            <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
                <div class="col-lg-6">
                    <h1 class="text-center display-5 fw-bold lh-1 mb-3">Mitmachen! 😎</h1>
                    <div class="text-center lead">
                        Musikwünsche direkt ins Studio schicken, Themen-Updates und Neuigkeiten erhalten - das alles kannst du als Mitglied in unserer WhatsApp-Gruppe
                    </div>
                </div>
                <div class="col-10 col-sm-8 col-lg-6" style="overflow:hidden; padding:0; margin:0;">
                    <img src="{{ theme_url }}/assets/whatsapp.png" class="d-block mx-lg-auto img-fluid" alt="On Air" loading="lazy" style="height: 260px;">
                </div>
            </div>
        </div>
        
        
        
        <script>
            // Activate stream button only on Saturdays and Sundays 15:00-18:00
            function streamBtnActivate() {
                const d = new Date();
                let day = d.getDay();
                let hour = d.getHours();

                if ((day == 0 || day == 6) && (hour >= 15 && hour <= 18)) {
                    document.getElementById("streamBtn").classList.remove("disabled");
                }
                else {
                    document.getElementById("streamBtn").classList.add("disabled");
                }
            }

            streamBtnActivate();
            setInterval(streamBtnActivate, 10000);
        </script>
    </body>
</html>
