diff --git a/.pm-checkpoint.json b/.pm-checkpoint.json index a51114d..8ca2995 100644 --- a/.pm-checkpoint.json +++ b/.pm-checkpoint.json @@ -1,13 +1,8 @@ { - "lastRun": "2026-02-28T22:49:00+01:00", - "status": "completed", - "tasksCompleted": [ - "emoji-replacement", - "alternative-modal", - "workout-page-ux-redesign", - "chat-onboarding", - "03-01-login-onboarding-polish" - ], - "currentPhase": "03-design-polish", - "notes": "03-01 klar: Logo.jsx med SVG barbell, LoginPage/RegisterPage uppdaterade med logotyp, taglines, index.css polerad med animationer." + "lastRun": "2026-02-28T23:33:00+01:00", + "status": "in_progress", + "tasksCompleted": ["emoji-replacement", "alternative-modal", "workout-page-ux-redish", "chat-onboarding", "03-01-login-onboarding-polish", "03-02-dashboard-polish"], + "activeTask": "03-03-workout-experience", + "nextTask": null, + "notes": "Starting 03-03 Workout Experience Polish - spawning frontend agent" } diff --git a/frontend/src/App.css b/frontend/src/App.css index 9f665e4..0ae13cd 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -133,7 +133,7 @@ .day-card { background: var(--bg-card); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); padding: var(--space-4); margin-bottom: var(--space-3); cursor: pointer; @@ -234,7 +234,7 @@ .exercise-card { background: var(--bg-card); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); margin-bottom: var(--space-3); overflow: hidden; border: 1px solid var(--border); @@ -459,7 +459,7 @@ .klart-btn { width: 100%; min-height: 52px; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); background: var(--accent); color: white; border: none; @@ -851,7 +851,7 @@ color: white; border: none; padding: var(--space-4); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); font-size: var(--font-base); font-weight: 600; cursor: pointer; @@ -925,7 +925,7 @@ .stat-card { background: var(--bg-card); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); padding: var(--space-4); text-align: center; border: 1px solid var(--border); @@ -990,7 +990,7 @@ gap: var(--space-4); background: var(--bg-card); padding: var(--space-4); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); border: 1px solid var(--border); cursor: pointer; transition: all var(--transition-base); @@ -1384,7 +1384,7 @@ .measurement-card { background: var(--bg-secondary); padding: var(--space-4); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; @@ -1418,7 +1418,7 @@ justify-content: space-between; padding: var(--space-4); background: var(--bg-secondary); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); } .strength-exercise { @@ -1445,7 +1445,7 @@ gap: var(--space-2); background: var(--bg-card); padding: var(--space-2); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); border: 1px solid var(--border); } @@ -1666,7 +1666,7 @@ .rest-timer-btn { min-height: 48px; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); border: 1px solid var(--border); font-weight: 600; cursor: pointer; @@ -1888,7 +1888,7 @@ padding: var(--space-4); background: var(--bg-secondary); border: 2px dashed var(--border); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); color: var(--text-muted); font-size: var(--font-sm); cursor: pointer; @@ -2502,7 +2502,7 @@ width: 56px; height: 56px; min-width: 56px; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; @@ -2583,7 +2583,7 @@ background: var(--accent); color: white; border: none; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); font-size: var(--font-lg); font-weight: 600; cursor: pointer; @@ -2687,7 +2687,7 @@ width: 100%; background: var(--bg-elevated); border: 1.5px solid var(--border); - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); color: var(--text-primary); font-size: 16px; /* prevents iOS auto-zoom */ @@ -2711,7 +2711,7 @@ background: var(--accent); color: white; border: none; - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); font-size: var(--font-base); font-weight: 600; cursor: pointer; @@ -2860,7 +2860,7 @@ /* ── Calendar day cells: tighter spacing, better font ────── */ .calendar-day { - border-radius: var(--radius-lg); + border-radius: var(--radius-xl); gap: var(--space-1); min-height: 64px; } @@ -2912,3 +2912,49 @@ .week-calendar { animation: sectionIn 300ms ease both; } .coach-section { animation: sectionIn 300ms ease 80ms both; } .quick-stats { animation: sectionIn 300ms ease 160ms both; } +/* WORKOUT POLISH - 03-03 */ +.exercise-card { position: relative; } +.exercise-card::before { + content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; + background: linear-gradient(90deg, var(--accent), #ff8a65); opacity: 0; + transition: opacity 0.2s ease; +} +.exercise-card.expanded::before { opacity: 1; } +.exercise-card.all-done::before { + background: linear-gradient(90deg, var(--success), #4ade80); opacity: 1; +} +.exercise-info h3 { font-size: var(--font-lg); font-weight: 700; } +.muscle-group { + display: inline-block; font-size: var(--font-xs); font-weight: 600; + text-transform: uppercase; padding: var(--space-1) var(--space-2); + background: var(--bg-tertiary); border-radius: var(--radius-full); +} +.progress-badge { + background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); +} +.progress-badge.complete { + background: linear-gradient(135deg, var(--success), #16a34a); + box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); +} +.rest-timer-card { + box-shadow: 0 4px 16px rgba(255, 107, 74, 0.1); +} +.rest-timer-time.running { + text-shadow: 0 0 20px rgba(255, 107, 74, 0.4); + animation: pulse-timer 1s ease-in-out infinite; +} +@keyframes pulse-timer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } +.klart-btn { + background: linear-gradient(135deg, var(--accent), #e85a3c); + border-radius: var(--radius-xl); +} +.klart-btn.done { + background: linear-gradient(135deg, var(--success), #16a34a); + animation: success-bounce 0.5s ease; +} +@keyframes success-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } +.warmup-check { + width: 22px; height: 22px; border-radius: var(--radius-md); + border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; +} +.warmup-item.done .warmup-check { background: var(--success); border-color: var(--success); color: white; }