bs

Merge remote-tracking branch 'origin/main'
2025-10-02 08:20:36 +02:00 · 2025-09-12 09:10:37 +02:00 · 2025-09-12 09:02:18 +02:00 · 2025-09-12 09:02:09 +02:00
3 changed files with 210 additions and 164 deletions
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,3 +1,88 @@
-body {
-    font-family: "Comic Sans MS" !important;
+/* Bootstrap Dark Mode aktivieren */
+:root, [data-bs-theme=dark] {
+    --bs-body-bg: #0f1724; /* Hintergrund */
+    --bs-body-color: #e6eef8; /* Textfarbe */
+    --bs-border-color: rgba(255,255,255,0.1);
+    --bs-link-color: #ffcc33;
+    --bs-link-hover-color: #ffdb66;
+
+    /* Deine Custom-Werte */
+    --accent: #ffcc33;
+}
+
+/* Container */
+.wrap {
+    max-width: 1200px;
+    margin: 28px auto;
+    padding: 20px;
+}
+
+/* Topbar */
+header.topbar {
+    @extend .d-flex, .align-items-center, .justify-content-between, .rounded-3, .p-3;
+    background: var(--bs-dark-bg-subtle, rgba(255,255,255,0.05));
+}
+
+.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;
+}
+
+/* Layout */
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    gap: 18px;
+    margin-top: 18px;
+}
+
+main.card, aside.sidebar {
+    background: var(--bs-dark-bg-subtle, rgba(255,255,255,0.05));
+    padding: 18px;
+    border-radius: 12px;
+}
+
+/* Hero */
+.hero {
+    height: 180px;
+    border-radius: 8px;
+    background-size: cover;
+    background-position: center;
+    margin-bottom: 12px;
+    overflow: hidden;
+}
+
+/* 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(--bs-secondary-color);
+    text-decoration: none;
+    margin-right: 12px;
+}
+
+/* Responsive */
+@media (max-width: 880px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+
+    .search {
+        display: none;
+    }
 }
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,92 +1,45 @@
 <!doctype html>
-<html lang="de">
+<html lang="de" data-bs-theme=dark>
 <head>
    <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">
-
-  <!-- Basis-CSS (kleines, leichtes Fandom-Look) -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <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 %}
 </head>
 <body>
-  <div class="wrap">
-    <header class="topbar">
+<div class="wrap">
+    <header class="topbar d-flex justify-content-between p-3">
        <div class="brand">
            <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">
+        <div class="search m-2 d-flex align-items-end" role="search">
+            <div>
+                {% block login_logout %}
+
+                {% endblock %}
+            </div>
+
            <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','') }}" class="form-control">
            </form>
        </div>
    </header>
@@ -96,9 +49,10 @@
    </nav>

    <div class="grid">
-      <main class="card">
+        <main class="card border-0">
            {% 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,27 +105,33 @@

            <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>
-    </footer>
+        <div style="margin-top:6px;color:var(--muted);font-size:0.85rem">Powered by Flask • <a href="#">Datenschutz</a>
        </div>
+    </footer>
+</div>

-  {% block scripts %}
+{% block scripts %}
    <script>
        // kleines Script: z.B. optionales keyboard shortcut für Suche (/)
-    document.addEventListener('keydown', function(e){
-      if(e.key === "/" && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA'){
+        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 %}
+{% 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>
--- a/templates/login.html
+++ b/templates/login.html
@@ -2,16 +2,17 @@
 {% block title %}Login{% endblock %}
 {% block page_title %}Anmelden{% endblock %}
 {% block content %}
-<form method="post" action="{{ url_for('login') }}" class="auth-form">
-<label for="username">Benutzername</label>
-<input type="text" id="username" name="username" required>
-
-
-<label for="password">Passwort</label>
-<input type="password" id="password" name="password" required>
-
-
-<button type="submit">Login</button>
-</form>
-<p>Noch keinen Account? <a href="{{ url_for('register') }}">Jetzt registrieren</a>.</p>
+    <form method="post" action="{{ url_for('login') }}" class="auth-form">
+        <div class="mb-3">
+            <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>
+        </div>
+        <div class="mb-3">
+            <label for="exampleInputPassword1" class="form-label">Password</label>
+            <input type="password" class="form-control" id="exampleInputPassword1">
+        </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 %}
Author	SHA1	Message	Date
JohannesBOT	ba1d36b71a	bs	2025-10-02 08:20:36 +02:00
JohannesBOT	c27a054497	bs	2025-09-12 09:10:37 +02:00
JohannesBOT	a0095a993a	Merge remote-tracking branch 'origin/main'	2025-09-12 09:02:18 +02:00
JohannesBOT	db6b16d261	hallo	2025-09-12 09:02:09 +02:00