tilman/radioanton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
aa3bd475e35e17d4e88a1441d51bc9afcab4a245
radioanton/index.twig
T
tilman aa3bd475e3 commit
2023-06-25 14:28:24 +02:00

177 lines
9.7 KiB
Twig
Raw Blame History

<!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">Team</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-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="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>
<!-- Team -->
<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 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-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);
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink