200 lines
11 KiB
Twig
200 lines
11 KiB
Twig
<!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>
|
|
#navbar { --bs-bg-opacity: 0 }
|
|
|
|
.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 onscroll="menuOpacity()">
|
|
<!-- Responsive navbar-->
|
|
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light" id="navbar">
|
|
<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" id="nav-radio">Radio</a></li>
|
|
<li class="nav-item"><a class="nav-link active" href="#podcast" id="nav-podcast">Podcast</a></li>
|
|
<li class="nav-item"><a class="nav-link active" href="#team" id="nav-team">Team</a></li>
|
|
<li class="nav-item"><a class="nav-link active" href="#contact" id="nav-contact">Kontakt</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Header-->
|
|
<header class="bg-dark px-5 py-4 text-center border-bottom" style="height: 26em; background-image: url('{{ theme_url }}/assets/fernsehturm.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">
|
|
<img src="{{ theme_url }}/assets/radioanton-logo-transparent.svg" class="my-3" height="150">
|
|
<div class="my-3 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="card" style="width: 18rem; text-center;">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Thema</h5>
|
|
<p class="card-text">Beschreibung vom tollen Podcast</p>
|
|
<a href="#" class="btn btn-primary">Download</a>
|
|
</div>
|
|
</div> </div>
|
|
|
|
<!-- Team -->
|
|
<div class="container col-xxl-8 px-4 py-5 my-5" id="team">
|
|
<h1 class="text-center mt-5">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 und ist jede Woche für zwei Stunden für euch 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">
|
|
Wenn Jacob in die Sendung kommt wird es lustig, denn er moderiert <span style="font-style: italic">Jacobs Witze-Wahnsinn</span>
|
|
</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-hw.jpg" class="rounded-circle shadow img-fluid" style="height: 200px;" loading="lazy">
|
|
</div>
|
|
<div class="col-lg-6 lead">
|
|
Bei H.-W. gibt es was zu lernen, er steuert die Reportagen bei
|
|
</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! <span style="font-style: normal">😎</span></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);
|
|
|
|
/*
|
|
var box = document.getElementById("nav-podcast");
|
|
var boxAfter = window.getComputedStyle(box, "::after");
|
|
console.log(boxAfter.backgroundColor); // getting the background color
|
|
console.log(boxAfter.opacity); // getting the background color
|
|
*/
|
|
|
|
function menuOpacity() {
|
|
const navbar = document.getElementById("navbar");
|
|
if (window.scrollY > 300) {
|
|
navbar.style.setProperty('--bs-bg-opacity', 1);
|
|
}
|
|
else {
|
|
navbar.style.setProperty('--bs-bg-opacity', 0);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|