Add backlogger app at /backlogger/ with login protection
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
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>
This commit is contained in:
260
backlogger/templates/backlogger/item_form.html
Normal file
260
backlogger/templates/backlogger/item_form.html
Normal file
@@ -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' %}">← 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>
|
||||
237
backlogger/templates/backlogger/list.html
Normal file
237
backlogger/templates/backlogger/list.html
Normal file
@@ -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 %}✓ Watched{% else %}○ Not watched{% endif %}{% if item.duration_minutes %} · {{ 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 "{{ item.name }}"?')">
|
||||
{% 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>
|
||||
114
backlogger/templates/backlogger/login.html
Normal file
114
backlogger/templates/backlogger/login.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user