98 lines
5.3 KiB
HTML
98 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-full" style="color-scheme: dark;">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="color-scheme" content="dark">
|
|
<title>{% block title %}Stick Template{% endblock %}</title>
|
|
<!-- Compiled Tailwind CSS stylesheet -->
|
|
<link rel="stylesheet" href="/static/tailwind.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<!-- HTMX & Hyperscript CDN -->
|
|
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
|
<!-- Consolidated Combobox Script -->
|
|
<script src="/static/js/combobox.js" defer></script>
|
|
<!-- Consolidated Components Script -->
|
|
<script src="/static/js/components.js" defer></script>
|
|
<!-- Style adjustments -->
|
|
<style>
|
|
body {
|
|
font-family: 'Outfit', sans-serif;
|
|
background-color: hsl(var(--background));
|
|
background-image:
|
|
radial-gradient(at 50% 0%, hsla(240, 5%, 26%, 0.04) 0%, transparent 60%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col min-h-screen text-foreground selection:bg-sky-500 selection:text-white">
|
|
<!-- Toast notifications container -->
|
|
<div id="toast-container" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"></div>
|
|
|
|
<!-- Header / Navbar -->
|
|
<header class="border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16 items-center">
|
|
<!-- Logo -->
|
|
<div class="flex items-center space-x-3">
|
|
<a href="/" class="flex items-center space-x-2.5 group">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-sky-400 to-indigo-600 flex items-center justify-center shadow-lg shadow-sky-500/20 group-hover:scale-105 transition-all duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5 text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-xl font-bold tracking-tight bg-gradient-to-r from-slate-100 to-slate-300 bg-clip-text text-transparent group-hover:from-white group-hover:to-slate-200 transition duration-300">
|
|
stick
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation Links -->
|
|
<nav class="flex items-center space-x-4">
|
|
<a href="/components" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
|
Design Wiki
|
|
</a>
|
|
{% if authenticated %}
|
|
<a href="/tasks" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
|
Dashboard
|
|
</a>
|
|
<a href="/developers" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
|
Developers
|
|
</a>
|
|
<div class="h-4 w-px bg-secondary"></div>
|
|
<span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-secondary border border-border text-sky-400">
|
|
{{ username }}
|
|
</span>
|
|
<form action="/auth/logout" method="post" class="inline">
|
|
<button type="submit" class="text-sm font-medium text-rose-400 hover:text-rose-300 transition py-2 px-3 rounded-lg hover:bg-rose-950/20">
|
|
Logout
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<a href="/auth/login" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
|
Log In
|
|
</a>
|
|
<a href="/auth/register" class="text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-90 transition px-4 py-2 rounded-xl shadow-md shadow-sky-500/10">
|
|
Sign Up
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="grow flex flex-col">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-slate-950 bg-card/50 py-6 text-center text-xs text-slate-500">
|
|
<div class="max-w-7xl mx-auto px-4">
|
|
<p>© 2026 Stick Template. Built with Axum, Askama, and MongoDB. Styled with Tailwind CSS.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|