sektaotekpetrindex.html
Blameindex.html166 lines
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"> <title>Отёка Петровна — утренний тамагочи #sekta</title> <meta name="description" content="Пять мягких действий, если проснулась с отёкшим лицом."> <meta property="og:type" content="website"> <meta property="og:locale" content="ru_RU"> <meta property="og:url" content="https://karinakomyak-tech.github.io/otekpetr/"> <meta property="og:title" content="Отёка Петровна"> <meta property="og:description" content="Что делать, если проснулась с отёкшим лицом."> <meta property="og:image" content="https://karinakomyak-tech.github.io/otekpetr/assets/og.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Отёка Петровна"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Отёка Петровна"> <meta name="twitter:description" content="Что делать, если проснулась с отёкшим лицом."> <meta name="twitter:image" content="https://karinakomyak-tech.github.io/otekpetr/assets/og.jpg"> <meta name="theme-color" content="#f7f3ea"> <link rel="icon" href="assets/favicon.png" type="image/png"> <link rel="apple-touch-icon" href="assets/apple-touch-icon.png"> <link rel="preload" as="image" href="assets/petrovna-v2.webp"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="site-shell"> <header class="site-header"> <a href="#top" class="logo">#sekta</a> <span>утренний SOS · 5 шагов</span> </header> <main id="top"> <section class="hero"> <div class="hero-copy"> <p class="mini-label">Интерактивный чек-лист</p> <h1>Отёка<br>Петровна</h1> <p class="hero-lead">Что делать, если проснулась с отёкшим лицом: пять мягких действий, которые можно сделать прямо сейчас.</p> <div class="disclaimer">Если отёчность регулярная, асимметричная, болезненная, сопровождается одышкой или долго сохраняется — это повод обратиться к врачу.</div> </div> <div class="pet-card pet-level-0" aria-live="polite"> <div class="pet-topline"><span>Состояние Петровны</span><strong id="progress-value">0%</strong></div> <div class="progress-track"><span id="progress-bar" style="width:6%"></span></div> <div class="pet-window"> <span class="energy-mark energy-one" aria-hidden="true">✦</span> <span class="energy-mark energy-two" aria-hidden="true">✦</span> <span class="energy-mark energy-three" aria-hidden="true">✦</span> <img src="assets/petrovna-v2.webp" width="1024" height="1536" fetchpriority="high" decoding="async" data-state="0" class="pet-sprite active" alt="Отёка Петровна сонная, с тяжёлыми веками и расслабленной позой"> <img src="assets/petrovna-water.webp" width="1024" height="1536" loading="lazy" decoding="async" data-state="1" class="pet-sprite" alt="Отёка Петровна приоткрыла один глаз и держит стакан воды"> <img src="assets/petrovna-mid.webp" width="1024" height="1536" loading="lazy" decoding="async" data-state="2" class="pet-sprite" alt="Отёка Петровна выпрямилась и смотрит бодрее"> <img src="assets/petrovna-cool.webp" width="1024" height="1536" loading="lazy" decoding="async" data-state="3" class="pet-sprite" alt="Отёка Петровна улыбается и прикладывает прохладный компресс к щеке"> <img src="assets/petrovna-stretch.webp" width="1024" height="1536" loading="lazy" decoding="async" data-state="4" class="pet-sprite" alt="Отёка Петровна бодро тянется вверх и поднимает одну ногу"> <img src="assets/petrovna-awake.webp" width="1023" height="1537" loading="lazy" decoding="async" data-state="5" class="pet-sprite" alt="Отёка Петровна бодрая, улыбается и машет рукой"> </div> <p class="pet-mode" id="pet-mode">0 из 5</p> <p class="pet-state" id="pet-state">Петровна проснулась. Пока просто лежит</p> </div> </section> <section class="checklist-section"> <div class="section-heading checklist-heading"> <p class="mini-label">Что делать сейчас</p> <div><h2>Если уже проснулась с отёкшим лицом</h2><p>Делай в любом порядке и отмечай то, что подходит тебе сегодня.</p></div> </div> <div class="checklist" aria-label="Утренний чек-лист"> <article class="check-item" data-item="rise"> <button class="check-main" data-step="rise" aria-pressed="false"> <span class="check-number">01</span><span class="check-copy"><strong>Вставай</strong><span>Не лежи долго после пробуждения. Потянись, поднимись из кровати, сделай несколько движений — каких тебе хочется.</span><small>Без резких движений</small></span><span class="check-action">отметить</span> </button> </article> <article class="check-item" data-item="water"> <button class="check-main" data-step="water" aria-pressed="false"> <span class="check-number">02</span><span class="check-copy"><strong>Выпей воды</strong><span>Поддерживай обычный питьевой режим. Не нужно пить литр воды залпом.</span><small>Обычного количества достаточно</small></span><span class="check-action">отметить</span> </button> </article> <article class="check-item" data-item="cool"> <button class="check-main" data-step="cool" aria-pressed="false"> <span class="check-number">03</span><span class="check-copy"><strong>Добавь прохладу</strong><span>Умойся прохладной водой или приложи прохладный компресс.</span><small>Лёд напрямую на кожу не прикладываем</small></span><span class="check-action">отметить</span> </button> <aside class="massage-inline"> <div class="massage-inline-copy"> <span class="massage-kicker">По желанию · после умывания</span><h3>Сделай массаж лица</h3> <p>Мягкий ритуал может немного уменьшать кратковременную утреннюю отёчность, но не является лечением и не даёт стойкого эффекта сам по себе.</p> <details><summary>Сначала проверить ограничения</summary><p>Пропусти массаж при активных воспалениях, высыпаниях, повреждениях кожи, выраженной болезненности или если врач ограничил механическое воздействие.</p></details> </div> <button class="video-button massage-video" data-video="massage">Включить массаж <span>▶</span></button> </aside> </article> <article class="check-item" data-item="move"> <button class="check-main" data-step="move" aria-pressed="false"> <span class="check-number">04</span><span class="check-copy"><strong>Добавь движения</strong><span>Подойдёт прогулка, лёгкая разминка или короткая тренировка.</span><small>Без кроссфита на выживание</small></span><span class="check-action">отметить</span> </button> <button class="video-button checklist-video" data-video="training">Включить короткую тренировку <span>▶</span></button> </article> <article class="check-item" data-item="breakfast"> <button class="check-main" data-step="breakfast" aria-pressed="false"> <span class="check-number">05</span><span class="check-copy"><strong>Нормально позавтракай</strong><span>Завтрак с обычным количеством белка и углеводов, без пропусков.</span><small>Обычного завтрака достаточно</small></span><span class="check-action">отметить</span> </button> </article> </div> </section> <section class="finish-section" id="finish-section" hidden> <div class="finish-message"> <p class="mini-label">5 из 5 · ритуал завершён</p><h2>Готово.<br>Как ты себя чувствуешь?</h2> <p>Отёчность может не уйти сразу — это нормально. Просто отметь, изменилось ли состояние.</p> <div class="feeling-row"><button data-feeling>Так же</button><button data-feeling>Чуть легче</button><button data-feeling>Бодрее</button><button data-feeling>Расслабленнее</button></div> </div> <div class="tomorrow-card"> <p class="mini-label">Чтобы завтра было легче</p><h3>Выбери только один шаг на вечер</h3> <div class="tomorrow-list"> <button data-tomorrow><i></i><span>Лечь спать в привычное время</span></button> <button data-tomorrow><i></i><span>Не планировать очень солёную еду на ночь</span></button> <button data-tomorrow><i></i><span>Не сочетать алкоголь с минимумом сна</span></button> <button data-tomorrow><i></i><span>Не пить много воды прямо перед сном</span></button> <button data-tomorrow><i></i><span>Не делать непривычную интенсивную тренировку поздно вечером</span></button> </div> <p class="tomorrow-result" id="tomorrow-result" hidden>Одного шага на сегодня достаточно.</p> </div> </section> <section class="practice-section" id="practice-section" hidden> <div class="section-heading"><p class="mini-label">Эксперимент на потом</p><h2>Гуаша — только после проверки ограничений</h2></div> <div class="practice-grid single"><article class="practice-card guasha-card"> <span class="practice-index">+</span><p class="practice-type">Тело · попробовать и понаблюдать</p><h3>Гуаша-эксперимент</h3> <p>Эффект индивидуален. Двигайся медленно, используй лёгкое или среднее давление — без боли и синяков.</p> <details><summary>Проверить стоп-сигналы</summary><p>Не использовать при куперозе, активной розацеа, тромбофлебите, проблемах со свёртываемостью, склонности к синякам, воспалениях и ранках.</p></details> <button class="video-button" data-video="guasha">Смотреть эксперимент <span>▶</span></button> <div class="market-links"><a href="https://www.ozon.ru/product/skrebok-guasha-dlya-massazha-litsa-i-tela-2066834041/" target="_blank" rel="noreferrer">Ozon ↗</a><a href="https://www.wildberries.ru/catalog/237551759/detail.aspx" target="_blank" rel="noreferrer">Wildberries ↗</a></div> </article></div> </section> <section class="course-bridge"> <div class="course-image-wrap"><img src="assets/summer-prime.webp" loading="lazy" decoding="async" alt="Летний прайм"><span>3 недели</span></div> <div class="course-copy"> <p class="mini-label">#sekta · продолжение</p><h2>Хочешь продолжить — приходи в «Летний прайм».</h2> <p>Это три недели коротких тренировок, ухода, питания и режима. Занятия занимают до 30 минут, начать можно в любой день.</p> <div class="course-facts"><span>тренировки до 30 минут</span><span>уход и питание</span><span>старт в любой день</span></div> <a class="course-button" href="https://sektaschool.ru/online/summerprime?utm_source=bot&utm_medium=gaidoteki&utm_campaign=summerprime" target="_blank" rel="noreferrer">Вперёд к своему прайму <span>↗</span></a> <small>Стоимость — 2 900 ₽</small> </div> </section> </main> <footer><p>Материал носит информационный характер и не заменяет консультацию врача.</p><span>Fresh & Glow · #sekta</span></footer> </div> <aside class="course-nudge" id="course-nudge" aria-label="Курс Летний прайм" hidden> <a href="https://sektaschool.ru/online/summerprime?utm_source=bot&utm_medium=gaidoteki&utm_campaign=summerprime" target="_blank" rel="noreferrer"><span><strong>Летний прайм</strong><small>3 недели · 2 900 ₽</small></span><i aria-hidden="true">↗</i></a> <button id="close-nudge" aria-label="Скрыть предложение курса">×</button> </aside> <div class="video-overlay" id="video-modal" role="dialog" aria-modal="true" aria-label="Видео" hidden> <button class="video-backdrop" id="video-backdrop" aria-label="Закрыть видео"></button> <div class="video-dialog"> <div class="video-dialog-head"><div><p class="mini-label">Практика для мягкого утра</p><h2 id="video-title"></h2></div><button class="close-button" id="close-video" aria-label="Закрыть">×</button></div> <div class="video-frame"><iframe id="video-frame" title="Видео" allow="autoplay; fullscreen; picture-in-picture; encrypted-media; clipboard-write" allowfullscreen webkitallowfullscreen playsinline></iframe></div> <a id="video-link" href="#" target="_blank" rel="noreferrer" class="external-video-link">Смотреть отдельно ↗</a> </div> </div> <script src="app.js"></script> </body> </html>