<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{% block title %}{% endblock %}
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="/assets/css/style.css" rel="stylesheet">
<link href="/assets/css/cutout.css" rel="stylesheet"></head>
<link href="/assets/css/bootstrap-override.css" rel="stylesheet"></head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>
<body>
<!-- header -->
{% block header %}
{# <header id="home" class="d-flex justify-content-center py-3">
<ul class="nav nav-pills">
<li class="nav-item"><a href="/#home" class="nav-link active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="/#project" class="nav-link">Zum Projekt</a></li>
<li class="nav-item"><a href="/#inspiration" class="nav-link">Inspiration</a></li>
<li class="nav-item"><a href="/#upload" class="nav-link">Hochladen</a></li>
<li class="nav-item"><a href="/about" class="nav-link">Über uns</a></li>
</ul>
</header> #}
<header class="py-3 d-flex justify-content-center sticky-top bg-white">
<nav class="navbar navbar-expand-md navbar-light">
<div class="container">
<button class="navbar-toggler order-0" 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 justify-content-md-center order-md-1" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-md-0 nav nav-pills">
<li class="nav-item">
<a href="/#home" class="nav-link" aria-current="page">Home</a>
</li>
<li class="nav-item">
<a href="/#project" class="nav-link">Zum Projekt</a>
</li>
<li class="nav-item">
<a href="/#inspiration" class="nav-link">Inspiration</a>
</li>
<li class="nav-item">
<a href="/#upload" class="nav-link">Hochladen</a>
</li>
<li class="nav-item">
<a href="/about" class="nav-link">Über Uns</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
{% endblock %}
<div id="body">
<div class="container-fluid">
{% block body %}{% endblock %}
</div>
</div>
<!-- footer -->
{% block footer %}
<footer class="py-3 my-4">
<div class="d-flex justify-content-center">
<figure class="figure d-flex flex-column justify-content-center">
<img src="/assets/images/Logo_Kiel_Sailing_City.png" class="figure-img mx-auto d-block w-25" alt="Logo Kiel Sailing City"/>
<figcaption class="mx-4 my-2 figure-caption text-center">mit freundlicher Unterstützung des Kieler-Woche-Büros und des Referats Kreative Stadt</figcaption>
</figure>
</div>
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">
<a href="/#home" class="nav-link px-2 text-body-secondary">Home</a>
</li>
<li class="nav-item">
<a href="/about" class="nav-link px-2 text-body-secondary">Über uns</a>
</li>
<li class="nav-item">
<a href="/imprint" class="nav-link px-2 text-body-secondary">Impressum</a>
</li>
</ul>
<p class="text-center text-body-secondary">© 2024 Sven Bohde</p>
</footer>
{% endblock %}
<!-- Cookie Consent Banner -->
<div id="cookieConsent" class="text-center fixed-bottom py-3" style="background-color: white; border-top: 1px solid;">
<p>Wir haben YouTube Inhalte auf der Seite. YouTube verwendet Cookies. Wir verwenden auch Cookies, um Ihre Erfahrung auf unserer Website zu verbessern. Durch die weitere Nutzung unserer Website akzeptieren Sie unsere Verwendung von Cookies, die überarbeitete Datenschutzrichtlinie und die Nutzungsbedingungen.</p>
<button class="btn btn-primary" onclick="hideCookieBanner()">Ich stimme zu</button>
</div>
{# // FS FEEDBACK FRONTEND: TODO the following is a quick fix for the cookie banner. should be in the frontend.js #}
{# <script>
function hideCookieBanner() {
document.getElementById('cookieConsent').style.display = 'none';
// Set cookie here if needed
document.cookie = "cookieConsent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
showYTContent();
}
// Check if cookie is set
if (document.cookie.includes("cookieConsent=true")) {
hideCookieBanner();
console.log(document.cookie);
showYTContent();
}
function showYTContent() {
console.log('showYTContent');
// selector selecting all iframe with attribute src_youtube
document.querySelectorAll('iframe[src_youtube]').forEach(function (iframe) {
console.log(iframe.getAttribute('src_youtube'));
// set the src attribute to the value of the src_youtube attribute
iframe.setAttribute('src', iframe.getAttribute('src_youtube'));
});
}
</script> #}
{# // FS FEEDBACK FRONTEND: TODO we would expect a "defer" tag, otherwise the page might stall. #}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="/assets/js/frontend.js" defer></script>
</body>
</html>