PlayMan/WrestleDesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: WrestleDesk full project

Browse Source 
- 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
This commit is contained in:
Andrej Spielmann
2026-03-26 13:24:57 +01:00
commit 3fefc550fe
256 changed files with 38295 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/brainstorm/12147-ergebnisse/option1-karten.html
+237
View File
@@ -0,0 +1,237 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Option 1: Karten-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: 900px; margin: 0 auto; }
.toggle-bar { display: flex; gap: 8px; margin-bottom: 20px; background: #e2e8f0; padding: 4px; border-radius: 8px; width: fit-content; }
.toggle-btn { padding: 8px 20px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: #64748b; }
.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: 180px; }
.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; }
.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; }
.wrestler-info .name { font-weight: 700; font-size: 15px; color: #1e293b; }
.wrestler-info .meta { font-size: 12px; color: #64748b; margin-top: 2px; }
.card-header-right { text-align: right; }
.score { font-size: 28px; font-weight: 800; color: #16a34a; }
.score.low { color: #dc2626; }
.score.medium { color: #ca8a04; }
.score.high { color: #16a34a; }
.time-badge { font-size: 11px; color: #64748b; margin-top: 2px; }
.card-body { padding: 14px 16px; }
.template-name { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.exercises { display: flex; flex-direction: column; gap: 6px; }
.exercise-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #f8fafc; border-radius: 6px; }
.exercise-row.done { background: #f0fdf4; }
.exercise-name { font-size: 13px; font-weight: 500; color: #374151; }
.exercise-right { display: flex; align-items: center; gap: 12px; }
.exercise-reps { font-size: 12px; color: #64748b; }
.exercise-time { font-size: 12px; font-weight: 600; color: #16a34a; min-width: 40px; text-align: right; }
.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; }
.rating { display: flex; gap: 2px; }
.star { width: 14px; height: 14px; fill: #fbbf24; }
.star.empty { fill: #e2e8f0; }
.actions { display: flex; gap: 6px; }
.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; }
.action-btn:hover { background: #f1f5f9; }
.expand-hint { font-size: 11px; color: #94a3b8; text-align: center; padding: 8px; }
</style>
</head>
<body>
<div class="container">
<h2 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:16px">Ergebnisse — Option 1: Karten-Ansicht</h2>
<div class="toggle-bar">
<button class="toggle-btn active">📋 Karten</button>
<button class="toggle-btn">⊞ Tabelle</button>
</div>
<div class="filter-bar">
<select><option>Alle Vorlagen</option></select>
<select><option>Alle Ringe</option></select>
</div>
<div class="cards">
<!-- CARD 1: Perfect score -->
<div class="card">
<div class="card-header">
<div class="card-header-left">
<div class="wrestler-avatar">M</div>
<div class="wrestler-info">
<div class="name">Max Mustermann</div>
<div class="meta">Heute, 14:32 · Krafttest Februar</div>
</div>
</div>
<div class="card-header-right">
<div class="score high">100%</div>
<div class="time-badge">5:42 min</div>
</div>
</div>
<div class="card-body">
<div class="template-name">Übungen</div>
<div class="exercises">
<div class="exercise-row done">
<span class="exercise-name">Liegestütze</span>
<div class="exercise-right">
<span class="exercise-reps">3×10</span>
<span class="exercise-time">1:15</span>
<span class="exercise-check">✓</span>
</div>
</div>
<div class="exercise-row done">
<span class="exercise-name">Kniebeugen</span>
<div class="exercise-right">
<span class="exercise-reps">3×15</span>
<span class="exercise-time">2:30</span>
<span class="exercise-check">✓</span>
</div>
</div>
<div class="exercise-row done">
<span class="exercise-name">Burpees</span>
<div class="exercise-right">
<span class="exercise-reps">3×20</span>
<span class="exercise-time">1:57</span>
<span class="exercise-check">✓</span>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="rating">
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star empty">★</span>
</div>
<div class="actions">
<button class="action-btn">✏️ Bearbeiten</button>
<button class="action-btn" style="color:#dc2626">🗑 Löschen</button>
</div>
</div>
</div>
<!-- CARD 2: Medium score -->
<div class="card">
<div class="card-header">
<div class="card-header-left">
<div class="wrestler-avatar" style="background:#7c3aed">A</div>
<div class="wrestler-info">
<div class="name">Anna Schmidt</div>
<div class="meta">Gestern, 10:15 · Krafttest Februar</div>
</div>
</div>
<div class="card-header-right">
<div class="score medium">87%</div>
<div class="time-badge">6:20 min</div>
</div>
</div>
<div class="card-body">
<div class="template-name">Übungen</div>
<div class="exercises">
<div class="exercise-row done">
<span class="exercise-name">Liegestütze</span>
<div class="exercise-right">
<span class="exercise-reps">3×10</span>
<span class="exercise-time">1:30</span>
<span class="exercise-check">✓</span>
</div>
</div>
<div class="exercise-row done">
<span class="exercise-name">Kniebeugen</span>
<div class="exercise-right">
<span class="exercise-reps">3×15</span>
<span class="exercise-time">3:00</span>
<span class="exercise-check">✓</span>
</div>
</div>
<div class="exercise-row" style="opacity:0.5">
<span class="exercise-name">Burpees</span>
<div class="exercise-right">
<span class="exercise-reps">3×20</span>
<span class="exercise-time" style="color:#94a3b8">—</span>
<span style="width:16px;height:16px;border-radius:50%;border:2px solid #e2e8f0;display:inline-block"></span>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="rating">
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star empty">★</span><span class="star empty">★</span>
</div>
<div class="actions">
<button class="action-btn">✏️ Bearbeiten</button>
<button class="action-btn" style="color:#dc2626">🗑 Löschen</button>
</div>
</div>
</div>
<!-- CARD 3: Low score -->
<div class="card">
<div class="card-header">
<div class="card-header-left">
<div class="wrestler-avatar" style="background:#dc2626">T</div>
<div class="wrestler-info">
<div class="name">Tom Klein</div>
<div class="meta">23.03.26, 16:45 · Krafttest Februar</div>
</div>
</div>
<div class="card-header-right">
<div class="score low">65%</div>
<div class="time-badge">8:15 min</div>
</div>
</div>
<div class="card-body">
<div class="template-name">Übungen</div>
<div class="exercises">
<div class="exercise-row done">
<span class="exercise-name">Liegestütze</span>
<div class="exercise-right">
<span class="exercise-reps">3×10</span>
<span class="exercise-time">2:00</span>
<span class="exercise-check">✓</span>
</div>
</div>
<div class="exercise-row" style="opacity:0.5">
<span class="exercise-name">Kniebeugen</span>
<div class="exercise-right">
<span class="exercise-reps">3×15</span>
<span class="exercise-time" style="color:#94a3b8">—</span>
<span style="width:16px;height:16px;border-radius:50%;border:2px solid #e2e8f0;display:inline-block"></span>
</div>
</div>
<div class="exercise-row" style="opacity:0.5">
<span class="exercise-name">Burpees</span>
<div class="exercise-right">
<span class="exercise-reps">3×20</span>
<span class="exercise-time" style="color:#94a3b8">—</span>
<span style="width:16px;height:16px;border-radius:50%;border:2px solid #e2e8f0;display:inline-block"></span>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="rating">
<span class="star">★</span><span class="star">★</span><span class="star empty">★</span><span class="star empty">★</span><span class="star empty">★</span>
</div>
<div class="actions">
<button class="action-btn">✏️ Bearbeiten</button>
<button class="action-btn" style="color:#dc2626">🗑 Löschen</button>
</div>
</div>
</div>
</div>
<div style="margin-top:24px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:13px;color:#1e40af">
<strong>Vorteile:</strong> Pro Ergebnis eine übersichtliche Karte mit allen Details (Ringer-Foto, Score, Zeit, alle Übungen mit Zeiten). Klick auf Karte zeigt Details. Farbcodierung: Grün/Gelb/Rot nach Score.
</div>
</div>
</body>
</html>
.superpowers/brainstorm/12147-ergebnisse/option2-tabelle.html
+191
View File
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Option 2: Erweiterte Tabelle</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; }
.toggle-bar { display: flex; gap: 8px; margin-bottom: 20px; background: #e2e8f0; padding: 4px; border-radius: 8px; width: fit-content; }
.toggle-btn { padding: 8px 20px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: #64748b; }
.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-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(200px, 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; }
</style>
</head>
<body>
<div class="container">
<h2 style="font-size:18px;font-weight:700;color:#1e293b;margin-bottom:16px">Ergebnisse — Option 2: Erweiterte Tabelle</h2>
<div class="toggle-bar">
<button class="toggle-btn">📋 Karten</button>
<button class="toggle-btn active">⊞ Tabelle</button>
</div>
<div class="filter-bar">
<select><option>Alle Vorlagen</option></select>
<select><option>Alle Ringer</option></select>
<select><option>Neueste zuerst</option></select>
</div>
<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:60px"></th>
</tr>
</thead>
<tbody>
<!-- ROW 1: Expanded -->
<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" title="Bearbeiten">✏️</button>
<button class="action-btn" title="Löschen">🗑️</button>
</div>
</td>
<td><button class="expand-btn">▲ Details</button></td>
</tr>
<!-- EXPANDED DETAILS -->
<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>
<!-- ROW 2 -->
<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" title="Bearbeiten">✏️</button>
<button class="action-btn" title="Löschen">🗑️</button>
</div>
</td>
<td><button class="expand-btn">▼ Details</button></td>
</tr>
<!-- ROW 3 -->
<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" title="Bearbeiten">✏️</button>
<button class="action-btn" title="Löschen">🗑️</button>
</div>
</td>
<td><button class="expand-btn">▼ Details</button></td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top:24px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:13px;color:#1e40af">
<strong>Vorteile:</strong> Kompakte Tabellenansicht — wie gewohnt, aber mit "Details" Toggle pro Zeile um alle Übungen mit Zeiten anzuzeigen. Gut für Vergleiche nebeneinander.
</div>
</div>
</body>
</html>
.superpowers/brainstorm/12147-ergebnisse/preview.html
+228
View File
@@ -0,0 +1,228 @@
<!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>