glennigen/pokedexter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial: Pokedexter TCG-Collector webapp

Browse Source
This commit is contained in:
GlennIgen
2026-07-01 21:10:06 +02:00
commit c0952a3bd3
27 changed files with 1684 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/templates/404.html
+9
View File
@@ -0,0 +1,9 @@
{% extends "base.html" %}
{% block title %}404 — Ikke fundet{% endblock %}
{% block content %}
<div style="text-align:center;padding:60px 0;">
<h1 style="font-size:3rem;">404</h1>
<p style="color:var(--text-muted);margin:16px 0;">Siden blev ikke fundet.</p>
<a href="/" class="btn btn-primary">Gå til forsiden</a>
</div>
{% endblock %}
backend/app/templates/admin/cards.html
+110
View File
@@ -0,0 +1,110 @@
{% extends "base.html" %}
{% block title %}Admin — Kort i {{ set_code }}{% endblock %}
{% block content %}
<h1>🃏 Kort i <span class="tag">{{ set_code }}</span></h1>
<p style="color:var(--text-muted);margin-bottom:16px;">Tilføj eller fjern kort fra dette set.</p>
<div class="card" style="margin-bottom:24px;">
<h2>Tilføj nyt kort</h2>
<form id="create-card-form" style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;">
<input type="text" name="number" placeholder="Nummer (f.eks. 068)" required>
<input type="text" name="name" placeholder="Navn (f.eks. Garchomp EX)" required>
<input type="text" name="type" placeholder="Type (f.eks. Colorless)">
<input type="text" name="rarity" placeholder="Sjældenhed (f.eks. Rare)">
<input type="number" name="hp" placeholder="HP">
<input type="text" name="stage" placeholder="Stage (f.eks. Basic)">
<input type="text" name="image_url" placeholder="Billede URL" style="grid-column:span 2;">
<textarea name="description" placeholder="Beskrivelse" rows="2" style="grid-column:span 2;"></textarea>
<button type="submit" class="btn btn-primary" style="grid-column:span 2;">Tilføj kort</button>
</form>
<p id="card-msg" style="font-size:0.85rem;margin-top:8px;"></p>
</div>
<h2>Eksisterende kort</h2>
<div id="card-list">Indlæser...</div>
<a href="/admin/sets" class="btn btn-outline" style="margin-top:16px;">← Tilbage til serier</a>
<script>
const SET_CODE = '{{ set_code }}';
async function loadCards() {
try {
const res = await fetch('/api/admin/sets/' + SET_CODE + '/cards');
const cards = await res.json();
const container = document.getElementById('card-list');
if (cards.length === 0) {
container.innerHTML = '<div class="card"><p style="color:var(--text-muted);">Ingen kort i dette set endnu.</p></div>';
return;
}
let html = '<div style="overflow-x:auto;"><table><thead><tr><th>#</th><th>Kode</th><th>Navn</th><th>Type</th><th>Sjældenhed</th><th style="width:60px;"></th></tr></thead><tbody>';
cards.forEach(c => {
html += '<tr>' +
'<td>' + c.number + '</td>' +
'<td><span class="tag">' + c.full_code + '</span></td>' +
'<td>' + c.name + '</td>' +
'<td>' + (c.type || '—') + '</td>' +
'<td>' + (c.rarity || '—') + '</td>' +
'<td><button class="btn btn-danger btn-sm" onclick="deleteCard(' + c.id + ')">✕</button></td>' +
'</tr>';
});
html += '</tbody></table></div>';
container.innerHTML = html;
} catch(e) {
document.getElementById('card-list').innerHTML = '<p style="color:var(--accent);">Kunne ikke indlæse kort</p>';
}
}
async function deleteCard(id) {
if (!confirm('Slet dette kort?')) return;
try {
const res = await fetch('/api/admin/cards/' + id, { method: 'DELETE' });
if (res.ok) {
loadCards();
} else {
alert('Kunne ikke slette');
}
} catch(e) {
alert('Fejl ved sletning');
}
}
document.getElementById('create-card-form').addEventListener('submit', async (e) => {
e.preventDefault();
const form = e.target;
const msg = document.getElementById('card-msg');
try {
const res = await fetch('/api/admin/sets/' + SET_CODE + '/cards', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
number: form.number.value,
name: form.name.value,
type: form.type.value || null,
rarity: form.rarity.value || null,
hp: form.hp.value ? parseInt(form.hp.value) : null,
stage: form.stage.value || null,
description: form.description.value || null,
image_url: form.image_url.value || null,
}),
});
if (res.ok) {
form.reset();
msg.style.color = 'var(--text)';
msg.textContent = '✅ Kort tilføjet';
loadCards();
} else {
const err = await res.json();
msg.style.color = 'var(--accent)';
msg.textContent = '❌ ' + (err.detail || 'Fejl');
}
} catch(e) {
msg.style.color = 'var(--accent)';
msg.textContent = '❌ Kunne ikke forbinde';
}
});
loadCards();
</script>
{% endblock %}
backend/app/templates/admin/dashboard.html
+95
View File
@@ -0,0 +1,95 @@
{% extends "base.html" %}
{% block title %}Admin panel{% endblock %}
{% block content %}
<h1>⚙️ Admin panel</h1>
<p style="color:var(--text-muted);margin-bottom:24px;">Velkommen, {{ user.username }}!</p>
<div class="card-grid">
<a href="/admin/sets" style="text-decoration:none;color:var(--text);">
<div class="card" style="text-align:center;padding:32px;">
<div style="font-size:2rem;margin-bottom:8px;">📦</div>
<h3>Administrér serier</h3>
<p style="font-size:0.85rem;color:var(--text-muted);">Opret, redigér og slet serier/sets</p>
</div>
</a>
<a href="/search" style="text-decoration:none;color:var(--text);">
<div class="card" style="text-align:center;padding:32px;">
<div style="font-size:2rem;margin-bottom:8px;">🔍</div>
<h3>Se kort</h3>
<p style="font-size:0.85rem;color:var(--text-muted);">Søg og gennemse alle kort</p>
</div>
</a>
</div>
<div class="card" style="margin-top:24px;">
<h2>👥 Brugere</h2>
<table>
<thead>
<tr><th>Brugernavn</th><th>Rolle</th><th>Oprettet</th></tr>
</thead>
<tbody id="user-list">
<tr><td colspan="3">Indlæser...</td></tr>
</tbody>
</table>
<div style="margin-top:16px;">
<h3>Opret ny bruger</h3>
<form id="create-user-form" style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;">
<input type="text" name="username" placeholder="Brugernavn" required style="max-width:200px;">
<input type="password" name="password" placeholder="Adgangskode" required style="max-width:200px;">
<select name="role" style="max-width:120px;">
<option value="user">Bruger</option>
<option value="admin">Admin</option>
</select>
<button type="submit" class="btn btn-primary">Opret</button>
</form>
<p id="user-msg" style="font-size:0.85rem;margin-top:8px;"></p>
</div>
</div>
<script>
async function loadUsers() {
try {
const res = await fetch('/api/admin/users');
const users = await res.json();
const tbody = document.getElementById('user-list');
tbody.innerHTML = users.map(u =>
'<tr><td>' + u.username + '</td><td><span class="tag">' + u.role + '</span></td><td>' + (u.created_at || '') + '</td></tr>'
).join('');
} catch(e) {
document.getElementById('user-list').innerHTML = '<tr><td colspan="3">Kunne ikke indlæse brugere</td></tr>';
}
}
document.getElementById('create-user-form').addEventListener('submit', async (e) => {
e.preventDefault();
const form = e.target;
const msg = document.getElementById('user-msg');
try {
const res = await fetch('/api/admin/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: form.username.value,
password: form.password.value,
role: form.role.value,
}),
});
if (res.ok) {
form.reset();
msg.style.color = 'var(--text)';
msg.textContent = '✅ Bruger oprettet';
loadUsers();
} else {
const err = await res.json();
msg.style.color = 'var(--accent)';
msg.textContent = '❌ ' + (err.detail || 'Fejl');
}
} catch(e) {
msg.style.color = 'var(--accent)';
msg.textContent = '❌ Kunne ikke forbinde';
}
});
loadUsers();
</script>
{% endblock %}
backend/app/templates/admin/sets.html
+95
View File
@@ -0,0 +1,95 @@
{% extends "base.html" %}
{% block title %}Admin — Serier{% endblock %}
{% block content %}
<h1>📦 Administrér serier</h1>
<p style="color:var(--text-muted);margin-bottom:16px;">Opret og slet Pokémon TCG serier/sets.</p>
<div class="card" style="margin-bottom:24px;">
<h2>Opret ny serie</h2>
<form id="create-set-form" style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;">
<input type="text" name="code" placeholder="Kode (f.eks. CRI)" required style="max-width:120px;text-transform:uppercase;">
<input type="text" name="name" placeholder="Navn (f.eks. Chaos Rising)" required style="max-width:280px;">
<input type="text" name="release_date" placeholder="Udgivelsesdato" style="max-width:160px;">
<button type="submit" class="btn btn-primary">Opret</button>
</form>
<p id="set-msg" style="font-size:0.85rem;margin-top:8px;"></p>
</div>
<h2>Eksisterende serier</h2>
<div id="set-list"></div>
<script>
async function loadSets() {
try {
const res = await fetch('/api/admin/sets');
const sets = await res.json();
const container = document.getElementById('set-list');
if (sets.length === 0) {
container.innerHTML = '<div class="card"><p style="color:var(--text-muted);">Ingen serier endnu.</p></div>';
return;
}
let html = '<div style="overflow-x:auto;"><table><thead><tr><th>Kode</th><th>Navn</th><th>Udgivet</th><th style="width:100px;"></th></tr></thead><tbody>';
sets.forEach(s => {
html += '<tr>' +
'<td><span class="tag">' + s.code + '</span></td>' +
'<td><a href="/admin/cards/' + s.code + '" style="color:var(--text);">' + s.name + '</a></td>' +
'<td>' + (s.release_date || '—') + '</td>' +
'<td><button class="btn btn-danger btn-sm" onclick="deleteSet(' + s.id + ', \'' + s.code + '\')">Slet</button></td>' +
'</tr>';
});
html += '</tbody></table></div>';
container.innerHTML = html;
} catch(e) {
document.getElementById('set-list').innerHTML = '<p style="color:var(--accent);">Kunne ikke indlæse serier</p>';
}
}
async function deleteSet(id, code) {
if (!confirm('Slet serien ' + code + '? Alle kort i serien slettes også.')) return;
try {
const res = await fetch('/api/admin/sets/' + id, { method: 'DELETE' });
if (res.ok) {
loadSets();
} else {
alert('Kunne ikke slette');
}
} catch(e) {
alert('Fejl ved sletning');
}
}
document.getElementById('create-set-form').addEventListener('submit', async (e) => {
e.preventDefault();
const form = e.target;
const msg = document.getElementById('set-msg');
try {
const res = await fetch('/api/admin/sets', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
code: form.code.value,
name: form.name.value,
release_date: form.release_date.value || null,
}),
});
if (res.ok) {
form.reset();
msg.style.color = 'var(--text)';
msg.textContent = '✅ Serie oprettet';
loadSets();
} else {
const err = await res.json();
msg.style.color = 'var(--accent)';
msg.textContent = '❌ ' + (err.detail || 'Fejl');
}
} catch(e) {
msg.style.color = 'var(--accent)';
msg.textContent = '❌ Kunne ikke forbinde';
}
});
loadSets();
</script>
{% endblock %}
backend/app/templates/base.html
+275
View File
@@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="da" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokedexter — {% block title %}Pokémon TCG samling{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
<style>
:root {
--bg: #f5f0e5;
--bg-card: #faf7f0;
--bg-nav: #e8e0d0;
--text: #3a3228;
--text-muted: #7a7060;
--accent: #c0392b;
--accent-hover: #a93226;
--border: #ddd5c5;
--input-bg: #fcf9f4;
--shadow: rgba(0,0,0,0.08);
--tag-bg: #e8e0d0;
}
[data-theme="dark"] {
--bg: #1a1816;
--bg-card: #252220;
--bg-nav: #201e1b;
--text: #e8e0d5;
--text-muted: #8a8070;
--accent: #e65c4a;
--accent-hover: #ff6b58;
--border: #3a3530;
--input-bg: #2a2724;
--shadow: rgba(0,0,0,0.3);
--tag-bg: #35302a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
transition: background 0.3s, color 0.3s;
}
nav {
background: var(--bg-nav);
border-bottom: 1px solid var(--border);
padding: 0 24px;
display: flex;
align-items: center;
height: 56px;
gap: 24px;
position: sticky;
top: 0;
z-index: 100;
transition: background 0.3s;
}
nav a {
color: var(--text);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
padding: 6px 0;
}
nav a:hover { color: var(--accent); }
nav .logo {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent);
margin-right: auto;
}
.nav-right {
display: flex;
align-items: center;
gap: 16px;
}
.theme-toggle {
background: none;
border: 1px solid var(--border);
border-radius: 8px;
padding: 4px 10px;
cursor: pointer;
font-size: 1rem;
color: var(--text);
transition: background 0.2s;
}
.theme-toggle:hover { background: var(--tag-bg); }
.container {
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px;
}
h1 { font-size: 1.6rem; margin-bottom: 16px; }
h2 { font-size: 1.2rem; margin-bottom: 12px; color: var(--text-muted); }
.btn {
display: inline-block;
padding: 8px 18px;
border-radius: 8px;
border: none;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
}
.btn-primary {
background: var(--accent);
color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
}
.btn-outline:hover { background: var(--tag-bg); }
.btn-danger {
background: #c0392b;
color: #fff;
}
.btn-danger:hover { background: #e65c4a; }
.btn-sm { padding: 4px 12px; font-size: 0.8rem; }
input, select, textarea {
background: var(--input-bg);
border: 1px solid var(--border);
color: var(--text);
padding: 8px 12px;
border-radius: 8px;
font-size: 0.95rem;
width: 100%;
transition: border 0.2s;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px var(--shadow);
transition: background 0.3s, box-shadow 0.3s;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin: 20px 0;
}
.card-set {
text-decoration: none;
color: var(--text);
display: block;
}
.card-set:hover .card {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 16px var(--shadow);
}
.tag {
display: inline-block;
background: var(--tag-bg);
padding: 2px 10px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
font-family: monospace;
}
table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
}
th, td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
}
th {
font-weight: 600;
color: var(--text-muted);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
tr:hover td { background: var(--tag-bg); }
.search-box {
display: flex;
gap: 8px;
margin: 20px 0;
}
.search-box input { flex: 1; }
#search-results {
margin-top: 16px;
}
.result-row {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: var(--tag-bg); }
@media (max-width: 600px) {
.container { padding: 16px; }
nav { padding: 0 12px; gap: 12px; }
.card-grid { grid-template-columns: 1fr; }
.nav-right { gap: 8px; }
}
</style>
</head>
<body>
<nav>
<a href="/" class="logo">⚡ Pokedexter</a>
<a href="/">Hjem</a>
<a href="/sets">Serier</a>
<a href="/search">Søg</a>
{% if request.state.user and request.state.user.role == "admin" %}
<a href="/admin">Admin</a>
{% endif %}
<div class="nav-right">
<button class="theme-toggle" onclick="toggleTheme()" title="Skift farvetema">🌓</button>
{% if request.state.user %}
<span style="font-size:0.85rem;color:var(--text-muted)">{{ request.state.user.username }}</span>
<a href="/logout" class="btn btn-outline btn-sm">Log ud</a>
{% endif %}
</div>
</nav>
<main class="container">
{% block content %}{% endblock %}
</main>
<script>
// Load saved theme
const saved = localStorage.getItem('pokedexter-theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);
function toggleTheme() {
const html = document.documentElement;
const cur = html.getAttribute('data-theme');
const next = cur === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', next);
localStorage.setItem('pokedexter-theme', next);
}
</script>
{% block scripts %}{% endblock %}
</body>
</html>
backend/app/templates/index.html
+27
View File
@@ -0,0 +1,27 @@
{% extends "base.html" %}
{% block title %}Forside{% endblock %}
{% block content %}
<h1>📦 Alle serier</h1>
<p style="color:var(--text-muted);margin-bottom:24px;">{{ sets|length }} serie(r) i databasen</p>
<div class="card-grid">
{% for s in sets %}
<a href="/sets/{{ s.code }}" class="card-set">
<div class="card">
<span class="tag">{{ s.code }}</span>
<h3 style="margin-top:10px;">{{ s.name }}</h3>
{% if s.release_date %}
<p style="font-size:0.85rem;color:var(--text-muted);margin-top:4px;">📅 {{ s.release_date }}</p>
{% endif %}
<p style="font-size:0.85rem;color:var(--text-muted);margin-top:4px;">{{ s.cards|length }} kort</p>
</div>
</a>
{% endfor %}
</div>
{% if sets|length == 0 %}
<div class="card" style="text-align:center;color:var(--text-muted);">
<p>Ingen serier endnu. Log ind som admin for at tilføje.</p>
</div>
{% endif %}
{% endblock %}
backend/app/templates/login.html
+50
View File
@@ -0,0 +1,50 @@
{% extends "base.html" %}
{% block title %}Log ind{% endblock %}
{% block content %}
<div style="max-width:400px;margin:60px auto;">
<div class="card">
<h1 style="text-align:center;">⚡ Pokedexter</h1>
<p style="text-align:center;color:var(--text-muted);margin-bottom:20px;">Log ind for at fortsætte</p>
<form id="login-form">
<div style="margin-bottom:12px;">
<label style="display:block;margin-bottom:4px;font-size:0.9rem;">Brugernavn</label>
<input type="text" name="username" required autocomplete="username">
</div>
<div style="margin-bottom:20px;">
<label style="display:block;margin-bottom:4px;font-size:0.9rem;">Adgangskode</label>
<input type="password" name="password" required autocomplete="current-password">
</div>
<button type="submit" class="btn btn-primary" style="width:100%;">Log ind</button>
<p id="login-error" style="color:var(--accent);margin-top:12px;text-align:center;display:none;"></p>
</form>
</div>
</div>
<script>
document.getElementById('login-form').addEventListener('submit', async (e) => {
e.preventDefault();
const form = e.target;
const data = { username: form.username.value, password: form.password.value };
const errEl = document.getElementById('login-error');
try {
const res = await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
redirect: 'manual',
});
if (res.ok) {
window.location.href = '/';
} else {
const err = await res.json();
errEl.textContent = err.detail || 'Login fejlede';
errEl.style.display = 'block';
}
} catch(e) {
errEl.textContent = 'Kunne ikke forbinde til serveren';
errEl.style.display = 'block';
}
});
</script>
{% endblock %}
backend/app/templates/search.html
+50
View File
@@ -0,0 +1,50 @@
{% extends "base.html" %}
{% block title %}Søg{% endblock %}
{% block content %}
<h1>🔍 Søg efter kort</h1>
<p style="color:var(--text-muted);margin-bottom:16px;">Søg på kortkode (f.eks. <strong>CRI-068</strong>) eller kortnavn.</p>
<div class="search-box">
<input type="text" id="search-input" placeholder="CRI-068 eller kortnavn..." autofocus>
<button class="btn btn-primary" onclick="doSearch()">Søg</button>
</div>
<div id="search-results"></div>
<script>
const input = document.getElementById('search-input');
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') doSearch(); });
async function doSearch() {
const q = input.value.trim();
const container = document.getElementById('search-results');
if (!q) { container.innerHTML = ''; return; }
container.innerHTML = '<p style="color:var(--text-muted);">Søger...</p>';
try {
const res = await fetch('/api/search?q=' + encodeURIComponent(q));
const data = await res.json();
container.innerHTML = '';
if (data.length === 0) {
container.innerHTML = '<div class="card"><p style="color:var(--text-muted);">Ingen kort fundet for "<strong>' + q + '</strong>"</p></div>';
return;
}
let html = '<div class="card" style="padding:0;"><div style="padding:10px 14px;border-bottom:1px solid var(--border);font-size:0.85rem;color:var(--text-muted);">' + data.length + ' resultat(er)</div>';
data.forEach(c => {
html += '<div class="result-row">' +
'<div><span class="tag">' + c.full_code + '</span> <strong>' + c.name + '</strong>' +
' <span style="color:var(--text-muted);font-size:0.85rem;">' + c.set_name + '</span></div>' +
'<div style="font-size:0.85rem;color:var(--text-muted);">' + c.type + ' · ' + c.rarity + '</div>' +
'</div>';
});
html += '</div>';
container.innerHTML = html;
} catch(e) {
container.innerHTML = '<p style="color:var(--accent);">Fejl: kunne ikke søge</p>';
}
}
</script>
{% endblock %}
backend/app/templates/set_detail.html
+54
View File
@@ -0,0 +1,54 @@
{% extends "base.html" %}
{% block title %}{{ set.code }} — {{ set.name }}{% endblock %}
{% block content %}
<div style="margin-bottom:20px;">
<a href="/sets" style="color:var(--text-muted);text-decoration:none;font-size:0.9rem;">← Tilbage til serier</a>
</div>
<div class="card" style="margin-bottom:24px;">
<span class="tag" style="font-size:1rem;">{{ set.code }}</span>
<h1 style="margin-top:8px;">{{ set.name }}</h1>
{% if set.release_date %}
<p style="color:var(--text-muted);">📅 Udgivet: {{ set.release_date }}</p>
{% endif %}
{% if set.description %}
<p style="margin-top:8px;">{{ set.description }}</p>
{% endif %}
<p style="font-size:0.9rem;color:var(--text-muted);margin-top:8px;">{{ set.cards|length }} kort i dette set</p>
</div>
<h2>Kort i {{ set.code }}</h2>
{% if set.cards|length > 0 %}
<div style="overflow-x:auto;">
<table>
<thead>
<tr>
<th>#</th>
<th>Kode</th>
<th>Navn</th>
<th>Type</th>
<th>Sjældenhed</th>
{% if set.cards[0].hp %}<th>HP</th>{% endif %}
</tr>
</thead>
<tbody>
{% for card in set.cards %}
<tr>
<td>{{ card.number }}</td>
<td><span class="tag">{{ card.full_code }}</span></td>
<td>{{ card.name }}</td>
<td>{{ card.type or "—" }}</td>
<td>{{ card.rarity or "—" }}</td>
{% if card.hp %}<td>{{ card.hp }}</td>{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="card" style="text-align:center;color:var(--text-muted);">
<p>Ingen kort i dette set endnu.</p>
</div>
{% endif %}
{% endblock %}
backend/app/templates/sets.html
+27
View File
@@ -0,0 +1,27 @@
{% extends "base.html" %}
{% block title %}Alle serier{% endblock %}
{% block content %}
<h1>📦 Pokémon TCG serier</h1>
<p style="color:var(--text-muted);margin-bottom:24px;">{{ sets|length }} serie(r) i databasen</p>
<div class="card-grid">
{% for s in sets %}
<a href="/sets/{{ s.code }}" class="card-set">
<div class="card">
<span class="tag">{{ s.code }}</span>
<h3 style="margin-top:10px;">{{ s.name }}</h3>
{% if s.release_date %}
<p style="font-size:0.85rem;color:var(--text-muted);margin-top:4px;">📅 {{ s.release_date }}</p>
{% endif %}
<p style="font-size:0.85rem;color:var(--text-muted);margin-top:4px;">{{ s.cards|length }} kort</p>
</div>
</a>
{% endfor %}
</div>
{% if sets|length == 0 %}
<div class="card" style="text-align:center;color:var(--text-muted);">
<p>Ingen serier i databasen endnu.</p>
</div>
{% endif %}
{% endblock %}