78 lines
2.6 KiB
HTML
78 lines
2.6 KiB
HTML
{{ define "header" }}
|
|
<header>
|
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand">
|
|
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div id="navbarBasicExample" class="navbar-menu">
|
|
<div class="navbar-start">
|
|
<a href="/" class="navbar-item" hx-get="/main" hx-target="#main-content">
|
|
Dungeons & Dragons
|
|
</a>
|
|
|
|
<a href="/about" class="navbar-item" hx-get="/about" hx-target="#main-content">
|
|
About
|
|
</a>
|
|
|
|
<a href="/contact" class="navbar-item" hx-get="/contact" hx-target="#main-content">
|
|
Contact
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<div class="navbar-item">
|
|
<button id="switchButton" class="button is-light">
|
|
<span id="stylesheetIcon" class="icon">
|
|
<i class="fas fa-sun"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="tile is-ancestor">
|
|
<div class="tile is-parent">
|
|
<section class="tile is-child hero box is-widescreen">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<div class="hero-background">
|
|
<img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
|
|
</div>
|
|
<p class="title">
|
|
Dungeons and Dragons Monster Generator
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const switchButton = document.getElementById("switchButton");
|
|
const stylesheetIcon = document.getElementById("stylesheetIcon");
|
|
|
|
if (switchButton) {
|
|
switchButton.addEventListener('click', switchStylesheet);
|
|
}
|
|
|
|
function switchStylesheet() {
|
|
const link = document.getElementById("customStylesheet");
|
|
|
|
// Ändere das Icon basierend auf dem aktuellen Stylesheet
|
|
if (link.getAttribute("href") === "/static/darkly_bulmawatch.css") {
|
|
link.setAttribute("href", "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css");
|
|
stylesheetIcon.innerHTML = '<i class="fas fa-moon"></i>'; // Zum Mond-Icon wechseln
|
|
} else {
|
|
link.setAttribute("href", "/static/darkly_bulmawatch.css");
|
|
stylesheetIcon.innerHTML = '<i class="fas fa-sun"></i>'; // Zum Sonnen-Icon wechseln
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</header>
|
|
{{ end }}
|