Klassenloses CSS-Framework (self-hosted unter static/, kein CDN), passt zum bestehenden Ansatz ohne JS-Build-Schritt. Bringt automatisches Dark/Light-Mode (prefers-color-scheme) und Responsivität ohne Zusatzaufwand. Templates auf Picos semantische Konventionen umgestellt (label/input-Paare, article für die Login-Karte, figure um Tabellen für horizontales Scrollen). Eigene CSS-Regeln auf die zwei Farb-Utility- Klassen (state-present/state-absent) reduziert, Rest kommt von Pico. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
29 lines
961 B
HTML
29 lines
961 B
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}Tuxflotte{% endblock %}</title>
|
|
<link rel="stylesheet" href="/static/pico.min.css">
|
|
<style>
|
|
.state-present { color: var(--pico-ins-color); font-weight: 600; }
|
|
.state-absent { color: var(--pico-muted-color); }
|
|
.optionen label { font-weight: normal; }
|
|
td form { margin-bottom: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="container">
|
|
<nav>
|
|
<ul><li><strong><a href="/geraete">Tuxflotte Kundenplattform</a></strong></li></ul>
|
|
{% if user %}
|
|
<ul><li>{{ user.email }}</li><li><a href="/logout" role="button" class="secondary outline">Abmelden</a></li></ul>
|
|
{% endif %}
|
|
</nav>
|
|
</header>
|
|
<main class="container">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</body>
|
|
</html>
|