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
192 lines
9.1 KiB
HTML
192 lines
9.1 KiB
HTML
<!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>
|