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:
lofyer
2026-07-04 07:54:22 +08:00
co-authored by factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
parent 628246c5c5
commit 08b32d2aa9
9 changed files with 466 additions and 277 deletions
+18 -16
View File
@@ -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>