Add backlogger app at /backlogger/ with login protection

Django app with Item model (games/books/films/other categories), CRUD views, and login-required access. Login page at /accounts/login/ uses custom dark-themed template consistent with the site design. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-29 22:18:32 +03:00
parent 62bb86f11d
commit a8ab5f6ce1
14 changed files with 825 additions and 0 deletions
--- a/backlogger/templates/backlogger/login.html
+++ b/backlogger/templates/backlogger/login.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Log in — k-boris.tech</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #0f172a;
+      color: #e2e8f0;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .card {
+      background: #0a0f1e;
+      border: 1px solid #1e293b;
+      border-radius: 12px;
+      padding: 2.5rem 2rem;
+      width: 100%;
+      max-width: 360px;
+    }
+    .brand {
+      display: block;
+      text-align: center;
+      color: #38bdf8;
+      font-weight: 600;
+      font-size: 1.1rem;
+      margin-bottom: 0.4rem;
+      text-decoration: none;
+    }
+    .subtitle {
+      text-align: center;
+      color: #64748b;
+      font-size: 0.85rem;
+      margin-bottom: 2rem;
+    }
+    .field { margin-bottom: 1.1rem; }
+    .field label {
+      display: block;
+      font-size: 0.78rem;
+      color: #94a3b8;
+      text-transform: uppercase;
+      letter-spacing: 0.07em;
+      margin-bottom: 0.4rem;
+    }
+    .field input {
+      width: 100%;
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 6px;
+      color: #e2e8f0;
+      padding: 0.6rem 0.75rem;
+      font-size: 0.9rem;
+    }
+    .field input:focus { outline: none; border-color: #38bdf8; }
+    .btn {
+      width: 100%;
+      background: #38bdf8;
+      color: #0f172a;
+      font-weight: 600;
+      border: none;
+      border-radius: 6px;
+      padding: 0.6rem;
+      font-size: 0.9rem;
+      cursor: pointer;
+      margin-top: 0.5rem;
+    }
+    .btn:hover { opacity: 0.88; }
+    .errorlist { list-style: none; color: #f87171; font-size: 0.8rem; margin-top: 0.3rem; }
+    .error-banner {
+      background: #450a0a;
+      border: 1px solid #f87171;
+      border-radius: 6px;
+      color: #fca5a5;
+      font-size: 0.83rem;
+      padding: 0.6rem 0.85rem;
+      margin-bottom: 1.25rem;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <a class="brand" href="/">k-boris.tech</a>
+    <p class="subtitle">Backlogger</p>
+
+    {% if form.non_field_errors %}
+    <div class="error-banner">Invalid username or password.</div>
+    {% endif %}
+
+    <form method="post">
+      {% csrf_token %}
+      <input type="hidden" name="next" value="{{ next }}">
+
+      <div class="field">
+        <label for="{{ form.username.id_for_label }}">Username</label>
+        {{ form.username }}
+        {{ form.username.errors }}
+      </div>
+      <div class="field">
+        <label for="{{ form.password.id_for_label }}">Password</label>
+        {{ form.password }}
+        {{ form.password.errors }}
+      </div>
+
+      <button type="submit" class="btn">Log in</button>
+    </form>
+  </div>
+</body>
+</html>