135 lines
6.0 KiB
HTML
135 lines
6.0 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="ПУЛЬС — игровой тренажёр клинических кейсов по неотложной помощи: говорящие видео-пациенты, уровни, опыт, достижения и рейтинг. По протоколам МЗ РК.">
|
||
<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>
|
||
|
||
<!-- ИГРОВАЯ ШАПКА -->
|
||
<header class="topbar">
|
||
<div class="container topbar-in">
|
||
<a class="brand" href="#top">🫀 ПУЛЬС<span>Неотложка</span></a>
|
||
<div class="player" id="playerBar"></div>
|
||
<div class="topbar-actions">
|
||
<button class="tbtn" id="btnAchv" title="Достижения">🏅</button>
|
||
<button class="tbtn" id="btnBoard" title="Рейтинг">🏆</button>
|
||
<button class="tbtn" id="btnProfile" title="Профиль">⚙️</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<span class="pill">🎮 Игровой тренажёр · 6 курс · по протоколам МЗ РК</span>
|
||
<h1>Стань профессором<br>неотложной помощи.</h1>
|
||
<p class="lead">Говорящие пациенты, клинические кейсы и экстренная помощь на время. Решай, копи опыт, открывай достижения и поднимайся в рейтинге — от Стажёра до Профессора.</p>
|
||
<div class="hero-actions">
|
||
<button class="btn btn-primary" id="heroStart">▶ Начать игру</button>
|
||
<button class="btn btn-ghost" id="heroFull">🏆 Полный экзамен</button>
|
||
</div>
|
||
<div class="hero-stats" id="heroStats"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- КАРТА ТЕМ -->
|
||
<section id="map" class="section section-light">
|
||
<div class="container">
|
||
<h2 class="h2">Карта прохождения</h2>
|
||
<p class="sub">Три темы неотложной патологии. Открывай кейсы, зарабатывай звёзды и опыт за каждую тему.</p>
|
||
<div class="themes" id="themes"></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 class="exam-cta">
|
||
<div>
|
||
<h3>Готов к большому испытанию?</h3>
|
||
<p>Полный экзамен — все 6 кейсов подряд. Результат попадёт в рейтинг игроков.</p>
|
||
</div>
|
||
<button class="btn btn-primary big" id="startFullExam2">🏆 Полный экзамен</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ДОСТИЖЕНИЯ -->
|
||
<section id="achv" class="section section-light">
|
||
<div class="container">
|
||
<h2 class="h2">Достижения</h2>
|
||
<p class="sub">Открывай бейджи за точность, скорость и мастерство. <span id="achvCount"></span></p>
|
||
<div class="achv-grid" id="achvGrid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- РЕЙТИНГ -->
|
||
<section id="board" class="section">
|
||
<div class="container">
|
||
<h2 class="h2">Рейтинг игроков</h2>
|
||
<p class="sub">Топ результатов полного экзамена. Сохраняется в этом браузере.</p>
|
||
<div class="board" id="boardList"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<p><b>ПУЛЬС · Неотложка</b> — игровой тренажёр для студентов-медиков. Алгоритмы основаны на клинических протоколах диагностики и лечения МЗ РК. Материалы носят обучающий характер.</p>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
|
||
<!-- ЭКЗАМЕН (overlay) -->
|
||
<div class="exam" id="exam" hidden>
|
||
<div class="exam-bar">
|
||
<div class="exam-bar-l">
|
||
<span class="exam-progress-label" id="examProgressLabel">Кейс 1 из 6</span>
|
||
<span class="exam-dots" id="examDots"></span>
|
||
</div>
|
||
<button class="exam-exit" id="examExit">✕ Выйти</button>
|
||
</div>
|
||
<div class="exam-stage-track" id="stageTrack"></div>
|
||
<div class="exam-body" id="examBody"></div>
|
||
</div>
|
||
|
||
<!-- МОДАЛ ПРОФИЛЯ -->
|
||
<div class="modal" id="modalProfile" hidden>
|
||
<div class="modal-backdrop" data-close-p></div>
|
||
<div class="modal-card sm">
|
||
<button class="modal-close" data-close-p>✕</button>
|
||
<div class="mbody">
|
||
<h3 class="pm-title">Профиль игрока</h3>
|
||
<label class="pm-label">Ваше имя</label>
|
||
<input class="pm-input" id="profName" type="text" maxlength="20" placeholder="Например, Алиса">
|
||
<label class="pm-label">Аватар</label>
|
||
<div class="pm-avatars" id="profAvatars"></div>
|
||
<button class="btn btn-primary pm-save" id="profSave">Сохранить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ТОСТЫ -->
|
||
<div class="toasts" id="toasts"></div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|