124 lines
3.8 KiB
Plaintext
124 lines
3.8 KiB
Plaintext
|
|
|
|
{{define "base"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>{{ template "title" . }}</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="/static/htmx.js"></script>
|
|
<link href="/static/flowbite.min.css" rel="stylesheet"/>
|
|
</head>
|
|
{{/* https://www.reddit.com/r/htmx/comments/1blwnc4/tip_of_the_day_unobtrusive_global_loading/*/}}
|
|
<body hx-indicator=".loading-bar">
|
|
<style>
|
|
.loading-bar {
|
|
opacity: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, transparent,
|
|
#000, transparent,
|
|
#000, transparent
|
|
);
|
|
}
|
|
|
|
.htmx-request.loading-bar {
|
|
opacity: 1;
|
|
animation: fadeIn 2s linear forwards, slide 0.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes slide {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="loading-bar"></div>
|
|
|
|
|
|
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
|
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4">
|
|
<div class="flex items-center space-x-3 rtl:space-x-reverse">
|
|
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">test - {{ template "title" . }}</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<nav class="bg-gray-50 dark:bg-gray-700 lg:hidden">
|
|
<div class="max-w-screen-xl px-4 py-3 mx-auto">
|
|
<div class="flex items-center justify-between">
|
|
<button id="menu-toggle" class="text-gray-900 dark:text-white focus:outline-none" style="width: 200px">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16m-7 6h7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="menu" class="hidden mt-4">
|
|
<ul class="flex flex-col space-y-4 text-sm">
|
|
{{ template "navMenu" . }}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
document.getElementById('menu-toggle').addEventListener('click', function () {
|
|
var menu = document.getElementById('menu');
|
|
menu.classList.toggle('hidden');
|
|
});
|
|
</script>
|
|
<nav class="bg-gray-50 dark:bg-gray-700 hidden lg:block">
|
|
<div class="max-w-screen-xl px-4 py-3 mx-auto">
|
|
<div class="flex items-center">
|
|
<ul class="flex flex-row font-medium mt-0 space-x-8 rtl:space-x-reverse text-sm">
|
|
{{ template "navMenu" . }}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<div class="lg:flex justify-center px-2 py-2 max-w-screen-2xl" style="width: 100vw;">
|
|
<div class="main">
|
|
{{ template "main" . }}
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/flowbite.min.js"></script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|
|
|
|
{{ define "navMenu"}}
|
|
<li>
|
|
<a href="/" class="text-gray-900 dark:text-white hover:underline" aria-current="page">Home</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/test" class="text-gray-900 dark:text-white hover:underline">Test</a>
|
|
</li>
|
|
|
|
{{end}}
|