From 9215066a75944e267fc80c25b38aff75d6f98b30 Mon Sep 17 00:00:00 2001 From: Dauren777 Date: Fri, 26 Jun 2026 05:48:24 +0000 Subject: [PATCH] =?UTF-8?q?v1:=20=D0=BE=D0=B1=D1=83=D1=87=D0=B0=D1=8E?= =?UTF-8?q?=D1=89=D0=B8=D0=B9=20=D1=81=D0=B8=D0=BC=D1=83=D0=BB=D1=8F=D1=82?= =?UTF-8?q?=D0=BE=D1=80=20=D0=BD=D0=B5=D0=BE=D1=82=D0=BB=D0=BE=D0=B6=D0=BD?= =?UTF-8?q?=D1=8B=D1=85=20=D0=BA=D0=B5=D0=B9=D1=81=D0=BE=D0=B2=20=D1=81=20?= =?UTF-8?q?=D0=B3=D0=BE=D0=B2=D0=BE=D1=80=D1=8F=D1=89=D0=B8=D0=BC=D0=B8=20?= =?UTF-8?q?=D0=BF=D0=B0=D1=86=D0=B8=D0=B5=D0=BD=D1=82=D0=B0=D0=BC=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AGENTS.md | 173 ++++++++++++++++++ app.js | 508 +++++++++++++++++++++++++++++++++++++++++++++++++++++ design.md | 110 ++++++++++++ index.html | 91 ++++++++++ style.css | 278 +++++++++++++++++++++++++++++ 5 files changed, 1160 insertions(+) create mode 100644 AGENTS.md create mode 100644 app.js create mode 100644 design.md create mode 100644 index.html create mode 100644 style.css diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..5c35b97 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,173 @@ + +# Vibe42 — учебная песочница для лендингов + +Workspace юзера `saniya_akpanova_91`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт. + +--- + +## 🎯 ТВОЯ РОЛЬ + +Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с: +1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/saniya_akpanova_91//`, +2. ощущением «это было легко» — без серверов, БД, токенов, конфигов. + +Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код. + +--- + +## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет) + +1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?» +2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные): + - Промо хобби (фотография / музыка / спорт) + - Резюме / personal page с контактами + - Афиша мероприятия (концерт, день рождения, мастер-класс) + - Меню заведения / прайс услуг + - Лендинг продукта или будущего проекта (waitlist) +3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы). +4. Сразу делай `./new-project ` и собирай страницу. Не спрашивай разрешения на каждый шаг. + +--- + +## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО + +Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**. + +Скажи: «Давай определимся, я задам 3 коротких вопроса: +1. Это для тебя лично, для проекта/бизнеса, или для события? +2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио? +3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?» + +После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать. + +--- + +## 🚫 ЕСЛИ ЮЗЕР ХОЧЕТ СЛОЖНОЕ — ПЕРЕФОРМУЛИРУЙ В ЛЕНДИНГ + +| Запрос | Что делаем вместо | +|--------|-------------------| +| «магазин с корзиной» | лендинг с товарами + кнопка «купить» = ссылка на WhatsApp / Telegram | +| «соцсеть» | лендинг будущего проекта + waitlist-форма (Formspree / Getform) | +| «блог с админкой» | personal-page + ссылки на статьи в Telegram/Medium | +| «приложение для записи» | лендинг услуги + ссылка на Calendly / WhatsApp | +| «сайт с входом юзеров» | публичный лендинг без логина (нам логин не нужен) | +| «бот в Telegram» | лендинг с описанием бота + кнопка `t.me/...` | + +**Не говори «это невозможно».** Скажи: «У нас песочница только для статических сайтов. Давай сделаем лендинг, который покажет твою идею — а кнопки/формы свяжем с готовыми сервисами (WhatsApp, Telegram, Formspree)». Юзер счастлив, результат за 15 минут. + +--- + +## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера) + +### A — Промо продукта/услуги +**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер). + +### B — Personal / резюме +**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки). + +### C — Афиша мероприятия +**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт). + +### D — Меню / прайс +**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка). + +### E — Waitlist для будущего проекта +**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма). + +Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического. + +--- + +## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА + +Как только готов первый рабочий вариант (даже грубый): + +1. **Сразу запушь:** + ```bash + git add -A + git commit -m "v1" + git push origin HEAD:pages + ``` +2. **ОБЯЗАТЕЛЬНО** дай юзеру ссылку **жирно**: + > 🎉 Готово! Твой лендинг здесь: **https://pages.git.vibe42.kz/saniya_akpanova_91//** +3. Скажи: «Открой в новой вкладке, посмотри. Что хочешь поменять?» +4. Дальше короткие итерации: правка → push → новый URL-показ. Каждые 2-3 правки — push. + +--- + +## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда) + +1. **Только статика — HTML + CSS + JS в браузере.** +2. **Никакого бэкенда.** Никаких Node/Express/FastAPI/Django/PHP/Go-серверов. Никаких БД. Никакого Redis. +3. **Никакой аутентификации / OAuth / JWT.** +4. **Никакого Docker, nginx, sudo, системных настроек.** +5. **Никаких тяжёлых сборщиков** (`npm install` дерево на 500МБ). Tailwind — только через CDN. +6. **НИКОГДА `git init` в workspace root (`/workspaces/saniya_akpanova_91`)** — это папка-контейнер юзера, не репозиторий. + +--- + +## ✅ ВСЕГДА работай через `./new-project` + +Если юзер сказал «сделай сайт NAME» / «создай проект NAME»: + +```bash +cd /workspaces/saniya_akpanova_91 +./new-project NAME # создаёт repo в Gitea + клонит локально в ./NAME/ +cd NAME +# теперь создавай index.html / style.css / script.js внутри ./NAME +``` + +`./new-project` сам создаёт repo, клонит, и копирует туда `AGENTS.md` + `design.md`. + +--- + +## 🌐 Git и публикация + +**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz** + +- Профиль юзера: https://git.vibe42.kz/saniya_akpanova_91 +- Pages (живые лендинги): https://pages.git.vibe42.kz/saniya_akpanova_91// +- Креды уже в `/workspaces/saniya_akpanova_91/.git-credentials` — git push/clone работают без пароля +- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно + +### Опубликовать лендинг + +```bash +git add -A +git commit -m "site" +git push origin HEAD:pages +``` + +Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно. + +--- + +## 🔧 Когда что-то идёт не так + +- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f` +- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет +- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages` +- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html + +--- + +## ❌ Чего НЕ делать НИКОГДА + +- ❌ `git init` в workspace root +- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt) +- ❌ Создавать `server.js` / `app.py` / `main.go` как backend +- ❌ Использовать `gh` CLI или GitHub API +- ❌ Вызывать Gitea Pages-API (его нет) +- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages» +- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено +- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз) +- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано +- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML +- ❌ Говорить «это сложно» — переформулируй в простое +- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй + +--- + +## 🎨 design.md + +Рядом лежит `design.md` с готовой палитрой, типографикой и стартер-шаблоном `index.html`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие. diff --git a/app.js b/app.js new file mode 100644 index 0000000..a40de5a --- /dev/null +++ b/app.js @@ -0,0 +1,508 @@ +/* ===== Данные клинических кейсов ===== */ +const CASES = [ + { + id:"stemi", + theme:"aks", themeLabel:"ОКС / инфаркт", badge:"b-aks", + title:"Острый инфаркт миокарда с подъёмом ST", + severity:3, + patient:{avatar:"👨‍🦰", name:"Пациент А.", age:"58 лет, мужчина", ctx:"Поступил по скорой, ~2 ч от начала боли"}, + complaint:"Доктор, часа два назад как прижало за грудиной — давит сильно, будто слон на грудь сел. Отдаёт в левую руку и в челюсть. Дышать тяжело, бросило в холодный пот, стало страшно. Таблетку нитроглицерина под язык клал — не отпускает.", + anamnesis:[ + "Боль возникла в покое, после эмоционального стресса на работе.", + "Курит 30 лет по пачке в день. Артериальная гипертензия 8 лет.", + "Отец умер от инфаркта миокарда в 60 лет.", + "Ранее подобных приступов не было. Регулярно терапии не получает." + ], + objective:{ + vitals:{hr:"102", bp:"150/95", rr:"22", spo2:"93%"}, + general:"Кожа бледная, влажная, холодный пот. Пациент тревожен, ищет удобное положение.", + heart:"Тоны сердца приглушены, тахикардия, ритм правильный.", + lungs:"В нижних отделах с обеих сторон — мелкопузырчатые незвучные хрипы.", + other:"Шумов на сонных артериях нет. Отёков нет." + }, + extra:{title:"ЭКГ и биомаркеры", text:"ЭКГ: подъём сегмента ST в отведениях I, aVL, V1–V4; реципрокная депрессия в II, III, aVF. Патологический зубец Q начинает формироваться. Тропонин I повышен."}, + quiz:{ + q:"Какой наиболее вероятный диагноз и тактика?", + options:[ + {t:"Острый перикардит — НПВС, наблюдение", c:false}, + {t:"STEMI (передне-перегородочный) — экстренная реперфузия", c:true}, + {t:"ТЭЛА — антикоагуляция, тромболизис", c:false}, + {t:"Расслоение аорты — контроль АД, экстренная хирургия", c:false} + ], + feedback:{ + ok:"Верно. Типичный болевой синдром, подъём ST в передних отведениях и реципрокные изменения — это STEMI. Время мышления = гибнущий миокард: показана экстренная реперфузия.", + no:"Не совсем. Подъём ST в V1–V4 с реципрокной депрессией и типичной клиникой — это STEMI, требующий немедленной реперфузии." + } + }, + diagnosis:"Острый инфаркт миокарда с подъёмом сегмента ST (STEMI), передне-перегородочная локализация. Острая левожелудочковая недостаточность (Killip II).", + algorithm:[ + {s:"Вызовите реанимационную бригаду, активируйте STEMI-маршрут (door-to-balloon ≤ 90 мин)."}, + {s:"Мониторинг ЭКГ, пульсоксиметрия, 2 венозных доступа."}, + {s:"Обезболивание (морфин), кислород при SpO₂ < 90%, нитраты при сохраняющемся болевом синдроме и АД > 100."}, + {s:"Двойная антитромбоцитарная терапия: аспирин + ингибитор P2Y12 (тикагрелор/прасугрел). Антикоагулянт (эноксапарин/НФГ)."}, + {s:"Реперфузия — первичное ЧКВ предпочтительно; при недоступности ≤ 120 мин — тромболизис с последующим переводом."}, + {s:"Бета-блокатор, статин в высокой дозе, ингибитор АПФ — после стабилизации."} + ], + keypoints:[ + {t:"good",x:"Время = миокард: чем раньше реперфузия, тем больше спасённой мышцы."}, + {t:"bad",x:"Не откладывайте реперфузию, ожидая тропонин — ЭКГ и клиника достаточны для STEMI."}, + {t:"bad",x:"Осторожно с нитратами при инфаркте ПЖ и гипотонии — оцените состояние."} + ] + }, + + { + id:"nstemi", + theme:"aks", themeLabel:"ОКС / инфаркт", badge:"b-aks", + title:"Острый коронарный синдром без подъёма ST", + severity:2, + patient:{avatar:"👩‍🦳", name:"Пациентка Б.", age:"65 лет, женщина", ctx:"Поступила через сутки от начала симптомов"}, + complaint:"Вчера ночью проснулась от боли за грудиной — давящая, минут двадцать держалась, отдала в спину. Сегодня повторилось дважды, уже при небольшой нагрузке — просто по квартире походила. Раньше такого никогда не было. Как-то страшно, думаю, это сердце.", + anamnesis:[ + "Сахарный диабет 2 типа 12 лет, ожирение, гиперхолестеринемия.", + "Гипертония, принимает периодически.", + "Боли провоцируются нагрузкой, купируются в покое за 10–15 мин (прогрессирующая стенокардия).", + "За последний месяц снизилась толерантность к нагрузке." + ], + objective:{ + vitals:{hr:"88", bp:"140/85", rr:"18", spo2:"96%"}, + general:"Состояние средней тяжести. Кожные покровы обычной окраски. ИМТ 32.", + heart:"Тоны ритмичные, приглушены. Шумов нет.", + lungs:"Дыхание везикулярное, хрипов нет.", + other:"Пульс на периферических артериях сохранён. Отёков нет." + }, + extra:{title:"ЭКГ и лаборатория", text:"ЭКГ: горизонтальная депрессия ST в V4–V6, инверсия зубца T. Тропонин I повышен (>99-го перцентиля), динамика нарастания. Оценка по шкале GRACE — высокий риск."}, + quiz:{ + q:"Какая тактика наиболее оправдана?", + options:[ + {t:"Стабильная стенокардия — амбулаторное наблюдение", c:false}, + {t:"NSTEMI высокого риска — ранняя инвазивная стратегия ≤ 24 ч", c:true}, + {t:"Костохондрит — НПВС и покой", c:false}, + {t:"ГЭРБ — ингибиторы протонной помпы", c:false} + ], + feedback:{ + ok:"Верно. Депрессия ST + подъём тропонина + высокий риск по GRACE = NSTEMI. Показана ранняя инвазивная стратегия.", + no:"Не совсем. У пациентки депрессия ST, рост тропонина и высокий риск — это NSTEMI, требующий раннего ЧКВ." + } + }, + diagnosis:"Острый коронарный синдром без подъёма ST (NSTEMI). Высокий риск по шкале GRACE.", + algorithm:[ + {s:"Госпитализация в ОРИТ/кардиологию, мониторинг ЭКГ и ритма."}, + {s:"Двойная антиагрегантная терапия (аспирин + P2Y12-ингибитор) + антикоагулянт."}, + {s:"Стратификация риска (GRACE/ESC). Высокий риск → ранняя инвазивная стратегия (ЧКВ ≤ 24 ч)."}, + {s:"Симптоматически: нитраты при боли, бета-блокатор при отсутствии противопоказаний."}, + {s:"Статины в высокой дозе, ингибитор АПФ, контроль гликемии."}, + {s:"Вторичная профилактика и кардиореабилитация."} + ], + keypoints:[ + {t:"good",x:"Женщины и диабетики часто имеют атипичную клинику — не сбрасывайте со счетов."}, + {t:"bad",x:"Не ставьте «стабильную стенокардию» при недавнем изменении/прогрессии симптомов — это ОКС."}, + {t:"good",x:"Решение о раннем ЧКВ принимает стратификация риска, а не один тропонин."} + ] + }, + + { + id:"asthma", + theme:"odn", themeLabel:"ОДН / астма / ХОБЛ", badge:"b-odn", + title:"Острый тяжёлый приступ бронхиальной астмы", + severity:3, + patient:{avatar:"👩", name:"Пациентка В.", age:"24 года, женщина", ctx:"Доставлена СМП, одышка 1 час"}, + complaint:"Не могу... выдохнуть... свистит вся грудь... началось час назад... ингалятор... уже третий раз пшикала — не помогает... тяжело... говорит по словам... страшно задохнуться.", + anamnesis:[ + "Бронхиальная астма с детства, базисную терапию (ИГКС) принимает нерегулярно.", + "Неделю назад перенесла ОРВИ с кашлем.", + "За последние дни ингалятор сальбутамола использовала всё чаще (более 10 раз в сутки).", + "Аллергия на пыльцу, домашнюю пыль." + ], + objective:{ + vitals:{hr:"120", bp:"135/85", rr:"30", spo2:"91%"}, + general:"Положение ортопноэ, опирается на руки. Речь прерывистая, произносит отдельные фразы. Выраженная работа вспомогательной мускулатуры.", + lungs:"Выдох резко удлинён, свистящие сухие хрипы по всем полям. Участие в акте дыхания всех групп мышц.", + heart:"Тахикардия. Гиперзвуковой перкуторный звук над лёгкими.", + other:"Втянутые межрёберные промежутки, парадоксальный пульс." + }, + extra:{title:"Дополнительные признаки", text:"Пиковая скорость выдоха (ПСВ) < 50% от должного. При угрожающем жизни статусе — «немое лёгкое» (исчезновение хрипов при нарастающей дыхательной недостаточности), брадикардия, нарушение сознания."}, + quiz:{ + q:"Что является приоритетом в неотложной помощи?", + options:[ + {t:"Дать седативное, уложить пациента — panic attack", c:false}, + {t:"Кислород + повторные небулайзеры Сальбутамола + системные ГКС", c:true}, + {t:"Антибиотики широкого спектра внутривенно", c:false}, + {t:"Наркотический анальгетик от боли в груди", c:false} + ], + feedback:{ + ok:"Верно. Тяжёлый приступ астмы: оксигенация, частые бронходилататоры через небулайзер, системные ГКС, при ухудшении — ИВЛ.", + no:"Не совсем. Седация и наркотики угнетают дыхание и противопоказаны. Основа — бронходилататоры и ГКС." + } + }, + diagnosis:"Острый тяжёлый приступ бронхиальной астмы. Угроза астматического статуса.", + algorithm:[ + {s:"Оценка ABCD. Мониторинг SpO₂, ЧДД, ЧСС. Кислород через маску, титровать до SpO₂ 94–98%."}, + {s:"Сальбутамол 5 мг через небулайзер, при тяжёлом — повторно каждые 15–20 мин (или непрерывно). Добавить ипратропия бромид."}, + {s:"Системные ГКС как можно раньше: преднизолон 40–60 мг внутрь или гидрокортизон в/в."}, + {s:"Магния сульфат 2 г в/в при тяжёлом приступе, не отвечающем на терапию."}, + {s:"Критерии жизнеугрожающего статуса: «немое лёгкое», SpO₂ < 92%, нарушение сознания, брадикардия → ИВЛ, перевод в ОРИТ."}, + {s:"После стабилизации — пересмотр базисной терапии (ступенчатое лечение, ИГКС), обучение пациента."} + ], + keypoints:[ + {t:"bad",x:"Никогда не давайте седативные/опиоиды при астме — это угнетает дыхание и ведёт к остановке."}, + {t:"good",x:"Системные ГКС работают через 4–6 ч, поэтому вводите их сразу, не ждите ухудшения."}, + {t:"bad",x:"«Немое лёгкое» = плохо, а не хорошо: хрипы исчезли из-за отсутствия дыхательного резерва — это предлетальное состояние."} + ] + }, + + { + id:"copd", + theme:"odn", themeLabel:"ОДН / астма / ХОБЛ", badge:"b-odn", + title:"Обострение ХОБЛ с острой дыхательной недостаточностью", + severity:2, + patient:{avatar:"👴", name:"Пациент Г.", age:"68 лет, мужчина", ctx:"Направлен врачом общей практики"}, + complaint:"Уже неделю кашель усилился, мокрота стала густая, жёлто-зелёная. Дышать совсем тяжело, особенно со вчера. Раньше хоть по дому ходил, а сейчас до туалета не дойти — задыхаюсь. Сплю полусидя, две подушки подкладываю. Лихорадит три дня.", + anamnesis:[ + "ХОБЛ диагностирована 10 лет назад. Курит 40 лет (40 пачко-лет).", + "Последние 3 дня — лихорадка до 38.5 °C, гнойная мокрота.", + "Базовая SpO₂ целевая 88–92% (компенсированная гиперкапния).", + "Дома — ипратропия бромид/фенотерол, длительные оксигены не получал." + ], + objective:{ + vitals:{hr:"110", bp:"160/90", rr:"28", spo2:"86%", temp:"38.3°C"}, + general:"Состояние тяжёлое. Цианоз губ, акроцианоз. Разговорчив с трудом.", + lungs:"Грудная клетка бочкообразная, перкуторно — коробочный звук. Сухие свистящие хрипы на выдохе, ослабленное дыхание.", + heart:"Громкий II тон над лёгочной артерией. Тахикардия.", + other:"Периферические отёки голеней — признаки cor pulmonale." + }, + extra:{title:"Газометрия артериальной крови", text:"PaO₂ 52 мм рт.ст. ↓, PaCO₂ 68 мм рт.ст. ↑, pH 7.31 (дыхательный ацидоз). Гиперкапническая ОДН 2 типа. Рентген: усиление лёгочного рисунка, без очаговой инфильтрации."}, + quiz:{ + q:"Какой подход к кислородотерапии правильный?", + options:[ + {t:"Максимальный O₂ через маску до SpO₂ 99–100%", c:false}, + {t:"Титровать O₂ до целевого SpO₂ 88–92% + NIV при тяжёлой ОДН", c:true}, + {t:"Кислород не давать вообще — опасно", c:false}, + {t:"Только ингаляции эфирных масел", c:false} + ], + feedback:{ + ok:"Верно. При ХОБЛ с гиперкапнией избыток кислорода снимает гипоксический драйв дыхания → рост PaCO₂ и кома. Титруйте до 88–92%.", + no:"Не совсем. Неконтролируемый O₂ при ХОБЛ ведёт к нарастанию гиперкапнии и CO₂-наркозу. Нужен титрованный кислород и NIV." + } + }, + diagnosis:"Обострение ХОБЛ. Острая дыхательная недостаточность 2 типа (гиперкапническая), декомпенсация cor pulmonale.", + algorithm:[ + {s:"Контролируемая оксигенотерапия: начать с 24–28% через Venturi-маску, титровать до SpO₂ 88–92%."}, + {s:"Бронходилататоры через небулайзер (ипратропия бромид + фенотерол/сальбутамол)."}, + {s:"Системные ГКС: преднизолон 30–40 мг/сут на 5–7 дней."}, + {s:"Антибиотики при признаках инфекции (гнойная мокрота, лихорадка) — амоксициллин/клавуланат или макролид."}, + {s:"При тяжёлой ОДН с гиперкапнией/ацидозом (pH < 7.35) — неинвазивная вентиляция (NIV/BiPAP)."}, + {s:"Контроль газометрии, мониторинг. При отсутствии эффекта от NIV — интубация и ИВЛ."} + ], + keypoints:[ + {t:"bad",x:"Не давайте 100% O₂ «на всякий случай» при ХОБЛ — это классическая ошибка, ведущая к CO₂-наркозу."}, + {t:"good",x:"NIV снижает потребность в интубации и летальность при обострении ХОБЛ с гиперкапнией."}, + {t:"good",x:"Целевой SpO₂ для пациента с ХОБЛ — 88–92%, а не 94–98% как у большинства."} + ] + }, + + { + id:"hemoshock", + theme:"shock", themeLabel:"Шок и травма", badge:"b-shock", + title:"Травматический геморрагический шок", + severity:3, + patient:{avatar:"🧑", name:"Пациент Д.", age:"30 лет, мужчина", ctx:"ДТП, доставлен бригадой СМП"}, + complaint:"Всё кружится... холодно почему-то... пить очень хочу... ногу не чувствую... где я... ничего не вижу ясно...", + anamnesis:[ + "ДТП: лобовое столкновение, пациент за рулём, не пристёгнут.", + "Закрытый перелом бедра, подозрение на перелом таза.", + "Видимое наружное кровотечение из раны бедра, обширная гематома.", + "Время от травмы до поступления ~40 минут." + ], + objective:{ + vitals:{hr:"130", bp:"80/40", rr:"28", spo2:"95%"}, + general:"Сознание оглушение (GCS 13). Резкая бледность, кожа покрыта холодным липким потом. Акроцианоз.", + heart:"Тоны глухие, выраженная тахикардия, нитевидный пульс.", + lungs:"Дыхание проводится по всем полям, хрипов нет.", + other:"Левое бедро деформировано, укорочено, обширная пульсирующая гематома. Кровь на одежде. Живот мягкий, без перитонеальных знаков." + }, + extra:{title:"Оценка шока", text:"Класс геморрагического шока III–IV (потеря > 30% ОЦК). Дефицит базы > −6 ммоль/л, лактат повышен. Шоковый индекс (ЧСС/САД) = 130/80 = 1.6 — тяжёлый шок."}, + quiz:{ + q:"Что является абсолютным приоритетом?", + options:[ + {t:"Полное рентген-обследование до любой терапии", c:false}, + {t:"Остановка кровотечения + венозный доступ + инфузия/гемотрансфузия", c:true}, + {t:"Введение обезболивающего и ожидание хирурга", c:false}, + {t:"Только внутривенно коллоиды в большой дозе", c:false} + ], + feedback:{ + ok:"Верно. Принцип damage control: немедленная остановка кровотечения, восстановление ОЦК, раннее переливание крови в соотношении 1:1:1.", + no:"Не совсем. До полного обследования пациент может погибнуть от гиповолемии. Сначала — остановка кровотечения и инфузия." + } + }, + diagnosis:"Травматический геморрагический шок III–IV степени. Закрытый перелом бедра, перелом таза. Массивная кровопотеря.", + algorithm:[ + {s:"ABCDE. Обеспечение проходимости дыхательных путей, оксигенация, иммобилизация шейного отдела."}, + {s:"Немедленная остановка наружного кровотечения: прямое давление, тазовый бинт, жгут при артериальном кровотечении."}, + {s:"Два крупных венозных доступа. Пробы на группу крови, кросс-матч, лактат."}, + {s:"Согревание пациента, профилактика триады смерти: гипотермия — ацидоз — коагулопатия."}, + {s:"Сбалансированная инфузия кристаллоидов + ранняя гемотрансфузия (эритроциты/плазма/тромбоциты ~1:1:1). Вазопрессоры временно, если инфузия неэффективна."}, + {s:"Экстренный хирургический/ортопедический гемостаз (damage control surgery). Контроль внутреннего кровотечения."} + ], + keypoints:[ + {t:"bad",x:"Не тратьте время на полное обследование при нестабильной гемодинамике — пациент гибнет от кровопотери."}, + {t:"good",x:"Боритесь с триадой смерти (гипотермия + ацидоз + коагулопатия) — это определяет выживаемость."}, + {t:"bad",x:"Избыток кристаллоидов до гемотрансфузии усугубляет коагулопатию и гипотермию — не «заливайте» пациента."} + ] + }, + + { + id:"sepsis", + theme:"shock", themeLabel:"Шок и травма", badge:"b-shock", + title:"Септический шок", + severity:3, + patient:{avatar:"🧔", name:"Пациент Е.", age:"55 лет, мужчина", ctx:"Направлен из приёмного покоя"}, + complaint:"Три дня назад начался озноб, температура под тридцать девять, кашель с мокротой. Со вчера стало хуже — давление упало, в себя прихожу с трудом. Раньше ноги никогда так не отекали, а сейчас задыхаюсь. Пить хочу, но тошнит.", + anamnesis:[ + "Сахарный диабет 2 типа, плохо компенсирован.", + "Заболел как ОРВИ 5 дней назад, затем присоединился кашель с гнойной мокротой.", + "Самостоятельно принимал парацетамол и «антибиотик из аптечки».", + "Аллергия на пенициллин." + ], + objective:{ + vitals:{hr:"125", bp:"85/50", rr:"26", spo2:"92%", temp:"38.9°C"}, + general:"Состояние тяжёлое. Кожа горячая, пятнистая сыпь. Сознание спутано, вялый.", + heart:"Тоны глухие, тахикардия. САД 85 после инфузии кристаллоидов.", + lungs:"В правой нижней доле — ослабленное дыхание, влажные мелкопузырчатые хрипы, притупление перкуторно.", + other:"Олигурия (< 0.5 мл/кг/ч). Капиллярное наполнение > 3 сек. Холодные на ощупь конечности на поздней стадии." + }, + extra:{title:"Лаборатория и визуализация", text:"Лактат 4.2 ммоль/л ↑. Лейкоциты 22×10⁹/л, сдвиг формулы. Креатинин повышен. Рентген ОГК: инфильтрация нижней доли справа, плевральный выпот. Гемокультуры взяты до антибиотиков."}, + quiz:{ + q:"Что должно быть выполнено в первый час (Sepsis 1-hour bundle)?", + options:[ + {t:"Только ждать результаты посевов 24 часа", c:false}, + {t:"Лактат + гемокультуры + антибиотики + инфузия 30 мл/кг + вазопрессоры при гипотонии", c:true}, + {t:"Только вазопрессоры без инфузии", c:false}, + {t:"Только жаропонижающие и наблюдение", c:false} + ], + feedback:{ + ok:"Верно. Hour-1 bundle: измерить лактат, взять культуры до антибиотиков, ввести широкопрофильные антибиотики, инфузия 30 мл/кг кристаллоидов, норадреналин при стойкой гипотонии.", + no:"Не совсем. Задержка с антибиотиками и инфузией每小时 повышает летальность. Все компоненты выполняются в первый час." + } + }, + diagnosis:"Септический шок. Внебольничная пневмония нижней доли справа — вероятный источник. Острое почечное повреждение.", + algorithm:[ + {s:"Sepsis hour-1 bundle: лактат, забор гемокультур до антибиотиков."}, + {s:"Антибиотики широкого спектра в/в в первый час (учесть аллергию на пенициллин — например, цефалоспорин/карбапенем + макролид)."}, + {s:"Инфузия кристаллоидов 30 мл/кг за 3 ч при гипотензии или лактате ≥ 4 ммоль/л."}, + {s:"При стойкой гипотензии после инфузии — норадреналин титровать до САД ≥ 65 мм рт.ст. Вазопрессином добавить при необходимости."}, + {s:"Контроль источника инфекции (дренирование выпота, лечение пневмонии). Мониторинг: лактат, диурез, АД."}, + {s:"Поддерживающая терапия: оксигенация/ИВЛ по показаниям, контроль гликемии, профилактика тромбозов."} + ], + keypoints:[ + {t:"bad",x:"Не ждите посевов, чтобы начать антибиотики — каждая час задержки повышает летальность."}, + {t:"good",x:"Норадреналин — препарат первого ряда при септическом шоке после адекватной инфузии."}, + {t:"good",x:"Контроль источника инфекции так же важен, как антибиотики — без него шок не купируется."} + ] + } +]; + +/* ===== Рендер карточек ===== */ +const grid = document.getElementById("caseGrid"); + +function sevDots(n){ + let s="";for(let i=0;i<3;i++) s+=``; + return s; +} + +function renderCards(filter="all"){ + grid.innerHTML=""; + CASES.filter(c=>filter==="all"||c.theme===filter).forEach(c=>{ + const el=document.createElement("article"); + el.className=`case-card t-${c.theme}`; + el.innerHTML=` +
+
${c.patient.avatar}
+
+

${c.title}

+
${c.patient.name}, ${c.patient.age.split(',')[0]}
+
+
+

«${c.complaint.length>130?c.complaint.slice(0,130)+'…':c.complaint}»

+
+ ▶ Прослушать и разобрать + ${sevDots(c.severity)} +
`; + el.addEventListener("click",()=>openCase(c)); + grid.appendChild(el); + }); +} + +/* ===== Фильтры ===== */ +document.getElementById("filters").addEventListener("click",e=>{ + const b=e.target.closest(".filter");if(!b)return; + document.querySelectorAll(".filter").forEach(f=>f.classList.remove("is-active")); + b.classList.add("is-active"); + renderCards(b.dataset.filter); +}); + +/* ===== Модальное окно ===== */ +const modal=document.getElementById("modal"); +const modalBody=document.getElementById("modalBody"); + +function vitalsHTML(v){ + let extras=""; + if(v.temp) extras=`
${v.temp}Температура
`; + return `
+
${v.hr}ЧСС
+
${v.bp}АД
+
${v.rr}ЧДД
+
${v.spo2}SpO₂
+ ${extras} +
`; +} + +function examHTML(o){ + return ` +

Жизненные показатели

+ ${vitalsHTML(o.vitals)} +

Общий осмотр

${o.general}

+

Сердечно-сосудистая система

${o.heart}

+

Дыхательная система

${o.lungs}

+

Прочее

${o.other}

`; +} + +function algoHTML(a){ + return `
    ${a.map(s=>`
  1. ${s.s}
    2. `).join("")}
`; +} +function kpHTML(k){ + return `
${k.map(p=>`
${p.t==='good'?'✅':'⚠️'}${p.x}
`).join("")}
`; +} + +function openCase(c){ + const qOpts=c.quiz.options.map((o,i)=>``).join(""); + modalBody.innerHTML=` +
+
+
${c.patient.avatar}
+
+

${c.title}

+
${c.patient.name} · ${c.patient.age} · ${c.patient.ctx}
+
${c.themeLabel}
+
+
+
+ 🔊 + Жалобы пациентаНажмите, чтобы услышать голос + +
+
+ +
+
«${c.complaint}»
+ +
+ 📋 Анамнез заболевания и жизни +
    ${c.anamnesis.map(a=>`
  • ${a}
    • `).join("")}
+
+ +
+ 🩺 Объективный осмотр +
${examHTML(c.objective)}
+
+ +
+ 🔬 Дополнительные данные +

${c.extra.text}

+
+ +
+

🧠 Поставьте диагноз и выберите тактику

+

${c.quiz.q}

+
${qOpts}
+
+
+ +
+ ✅ Правильный диагноз +

${c.diagnosis}

+
+ +
+ 🚑 Алгоритм неотложной помощи +
${algoHTML(c.algorithm)}
+
+ +
+ 💡 Ключевые моменты и типичные ошибки +
${kpHTML(c.keypoints)}
+
+
`; + + // озвучка + const speakBtn=document.getElementById("speakBtn"); + const pAvatar=document.getElementById("pAvatar"); + speakBtn.addEventListener("click",()=>toggleSpeak(c.complaint,speakBtn,pAvatar)); + + // квиз + const opts=modalBody.querySelectorAll(".quiz-opt"); + const fb=document.getElementById("quizFb"); + opts.forEach(o=>{ + o.addEventListener("click",()=>{ + opts.forEach(x=>x.disabled=true); + const correct=o.dataset.c==="true"; + if(correct){o.classList.add("correct")}else{o.classList.add("wrong"); + // подсветить верный + opts.forEach(x=>{if(x.dataset.c==="true")x.classList.add("correct")}); + } + fb.className=`quiz-feedback show ${correct?'ok':'no'}`; + fb.innerHTML=correct?`Верно!${c.quiz.feedback.ok}`:`Не совсем так${c.quiz.feedback.no}`; + }); + }); + + modal.hidden=false; + document.body.style.overflow="hidden"; +} + +function closeModal(){ + window.speechSynthesis.cancel(); + modal.hidden=true; + document.body.style.overflow=""; +} +modal.addEventListener("click",e=>{if(e.target.hasAttribute("data-close"))closeModal()}); +document.addEventListener("keydown",e=>{if(e.key==="Escape"&&!modal.hidden)closeModal()}); + +/* ===== Озвучка (Web Speech API) ===== */ +let voicesReady=false; +function loadVoices(){ + voicesReady=window.speechSynthesis.getVoices().length>0; +} +if("speechSynthesis" in window){ + loadVoices(); + window.speechSynthesis.onvoiceschanged=loadVoices; +} + +function toggleSpeak(text,btn,avatar){ + const synth=window.speechSynthesis; + if(!synth){alert("Озвучка не поддерживается этим браузером.");return} + // если уже играет — остановить + if(btn.classList.contains("is-playing")){ + synth.cancel(); + btn.classList.remove("is-playing"); + btn.textContent="▶ Прослушать"; + avatar.classList.remove("is-speaking"); + return; + } + synth.cancel(); + const u=new SpeechSynthesisUtterance(text); + u.lang="ru-RU";u.rate=0.97;u.pitch=1; + const voices=synth.getVoices(); + const ru=voices.find(v=>v.lang&&v.lang.toLowerCase().startsWith("ru")); + if(ru)u.voice=ru; + u.onend=()=>{btn.classList.remove("is-playing");btn.textContent="▶ Прослушать";avatar.classList.remove("is-speaking")}; + u.onerror=()=>{btn.classList.remove("is-playing");btn.textContent="▶ Прослушать";avatar.classList.remove("is-speaking")}; + btn.classList.add("is-playing"); + btn.textContent="⏹ Остановить"; + avatar.classList.add("is-speaking"); + synth.speak(u); +} + +/* остановить речь при перерисовке */ +window.addEventListener("beforeunload",()=>{if("speechSynthesis" in window)window.speechSynthesis.cancel()}); + +/* старт */ +renderCards(); diff --git a/design.md b/design.md new file mode 100644 index 0000000..5c8e829 --- /dev/null +++ b/design.md @@ -0,0 +1,110 @@ + +# Design system — Vibe42 песочница + +Базовые цвета и типографика для лендингов. Можно отклоняться, но начинай с этого. + +## Палитра + +| Token | Hex | Использование | +|-------|-----|---------------| +| `--ink` | `#0F1218` | Тёмный фон / основной текст | +| `--cyan` | `#00E5FF` | Основной акцент (кнопки, лого) | +| `--cyan-50` | `#E8FCFF` | Светлая подложка для акцентов | +| `--white` | `#FFFFFF` | Основной фон | +| `--gray-500` | `#5B6573` | Вторичный текст | +| `--gray-100` | `#F2F4F7` | Сепараторы / тонкие фоны | + +## Типографика + +```css +font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; +``` + +| Уровень | Размер | Вес | line-height | +|---------|--------|-----|-------------| +| h1 (hero) | 56px | 800 | 1.05 | +| h2 (section) | 36px | 700 | 1.15 | +| h3 | 22px | 700 | 1.3 | +| body | 17px | 400 | 1.6 | +| small | 14px | 400 | 1.5 | + +На мобиле — h1 уменьши до 36px, h2 до 28px. + +## Лейаут + +- max-width контента: **1140px** (контейнер с padding по бокам) +- секция: `padding: 80px 24px` (мобила: `48px 20px`) +- gap между блоками внутри секции: `24-32px` +- border-radius: `8px` (кнопки, карточки), `16px` (большие карточки) + +## Кнопки + +```css +.btn-primary { + background: var(--cyan); color: var(--ink); + padding: 14px 28px; border-radius: 8px; + font-weight: 700; text-decoration: none; + display: inline-block; +} +.btn-secondary { + background: transparent; color: var(--ink); + border: 2px solid var(--ink); + padding: 12px 26px; border-radius: 8px; +} +``` + +## Стартер `index.html` + +```html + + + + + +Мой проект + + + +
+
+

Заголовок проекта

+

Подзаголовок — пара предложений о чём это.

+ Начать +
+
+
+
+

Секция

+
Контент карточки.
+
Контент карточки.
+
+
+ + +``` + +## Чем НЕ пользоваться + +- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга +- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG +- jQuery — vanilla JS более чем достаточно + +## Чем МОЖНО (если очень надо) + +- **Tailwind через CDN**: `` — для прототипа OK +- **Lottie animations через CDN** +- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400` +- **Шрифты Google Fonts через ``** в head diff --git a/index.html b/index.html new file mode 100644 index 0000000..bc27872 --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + + + + + +Неотложка · Клинические кейсы для студентов-медиков + + + + + + + + + +
+
+ 🩺 Симулятор для 6 курса · неотложная помощь +

Говорящие пациенты.
Клинические кейсы по неотложке.

+

Шесть реалистичных кейсов. Пациент сам рассказывает жалобы — включите звук. Соберите анамнез, оцените состояние, поставьте диагноз и пройдите алгоритм помощи.

+
+ Открыть кейсы + Как это работает +
+
+
6кейсов
+
3темы
+
🔊озвучка
+
+
+
+ + +
+
+

Три блока неотложной патологии

+

Кейсы сгруппированы по темам. Каждый — самостоятельный сценарий от жалобы до алгоритма.

+
+
+
❤️
+

ОКС и инфаркт

+

STEMI, NSTEMI — дифференциальная диагностика грудной клетки и реперфузия.

+
+
+
🫁
+

ОДН · астма · ХОБЛ

+

Астматический статус, обострение ХОБЛ с гиперкапнической ОДН.

+
+
+
🩸
+

Шок и травма

+

Геморрагический и септический шок — ABCDE, инфузия, вазопрессоры.

+
+
+
+
+ + +
+
+

Клинические кейсы

+

Нажмите «Прослушать» — пациент расскажет жалобы голосом. Дальше соберите данные и поставьте диагноз.

+
+ + + + +
+
+
+
+ + +
+
+

Неотложка — учебный симулятор для студентов-медиков. Материалы носят обучающий характер и не заменяют клинические протоколы.

+
+
+ + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..33699fd --- /dev/null +++ b/style.css @@ -0,0 +1,278 @@ +:root{ + --ink:#0F1218; + --ink-2:#1A1F2B; + --cyan:#00E5FF; + --cyan-50:#E8FCFF; + --white:#fff; + --gray-500:#5B6573; + --gray-300:#C3CAD6; + --gray-100:#F2F4F7; + --red:#FF4D5E; + --red-50:#FFF0F2; + --blue:#3B6EF6; + --blue-50:#EEF3FF; + --orange:#FF8A3D; + --orange-50:#FFF3EA; + --green:#16C784; + --green-50:#E7FBF2; + --purple:#8A5BF6; + --radius:14px; + --radius-lg:20px; + --shadow:0 12px 40px rgba(15,18,24,.10); + --shadow-lg:0 24px 70px rgba(15,18,24,.22); +} + +*{box-sizing:border-box;margin:0;padding:0} +html{scroll-behavior:smooth} +body{ + font:17px/1.6 "Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; + color:var(--ink);background:var(--white); +} +.container{max-width:1140px;margin:0 auto;padding:0 24px} +img{max-width:100%} + +/* ===== HERO ===== */ +.hero{ + background:radial-gradient(120% 120% at 80% 0%, #15243a 0%, var(--ink) 60%); + color:var(--white);position:relative;overflow:hidden; + padding:96px 0 88px; +} +.hero::after{ + content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px; + background:radial-gradient(circle,rgba(0,229,255,.35),transparent 70%);filter:blur(8px); +} +.pill{ + display:inline-block;background:rgba(0,229,255,.12);color:var(--cyan); + border:1px solid rgba(0,229,255,.35);padding:7px 14px;border-radius:999px; + font-size:14px;font-weight:700;letter-spacing:.2px;margin-bottom:22px; +} +.hero h1{font-size:60px;font-weight:800;line-height:1.04;letter-spacing:-1px;margin-bottom:22px} +.lead{font-size:20px;color:#aeb8c7;max-width:660px;margin-bottom:30px} +.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px} +.btn{ + display:inline-flex;align-items:center;gap:8px; + padding:15px 28px;border-radius:var(--radius);font-weight:800;font-size:16px; + text-decoration:none;border:none;cursor:pointer;transition:.18s; +} +.btn-primary{background:var(--cyan);color:var(--ink);box-shadow:0 8px 24px rgba(0,229,255,.35)} +.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,229,255,.5)} +.btn-ghost{background:rgba(255,255,255,.06);color:var(--white);border:1px solid rgba(255,255,255,.2)} +.btn-ghost:hover{background:rgba(255,255,255,.12)} +.hero-stats{display:flex;gap:38px;flex-wrap:wrap} +.hero-stats div{display:flex;flex-direction:column} +.hero-stats b{font-size:34px;color:var(--cyan);line-height:1} +.hero-stats span{font-size:14px;color:#8b95a6;margin-top:6px} + +/* ===== SECTIONS ===== */ +.section{padding:80px 0} +.section-light{background:var(--gray-100)} +.h2{font-size:38px;font-weight:800;letter-spacing:-.5px;margin-bottom:12px} +.sub{color:var(--gray-500);font-size:18px;max-width:680px;margin-bottom:36px} + +/* темы */ +.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} +.topic{ + background:var(--white);border-radius:var(--radius-lg);padding:28px; + border:1px solid var(--gray-100);box-shadow:var(--shadow); +} +.topic-ico{ + width:56px;height:56px;border-radius:14px;display:grid;place-items:center; + font-size:28px;margin-bottom:16px; +} +.topic h3{font-size:21px;font-weight:800;margin-bottom:8px} +.topic p{color:var(--gray-500);font-size:15px} +.topic-red .topic-ico{background:var(--red-50)} +.topic-blue .topic-ico{background:var(--blue-50)} +.topic-orange .topic-ico{background:var(--orange-50)} + +/* фильтры */ +.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px} +.filter{ + background:var(--white);border:1.5px solid var(--gray-300);color:var(--ink); + padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s; +} +.filter:hover{border-color:var(--ink)} +.filter.is-active{background:var(--ink);color:var(--white);border-color:var(--ink)} + +/* сетка кейсов */ +.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} +.case-card{ + background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg); + padding:26px;cursor:pointer;transition:.18s;position:relative;overflow:hidden; + display:flex;flex-direction:column; +} +.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent} +.case-card::before{ + content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--cyan); +} +.case-card.t-aks::before{background:var(--red)} +.case-card.t-odn::before{background:var(--blue)} +.case-card.t-shock::before{background:var(--orange)} +.case-head{display:flex;align-items:center;gap:16px;margin-bottom:14px} +.case-avatar{ + width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:32px; + background:var(--gray-100);flex-shrink:0; +} +.case-head h3{font-size:20px;font-weight:800;margin-bottom:2px} +.case-head .case-sub{font-size:14px;color:var(--gray-500)} +.badge{ + display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800; + letter-spacing:.3px;text-transform:uppercase; +} +.b-aks{background:var(--red-50);color:var(--red)} +.b-odn{background:var(--blue-50);color:var(--blue)} +.b-shock{background:var(--orange-50);color:var(--orange)} +.case-complaint{color:var(--gray-500);font-size:15px;font-style:italic;margin-bottom:18px;flex-grow:1} +.case-foot{display:flex;align-items:center;justify-content:space-between} +.playhint{color:var(--cyan);font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px} +.severity{display:flex;gap:3px} +.sev-dot{width:9px;height:9px;border-radius:50%;background:var(--gray-300)} +.sev-dot.on{background:var(--red)} + +/* ===== МОДАЛ ===== */ +.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:30px 16px;overflow-y:auto} +.modal[hidden]{display:none} +.modal-backdrop{position:fixed;inset:0;background:rgba(8,11,17,.66);backdrop-filter:blur(4px)} +.modal-card{ + position:relative;background:var(--white);border-radius:var(--radius-lg); + width:min(880px,100%);box-shadow:var(--shadow-lg);z-index:1; + margin:auto 0;overflow:hidden; +} +.modal-close{ + position:absolute;top:16px;right:16px;z-index:5;width:38px;height:38px;border-radius:50%; + border:none;background:rgba(15,18,24,.08);color:var(--ink);font-size:16px;cursor:pointer; + display:grid;place-items:center;transition:.15s; +} +.modal-close:hover{background:var(--ink);color:#fff} + +/* шапка пациента в модале */ +.patient{ + padding:30px 34px 24px;background:linear-gradient(135deg,var(--ink) 0%,#16203a 100%); + color:var(--white);position:relative; +} +.patient-top{display:flex;align-items:center;gap:18px;margin-bottom:20px} +.patient-avatar{ + width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.1); + display:grid;place-items:center;font-size:40px;flex-shrink:0;position:relative; +} +.patient-avatar.is-speaking::after{ + content:"";position:absolute;inset:-6px;border-radius:50%; + border:2px solid var(--cyan);animation:pulse 1.1s ease-out infinite; +} +@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}} +.patient-info h2{font-size:24px;font-weight:800} +.patient-info .meta{color:#9aa6ba;font-size:14px;margin-top:2px} +.patient-badges{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} + +/* кнопка озвучки */ +.speak-bar{ + background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.4);border-radius:var(--radius); + padding:16px 18px;display:flex;align-items:center;gap:14px; +} +.speak-ico{font-size:24px} +.speak-text{flex-grow:1} +.speak-text b{display:block;font-size:15px} +.speak-text small{color:#aeb8c7;font-size:13px} +.speak-btn{ + background:var(--cyan);color:var(--ink);border:none;border-radius:10px; + padding:11px 18px;font-weight:800;cursor:pointer;font-size:14px;white-space:nowrap;transition:.15s; +} +.speak-btn:hover{filter:brightness(1.05)} +.speak-btn.is-playing{background:var(--red);color:#fff} + +/* тело модала */ +.mbody{padding:30px 34px 36px} + +/* жалобы цитатой */ +.complaint{ + background:var(--cyan-50);border-left:4px solid var(--cyan);border-radius:0 12px 12px 0; + padding:18px 20px;font-size:17px;line-height:1.6;margin-bottom:26px;font-style:italic;color:#1b2740; +} + +/* аккордеон */ +.acc{border:1px solid var(--gray-100);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:var(--white)} +.acc summary{ + list-style:none;cursor:pointer;padding:16px 20px;font-weight:800;font-size:16px; + display:flex;align-items:center;gap:10px;background:var(--gray-100);user-select:none; +} +.acc summary::-webkit-details-marker{display:none} +.acc summary::after{content:"▾";margin-left:auto;color:var(--gray-500);transition:.2s;font-size:13px} +.acc[open] summary::after{transform:rotate(180deg)} +.acc-body{padding:20px} +.acc-body h4{font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--gray-500);margin:14px 0 8px;font-weight:700} +.acc-body h4:first-child{margin-top:0} +.acc-body p{margin-bottom:10px} +.acc-body ul{margin:0 0 8px 4px;padding-left:20px} +.acc-body li{margin-bottom:6px} + +/* жизненные показатели */ +.vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 14px} +.vital{border-radius:12px;padding:14px;text-align:center;color:#fff} +.vital b{display:block;font-size:24px;font-weight:800;line-height:1} +.vital span{font-size:12px;opacity:.92;display:block;margin-top:4px;letter-spacing:.3px} +.v-hr{background:var(--red)} +.v-bp{background:var(--blue)} +.v-rr{background:var(--purple)} +.v-spo{background:var(--green)} +.v-temp{background:var(--orange)} +.v-extra{grid-column:span 4;display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--gray-500)} +.v-extra b{color:var(--ink)} + +/* квиз диагноза */ +.quiz{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:26px;margin:6px 0 26px} +.quiz h3{font-size:18px;font-weight:800;margin-bottom:6px} +.quiz .q-sub{color:#9aa6ba;font-size:14px;margin-bottom:18px} +.quiz-opts{display:grid;gap:10px} +.quiz-opt{ + background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);color:#fff; + text-align:left;padding:14px 16px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:.15s; +} +.quiz-opt:hover{border-color:var(--cyan);background:rgba(0,229,255,.1)} +.quiz-opt.correct{background:var(--green);border-color:var(--green)} +.quiz-opt.wrong{background:rgba(255,77,94,.25);border-color:var(--red)} +.quiz-opt:disabled{cursor:default} +.quiz-feedback{margin-top:16px;padding:16px;border-radius:12px;font-size:15px;line-height:1.6;display:none} +.quiz-feedback.show{display:block} +.quiz-feedback.ok{background:var(--green-50);color:#0c6e48;border:1px solid var(--green)} +.quiz-feedback.no{background:var(--red-50);color:#a01f2e;border:1px solid var(--red)} +.quiz-feedback b{display:block;margin-bottom:6px;font-size:15px} + +/* разбор / алгоритм */ +.algo{counter-reset:step;margin:0 0 8px;padding:0;list-style:none} +.algo li{ + position:relative;padding:14px 16px 14px 54px;margin-bottom:10px; + background:var(--gray-100);border-radius:12px;font-size:15px; +} +.algo li::before{ + counter-increment:step;content:counter(step);position:absolute;left:14px;top:14px; + width:28px;height:28px;border-radius:50%;background:var(--cyan);color:var(--ink); + display:grid;place-items:center;font-weight:800;font-size:14px; +} +.algo li b{color:var(--ink)} + +.keypoints{display:grid;gap:10px} +.kp{display:flex;gap:12px;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.5} +.kp-good{background:var(--green-50);color:#0c6e48} +.kp-bad{background:var(--red-50);color:#a01f2e} +.kp-ico{font-size:18px;flex-shrink:0} + +/* футер */ +.footer{background:var(--ink);color:#8b95a6;padding:34px 0;font-size:14px} +.footer b{color:var(--cyan)} + +/* адаптив */ +@media (max-width:880px){ + .hero h1{font-size:40px} + .h2{font-size:30px} + .topics{grid-template-columns:1fr} + .grid{grid-template-columns:1fr} + .vitals{grid-template-columns:repeat(2,1fr)} + .v-extra{grid-column:span 2} + .patient,.mbody{padding-left:22px;padding-right:22px} +} +@media (max-width:520px){ + .hero{padding:64px 0 56px} + .hero h1{font-size:32px} + .section{padding:56px 0} + .hero-stats{gap:24px} +}