Andrej Spielmann
3fefc550fe
- Django backend with DRF (clubs, wrestlers, trainers, exercises, templates, trainings, homework, locations, leistungstest) - Next.js 16 frontend with React, Shadcn UI, Tailwind - JWT authentication - Full CRUD for all entities - Calendar view for trainings - Homework management system - Leistungstest tracking
229 lines
15 KiB
HTML
229 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Ergebnisse — Toggle Ansicht</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: 'Inter', sans-serif; background: #f8fafc; padding: 24px; }
|
||
.container { max-width: 1100px; margin: 0 auto; }
|
||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||
.page-title { font-size: 20px; font-weight: 700; color: #1e293b; }
|
||
.toggle-bar { display: flex; gap: 8px; background: #e2e8f0; padding: 4px; border-radius: 8px; }
|
||
.toggle-btn { padding: 8px 20px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: #64748b; transition: all 0.15s; }
|
||
.toggle-btn.active { background: white; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
||
.filter-bar { display: flex; gap: 12px; margin-bottom: 16px; }
|
||
select { padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; background: white; min-width: 160px; }
|
||
|
||
/* TABLE VIEW */
|
||
.table-wrap { background: white; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; }
|
||
table { width: 100%; border-collapse: collapse; }
|
||
th { background: #f8fafc; padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #e2e8f0; }
|
||
td { padding: 14px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
|
||
tr:last-child td { border-bottom: none; }
|
||
tr:hover td { background: #fafafa; }
|
||
.wrestler-cell { display: flex; align-items: center; gap: 10px; }
|
||
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #1B1A55; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
|
||
.wrestler-name { font-weight: 600; font-size: 14px; color: #1e293b; }
|
||
.date { font-size: 12px; color: #94a3b8; margin-top: 2px; }
|
||
.score-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 700; min-width: 52px; }
|
||
.score-badge.high { background: #dcfce7; color: #16a34a; }
|
||
.score-badge.medium { background: #fef9c3; color: #ca8a04; }
|
||
.score-badge.low { background: #fee2e2; color: #dc2626; }
|
||
.time { font-size: 13px; color: #475569; font-family: monospace; }
|
||
.rating { color: #fbbf24; font-size: 13px; letter-spacing: 1px; }
|
||
.actions { display: flex; gap: 4px; }
|
||
.action-btn { width: 28px; height: 28px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; }
|
||
.action-btn:hover { background: #f1f5f9; }
|
||
.expand-btn { padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; font-size: 11px; cursor: pointer; color: #64748b; }
|
||
.expand-btn:hover { background: #f1f5f9; }
|
||
.expanded-row td { background: #fafafa; padding: 0; }
|
||
.exercise-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 12px 14px; border-top: 1px solid #f1f5f9; }
|
||
.exercise-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; }
|
||
.exercise-card.done { border-color: #86efac; background: #f0fdf4; }
|
||
.exercise-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
|
||
.exercise-name { font-size: 13px; font-weight: 600; color: #374151; }
|
||
.exercise-check { width: 18px; height: 18px; background: #16a34a; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; }
|
||
.exercise-meta { display: flex; justify-content: space-between; font-size: 12px; color: #64748b; }
|
||
.exercise-time { font-weight: 600; color: #16a34a; }
|
||
|
||
/* CARD VIEW */
|
||
.cards { display: flex; flex-direction: column; gap: 12px; }
|
||
.card { background: white; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; transition: box-shadow 0.2s; }
|
||
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
|
||
.card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
|
||
.card-header-left { display: flex; align-items: center; gap: 12px; }
|
||
.card-wrestler-avatar { width: 40px; height: 40px; border-radius: 50%; background: #1B1A55; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
|
||
.card-wrestler-info .name { font-weight: 700; font-size: 15px; color: #1e293b; }
|
||
.card-wrestler-info .meta { font-size: 12px; color: #64748b; margin-top: 2px; }
|
||
.card-header-right { text-align: right; }
|
||
.card-score { font-size: 28px; font-weight: 800; }
|
||
.card-score.high { color: #16a34a; }
|
||
.card-score.medium { color: #ca8a04; }
|
||
.card-score.low { color: #dc2626; }
|
||
.card-time-badge { font-size: 11px; color: #64748b; margin-top: 2px; }
|
||
.card-body { padding: 14px 16px; }
|
||
.card-template-name { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
.card-exercises { display: flex; flex-direction: column; gap: 6px; }
|
||
.card-exercise-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #f8fafc; border-radius: 6px; }
|
||
.card-exercise-row.done { background: #f0fdf4; }
|
||
.card-exercise-name { font-size: 13px; font-weight: 500; color: #374151; }
|
||
.card-exercise-right { display: flex; align-items: center; gap: 12px; }
|
||
.card-exercise-reps { font-size: 12px; color: #64748b; }
|
||
.card-exercise-time { font-size: 12px; font-weight: 600; color: #16a34a; min-width: 40px; text-align: right; }
|
||
.card-exercise-check { width: 16px; height: 16px; background: #16a34a; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; }
|
||
.card-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #f8fafc; border-top: 1px solid #f1f5f9; }
|
||
.card-rating { display: flex; gap: 2px; }
|
||
.card-star { width: 14px; height: 14px; fill: #fbbf24; }
|
||
.card-star.empty { fill: #e2e8f0; }
|
||
.card-actions { display: flex; gap: 6px; }
|
||
.card-action-btn { padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
|
||
.card-action-btn:hover { background: #f1f5f9; }
|
||
.hidden { display: none !important; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<h1 class="page-title">Ergebnisse</h1>
|
||
<div class="toggle-bar">
|
||
<button class="toggle-btn" id="tableBtn" onclick="showTable()">⊞ Tabelle</button>
|
||
<button class="toggle-btn" id="cardBtn" onclick="showCards()">📋 Karten</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-bar">
|
||
<select><option>Alle Vorlagen</option><option>Krafttest Februar</option></select>
|
||
<select><option>Alle Ringer</option></select>
|
||
<select><option>Neueste zuerst</option></select>
|
||
</div>
|
||
|
||
<!-- TABLE VIEW (default) -->
|
||
<div id="tableView">
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="width:220px">Ringer</th>
|
||
<th style="width:80px">Score</th>
|
||
<th style="width:80px">Zeit</th>
|
||
<th style="width:60px">Bew.</th>
|
||
<th style="width:100px">Aktionen</th>
|
||
<th style="width:70px"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="wrestler-cell"><div class="avatar">M</div><div><div class="wrestler-name">Max Mustermann</div><div class="date">24.03.26 · Krafttest Februar</div></div></div></td>
|
||
<td><span class="score-badge high">100%</span></td>
|
||
<td><span class="time">5:42</span></td>
|
||
<td><span class="rating">★★★★☆</span></td>
|
||
<td><div class="actions"><button class="action-btn">✏️</button><button class="action-btn">🗑️</button></div></td>
|
||
<td><button class="expand-btn">▼ Details</button></td>
|
||
</tr>
|
||
<tr class="expanded-row">
|
||
<td colspan="6">
|
||
<div class="exercise-grid">
|
||
<div class="exercise-card done"><div class="exercise-header"><span class="exercise-name">Liegestütze</span><span class="exercise-check">✓</span></div><div class="exercise-meta"><span>Soll: 3×10</span><span class="exercise-time">1:15</span></div></div>
|
||
<div class="exercise-card done"><div class="exercise-header"><span class="exercise-name">Kniebeugen</span><span class="exercise-check">✓</span></div><div class="exercise-meta"><span>Soll: 3×15</span><span class="exercise-time">2:30</span></div></div>
|
||
<div class="exercise-card done"><div class="exercise-header"><span class="exercise-name">Burpees</span><span class="exercise-check">✓</span></div><div class="exercise-meta"><span>Soll: 3×20</span><span class="exercise-time">1:57</span></div></div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="wrestler-cell"><div class="avatar" style="background:#7c3aed">A</div><div><div class="wrestler-name">Anna Schmidt</div><div class="date">23.03.26 · Krafttest Februar</div></div></div></td>
|
||
<td><span class="score-badge medium">87%</span></td>
|
||
<td><span class="time">6:20</span></td>
|
||
<td><span class="rating">★★★☆☆</span></td>
|
||
<td><div class="actions"><button class="action-btn">✏️</button><button class="action-btn">🗑️</button></div></td>
|
||
<td><button class="expand-btn">▼ Details</button></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="wrestler-cell"><div class="avatar" style="background:#dc2626">T</div><div><div class="wrestler-name">Tom Klein</div><div class="date">23.03.26 · Krafttest Februar</div></div></div></td>
|
||
<td><span class="score-badge low">65%</span></td>
|
||
<td><span class="time">8:15</span></td>
|
||
<td><span class="rating">★★☆☆☆</span></td>
|
||
<td><div class="actions"><button class="action-btn">✏️</button><button class="action-btn">🗑️</button></div></td>
|
||
<td><button class="expand-btn">▼ Details</button></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CARD VIEW -->
|
||
<div id="cardView" class="hidden">
|
||
<div class="cards">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-header-left">
|
||
<div class="card-wrestler-avatar">M</div>
|
||
<div class="card-wrestler-info"><div class="name">Max Mustermann</div><div class="meta">24.03.26 · Krafttest Februar</div></div>
|
||
</div>
|
||
<div class="card-header-right">
|
||
<div class="card-score high">100%</div>
|
||
<div class="card-time-badge">5:42 min</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-template-name">Übungen</div>
|
||
<div class="card-exercises">
|
||
<div class="card-exercise-row done"><span class="card-exercise-name">Liegestütze</span><div class="card-exercise-right"><span class="card-exercise-reps">3×10</span><span class="card-exercise-time">1:15</span><span class="card-exercise-check">✓</span></div></div>
|
||
<div class="card-exercise-row done"><span class="card-exercise-name">Kniebeugen</span><div class="card-exercise-right"><span class="card-exercise-reps">3×15</span><span class="card-exercise-time">2:30</span><span class="card-exercise-check">✓</span></div></div>
|
||
<div class="card-exercise-row done"><span class="card-exercise-name">Burpees</span><div class="card-exercise-right"><span class="card-exercise-reps">3×20</span><span class="card-exercise-time">1:57</span><span class="card-exercise-check">✓</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="card-rating"><span class="card-star">★</span><span class="card-star">★</span><span class="card-star">★</span><span class="card-star">★</span><span class="card-star empty">★</span></div>
|
||
<div class="card-actions"><button class="card-action-btn">✏️ Bearbeiten</button><button class="card-action-btn" style="color:#dc2626">🗑 Löschen</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-header-left">
|
||
<div class="card-wrestler-avatar" style="background:#7c3aed">A</div>
|
||
<div class="card-wrestler-info"><div class="name">Anna Schmidt</div><div class="meta">23.03.26 · Krafttest Februar</div></div>
|
||
</div>
|
||
<div class="card-header-right">
|
||
<div class="card-score medium">87%</div>
|
||
<div class="card-time-badge">6:20 min</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-template-name">Übungen</div>
|
||
<div class="card-exercises">
|
||
<div class="card-exercise-row done"><span class="card-exercise-name">Liegestütze</span><div class="card-exercise-right"><span class="card-exercise-reps">3×10</span><span class="card-exercise-time">1:30</span><span class="card-exercise-check">✓</span></div></div>
|
||
<div class="card-exercise-row done"><span class="card-exercise-name">Kniebeugen</span><div class="card-exercise-right"><span class="card-exercise-reps">3×15</span><span class="card-exercise-time">3:00</span><span class="card-exercise-check">✓</span></div></div>
|
||
<div class="card-exercise-row done"><span class="card-exercise-name">Burpees</span><div class="card-exercise-right"><span class="card-exercise-reps">3×20</span><span class="card-exercise-time">1:50</span><span class="card-exercise-check">✓</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="card-rating"><span class="card-star">★</span><span class="card-star">★</span><span class="card-star">★</span><span class="card-star empty">★</span><span class="card-star empty">★</span></div>
|
||
<div class="card-actions"><button class="card-action-btn">✏️ Bearbeiten</button><button class="card-action-btn" style="color:#dc2626">🗑 Löschen</button></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function showTable() {
|
||
document.getElementById('tableView').classList.remove('hidden');
|
||
document.getElementById('cardView').classList.add('hidden');
|
||
document.getElementById('tableBtn').classList.add('active');
|
||
document.getElementById('cardBtn').classList.remove('active');
|
||
}
|
||
function showCards() {
|
||
document.getElementById('tableView').classList.add('hidden');
|
||
document.getElementById('cardView').classList.remove('hidden');
|
||
document.getElementById('tableBtn').classList.remove('active');
|
||
document.getElementById('cardBtn').classList.add('active');
|
||
}
|
||
document.getElementById('cardBtn').classList.add('active');
|
||
showCards();
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|