Analyzing diff...
plans/alyona/weeks-13-14/index.html+65 −0
new file mode 100644 index 0000000..8d78e54 @@ -0,0 +1,65 @@ +<!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="#183d68"> +<title>Алёна — план на 13–14-ю недели</title> +<style> +:root{--navy:#183d68;--blue:#347fc2;--sky:#eaf6ff;--mint:#e8f7f1;--yellow:#ffd96a;--paper:#fffdf8;--ink:#20364d;--muted:#65768a;--line:#d8e5ef;--ok:#23856d;--shadow:0 18px 54px rgba(28,70,108,.12)} +*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at 7% 5%,rgba(255,217,106,.58) 0 7rem,transparent 7.1rem),radial-gradient(circle at 96% 22%,rgba(99,188,239,.3) 0 12rem,transparent 12.1rem),linear-gradient(180deg,#e8f7ff 0,#fffbed 44%,#edf8f4 100%)}button,input,textarea{font:inherit}.shell{width:min(920px,calc(100% - 36px));margin:auto} +.hero{padding:44px 0 22px}.eyebrow{display:inline-block;margin:0 0 12px;padding:7px 11px;border-radius:99px;background:var(--yellow);color:var(--navy);font-size:.76rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.hero h1{margin:0;color:var(--navy);font-size:clamp(2.2rem,7vw,4.2rem);line-height:1.02;letter-spacing:-.045em}.hero p{max-width:760px;margin:16px 0 0;color:var(--muted);font-size:1.06rem}.rule{margin-top:18px;padding:14px 17px;border-left:5px solid var(--yellow);border-radius:0 14px 14px 0;background:#ffffffc2;color:var(--navy);font-weight:750} +.progress{position:sticky;top:8px;z-index:10;margin-bottom:28px;padding:15px 18px;border:1px solid #ffffffe6;border-radius:22px;background:#fffffff0;backdrop-filter:blur(14px);box-shadow:var(--shadow)}.progress-top{display:flex;align-items:end;justify-content:space-between;gap:16px}.progress strong{color:var(--navy)}#progressCount{color:var(--blue);font-weight:900}.track{height:12px;margin-top:10px;overflow:hidden;border-radius:99px;background:#dfebf4}.fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),#58b5dc,var(--yellow));transition:width .3s}.stats{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;color:var(--muted);font-size:.86rem}.report-button{width:100%;margin-top:12px;padding:11px 15px;border:0;border-radius:13px;background:var(--navy);color:#fff;font-weight:850;cursor:pointer} +.section{margin:0 0 58px}.section-kicker{color:var(--blue);font-size:.76rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.section h2{margin:5px 0 12px;color:var(--navy);font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.08}.section-intro{max-width:760px;margin:0 0 22px;color:var(--muted)} +.planner{padding:20px;border:1px solid #fffffff2;border-radius:28px;background:#ffffffbf;box-shadow:var(--shadow)}.week-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.week-tab{padding:11px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--navy);font-weight:850;cursor:pointer}.week-tab[aria-selected=true]{border-color:var(--blue);background:var(--navy);color:#fff}.day-nav{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.arrow{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);font-size:1.45rem;font-weight:900;cursor:pointer}.day-position{text-align:center}.day-position strong{display:block;color:var(--navy);font-size:1.14rem}.day-position span{color:var(--muted);font-size:.88rem}.day-dots{display:flex;justify-content:center;gap:7px;margin:14px 0}.day-dot{width:12px;height:12px;padding:0;border:0;border-radius:50%;background:#cbd9e4;cursor:pointer}.day-dot.active{background:var(--blue);box-shadow:0 0 0 4px #347fc226} +.day-stage{min-height:325px;touch-action:pan-y}.day{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 10px 30px #1c466c14}.day-head{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:15px 19px;border-bottom:1px solid var(--line);background:linear-gradient(100deg,var(--sky),#fff8d8)}.day-head h3{margin:0;color:var(--navy);font-size:1.16rem}.day-type{color:var(--blue);font-size:.75rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.workout{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:start;padding:17px 19px}.workout+.workout{border-top:1px solid #e9f0f6}.check,.focus-check{width:25px;height:25px;margin:2px 0 0;accent-color:var(--ok);cursor:pointer}.workout a{color:var(--navy);font-weight:850;text-underline-offset:3px}.meta{margin-top:3px;color:var(--muted);font-size:.9rem}.duration{color:var(--blue);font-weight:800;white-space:nowrap}.comment{grid-column:2/4;width:100%;min-height:52px;padding:10px 12px;resize:vertical;border:1px solid var(--line);border-radius:12px;background:#f9fcff;color:var(--ink)}.workout:has(.check:checked),.focus-item:has(.focus-check:checked){background:#effaf6}.workout:has(.check:checked) a{text-decoration:line-through;color:#59726a}.rest{padding:24px 20px;background:linear-gradient(100deg,#f0faf6,#fffaf0);color:var(--muted)} +.focus-grid{display:grid;gap:12px}.focus-item{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;padding:17px 19px;border:1px solid var(--line);border-radius:18px;background:#ffffffdb;box-shadow:0 10px 28px #1c466c12}.note{padding:17px 18px;border-radius:18px;background:linear-gradient(110deg,#fff3be,#eaf6ff);color:var(--navy)} +.actions{display:flex;justify-content:center;margin:0 0 50px}.reset{padding:10px 14px;border:1px solid #a8bdcc;border-radius:12px;background:#fff;color:var(--navy);cursor:pointer}footer{padding:0 0 48px;text-align:center;color:var(--muted);font-size:.88rem} +.modal{width:min(700px,calc(100% - 28px));padding:0;border:0;border-radius:24px;box-shadow:0 28px 90px #0f2e4c59}.modal::backdrop{background:#0f2e4c8f;backdrop-filter:blur(4px)}.modal-card{padding:22px}.modal-head{display:flex;align-items:start;justify-content:space-between;gap:18px}.modal h2{margin:0;color:var(--navy)}.modal-close{border:0;background:transparent;color:var(--muted);font-size:1.5rem;cursor:pointer}.report-preview{width:100%;min-height:300px;margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fbfd;color:var(--ink);resize:vertical}.modal-actions{display:flex;flex-wrap:wrap;gap:10px}.modal-button{padding:11px 15px;border:1px solid var(--blue);border-radius:12px;background:#fff;color:var(--navy);font-weight:800;cursor:pointer}.modal-button.primary{border-color:var(--navy);background:var(--navy);color:#fff}.copy-status{min-height:1.4em;margin:10px 0 0;color:var(--ok);font-weight:700} +button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:3px} +@media(max-width:720px){.shell{width:min(100% - 24px,920px)}.hero{padding-top:32px}.planner{padding:13px}.day-head{align-items:flex-start;flex-direction:column;gap:3px}.workout{grid-template-columns:auto 1fr}.duration{grid-column:2}.comment{grid-column:1/3}.progress{top:5px}.stats{gap:8px 14px}}@media(max-width:470px){.hero h1{font-size:2.25rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fill{transition:none}} +</style></head> +<body> +<header class="hero shell"><p class="eyebrow">Личный план · 2 недели</p><h1>Поддерживать себя в своём ритме</h1><p>План на 13–14-ю недели: достаточно выбирать то, что подходит по самочувствию сегодня.</p><div class="rule">Здесь нет задачи сделать всё любой ценой. Можно регулировать нагрузку, менять решение и возвращаться к пропущенному тогда, когда это поддерживает.</div></header> +<main class="shell"> +<section class="progress" aria-label="Прогресс плана"><div class="progress-top"><strong>Общий прогресс</strong><span id="progressCount">0 из 19</span></div><div class="track"><div class="fill" id="progressFill"></div></div><div class="stats"><span id="week13Stat">Неделя 13: 0 из 7</span><span id="week14Stat">Неделя 14: 0 из 7</span><span id="focusStat">Фокусы: 0 из 5</span></div><button class="report-button" id="openReport" type="button">Подготовить отчёт куратору</button></section> +<section class="section"><div class="section-kicker">Тренировки</div><h2>Один блок — одно решение</h2><p class="section-intro">Переключайте недели, листайте блоки стрелками, свайпом или клавишами ← →. У каждой тренировки — своя отметка и комментарий.</p> +<div class="planner"><div class="week-tabs" role="tablist"><button class="week-tab" id="tab13" aria-selected="true" type="button">Неделя 13</button><button class="week-tab" id="tab14" aria-selected="false" type="button">Неделя 14</button></div><div class="day-nav"><button class="arrow" id="prev" aria-label="Предыдущий блок">←</button><div class="day-position"><strong id="blockTitle"></strong><span id="blockPos"></span></div><button class="arrow" id="next" aria-label="Следующий блок">→</button></div><div class="day-dots" id="dots"></div><div class="day-stage" id="stage"></div></div></section> +<section class="section"><div class="section-kicker">Поддерживающие фокусы</div><h2>Вне тренировок</h2><p class="section-intro">Это ориентиры для наблюдения, а не ещё один список обязательств. Отмечайте только то, что хочется заметить.</p><div class="focus-grid" id="focuses"></div><p class="note">Ничего нового добавлять не нужно. Продолжайте выбранное направление так, чтобы чувствовать себя хорошо.</p></section> +<div class="actions"><button class="reset" id="reset" type="button">Сбросить мои отметки</button></div></main> +<footer class="shell">Алёна · недели 13–14</footer> +<dialog class="modal" id="reportModal"><div class="modal-card"><div class="modal-head"><div><div class="section-kicker">Отчёт</div><h2>Сообщение для @manoraya</h2></div><button class="modal-close" id="closeReport" aria-label="Закрыть">×</button></div><textarea class="report-preview" id="reportText" aria-label="Текст отчёта"></textarea><div class="modal-actions"><button class="modal-button" id="copyReport">Скопировать</button><button class="modal-button primary" id="sendReport">Открыть Telegram</button></div><p class="copy-status" id="copyStatus"></p></div></dialog> +<script> +const PLANS={13:[ +['Блок 1','Основная тренировка',[['BF_WORK37','https://kinescope.io/sqiR8fjY7rbd5LnenYbLDe','21:35','основная']]], +['Блок 2','Утроворк + МТД',[['BF_UTRO15','https://kinescope.io/8fLfKNv6QQxPSU1MeRpp5u','9:37','утроворк'],['DIHANIE_1','https://kinescope.io/mDpxZGCJARcpmWNUSbc8Ab','10:30','МТД']]], +['Блок 3','Основная тренировка',[['BF_WORK15','https://kinescope.io/gvpPE7QBcWciqGJiFVpHWi','21:47','основная']]], +['Блок 4','Утроворк + МТД',[['BF_UTRO22','https://kinescope.io/7xjoR2yuFPTDo1MnDeBkJ5','10:34','утроворк'],['DIHANIE_2','https://kinescope.io/k3TPZ6i4Fi1i9houD7SD3o','9:10','МТД']]], +['Блок 5','Растяжка',[['Растяжка','https://kinescope.io/64nEwXw5XWDdQsnuiSXqvv','33:32','всё тело']]], +['Блок 6','Свободный выбор',[]],['Блок 7','Свободный выбор',[]] +],14:[ +['Блок 1','Основная тренировка',[['BF_WORK22','https://kinescope.io/ucyEeyd7VzwhngDUy26p9Z','25:11','основная']]], +['Блок 2','Утроворк + МТД',[['BF_UTRO','https://kinescope.io/vkqmTKhX9RumNCza5AzjgG','11:21','утроворк'],['DIHANIE_3','https://kinescope.io/gcNRgof2qMmeDWYMzDFt11','6:59','МТД']]], +['Блок 3','Основная тренировка',[['BF_WORK6','https://kinescope.io/5F1dvgqsoznHci42D8k7ah','19:43','основная']]], +['Блок 4','Утроворк + МТД',[['BF_UTRO2','https://kinescope.io/wZ9GE5xAbUVknTGKAwWWM2','9:38','утроворк'],['DIHANIE_4','https://kinescope.io/odJae7FaEPQ2nHHeiiMrWV','8:21','МТД']]], +['Блок 5','Растяжка',[['Растяжка','https://kinescope.io/5C8NNjoth3ojzYvkZWqCw1','28:49','всё тело']]], +['Блок 6','Свободный выбор',[]],['Блок 7','Свободный выбор',[]] +]}; +const FOCUSES=['Регулировать нагрузку и другие решения по текущему самочувствию','В питании замечать сигналы тела и выбирать поддерживающее','В сложные эмоциональные моменты подключать дыхание','Вспоминать инструменты из бинго самопомощи и самоподдержки','Ничего нового не нагружать; продолжать направление так, чтобы чувствовать себя хорошо']; +const KEY='sekta.alyona.weeks-13-14.v1';let state={week:13,block:{13:0,14:0},done:{},notes:{},focus:{}}; +try{state={...state,...JSON.parse(localStorage.getItem(KEY)||'{}')}}catch(e){} +const esc=s=>s.replace(/[&<>\"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c])); +const id=(w,b,i)=>`w${w}-b${b+1}-t${i+1}`; const save=()=>localStorage.setItem(KEY,JSON.stringify(state)); +function render(){ + document.querySelectorAll('.week-tab').forEach(x=>x.setAttribute('aria-selected',x.id===`tab${state.week}`)); + const b=state.block[state.week]||0,item=PLANS[state.week][b];blockTitle.textContent=item[0];blockPos.textContent=`Неделя ${state.week} · блок ${b+1} из 7`; + dots.innerHTML=PLANS[state.week].map((_,i)=>`<button class="day-dot ${i===b?'active':''}" data-i="${i}" aria-label="Блок ${i+1}"></button>`).join(''); + if(item[2].length){stage.innerHTML=`<article class="day"><header class="day-head"><h3>${item[0]}</h3><span class="day-type">${item[1]}</span></header>${item[2].map((t,i)=>{let k=id(state.week,b,i);return `<div class="workout" data-role="workout"><input class="check" data-role="completion" type="checkbox" id="${k}" ${state.done[k]?'checked':''}><div><a href="${t[1]}" target="_blank" rel="noopener">${t[0]}</a><div class="meta">${t[3]}</div></div><span class="duration">${t[2]}</span><textarea class="comment" data-note="${k}" placeholder="Комментарий к тренировке">${esc(state.notes[k]||'')}</textarea></div>`}).join('')}</article>`} + else stage.innerHTML=`<article class="day"><header class="day-head"><h3>${item[0]}</h3><span class="day-type">${item[1]}</span></header><div class="rest">${state.week===13?'Можно доделать пропущенное или повторить то, что понравилось.':'Можно доделать или повторить то, что хочется.'} Отдых тоже остаётся хорошим выбором.</div></article>`; + dots.querySelectorAll('button').forEach(x=>x.onclick=()=>{state.block[state.week]=+x.dataset.i;save();render()});stage.querySelectorAll('.check').forEach(x=>x.onchange=()=>{state.done[x.id]=x.checked;save();progress()});stage.querySelectorAll('.comment').forEach(x=>x.oninput=()=>{state.notes[x.dataset.note]=x.value;save()});progress(); +} +function progress(){const ids=[];Object.entries(PLANS).forEach(([w,bs])=>bs.forEach((b,bi)=>b[2].forEach((_,i)=>ids.push(id(w,bi,i)))));const c=w=>ids.filter(x=>x.startsWith(`w${w}-`)&&state.done[x]).length;const fc=FOCUSES.filter((_,i)=>state.focus[i]).length,total=ids.length+FOCUSES.length,done=ids.filter(x=>state.done[x]).length+fc;progressCount.textContent=`${done} из ${total}`;progressFill.style.width=`${done/total*100}%`;week13Stat.textContent=`Неделя 13: ${c(13)} из 7`;week14Stat.textContent=`Неделя 14: ${c(14)} из 7`;focusStat.textContent=`Фокусы: ${fc} из 5`} +function move(d){state.block[state.week]=(state.block[state.week]+d+7)%7;save();render()} +function buildReport(){let out=['Алёна — отчёт по плану на недели 13–14',''];[13,14].forEach(w=>{out.push(`Неделя ${w}:`);PLANS[w].forEach((b,bi)=>b[2].forEach((t,i)=>{let k=id(w,bi,i);out.push(`${state.done[k]?'✓':'○'} ${b[0]} · ${t[0]}${state.notes[k]?' — '+state.notes[k]:''}`)}));out.push('')});out.push('Поддерживающие фокусы:');FOCUSES.forEach((f,i)=>out.push(`${state.focus[i]?'✓':'○'} ${f}`));return out.join('\n')} +FOCUSES.forEach((f,i)=>focuses.insertAdjacentHTML('beforeend',`<label class="focus-item"><input class="focus-check" type="checkbox" data-focus="${i}" ${state.focus[i]?'checked':''}><span>${f}</span></label>`));focuses.onchange=e=>{if(e.target.matches('.focus-check')){state.focus[e.target.dataset.focus]=e.target.checked;save();progress()}}; +tab13.onclick=()=>{state.week=13;save();render()};tab14.onclick=()=>{state.week=14;save();render()};prev.onclick=()=>move(-1);next.onclick=()=>move(1);document.addEventListener('keydown',e=>{if(e.target.matches('textarea,input'))return;if(e.key==='ArrowLeft')move(-1);if(e.key==='ArrowRight')move(1)});let sx=0;stage.addEventListener('touchstart',e=>sx=e.changedTouches[0].clientX,{passive:true});stage.addEventListener('touchend',e=>{let d=e.changedTouches[0].clientX-sx;if(Math.abs(d)>55)move(d>0?-1:1)},{passive:true}); +openReport.onclick=()=>{reportText.value=buildReport();copyStatus.textContent='';reportModal.showModal()};closeReport.onclick=()=>reportModal.close();copyReport.onclick=async()=>{reportText.value=buildReport();try{await navigator.clipboard.writeText(reportText.value);copyStatus.textContent='Отчёт скопирован'}catch(e){reportText.select();document.execCommand('copy');copyStatus.textContent='Отчёт скопирован'}};sendReport.onclick=()=>{reportText.value=buildReport();window.open('https://t.me/manoraya','_blank','noopener')};reset.onclick=()=>{if(confirm('Сбросить все отметки и комментарии только в этом плане?')){localStorage.removeItem(KEY);location.reload()}};render(); +</script></body></html>