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>

backlogger/admin.py

@@ -0,0 +1,9 @@
+from django.contrib import admin
+from .models import Item
+
+
+@admin.register(Item)
+class ItemAdmin(admin.ModelAdmin):
+    list_display = ['name', 'category', 'progress_percent', 'favorite', 'created_at']
+    list_filter = ['category', 'favorite']
+    search_fields = ['name']

backlogger/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class BackloggerConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'backlogger'

backlogger/forms.py

@@ -0,0 +1,46 @@
+from django import forms
+from .models import Item
+
+
+class ItemForm(forms.ModelForm):
+    progress_percent = forms.FloatField(
+        min_value=0,
+        max_value=100,
+        initial=0,
+        widget=forms.NumberInput(attrs={
+            'type': 'range',
+            'min': '0',
+            'max': '100',
+            'step': '1',
+        }),
+    )
+
+    class Meta:
+        model = Item
+        fields = [
+            'category', 'name', 'progress_percent', 'favorite',
+            'hours_played', 'total_hours',
+            'pages_read', 'total_pages',
+            'watched', 'duration_minutes',
+        ]
+        widgets = {
+            'hours_played': forms.NumberInput(attrs={'step': '0.5', 'min': '0'}),
+            'total_hours': forms.NumberInput(attrs={'step': '0.5', 'min': '0'}),
+            'pages_read': forms.NumberInput(attrs={'min': '0'}),
+            'total_pages': forms.NumberInput(attrs={'min': '0'}),
+            'duration_minutes': forms.NumberInput(attrs={'min': '0'}),
+        }
+
+    def clean(self):
+        cleaned_data = super().clean()
+        category = cleaned_data.get('category')
+        if category != Item.GAMES:
+            cleaned_data['hours_played'] = None
+            cleaned_data['total_hours'] = None
+        if category != Item.BOOKS:
+            cleaned_data['pages_read'] = None
+            cleaned_data['total_pages'] = None
+        if category != Item.FILMS:
+            cleaned_data['watched'] = None
+            cleaned_data['duration_minutes'] = None
+        return cleaned_data

backlogger/migrations/0001_initial.py

@@ -0,0 +1,32 @@
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = []
+
+    operations = [
+        migrations.CreateModel(
+            name='Item',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('category', models.CharField(choices=[('games', 'Games'), ('books', 'Books'), ('films', 'Films'), ('other', 'Other')], max_length=10)),
+                ('name', models.CharField(max_length=200)),
+                ('progress_percent', models.FloatField(default=0.0)),
+                ('favorite', models.BooleanField(default=False)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('hours_played', models.FloatField(blank=True, null=True)),
+                ('total_hours', models.FloatField(blank=True, null=True)),
+                ('pages_read', models.IntegerField(blank=True, null=True)),
+                ('total_pages', models.IntegerField(blank=True, null=True)),
+                ('watched', models.BooleanField(blank=True, null=True)),
+                ('duration_minutes', models.IntegerField(blank=True, null=True)),
+            ],
+            options={
+                'ordering': ['-favorite', 'name'],
+            },
+        ),
+    ]

backlogger/models.py

@@ -0,0 +1,39 @@
+from django.db import models
+
+
+class Item(models.Model):
+    GAMES = 'games'
+    BOOKS = 'books'
+    FILMS = 'films'
+    OTHER = 'other'
+    CATEGORY_CHOICES = [
+        (GAMES, 'Games'),
+        (BOOKS, 'Books'),
+        (FILMS, 'Films'),
+        (OTHER, 'Other'),
+    ]
+
+    category = models.CharField(max_length=10, choices=CATEGORY_CHOICES)
+    name = models.CharField(max_length=200)
+    progress_percent = models.FloatField(default=0.0)
+    favorite = models.BooleanField(default=False)
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    # Games
+    hours_played = models.FloatField(null=True, blank=True)
+    total_hours = models.FloatField(null=True, blank=True)
+
+    # Books
+    pages_read = models.IntegerField(null=True, blank=True)
+    total_pages = models.IntegerField(null=True, blank=True)
+
+    # Films
+    watched = models.BooleanField(null=True, blank=True)
+    duration_minutes = models.IntegerField(null=True, blank=True)
+
+    class Meta:
+        ordering = ['-favorite', 'name']
+
+    def __str__(self):
+        return f"{self.get_category_display()}: {self.name}"

backlogger/templates/backlogger/item_form.html

@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ action }} Item — 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 { text-decoration: none; color: inherit; }
+
+    .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 label {
+      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 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;
+    }
+
+    .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;
+    }
+    .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>
+</head>
+<body>
+
+<header class="site-header">
+  <a class="brand" href="/">k-boris.tech</a>
+  <nav>
+    <a href="{% url 'backlogger:list' %}">&larr; Back to backlogger</a>
+  </nav>
+</header>
+
+<div class="container">
+  <div class="card">
+    <h1>{{ action }} item</h1>
+
+    <form method="post">
+      {% csrf_token %}
+
+      <div class="field">
+        <label for="{{ form.category.id_for_label }}">Category</label>
+        {{ form.category }}
+        {{ form.category.errors }}
+      </div>
+
+      <div class="field">
+        <label for="{{ form.name.id_for_label }}">Name</label>
+        {{ form.name }}
+        {{ form.name.errors }}
+      </div>
+
+      <div class="field">
+        <div class="progress-label">
+          <label for="{{ form.progress_percent.id_for_label }}">Progress</label>
+          <span class="progress-val" id="progress-display">{{ form.progress_percent.value|default:0|floatformat:0 }}%</span>
+        </div>
+        {{ form.progress_percent }}
+        {{ form.progress_percent.errors }}
+      </div>
+
+      <div class="field">
+        <div class="checkbox-row">
+          {{ form.favorite }}
+          <label for="{{ form.favorite.id_for_label }}">Mark as favorite</label>
+        </div>
+      </div>
+
+      <!-- Games fields -->
+      <div id="section-games" class="cat-section" style="display:none">
+        <hr class="section-divider">
+        <div class="section-title">Games</div>
+        <div class="two-col">
+          <div class="field">
+            <label>Hours played</label>
+            {{ form.hours_played }}
+            {{ form.hours_played.errors }}
+          </div>
+          <div class="field">
+            <label>Total hours <span class="optional">optional</span></label>
+            {{ form.total_hours }}
+            {{ form.total_hours.errors }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Books fields -->
+      <div id="section-books" class="cat-section" style="display:none">
+        <hr class="section-divider">
+        <div class="section-title">Books</div>
+        <div class="two-col">
+          <div class="field">
+            <label>Pages read</label>
+            {{ form.pages_read }}
+            {{ form.pages_read.errors }}
+          </div>
+          <div class="field">
+            <label>Total pages <span class="optional">optional</span></label>
+            {{ form.total_pages }}
+            {{ form.total_pages.errors }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Films fields -->
+      <div id="section-films" class="cat-section" style="display:none">
+        <hr class="section-divider">
+        <div class="section-title">Films</div>
+        <div class="two-col">
+          <div class="field" style="display:flex; align-items:center; padding-top:1.5rem;">
+            <div class="checkbox-row">
+              {{ form.watched }}
+              <label for="{{ form.watched.id_for_label }}">Watched</label>
+            </div>
+          </div>
+          <div class="field">
+            <label>Duration (min) <span class="optional">optional</span></label>
+            {{ form.duration_minutes }}
+            {{ form.duration_minutes.errors }}
+          </div>
+        </div>
+      </div>
+
+      <div class="actions">
+        <a href="{% url 'backlogger:list' %}" class="btn btn-ghost">Cancel</a>
+        <button type="submit" class="btn btn-primary">Save</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<script>
+  const catSelect = document.getElementById('{{ form.category.id_for_label }}');
+  const progressRange = document.getElementById('{{ form.progress_percent.id_for_label }}');
+  const progressDisplay = document.getElementById('progress-display');
+
+  function updateSections() {
+    document.querySelectorAll('.cat-section').forEach(el => el.style.display = 'none');
+    const sec = document.getElementById('section-' + catSelect.value);
+    if (sec) sec.style.display = 'block';
+  }
+
+  catSelect.addEventListener('change', updateSections);
+  updateSections();
+
+  progressRange.addEventListener('input', function() {
+    progressDisplay.textContent = Math.round(this.value) + '%';
+  });
+</script>
+
+</body>
+</html>

backlogger/templates/backlogger/list.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <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 h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
+    .top-bar .count { color: #64748b; font-size: 1rem; font-weight: 400; margin-left: 0.5rem; }
+
+    .btn {
+      display: inline-block;
+      padding: 0.45rem 1rem;
+      border-radius: 6px;
+      font-size: 0.85rem;
+      cursor: pointer;
+      border: none;
+      transition: opacity 0.15s;
+    }
+    .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; }
+
+    .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; }
+
+    .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; }
+  </style>
+</head>
+<body>
+
+<header class="site-header">
+  <a class="brand" href="/">k-boris.tech</a>
+  <nav>
+    <a href="{% url 'logout' %}">Log out</a>
+  </nav>
+</header>
+
+<div class="container">
+  <div class="top-bar">
+    <h1>Backlogger <span class="count">{{ items|length }}</span></h1>
+    <a href="{% url 'backlogger:add' %}" class="btn btn-primary">+ Add item</a>
+  </div>
+
+  <div class="filter-bar">
+    <div class="tabs">
+      <a href="?sort={{ sort }}" class="tab {% if not category %}active{% endif %}">All</a>
+      {% for val, label in categories %}
+      <a href="?category={{ val }}&sort={{ sort }}" class="tab {% if category == val %}active{% endif %}">{{ label }}</a>
+      {% endfor %}
+    </div>
+    <div class="sort-wrap">
+      <select onchange="location='?category={{ category }}&sort='+this.value">
+        <option value="fav"      {% if sort == 'fav'      %}selected{% endif %}>Favorites first</option>
+        <option value="az"       {% if sort == 'az'       %}selected{% endif %}>A → Z</option>
+        <option value="za"       {% if sort == 'za'       %}selected{% endif %}>Z → A</option>
+        <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>
+      </select>
+    </div>
+  </div>
+
+  {% if items %}
+  <div class="grid">
+    {% for item in items %}
+    <div class="card">
+      <div class="card-top">
+        <span class="badge badge-{{ item.category }}">{{ item.get_category_display }}</span>
+        {% if item.favorite %}<span class="star">★</span>{% endif %}
+      </div>
+
+      <div class="card-name" title="{{ item.name }}">{{ item.name }}</div>
+
+      <div class="progress-bar">
+        <div class="progress-fill" style="width: {{ item.progress_percent }}%"></div>
+      </div>
+      <div class="card-stat">{{ item.progress_percent|floatformat:0 }}%</div>
+
+      <div class="card-info">
+        {% if item.category == 'games' %}
+          {% if item.hours_played is not None %}
+            {{ item.hours_played|floatformat:1 }}h played{% if item.total_hours %} / {{ item.total_hours|floatformat:0 }}h total{% endif %}
+          {% endif %}
+        {% elif item.category == 'books' %}
+          {% if item.pages_read is not None %}
+            {{ item.pages_read }} pages{% if item.total_pages %} / {{ item.total_pages }} total{% endif %}
+          {% endif %}
+        {% elif item.category == 'films' %}
+          {% if item.watched %}&#10003; Watched{% else %}&#9675; Not watched{% endif %}{% if item.duration_minutes %}  &middot;  {{ item.duration_minutes }} min{% endif %}
+        {% endif %}
+      </div>
+
+      <div class="card-actions">
+        <a href="{% url 'backlogger:edit' item.pk %}" class="btn btn-sm btn-outline">Edit</a>
+        <form method="post" action="{% url 'backlogger:delete' item.pk %}" onsubmit="return confirm('Delete &quot;{{ item.name }}&quot;?')">
+          {% csrf_token %}
+          <button type="submit" class="btn btn-danger">Delete</button>
+        </form>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+  {% else %}
+  <div class="empty">
+    No items here yet. <a href="{% url 'backlogger:add' %}">Add your first one.</a>
+  </div>
+  {% endif %}
+</div>
+
+</body>
+</html>

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>

backlogger/urls.py

@@ -0,0 +1,10 @@
+from django.urls import path
+from . import views
+
+app_name = 'backlogger'
+urlpatterns = [
+    path('', views.item_list, name='list'),
+    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'),
+]

backlogger/views.py

@@ -0,0 +1,64 @@
+from django.contrib.auth.decorators import login_required
+from django.shortcuts import render, get_object_or_404, redirect
+from .models import Item
+from .forms import ItemForm
+
+
+SORT_MAP = {
+    'fav':      ['-favorite', 'name'],
+    'az':       ['name'],
+    'za':       ['-name'],
+    'newest':   ['-created_at'],
+    'oldest':   ['created_at'],
+    'progress': ['-progress_percent'],
+}
+
+
+@login_required
+def item_list(request):
+    category = request.GET.get('category', '')
+    sort = request.GET.get('sort', 'fav')
+
+    items = Item.objects.all()
+    if category:
+        items = items.filter(category=category)
+    items = items.order_by(*SORT_MAP.get(sort, SORT_MAP['fav']))
+
+    return render(request, 'backlogger/list.html', {
+        'items': items,
+        'category': category,
+        'sort': sort,
+        'categories': Item.CATEGORY_CHOICES,
+    })
+
+
+@login_required
+def item_add(request):
+    if request.method == 'POST':
+        form = ItemForm(request.POST)
+        if form.is_valid():
+            form.save()
+            return redirect('backlogger:list')
+    else:
+        form = ItemForm()
+    return render(request, 'backlogger/item_form.html', {'form': form, 'action': 'Add'})
+
+
+@login_required
+def item_edit(request, pk):
+    item = get_object_or_404(Item, pk=pk)
+    if request.method == 'POST':
+        form = ItemForm(request.POST, instance=item)
+        if form.is_valid():
+            form.save()
+            return redirect('backlogger:list')
+    else:
+        form = ItemForm(instance=item)
+    return render(request, 'backlogger/item_form.html', {'form': form, 'action': 'Edit', 'item': item})
+
+
+@login_required
+def item_delete(request, pk):
+    if request.method == 'POST':
+        get_object_or_404(Item, pk=pk).delete()
+    return redirect('backlogger:list')