update doc

Reviewed-on: #2

CLAUDE.md

@@ -109,6 +109,38 @@ Tests live in `backlogger/tests.py` only. The CI only tests the `backlogger` app
 | Staging/dev | https://debug.killmybacklog.com | `django-dev` | 8081 |
 | Gitea | https://git.k-boris.tech | `gitea` | 3000 |
 | Woodpecker | https://ci.k-boris.tech | `woodpecker-server` | 8000 |
+| Dozzle (logs) | https://logs.k-boris.tech | `dozzle` | 8888 |
+
+## Monitoring & Logs
+
+**Dozzle** at https://logs.k-boris.tech provides a web UI for all Docker container logs.
+Login: username `boris` (password in 1Password / your password manager).
+Use this instead of SSH log-tailing during development.
+
+Auth config lives at `/opt/services/dozzle/users.yml` on the VPS.
+To update password: `docker run --rm httpd:alpine htpasswd -nbB boris 'newpassword'` → paste hash into users.yml.
+
+## Claude Code tooling
+
+### Playwright MCP (browser + screenshots)
+
+Allows Claude to browse the live sites and take screenshots without manual intervention.
+
+Add to `~/.claude/settings.json`:
+
+```json
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest", "--headless"]
+    }
+  }
+}
+```
+
+Requires Node.js / npx available on the machine. `@playwright/mcp` is downloaded on first use.
+Restart Claude Code after editing settings.json.
 
 ## Workflow
 
@@ -116,4 +148,4 @@ Tests live in `backlogger/tests.py` only. The CI only tests the `backlogger` app
 2. Push to `dev` → CI runs tests + deploys to staging automatically
 3. Check staging at https://debug.killmybacklog.com
 4. Merge/push to `main` → CI deploys to production
-5. Tail production logs via SSH if something looks wrong
+5. Check logs at https://logs.k-boris.tech instead of SSH if something looks wrong

backlogger/hltb.py

@@ -36,15 +36,13 @@ def fetch(game_name):
 
 
 def apply_to_item(item):
-    """Fetch HLTB data and save it onto item. Always marks hltb_fetched=True."""
+    """Fetch HLTB data and save it onto item. Silently does nothing on failure."""
     if item.category != 'games' or not item.name:
         return
     data = fetch(item.name)
-    fields = ['hltb_fetched']
+    if data is None:
-    item.hltb_fetched = True
+        return
-    if data is not None:
     item.hltb_main = data['main']
     item.hltb_extra = data['extra']
     item.hltb_complete = data['complete']
-        fields += ['hltb_main', 'hltb_extra', 'hltb_complete']
+    item.save(update_fields=['hltb_main', 'hltb_extra', 'hltb_complete'])
-    item.save(update_fields=fields)

backlogger/management/commands/run_hltb_worker.py

@@ -1,42 +0,0 @@
-import time
-import logging
-from django.core.management.base import BaseCommand
-from django.utils import timezone
-from datetime import timedelta
-from backlogger.models import Item
-from backlogger import hltb as hltb_api
-
-logger = logging.getLogger(__name__)
-
-INITIAL_DELAY_SECONDS = 20
-BETWEEN_LOOKUPS_SECONDS = 5
-IDLE_POLL_SECONDS = 10
-
-
-class Command(BaseCommand):
-    help = 'Background worker: fetches HLTB data for newly created game items.'
-
-    def handle(self, *args, **options):
-        self.stdout.write('HLTB worker started.')
-        while True:
-            cutoff = timezone.now() - timedelta(seconds=INITIAL_DELAY_SECONDS)
-            item = (
-                Item.objects
-                .filter(category=Item.GAMES, hltb_fetched=False, created_at__lte=cutoff)
-                .order_by('created_at')
-                .first()
-            )
-            if item is None:
-                time.sleep(IDLE_POLL_SECONDS)
-                continue
-
-            self.stdout.write(f'Fetching HLTB for: {item.name} (id={item.pk})')
-            try:
-                hltb_api.apply_to_item(item)
-            except Exception as e:
-                logger.exception('HLTB lookup failed for item %s', item.pk)
-                # Mark as fetched anyway to avoid retrying indefinitely
-                item.hltb_fetched = True
-                item.save(update_fields=['hltb_fetched'])
-
-            time.sleep(BETWEEN_LOOKUPS_SECONDS)

backlogger/migrations/0010_item_steam_appid.py

@@ -1,16 +0,0 @@
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('backlogger', '0009_userprofile'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='item',
-            name='steam_appid',
-            field=models.IntegerField(blank=True, null=True),
-        ),
-    ]

backlogger/migrations/0011_item_hltb_fetched.py

@@ -1,16 +0,0 @@
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('backlogger', '0010_item_steam_appid'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='item',
-            name='hltb_fetched',
-            field=models.BooleanField(default=False),
-        ),
-    ]

backlogger/models.py

@@ -60,14 +60,10 @@ class Item(models.Model):
     watched = models.BooleanField(null=True, blank=True)
     duration_minutes = models.IntegerField(null=True, blank=True)
 
-    # Steam
-    steam_appid = models.IntegerField(null=True, blank=True)
-
     # HowLongToBeat estimates (games only)
     hltb_main = models.FloatField(null=True, blank=True)
     hltb_extra = models.FloatField(null=True, blank=True)
     hltb_complete = models.FloatField(null=True, blank=True)
-    hltb_fetched = models.BooleanField(default=False)
 
     class Meta:
         ordering = ['-favorite', 'name']

backlogger/static/backlogger/style.css

@@ -1,105 +0,0 @@
-/* ── Reset ─────────────────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-/* ── Base ──────────────────────────────────────────────────────── */
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  background: #0f172a;
-  color: #e2e8f0;
-  min-height: 100vh;
-}
-a { color: inherit; text-decoration: none; }
-
-/* ── Site header ───────────────────────────────────────────────── */
-.site-header {
-  background: #0a0f1e;
-  border-bottom: 1px solid #1e293b;
-  padding: 0.75rem 2rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
-.site-header nav { display: flex; gap: 1.5rem; align-items: center; }
-.site-header nav a { color: #64748b; font-size: 0.85rem; }
-.site-header nav a:hover { color: #e2e8f0; }
-.site-header nav a.nav-active { color: #e2e8f0; font-weight: 500; }
-
-/* ── Buttons ───────────────────────────────────────────────────── */
-.btn {
-  display: inline-block;
-  padding: 0.45rem 1rem;
-  border-radius: 6px;
-  font-size: 0.85rem;
-  cursor: pointer;
-  border: none;
-  transition: opacity 0.15s;
-  font-family: inherit;
-}
-.btn:hover { opacity: 0.85; }
-.btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
-.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-.btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
-.btn-danger { background: transparent; color: #f87171; border: 1px solid #f87171; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-.btn-danger:hover { background: #f87171; color: #0f172a; opacity: 1; }
-.btn-done { background: transparent; color: #34d399; border: 1px solid #34d399; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-.btn-done:hover { background: #34d399; color: #0f172a; opacity: 1; }
-.btn-abandon { background: transparent; color: #fb923c; border: 1px solid #fb923c; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-.btn-abandon:hover { background: #fb923c; color: #0f172a; opacity: 1; }
-.btn-ghost { background: transparent; color: #64748b; border: 1px solid #334155; }
-.btn-ghost:hover { color: #e2e8f0; opacity: 1; }
-.btn-text { background: none; border: none; color: #64748b; font-size: 0.8rem; cursor: pointer; font-family: inherit; padding: 0; }
-.btn-text:hover { color: #e2e8f0; }
-
-/* ── Form fields ───────────────────────────────────────────────── */
-.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[type="text"],
-.field input[type="number"],
-.field input[type="password"],
-.field select {
-  width: 100%;
-  background: #1e293b;
-  border: 1px solid #334155;
-  border-radius: 6px;
-  color: #e2e8f0;
-  padding: 0.6rem 0.75rem;
-  font-size: 0.9rem;
-  font-family: inherit;
-}
-.field input:focus,
-.field select:focus { outline: none; border-color: #38bdf8; }
-
-/* ── Errors ────────────────────────────────────────────────────── */
-.errorlist { list-style: none; color: #f87171; font-size: 0.8rem; margin-top: 0.3rem; }
-.error-banner {
-  background: #450a0a;
-  border: 1px solid #f87171;
-  border-radius: 8px;
-  color: #fca5a5;
-  padding: 0.85rem 1.1rem;
-  margin-bottom: 1.5rem;
-}
-
-/* ── Light theme ───────────────────────────────────────────────── */
-body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
-body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
-body[data-theme="light"] .site-header .brand { color: #0284c7; }
-body[data-theme="light"] .site-header nav a { color: #64748b; }
-body[data-theme="light"] .btn-primary { background: #0284c7; }
-body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
-body[data-theme="light"] .field input[type="text"],
-body[data-theme="light"] .field input[type="number"],
-body[data-theme="light"] .field input[type="password"],
-body[data-theme="light"] .field select {
-  background: #f1f5f9;
-  color: #0f172a;
-  border-color: #cbd5e1;
-}

backlogger/templates/backlogger/base.html

@@ -1,26 +0,0 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{% block title %}Kill My Backlog{% endblock %}</title>
-  <link rel="stylesheet" href="{% static 'backlogger/style.css' %}">
-  {% block styles %}{% endblock %}
-</head>
-<body data-theme="{{ request.session.theme|default:'dark' }}">
-
-<header class="site-header">
-  <a class="brand" href="{% url 'backlogger:list' %}">Kill My Backlog</a>
-  <nav>
-    <a href="{% url 'backlogger:list' %}" class="{% if request.resolver_match.url_name == 'list' %}nav-active{% endif %}">Library</a>
-    <a href="{% url 'backlogger:live' %}" class="{% if request.resolver_match.url_name == 'live' %}nav-active{% endif %}">Live</a>
-    {% block nav %}{% endblock %}
-  </nav>
-</header>
-
-{% block content %}{% endblock %}
-
-{% block scripts %}{% endblock %}
-</body>
-</html>

backlogger/templates/backlogger/base_auth.html

@@ -1,39 +0,0 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{% block title %}Backlogger{% endblock %}</title>
-  <link rel="stylesheet" href="{% static 'backlogger/style.css' %}">
-  <style>
-    body { display: flex; flex-direction: column; align-items: center; justify-content: center; }
-    .auth-card {
-      background: #0a0f1e;
-      border: 1px solid #1e293b;
-      border-radius: 12px;
-      padding: 2.5rem 2rem;
-      width: 100%;
-      max-width: 360px;
-    }
-    .auth-brand {
-      display: block;
-      text-align: center;
-      color: #38bdf8;
-      font-weight: 600;
-      font-size: 1.1rem;
-      margin-bottom: 0.4rem;
-    }
-    .auth-subtitle {
-      text-align: center;
-      color: #64748b;
-      font-size: 0.85rem;
-      margin-bottom: 2rem;
-    }
-  </style>
-  {% block styles %}{% endblock %}
-</head>
-<body>
-{% block content %}{% endblock %}
-</body>
-</html>

backlogger/templates/backlogger/item_form.html

@@ -1,39 +1,144 @@
-{% extends 'backlogger/base.html' %}
+<!DOCTYPE html>
-
+<html lang="en">
-{% block title %}{{ action }} Item — Backlogger{% endblock %}
+<head>
-
+  <meta charset="UTF-8">
-{% block styles %}
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ action }} Item — Backlogger</title>
   <style>
-  .container { max-width: 520px; margin: 3rem auto; padding: 0 1.5rem; }
+    *, *::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;
+    }
+    a { text-decoration: none; color: inherit; }
 
-  .card { background: #0a0f1e; border: 1px solid #1e293b; border-radius: 12px; padding: 2rem; }
+    .site-header {
+      background: #0a0f1e;
+      border-bottom: 1px solid #1e293b;
+      padding: 0.75rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
+    .site-header nav a { color: #64748b; font-size: 0.85rem; }
+    .site-header nav a:hover { color: #e2e8f0; }
+
+    .container {
+      max-width: 520px;
+      margin: 3rem auto;
+      padding: 0 1.5rem;
+    }
+
+    .card {
+      background: #0a0f1e;
+      border: 1px solid #1e293b;
+      border-radius: 12px;
+      padding: 2rem;
+    }
     h1 { font-size: 1.35rem; margin-bottom: 1.75rem; letter-spacing: -0.02em; }
 
     .field { margin-bottom: 1.25rem; }
-  .field input[type="range"] { width: 100%; accent-color: #38bdf8; cursor: pointer; margin-top: 0.2rem; }
+    .field label {
-  .progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; }
+      display: block;
+      font-size: 0.8rem;
+      color: #94a3b8;
+      text-transform: uppercase;
+      letter-spacing: 0.07em;
+      margin-bottom: 0.4rem;
+    }
+    .field input[type="text"],
+    .field input[type="number"],
+    .field select {
+      width: 100%;
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 6px;
+      color: #e2e8f0;
+      padding: 0.55rem 0.75rem;
+      font-size: 0.9rem;
+    }
+    .field input:focus,
+    .field select:focus { outline: none; border-color: #38bdf8; }
+
+    .field input[type="range"] {
+      width: 100%;
+      accent-color: #38bdf8;
+      cursor: pointer;
+      margin-top: 0.2rem;
+    }
+    .progress-label {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.2rem;
+    }
     .progress-val { color: #38bdf8; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
 
-  .checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
+    .checkbox-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
     .checkbox-row input[type="checkbox"] { accent-color: #38bdf8; width: 1rem; height: 1rem; cursor: pointer; }
-  .checkbox-row label { font-size: 0.9rem; color: #e2e8f0; text-transform: none; letter-spacing: 0; margin-bottom: 0; }
+    .checkbox-row label {
+      font-size: 0.9rem;
+      color: #e2e8f0;
+      text-transform: none;
+      letter-spacing: 0;
+      margin-bottom: 0;
+    }
+
+    .section-divider {
+      border: none;
+      border-top: 1px solid #1e293b;
+      margin: 1.5rem 0 1.25rem;
+    }
+    .section-title {
+      font-size: 0.72rem;
+      color: #64748b;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      margin-bottom: 1rem;
+    }
 
-  .section-divider { border: none; border-top: 1px solid #1e293b; margin: 1.5rem 0 1.25rem; }
-  .section-title { font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
     .optional { color: #475569; font-size: 0.7rem; margin-left: 0.3rem; text-transform: none; letter-spacing: 0; }
 
     .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
 
-  .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
+    .actions {
-  .btn { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 2rem;
+    }
+    .btn {
+      display: inline-block;
+      padding: 0.5rem 1.25rem;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      cursor: pointer;
+      border: none;
+    }
+    .btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
+    .btn-primary:hover { opacity: 0.88; }
+    .btn-ghost { background: transparent; color: #64748b; border: 1px solid #334155; text-decoration: none; padding: 0.5rem 1.25rem; }
+    .btn-ghost:hover { color: #e2e8f0; }
+
+    .errorlist { list-style: none; color: #f87171; font-size: 0.8rem; margin-top: 0.3rem; }
   </style>
-{% endblock %}
+</head>
+<body>
 
-{% block nav %}
+<header class="site-header">
+  <a class="brand" href="/">k-boris.tech</a>
+  <nav>
     <a href="{% url 'backlogger:list' %}">&larr; Back to backlogger</a>
-{% endblock %}
+  </nav>
+</header>
 
-{% block content %}
 <div class="container">
   <div class="card">
     <h1>{{ action }} item</h1>
@@ -69,6 +174,7 @@
         </div>
       </div>
 
+      <!-- Games fields -->
       <div class="cat-section" data-show-category="games">
         <hr class="section-divider">
         <div class="section-title">Games</div>
@@ -94,6 +200,7 @@
         </div>
       </div>
 
+      <!-- Books fields -->
       <div class="cat-section" data-show-category="books">
         <hr class="section-divider">
         <div class="section-title">Books</div>
@@ -111,6 +218,7 @@
         </div>
       </div>
 
+      <!-- Films fields -->
       <div class="cat-section" data-show-category="films">
         <hr class="section-divider">
         <div class="section-title">Films</div>
@@ -136,9 +244,7 @@
     </form>
   </div>
 </div>
-{% endblock %}
 
-{% block scripts %}
 <script>
   const catSelect = document.getElementById('{{ form.category.id_for_label }}');
   const progressRange = document.getElementById('{{ form.progress_percent.id_for_label }}');
@@ -147,9 +253,13 @@
 
   function updateVisibility() {
     const cat = catSelect.value;
+
+    // Show only the section matching the selected category
     document.querySelectorAll('[data-show-category]').forEach(el => {
       el.style.display = el.dataset.showCategory === cat ? 'block' : 'none';
     });
+
+    // Hide fields that are not applicable for the current status
     document.querySelectorAll('[data-hide-status]').forEach(el => {
       el.style.display = el.dataset.hideStatus === itemStatus ? 'none' : '';
     });
@@ -162,4 +272,6 @@
     progressDisplay.textContent = Math.round(this.value) + '%';
   });
 </script>
-{% endblock %}
+
+</body>
+</html>

backlogger/templates/backlogger/list.html

@@ -1,46 +1,60 @@
-{% extends 'backlogger/base.html' %}
+<!DOCTYPE html>
-
+<html lang="en">
-{% block title %}Library — Kill My Backlog{% endblock %}
+<head>
-
+  <meta charset="UTF-8">
-{% block styles %}
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Backlogger — 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;
+    }
+    a { color: inherit; text-decoration: none; }
+
+    .site-header {
+      background: #0a0f1e;
+      border-bottom: 1px solid #1e293b;
+      padding: 0.75rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
+    .site-header nav { display: flex; gap: 1.5rem; align-items: center; }
+    .site-header nav a { color: #64748b; font-size: 0.85rem; }
+    .site-header nav a:hover { color: #e2e8f0; }
+
     .container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
 
-  .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+    .top-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1.5rem;
+    }
     .top-bar h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
     .top-bar .count { color: #64748b; font-size: 1rem; font-weight: 400; margin-left: 0.5rem; }
 
-  .filter-bar { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #1e293b; margin-bottom: 1.5rem; }
+    .btn {
-  .tabs { display: flex; gap: 0; }
+      display: inline-block;
-  .tab { padding: 0.6rem 1rem; font-size: 0.85rem; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+      padding: 0.45rem 1rem;
-  .tab:hover { color: #e2e8f0; }
+      border-radius: 6px;
-  .tab.active { color: #38bdf8; border-bottom-color: #38bdf8; }
+      font-size: 0.85rem;
-  .tab-sep { width: 1px; background: #1e293b; margin: 0.5rem 0.25rem; align-self: stretch; }
+      cursor: pointer;
-
+      border: none;
-  .sort-wrap { padding-bottom: 0.75rem; }
+      transition: opacity 0.15s;
-  .sort-wrap select { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px; padding: 0.3rem 0.65rem; font-size: 0.8rem; cursor: pointer; }
+    }
-
+    .btn:hover { opacity: 0.85; }
-  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
+    .btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
-
+    .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-  .card { background: #0a0f1e; border: 1px solid #1e293b; border-radius: 10px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; }
+    .btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
-  .card-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
+    .btn-danger { background: transparent; color: #f87171; border: 1px solid #f87171; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-  .badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.18rem 0.45rem; border-radius: 4px; }
+    .btn-danger:hover { background: #f87171; color: #0f172a; opacity: 1; }
-  .badge-games { background: #3b2f6a; color: #a78bfa; }
+    .btn-done { background: transparent; color: #34d399; border: 1px solid #34d399; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-  .badge-books { background: #064e3b; color: #34d399; }
+    .btn-done:hover { background: #34d399; color: #0f172a; opacity: 1; }
-  .badge-films { background: #431407; color: #fb923c; }
-  .badge-other { background: #1e293b; color: #94a3b8; }
-  .star { color: #fbbf24; font-size: 0.9rem; margin-left: auto; }
-
-  .card-name { font-size: 1rem; font-weight: 600; margin-bottom: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .progress-bar { height: 4px; background: #1e293b; border-radius: 2px; margin-bottom: 0.3rem; }
-  .progress-fill { height: 100%; background: #38bdf8; border-radius: 2px; min-width: 0; }
-  .card-stat { font-size: 0.78rem; color: #38bdf8; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
-  .card-info { font-size: 0.76rem; color: #64748b; min-height: 1.1em; margin-bottom: 0.85rem; flex: 1; }
-  .card-actions { display: flex; gap: 0.4rem; }
-  .card-actions form { display: inline; }
-
-  .empty { text-align: center; padding: 5rem 2rem; color: #64748b; }
-  .empty a { color: #38bdf8; }
 
     @keyframes complete-glow {
       0%   { box-shadow: 0 0 0px 0px rgba(255,255,255,0);  transform: scale(1); }
@@ -48,8 +62,115 @@
       70%  { box-shadow: 0 0 24px 8px rgba(255,255,255,0.35); transform: scale(1.03); }
       100% { box-shadow: 0 0 0px 0px rgba(255,255,255,0);  transform: scale(1); opacity: 0; }
     }
-  .card.completing { animation: complete-glow 0.7s ease-out forwards; pointer-events: none; }
+    .card.completing {
+      animation: complete-glow 0.7s ease-out forwards;
+      pointer-events: none;
+    }
+    .btn-abandon { background: transparent; color: #fb923c; border: 1px solid #fb923c; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
+    .btn-abandon:hover { background: #fb923c; color: #0f172a; opacity: 1; }
 
+    .filter-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      border-bottom: 1px solid #1e293b;
+      margin-bottom: 1.5rem;
+    }
+    .tabs { display: flex; gap: 0; }
+    .tab {
+      padding: 0.6rem 1rem;
+      font-size: 0.85rem;
+      color: #64748b;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      cursor: pointer;
+    }
+    .tab:hover { color: #e2e8f0; }
+    .tab.active { color: #38bdf8; border-bottom-color: #38bdf8; }
+    .tab-sep { width: 1px; background: #1e293b; margin: 0.5rem 0.25rem; align-self: stretch; }
+
+    .sort-wrap { padding-bottom: 0.75rem; }
+    .sort-wrap select {
+      background: #1e293b;
+      color: #e2e8f0;
+      border: 1px solid #334155;
+      border-radius: 6px;
+      padding: 0.3rem 0.65rem;
+      font-size: 0.8rem;
+      cursor: pointer;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 1rem;
+    }
+
+    .card {
+      background: #0a0f1e;
+      border: 1px solid #1e293b;
+      border-radius: 10px;
+      padding: 1.1rem 1.25rem;
+      display: flex;
+      flex-direction: column;
+    }
+    .card-top {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.6rem;
+    }
+    .badge {
+      font-size: 0.62rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      padding: 0.18rem 0.45rem;
+      border-radius: 4px;
+    }
+    .badge-games { background: #3b2f6a; color: #a78bfa; }
+    .badge-books { background: #064e3b; color: #34d399; }
+    .badge-films { background: #431407; color: #fb923c; }
+    .badge-other { background: #1e293b; color: #94a3b8; }
+    .star { color: #fbbf24; font-size: 0.9rem; margin-left: auto; }
+
+    .card-name {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 0.7rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .progress-bar {
+      height: 4px;
+      background: #1e293b;
+      border-radius: 2px;
+      margin-bottom: 0.3rem;
+    }
+    .progress-fill {
+      height: 100%;
+      background: #38bdf8;
+      border-radius: 2px;
+      min-width: 0;
+    }
+    .card-stat { font-size: 0.78rem; color: #38bdf8; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
+    .card-info { font-size: 0.76rem; color: #64748b; min-height: 1.1em; margin-bottom: 0.85rem; flex: 1; }
+
+    .card-actions { display: flex; gap: 0.4rem; }
+    .card-actions form { display: inline; }
+
+    .empty {
+      text-align: center;
+      padding: 5rem 2rem;
+      color: #64748b;
+    }
+    .empty a { color: #38bdf8; }
+
+    /* Light theme overrides */
+    body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
+    body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
+    body[data-theme="light"] .site-header .brand { color: #0284c7; }
     body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
     body[data-theme="light"] .progress-bar { background: #e2e8f0; }
     body[data-theme="light"] .progress-fill { background: #0284c7; }
@@ -58,37 +179,30 @@
     body[data-theme="light"] .tab-sep { background: #e2e8f0; }
     body[data-theme="light"] .tab.active { color: #0284c7; border-bottom-color: #0284c7; }
     body[data-theme="light"] .sort-wrap select { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
+    body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
+    body[data-theme="light"] .btn-primary { background: #0284c7; }
+    body[data-theme="light"] .site-header nav a { color: #64748b; }
     body[data-theme="light"] .empty a { color: #0284c7; }
   </style>
-{% endblock %}
+</head>
+<body data-theme="{{ request.session.theme|default:'dark' }}">
 
-{% block nav %}
+<header class="site-header">
+  <a class="brand" href="/">k-boris.tech</a>
+  <nav>
     <a href="{% url 'backlogger:profile' %}">{{ request.user.profile.display_name|default:request.user.username }}</a>
     <form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
-{% endblock %}
+  </nav>
+</header>
 
-{% block content %}
 <div class="container">
   <div class="top-bar">
-    <h1>Library <span class="count">{{ items|length }}</span></h1>
+    <h1>Backlogger <span class="count">{{ items|length }}</span></h1>
     <div style="display:flex;gap:0.5rem;align-items:center">
       {% if request.GET.imported %}
       <span style="font-size:0.82rem;color:#34d399">&#10003; {{ request.GET.imported }} game{{ request.GET.imported|pluralize }} imported</span>
       {% endif %}
-      {% if request.GET.synced %}
+      <a href="{% url 'backlogger:steam_login' %}" class="btn btn-outline" style="font-size:0.82rem">&#9654; Steam</a>
-      <span style="font-size:0.82rem;color:#34d399">&#10003; {{ request.GET.synced }} game{{ request.GET.synced|pluralize }} synced</span>
-      {% endif %}
-      {% if request.GET.sync_error %}
-      <span style="font-size:0.82rem;color:#f87171">Steam sync failed</span>
-      {% endif %}
-      <a href="{% url 'backlogger:steam_sync_login' %}" class="btn btn-outline" style="font-size:0.82rem" title="Sync hours played from Steam">&#8635; Sync</a>
-      <a href="{% url 'backlogger:steam_login' %}" class="btn btn-outline" style="font-size:0.82rem">&#9654; Import</a>
-      {% if debug %}
-      <form method="post" action="{% url 'backlogger:debug_delete_all' %}" onsubmit="return confirm('Delete ALL items?')">
-        {% csrf_token %}
-        <button type="submit" class="btn btn-danger" style="font-size:0.82rem">&#128465; Delete all</button>
-      </form>
-      {% endif %}
       <a href="{% url 'backlogger:add' %}" class="btn btn-primary">+ Add item</a>
     </div>
   </div>
@@ -115,7 +229,6 @@
         <option value="newest"   {% if sort == 'newest'   %}selected{% endif %}>Newest first</option>
         <option value="oldest"   {% if sort == 'oldest'   %}selected{% endif %}>Oldest first</option>
         <option value="progress" {% if sort == 'progress' %}selected{% endif %}>Most complete</option>
-        <option value="updated"  {% if sort == 'updated'  %}selected{% endif %}>Recently updated</option>
       </select>
     </div>
   </div>
@@ -200,13 +313,12 @@
   </div>
   {% endif %}
 </div>
-{% endblock %}
 
-{% block scripts %}
 <script>
   function playDing() {
     try {
       const ctx = new (window.AudioContext || window.webkitAudioContext)();
+      // Two-note ding: base note then a fifth above
       [[880, 0, 0.15], [1320, 0.12, 0.28]].forEach(([freq, start, end]) => {
         const osc = ctx.createOscillator();
         const gain = ctx.createGain();
@@ -233,4 +345,6 @@
     });
   });
 </script>
-{% endblock %}
+
+</body>
+</html>

backlogger/templates/backlogger/live.html

@@ -1,111 +0,0 @@
-{% extends 'backlogger/base.html' %}
-
-{% block title %}Live — Kill My Backlog{% endblock %}
-
-{% block styles %}
-<style>
-  .container { max-width: 720px; margin: 0 auto; padding: 2rem; }
-
-  .top-bar { margin-bottom: 2rem; }
-  .top-bar h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
-  .top-bar p { color: #64748b; font-size: 0.85rem; margin-top: 0.35rem; }
-
-  .live-list { display: flex; flex-direction: column; gap: 0.75rem; }
-
-  .live-item {
-    background: #0a0f1e;
-    border: 1px solid #1e293b;
-    border-radius: 10px;
-    padding: 1rem 1.25rem;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-  .live-rank {
-    font-size: 0.75rem;
-    color: #334155;
-    font-variant-numeric: tabular-nums;
-    width: 1.5rem;
-    flex-shrink: 0;
-    text-align: right;
-  }
-  .live-body { flex: 1; min-width: 0; }
-  .live-name {
-    font-size: 0.95rem;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 0.4rem;
-  }
-  .live-meta { display: flex; align-items: center; gap: 0.6rem; }
-  .badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.18rem 0.45rem; border-radius: 4px; }
-  .badge-games { background: #3b2f6a; color: #a78bfa; }
-  .badge-books { background: #064e3b; color: #34d399; }
-  .badge-films { background: #431407; color: #fb923c; }
-  .badge-other { background: #1e293b; color: #94a3b8; }
-  .live-stat { font-size: 0.78rem; color: #64748b; }
-
-  .progress-bar { height: 3px; background: #1e293b; border-radius: 2px; margin-top: 0.5rem; }
-  .progress-fill { height: 100%; background: #38bdf8; border-radius: 2px; }
-
-  .live-time { font-size: 0.75rem; color: #334155; flex-shrink: 0; white-space: nowrap; }
-
-  .empty { text-align: center; padding: 5rem 2rem; color: #64748b; }
-  .empty a { color: #38bdf8; }
-
-  body[data-theme="light"] .live-item { background: #ffffff; border-color: #e2e8f0; }
-  body[data-theme="light"] .progress-bar { background: #e2e8f0; }
-  body[data-theme="light"] .progress-fill { background: #0284c7; }
-  body[data-theme="light"] .live-time { color: #94a3b8; }
-  body[data-theme="light"] .live-rank { color: #94a3b8; }
-</style>
-{% endblock %}
-
-{% block nav %}
-<a href="{% url 'backlogger:profile' %}">{{ request.user.profile.display_name|default:request.user.username }}</a>
-<form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
-{% endblock %}
-
-{% block content %}
-<div class="container">
-  <div class="top-bar">
-    <h1>Live</h1>
-    <p>Your 10 most recently touched items.</p>
-  </div>
-
-  {% if items %}
-  <div class="live-list">
-    {% for item in items %}
-    <div class="live-item">
-      <div class="live-rank">{{ forloop.counter }}</div>
-      <div class="live-body">
-        <div class="live-name" title="{{ item.name }}">{{ item.name }}</div>
-        <div class="live-meta">
-          <span class="badge badge-{{ item.category }}">{{ item.get_category_display }}</span>
-          <span class="live-stat">
-            {% if item.category == 'games' %}
-              {% if item.hours_played is not None %}{{ item.hours_played|floatformat:1 }}h{% endif %}
-            {% elif item.category == 'books' %}
-              {% if item.pages_read is not None %}p. {{ item.pages_read }}{% if item.total_pages %}/{{ item.total_pages }}{% endif %}{% endif %}
-            {% elif item.category == 'films' %}
-              {% if item.watched %}watched{% else %}not watched{% endif %}
-            {% endif %}
-          </span>
-          <span class="live-stat">{{ item.get_status_display }}</span>
-        </div>
-        <div class="progress-bar">
-          <div class="progress-fill" style="width: {{ item.progress_percent }}%"></div>
-        </div>
-      </div>
-      <a href="{% url 'backlogger:edit' item.pk %}" class="live-time">{{ item.updated_at|date:"M j" }}</a>
-    </div>
-    {% endfor %}
-  </div>
-  {% else %}
-  <div class="empty">
-    Nothing here yet. <a href="{% url 'backlogger:add' %}">Add your first item.</a>
-  </div>
-  {% endif %}
-</div>
-{% endblock %}

backlogger/templates/backlogger/login.html

@@ -1,11 +1,92 @@
-{% extends 'backlogger/base_auth.html' %}
+<!DOCTYPE html>
-
+<html lang="en">
-{% block title %}Log in — k-boris.tech{% endblock %}
+<head>
-
+  <meta charset="UTF-8">
-{% block content %}
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<div class="auth-card">
+  <title>Log in — k-boris.tech</title>
-  <a class="auth-brand" href="/">k-boris.tech</a>
+  <style>
-  <p class="auth-subtitle">Backlogger</p>
+    *, *::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 %}
       {% for error in form.non_field_errors %}
@@ -32,10 +113,11 @@
         {{ form.password.errors }}
       </div>
 
-    <button type="submit" class="btn btn-primary" style="width:100%;margin-top:0.5rem">Log in</button>
+      <button type="submit" class="btn">Log in</button>
     </form>
     <p style="text-align:center; margin-top:1.25rem; font-size:0.83rem; color:#64748b;">
-    No account? <a href="/accounts/signup/" style="color:#38bdf8;">Sign up</a>
+      No account? <a href="/accounts/signup/" style="color:#38bdf8; text-decoration:none;">Sign up</a>
     </p>
   </div>
-{% endblock %}
+</body>
+</html>

backlogger/templates/backlogger/profile.html

@@ -1,45 +1,112 @@
-{% extends 'backlogger/base.html' %}
+<!DOCTYPE html>
-
+<html lang="en">
-{% block title %}Profile — Backlogger{% endblock %}
+<head>
-
+  <meta charset="UTF-8">
-{% block styles %}
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Profile — Backlogger</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;
+    }
+    a { color: inherit; text-decoration: none; }
+
+    .site-header {
+      background: #0a0f1e;
+      border-bottom: 1px solid #1e293b;
+      padding: 0.75rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
+    .site-header nav { display: flex; gap: 1.5rem; align-items: center; }
+    .site-header nav a { color: #64748b; font-size: 0.85rem; }
+    .site-header nav a:hover { color: #e2e8f0; }
+
     .container { max-width: 520px; margin: 0 auto; padding: 2.5rem 2rem; }
 
     h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
     .subtitle { color: #64748b; font-size: 0.85rem; margin-bottom: 2rem; }
 
-  .card { background: #0a0f1e; border: 1px solid #1e293b; border-radius: 10px; padding: 1.5rem; }
+    .card {
+      background: #0a0f1e;
+      border: 1px solid #1e293b;
+      border-radius: 10px;
+      padding: 1.5rem;
+    }
 
     .field { margin-bottom: 1.25rem; }
     .field:last-of-type { margin-bottom: 0; }
-  .field label { font-size: 0.82rem; }
+    label { display: block; font-size: 0.82rem; color: #94a3b8; margin-bottom: 0.4rem; }
-  /* Profile uses a slightly darker input background than the default */
+    input[type="text"], select {
-  .field input[type="text"], .field select { background: #0f172a; }
+      width: 100%;
-
+      background: #0f172a;
-  .field-static { font-size: 0.9rem; color: #64748b; padding: 0.5rem 0; }
+      color: #e2e8f0;
+      border: 1px solid #334155;
+      border-radius: 6px;
+      padding: 0.5rem 0.75rem;
+      font-size: 0.9rem;
+      font-family: inherit;
+    }
+    input[type="text"]:focus, select:focus {
+      outline: none;
+      border-color: #38bdf8;
+    }
+    select { cursor: pointer; }
+    .field-static {
+      font-size: 0.9rem;
+      color: #64748b;
+      padding: 0.5rem 0;
+    }
 
     .divider { border: none; border-top: 1px solid #1e293b; margin: 1.5rem 0; }
 
     .actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: center; }
+    .btn {
+      display: inline-block;
+      padding: 0.5rem 1.25rem;
+      border-radius: 6px;
+      font-size: 0.85rem;
+      cursor: pointer;
+      border: none;
+      font-family: inherit;
+      transition: opacity 0.15s;
+    }
+    .btn:hover { opacity: 0.85; }
+    .btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
+    .btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
 
     .saved-msg { font-size: 0.82rem; color: #34d399; display: none; }
     .saved-msg.show { display: inline; }
 
+    /* Light theme overrides */
+    body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
+    body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
+    body[data-theme="light"] .site-header .brand { color: #0284c7; }
+    body[data-theme="light"] .site-header nav a { color: #64748b; }
     body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
-  body[data-theme="light"] .field input[type="text"],
+    body[data-theme="light"] input[type="text"],
-  body[data-theme="light"] .field select { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
+    body[data-theme="light"] select { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
     body[data-theme="light"] .divider { border-color: #e2e8f0; }
+    body[data-theme="light"] .btn-primary { background: #0284c7; }
+    body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
   </style>
-{% endblock %}
+</head>
+<body data-theme="{{ request.session.theme|default:'dark' }}">
 
-{% block nav %}
+<header class="site-header">
+  <a class="brand" href="/">k-boris.tech</a>
+  <nav>
     <a href="{% url 'backlogger:list' %}">Backlog</a>
     <a href="{% url 'backlogger:profile' %}" style="color:#e2e8f0">Profile</a>
     <form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
-{% endblock %}
+  </nav>
+</header>
 
-{% block content %}
 <div class="container">
   <h1>Profile</h1>
   <p class="subtitle">@{{ request.user.username }}{% if request.user.date_joined %} · member since {{ request.user.date_joined|date:"N Y" }}{% endif %}</p>
@@ -67,4 +134,6 @@
     </div>
   </form>
 </div>
-{% endblock %}
+
+</body>
+</html>

backlogger/templates/backlogger/signup.html

@@ -1,17 +1,84 @@
-{% extends 'backlogger/base_auth.html' %}
+<!DOCTYPE html>
-
+<html lang="en">
-{% block title %}Sign up — Backlogger{% endblock %}
+<head>
-
+  <meta charset="UTF-8">
-{% block styles %}
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sign up — Backlogger</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; }
     .help { font-size: 0.75rem; color: #475569; margin-top: 0.3rem; }
   </style>
-{% endblock %}
+</head>
-
+<body>
-{% block content %}
+  <div class="card">
-<div class="auth-card">
+    <a class="brand" href="/">killmybacklog.com</a>
-  <a class="auth-brand" href="/">killmybacklog.com</a>
+    <p class="subtitle">Create an account</p>
-  <p class="auth-subtitle">Create an account</p>
 
     <form method="post">
       {% csrf_token %}
@@ -21,26 +88,30 @@
         {{ form.username }}
         {{ form.username.errors }}
       </div>
+
       <div class="field">
         <label for="{{ form.email.id_for_label }}">Email</label>
         {{ form.email }}
         {{ form.email.errors }}
       </div>
+
       <div class="field">
         <label for="{{ form.password1.id_for_label }}">Password</label>
         {{ form.password1 }}
         {{ form.password1.errors }}
       </div>
+
       <div class="field">
         <label for="{{ form.password2.id_for_label }}">Confirm password</label>
         {{ form.password2 }}
         {{ form.password2.errors }}
       </div>
 
-    <button type="submit" class="btn btn-primary" style="width:100%;margin-top:0.5rem">Request account</button>
+      <button type="submit" class="btn">Request account</button>
     </form>
     <p style="text-align:center; margin-top:1.25rem; font-size:0.83rem; color:#64748b;">
-    Already have an account? <a href="/accounts/login/" style="color:#38bdf8;">Log in</a>
+      Already have an account? <a href="/accounts/login/" style="color:#38bdf8; text-decoration:none;">Log in</a>
     </p>
   </div>
-{% endblock %}
+</body>
+</html>

backlogger/templates/backlogger/signup_pending.html

@@ -1,23 +1,51 @@
-{% extends 'backlogger/base_auth.html' %}
+<!DOCTYPE html>
-
+<html lang="en">
-{% block title %}Account requested — Backlogger{% endblock %}
+<head>
-
+  <meta charset="UTF-8">
-{% block styles %}
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Account requested — Backlogger</title>
   <style>
-  .auth-card { text-align: center; }
+    *, *::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;
+      text-align: center;
+    }
+    .brand {
+      display: block;
+      color: #38bdf8;
+      font-weight: 600;
+      font-size: 1.1rem;
+      margin-bottom: 0.4rem;
+      text-decoration: none;
+    }
     .icon { font-size: 2rem; margin: 1.25rem 0 0.75rem; }
     h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; }
     p { font-size: 0.85rem; color: #64748b; line-height: 1.5; }
-  a { color: #38bdf8; }
+    a { color: #38bdf8; text-decoration: none; }
   </style>
-{% endblock %}
+</head>
-
+<body>
-{% block content %}
+  <div class="card">
-<div class="auth-card">
+    <a class="brand" href="/">killmybacklog.com</a>
-  <a class="auth-brand" href="/">killmybacklog.com</a>
     <div class="icon">&#10003;</div>
     <h2>Account requested</h2>
     <p>Your account is pending approval.<br>You'll receive access once it's activated.</p>
     <p style="margin-top:1.5rem;"><a href="/accounts/login/">Back to log in</a></p>
   </div>
-{% endblock %}
+</body>
+</html>

backlogger/templates/backlogger/steam_import.html

@@ -1,52 +1,154 @@
-{% extends 'backlogger/base.html' %}
+<!DOCTYPE html>
-
+<html lang="en">
-{% block title %}Import from Steam — Backlogger{% endblock %}
+<head>
-
+  <meta charset="UTF-8">
-{% block brand %}killmybacklog.com{% endblock %}
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+  <title>Import from Steam — Backlogger</title>
-{% block styles %}
   <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;
+    }
+    a { color: inherit; text-decoration: none; }
+
+    .site-header {
+      background: #0a0f1e;
+      border-bottom: 1px solid #1e293b;
+      padding: 0.75rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
+    .site-header nav a { color: #64748b; font-size: 0.85rem; }
+    .site-header nav a:hover { color: #e2e8f0; }
+
     .container { max-width: 860px; margin: 0 auto; padding: 2rem; }
 
-  .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; }
+    .top-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1.75rem;
+    }
     .top-bar h1 { font-size: 1.5rem; letter-spacing: -0.03em; }
     .top-bar .count { color: #64748b; font-size: 1rem; font-weight: 400; margin-left: 0.5rem; }
 
-  .toolbar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
+    .error-banner {
+      background: #450a0a;
+      border: 1px solid #f87171;
+      border-radius: 8px;
+      color: #fca5a5;
+      padding: 0.85rem 1.1rem;
+      margin-bottom: 1.5rem;
+    }
 
-  .game-table { width: 100%; border-collapse: collapse; }
+    .toolbar {
-  .game-table thead th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #475569; padding: 0 0.75rem 0.6rem; border-bottom: 1px solid #1e293b; }
+      display: flex;
+      gap: 0.75rem;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+    .btn {
+      display: inline-block;
+      padding: 0.45rem 1rem;
+      border-radius: 6px;
+      font-size: 0.85rem;
+      cursor: pointer;
+      border: none;
+      transition: opacity 0.15s;
+      font-family: inherit;
+    }
+    .btn:hover { opacity: 0.85; }
+    .btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
+    .btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
+    .btn-text { background: none; border: none; color: #64748b; font-size: 0.8rem; cursor: pointer; font-family: inherit; padding: 0; }
+    .btn-text:hover { color: #e2e8f0; }
+
+    .game-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    .game-table thead th {
+      text-align: left;
+      font-size: 0.72rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #475569;
+      padding: 0 0.75rem 0.6rem;
+      border-bottom: 1px solid #1e293b;
+    }
     .game-table thead th:first-child { padding-left: 0; width: 2rem; }
-  .game-table tbody tr { border-bottom: 1px solid #1a2235; transition: background 0.1s; }
+    .game-table tbody tr {
+      border-bottom: 1px solid #1a2235;
+      transition: background 0.1s;
+    }
     .game-table tbody tr:hover:not(.already-imported) { background: #0d1526; }
-  .game-table td { padding: 0.6rem 0.75rem; font-size: 0.88rem; }
+    .game-table td {
+      padding: 0.6rem 0.75rem;
+      font-size: 0.88rem;
+    }
     .game-table td:first-child { padding-left: 0; }
 
     .already-imported td { opacity: 0.38; }
-  .already-imported .tag { font-size: 0.68rem; color: #475569; border: 1px solid #1e293b; border-radius: 4px; padding: 0.1rem 0.4rem; margin-left: 0.5rem; vertical-align: middle; }
+    .already-imported .tag {
+      font-size: 0.68rem;
+      color: #475569;
+      border: 1px solid #1e293b;
+      border-radius: 4px;
+      padding: 0.1rem 0.4rem;
+      margin-left: 0.5rem;
+      vertical-align: middle;
+    }
 
     .hours { color: #38bdf8; font-variant-numeric: tabular-nums; }
     .hours-zero { color: #334155; }
 
     input[type="checkbox"] { accent-color: #38bdf8; width: 1rem; height: 1rem; cursor: pointer; }
 
-  .sticky-footer { position: sticky; bottom: 0; background: #0a0f1e; border-top: 1px solid #1e293b; padding: 1rem 2rem; display: flex; align-items: center; gap: 1.25rem; }
+    .sticky-footer {
+      position: sticky;
+      bottom: 0;
+      background: #0a0f1e;
+      border-top: 1px solid #1e293b;
+      padding: 1rem 2rem;
+      display: flex;
+      align-items: center;
+      gap: 1.25rem;
+    }
     .sticky-footer .summary { font-size: 0.85rem; color: #64748b; }
     .sticky-footer .summary strong { color: #e2e8f0; }
 
     .empty { text-align: center; padding: 4rem 2rem; color: #475569; }
-
+    .steam-btn {
-  .steam-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: #1b2838; border: 1px solid #2a475e; color: #c7d5e0; font-weight: 600; border-radius: 6px; padding: 0.6rem 1.1rem; font-size: 0.9rem; cursor: pointer; transition: background 0.15s; }
+      display: inline-flex;
+      align-items: center;
+      gap: 0.6rem;
+      background: #1b2838;
+      border: 1px solid #2a475e;
+      color: #c7d5e0;
+      font-weight: 600;
+      border-radius: 6px;
+      padding: 0.6rem 1.1rem;
+      font-size: 0.9rem;
+      cursor: pointer;
+      text-decoration: none;
+      transition: background 0.15s;
+    }
     .steam-btn:hover { background: #2a475e; }
     .steam-logo { width: 20px; height: 20px; }
   </style>
-{% endblock %}
+</head>
+<body>
 
-{% block nav %}
+<header class="site-header">
-<a href="{% url 'backlogger:list' %}">← Back to backlog</a>
+  <a class="brand" href="/">killmybacklog.com</a>
-{% endblock %}
+  <nav><a href="{% url 'backlogger:list' %}">← Back to backlog</a></nav>
+</header>
 
-{% block content %}
 <div class="container">
 
   {% if error %}
@@ -128,9 +230,7 @@
   {% endif %}
 
 </div>
-{% endblock %}
 
-{% block scripts %}
 <script>
 function toggleAll(check) {
   document.querySelectorAll('input[name="appids"]').forEach(cb => cb.checked = check);
@@ -144,4 +244,5 @@ function updateCount() {
 document.querySelectorAll('input[name="appids"]').forEach(cb => cb.addEventListener('change', updateCount));
 updateCount();
 </script>
-{% endblock %}
+</body>
+</html>

backlogger/urls.py

@@ -4,7 +4,6 @@ from . import views
 app_name = 'backlogger'
 urlpatterns = [
     path('', views.item_list, name='list'),
-    path('live/', views.live, name='live'),
     path('add/', views.item_add, name='add'),
     path('<int:pk>/edit/', views.item_edit, name='edit'),
     path('<int:pk>/delete/', views.item_delete, name='delete'),
@@ -13,7 +12,4 @@ urlpatterns = [
     path('steam/login/', views.steam_login, name='steam_login'),
     path('steam/callback/', views.steam_callback, name='steam_callback'),
     path('steam/import/', views.steam_import, name='steam_import'),
-    path('debug/delete-all/', views.debug_delete_all, name='debug_delete_all'),
-    path('steam/sync/', views.steam_sync_login, name='steam_sync_login'),
-    path('steam/sync/callback/', views.steam_sync_callback, name='steam_sync_callback'),
 ]

backlogger/views.py

@@ -28,7 +28,6 @@ SORT_MAP = {
     'newest':   ['-created_at'],
     'oldest':   ['created_at'],
     'progress': ['-progress_percent'],
-    'updated':  ['-updated_at'],
 }
 
 
@@ -50,11 +49,7 @@ def profile(request):
 @login_required
 def item_list(request):
     category = request.GET.get('category', '')
-    sort = request.GET.get('sort', '')
+    sort = request.GET.get('sort', 'fav')
-    if sort in SORT_MAP:
-        request.session['sort'] = sort
-    else:
-        sort = request.session.get('sort', 'fav')
     shelf = request.GET.get('shelf', Item.ACTIVE)
     if shelf not in (Item.ACTIVE, Item.COMPLETED, Item.ABANDONED, Item.UNENDING):
         shelf = Item.ACTIVE
@@ -70,7 +65,6 @@ def item_list(request):
         'sort': sort,
         'shelf': shelf,
         'categories': Item.CATEGORY_CHOICES,
-        'debug': settings.DEBUG,
     })
 
 
@@ -180,73 +174,15 @@ def steam_import(request):
             continue
         hours = game['hours']
         progress = min(100.0, hours) if hours > 0 else 0.0
-        Item.objects.create(
+        item = Item.objects.create(
             user=request.user,
             category=Item.GAMES,
             name=game['name'],
             hours_played=hours,
             progress_percent=progress,
-            steam_appid=game['appid'],
         )
+        hltb_api.apply_to_item(item)
         imported += 1
 
     del request.session['steam_games']
     return redirect(f"{reverse('backlogger:list')}?category=games&imported={imported}")
-
-
-@login_required
-def live(request):
-    items = (
-        Item.objects
-        .filter(user=request.user)
-        .order_by('-updated_at')[:10]
-    )
-    return render(request, 'backlogger/live.html', {'items': items})
-
-
-@login_required
-def debug_delete_all(request):
-    if not settings.DEBUG:
-        return redirect('backlogger:list')
-    if request.method == 'POST':
-        Item.objects.filter(user=request.user).delete()
-    return redirect('backlogger:list')
-
-
-@login_required
-def steam_sync_login(request):
-    callback = request.build_absolute_uri(reverse('backlogger:steam_sync_callback'))
-    realm = f"{request.scheme}://{request.get_host()}"
-    return redirect(steam_api.build_auth_url(callback, realm))
-
-
-@login_required
-def steam_sync_callback(request):
-    steam_id = steam_api.verify_and_get_steam_id(request.GET.dict())
-    if not steam_id:
-        return redirect(f"{reverse('backlogger:list')}?sync_error=1")
-
-    api_key = getattr(settings, 'STEAM_API_KEY', '')
-    if not api_key:
-        return redirect(f"{reverse('backlogger:list')}?sync_error=1")
-
-    try:
-        games = steam_api.get_owned_games(api_key, steam_id)
-    except Exception:
-        return redirect(f"{reverse('backlogger:list')}?sync_error=1")
-
-    hours_by_appid = {
-        g['appid']: round(g.get('playtime_forever', 0) / 60, 1)
-        for g in games
-    }
-
-    steam_items = Item.objects.filter(user=request.user, steam_appid__isnull=False)
-    synced = 0
-    for item in steam_items:
-        new_hours = hours_by_appid.get(item.steam_appid)
-        if new_hours is not None and new_hours != item.hours_played:
-            item.hours_played = new_hours
-            item.save(update_fields=['hours_played', 'updated_at'])
-            synced += 1
-
-    return redirect(f"{reverse('backlogger:list')}?category=games&synced={synced}")

entrypoint.sh

@@ -13,8 +13,6 @@ else:
     print(f'{Mineral.objects.count()} minerals already loaded')
 "
 
-python manage.py run_hltb_worker &
-
 exec gunicorn kboris.wsgi:application \
     --bind 0.0.0.0:8080 \
     --workers 2 \