Restyle UI with Tailwind CSS: consistent cards, forms, tables and badges across all pages
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
co-authored by
factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
parent
628246c5c5
commit
08b32d2aa9
+18
-16
@@ -4,24 +4,26 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}WireGuard Admin{% endblock %}</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script src="/static/tailwind.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<span class="brand">WireGuard Admin</span>
|
||||
<a href="/">Dashboard</a>
|
||||
<a href="/peers">Peers</a>
|
||||
<a href="/settings">Settings</a>
|
||||
<form method="post" action="/logout" class="inline">
|
||||
<button type="submit" class="link">Logout</button>
|
||||
</form>
|
||||
<body class="min-h-screen bg-slate-100 text-slate-800">
|
||||
<nav class="bg-slate-900 text-slate-300">
|
||||
<div class="mx-auto flex max-w-5xl items-center gap-6 px-6 py-3">
|
||||
<span class="text-base font-bold tracking-wide text-white">WireGuard Admin</span>
|
||||
<a href="/" class="text-sm hover:text-white">Dashboard</a>
|
||||
<a href="/peers" class="text-sm hover:text-white">Peers</a>
|
||||
<a href="/settings" class="text-sm hover:text-white">Settings</a>
|
||||
<form method="post" action="/logout" class="ml-auto">
|
||||
<button type="submit" class="text-sm text-slate-400 hover:text-white">Logout</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="breadcrumbs">
|
||||
<a href="/">Home</a>
|
||||
{% block breadcrumbs %}{% endblock %}
|
||||
</div>
|
||||
{% block content %}{% endblock %}
|
||||
<main class="mx-auto max-w-5xl px-6 py-6">
|
||||
<div class="mb-4 flex items-center gap-1.5 text-sm text-slate-500">
|
||||
<a href="/" class="text-blue-600 hover:underline">Home</a>
|
||||
{% block breadcrumbs %}{% endblock %}
|
||||
</div>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user