92 lines
4.5 KiB
HTML
92 lines
4.5 KiB
HTML
<!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>
|