Analyzing diff...
plans/irina-aleksei/week-4/index.html+90 −0
new file mode 100644 index 0000000..0ea5c38 @@ -0,0 +1,90 @@ +<!doctype html> +<html lang="ru"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="theme-color" content="#e9eee9"> + <meta name="robots" content="noindex,nofollow"> + <title>Ира и Лёша · Неделя 4</title> + <style> + :root{--bg:#f4f5f1;--paper:#fffefa;--ink:#28322f;--muted:#66716c;--sage:#789187;--sage2:#dfe8e2;--sand:#eee6d9;--line:#d8ddd8;--focus:#325d50;--shadow:0 8px 28px rgba(44,57,51,.08)} + *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}button,a,input,textarea{font:inherit}a{color:#315f52;text-underline-offset:3px}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px} + .wrap{width:min(100% - 28px,760px);margin:auto}.hero{padding:44px 0 28px;background:linear-gradient(145deg,var(--sage2),var(--sand))}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:800;color:#52675f}.hero h1{margin:0;font:700 clamp(2rem,10vw,3.8rem)/1.04 Georgia,serif}.hero p{max-width:38rem;margin:16px 0 0;color:#52605a}.nav{display:flex;gap:8px;overflow:auto;padding:14px 0}.nav a{white-space:nowrap;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 12px;text-decoration:none;font-weight:650} + main{padding:12px 0 64px}section{scroll-margin-top:12px;margin:22px 0}.card,.day{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.card{padding:20px}h2{margin:0 0 14px;font:700 1.65rem/1.2 Georgia,serif}h3{margin:0;font-size:1.15rem}.soft{color:var(--muted)} + .progress-card{padding:18px 20px;position:sticky;top:8px;z-index:3}.progress-list{display:grid;gap:14px}.progress-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline}.progress-head strong{font-size:1.1rem}.track{height:10px;background:#e3e6e2;border-radius:99px;overflow:hidden;margin-top:7px}.fill{width:0;height:100%;background:var(--sage);transition:width .25s ease}.progress-person.alexey .fill{background:#8d8274} + .days{display:grid;gap:14px}.day{overflow:hidden}.day-head{display:flex;justify-content:space-between;align-items:center;padding:17px 18px;background:#f8f7f2;border-bottom:1px solid var(--line)}.date{color:var(--muted);font-size:.9rem}.workout{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:start;padding:15px 18px;border-bottom:1px solid var(--line)}.workout:last-child{border-bottom:0}.participant-checks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 18px}.participant-checks label{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:700;cursor:pointer}.participant-checks input{width:21px;height:21px;margin:0;accent-color:var(--sage)}.participant-checks label:last-child input{accent-color:#8d8274}.workout-title{font-weight:650}.time{font-size:.85rem;color:var(--muted);background:var(--sage2);border-radius:99px;padding:2px 8px}.video{grid-column:1/-1;font-size:.92rem}.rest{padding:18px}.transfer{margin-top:10px;padding:12px 14px;border-left:4px solid var(--sage);background:var(--sage2);border-radius:0 10px 10px 0} + .theory-grid{display:grid;gap:10px}.kind{padding:14px;border-radius:14px;background:#f5f3ec}.kind strong{display:block;margin-bottom:3px}.scale{display:flex;gap:8px;margin:15px 0}.scale span{flex:1;text-align:center;padding:10px 2px;border-radius:8px;background:#eceeea;font-weight:700}.scale .hunger{background:#e6dccb}.scale .full{background:#d9e7df}.note{padding:14px;border-radius:12px;background:var(--sage2)} + figure{margin:18px 0 0}svg{display:block;width:100%;height:auto;border-radius:16px;background:#f7f5ef}figcaption{margin-top:8px;color:var(--muted);font-size:.9rem}.emotion{font-size:12px;font-weight:700;fill:#33413c}.emotion-center{font-size:16px;font-weight:800;fill:#33413c} + .journal-grid{display:grid;gap:14px}.field label{display:block;font-weight:700;margin-bottom:5px}.field textarea{display:block;width:100%;min-height:86px;resize:vertical;padding:11px 12px;border:1px solid #bfc8c2;border-radius:10px;background:#fff;color:var(--ink)}.field textarea:focus{border-color:var(--focus)} + .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.btn{border:0;border-radius:999px;padding:11px 17px;font-weight:750;cursor:pointer;background:var(--sage);color:white}.btn.secondary{background:var(--sage2);color:var(--ink)}.btn.danger{background:transparent;color:#744a43;border:1px solid #bb9e98}.status{min-height:1.5em;margin:10px 0 0;color:var(--muted)}footer{padding:0 0 50px;color:var(--muted);text-align:center;font-size:.92rem} + @media(min-width:650px){.theory-grid{grid-template-columns:repeat(3,1fr)}.journal-grid{grid-template-columns:1fr 1fr}.field.wide{grid-column:1/-1}.card{padding:26px}.progress-list{grid-template-columns:1fr 1fr}} + @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fill{transition:none}} + </style> +</head> +<body> + <header class="hero"><div class="wrap"><p class="eyebrow">Спокойный маршрут · неделя 4</p><h1>Ира и Лёша</h1><p>Движение, внимание к себе и наблюдение без контроля. В тренировках ориентируйтесь на самочувствие.</p></div></header> + <div class="wrap"><nav class="nav" aria-label="Разделы"><a href="#plan">План</a><a href="#theory">Теория</a><a href="#practice">Практика</a><a href="#report">Отчёт</a></nav></div> + <main class="wrap"> + <section class="card progress-card" aria-labelledby="progress-title"><div class="progress-head"><span class="soft" id="progress-title">Прогресс недели</span><span aria-hidden="true">🌿</span></div><div class="progress-list"><div class="progress-person ira"><strong id="ira-progress-text">Ирина · 0 из 17 · 0%</strong><div class="track" id="ira-progress" role="progressbar" aria-label="Выполненные тренировки Ирины" aria-valuemin="0" aria-valuemax="17" aria-valuenow="0" aria-valuetext="0 из 17, 0 процентов"><div class="fill" id="ira-progress-fill"></div></div></div><div class="progress-person alexey"><strong id="alexey-progress-text">Алексей · 0 из 17 · 0%</strong><div class="track" id="alexey-progress" role="progressbar" aria-label="Выполненные тренировки Алексея" aria-valuemin="0" aria-valuemax="17" aria-valuenow="0" aria-valuetext="0 из 17, 0 процентов"><div class="fill" id="alexey-progress-fill"></div></div></div></div></section> + <section id="plan"><h2>План тренировок</h2><p class="soft">Отмечайте выполненное в удобном темпе. Отметки сохраняются на этом устройстве.</p><div class="days" id="workouts"> + <article class="day"><div class="day-head"><h3>Пятница</h3><span class="date">мобильность · сила · отдых</span></div> + <div class="workout" data-title="Мобильность грудного отдела"><div class="participant-checks"><label><input type="checkbox" id="ira-w1" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w1" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Мобильность грудного отдела</strong><span class="time">06:05</span><a class="video" href="https://kinescope.io/odsa939LRpYCn22tkc61Dy" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Мягкая силовая для кора и спины"><div class="participant-checks"><label><input type="checkbox" id="ira-w2" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w2" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Мягкая силовая для кора и спины</strong><span class="time">15:28</span><a class="video" href="https://kinescope.io/4aj8kgWhCECUNSdXnsg6Ew" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Расслабление шеи и плеч"><div class="participant-checks"><label><input type="checkbox" id="ira-w3" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w3" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Расслабление шеи и плеч</strong><span class="time">06:12</span><a class="video" href="https://kinescope.io/4nyN6ww81p7B5ibizd6yZD" target="_blank" rel="noopener">Открыть видео ↗</a></div></article> + <article class="day"><div class="day-head"><h3>Суббота</h3><span class="date">кор · растяжка</span></div> + <div class="workout" data-title="Утро на мышцы кора"><div class="participant-checks"><label><input type="checkbox" id="ira-w4" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w4" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Утро на мышцы кора</strong><span class="time">08:49</span><a class="video" href="https://kinescope.io/73fxmuFpyVPBYYGYFshXs7" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Растяжка"><div class="participant-checks"><label><input type="checkbox" id="ira-w5" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w5" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Растяжка</strong><span class="time">22:18</span><a class="video" href="https://kinescope.io/mUCCZmtG9wQ9s3PS4LGYpA" target="_blank" rel="noopener">Открыть видео ↗</a></div></article> + <article class="day"><div class="day-head"><h3>Воскресенье</h3><span class="date">разный ритм</span></div><div class="rest"><strong>Ира — отдыхает.</strong><div class="transfer"><strong>Лёша:</strong> выполняет блок среды. Отмечайте выполнение в среде ниже — повторных чекбоксов здесь нет.</div></div></article> + <article class="day"><div class="day-head"><h3>Понедельник</h3><span class="date">силовая · массаж</span></div> + <div class="workout" data-title="Силовая с гантелями: спина, руки и кор"><div class="participant-checks"><label><input type="checkbox" id="ira-w6" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w6" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Силовая с гантелями: спина, руки и кор</strong><span class="time">09:44</span><a class="video" href="https://kinescope.io/fQaqeqVkSKZR27vhBBnYyK" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Силовая на ягодицы/ноги и спину/руки"><div class="participant-checks"><label><input type="checkbox" id="ira-w7" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w7" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Силовая на ягодицы/ноги и спину/руки</strong><span class="time">19:32</span><a class="video" href="https://kinescope.io/kau9FqvfeJjxE45RPyrgeE" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Массаж пресса"><div class="participant-checks"><label><input type="checkbox" id="ira-w8" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w8" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Массаж пресса</strong><span class="time">07:40</span><a class="video" href="https://kinescope.io/jVKqXs6iEFx7bXd19HsbUt" target="_blank" rel="noopener">Открыть видео ↗</a></div></article> + <article class="day"><div class="day-head"><h3>Вторник</h3><span class="date">осанка · кардио · дыхание</span></div> + <div class="workout" data-title="Комплекс для осанки"><div class="participant-checks"><label><input type="checkbox" id="ira-w9" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w9" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Комплекс для осанки</strong><span class="time">08:44</span><a class="video" href="https://kinescope.io/3fbDDUY9wL9Y7SasnnvDAm" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Кардиосиловая с гантелями"><div class="participant-checks"><label><input type="checkbox" id="ira-w10" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w10" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Кардиосиловая с гантелями</strong><span class="time">20:10</span><a class="video" href="https://kinescope.io/fe64az1WiQziGziLXqrt3W" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Дыхание и глубокий кор"><div class="participant-checks"><label><input type="checkbox" id="ira-w11" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w11" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Дыхание и глубокий кор</strong><span class="time">05:50</span><a class="video" href="https://kinescope.io/3xhK9M8X7htQVf9t3duYAe" target="_blank" rel="noopener">Открыть видео ↗</a></div></article> + <article class="day"><div class="day-head"><h3>Среда</h3><span class="date">силовая · спина · расслабление</span></div> + <div class="workout" data-title="Утро силовая"><div class="participant-checks"><label><input type="checkbox" id="ira-w12" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w12" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Утро силовая</strong><span class="time">09:53</span><a class="video" href="https://kinescope.io/rpuPdiwk31wpUDbPFPTzMn" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Мягкая силовая для спины, лопаток и ягодиц"><div class="participant-checks"><label><input type="checkbox" id="ira-w13" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w13" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Мягкая силовая для спины, лопаток и ягодиц</strong><span class="time">15:26</span><a class="video" href="https://kinescope.io/fDBt7Z6nh5jJCx1a4knBCX" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Самомассаж плеч и трапеций"><div class="participant-checks"><label><input type="checkbox" id="ira-w14" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w14" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Самомассаж плеч и трапеций</strong><span class="time">05:58</span><a class="video" href="https://kinescope.io/oB54dQodECnmaDBE1v1trT" target="_blank" rel="noopener">Открыть видео ↗</a></div></article> + <article class="day"><div class="day-head"><h3>Четверг</h3><span class="date">мобильность · ВИИТ · массаж</span></div> + <div class="workout" data-title="Мобильность позвоночника и осанка"><div class="participant-checks"><label><input type="checkbox" id="ira-w15" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w15" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Мобильность позвоночника и осанка</strong><span class="time">17:54</span><a class="video" href="https://kinescope.io/xqrAa8XVat5EzucUTk2fWn" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="ВИИТ"><div class="participant-checks"><label><input type="checkbox" id="ira-w16" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w16" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">ВИИТ</strong><span class="time">21:47</span><a class="video" href="https://kinescope.io/d9dmYtvSF5UYkXTE4ZNkW8" target="_blank" rel="noopener">Открыть видео ↗</a></div> + <div class="workout" data-title="Массаж пресса"><div class="participant-checks"><label><input type="checkbox" id="ira-w17" data-person="ira"><span>Ирина</span></label><label><input type="checkbox" id="alexey-w17" data-person="alexey"><span>Алексей</span></label></div><strong class="workout-title">Массаж пресса</strong><span class="time">07:40</span><a class="video" href="https://kinescope.io/bcyNH71tw9jned8nrZXQRW" target="_blank" rel="noopener">Открыть видео ↗</a></div></article> + </div></section> + <section class="card" id="theory"><h2>Голод, аппетит, эмоции</h2><div class="theory-grid"><div class="kind"><strong>Физиологический голод</strong>Нарастает постепенно. Может ощущаться как снижение энергии и другие телесные сигналы.</div><div class="kind"><strong>Аппетит</strong>Желание удовольствия от вкуса; может появиться от вида, запаха еды или компании.</div><div class="kind"><strong>Эмоциональный голод</strong>Желание с помощью еды изменить своё состояние или переживание.</div></div><p>Эти виды могут смешиваться. Еда для утешения — нормальна. Трудность возникает только тогда, когда она остаётся единственным способом поддержать себя.</p><h3>Уже знакомая шкала</h3><div class="scale" aria-label="Шкала сигналов от 1 до 10"><span>1</span><span>2</span><span class="hunger">3<br><small>голод</small></span><span class="hunger">4</span><span>5</span><span class="full">6<br><small>сытость</small></span><span class="full">7</span><span>8</span><span>9</span><span>10</span></div><p class="note">Ориентиры: сигналы голода — 3–4, сытости — 6–7. Это способ замечать себя, а не правило, контроль или запрет.</p> + <figure><svg viewBox="0 0 640 410" role="img" aria-labelledby="emotion-title emotion-desc"><title id="emotion-title">Карта эмоций и чувств</title><desc id="emotion-desc">В центре состояние, вокруг группы приятных, напряжённых, грустных и энергичных чувств</desc><circle cx="320" cy="205" r="66" fill="#e7e1d5"/><circle cx="320" cy="205" r="130" fill="none" stroke="#d2d9d4" stroke-width="2"/><path d="M320 75 A130 130 0 0 1 450 205 L386 205 A66 66 0 0 0 320 139Z" fill="#dce9df"/><path d="M450 205 A130 130 0 0 1 320 335 L320 271 A66 66 0 0 0 386 205Z" fill="#eadfd8"/><path d="M320 335 A130 130 0 0 1 190 205 L254 205 A66 66 0 0 0 320 271Z" fill="#dce4e8"/><path d="M190 205 A130 130 0 0 1 320 75 L320 139 A66 66 0 0 0 254 205Z" fill="#eee3c9"/><text x="320" y="199" text-anchor="middle" class="emotion-center">Что я</text><text x="320" y="220" text-anchor="middle" class="emotion-center">чувствую?</text><text x="403" y="125" text-anchor="middle" class="emotion">радость</text><text x="425" y="158" text-anchor="middle" class="emotion">интерес</text><text x="421" y="259" text-anchor="middle" class="emotion">злость</text><text x="389" y="301" text-anchor="middle" class="emotion">тревога</text><text x="251" y="301" text-anchor="middle" class="emotion">грусть</text><text x="215" y="258" text-anchor="middle" class="emotion">одиночество</text><text x="217" y="157" text-anchor="middle" class="emotion">спокойствие</text><text x="259" y="119" text-anchor="middle" class="emotion">надежда</text><text x="320" y="35" text-anchor="middle" class="emotion">бодрость · вдохновение</text><text x="320" y="387" text-anchor="middle" class="emotion">усталость · растерянность</text><text x="70" y="208" text-anchor="middle" class="emotion">нежность · принятие</text><text x="558" y="208" text-anchor="middle" class="emotion">раздражение · страх</text></svg><figcaption>Карта — подсказка для наблюдения, а не тест. Одновременно возможны разные чувства.</figcaption></figure> + </section> + <section class="card" id="practice"><h2>Практика наблюдения</h2><p>Если хочется поесть без сигналов голода 3–4, можно сделать короткую запись. Ничего запрещать или исправлять не нужно.</p><div class="journal-grid"> + <div class="field"><label for="j-event">Что произошло?</label><textarea id="j-event" placeholder="Событие или ситуация"></textarea></div><div class="field"><label for="j-feelings">Какие чувства?</label><textarea id="j-feelings" placeholder="Можно свериться с картой"></textarea></div><div class="field"><label for="j-thoughts">Какие мысли?</label><textarea id="j-thoughts"></textarea></div><div class="field"><label for="j-body">Что ощущается в теле?</label><textarea id="j-body"></textarea></div><div class="field"><label for="j-want">Что хочется получить от еды?</label><textarea id="j-want" placeholder="Например: паузу, удовольствие, поддержку"></textarea></div><div class="field"><label for="j-other">Что ещё может помочь этой потребности?</label><textarea id="j-other"></textarea></div><div class="field wide"><label for="j-choice">Что я выбираю и как изменилось состояние?</label><textarea id="j-choice" placeholder="Любой выбор допустим"></textarea></div> + </div><p class="status" id="save-status" role="status" aria-live="polite"></p></section> + <section class="card" id="report"><h2>Итоги недели</h2><p>Отчёт формируется из текущих отметок и записей. Отправка начнётся только после нажатия кнопки.</p><div class="actions"><button class="btn" type="button" id="share">Поделиться отчётом</button><button class="btn secondary" type="button" id="copy">Скопировать</button><button class="btn danger" type="button" id="reset">Сбросить данные</button></div><p class="status" id="action-status" role="status" aria-live="polite"></p></section> + </main><footer class="wrap">Неделя 4 · бережно и с опорой на самочувствие</footer> + <script> + (() => { + 'use strict'; + const STORAGE_KEY = 'irina-alexey-week-4-v2'; + const boxes = [...document.querySelectorAll('#workouts input[type="checkbox"]')]; + const journals = [...document.querySelectorAll('#practice textarea')]; + const people = { + ira: { name: 'Ирина', boxes: boxes.filter(b => b.dataset.person === 'ira'), progress: document.getElementById('ira-progress'), text: document.getElementById('ira-progress-text'), fill: document.getElementById('ira-progress-fill') }, + alexey: { name: 'Алексей', boxes: boxes.filter(b => b.dataset.person === 'alexey'), progress: document.getElementById('alexey-progress'), text: document.getElementById('alexey-progress-text'), fill: document.getElementById('alexey-progress-fill') } + }; + const saveStatus = document.getElementById('save-status'); + const actionStatus = document.getElementById('action-status'); + let saveTimer; + const emptyState = () => ({ checked: {}, journal: {} }); + function load() { try { return Object.assign(emptyState(), JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}')); } catch (_) { return emptyState(); } } + function collect() { const checked = {}, journal = {}; boxes.forEach(b => checked[b.id] = b.checked); journals.forEach(j => journal[j.id] = j.value); return { checked, journal }; } + function save() { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(collect())); saveStatus.textContent = 'Сохранено на этом устройстве'; clearTimeout(saveTimer); saveTimer = setTimeout(() => saveStatus.textContent = '', 1600); } catch (_) { saveStatus.textContent = 'Не удалось сохранить в этом браузере'; } } + function updateProgress() { Object.values(people).forEach(person => { const count = person.boxes.filter(b => b.checked).length; const pct = Math.round(count / person.boxes.length * 100); person.text.textContent = `${person.name} · ${count} из ${person.boxes.length} · ${pct}%`; person.fill.style.width = `${pct}%`; person.progress.setAttribute('aria-valuemax', person.boxes.length); person.progress.setAttribute('aria-valuenow', count); person.progress.setAttribute('aria-valuetext', `${count} из ${person.boxes.length}, ${pct} процентов`); }); } + const state = load(); boxes.forEach(b => { b.checked = Boolean(state.checked[b.id]); b.addEventListener('change', () => { updateProgress(); save(); }); }); journals.forEach(j => { j.value = state.journal[j.id] || ''; j.addEventListener('input', save); }); updateProgress(); + function makeReport() { const personLines = Object.values(people).flatMap(person => { const done = person.boxes.filter(b => b.checked).length; const lines = person.boxes.map(b => `${b.checked ? '✓' : '○'} ${b.closest('.workout').dataset.title}`); return [`${person.name}: ${done} из ${person.boxes.length} (${Math.round(done / person.boxes.length * 100)}%)`, ...lines, '']; }); const notes = journals.map(j => [document.querySelector(`label[for="${j.id}"]`).textContent.trim(), j.value.trim()]).filter(x => x[1]); return [`Ира и Лёша · Неделя 4`, '', ...personLines, ...(notes.length ? ['Наблюдения:', ...notes.map(x => `${x[0]} ${x[1]}`)] : [])].join('\n'); } + async function copyReport() { try { await navigator.clipboard.writeText(makeReport()); actionStatus.textContent = 'Отчёт скопирован'; } catch (_) { const area = document.createElement('textarea'); area.value = makeReport(); area.style.position = 'fixed'; area.style.opacity = '0'; document.body.append(area); area.select(); const ok = document.execCommand('copy'); area.remove(); actionStatus.textContent = ok ? 'Отчёт скопирован' : 'Не удалось скопировать'; } } + document.getElementById('copy').addEventListener('click', copyReport); + document.getElementById('share').addEventListener('click', async () => { if (navigator.share) { try { await navigator.share({ title: 'Ира и Лёша · Неделя 4', text: makeReport() }); actionStatus.textContent = 'Отчёт передан для отправки'; } catch (error) { if (error.name !== 'AbortError') { await copyReport(); } } } else { await copyReport(); } }); + document.getElementById('reset').addEventListener('click', () => { if (!confirm('Сбросить все отметки и записи этой недели?')) return; localStorage.removeItem(STORAGE_KEY); boxes.forEach(b => b.checked = false); journals.forEach(j => j.value = ''); updateProgress(); saveStatus.textContent = ''; actionStatus.textContent = 'Данные недели сброшены'; }); + })(); + </script> +</body> +</html>