Redesign Gitea-like

templates/add_entry.html

@@ -1,28 +1,40 @@
 {% extends "base.html" %}
 {% block title %}Neue Fahrt – PBT{% endblock %}
 {% block content %}
+  <div class="card">
     <h2>Neue Fahrt erfassen</h2>
     <form method="post">
-    <label for="verkehrsmittel">Verkehrsmittel</label>
+      <div class="field">
+        <label for="verkehrsmittel">Verkehrsmittel<span class="required">*</span></label>
         <select id="verkehrsmittel" name="verkehrsmittel" required>
           {% for option in verkehrsmittel_optionen %}
             <option value="{{ option }}">{{ option }}</option>
           {% endfor %}
         </select>
+      </div>
 
-    <label for="linie">Linie (optional)</label>
+      <div class="field">
+        <label for="linie">Linie</label>
         <input type="text" id="linie" name="linie" placeholder="z.B. S3, Bus 10">
+      </div>
 
-    <label for="von">Von</label>
+      <div class="field">
+        <label for="von">Von<span class="required">*</span></label>
         <input type="text" id="von" name="von" required>
+      </div>
 
-    <label for="nach">Nach</label>
+      <div class="field">
+        <label for="nach">Nach<span class="required">*</span></label>
         <input type="text" id="nach" name="nach" required>
+      </div>
 
-    <label for="datum">Datum</label>
+      <div class="field">
+        <label for="datum">Datum<span class="required">*</span></label>
         <input type="date" id="datum" name="datum" value="{{ heute }}" required>
+      </div>
 
-    <label for="bewertung">Bewertung (1–5)</label>
+      <div class="field">
+        <label for="bewertung">Bewertung<span class="required">*</span></label>
         <select id="bewertung" name="bewertung" required>
           <option value="5">★★★★★ Sehr gut</option>
           <option value="4">★★★★☆ Gut</option>
@@ -30,10 +42,14 @@
           <option value="2">★★☆☆☆ Schlecht</option>
           <option value="1">★☆☆☆☆ Sehr schlecht</option>
         </select>
+      </div>
 
-    <label for="kommentar">Kommentar (optional)</label>
+      <div class="field">
+        <label for="kommentar">Kommentar</label>
         <textarea id="kommentar" name="kommentar" rows="3"></textarea>
+      </div>
 
       <button type="submit">Speichern</button>
     </form>
+  </div>
 {% endblock %}

templates/base.html

@@ -5,42 +5,135 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}PBT – Öffi-Erfahrungen{% endblock %}</title>
   <style>
-    :root { color-scheme: light dark; }
+    :root {
+      --bg: #0d1117;
+      --panel: #161b22;
+      --panel-border: #30363d;
+      --field-bg: #0d1117;
+      --field-border: #30363d;
+      --field-border-focus: #4a9eff;
+      --text: #e6edf3;
+      --text-muted: #8b949e;
+      --accent: #4a9eff;
+      --accent-hover: #3d8ce6;
+      --danger: #f85149;
+      --success: #3fb950;
+    }
+    * { box-sizing: border-box; }
     body {
-      font-family: system-ui, -apple-system, sans-serif;
-      max-width: 700px;
-      margin: 2rem auto;
-      padding: 0 1rem;
+      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      max-width: 720px;
+      margin: 0 auto;
+      padding: 2rem 1rem;
       line-height: 1.5;
     }
-    header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 2rem;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
     header h1 { font-size: 1.3rem; margin: 0; }
-    nav a { margin-left: 1rem; }
-    .flash { padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
-    .flash.error { background: #fbdada; color: #7a1c1c; }
-    .flash.success { background: #d8f5d8; color: #1c5e1c; }
-    form { display: flex; flex-direction: column; gap: 0.8rem; max-width: 420px; }
-    label { font-weight: 600; font-size: 0.9rem; }
+    nav a { margin-left: 1rem; color: var(--text-muted); }
+    nav a:hover { color: var(--accent); }
+
+    .flash { padding: 0.7rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
+    .flash.error { background: rgba(248, 81, 73, 0.15); color: #ffa198; border: 1px solid rgba(248, 81, 73, 0.4); }
+    .flash.success { background: rgba(63, 185, 80, 0.15); color: #56d364; border: 1px solid rgba(63, 185, 80, 0.4); }
+
+    .card {
+      background: var(--panel);
+      border: 1px solid var(--panel-border);
+      border-radius: 10px;
+      padding: 1.5rem;
+      max-width: 420px;
+      margin: 0 auto;
+    }
+    .card h2 { text-align: center; margin-top: 0; font-size: 1.15rem; font-weight: 600; }
+
+    form { display: flex; flex-direction: column; gap: 1rem; }
+    label {
+      font-weight: 600;
+      font-size: 0.85rem;
+      color: var(--text);
+      margin-bottom: 0.35rem;
+      display: block;
+    }
+    label .required { color: var(--danger); margin-left: 2px; }
+    .label-row { display: flex; justify-content: space-between; align-items: baseline; }
+    .label-row a { font-size: 0.8rem; }
+
     input, select, textarea {
-      padding: 0.5rem;
-      font-size: 1rem;
-      border: 1px solid #999;
+      width: 100%;
+      padding: 0.6rem 0.7rem;
+      font-size: 0.95rem;
+      background: var(--field-bg);
+      border: 1px solid var(--field-border);
       border-radius: 6px;
+      color: var(--text);
+      font-family: inherit;
     }
-    button {
-      padding: 0.6rem 1rem;
-      font-size: 1rem;
-      border: none;
+    input:focus, select:focus, textarea:focus {
+      outline: none;
+      border-color: var(--field-border-focus);
+      box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
+    }
+    input::placeholder { color: var(--text-muted); }
+
+    .field { display: flex; flex-direction: column; }
+
+    button, .btn {
+      padding: 0.65rem 1rem;
+      font-size: 0.95rem;
+      font-weight: 600;
+      border: 1px solid transparent;
       border-radius: 6px;
-      background: #1a5fb4;
-      color: white;
+      background: var(--accent);
+      color: #fff;
       cursor: pointer;
-      width: fit-content;
+      width: 100%;
     }
-    button.secondary { background: #999; }
+    button:hover, .btn:hover { background: var(--accent-hover); }
+    button.secondary {
+      background: transparent;
+      border: 1px solid var(--panel-border);
+      color: var(--text);
+    }
+    button.secondary:hover { background: rgba(255,255,255,0.04); }
+
+    .divider {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      margin: 0.25rem 0;
+    }
+    .divider::before, .divider::after {
+      content: "";
+      flex: 1;
+      height: 1px;
+      background: var(--panel-border);
+    }
+
+    .card-footer {
+      text-align: center;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      margin-top: 1rem;
+    }
+
     table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
-    th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #ddd; }
-    .stars { color: #d4a017; }
+    th, td { text-align: left; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--panel-border); font-size: 0.9rem; }
+    th { color: var(--text-muted); font-weight: 600; }
+    .stars { color: #e3b341; white-space: nowrap; }
   </style>
 </head>
 <body>

templates/dashboard.html

@@ -1,10 +1,13 @@
 {% extends "base.html" %}
 {% block title %}Meine Fahrten – PBT{% endblock %}
 {% block content %}
-  <h2>Meine Fahrten</h2>
+  <h2 style="font-size: 1.1rem; font-weight: 600;">Meine Fahrten</h2>
 
   {% if not fahrten %}
-    <p>Noch keine Fahrten erfasst. <a href="{{ url_for('neue_fahrt') }}">Jetzt die erste hinzufügen</a>.</p>
+    <div class="card" style="text-align: center;">
+      <p style="color: var(--text-muted);">Noch keine Fahrten erfasst.</p>
+      <a href="{{ url_for('neue_fahrt') }}" class="btn" style="display: inline-block; width: auto; padding: 0.6rem 1.2rem;">Erste Fahrt hinzufügen</a>
+    </div>
   {% else %}
     <table>
       <thead>
@@ -26,13 +29,13 @@
             <td>{{ f.von }} → {{ f.nach }}</td>
             <td class="stars">{{ "★" * f.bewertung }}{{ "☆" * (5 - f.bewertung) }}</td>
             <td>
-              <form method="post" action="{{ url_for('fahrt_loeschen', fahrt_id=f.id) }}" onsubmit="return confirm('Fahrt wirklich löschen?');">
-                <button type="submit" class="secondary">Löschen</button>
+              <form method="post" action="{{ url_for('fahrt_loeschen', fahrt_id=f.id) }}" onsubmit="return confirm('Fahrt wirklich löschen?');" style="margin: 0;">
+                <button type="submit" class="secondary" style="width: auto; padding: 0.35rem 0.7rem; font-size: 0.8rem;">Löschen</button>
               </form>
             </td>
           </tr>
           {% if f.kommentar %}
-            <tr><td></td><td colspan="5" style="color:#666;">{{ f.kommentar }}</td></tr>
+            <tr><td></td><td colspan="5" style="color: var(--text-muted); font-size: 0.85rem;">{{ f.kommentar }}</td></tr>
           {% endif %}
         {% endfor %}
       </tbody>

templates/login.html

@@ -1,15 +1,24 @@
 {% extends "base.html" %}
-{% block title %}Login – PBT{% endblock %}
+{% block title %}Anmelden – PBT{% endblock %}
 {% block content %}
-  <h2>Login</h2>
+  <div class="card">
+    <h2>Anmelden</h2>
     <form method="post">
-    <label for="username">Benutzername</label>
+      <div class="field">
+        <label for="username">Benutzername<span class="required">*</span></label>
         <input type="text" id="username" name="username" required autofocus>
+      </div>
 
-    <label for="password">Passwort</label>
+      <div class="field">
+        <label for="password">Passwort<span class="required">*</span></label>
         <input type="password" id="password" name="password" required>
+      </div>
 
-    <button type="submit">Einloggen</button>
+      <button type="submit">Anmelden</button>
     </form>
-  <p>Noch kein Konto? <a href="{{ url_for('register') }}">Jetzt registrieren</a></p>
+
+    <div class="card-footer">
+      Noch kein Konto? <a href="{{ url_for('register') }}">Jetzt registrieren.</a>
+    </div>
+  </div>
 {% endblock %}

templates/register.html

@@ -1,18 +1,29 @@
 {% extends "base.html" %}
 {% block title %}Registrieren – PBT{% endblock %}
 {% block content %}
-  <h2>Registrieren</h2>
+  <div class="card">
+    <h2>Konto erstellen</h2>
     <form method="post">
-    <label for="username">Benutzername</label>
+      <div class="field">
+        <label for="username">Benutzername<span class="required">*</span></label>
         <input type="text" id="username" name="username" required autofocus>
+      </div>
 
-    <label for="email">E-Mail</label>
+      <div class="field">
+        <label for="email">E-Mail<span class="required">*</span></label>
         <input type="email" id="email" name="email" required>
+      </div>
 
-    <label for="password">Passwort</label>
+      <div class="field">
+        <label for="password">Passwort<span class="required">*</span></label>
         <input type="password" id="password" name="password" required minlength="8">
+      </div>
 
       <button type="submit">Konto erstellen</button>
     </form>
-  <p>Schon registriert? <a href="{{ url_for('login') }}">Zum Login</a></p>
+
+    <div class="card-footer">
+      Schon registriert? <a href="{{ url_for('login') }}">Zum Login.</a>
+    </div>
+  </div>
 {% endblock %}