hallo

static/css/style.css

@@ -1,3 +1,172 @@
-body {
+:root {
-    font-family: "Comic Sans MS" !important;
+    --bg: #0f1724; /* dunkler Hintergrund, wiki-ähnlich */
+    --card: #0b1530;
+    --accent: #ffcc33; /* Akzentfarbe */
+    --muted: #9aa4b2;
+    --text: #e6eef8;
+    --glass: rgba(255, 255, 255, 0.03);
+}
+
+* {
+    box-sizing: border-box
+}
+
+html, body {
+    height: 100%
+}
+
+body {
+    margin: 0;
+    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+    background: linear-gradient(180deg, #071022 0%, #0b1230 60%);
+    color: var(--text);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.45;
+}
+
+/* Container */
+.wrap {
+    max-width: 1200px;
+    margin: 28px auto;
+    padding: 20px
+}
+
+/* Topbar */
+header.topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 18px;
+    background: var(--glass);
+    border-radius: 12px
+}
+
+.brand {
+    display: flex;
+    gap: 12px;
+    align-items: center
+}
+
+.logo {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, var(--accent), #ff9a3c);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    color: #081022
+}
+
+.brand h1 {
+    margin: 0;
+    font-size: 1.05rem
+}
+
+.search {
+    display: flex;
+    align-items: center;
+    gap: 8px
+}
+
+.search input {
+    padding: 8px 12px;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: transparent;
+    color: var(--text);
+    outline: none
+}
+
+/* Layout */
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    gap: 18px;
+    margin-top: 18px
+}
+
+main.card {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
+    padding: 18px;
+    border-radius: 12px
+}
+
+aside.sidebar {
+    background: var(--card);
+    padding: 16px;
+    border-radius: 12px;
+    height: fit-content
+}
+
+/* Article */
+h2.title {
+    margin-top: 0
+}
+
+.meta {
+    color: var(--muted);
+    font-size: 0.9rem;
+    margin-bottom: 10px
+}
+
+.hero {
+    height: 180px;
+    border-radius: 8px;
+    background-size: cover;
+    background-position: center;
+    margin-bottom: 12px;
+    overflow: hidden
+}
+
+/* Cards */
+.card-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px
+}
+
+.mini-card {
+    flex: 1 1 160px;
+    background: rgba(255, 255, 255, 0.02);
+    padding: 10px;
+    border-radius: 10px
+}
+
+/* Footer */
+footer {
+    margin-top: 24px;
+    text-align: center;
+    color: var(--muted);
+    font-size: 0.9rem
+}
+
+/* Responsive */
+@media (max-width: 880px) {
+    .grid {
+        grid-template-columns:1fr;
+    }
+
+    .search {
+        display: none
+    }
+}
+
+/* Small helpers */
+a.button {
+    display: inline-block;
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: var(--accent);
+    color: #081022;
+    text-decoration: none;
+    font-weight: 600
+}
+
+nav a {
+    color: var(--muted);
+    text-decoration: none;
+    margin-right: 12px
 }

templates/base.html

@@ -4,71 +4,18 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>{% block title %}Spiel-Fandom{% endblock %} — {{ site_name or 'My Game Wiki' }}</title>
-  <meta name="description" content="{% block description %}Fandom-Seite für {{ site_name or 'ein Spiel' }}{% endblock %}">
+    <meta name="description"
+          content="{% block description %}Fandom-Seite für {{ site_name or 'ein Spiel' }}{% endblock %}">
 
     <!-- Google Font (optional) -->
     <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="stylesheet" href="/static/css/style.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet">
-
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <!-- Basis-CSS (kleines, leichtes Fandom-Look) -->
     <style>
-    :root{
-      --bg:#0f1724; /* dunkler Hintergrund, wiki-ähnlich */
-      --card:#0b1530;
-      --accent:#ffcc33; /* Akzentfarbe */
-      --muted:#9aa4b2;
-      --text:#e6eef8;
-      --glass: rgba(255,255,255,0.03);
-    }
-    *{box-sizing:border-box}
-    html,body{height:100%}
-    body{
-      margin:0;
-      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
-      background: linear-gradient(180deg, #071022 0%, #0b1230 60%);
-      color:var(--text);
-      -webkit-font-smoothing:antialiased;
-      -moz-osx-font-smoothing:grayscale;
-      line-height:1.45;
-    }
 
-    /* Container */
-    .wrap{max-width:1200px;margin:28px auto;padding:20px}
-
-    /* Topbar */
-    header.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--glass);border-radius:12px}
-    .brand{display:flex;gap:12px;align-items:center}
-    .logo{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#ff9a3c);display:flex;align-items:center;justify-content:center;font-weight:800;color:#081022}
-    .brand h1{margin:0;font-size:1.05rem}
-    .search{display:flex;align-items:center;gap:8px}
-    .search input{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);outline:none}
-
-    /* Layout */
-    .grid{display:grid;grid-template-columns: 1fr 320px;gap:18px;margin-top:18px}
-    main.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px}
-    aside.sidebar{background:var(--card);padding:16px;border-radius:12px;height:fit-content}
-
-    /* Article */
-    h2.title{margin-top:0}
-    .meta{color:var(--muted);font-size:0.9rem;margin-bottom:10px}
-    .hero{height:180px;border-radius:8px;background-size:cover;background-position:center;margin-bottom:12px;overflow:hidden}
-
-    /* Cards */
-    .card-row{display:flex;flex-wrap:wrap;gap:12px}
-    .mini-card{flex:1 1 160px;background:rgba(255,255,255,0.02);padding:10px;border-radius:10px}
-
-    /* Footer */
-    footer{margin-top:24px;text-align:center;color:var(--muted);font-size:0.9rem}
-
-    /* Responsive */
-    @media(max-width:880px){
-      .grid{grid-template-columns:1fr;}
-      .search{display:none}
-    }
-
-    /* Small helpers */
-    a.button{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--accent);color:#081022;text-decoration:none;font-weight:600}
-    nav a{color:var(--muted);text-decoration:none;margin-right:12px}
     </style>
 
     {% block extra_head %}{% endblock %}
@@ -80,13 +27,15 @@
             <div class="logo">GF</div>
             <div>
                 <h1>{{ site_name or 'Game Fandom' }}</h1>
-          <div style="font-size:0.85rem;color:var(--muted)">{% block tagline %}Community-geführtes Wiki & Guides{% endblock %}</div>
+                <div style="font-size:0.85rem;color:var(--muted)">{% block tagline %}Community-geführtes Wiki &
+                    Guides{% endblock %}</div>
             </div>
         </div>
 
         <div class="search" role="search">
             <form action="{{ url_for('search') }}" method="get">
-          <input name="q" placeholder="Suche Artikel, Charaktere, Items..." aria-label="Suche" value="{{ request.args.get('q','') }}">
+                <input name="q" placeholder="Suche Artikel, Charaktere, Items..." aria-label="Suche"
+                       value="{{ request.args.get('q','') }}">
             </form>
         </div>
     </header>
@@ -98,7 +47,8 @@
     <div class="grid">
         <main class="card">
             {% block hero %}
-          <div class="hero" style="background-image: url('{{ url_for('static', filename='images/hero.jpg') }}');"></div>
+                <div class="hero"
+                     style="background-image: url('{{ url_for('static', filename='images/hero.jpg') }}');"></div>
             {% endblock %}
 
             <article>
@@ -151,14 +101,16 @@
 
             <div>
                 <h4>Über</h4>
-          <p style="color:var(--muted);font-size:0.95rem">{% block about_snippet %}Fandom-Community. Leitfäden, Lore, Builds und mehr.{% endblock %}</p>
+                <p style="color:var(--muted);font-size:0.95rem">{% block about_snippet %}Fandom-Community. Leitfäden,
+                    Lore, Builds und mehr.{% endblock %}</p>
             </div>
         </aside>
     </div>
 
     <footer>
         <div>© {{ current_year or 2025 }} {{ site_name or 'Game Fandom' }} — Erstellt mit ❤️</div>
-      <div style="margin-top:6px;color:var(--muted);font-size:0.85rem">Powered by Flask • <a href="#">Datenschutz</a></div>
+        <div style="margin-top:6px;color:var(--muted);font-size:0.85rem">Powered by Flask • <a href="#">Datenschutz</a>
+        </div>
     </footer>
 </div>
 
@@ -168,10 +120,14 @@
         document.addEventListener('keydown', function (e) {
             if (e.key === "/" && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
                 const q = document.querySelector('.search input');
-        if(q){e.preventDefault();q.focus();}
+                if (q) {
+                    e.preventDefault();
+                    q.focus();
+                }
             }
         });
     </script>
 {% endblock %}
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
 </body>
 </html>

templates/login.html

@@ -3,15 +3,16 @@
 {% block page_title %}Anmelden{% endblock %}
 {% block content %}
     <form method="post" action="{{ url_for('login') }}" class="auth-form">
-<label for="username">Benutzername</label>
+        <div class="mb-3">
-<input type="text" id="username" name="username" required>
+            <label for="exampleInputEmail1" class="form-label">Email address</label>
-
+            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
-
+            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
-<label for="password">Passwort</label>
+        </div>
-<input type="password" id="password" name="password" required>
+        <div class="mb-3">
-
+            <label for="exampleInputPassword1" class="form-label">Password</label>
-
+            <input type="password" class="form-control" id="exampleInputPassword1">
-<button type="submit">Login</button>
+        </div>
+        <button type="submit" class="btn btn-primary">Submit</button>
     </form>
     <p>Noch keinen Account? <a href="{{ url_for('register') }}">Jetzt registrieren</a>.</p>
 {% endblock %}