v1: обучающий симулятор неотложных кейсов с говорящими пациентами
This commit is contained in:
parent
eb80179817
commit
9215066a75
173
AGENTS.md
Normal file
173
AGENTS.md
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
|
||||||
|
# Vibe42 — учебная песочница для лендингов
|
||||||
|
|
||||||
|
Workspace юзера `saniya_akpanova_91`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 ТВОЯ РОЛЬ
|
||||||
|
|
||||||
|
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
|
||||||
|
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/saniya_akpanova_91/<repo>/`,
|
||||||
|
2. ощущением «это было легко» — без серверов, БД, токенов, конфигов.
|
||||||
|
|
||||||
|
Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
|
||||||
|
|
||||||
|
1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?»
|
||||||
|
2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
|
||||||
|
- Промо хобби (фотография / музыка / спорт)
|
||||||
|
- Резюме / personal page с контактами
|
||||||
|
- Афиша мероприятия (концерт, день рождения, мастер-класс)
|
||||||
|
- Меню заведения / прайс услуг
|
||||||
|
- Лендинг продукта или будущего проекта (waitlist)
|
||||||
|
3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
|
||||||
|
4. Сразу делай `./new-project <name>` и собирай страницу. Не спрашивай разрешения на каждый шаг.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
|
||||||
|
|
||||||
|
Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
|
||||||
|
|
||||||
|
Скажи: «Давай определимся, я задам 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/<repo>/**
|
||||||
|
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/<repo>/
|
||||||
|
- Креды уже в `/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`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.
|
||||||
508
app.js
Normal file
508
app.js
Normal file
@ -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+=`<span class="sev-dot ${i<n?'on':''}"></span>`;
|
||||||
|
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=`
|
||||||
|
<div class="case-head">
|
||||||
|
<div class="case-avatar">${c.patient.avatar}</div>
|
||||||
|
<div>
|
||||||
|
<h3>${c.title}</h3>
|
||||||
|
<div class="case-sub">${c.patient.name}, ${c.patient.age.split(',')[0]}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="case-complaint">«${c.complaint.length>130?c.complaint.slice(0,130)+'…':c.complaint}»</p>
|
||||||
|
<div class="case-foot">
|
||||||
|
<span class="playhint">▶ Прослушать и разобрать</span>
|
||||||
|
<span class="severity" title="Тяжесть">${sevDots(c.severity)}</span>
|
||||||
|
</div>`;
|
||||||
|
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=`<div class="vital v-temp"><b>${v.temp}</b><span>Температура</span></div>`;
|
||||||
|
return `<div class="vitals">
|
||||||
|
<div class="vital v-hr"><b>${v.hr}</b><span>ЧСС</span></div>
|
||||||
|
<div class="vital v-bp"><b>${v.bp}</b><span>АД</span></div>
|
||||||
|
<div class="vital v-rr"><b>${v.rr}</b><span>ЧДД</span></div>
|
||||||
|
<div class="vital v-spo"><b>${v.spo2}</b><span>SpO₂</span></div>
|
||||||
|
${extras}
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function examHTML(o){
|
||||||
|
return `
|
||||||
|
<h4>Жизненные показатели</h4>
|
||||||
|
${vitalsHTML(o.vitals)}
|
||||||
|
<h4>Общий осмотр</h4><p>${o.general}</p>
|
||||||
|
<h4>Сердечно-сосудистая система</h4><p>${o.heart}</p>
|
||||||
|
<h4>Дыхательная система</h4><p>${o.lungs}</p>
|
||||||
|
<h4>Прочее</h4><p>${o.other}</p>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function algoHTML(a){
|
||||||
|
return `<ol class="algo">${a.map(s=>`<li>${s.s}</li>`).join("")}</ol>`;
|
||||||
|
}
|
||||||
|
function kpHTML(k){
|
||||||
|
return `<div class="keypoints">${k.map(p=>`<div class="kp kp-${p.t==='good'?'good':'bad'}"><span class="kp-ico">${p.t==='good'?'✅':'⚠️'}</span><span>${p.x}</span></div>`).join("")}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCase(c){
|
||||||
|
const qOpts=c.quiz.options.map((o,i)=>`<button class="quiz-opt" data-i="${i}" data-c="${o.c}">${o.t}</button>`).join("");
|
||||||
|
modalBody.innerHTML=`
|
||||||
|
<div class="patient">
|
||||||
|
<div class="patient-top">
|
||||||
|
<div class="patient-avatar" id="pAvatar">${c.patient.avatar}</div>
|
||||||
|
<div class="patient-info">
|
||||||
|
<h2 id="mTitle">${c.title}</h2>
|
||||||
|
<div class="meta">${c.patient.name} · ${c.patient.age} · ${c.patient.ctx}</div>
|
||||||
|
<div class="patient-badges"><span class="badge ${c.badge}">${c.themeLabel}</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="speak-bar">
|
||||||
|
<span class="speak-ico">🔊</span>
|
||||||
|
<span class="speak-text"><b>Жалобы пациента</b><small>Нажмите, чтобы услышать голос</small></span>
|
||||||
|
<button class="speak-btn" id="speakBtn">▶ Прослушать</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mbody">
|
||||||
|
<div class="complaint">«${c.complaint}»</div>
|
||||||
|
|
||||||
|
<details class="acc" open>
|
||||||
|
<summary>📋 Анамнез заболевания и жизни</summary>
|
||||||
|
<div class="acc-body"><ul>${c.anamnesis.map(a=>`<li>${a}</li>`).join("")}</ul></div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="acc" open>
|
||||||
|
<summary>🩺 Объективный осмотр</summary>
|
||||||
|
<div class="acc-body">${examHTML(c.objective)}</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="acc">
|
||||||
|
<summary>🔬 Дополнительные данные</summary>
|
||||||
|
<div class="acc-body"><p>${c.extra.text}</p></div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div class="quiz">
|
||||||
|
<h3>🧠 Поставьте диагноз и выберите тактику</h3>
|
||||||
|
<p class="q-sub">${c.quiz.q}</p>
|
||||||
|
<div class="quiz-opts">${qOpts}</div>
|
||||||
|
<div class="quiz-feedback" id="quizFb"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<details class="acc">
|
||||||
|
<summary>✅ Правильный диагноз</summary>
|
||||||
|
<div class="acc-body"><p>${c.diagnosis}</p></div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="acc">
|
||||||
|
<summary>🚑 Алгоритм неотложной помощи</summary>
|
||||||
|
<div class="acc-body">${algoHTML(c.algorithm)}</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="acc">
|
||||||
|
<summary>💡 Ключевые моменты и типичные ошибки</summary>
|
||||||
|
<div class="acc-body">${kpHTML(c.keypoints)}</div>
|
||||||
|
</details>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
// озвучка
|
||||||
|
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?`<b>Верно!</b>${c.quiz.feedback.ok}`:`<b>Не совсем так</b>${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();
|
||||||
110
design.md
Normal file
110
design.md
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
<!-- vibe42-design-version: v1-2026-06-01 -->
|
||||||
|
# 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
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>Мой проект</title>
|
||||||
|
<style>
|
||||||
|
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||||||
|
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||||||
|
.hero{background:var(--ink);color:var(--white)}
|
||||||
|
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||||||
|
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
|
||||||
|
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||||||
|
.btn:hover{background:#1be5ff}
|
||||||
|
.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
|
||||||
|
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||||||
|
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Заголовок проекта</h1>
|
||||||
|
<p>Подзаголовок — пара предложений о чём это.</p>
|
||||||
|
<a class="btn" href="#section">Начать</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="section" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Секция</h2>
|
||||||
|
<div class="card">Контент карточки.</div>
|
||||||
|
<div class="card">Контент карточки.</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Чем НЕ пользоваться
|
||||||
|
|
||||||
|
- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
|
||||||
|
- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
|
||||||
|
- jQuery — vanilla JS более чем достаточно
|
||||||
|
|
||||||
|
## Чем МОЖНО (если очень надо)
|
||||||
|
|
||||||
|
- **Tailwind через CDN**: `<script src="https://cdn.tailwindcss.com"></script>` — для прототипа OK
|
||||||
|
- **Lottie animations через CDN**
|
||||||
|
- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400`
|
||||||
|
- **Шрифты Google Fonts через `<link>`** в head
|
||||||
91
index.html
Normal file
91
index.html
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>Неотложка · Клинические кейсы для студентов-медиков</title>
|
||||||
|
<meta name="description" content="Обучающий симулятор: говорящие виртуальные пациенты и клинические кейсы по неотложной медицинской помощи для студентов 6 курса.">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="pill">🩺 Симулятор для 6 курса · неотложная помощь</span>
|
||||||
|
<h1>Говорящие пациенты.<br>Клинические кейсы по неотложке.</h1>
|
||||||
|
<p class="lead">Шесть реалистичных кейсов. Пациент сам рассказывает жалобы — включите звук. Соберите анамнез, оцените состояние, поставьте диагноз и пройдите алгоритм помощи.</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a class="btn btn-primary" href="#cases">Открыть кейсы</a>
|
||||||
|
<a class="btn btn-ghost" href="#how">Как это работает</a>
|
||||||
|
</div>
|
||||||
|
<div class="hero-stats">
|
||||||
|
<div><b>6</b><span>кейсов</span></div>
|
||||||
|
<div><b>3</b><span>темы</span></div>
|
||||||
|
<div><b>🔊</b><span>озвучка</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ТЕМЫ -->
|
||||||
|
<section id="how" class="section section-light">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="h2">Три блока неотложной патологии</h2>
|
||||||
|
<p class="sub">Кейсы сгруппированы по темам. Каждый — самостоятельный сценарий от жалобы до алгоритма.</p>
|
||||||
|
<div class="topics">
|
||||||
|
<div class="topic topic-red">
|
||||||
|
<div class="topic-ico">❤️</div>
|
||||||
|
<h3>ОКС и инфаркт</h3>
|
||||||
|
<p>STEMI, NSTEMI — дифференциальная диагностика грудной клетки и реперфузия.</p>
|
||||||
|
</div>
|
||||||
|
<div class="topic topic-blue">
|
||||||
|
<div class="topic-ico">🫁</div>
|
||||||
|
<h3>ОДН · астма · ХОБЛ</h3>
|
||||||
|
<p>Астматический статус, обострение ХОБЛ с гиперкапнической ОДН.</p>
|
||||||
|
</div>
|
||||||
|
<div class="topic topic-orange">
|
||||||
|
<div class="topic-ico">🩸</div>
|
||||||
|
<h3>Шок и травма</h3>
|
||||||
|
<p>Геморрагический и септический шок — ABCDE, инфузия, вазопрессоры.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- КЕЙСЫ -->
|
||||||
|
<section id="cases" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="h2">Клинические кейсы</h2>
|
||||||
|
<p class="sub">Нажмите «Прослушать» — пациент расскажет жалобы голосом. Дальше соберите данные и поставьте диагноз.</p>
|
||||||
|
<div class="filters" id="filters">
|
||||||
|
<button class="filter is-active" data-filter="all">Все кейсы</button>
|
||||||
|
<button class="filter" data-filter="aks">ОКС / инфаркт</button>
|
||||||
|
<button class="filter" data-filter="odn">ОДН / астма / ХОБЛ</button>
|
||||||
|
<button class="filter" data-filter="shock">Шок и травма</button>
|
||||||
|
</div>
|
||||||
|
<div class="grid" id="caseGrid"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p><b>Неотложка</b> — учебный симулятор для студентов-медиков. Материалы носят обучающий характер и не заменяют клинические протоколы.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- МОДАЛЬНОЕ ОКНО КЕЙСА -->
|
||||||
|
<div class="modal" id="modal" hidden>
|
||||||
|
<div class="modal-backdrop" data-close></div>
|
||||||
|
<div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="mTitle">
|
||||||
|
<button class="modal-close" data-close aria-label="Закрыть">✕</button>
|
||||||
|
<div id="modalBody"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
278
style.css
Normal file
278
style.css
Normal file
@ -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}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user