k1nq/workout_watcher
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor ActiveWorkout component to support multiple workout sets and enhance styling for improved user experience

Browse Source
This commit is contained in:
Artem Kashaev
2026-05-28 15:36:57 +05:00
parent c17c65fcfa
commit d7b0c7754f
2 changed files with 243 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+62 -35
View File
@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { FormEvent, useEffect, useMemo, useState } from "react"; import { FormEvent, useEffect, useMemo, useState } from "react";
import { api, type AuthState } from "./api"; import { api, type AuthState } from "./api";
import type { CatalogEntity, Workout, WorkoutItem as WorkoutItemType } from "./types"; import type { CatalogEntity, Workout, WorkoutItem as WorkoutItemType, WorkoutSet } from "./types";
type Tab = "dashboard" | "catalog" | "workout" | "history" | "analytics"; type Tab = "dashboard" | "catalog" | "workout" | "history" | "analytics";
@@ -238,8 +238,6 @@ function ActiveWorkout({ token }: { token: string }) {
const [activeWorkout, setActiveWorkout] = useState<Workout | null>(null); const [activeWorkout, setActiveWorkout] = useState<Workout | null>(null);
const [catalogKind, setCatalogKind] = useState<"exercise" | "equipment">("exercise"); const [catalogKind, setCatalogKind] = useState<"exercise" | "equipment">("exercise");
const [expandedItemId, setExpandedItemId] = useState<string | null>(null); const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
const [weight, setWeight] = useState(60);
const [reps, setReps] = useState(8);
const [showFinishModal, setShowFinishModal] = useState(false); const [showFinishModal, setShowFinishModal] = useState(false);
const [finishNotes, setFinishNotes] = useState(""); const [finishNotes, setFinishNotes] = useState("");
const [elapsed, setElapsed] = useState(""); const [elapsed, setElapsed] = useState("");
@@ -307,16 +305,23 @@ function ActiveWorkout({ token }: { token: string }) {
}, },
}); });
const addSetMutation = useMutation({ const addSetsMutation = useMutation({
mutationFn: (itemId: string) => api.addWorkoutSet(token, itemId, { weight, reps }), mutationFn: async ({ itemId, sets }: { itemId: string; sets: Array<{ weight: number; reps: number }> }) => {
onSuccess: (workoutSet, itemId) => { const created: WorkoutSet[] = [];
for (const set of sets) {
created.push(await api.addWorkoutSet(token, itemId, set));
}
return created;
},
onSuccess: (workoutSets, { itemId }) => {
setActiveWorkout((w) => { setActiveWorkout((w) => {
if (!w) return w; if (!w) return w;
const addedCalories = workoutSets.reduce((sum, set) => sum + (set.calories ?? 0), 0);
return { return {
...w, ...w,
estimated_calories: w.estimated_calories + (workoutSet.calories ?? 0), estimated_calories: w.estimated_calories + addedCalories,
items: w.items.map((item) => items: w.items.map((item) =>
item.id === itemId ? { ...item, sets: [...item.sets, workoutSet] } : item, item.id === itemId ? { ...item, sets: [...item.sets, ...workoutSets] } : item,
), ),
}; };
}); });
@@ -436,13 +441,9 @@ function ActiveWorkout({ token }: { token: string }) {
expanded={expandedItemId === item.id} expanded={expandedItemId === item.id}
onToggle={() => setExpandedItemId(expandedItemId === item.id ? null : item.id)} onToggle={() => setExpandedItemId(expandedItemId === item.id ? null : item.id)}
onRemoveItem={() => removeItemMutation.mutate(item.id)} onRemoveItem={() => removeItemMutation.mutate(item.id)}
onAddSet={expandedItemId === item.id ? () => addSetMutation.mutate(item.id) : undefined} onAddSets={(sets) => addSetsMutation.mutate({ itemId: item.id, sets })}
onRemoveSet={(setId) => removeSetMutation.mutate({ itemId: item.id, setId })} onRemoveSet={(setId) => removeSetMutation.mutate({ itemId: item.id, setId })}
weight={weight} isAddingSet={addSetsMutation.isPending}
reps={reps}
onWeightChange={setWeight}
onRepsChange={setReps}
isAddingSet={addSetMutation.isPending}
isRemovingItem={removeItemMutation.isPending} isRemovingItem={removeItemMutation.isPending}
/> />
))} ))}
@@ -490,12 +491,8 @@ function CartItemRow({
expanded, expanded,
onToggle, onToggle,
onRemoveItem, onRemoveItem,
onAddSet, onAddSets,
onRemoveSet, onRemoveSet,
weight,
reps,
onWeightChange,
onRepsChange,
isAddingSet, isAddingSet,
isRemovingItem, isRemovingItem,
}: { }: {
@@ -505,12 +502,8 @@ function CartItemRow({
expanded: boolean; expanded: boolean;
onToggle: () => void; onToggle: () => void;
onRemoveItem: () => void; onRemoveItem: () => void;
onAddSet: (() => void) | undefined; onAddSets: (sets: Array<{ weight: number; reps: number }>) => void;
onRemoveSet: (setId: string) => void; onRemoveSet: (setId: string) => void;
weight: number;
reps: number;
onWeightChange: (v: number) => void;
onRepsChange: (v: number) => void;
isAddingSet: boolean; isAddingSet: boolean;
isRemovingItem: boolean; isRemovingItem: boolean;
}) { }) {
@@ -519,6 +512,18 @@ function CartItemRow({
if (item.equipment_id) return equipment?.find((e) => e.id === item.equipment_id)?.name ?? "Тренажер"; if (item.equipment_id) return equipment?.find((e) => e.id === item.equipment_id)?.name ?? "Тренажер";
return "Неизвестно"; return "Неизвестно";
}, [item.exercise_id, item.equipment_id, exercises, equipment]); }, [item.exercise_id, item.equipment_id, exercises, equipment]);
const [draftCount, setDraftCount] = useState(3);
const [draftSets, setDraftSets] = useState(() =>
Array.from({ length: 8 }, () => ({ weight: 60, reps: 8 })),
);
function updateDraftSet(index: number, key: "weight" | "reps", value: number) {
setDraftSets((sets) => sets.map((set, i) => (i === index ? { ...set, [key]: value } : set)));
}
function saveDraftSets() {
onAddSets(draftSets.slice(0, draftCount));
}
return ( return (
<div className={`cart-item${expanded ? " expanded" : ""}`}> <div className={`cart-item${expanded ? " expanded" : ""}`}>
@@ -547,25 +552,47 @@ function CartItemRow({
))} ))}
</div> </div>
)} )}
{onAddSet && ( <div className="set-builder">
<div className="add-set-row"> <div className="slider-head">
<span>Новые подходы</span>
<strong>{draftCount}</strong>
</div>
<input
aria-label="Количество подходов"
className="set-count-slider"
type="range"
min="1"
max="8"
value={draftCount}
onChange={(e) => setDraftCount(Number(e.target.value))}
/>
<div className="draft-sets">
{draftSets.slice(0, draftCount).map((set, index) => (
<div className="draft-set-row" key={index}>
<span>{index + 1}</span>
<label>
Вес
<input <input
type="number" type="number"
value={weight} value={set.weight}
onChange={(e) => onWeightChange(Number(e.target.value))} onChange={(e) => updateDraftSet(index, "weight", Number(e.target.value))}
placeholder="Вес"
/> />
</label>
<label>
Повторы
<input <input
type="number" type="number"
value={reps} value={set.reps}
onChange={(e) => onRepsChange(Number(e.target.value))} onChange={(e) => updateDraftSet(index, "reps", Number(e.target.value))}
placeholder="Повторы"
/> />
<button className="primary" disabled={isAddingSet} onClick={onAddSet}> </label>
{isAddingSet ? "..." : "Подход"} </div>
))}
</div>
<button className="primary add-sets-btn" disabled={isAddingSet} onClick={saveDraftSets}>
{isAddingSet ? "Записываю..." : `Записать ${draftCount} подх.`}
</button> </button>
</div> </div>
)}
</div> </div>
)} )}
</div> </div>
frontend/src/styles.css
+174 -79
View File
@@ -1,115 +1,209 @@
:root { :root {
color: #111827; color: #172033;
background: #f4f0e8; background: #edf1f5;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: "Manrope", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
--ink: #111827;
--muted: #64748b;
--line: rgba(17, 24, 39, 0.1);
--panel: rgba(255, 255, 255, 0.88);
--panel-strong: #ffffff;
--lime: #c8ff3d;
--blue: #2563eb;
--danger: #dc2626;
--shadow: 0 22px 70px rgba(15, 23, 42, 0.12);
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; } body {
margin: 0;
min-width: 320px;
min-height: 100vh;
background:
radial-gradient(circle at 85% -10%, rgba(200,255,61,0.22), transparent 32%),
radial-gradient(circle at 15% 8%, rgba(37,99,235,0.12), transparent 30%),
linear-gradient(180deg, #f7f8fb 0%, #e7ecf2 100%);
}
button, input, select { font: inherit; } button, input, select { font: inherit; }
button { border: 0; cursor: pointer; } button { border: 0; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: 0.55; } button:disabled { cursor: not-allowed; opacity: 0.55; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; } .app-shell { min-height: 100vh; display: grid; grid-template-columns: 292px 1fr; }
.sidebar { background: #151515; color: #f9fafb; padding: 28px; display: flex; flex-direction: column; gap: 28px; } .sidebar {
.sidebar h1 { font-size: 28px; line-height: 1; margin: 8px 0 0; } position: sticky;
top: 0;
height: 100vh;
background: #0b0f16;
color: #f8fafc;
padding: 30px 22px;
display: flex;
flex-direction: column;
gap: 30px;
border-right: 1px solid rgba(255,255,255,0.08);
}
.sidebar h1 { font-size: 30px; line-height: .94; letter-spacing: -0.05em; margin: 8px 0 0; }
.sidebar nav { display: grid; gap: 8px; } .sidebar nav { display: grid; gap: 8px; }
.sidebar nav button, .profile-card button { color: #f9fafb; background: transparent; text-align: left; border-radius: 14px; padding: 12px 14px; } .sidebar nav button, .profile-card button {
.sidebar nav button.active, .sidebar nav button:hover { background: #dbff5b; color: #151515; } color: #dbe4ef;
.profile-card { margin-top: auto; display: grid; gap: 6px; padding: 16px; border: 1px solid #333; border-radius: 20px; } background: transparent;
.profile-card small { color: #a3a3a3; } text-align: left;
main { padding: 32px; } border-radius: 16px;
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: center; } padding: 13px 14px;
.hero-panel { min-height: calc(100vh - 64px); border-radius: 32px; padding: 48px; color: #f9fafb; background: radial-gradient(circle at 20% 20%, #dbff5b 0 12%, transparent 13%), linear-gradient(135deg, #111827, #3f2d20); display: flex; flex-direction: column; justify-content: flex-end; } font-weight: 750;
.hero-panel h1 { font-size: clamp(36px, 6vw, 76px); line-height: 0.95; max-width: 920px; margin: 0; } }
.hero-panel p:not(.eyebrow) { max-width: 680px; color: #e5e7eb; font-size: 18px; } .sidebar nav button.active, .sidebar nav button:hover {
background: var(--lime);
color: #0b0f16;
}
.profile-card {
margin-top: auto;
display: grid;
gap: 7px;
padding: 16px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}
.profile-card small { color: #94a3b8; }
main { padding: 34px; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 24px; align-items: center; }
.hero-panel {
min-height: calc(100vh - 68px);
border-radius: 36px;
padding: 52px;
color: #f8fafc;
background:
linear-gradient(135deg, rgba(200,255,61,0.95), rgba(200,255,61,0) 26%),
radial-gradient(circle at 80% 24%, rgba(37,99,235,0.55), transparent 30%),
#0b0f16;
display: flex;
flex-direction: column;
justify-content: flex-end;
box-shadow: var(--shadow);
}
.hero-panel h1 { font-size: clamp(40px, 6vw, 82px); line-height: .88; letter-spacing: -0.07em; max-width: 920px; margin: 0; }
.hero-panel p:not(.eyebrow) { max-width: 680px; color: #cbd5e1; font-size: 18px; }
.auth-card { max-width: 440px; width: 100%; } .auth-card { max-width: 440px; width: 100%; }
.stack { display: grid; gap: 24px; }
.stack { display: grid; gap: 22px; max-width: 1240px; }
.page-header { display: flex; justify-content: space-between; gap: 16px; align-items: center; } .page-header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.page-header h2, .card h3, .auth-card h2 { margin: 0; } .page-header h2, .card h3, .auth-card h2 { margin: 0; }
.eyebrow { color: #8a5cf6; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; margin: 0 0 8px; text-transform: uppercase; } .page-header h2 { font-size: clamp(30px, 4vw, 52px); line-height: .95; letter-spacing: -0.055em; }
.card { background: rgba(255,255,255,0.82); border: 1px solid rgba(17,24,39,0.08); border-radius: 24px; box-shadow: 0 18px 60px rgba(17,24,39,0.08); padding: 22px; } .eyebrow { color: #2563eb; font-size: 11px; font-weight: 900; letter-spacing: .18em; margin: 0 0 8px; text-transform: uppercase; }
.primary { background: #151515; color: #fff; border-radius: 14px; padding: 12px 18px; font-weight: 800; } .card {
.ghost { background: transparent; color: #374151; padding: 10px; } background: var(--panel);
label { display: grid; gap: 8px; font-weight: 700; color: #374151; } border: 1px solid rgba(255,255,255,0.74);
input, select { width: 100%; border: 1px solid #d1d5db; border-radius: 14px; padding: 12px 14px; background: #fff; color: #111827; } border-radius: 28px;
.error { color: #b91c1c; margin: 0; } box-shadow: var(--shadow);
.muted { color: #6b7280; } padding: 22px;
backdrop-filter: blur(18px);
}
.primary { background: #0b0f16; color: #fff; border-radius: 16px; padding: 12px 18px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.primary:hover:not(:disabled) { background: #172033; }
.ghost { background: transparent; color: #475569; padding: 10px 12px; border-radius: 12px; }
.ghost:hover { background: rgba(15,23,42,0.06); }
label { display: grid; gap: 8px; font-weight: 800; color: #475569; font-size: 13px; }
input, select {
width: 100%;
border: 1px solid var(--line);
border-radius: 16px;
padding: 12px 14px;
background: rgba(255,255,255,0.92);
color: var(--ink);
outline: none;
}
input:focus, select:focus { border-color: rgba(37,99,235,0.45); box-shadow: 0 0 0 4px rgba(37,99,235,0.1); }
input[type="range"] { padding: 0; box-shadow: none; border: 0; background: transparent; accent-color: var(--lime); }
.error { color: var(--danger); margin: 0; }
.muted { color: var(--muted); }
.stats-grid, .catalog-grid, .workout-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .stats-grid, .catalog-grid, .workout-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { background: #fff; border-radius: 18px; padding: 16px; display: grid; gap: 8px; } .metric { background: var(--panel-strong); border-radius: 20px; padding: 16px; display: grid; gap: 8px; border: 1px solid var(--line); }
.metric span { color: #6b7280; font-size: 13px; } .metric span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.metric strong { font-size: 26px; } .metric strong { font-size: 28px; letter-spacing: -0.04em; }
.segmented { display: flex; background: #fff; border-radius: 999px; padding: 4px; } .segmented { display: flex; background: rgba(15,23,42,0.06); border-radius: 999px; padding: 4px; border: 1px solid var(--line); }
.segmented button { background: transparent; border-radius: 999px; padding: 10px 14px; } .segmented button { background: transparent; border-radius: 999px; padding: 10px 14px; font-weight: 850; color: #475569; }
.segmented button.active { background: #151515; color: #fff; } .segmented button.active { background: #0b0f16; color: #fff; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; } .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.catalog-card { overflow: hidden; padding: 0; }
.catalog-card img, .image-placeholder { width: 100%; height: 170px; object-fit: cover; background: linear-gradient(135deg, #dbff5b, #8a5cf6); display: grid; place-items: center; font-weight: 900; color: #151515; } .catalog-card { overflow: hidden; padding: 0; transition: transform .18s ease, box-shadow .18s ease; }
.catalog-card:hover { transform: translateY(-2px); }
.catalog-card img, .image-placeholder { width: 100%; height: 170px; object-fit: cover; background: linear-gradient(135deg, #c8ff3d, #dbeafe 55%, #1e293b); display: grid; place-items: center; font-weight: 950; color: #0b0f16; }
.catalog-card div:last-child { padding: 18px; } .catalog-card div:last-child { padding: 18px; }
.catalog-card p { color: #6b7280; } .catalog-card p { color: var(--muted); }
.pill { display: inline-flex; border-radius: 999px; background: #e5e7eb; padding: 5px 10px; font-size: 12px; font-weight: 800; } .pill { display: inline-flex; border-radius: 999px; background: #eef2f7; color: #475569; padding: 5px 10px; font-size: 11px; font-weight: 900; }
.pill.user { background: #dcfce7; color: #166534; } .pill.user { background: #dcfce7; color: #166534; }
.empty-state { text-align: center; padding: 48px; } .empty-state { text-align: center; padding: 48px; }
.workout-card { display: grid; gap: 18px; } .workout-card { display: grid; gap: 18px; }
.workout-cta { text-align: center; padding: 48px 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.workout-cta h3 { margin: 0; font-size: 24px; } .workout-cta { text-align: center; padding: 58px 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(200,255,61,.18)); }
.workout-cta p { color: #6b7280; max-width: 420px; } .workout-cta h3 { margin: 0; font-size: 32px; letter-spacing: -0.04em; }
.workout-cta p { color: var(--muted); max-width: 460px; }
.workout-live-stats { display: flex; gap: 10px; align-items: center; } .workout-live-stats { display: flex; gap: 10px; align-items: center; }
.timer-badge { background: #151515; color: #dbff5b; font-family: "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace; font-size: 18px; font-weight: 800; padding: 8px 16px; border-radius: 14px; letter-spacing: 0.04em; } .timer-badge { background: #0b0f16; color: var(--lime); font-family: "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace; font-size: 18px; font-weight: 900; padding: 9px 16px; border-radius: 16px; letter-spacing: .04em; }
.kcal-badge { background: #f3e8ff; color: #7c3aed; font-weight: 800; padding: 8px 14px; border-radius: 14px; font-size: 14px; } .kcal-badge { background: #dbeafe; color: #1d4ed8; font-weight: 900; padding: 9px 14px; border-radius: 16px; font-size: 14px; }
.catalog-picker-section { padding: 20px 24px; } .catalog-picker-section { padding: 20px 24px; }
.catalog-picker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .catalog-picker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.catalog-picker-header h3 { margin: 0; } .catalog-picker-header h3 { margin: 0; }
.workout-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .workout-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.workout-pick-card { padding: 0; cursor: default; transition: box-shadow 0.2s; } .workout-pick-card { padding: 0; cursor: default; }
.workout-pick-card.added { opacity: 0.55; } .workout-pick-card.added { opacity: .56; }
.workout-pick-card .image-placeholder { height: 100px; } .workout-pick-card .image-placeholder, .workout-pick-card img { height: 112px; }
.workout-pick-card img { height: 100px; } .workout-pick-card div:last-child { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.workout-pick-card div:last-child { padding: 14px; display: flex; flex-direction: column; gap: 8px; } .workout-pick-card h3 { margin: 0; font-size: 15px; }
.workout-pick-card h3 { margin: 0; font-size: 14px; } .pick-btn { border-radius: 13px; padding: 9px 12px; font-weight: 900; font-size: 12px; width: 100%; }
.pick-btn { border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 12px; width: 100%; }
.pick-btn.picked { background: #dcfce7; color: #166534; cursor: default; } .pick-btn.picked { background: #dcfce7; color: #166534; cursor: default; }
.workout-cart { display: flex; flex-direction: column; gap: 16px; } .workout-cart { display: flex; flex-direction: column; gap: 16px; background: #0b0f16; color: #f8fafc; border-color: rgba(255,255,255,.1); }
.workout-cart > h3 { margin: 0; } .workout-cart > h3 { margin: 0; }
.workout-cart .muted { color: #94a3b8; }
.cart-items { display: flex; flex-direction: column; gap: 10px; } .cart-items { display: flex; flex-direction: column; gap: 10px; }
.cart-item { border: 1px solid rgba(17,24,39,0.08); border-radius: 16px; overflow: hidden; transition: border-color 0.2s; } .cart-item { border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.05); }
.cart-item.expanded { border-color: #8a5cf6; } .cart-item.expanded { border-color: rgba(200,255,61,.72); background: rgba(255,255,255,.075); }
.cart-item-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; } .cart-item-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; cursor: pointer; }
.cart-item-header:hover { background: rgba(0,0,0,0.02); } .cart-item-header:hover { background: rgba(255,255,255,.04); }
.cart-item-info { display: flex; flex-direction: column; gap: 2px; } .cart-item-info { display: flex; flex-direction: column; gap: 3px; }
.cart-item-name { font-weight: 700; font-size: 15px; } .cart-item-name { font-weight: 900; font-size: 16px; }
.cart-item-summary { color: #6b7280; font-size: 13px; } .cart-item-summary { color: #94a3b8; font-size: 13px; }
.cart-item-remove { background: transparent; color: #9ca3af; font-size: 20px; padding: 4px 8px; border-radius: 8px; line-height: 1; } .cart-item-remove { background: transparent; color: #94a3b8; font-size: 22px; padding: 4px 9px; border-radius: 10px; line-height: 1; }
.cart-item-remove:hover { color: #b91c1c; background: #fef2f2; } .cart-item-remove:hover { color: #fecaca; background: rgba(220,38,38,.18); }
.cart-item-body { border-top: 1px solid rgba(17,24,39,0.06); padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; } .cart-item-body { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.sets-list { display: flex; flex-direction: column; gap: 6px; } .sets-list { display: flex; flex-direction: column; gap: 8px; }
.set-row { display: grid; grid-template-columns: 28px 1fr 70px 28px; gap: 8px; align-items: center; padding: 6px 0; } .set-row { display: grid; grid-template-columns: 32px 1fr 78px 32px; gap: 8px; align-items: center; padding: 8px 10px; background: rgba(255,255,255,.06); border-radius: 12px; }
.set-index { font-weight: 800; color: #8a5cf6; font-size: 13px; } .set-index { font-weight: 950; color: var(--lime); font-size: 13px; }
.set-data { font-size: 14px; font-weight: 600; } .set-data { font-size: 14px; font-weight: 850; }
.set-cal { color: #6b7280; font-size: 12px; } .set-cal { color: #94a3b8; font-size: 12px; }
.set-remove { background: transparent; color: #d1d5db; font-size: 16px; padding: 2px 6px; border-radius: 6px; line-height: 1; } .set-remove { background: transparent; color: #64748b; font-size: 17px; padding: 2px 6px; border-radius: 8px; line-height: 1; }
.set-remove:hover { color: #b91c1c; background: #fef2f2; } .set-remove:hover { color: #fecaca; background: rgba(220,38,38,.18); }
.add-set-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; } .set-builder { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.08); }
.add-set-row input { padding: 10px 12px; font-size: 14px; border-radius: 12px; } .slider-head { display: flex; justify-content: space-between; align-items: center; color: #cbd5e1; font-weight: 900; }
.add-set-row button { padding: 10px 16px; font-size: 13px; white-space: nowrap; } .slider-head strong { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #0b0f16; font-size: 20px; }
.finish-btn { align-self: flex-end; margin-top: 8px; } .set-count-slider { height: 30px; }
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(17,24,39,0.45); display: grid; place-items: center; backdrop-filter: blur(4px); } .draft-sets { display: grid; gap: 10px; }
.modal-card { max-width: 440px; width: calc(100% - 32px); display: flex; flex-direction: column; gap: 18px; } .draft-set-row { display: grid; grid-template-columns: 36px 1fr 1fr; gap: 10px; align-items: end; }
.modal-card h2 { margin: 0; } .draft-set-row > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(200,255,61,.16); color: var(--lime); font-weight: 950; }
.draft-set-row label { color: #cbd5e1; }
.draft-set-row input { background: rgba(255,255,255,.92); }
.add-sets-btn { justify-self: end; }
.finish-btn { align-self: flex-end; margin-top: 8px; background: var(--lime); color: #0b0f16; }
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(2,6,23,.6); display: grid; place-items: center; backdrop-filter: blur(8px); }
.modal-card { max-width: 460px; width: calc(100% - 32px); display: flex; flex-direction: column; gap: 18px; }
.modal-card h2 { margin: 0; letter-spacing: -0.04em; }
.modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .modal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.modal-stats .metric { padding: 12px; } .modal-stats .metric { padding: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; } .modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
.bars { display: grid; gap: 12px; } .bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 70px; gap: 12px; align-items: center; } .bar-row { display: grid; grid-template-columns: 110px 1fr 70px; gap: 12px; align-items: center; }
.bar-row div { height: 16px; border-radius: 999px; background: #e5e7eb; overflow: hidden; } .bar-row div { height: 16px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.bar-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a5cf6, #dbff5b); } .bar-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #c8ff3d); }
@media (max-width: 980px) { @media (max-width: 980px) {
.app-shell { grid-template-columns: 1fr; padding-bottom: 88px; } .app-shell { grid-template-columns: 1fr; padding-bottom: 88px; }
.sidebar { position: fixed; inset: auto 12px 12px; z-index: 10; border-radius: 24px; padding: 12px; display: block; } .sidebar { position: fixed; inset: auto 12px 12px; z-index: 10; height: auto; border-radius: 24px; padding: 12px; display: block; }
.sidebar > div:first-child, .profile-card { display: none; } .sidebar > div:first-child, .profile-card { display: none; }
.sidebar nav { grid-template-columns: repeat(5, 1fr); } .sidebar nav { grid-template-columns: repeat(5, 1fr); }
.sidebar nav button { text-align: center; padding: 10px 6px; font-size: 12px; } .sidebar nav button { text-align: center; padding: 10px 6px; font-size: 12px; }
@@ -128,6 +222,7 @@ input, select { width: 100%; border: 1px solid #d1d5db; border-radius: 14px; pad
.page-header { align-items: stretch; flex-direction: column; } .page-header { align-items: stretch; flex-direction: column; }
.catalog-grid, .workout-stats { grid-template-columns: 1fr; } .catalog-grid, .workout-stats { grid-template-columns: 1fr; }
.workout-catalog-grid { grid-template-columns: 1fr; } .workout-catalog-grid { grid-template-columns: 1fr; }
.add-set-row { grid-template-columns: 1fr 1fr; } .draft-set-row { grid-template-columns: 28px 1fr 1fr; }
.add-set-row button { grid-column: 1 / -1; } .modal-stats { grid-template-columns: 1fr; }
.bar-row { grid-template-columns: 1fr; }
} }