80 lines
3.7 KiB
HTML
80 lines
3.7 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{% block title %}{{ brand }} · Hub{% endblock %}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root { --bt-accent: {{ accent }}; }
|
|
.bg-bt { background: radial-gradient(1200px 600px at 20% -20%, rgba(138,43,226,0.25), transparent 60%); }
|
|
.btn { @apply inline-flex items-center justify-center px-4 py-2 rounded-xl border border-white/20 hover:border-white/40 text-sm sm:text-[0.95rem]; }
|
|
.btn-block { @apply w-full sm:w-auto; }
|
|
.card { @apply rounded-2xl bg-white/5 border border-white/10; }
|
|
.accent { color: var(--bt-accent); }
|
|
.btn-accent { background: var(--bt-accent); color:#0a0a0a; @apply font-semibold rounded-xl px-4 py-2; }
|
|
.tag { @apply text-xs px-2 py-0.5 rounded border border-white/20 bg-white/5; }
|
|
@media (hover: hover) {.btn:hover { filter: brightness(1.05); }}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-950 text-white min-h-screen">
|
|
{% set is_admin = (session.get('discord_user') and 'admin' in session.get('discord_user',{}).get('site_roles',[])) %}
|
|
<header class="bg-bt border-b border-white/10">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 sm:py-5">
|
|
<div class="flex items-center justify-between">
|
|
<a href="/" class="text-lg sm:text-xl font-extrabold tracking-tight">{{ brand }}</a>
|
|
|
|
<!-- Desktop nav -->
|
|
<nav class="hidden md:flex items-center gap-2 text-sm">
|
|
<a href="{{ url_for('tickets') }}" class="btn">Tickets</a>
|
|
{% if is_admin %}
|
|
<a href="{{ url_for('admin_new_ticket') }}" class="btn">New Ticket</a>
|
|
{% if 'admin_join_requests' in current_app.view_functions %}
|
|
<a href="{{ url_for('admin_join_requests') }}" class="btn">VIP Requests</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if session.get('discord_user') %}
|
|
<span class="text-white/70 text-xs sm:text-sm">Signed in as <b>{{ session['discord_user']['username'] }}</b></span>
|
|
<a class="btn" href="{{ url_for('logout') }}">Log out</a>
|
|
{% else %}
|
|
<a class="btn-accent" href="{{ url_for('discord_login') }}">Sign in with Discord</a>
|
|
{% endif %}
|
|
</nav>
|
|
|
|
<!-- Mobile hamburger -->
|
|
<button id="navToggle" class="md:hidden btn" aria-label="Open menu" aria-expanded="false">☰</button>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<nav id="mobileMenu" class="md:hidden hidden mt-3 grid gap-2">
|
|
<a href="{{ url_for('tickets') }}" class="btn btn-block">Tickets</a>
|
|
{% if is_admin %}
|
|
<a href="{{ url_for('admin_new_ticket') }}" class="btn btn-block">New Ticket</a>
|
|
{% if 'admin_join_requests' in current_app.view_functions %}
|
|
<a href="{{ url_for('admin_join_requests') }}" class="btn btn-block">VIP Requests</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if session.get('discord_user') %}
|
|
<span class="text-white/70 text-sm">Signed in as <b>{{ session['discord_user']['username'] }}</b></span>
|
|
<a class="btn btn-block" href="{{ url_for('logout') }}">Log out</a>
|
|
{% else %}
|
|
<a class="btn-accent btn-block" href="{{ url_for('discord_login') }}">Sign in with Discord</a>
|
|
{% endif %}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-6xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<script>
|
|
const t = document.getElementById('navToggle');
|
|
const m = document.getElementById('mobileMenu');
|
|
t?.addEventListener('click', () => {
|
|
const isOpen = !m.classList.contains('hidden');
|
|
m.classList.toggle('hidden');
|
|
t.setAttribute('aria-expanded', String(!isOpen));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |