Дневник самомонаблюдения, сегментация состояния, красные флаги
This commit is contained in:
parent
db67bca44c
commit
78055f72b7
173
AGENTS.md
Normal file
173
AGENTS.md
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
|
||||||
|
# Vibe42 — учебная песочница для лендингов
|
||||||
|
|
||||||
|
Workspace юзера `Amanbayeva_Nazym`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 ТВОЯ РОЛЬ
|
||||||
|
|
||||||
|
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
|
||||||
|
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/Amanbayeva_Nazym/<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/Amanbayeva_Nazym/<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/Amanbayeva_Nazym`)** — это папка-контейнер юзера, не репозиторий.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ ВСЕГДА работай через `./new-project`
|
||||||
|
|
||||||
|
Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd /workspaces/Amanbayeva_Nazym
|
||||||
|
./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/Amanbayeva_Nazym
|
||||||
|
- Pages (живые лендинги): https://pages.git.vibe42.kz/Amanbayeva_Nazym/<repo>/
|
||||||
|
- Креды уже в `/workspaces/Amanbayeva_Nazym/.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`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.
|
||||||
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
|
||||||
541
index.html
Normal file
541
index.html
Normal file
@ -0,0 +1,541 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>ПульсоMonitor — дистанционный мониторинг пациентов с ХОБЛ</title>
|
||||||
|
<meta name="description" content="Сервис дистанционного мониторинга пациентов с ХОБЛ для медицинского персонала. Дневник самомонаблюдения, сегментация состояния, красные флаги.">
|
||||||
|
<style>
|
||||||
|
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--gray-200:#E4E8EE;--green:#16C784;--green-50:#E6F9F0;--amber:#F5A623;--amber-50:#FDF3E2;--red:#EA3943;--red-50:#FCEAEC}
|
||||||
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||||||
|
img{max-width:100%;display:block}
|
||||||
|
a{color:inherit}
|
||||||
|
.container{max-width:1140px;margin:0 auto;padding:0 24px}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-100)}
|
||||||
|
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
|
||||||
|
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;text-decoration:none;color:var(--ink)}
|
||||||
|
.logo-mark{width:34px;height:34px;border-radius:9px;background:var(--ink);display:grid;place-items:center;color:var(--cyan);font-size:18px}
|
||||||
|
.nav{display:flex;gap:26px}
|
||||||
|
.nav a{text-decoration:none;color:var(--gray-500);font-size:15px;font-weight:500}
|
||||||
|
.nav a:hover{color:var(--ink)}
|
||||||
|
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:13px 26px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-size:16px;font-family:inherit;transition:background .15s,transform .1s}
|
||||||
|
.btn:hover{background:#1bf0ff}
|
||||||
|
.btn:active{transform:translateY(1px)}
|
||||||
|
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:11px 24px}
|
||||||
|
.btn-ghost:hover{background:var(--ink);color:var(--white)}
|
||||||
|
.header-cta{display:flex;gap:12px;align-items:center}
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
|
||||||
|
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 80% -10%,rgba(0,229,255,.18),transparent 60%),radial-gradient(600px 400px at 0% 100%,rgba(0,229,255,.08),transparent 60%);pointer-events:none}
|
||||||
|
.hero .container{position:relative;padding:84px 24px 96px}
|
||||||
|
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,229,255,.1);color:var(--cyan);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:24px;border:1px solid rgba(0,229,255,.25)}
|
||||||
|
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
|
||||||
|
.hero h1{font-size:54px;font-weight:800;line-height:1.05;margin-bottom:22px;letter-spacing:-.02em}
|
||||||
|
.hero h1 .accent{color:var(--cyan)}
|
||||||
|
.hero p.lead{font-size:20px;color:#9aa3b2;max-width:560px;margin-bottom:32px}
|
||||||
|
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
|
||||||
|
.hero-trust{display:flex;gap:24px;flex-wrap:wrap;color:#9aa3b2;font-size:14px}
|
||||||
|
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
|
||||||
|
|
||||||
|
/* Device mockup */
|
||||||
|
.device{background:#1a1f2a;border:1px solid #2a3140;border-radius:24px;padding:20px;box-shadow:0 40px 80px -20px rgba(0,0,0,.6)}
|
||||||
|
.device-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
|
||||||
|
.device-title{font-size:14px;font-weight:600;color:#cfd6e0}
|
||||||
|
.device-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,199,132,.18)}
|
||||||
|
.device-status{font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;margin-bottom:14px;display:inline-block}
|
||||||
|
.device-status.yellow{background:var(--amber-50);color:#9a6a00}
|
||||||
|
.device-status.green{background:var(--green-50);color:#0c7a4f}
|
||||||
|
.metric-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:#11151d;border-radius:12px;margin-bottom:9px}
|
||||||
|
.metric-label{font-size:13px;color:#9aa3b2;display:flex;align-items:center;gap:10px}
|
||||||
|
.metric-val{font-size:21px;font-weight:800}
|
||||||
|
.metric-val.ok{color:var(--green)}
|
||||||
|
.metric-val.warn{color:var(--amber)}
|
||||||
|
.metric-unit{font-size:13px;color:#9aa3b2;font-weight:500;margin-left:2px}
|
||||||
|
.spark{display:flex;align-items:flex-end;gap:3px;height:24px}
|
||||||
|
.spark i{width:4px;background:var(--cyan);border-radius:2px;display:block;opacity:.8}
|
||||||
|
|
||||||
|
/* Sections */
|
||||||
|
.section{padding:84px 0}
|
||||||
|
.section-head{text-align:center;max-width:700px;margin:0 auto 52px}
|
||||||
|
.section-head .eyebrow{margin-bottom:18px}
|
||||||
|
.section h2{font-size:36px;font-weight:700;line-height:1.15;margin-bottom:16px;letter-spacing:-.01em}
|
||||||
|
.section-head p{color:var(--gray-500);font-size:18px}
|
||||||
|
.bg-light{background:var(--gray-100)}
|
||||||
|
|
||||||
|
/* Features */
|
||||||
|
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
|
||||||
|
.feature{background:var(--white);border:1px solid var(--gray-200);border-radius:16px;padding:28px}
|
||||||
|
.feature .ic{width:48px;height:48px;border-radius:12px;background:var(--cyan-50);display:grid;place-items:center;font-size:24px;margin-bottom:18px}
|
||||||
|
.feature h3{font-size:18px;font-weight:700;margin-bottom:8px}
|
||||||
|
.feature p{font-size:15px;color:var(--gray-500)}
|
||||||
|
|
||||||
|
/* Diary */
|
||||||
|
.diary-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:start}
|
||||||
|
.diary-card{background:var(--white);border:1px solid var(--gray-200);border-radius:16px;padding:28px}
|
||||||
|
.diary-card h3{font-size:18px;font-weight:700;margin-bottom:6px}
|
||||||
|
.diary-card .sub{font-size:14px;color:var(--gray-500);margin-bottom:18px}
|
||||||
|
.diary-table{width:100%;border-collapse:collapse;font-size:15px}
|
||||||
|
.diary-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);font-weight:700;padding:0 0 10px;border-bottom:1px solid var(--gray-100)}
|
||||||
|
.diary-table td{padding:13px 8px 13px 0;border-bottom:1px solid var(--gray-100);vertical-align:middle}
|
||||||
|
.diary-table tr:last-child td{border-bottom:none}
|
||||||
|
.diary-table .vital{font-weight:700}
|
||||||
|
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px}
|
||||||
|
.tag.g{background:var(--green-50);color:#0c7a4f}
|
||||||
|
.tag.y{background:var(--amber-50);color:#9a6a00}
|
||||||
|
.pill{font-size:13px;background:var(--gray-100);padding:4px 10px;border-radius:6px;color:var(--ink);font-weight:600}
|
||||||
|
.cat-list{margin-top:6px}
|
||||||
|
.cat-q{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--gray-100);font-size:15px}
|
||||||
|
.cat-q:last-child{border-bottom:none}
|
||||||
|
.cat-q .n{flex:0 0 24px;height:24px;border-radius:50%;background:var(--cyan-50);color:var(--ink);font-weight:700;font-size:12px;display:grid;place-items:center;margin-top:1px}
|
||||||
|
.cat-q .txt{color:var(--gray-500)}
|
||||||
|
.cat-score{margin-top:16px;padding:14px;background:var(--amber-50);border-radius:12px;font-size:14px;color:#7a5300;font-weight:600}
|
||||||
|
.drug{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--gray-100)}
|
||||||
|
.drug:last-child{border-bottom:none}
|
||||||
|
.drug-name{font-weight:600;font-size:15px}
|
||||||
|
.drug-time{font-size:13px;color:var(--gray-500)}
|
||||||
|
.drug-state{font-size:12px;font-weight:700;padding:4px 9px;border-radius:6px}
|
||||||
|
.drug-state.ok{background:var(--green-50);color:#0c7a4f}
|
||||||
|
.drug-state.miss{background:var(--red-50);color:#a51d26}
|
||||||
|
|
||||||
|
/* Zones */
|
||||||
|
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
|
||||||
|
.zone{border-radius:16px;padding:28px;border:1px solid}
|
||||||
|
.zone.g{background:var(--green-50);border-color:#bdebd2}
|
||||||
|
.zone.y{background:var(--amber-50);border-color:#f6dca6}
|
||||||
|
.zone.r{background:var(--red-50);border-color:#f3c2c6}
|
||||||
|
.zone .badge{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:5px 11px;border-radius:999px;margin-bottom:14px}
|
||||||
|
.zone.g .badge{background:var(--green);color:#fff}
|
||||||
|
.zone.y .badge{background:var(--amber);color:#fff}
|
||||||
|
.zone.r .badge{background:var(--red);color:#fff}
|
||||||
|
.zone h3{font-size:20px;font-weight:700;margin-bottom:12px}
|
||||||
|
.zone .thr{font-size:14px;color:var(--gray-500);margin-bottom:14px;line-height:1.7}
|
||||||
|
.zone .thr b{color:var(--ink)}
|
||||||
|
.zone .act{font-size:14px;background:rgba(255,255,255,.6);border-radius:10px;padding:12px 14px}
|
||||||
|
.zone .act b{display:block;margin-bottom:4px}
|
||||||
|
|
||||||
|
/* Flags */
|
||||||
|
.flags{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
|
||||||
|
.flag{background:var(--white);border:1px solid var(--gray-200);border-radius:16px;padding:26px;border-left:5px solid var(--red)}
|
||||||
|
.flag h3{font-size:17px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:10px}
|
||||||
|
.flag p{font-size:15px;color:var(--gray-500);margin-bottom:10px}
|
||||||
|
.flag ul{list-style:none}
|
||||||
|
.flag li{font-size:14px;padding:6px 0 6px 22px;position:relative;color:var(--ink)}
|
||||||
|
.flag li::before{content:"→";position:absolute;left:0;color:var(--red);font-weight:800}
|
||||||
|
.flag .call{margin-top:12px;padding:11px 14px;background:var(--red-50);border-radius:10px;font-size:14px;font-weight:700;color:#a51d26}
|
||||||
|
|
||||||
|
/* Steps */
|
||||||
|
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
|
||||||
|
.step{position:relative;padding-left:8px}
|
||||||
|
.step-num{font-size:14px;font-weight:800;color:var(--cyan);background:var(--cyan-50);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px}
|
||||||
|
.step h3{font-size:20px;font-weight:700;margin-bottom:10px}
|
||||||
|
.step p{color:var(--gray-500);font-size:16px}
|
||||||
|
|
||||||
|
/* Roles */
|
||||||
|
.roles{display:grid;grid-template-columns:1fr 1fr;gap:24px}
|
||||||
|
.role{background:var(--white);border:1px solid var(--gray-200);border-radius:16px;padding:32px}
|
||||||
|
.role h3{font-size:20px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px}
|
||||||
|
.role ul{list-style:none}
|
||||||
|
.role li{padding:10px 0 10px 28px;position:relative;color:var(--gray-500);border-top:1px solid var(--gray-100);font-size:15px}
|
||||||
|
.role li::before{content:"✓";position:absolute;left:0;top:11px;color:var(--cyan);font-weight:800}
|
||||||
|
.role li:first-child{border-top:none}
|
||||||
|
|
||||||
|
/* CTA */
|
||||||
|
.cta{background:var(--ink);color:var(--white);border-radius:24px;padding:64px 48px;text-align:center;position:relative;overflow:hidden}
|
||||||
|
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 0%,rgba(0,229,255,.16),transparent 70%)}
|
||||||
|
.cta .container{position:relative;padding:0}
|
||||||
|
.cta h2{font-size:38px;font-weight:800;margin-bottom:14px;letter-spacing:-.01em}
|
||||||
|
.cta p{color:#9aa3b2;font-size:18px;margin-bottom:32px;max-width:560px;margin-left:auto;margin-right:auto}
|
||||||
|
.form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap}
|
||||||
|
.form input{flex:1;min-width:220px;padding:14px 18px;border-radius:8px;border:1px solid #2a3140;background:#11151d;color:var(--white);font-size:16px;font-family:inherit}
|
||||||
|
.form input::placeholder{color:#6b7384}
|
||||||
|
.form input:focus{outline:none;border-color:var(--cyan)}
|
||||||
|
.cta-note{margin-top:18px;color:#6b7384;font-size:13px}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer{padding:48px 0;border-top:1px solid var(--gray-100)}
|
||||||
|
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
|
||||||
|
.footer small{color:var(--gray-500);font-size:14px}
|
||||||
|
.footer-links{display:flex;gap:20px}
|
||||||
|
.footer-links a{color:var(--gray-500);text-decoration:none;font-size:14px}
|
||||||
|
|
||||||
|
@media(max-width:980px){
|
||||||
|
.diary-wrap{grid-template-columns:1fr}
|
||||||
|
.features{grid-template-columns:repeat(2,1fr)}
|
||||||
|
.zones,.flags{grid-template-columns:1fr}
|
||||||
|
.steps{grid-template-columns:1fr}
|
||||||
|
.roles{grid-template-columns:1fr}
|
||||||
|
.nav{display:none}
|
||||||
|
}
|
||||||
|
@media(max-width:640px){
|
||||||
|
.hero-grid{grid-template-columns:1fr;gap:40px}
|
||||||
|
.hero h1{font-size:34px}
|
||||||
|
.section h2,.cta h2{font-size:27px}
|
||||||
|
.section{padding:56px 0}
|
||||||
|
.hero .container{padding:56px 24px 64px}
|
||||||
|
.cta{padding:48px 24px}
|
||||||
|
.features{grid-template-columns:1fr}
|
||||||
|
.btn-ghost{display:none}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<div class="container header-inner">
|
||||||
|
<a class="logo" href="#"><span class="logo-mark">⚭</span>ПульсоMonitor</a>
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="#features">Возможности</a>
|
||||||
|
<a href="#diary">Дневник</a>
|
||||||
|
<a href="#zones">Состояние</a>
|
||||||
|
<a href="#flags">Красные флаги</a>
|
||||||
|
</nav>
|
||||||
|
<div class="header-cta">
|
||||||
|
<a class="btn btn-ghost" href="#cta">Войти</a>
|
||||||
|
<a class="btn" href="#cta">Оставить заявку</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">🫁 Телемедицина · ХОБЛ</span>
|
||||||
|
<h1>Дистанционный мониторинг пациентов с <span class="accent">ХОБЛ</span> — под контролем 24/7</h1>
|
||||||
|
<p class="lead">Сервис для медицинского персонала: дневник самомонаблюдения пациента (SpO₂, АД, одышка, ЧСС, ЧДД, анкета CAT, базисные препараты) и автоматическая сегментация состояния по зонам риска.</p>
|
||||||
|
<div class="hero-cta">
|
||||||
|
<a class="btn" href="#cta">Оставить заявку</a>
|
||||||
|
<a class="btn btn-ghost" href="#diary" style="color:var(--white);border-color:#3a4150">Как это работает</a>
|
||||||
|
</div>
|
||||||
|
<div class="hero-trust">
|
||||||
|
<span>✓ Соответствие 152-ФЗ</span>
|
||||||
|
<span>✓ Шифрование данных</span>
|
||||||
|
<span>✓ Анкета CAT и шкала mMRC</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="device" aria-hidden="true">
|
||||||
|
<div class="device-head">
|
||||||
|
<span class="device-title">Пациент · Ахметов Б., 64 года</span>
|
||||||
|
<span class="device-dot" title="На связи"></span>
|
||||||
|
</div>
|
||||||
|
<span class="device-status yellow">⚠ Зона внимания · жёлтая</span>
|
||||||
|
<div class="metric-row">
|
||||||
|
<span class="metric-label">🩸 SpO₂ — сатурация</span>
|
||||||
|
<span><span class="metric-val warn">93</span><span class="metric-unit">%</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-row">
|
||||||
|
<span class="metric-label">🩺 АД — давление</span>
|
||||||
|
<span><span class="metric-val ok">135/85</span><span class="metric-unit">мм рт.ст.</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-row">
|
||||||
|
<span class="metric-label">🌬 ЧДД — дыхание</span>
|
||||||
|
<span><span class="metric-val ok">20</span><span class="metric-unit">/мин</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-row">
|
||||||
|
<span class="metric-label">❤️ ЧСС — пульс</span>
|
||||||
|
<span><span class="metric-val ok">82</span><span class="metric-unit">уд/мин</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="metric-row">
|
||||||
|
<span class="metric-label">😤 Одышка (mMRC)</span>
|
||||||
|
<span><span class="metric-val warn">2</span><span class="metric-unit">балла</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="features" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow">Возможности</span>
|
||||||
|
<h2>Всё, что нужно врачу и пациенту — в одном сервисе</h2>
|
||||||
|
<p>От ежедневного дневника до автоматической оценки состояния и подсказок самопомощи. Обострение видно раньше, чем оно станет госпитализацией.</p>
|
||||||
|
</div>
|
||||||
|
<div class="features">
|
||||||
|
<div class="feature">
|
||||||
|
<div class="ic">📔</div>
|
||||||
|
<h3>Дневник самомонаблюдения</h3>
|
||||||
|
<p>Пациент вносит SpO₂, АД, ЧСС, ЧДД, одышку, отвечает на анкету CAT и отмечает приём базисных препаратов.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="ic">🚦</div>
|
||||||
|
<h3>Сегментация состояния</h3>
|
||||||
|
<p>Система автоматически относит пациента к зелёной, жёлтой или красной зоне по ЧСС, ЧДД и сатурации.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="ic">⏰</div>
|
||||||
|
<h3>Напоминания о препаратах</h3>
|
||||||
|
<p>Если пациент пропустил время приёма базисного препарата — приходит напоминание, а врачу виден пропуск.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<div class="ic">🚩</div>
|
||||||
|
<h3>Красные флаги</h3>
|
||||||
|
<p>При ухудшении пациенту сразу показывается, что можно сделать самостоятельно и когда вызывать скорую.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="diary" class="section bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow">Дневник самомонаблюдения</span>
|
||||||
|
<h2>Что пациент заполняет каждый день</h2>
|
||||||
|
<p>Простая форма на телефоне — 2–3 минуты утром и вечером. Данные сразу уходят врачу и обрабатываются алгоритмом.</p>
|
||||||
|
</div>
|
||||||
|
<div class="diary-wrap">
|
||||||
|
<div class="diary-card">
|
||||||
|
<h3>Показатели и самочувствие</h3>
|
||||||
|
<p class="sub">Запись за сегодня · 08:30</p>
|
||||||
|
<table class="diary-table">
|
||||||
|
<thead><tr><th>Показатель</th><th>Значение</th><th>Оценка</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td>🩸 Сатурация (SpO₂)</td><td class="vital">93 %</td><td><span class="tag y">внимание</span></td></tr>
|
||||||
|
<tr><td>🩺 Артериальное давление</td><td class="vital">135/85 мм рт.ст.</td><td><span class="tag g">норма</span></td></tr>
|
||||||
|
<tr><td>❤️ Частота пульса (ЧСС)</td><td class="vital">82 уд/мин</td><td><span class="tag g">норма</span></td></tr>
|
||||||
|
<tr><td>🌬 Частота дыхания (ЧДД)</td><td class="vital">20 /мин</td><td><span class="tag g">норма</span></td></tr>
|
||||||
|
<tr><td>😤 Одышка (mMRC)</td><td class="vital">2 балла</td><td><span class="tag y">внимание</span></td></tr>
|
||||||
|
<tr><td>📝 Характер мокроты</td><td class="vital">слизистая, скудная</td><td><span class="tag g">норма</span></td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="diary-card">
|
||||||
|
<h3>Анкета CAT (тест оценки ХОБЛ)</h3>
|
||||||
|
<p class="sub">8 вопросов, сумма баллов 0–40</p>
|
||||||
|
<div class="cat-list">
|
||||||
|
<div class="cat-q"><span class="n">1</span><span class="txt">Я никогда не кашляю → 0–5</span></div>
|
||||||
|
<div class="cat-q"><span class="n">2</span><span class="txt">Вообще нет мокроты → 0–5</span></div>
|
||||||
|
<div class="cat-q"><span class="n">3</span><span class="txt">Нет стеснения в груди → 0–5</span></div>
|
||||||
|
<div class="cat-q"><span class="n">4</span><span class="txt">Дышится без труда → 0–5</span></div>
|
||||||
|
<div class="cat-q"><span class="n">5</span><span class="txt">Могу выполнять любую активность → 0–5</span></div>
|
||||||
|
<div class="cat-q"><span class="n">…</span><span class="txt">И ещё 3 вопроса (сон, энергия, влияние на жизнь)</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="cat-score">Итог: 16 баллов — среднее влияние ХОБЛ. Врач получает уведомление при росте на ≥2 балла.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="diary-card" style="grid-column:1/-1">
|
||||||
|
<h3>Базисные препараты и время приёма</h3>
|
||||||
|
<p class="sub">Пациент отмечает приём — система контролирует соблюдение схемы</p>
|
||||||
|
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px">
|
||||||
|
<div class="drug">
|
||||||
|
<div><div class="drug-name">Тиотропий (Спирива)</div><div class="drug-time">Ежедневно, 08:00</div></div>
|
||||||
|
<span class="drug-state ok">принят 08:02</span>
|
||||||
|
</div>
|
||||||
|
<div class="drug">
|
||||||
|
<div><div class="drug-name">Сальметерол/Флутиказон</div><div class="drug-time">Ежедневно, 08:00 и 20:00</div></div>
|
||||||
|
<span class="drug-state miss">пропущен 20:00</span>
|
||||||
|
</div>
|
||||||
|
<div class="drug">
|
||||||
|
<div><div class="drug-name">Рофлумиласт</div><div class="drug-time">Ежедневно, 21:00</div></div>
|
||||||
|
<span class="drug-state ok">принят 21:05</span>
|
||||||
|
</div>
|
||||||
|
<div class="drug">
|
||||||
|
<div><div class="drug-name">Кислородотерапия</div><div class="drug-time">≥15 ч/сут, 2 л/мин</div></div>
|
||||||
|
<span class="drug-state ok">выполнено</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="zones" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow">Сегментация состояния</span>
|
||||||
|
<h2>Автоматическая оценка по зонам риска</h2>
|
||||||
|
<p>Как только пациент отправляет дневник, система сегментирует его состояние по ЧСС, ЧДД и сатурации. Медсестра видит список пациентов, отсортированный по зоне риска.</p>
|
||||||
|
</div>
|
||||||
|
<div class="zones">
|
||||||
|
<div class="zone g">
|
||||||
|
<span class="badge">Зелёная зона</span>
|
||||||
|
<h3>Стабилен</h3>
|
||||||
|
<div class="thr">
|
||||||
|
<b>SpO₂</b> ≥ 95 %<br>
|
||||||
|
<b>ЧДД</b> 12–20 /мин<br>
|
||||||
|
<b>ЧСС</b> 60–100 уд/мин
|
||||||
|
</div>
|
||||||
|
<div class="act"><b>Действия:</b> рутинное наблюдение. Пациент продолжает базисную терапию и дневник.</div>
|
||||||
|
</div>
|
||||||
|
<div class="zone y">
|
||||||
|
<span class="badge">Жёлтая зона</span>
|
||||||
|
<h3>Внимание</h3>
|
||||||
|
<div class="thr">
|
||||||
|
<b>SpO₂</b> 90–94 %<br>
|
||||||
|
<b>ЧДД</b> 21–24 /мин<br>
|
||||||
|
<b>ЧСС</b> 101–110 уд/мин
|
||||||
|
</div>
|
||||||
|
<div class="act"><b>Действия:</b> врач связывается с пациентом в течение дня, корректирует терапию, проверяет adherence.</div>
|
||||||
|
</div>
|
||||||
|
<div class="zone r">
|
||||||
|
<span class="badge">Красная зона</span>
|
||||||
|
<h3>Ухудшение</h3>
|
||||||
|
<div class="thr">
|
||||||
|
<b>SpO₂</b> < 90 %<br>
|
||||||
|
<b>ЧДД</b> > 24 /мин<br>
|
||||||
|
<b>ЧСС</b> > 110 уд/мин
|
||||||
|
</div>
|
||||||
|
<div class="act"><b>Действия:</b> срочное оповещение врача и пациента, активация красных флагов, при необходимости — вызов скорой.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="flags" class="section bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow">Красные флаги</span>
|
||||||
|
<h2>Что делать пациенту при ухудшении</h2>
|
||||||
|
<p>При выходе в жёлтую или красную зону пациенту сразу показывается пошаговая инструкция — что можно сделать самостоятельно и когда срочно обращаться за помощью.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flags">
|
||||||
|
<div class="flag">
|
||||||
|
<h3>🩸 SpO₂ упала ниже 90 %</h3>
|
||||||
|
<p>Сатурация резко снизилась или не поднимается.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Увеличьте поток кислорода по назначенной схеме</li>
|
||||||
|
<li>Примите бронхолитик (сальбутамол) через ДАИ или небулайзер</li>
|
||||||
|
<li>Сядьте, наклонитесь вперёд с опорой на руки</li>
|
||||||
|
<li>Дышите через сжатые губы («диафрагмальное дыхание»)</li>
|
||||||
|
</ul>
|
||||||
|
<div class="call">🚑 Вызывайте скорую, если SpO₂ < 88 % держится > 5 мин или нарастает одышка</div>
|
||||||
|
</div>
|
||||||
|
<div class="flag">
|
||||||
|
<h3>😤 Резкая одышка в покое</h3>
|
||||||
|
<p>Тяжело дышать даже в состоянии покоя, не хватает воздуха.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Примите спасательный бронхолитик (2–4 вдоха сальбутамола)</li>
|
||||||
|
<li>Примите положение ортопноэ — сидя с наклоном вперёд</li>
|
||||||
|
<li>Успокойтесь, дышите медленно и удлинённым выдохом</li>
|
||||||
|
<li>Контролируйте SpO₂ каждые 5 минут</li>
|
||||||
|
</ul>
|
||||||
|
<div class="call">🚑 Скорая, если одышка не уменьшается через 15–20 мин</div>
|
||||||
|
</div>
|
||||||
|
<div class="flag">
|
||||||
|
<h3>🤒 Изменилась мокрота или температура</h3>
|
||||||
|
<p>Мокрота стала гнойной/жёлто-зелёной, вырос объём, появилась лихорадка.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Свяжитесь с лечащим врачом в течение суток</li>
|
||||||
|
<li>Начните резервный курс антибиотика и/или ГКС по плану врача</li>
|
||||||
|
<li>Увеличьте питьевой режим (тёплая жидкость)</li>
|
||||||
|
<li>Усильте контроль SpO₂ и ЧДД до 3–4 раз в день</li>
|
||||||
|
</ul>
|
||||||
|
<div class="call">🚑 Скорая при температуре > 38,5 °C и спутанности сознания</div>
|
||||||
|
</div>
|
||||||
|
<div class="flag">
|
||||||
|
<h3>💊 Пропущен приём препарата</h3>
|
||||||
|
<p>Пациент забыл принять базисный препарат в назначенное время.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Примите препарат сразу, как вспомнили</li>
|
||||||
|
<li>Не удваивайте дозу, если близко следующее время приёма</li>
|
||||||
|
<li>Отметьте пропуск в дневнике — врач увидит</li>
|
||||||
|
<li>Поставьте напоминание в приложении на каждый день</li>
|
||||||
|
</ul>
|
||||||
|
<div class="call">ℹ️ Частые пропуски (≥2 за неделю) — сообщите врачу для коррекции схемы</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow">Как это работает</span>
|
||||||
|
<h2>От подключения пациента до первого предупреждения — один день</h2>
|
||||||
|
</div>
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">1</div>
|
||||||
|
<h3>Подключите пациента</h3>
|
||||||
|
<p>Врач добавляет пациента, задаёт схему базисных препаратов и время приёма, пороги зон и план самопомощи по красным флагам.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">2</div>
|
||||||
|
<h3>Пациент ведёт дневник</h3>
|
||||||
|
<p>2–3 раза в день: SpO₂, АД, ЧСС, ЧДД, одышка, анкета CAT, отметка о приёме препаратов. Напоминания не дают пропустить.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-num">3</div>
|
||||||
|
<h3>Врач мониторит зоны</h3>
|
||||||
|
<p>Панель пациентов отсортирована по зоне риска. При переходе в жёлтую/красную зону — оповещение и подсказки для пациента уже отправлены.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<span class="eyebrow">Для кого</span>
|
||||||
|
<h2>Удобно всей команде</h2>
|
||||||
|
<p>Сервис объединяет пациента, медсестру и лечащего врача в одном контуре наблюдения.</p>
|
||||||
|
</div>
|
||||||
|
<div class="roles">
|
||||||
|
<div class="role">
|
||||||
|
<h3>🏥 Медицинский персонал</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Панель всех пациентов с цветовой сегментацией по зонам риска</li>
|
||||||
|
<li>Сортировка: красные и жёлтые зоны наверху списка</li>
|
||||||
|
<li>Push-оповещения при выходе из зелёной зоны</li>
|
||||||
|
<li>Контроль adherence — видны пропуски приёма препаратов</li>
|
||||||
|
<li>Динамика CAT, mMRC, SpO₂, ЧСС, ЧДД, АД в одном графике</li>
|
||||||
|
<li>Экспорт дневника в медицинскую карту (PDF)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="role">
|
||||||
|
<h3>🧑🤝🧑 Пациент с ХОБЛ</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Дневник с крупными кнопками и подсказками</li>
|
||||||
|
<li>Напоминания о замерах и о приёме базисных препаратов</li>
|
||||||
|
<li>Видит свою зону риска простыми словами — «всё хорошо / внимание / срочно»</li>
|
||||||
|
<li>Красные флаги: что сделать самому при ухудшении</li>
|
||||||
|
<li>Кнопка связи с медсестрой и вызова скорой в один тап</li>
|
||||||
|
<li>Не нужно ездить в поликлинику для рутинного контроля</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="cta" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta">
|
||||||
|
<h2>Подключите мониторинг ХОБЛ в вашей практике</h2>
|
||||||
|
<p>Оставьте контакт — расскажем, как развернуть сервис в вашей клинике или отделении, и проведём демо.</p>
|
||||||
|
<form class="form" id="leadForm">
|
||||||
|
<input type="text" name="name" placeholder="Ваше имя" required>
|
||||||
|
<input type="email" name="email" placeholder="Email для связи" required>
|
||||||
|
<button type="submit" class="btn">Оставить заявку</button>
|
||||||
|
</form>
|
||||||
|
<p class="cta-note">Нажимая кнопку, вы соглашаетесь на обработку персональных данных. Без спама.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container footer-inner">
|
||||||
|
<small>© 2026 ПульсоMonitor · Дистанционный мониторинг ХОБЛ</small>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="#">Политика конфиденциальности</a>
|
||||||
|
<a href="#">152-ФЗ</a>
|
||||||
|
<a href="#">Контакты</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('leadForm').addEventListener('submit',function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
var f=this;var btn=f.querySelector('button');
|
||||||
|
btn.textContent='Отправлено ✓';btn.disabled=true;btn.style.opacity='.7';
|
||||||
|
setTimeout(function(){f.reset();btn.textContent='Оставить заявку';btn.disabled=false;btn.style.opacity='1';},3500);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user