Initial commit: WrestleDesk full project
- 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
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1774346494860}
|
||||
@@ -0,0 +1 @@
|
||||
12159
|
||||
@@ -0,0 +1,130 @@
|
||||
<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>
|
||||
@@ -0,0 +1,103 @@
|
||||
<h2>Leistungstest Timer — Alle Ringer links, Übungen rechts</h2>
|
||||
<p class="subtitle">Eine gemeinsame Zeit. Pro Übung "Erledigt" klicken = Zeit wird gespeichert.</p>
|
||||
|
||||
<div style="display:flex;gap:16px;align-items:flex-start">
|
||||
|
||||
<!-- LINKS: Ringer-Liste -->
|
||||
<div style="width:260px;flex-shrink:0">
|
||||
<div style="font-weight:600;font-size:13px;color:#475569;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">Ringer</div>
|
||||
<div style="border:1px solid #e2e8f0;border-radius:10px;overflow:hidden">
|
||||
<div style="background:#f1f5f9;padding:10px 12px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:12px;font-weight:600;color:#475569">3 Ringer</span>
|
||||
<span style="font-size:11px;color:#64748b">2/3 erledigt</span>
|
||||
</div>
|
||||
<div style="padding:8px;display:flex;flex-direction:column;gap:4px">
|
||||
<div style="padding:10px 10px;border-radius:8px;border:2px solid #22c55e;background:#dcfce7;cursor:pointer">
|
||||
<div style="font-weight:500;font-size:13px">Max Mustermann</div>
|
||||
<div style="font-size:11px;color:#166534;margin-top:2px">✓ 3/3 Übungen</div>
|
||||
</div>
|
||||
<div style="padding:10px 10px;border-radius:8px;border:2px solid #1B1A55;background:#f8fafc;cursor:pointer">
|
||||
<div style="font-weight:500;font-size:13px">Anna Schmidt</div>
|
||||
<div style="font-size:11px;color:#64748b;margin-top:2px">2/3 Übungen</div>
|
||||
</div>
|
||||
<div style="padding:10px 10px;border-radius:8px;border:1px solid #e2e8f0;background:#f8fafc;cursor:pointer;opacity:0.7">
|
||||
<div style="font-weight:500;font-size:13px">Tom Klein</div>
|
||||
<div style="font-size:11px;color:#94a3b8;margin-top:2px">0/3 Übungen</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RECHTS: Timer + Übungen -->
|
||||
<div style="flex:1">
|
||||
<!-- Globaler Timer -->
|
||||
<div style="background:#1B1A55;border-radius:12px;padding:20px;text-align:center;margin-bottom:16px">
|
||||
<div style="font-size:14px;font-weight:600;color:#9290C3;margin-bottom:4px;text-transform:uppercase;letter-spacing:1px">Gemeinsame Zeit</div>
|
||||
<div style="font-size:64px;font-weight:bold;color:white;font-family:monospace;letter-spacing:2px">05:23</div>
|
||||
<div style="margin-top:12px;display:flex;gap:8px;justify-content:center">
|
||||
<button style="background:rgba(255,255,255,0.15);color:white;padding:8px 20px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer">⏸ Pausieren</button>
|
||||
<button style="background:#dc2626;color:white;padding:8px 20px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer">■ Training beenden</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aktueller Ringer -->
|
||||
<div style="margin-bottom:12px;display:flex;align-items:center;gap:8px">
|
||||
<div style="width:8px;height:8px;border-radius:50%;background:#22c55e"></div>
|
||||
<span style="font-weight:600;font-size:15px">Anna Schmidt</span>
|
||||
<span style="font-size:12px;color:#64748b;background:#f1f5f9;padding:2px 8px;border-radius:10px">2/3 erledigt</span>
|
||||
</div>
|
||||
|
||||
<!-- Übungen -->
|
||||
<div style="border:1px solid #e2e8f0;border-radius:10px;overflow:hidden">
|
||||
<div style="background:#f1f5f9;padding:10px 14px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:12px;font-weight:600;color:#475569">ÜBUNGEN</span>
|
||||
<span style="font-size:11px;color:#64748b">Soll-Zeit in Sekunden</span>
|
||||
</div>
|
||||
|
||||
<!-- Übung 1: Erledigt -->
|
||||
<div style="padding:14px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f1f5f9;background:#dcfce7">
|
||||
<div style="width:28px;height:28px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;color:white;font-size:16px;font-weight:bold;flex-shrink:0">✓</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:500;font-size:14px">Liegestütze</div>
|
||||
<div style="font-size:12px;color:#64748b">Soll: 30s</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<span style="background:#166534;color:white;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600">✓ 0:28</span>
|
||||
<span style="font-size:12px;color:#64748b">+2s</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Übung 2: Aktiv -->
|
||||
<div style="padding:14px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f1f5f9;background:#fef9c3">
|
||||
<div style="width:28px;height:28px;border-radius:50%;background:#eab308;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:bold;flex-shrink:0">▶</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:500;font-size:14px">Kniebeugen</div>
|
||||
<div style="font-size:12px;color:#a16207">Soll: 45s · <strong>Aktiv!</strong></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<span style="background:#a16207;color:white;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600">⏸ 0:31</span>
|
||||
<button style="background:#166534;color:white;padding:8px 16px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer">✓ Erledigt</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Übung 3: Ausstehend -->
|
||||
<div style="padding:14px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f1f5f9;background:#fff">
|
||||
<div style="width:28px;height:28px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;font-weight:bold;flex-shrink:0">3</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:500;font-size:14px">Burpees</div>
|
||||
<div style="font-size:12px;color:#94a3b8">Soll: 20s</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<span style="background:#e2e8f0;color:#64748b;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600">—</span>
|
||||
<button style="background:#1B1A55;color:white;padding:8px 16px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer">▶ Start</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hinweis -->
|
||||
<div style="margin-top:12px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-size:12px;color:#64748b">
|
||||
<strong>Anna ist dran:</strong> Die aktive Übung ist gelb markiert. Klicke "Start" bei Burpees um die Zeit zu starten, dann "Erledigt" um die Zeit zu speichern. Alle Ringer teilen sich die gleiche Gesamtzeit.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,178 @@
|
||||
<h2>Pro Ringer: eigene Übungen, auto-start nach Erledigt</h2>
|
||||
<p class="subtitle">Klick "Erledigt" → nächste Übung startet automatisch. Alle Ringer parallel, eigene Geschwindigkeit.</p>
|
||||
|
||||
<div style="display:flex;gap:16px;align-items:flex-start">
|
||||
|
||||
<!-- LINKS: Ringer-Liste -->
|
||||
<div style="width:240px;flex-shrink:0">
|
||||
<div style="font-weight:600;font-size:13px;color:#475569;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">Ringer</div>
|
||||
<div style="border:1px solid #e2e8f0;border-radius:10px;overflow:hidden">
|
||||
<div style="background:#f1f5f9;padding:10px 12px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:12px;font-weight:600;color:#475569">3 Ringer</span>
|
||||
<span style="font-size:11px;color:#64748b">2/3 ✓</span>
|
||||
</div>
|
||||
<div style="padding:8px;display:flex;flex-direction:column;gap:4px">
|
||||
|
||||
<!-- Max: alle erledigt -->
|
||||
<div style="padding:10px;border-radius:8px;border:2px solid #22c55e;background:#dcfce7;cursor:pointer">
|
||||
<div style="font-weight:600;font-size:13px">Max Mustermann</div>
|
||||
<div style="font-size:11px;color:#166534;margin-top:3px">✓ Alle 3 Übungen</div>
|
||||
<div style="margin-top:6px;display:flex;flex-direction:column;gap:3px">
|
||||
<div style="font-size:10px;background:#bbf7d0;color:#166534;padding:2px 6px;border-radius:4px;text-align:center">✓ Liegestütze 0:28</div>
|
||||
<div style="font-size:10px;background:#bbf7d0;color:#166534;padding:2px 6px;border-radius:4px;text-align:center">✓ Kniebeugen 0:44</div>
|
||||
<div style="font-size:10px;background:#bbf7d0;color:#166534;padding:2px 6px;border-radius:4px;text-align:center">✓ Burpees 0:19</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Anna: aktiv bei Übung 2 -->
|
||||
<div style="padding:10px;border-radius:8px;border:2px solid #1B1A55;background:#f8fafc;cursor:pointer">
|
||||
<div style="font-weight:600;font-size:13px">Anna Schmidt</div>
|
||||
<div style="font-size:11px;color:#1B1A55;margin-top:3px">Übung 2 von 3</div>
|
||||
<div style="margin-top:6px;display:flex;flex-direction:column;gap:3px">
|
||||
<div style="font-size:10px;background:#bbf7d0;color:#166534;padding:2px 6px;border-radius:4px;text-align:center">✓ Liegestütze 0:28</div>
|
||||
<div style="font-size:10px;background:#fef9c3;color:#a16207;padding:2px 6px;border-radius:4px;text-align:center;border:1px solid #fde047">▶ Kniebeugen 0:31</div>
|
||||
<div style="font-size:10px;background:#f1f5f9;color:#94a3b8;padding:2px 6px;border-radius:4px;text-align:center">○ Burpees</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tom: noch nicht gestartet -->
|
||||
<div style="padding:10px;border-radius:8px;border:1px solid #e2e8f0;background:#f8fafc;cursor:pointer;opacity:0.7">
|
||||
<div style="font-weight:500;font-size:13px">Tom Klein</div>
|
||||
<div style="font-size:11px;color:#94a3b8;margin-top:3px">Noch nicht gestartet</div>
|
||||
<div style="margin-top:6px;display:flex;flex-direction:column;gap:3px">
|
||||
<div style="font-size:10px;background:#f1f5f9;color:#94a3b8;padding:2px 6px;border-radius:4px;text-align:center">○ Liegestütze</div>
|
||||
<div style="font-size:10px;background:#f1f5f9;color:#94a3b8;padding:2px 6px;border-radius:4px;text-align:center">○ Kniebeugen</div>
|
||||
<div style="font-size:10px;background:#f1f5f9;color:#94a3b8;padding:2px 6px;border-radius:4px;text-align:center">○ Burpees</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RECHTS: Detail-Ansicht des ausgewählten Ringers -->
|
||||
<div style="flex:1">
|
||||
<!-- Globaler Timer -->
|
||||
<div style="background:#1B1A55;border-radius:12px;padding:20px;text-align:center;margin-bottom:16px">
|
||||
<div style="font-size:14px;font-weight:600;color:#9290C3;margin-bottom:4px;text-transform:uppercase;letter-spacing:1px">Gemeinsame Zeit</div>
|
||||
<div style="font-size:64px;font-weight:bold;color:white;font-family:monospace;letter-spacing:2px">05:23</div>
|
||||
<div style="margin-top:12px;display:flex;gap:8px;justify-content:center">
|
||||
<button style="background:rgba(255,255,255,0.15);color:white;padding:8px 20px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer">⏸ Pausieren</button>
|
||||
<button style="background:#dc2626;color:white;padding:8px 20px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer">■ Training beenden</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ringer Header -->
|
||||
<div style="margin-bottom:12px;display:flex;align-items:center;gap:10px">
|
||||
<div style="width:10px;height:10px;border-radius:50%;background:#1B1A55"></div>
|
||||
<span style="font-weight:700;font-size:18px">Anna Schmidt</span>
|
||||
<span style="font-size:12px;color:#64748b;background:#f1f5f9;padding:3px 10px;border-radius:10px">Übung 2 von 3</span>
|
||||
<span style="font-size:12px;color:#166534;background:#dcfce7;padding:3px 10px;border-radius:10px">1/3 ✓</span>
|
||||
</div>
|
||||
|
||||
<!-- Anna's Übungen -->
|
||||
<div style="border:1px solid #e2e8f0;border-radius:10px;overflow:hidden">
|
||||
<div style="background:#f1f5f9;padding:10px 14px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:12px;font-weight:600;color:#475569">ANNA's ÜBUNGEN</span>
|
||||
<span style="font-size:11px;color:#64748b">Soll-Zeit</span>
|
||||
</div>
|
||||
|
||||
<!-- Übung 1: Erledigt -->
|
||||
<div style="padding:14px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f1f5f9;background:#dcfce7">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;color:white;font-size:18px;font-weight:bold;flex-shrink:0">✓</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:600;font-size:15px">Liegestütze</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div style="font-size:13px;color:#64748b;text-decoration:line-through">Soll: 30s</div>
|
||||
<div style="font-size:14px;font-weight:700;color:#166534">✓ 0:28</div>
|
||||
</div>
|
||||
<div style="width:80px;text-align:center">
|
||||
<span style="font-size:11px;color:#166534;background:#bbf7d0;padding:3px 8px;border-radius:10px;font-weight:600">+2s</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Übung 2: Aktiv — läuft gerade -->
|
||||
<div style="padding:18px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f1f5f9;background:#fef9c3;border-left:4px solid #eab308">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:#eab308;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:bold;flex-shrink:0">▶</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:700;font-size:15px;color:#a16207">Kniebeugen</div>
|
||||
<div style="font-size:12px;color:#a16207;font-weight:500">Aktiv — Zeit läuft!</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div style="font-size:13px;color:#a16207;font-weight:600">Soll: 45s</div>
|
||||
<div style="font-size:22px;font-weight:700;color:#a16207;font-family:monospace">0:31</div>
|
||||
</div>
|
||||
<button style="background:#166534;color:white;padding:10px 18px;border-radius:8px;border:none;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap">✓ Erledigt</button>
|
||||
</div>
|
||||
|
||||
<!-- Übung 3: Ausstehend — kommt als nächstes -->
|
||||
<div style="padding:14px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f1f5f9;background:#f8fafc;opacity:0.8">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;font-weight:bold;flex-shrink:0">3</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:500;font-size:15px;color:#64748b">Burpees</div>
|
||||
<div style="font-size:11px;color:#94a3b8">Startet automatisch nach Kniebeugen</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div style="font-size:13px;color:#94a3b8">Soll: 20s</div>
|
||||
</div>
|
||||
<div style="width:80px;text-align:center">
|
||||
<span style="font-size:11px;color:#94a3b8;background:#f1f5f9;padding:3px 8px;border-radius:10px">Ausstehend</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Auto-Start Hinweis -->
|
||||
<div style="margin-top:12px;padding:12px;background:#fffbeb;border:1px solid #fde047;border-radius:8px;font-size:12px;color:#92400e">
|
||||
<strong>Auto-Start:</strong> Wenn Anna bei "Kniebeugen" auf "✓ Erledigt" klickt → startet "Burpees" automatisch. Der globale Timer läuft weiter. Andere Ringer (Tom) können parallel starten wenn du ihn auswählst.
|
||||
</div>
|
||||
|
||||
<!-- Tom's Ansicht (grau weil nicht ausgewählt) -->
|
||||
<div style="margin-top:24px;padding-top:16px;border-top:2px dashed #e2e8f0">
|
||||
<div style="margin-bottom:12px;display:flex;align-items:center;gap:10px">
|
||||
<div style="width:10px;height:10px;border-radius:50%;background:#94a3b8"></div>
|
||||
<span style="font-weight:600;font-size:16px;color:#64748b">Tom Klein</span>
|
||||
<span style="font-size:12px;color:#94a3b8;background:#f1f5f9;padding:3px 10px;border-radius:10px">0/3</span>
|
||||
<span style="font-size:11px;color:#94a3b8;margin-left:4px">(klicken zum Starten)</span>
|
||||
</div>
|
||||
<div style="border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;opacity:0.6">
|
||||
<div style="padding:14px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f1f5f9;background:#f8fafc">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;font-weight:bold;flex-shrink:0">1</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:500;font-size:14px;color:#64748b">Liegestütze</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div style="font-size:13px;color:#94a3b8">Soll: 30s</div>
|
||||
</div>
|
||||
<button style="background:#64748b;color:white;padding:8px 16px;border-radius:8px;border:none;font-size:13px;cursor:not-allowed">▶ Start</button>
|
||||
</div>
|
||||
<div style="padding:14px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #f1f5f9;background:#f8fafc">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;font-weight:bold;flex-shrink:0">2</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:500;font-size:14px;color:#64748b">Kniebeugen</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div style="font-size:13px;color:#94a3b8">Soll: 45s</div>
|
||||
</div>
|
||||
<div style="width:80px"></div>
|
||||
</div>
|
||||
<div style="padding:14px;display:flex;align-items:center;gap:14px;background:#f8fafc">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px;font-weight:bold;flex-shrink:0">3</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:500;font-size:14px;color:#64748b">Burpees</div>
|
||||
</div>
|
||||
<div style="text-align:right">
|
||||
<div style="font-size:13px;color:#94a3b8">Soll: 20s</div>
|
||||
</div>
|
||||
<div style="width:80px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:10px;padding:10px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;text-align:center">
|
||||
<span style="font-size:12px;color:#94a3b8">Klicke auf Tom in der Liste um seine Übungen zu starten</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,132 @@
|
||||
<h2>Drei Ringer parallel — jeder seine eigene Zeile</h2>
|
||||
<p class="subtitle">Wie eine Tabelle: pro Ringer eine Zeile. Alle 3 parallel. Eigene Zeiten pro Übung.</p>
|
||||
|
||||
<!-- Header: Timer -->
|
||||
<div style="background:#1B1A55;border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||||
<div style="display:flex;align-items:center;gap-16px">
|
||||
<span style="font-size:13px;font-weight:600;color:#9290C3;text-transform:uppercase;letter-spacing:1px">Gemeinsame Zeit</span>
|
||||
<div style="font-size:36px;font-weight:bold;color:white;font-family:monospace;letter-spacing:2px;margin-left:24px">05:23</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<button style="background:rgba(255,255,255,0.15);color:white;padding:8px 18px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer">⏸ Pausieren</button>
|
||||
<button style="background:#dc2626;color:white;padding:8px 18px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer">■ Training beenden</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WRESTLER ROWS: wie eine tabelle, aber pro ringer eine "zeile" -->
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
|
||||
<!-- RINGER 1: Max — alle erledigt -->
|
||||
<div style="border:2px solid #22c55e;border-radius:12px;overflow:hidden;background:#f0fdf4">
|
||||
<div style="display:flex;align-items:center;padding:12px 16px;background:#dcfce7;border-bottom:1px solid #bbf7d0">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:#22c55e;margin-right:10px;flex-shrink:0"></div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:700;font-size:16px;color:#166534">Max Mustermann</div>
|
||||
<div style="font-size:11px;color:#166534;margin-top:1px">✓ Alle 3 Übungen erledigt</div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#166534;background:#bbf7d0;padding:3px 10px;border-radius:10px;font-weight:600">3/3 ✓</div>
|
||||
</div>
|
||||
<div style="padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap">
|
||||
<div style="flex:1;min-width:120px;background:#bbf7d0;border-radius:8px;padding:10px 12px;border:1px solid #86efac">
|
||||
<div style="font-size:11px;color:#166534;font-weight:600;margin-bottom:4px">Liegestütze</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:10px;color:#166534">Soll: 30s</span>
|
||||
<span style="font-size:13px;font-weight:700;color:#166534">✓ 0:28</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:120px;background:#bbf7d0;border-radius:8px;padding:10px 12px;border:1px solid #86efac">
|
||||
<div style="font-size:11px;color:#166534;font-weight:600;margin-bottom:4px">Kniebeugen</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:10px;color:#166534">Soll: 45s</span>
|
||||
<span style="font-size:13px;font-weight:700;color:#166534">✓ 0:44</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:120px;background:#bbf7d0;border-radius:8px;padding:10px 12px;border:1px solid #86efac">
|
||||
<div style="font-size:11px;color:#166534;font-weight:600;margin-bottom:4px">Burpees</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:10px;color:#166534">Soll: 20s</span>
|
||||
<span style="font-size:13px;font-weight:700;color:#166534">✓ 0:19</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RINGER 2: Anna — aktiv -->
|
||||
<div style="border:2px solid #1B1A55;border-radius:12px;overflow:hidden;background:#fff">
|
||||
<div style="display:flex;align-items:center;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:#1B1A55;margin-right:10px;flex-shrink:0"></div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:700;font-size:16px;color:#1B1A55">Anna Schmidt</div>
|
||||
<div style="font-size:11px;color:#1B1A55;margin-top:1px">Aktive Übung: Kniebeugen</div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#a16207;background:#fef9c3;padding:3px 10px;border-radius:10px;font-weight:600">2/3</div>
|
||||
</div>
|
||||
<div style="padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap">
|
||||
<!-- Erledigt -->
|
||||
<div style="flex:1;min-width:120px;background:#dcfce7;border-radius:8px;padding:10px 12px;border:1px solid #86efac">
|
||||
<div style="font-size:11px;color:#166534;font-weight:600;margin-bottom:4px">Liegestütze</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:10px;color:#166534">Soll: 30s</span>
|
||||
<span style="font-size:13px;font-weight:700;color:#166534">✓ 0:28</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Aktiv: läuft -->
|
||||
<div style="flex:1;min-width:160px;background:#fef9c3;border-radius:8px;padding:12px 14px;border:2px solid #eab308">
|
||||
<div style="font-size:11px;color:#a16207;font-weight:600;margin-bottom:6px">▶ Kniebeugen</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||||
<span style="font-size:10px;color:#a16207">Soll: 45s</span>
|
||||
<span style="font-size:18px;font-weight:700;color:#a16207;font-family:monospace">0:31</span>
|
||||
</div>
|
||||
<button style="width:100%;background:#166534;color:white;padding:7px;border-radius:6px;border:none;font-size:12px;font-weight:600;cursor:pointer">✓ Erledigt</button>
|
||||
</div>
|
||||
<!-- Ausstehend -->
|
||||
<div style="flex:1;min-width:120px;background:#f8fafc;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0;opacity:0.7">
|
||||
<div style="font-size:11px;color:#94a3b8;font-weight:600;margin-bottom:4px">Burpees</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:10px;color:#94a3b8">Soll: 20s</span>
|
||||
<span style="font-size:12px;color:#94a3b8">Ausstehend</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RINGER 3: Tom — Start-Buttons -->
|
||||
<div style="border:2px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#f8fafc">
|
||||
<div style="display:flex;align-items:center;padding:12px 16px;background:#f1f5f9;border-bottom:1px solid #e2e8f0">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:#94a3b8;margin-right:10px;flex-shrink:0"></div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:600;font-size:16px;color:#64748b">Tom Klein</div>
|
||||
<div style="font-size:11px;color:#94a3b8;margin-top:1px">Noch nicht gestartet</div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#94a3b8;background:#e2e8f0;padding:3px 10px;border-radius:10px;font-weight:600">0/3</div>
|
||||
</div>
|
||||
<div style="padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap">
|
||||
<div style="flex:1;min-width:140px;background:#fff;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0">
|
||||
<div style="font-size:11px;color:#64748b;font-weight:600;margin-bottom:6px">Liegestütze</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:10px;color:#94a3b8">Soll: 30s</span>
|
||||
<button style="background:#1B1A55;color:white;padding:6px 12px;border-radius:6px;border:none;font-size:11px;font-weight:600;cursor:pointer">▶ Start</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:140px;background:#fff;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0">
|
||||
<div style="font-size:11px;color:#64748b;font-weight:600;margin-bottom:6px">Kniebeugen</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:10px;color:#94a3b8">Soll: 45s</span>
|
||||
<button style="background:#e2e8f0;color:#94a3b8;padding:6px 12px;border-radius:6px;border:none;font-size:11px;font-weight:600;cursor:not-allowed">▶ Start</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:140px;background:#fff;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0">
|
||||
<div style="font-size:11px;color:#64748b;font-weight:600;margin-bottom:6px">Burpees</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:10px;color:#94a3b8">Soll: 20s</span>
|
||||
<button style="background:#e2e8f0;color:#94a3b8;padding:6px 12px;border-radius:6px;border:none;font-size:11px;font-weight:600;cursor:not-allowed">▶ Start</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-top:14px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-size:12px;color:#64748b">
|
||||
<strong>So funktioniert's:</strong> Alle 3 Ringer arbeiten parallel. Anna hat gerade Kniebeugen aktiv (gelb) — nach dem Klick auf "✓ Erledigt" startet Burpees automatisch. Tom kann jederzeit auf "▶ Start" bei Liegestütze klicken um seine erste Übung zu starten. Der globale Timer läuft für alle gemeinsam.
|
||||
</div>
|
||||
@@ -0,0 +1,130 @@
|
||||
<h2>Timer start → alle beginnen Übung 1 automatisch</h2>
|
||||
<p class="subtitle">Soll = Reps (z.B. "3x10"). Trainer klickt "Erledigt" pro Ringer wenn fertig.</p>
|
||||
|
||||
<!-- Header: Timer + Start -->
|
||||
<div style="background:#1B1A55;border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
|
||||
<div style="display:flex;align-items:center;gap:24px">
|
||||
<span style="font-size:13px;font-weight:600;color:#9290C3;text-transform:uppercase;letter-spacing:1px">Gemeinsame Zeit</span>
|
||||
<div style="font-size:36px;font-weight:bold;color:white;font-family:monospace;letter-spacing:2px">00:00</div>
|
||||
</div>
|
||||
<button style="background:#22c55e;color:white;padding:10px 24px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer">▶ Training starten</button>
|
||||
</div>
|
||||
|
||||
<!-- WRESTLER ROWS -->
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
|
||||
<!-- RINGER 1: Max — Übung 1 läuft gerade -->
|
||||
<div style="border:2px solid #eab308;border-radius:12px;overflow:hidden;background:#fff">
|
||||
<div style="display:flex;align-items:center;padding:12px 16px;background:#fef9c3;border-bottom:1px solid #fde047">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:#eab308;margin-right:10px;flex-shrink:0"></div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:700;font-size:16px;color:#a16207">Max Mustermann</div>
|
||||
<div style="font-size:11px;color:#a16207;margin-top:1px">Übung 1 läuft...</div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#a16207;background:#fef3c7;padding:3px 10px;border-radius:10px;font-weight:600">0/3</div>
|
||||
</div>
|
||||
<div style="padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap">
|
||||
<!-- Übung 1: Aktiv -->
|
||||
<div style="flex:1;min-width:160px;background:#fef9c3;border-radius:8px;padding:12px 14px;border:2px solid #eab308">
|
||||
<div style="font-size:11px;color:#a16207;font-weight:600;margin-bottom:6px">▶ Liegestütze</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||||
<span style="font-size:11px;color:#a16207;font-weight:500">Soll: <strong>3×10</strong></span>
|
||||
<span style="font-size:20px;font-weight:700;color:#a16207;font-family:monospace">0:28</span>
|
||||
</div>
|
||||
<button style="width:100%;background:#166534;color:white;padding:8px;border-radius:6px;border:none;font-size:13px;font-weight:600;cursor:pointer">✓ Erledigt</button>
|
||||
</div>
|
||||
<!-- Übung 2+3: Wartend -->
|
||||
<div style="flex:1;min-width:120px;background:#f8fafc;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0;opacity:0.6">
|
||||
<div style="font-size:11px;color:#94a3b8;font-weight:600;margin-bottom:4px">Kniebeugen</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:11px;color:#94a3b8">Soll: 3×15</span>
|
||||
<span style="font-size:11px;color:#94a3b8">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:120px;background:#f8fafc;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0;opacity:0.6">
|
||||
<div style="font-size:11px;color:#94a3b8;font-weight:600;margin-bottom:4px">Burpees</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:11px;color:#94a3b8">Soll: 3×20</span>
|
||||
<span style="font-size:11px;color:#94a3b8">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RINGER 2: Anna — Übung 1 läuft -->
|
||||
<div style="border:2px solid #eab308;border-radius:12px;overflow:hidden;background:#fff">
|
||||
<div style="display:flex;align-items:center;padding:12px 16px;background:#fef9c3;border-bottom:1px solid #fde047">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:#eab308;margin-right:10px;flex-shrink:0"></div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:700;font-size:16px;color:#a16207">Anna Schmidt</div>
|
||||
<div style="font-size:11px;color:#a16207;margin-top:1px">Übung 1 läuft...</div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#a16207;background:#fef3c7;padding:3px 10px;border-radius:10px;font-weight:600">0/3</div>
|
||||
</div>
|
||||
<div style="padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap">
|
||||
<div style="flex:1;min-width:160px;background:#fef9c3;border-radius:8px;padding:12px 14px;border:2px solid #eab308">
|
||||
<div style="font-size:11px;color:#a16207;font-weight:600;margin-bottom:6px">▶ Liegestütze</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||||
<span style="font-size:11px;color:#a16207;font-weight:500">Soll: <strong>3×10</strong></span>
|
||||
<span style="font-size:20px;font-weight:700;color:#a16207;font-family:monospace">0:31</span>
|
||||
</div>
|
||||
<button style="width:100%;background:#166534;color:white;padding:8px;border-radius:6px;border:none;font-size:13px;font-weight:600;cursor:pointer">✓ Erledigt</button>
|
||||
</div>
|
||||
<div style="flex:1;min-width:120px;background:#f8fafc;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0;opacity:0.6">
|
||||
<div style="font-size:11px;color:#94a3b8;font-weight:600;margin-bottom:4px">Kniebeugen</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:11px;color:#94a3b8">Soll: 3×15</span>
|
||||
<span style="font-size:11px;color:#94a3b8">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:120px;background:#f8fafc;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0;opacity:0.6">
|
||||
<div style="font-size:11px;color:#94a3b8;font-weight:600;margin-bottom:4px">Burpees</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:11px;color:#94a3b8">Soll: 3×20</span>
|
||||
<span style="font-size:11px;color:#94a3b8">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RINGER 3: Tom — Übung 1 läuft -->
|
||||
<div style="border:2px solid #eab308;border-radius:12px;overflow:hidden;background:#fff">
|
||||
<div style="display:flex;align-items:center;padding:12px 16px;background:#fef9c3;border-bottom:1px solid #fde047">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:#eab308;margin-right:10px;flex-shrink:0"></div>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:700;font-size:16px;color:#a16207">Tom Klein</div>
|
||||
<div style="font-size:11px;color:#a16207;margin-top:1px">Übung 1 läuft...</div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#a16207;background:#fef3c7;padding:3px 10px;border-radius:10px;font-weight:600">0/3</div>
|
||||
</div>
|
||||
<div style="padding:14px 16px;display:flex;gap:10px;flex-wrap:wrap">
|
||||
<div style="flex:1;min-width:160px;background:#fef9c3;border-radius:8px;padding:12px 14px;border:2px solid #eab308">
|
||||
<div style="font-size:11px;color:#a16207;font-weight:600;margin-bottom:6px">▶ Liegestütze</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||||
<span style="font-size:11px;color:#a16207;font-weight:500">Soll: <strong>3×10</strong></span>
|
||||
<span style="font-size:20px;font-weight:700;color:#a16207;font-family:monospace">0:22</span>
|
||||
</div>
|
||||
<button style="width:100%;background:#166534;color:white;padding:8px;border-radius:6px;border:none;font-size:13px;font-weight:600;cursor:pointer">✓ Erledigt</button>
|
||||
</div>
|
||||
<div style="flex:1;min-width:120px;background:#f8fafc;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0;opacity:0.6">
|
||||
<div style="font-size:11px;color:#94a3b8;font-weight:600;margin-bottom:4px">Kniebeugen</div>
|
||||
<div style="display:flex;justify-content;between;align-items:center">
|
||||
<span style="font-size:11px;color:#94a3b8">Soll: 3×15</span>
|
||||
<span style="font-size:11px;color:#94a3b8">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:120px;background:#f8fafc;border-radius:8px;padding:10px 12px;border:1px solid #e2e8f0;opacity:0.6">
|
||||
<div style="font-size:11px;color:#94a3b8;font-weight:600;margin-bottom:4px">Burpees</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<span style="font-size:11px;color:#94a3b8">Soll: 3×20</span>
|
||||
<span style="font-size:11px;color:#94a3b8">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="margin-top:14px;padding:12px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:12px;color:#1e40af">
|
||||
<strong>Flow:</strong> Trainer klickt "▶ Training starten" → ALLE 3 Ringer beginnen gleichzeitig Übung 1 ("Liegestütze 3×10"). Der Timer läuft. Trainer klickt bei Max auf "✓ Erledigt" → Zeit wird gespeichert (0:28), Max's nächste Übung (Kniebeugen) startet automatisch. Anna und Tom sind noch bei Übung 1.
|
||||
</div>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user