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
238 lines
11 KiB
HTML
238 lines
11 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 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>
|