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
131 lines
8.0 KiB
HTML
131 lines
8.0 KiB
HTML
<h2>Leistungstest Timer — Layout</h2>
|
|
<p class="subtitle">Pro Ringer: links Info/Timer, rechts Übungen. Timer läuft durchgehend.</p>
|
|
|
|
<div class="split">
|
|
<div class="mockup">
|
|
<div class="mockup-header">Ringer 1: Max Mustermann</div>
|
|
<div class="mockup-body" style="padding:16px;background:#f8fafc">
|
|
<div style="text-align:center;margin-bottom:12px">
|
|
<div style="font-size:48px;font-weight:bold;font-family:monospace">05:23</div>
|
|
<div style="font-size:12px;color:#64748b">Gesamtzeit</div>
|
|
</div>
|
|
<div style="display:flex;gap:8px;justify-content:center;margin-bottom:16px">
|
|
<button class="mock-button" style="background:#1B1A55;color:white;padding:8px 16px;border-radius:6px;border:none;font-size:13px">⏸ Pausieren</button>
|
|
</div>
|
|
<div style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden">
|
|
<div style="background:#f1f5f9;padding:8px 12px;font-size:12px;font-weight:600;color:#475569;border-bottom:1px solid #e2e8f0">
|
|
ÜBUNGEN
|
|
</div>
|
|
<div style="padding:12px;display:flex;flex-direction:column;gap:8px">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px;background:#dcfce7;border-radius:6px;border:1px solid #86efac">
|
|
<div>
|
|
<div style="font-weight:500;font-size:13px">Liegestütze</div>
|
|
<div style="font-size:11px;color:#64748b">Soll: 30s</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<span style="background:#22c55e;color:white;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600">✓ 0:12</span>
|
|
<span style="color:#22c55e;font-size:18px">✓</span>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px;background:#fef9c3;border-radius:6px;border:1px solid #fde047">
|
|
<div>
|
|
<div style="font-weight:500;font-size:13px">Kniebeugen</div>
|
|
<div style="font-size:11px;color:#64748b">Soll: 45s</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<span style="background:#eab308;color:white;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600">⏸ 0:28</span>
|
|
<button style="background:#1B1A55;color:white;padding:6px 12px;border-radius:6px;border:none;font-size:12px;cursor:pointer">✓ Erledigt</button>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0">
|
|
<div>
|
|
<div style="font-weight:500;font-size:13px">Burpees</div>
|
|
<div style="font-size:11px;color:#64748b">Soll: 20s</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<span style="background:#94a3b8;color:white;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600">Ausstehend</span>
|
|
<button style="background:#1B1A55;color:white;padding:6px 12px;border-radius:6px;border:none;font-size:12px;cursor:pointer">▶ Start</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">Ringer 2: Anna Schmidt</div>
|
|
<div class="mockup-body" style="padding:16px;background:#f8fafc">
|
|
<div style="text-align:center;margin-bottom:12px">
|
|
<div style="font-size:48px;font-weight:bold;font-family:monospace;color:#94a3b8">02:41</div>
|
|
<div style="font-size:12px;color:#64748b">Gesamtzeit</div>
|
|
</div>
|
|
<div style="display:flex;gap:8px;justify-content:center;margin-bottom:16px">
|
|
<button class="mock-button" style="background:#1B1A55;color:white;padding:8px 16px;border-radius:6px;border:none;font-size:13px">▶ Fortsetzen</button>
|
|
</div>
|
|
<div style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden">
|
|
<div style="background:#f1f5f9;padding:8px 12px;font-size:12px;font-weight:600;color:#475569;border-bottom:1px solid #e2e8f0">
|
|
ÜBUNGEN
|
|
</div>
|
|
<div style="padding:12px;display:flex;flex-direction:column;gap:8px">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px;background:#fef9c3;border-radius:6px;border:1px solid #fde047">
|
|
<div>
|
|
<div style="font-weight:500;font-size:13px">Liegestütze</div>
|
|
<div style="font-size:11px;color:#64748b">Soll: 30s</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<span style="background:#eab308;color:white;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600">⏸ 0:31</span>
|
|
<button style="background:#1B1A55;color:white;padding:6px 12px;border-radius:6px;border:none;font-size:12px;cursor:pointer">✓ Erledigt</button>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0">
|
|
<div>
|
|
<div style="font-weight:500;font-size:13px">Kniebeugen</div>
|
|
<div style="font-size:11px;color:#64748b">Soll: 45s</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<span style="background:#94a3b8;color:white;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600">Ausstehend</span>
|
|
<button style="background:#1B1A55;color:white;padding:6px 12px;border-radius:6px;border:none;font-size:12px;cursor:pointer">▶ Start</button>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0">
|
|
<div>
|
|
<div style="font-weight:500;font-size:13px">Burpees</div>
|
|
<div style="font-size:11px;color:#64748b">Soll: 20s</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:8px">
|
|
<span style="background:#94a3b8;color:white;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600">Ausstehend</span>
|
|
<button style="background:#1B1A55;color:white;padding:6px 12px;border-radius:6px;border:none;font-size:12px;cursor:pointer">▶ Start</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" style="margin-top:16px">
|
|
<h3>Zustände pro Übung</h3>
|
|
<div style="display:flex;gap:16px;margin-top:8px;flex-wrap:wrap">
|
|
<div style="flex:1;min-width:140px;padding:12px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0">
|
|
<div style="font-weight:600;font-size:12px;color:#64748b;margin-bottom:4px">AUSSTEHEND</div>
|
|
<div style="font-size:11px;color:#94a3b8">Grau — noch nicht gestartet</div>
|
|
<div style="margin-top:6px;font-size:12px">Button: ▶ Start</div>
|
|
</div>
|
|
<div style="flex:1;min-width:140px;padding:12px;background:#fef9c3;border-radius:8px;border:1px solid #fde047">
|
|
<div style="font-weight:600;font-size:12px;color:#a16207;margin-bottom:4px">AKTIV / LÄUFT</div>
|
|
<div style="font-size:11px;color:#a16207">Gelb — Timer läuft für diese Übung</div>
|
|
<div style="margin-top:6px;font-size:12px">Button: ✓ Erledigt (speichert Zeit)</div>
|
|
</div>
|
|
<div style="flex:1;min-width:140px;padding:12px;background:#dcfce7;border-radius:8px;border:1px solid #86efac">
|
|
<div style="font-weight:600;font-size:12px;color:#166534;margin-bottom:4px">ERLEDIGT</div>
|
|
<div style="font-size:11px;color:#166534">Grün — Zeit gespeichert, keine Aktion mehr</div>
|
|
<div style="margin-top:6px;font-size:12px">Zeit badge: ✓ 0:12</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="font-size:12px;color:#94a3b8;margin-top:12px">
|
|
<strong>Wichtig:</strong> Der globale Timer läuft durchgehend (nicht reset zwischen Übungen).
|
|
Jede Übung hat eine eigene "Erledigt"-Zeit. Soll = Zeit (Sekunden), kein Reps.
|
|
</p>
|