+ ${patientBlock(c)}
- 📋 Анамнез заболевания и жизни
+ 📋 Анамнез
${c.anamnesis.map(a=>`${a} `).join("")}
-
🩺 Объективный осмотр
- ${examHTML(c.objective)}
+
+ ${vitalsHTML(c.objective.vitals)}
+
Общий осмотр ${c.objective.exam.general}
+
Сердечно-сосудистая система ${c.objective.exam.heart}
+
Дыхательная система ${c.objective.exam.lungs}
+
Прочее ${c.objective.exam.other}
+
-
-
- 🔬 Дополнительные данные
-
-
-
-
-
🧠 Поставьте диагноз и выберите тактику
-
${c.quiz.q}
-
${qOpts}
-
+
+
`;
+ bindSpeak(c, examBody);
+ examBody.querySelector("#goNext").onclick=()=>{ state.stage=1; renderStageTrack(); renderMulti("investigations"); };
+ examBody.scrollTop=0;
+}
-
- ✅ Правильный диагноз
-
-
+/* ---- Универсальный шаг множественного выбора ---- */
+const MULTI_CFG={
+ investigations:{tag:"Шаг 1 из 4", title:"Назначьте обследования", sub:"Выберите необходимые исследования. Не назначайте лишнее — за ошибки снижается балл.", btn:"Подтвердить назначения"},
+ medications:{tag:"Шаг 2 из 4", title:"Назначьте лечение", sub:"Выберите препараты из перечня. Избегайте противопоказанных и неэффективных.", btn:"Подтвердить лечение"},
+ emergency:{tag:"Шаг 4 из 4", title:"Экстренная помощь ⏱", sub:"", btn:"Завершить помощь"}
+};
-
- 🚑 Алгоритм неотложной помощи
- ${algoHTML(c.algorithm)}
-
+function renderMulti(kind){
+ const c=curCase();
+ const cfg=MULTI_CFG[kind];
+ const items = kind==="investigations"?c.investigations : kind==="medications"?c.medications : c.emergency.actions;
+ const ans = state.answers[kind];
+ const submitted = kind==="investigations"?state.answers.submitted.i : kind==="medications"?state.answers.submitted.m : state.answers.submitted.e;
+ const isRadio = false;
-
- 💡 Ключевые моменты и типичные ошибки
- ${kpHTML(c.keypoints)}
-
+ let emergencyTop="";
+ if(kind==="emergency" && !submitted) emergencyTop=`
`;
+
+ examBody.innerHTML=`
+
+
+
${cfg.tag}
+
${cfg.title}
+
${kind==="emergency"?c.emergency.intro:cfg.sub}
+
+ ${emergencyTop}
+
+ ${items.map((it,i)=>{
+ const checked=ans.has(i)?"checked":"";
+ return `
+ ${it.t}
+ `;
+ }).join("")}
+
+
`;
- // озвучка
- const speakBtn=document.getElementById("speakBtn");
- const pAvatar=document.getElementById("pAvatar");
- speakBtn.addEventListener("click",()=>toggleSpeak(c.complaint,speakBtn,pAvatar));
-
- // квиз
- const opts=modalBody.querySelectorAll(".quiz-opt");
- const fb=document.getElementById("quizFb");
- opts.forEach(o=>{
- o.addEventListener("click",()=>{
- opts.forEach(x=>x.disabled=true);
- const correct=o.dataset.c==="true";
- if(correct){o.classList.add("correct")}else{o.classList.add("wrong");
- // подсветить верный
- opts.forEach(x=>{if(x.dataset.c==="true")x.classList.add("correct")});
- }
- fb.className=`quiz-feedback show ${correct?'ok':'no'}`;
- fb.innerHTML=correct?`
Верно! ${c.quiz.feedback.ok}`:`
Не совсем так ${c.quiz.feedback.no}`;
- });
+ const optList=examBody.querySelector("#optList");
+ optList.addEventListener("click",e=>{
+ if(submitted) return;
+ const lbl=e.target.closest(".opt"); if(!lbl) return;
+ const i=+lbl.dataset.i;
+ if(ans.has(i)){ ans.delete(i); lbl.querySelector("input").checked=false; }
+ else { ans.add(i); lbl.querySelector("input").checked=true; }
});
- 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;
+ const actBtn=examBody.querySelector("#actBtn");
+ if(submitted){
+ highlightMulti(kind);
+ actBtn.onclick=()=>{
+ if(kind==="investigations"){ state.stage=2; renderStageTrack(); renderMulti("medications"); }
+ else if(kind==="medications"){ state.stage=3; renderStageTrack(); renderDiagnosis(); }
+ else { state.stage=5; renderStageTrack(); renderCaseResult(); }
+ };
+ } else {
+ actBtn.onclick=()=>{
+ if(kind==="investigations") state.answers.submitted.i=true;
+ else if(kind==="medications") state.answers.submitted.m=true;
+ else { state.answers.submitted.e=true; stopTimer(); }
+ renderMulti(kind);
+ if(kind==="emergency"){} // таймер уже не нужен
+ };
}
- 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);
+
+ if(kind==="emergency" && !submitted){ startTimer(c); }
+ if(kind==="emergency" && submitted){ /* таймер снят */ }
+ examBody.scrollTop=0;
}
-/* остановить речь при перерисовке */
-window.addEventListener("beforeunload",()=>{if("speechSynthesis" in window)window.speechSynthesis.cancel()});
+/* ---- Подсветка результата множественного выбора ---- */
+function highlightMulti(kind){
+ const c=curCase();
+ const items = kind==="investigations"?c.investigations : kind==="medications"?c.medications : c.emergency.actions;
+ const ans=state.answers[kind];
+ const labels=examBody.querySelectorAll(".opt");
+ labels.forEach(lbl=>{
+ const i=+lbl.dataset.i; const it=items[i]; const got=ans.has(i);
+ if(it.n && got){ lbl.classList.add("correct"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`
верно `); }
+ else if(!it.n && got){ lbl.classList.add("wrong-pick"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`
лишнее `); }
+ else if(it.n && !got){ lbl.classList.add("missed"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`
пропущено `); }
+ });
+ const sc=multiScore(items,ans);
+ const ss=examBody.querySelector("#stepScore");
+ if(ss) ss.textContent=sc+"%";
+}
-/* старт */
+/* ---- Шаг 3: Диагноз ---- */
+function renderDiagnosis(){
+ const c=curCase();
+ const submitted=state.answers.submitted.d;
+ const ans=state.answers.diagnosis;
+ examBody.innerHTML=`
+
+
+
Шаг 3 из 4
+
Поставьте диагноз
+
Выберите наиболее вероятный диагноз из вариантов.
+
+
+ ${c.diagnosis.options.map((o,i)=>{
+ const checked=ans===i?"checked":"";
+ return `
+ ${o.t}
+ `;
+ }).join("")}
+
+
+
`;
+
+ const optList=examBody.querySelector("#optList");
+ optList.addEventListener("click",e=>{
+ if(submitted) return;
+ const lbl=e.target.closest(".opt"); if(!lbl) return;
+ state.answers.diagnosis=+lbl.dataset.i;
+ optList.querySelectorAll("input").forEach((inp,ii)=>inp.checked=ii===state.answers.diagnosis);
+ });
+
+ const actBtn=examBody.querySelector("#actBtn");
+ if(submitted){
+ highlightDiagnosis();
+ actBtn.onclick=()=>{ state.stage=4; renderStageTrack(); renderMulti("emergency"); };
+ } else {
+ actBtn.onclick=()=>{ if(state.answers.diagnosis===null){ flashChip(); return; } state.answers.submitted.d=true; renderDiagnosis(); };
+ }
+ examBody.scrollTop=0;
+}
+
+function highlightDiagnosis(){
+ const c=curCase();
+ const labels=examBody.querySelectorAll(".opt");
+ labels.forEach(lbl=>{
+ const i=+lbl.dataset.i; const o=c.diagnosis.options[i];
+ if(o.c){ lbl.classList.add("correct"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`
верный диагноз `); }
+ else if(i===state.answers.diagnosis){ lbl.classList.add("wrong-pick"); lbl.querySelector(".opt-text").insertAdjacentHTML("beforeend",`
неверно `); }
+ });
+ const sc = state.answers.diagnosis!==null && c.diagnosis.options[state.answers.diagnosis].c ? 100 : 0;
+ const ss=examBody.querySelector("#stepScore"); if(ss) ss.textContent=sc+"%";
+}
+
+function flashChip(){
+ const chip=examBody.querySelector("#stepChip");
+ if(!chip) return;
+ chip.style.background="var(--red-50)"; chip.style.color="var(--red)";
+ setTimeout(()=>{ chip.style.background=""; chip.style.color=""; },700);
+}
+
+/* ---- Таймер экстренной помощи ---- */
+function startTimer(c){
+ const total=c.emergency.time||60;
+ let left=total;
+ const tw=examBody.querySelector("#timerWrap");
+ if(!tw) return;
+ function tick(){
+ const pct=left/total*100;
+ const color = left<=10 ? "var(--red)" : "var(--cyan)";
+ const danger = left<=10 ? '
осталось мало времени! ' : "";
+ tw.innerHTML=`
+ ${ring(pct,74,7,color,"rgba(255,255,255,.15)",left)}
+
+
⏱ Экстренная помощь
+
Отмечайте действия. Время пошло.${danger}
+
+
`;
+ if(left<=0){
+ stopTimer();
+ if(!state.answers.submitted.e){
+ state.answers.submitted.e=true;
+ state.emergencyAuto=true;
+ renderMulti("emergency");
+ }
+ return;
+ }
+ left--;
+ }
+ tick();
+ timerHandle=setInterval(tick,1000);
+}
+function stopTimer(){ if(timerHandle){ clearInterval(timerHandle); timerHandle=null; } }
+
+/* ---- Подсчёт баллов ---- */
+function multiScore(items,picked){
+ let tp=0,tn=0,fp=0,fn=0;
+ items.forEach((it,i)=>{ const need=it.n, got=picked.has(i);
+ if(need&&got)tp++; else if(need&&!got)fn++; else if(!need&&got)fp++; else tn++; });
+ return Math.round(((tp+tn)/items.length)*100);
+}
+function computeCaseScore(c){
+ const s={
+ investigations:multiScore(c.investigations,state.answers.investigations),
+ medications:multiScore(c.medications,state.answers.medications),
+ diagnosis:(state.answers.diagnosis!==null && c.diagnosis.options[state.answers.diagnosis].c)?100:0,
+ emergency:multiScore(c.emergency.actions,state.answers.emergency)
+ };
+ s.total=Math.round(s.investigations*0.2+s.medications*0.2+s.diagnosis*0.3+s.emergency*0.3);
+ return s;
+}
+
+/* ---- Результат кейса ---- */
+function renderCaseResult(){
+ const c=curCase();
+ const sc=computeCaseScore(c);
+ state.caseScores.push({id:c.id, title:c.title, theme:c.theme, themeLabel:c.themeLabel, badge:c.badge, score:sc.total, breakdown:sc});
+ const grade=gradeFor(sc.total);
+ const col=colorFor(sc.total);
+ examBody.innerHTML=`
+
+
+
+
${ring(sc.total,150,12,col,"var(--gray-100)",`${sc.total}% оценка за кейс `)}
+
${grade.title}
+
${grade.text}
+
+
+ ${breakRow("Обследования",sc.investigations,"var(--blue)")}
+ ${breakRow("Лечение",sc.medications,"var(--purple)")}
+ ${breakRow("Диагноз",sc.diagnosis,"var(--cyan)")}
+ ${breakRow("Экстренная помощь",sc.emergency,"var(--red)")}
+
+
+
📝 Правильный диагноз
+
${c.diagnosis.options.find(o=>o.c).t} ${c.diagnosis.explanation}
+
📋 Протокол МЗ РК
+
${c.protocol} ${c.protocolNote}
+
🔬 Ключевые данные
+
${c.extra}
+
💡 Ключевые моменты и типичные ошибки
+
${c.keyPoints.map(p=>`
${p.t==="good"?"✅":"⚠️"} ${p.x}
`).join("")}
+
+
+
+
`;
+ examBody.querySelector("#actBtn").onclick=nextAfterCase;
+ examBody.scrollTop=0;
+}
+
+function breakRow(name,val,color){
+ return `
`;
+}
+
+function nextLabel(){
+ if(state.mode==="single") return "Завершить";
+ if(state.qIdx
=85) return {title:"Отлично!",text:"Уверенное владение алгоритмом неотложной помощи."};
+ if(pct>=70) return {title:"Хорошо",text:"Хороший уровень, но есть моменты для повторения."};
+ if(pct>=55) return {title:"Удовлетворительно",text:"Базовые навыки есть, но много ошибок — повторите тему."};
+ return {title:"Неудовлетворительно",text:"Алгоритмы требуют серьёзной проработки."};
+}
+function colorFor(pct){
+ if(pct>=85) return "var(--green)";
+ if(pct>=70) return "var(--cyan)";
+ if(pct>=55) return "var(--amber)";
+ return "var(--red)";
+}
+function gradeClass(pct){ return pct>=85?"g5":pct>=70?"g4":pct>=55?"g3":"g2"; }
+
+/* ---- Итоговый экран экзамена ---- */
+function renderFinal(){
+ stopTimer();
+ const scores=state.caseScores;
+ const avg=Math.round(scores.reduce((a,s)=>a+s.score,0)/scores.length);
+ const col=colorFor(avg);
+ const grade=gradeFor(avg);
+ // по темам
+ const themes={};
+ scores.forEach(s=>{ (themes[s.theme]=themes[s.theme]||[]).push(s.score); });
+ const themeRows=Object.entries(themes).map(([k,arr])=>{
+ const t=CASES.find(c=>c.theme===k);
+ return `${Math.round(arr.reduce((a,b)=>a+b,0)/arr.length)}% ${t.themeLabel}
`;
+ }).join("");
+
+ examBody.innerHTML=`
+
+
+
${ring(avg,180,14,col,"var(--gray-100)",`${avg}% `)}
+
Итог экзамена
+
${grade.title}
+
${grade.text} Вы прошли ${scores.length} из ${state.queue.length} кейсов.
+
${themeRows}
+
+ ${scores.map((s,i)=>`
+ ${i+1}
+ ${s.title}
+ ${s.score}%
+
`).join("")}
+
+
+ 🔄 Пройти заново
+ Закрыть
+
+
+
Неотложка · Клинические кейсы для студентов-медиков
-Неотложка · Экзамен для студентов-медиков
+
-
🩺 Симулятор для 6 курса · неотложная помощь
-
Говорящие пациенты.
-
Шесть реалистичных кейсов. Пациент сам рассказывает жалобы — включите звук. Соберите анамнез, оцените состояние, поставьте диагноз и пройдите алгоритм помощи.
+
🩺 Экзамен · 6 курс · по протоколам МЗ РК
+
Говорящие пациенты.
+
Шесть клинических кейсов по алгоритмам клинических протоколов МЗ РК. Пациент сам рассказывает жалобы — включите звук. Вы сами назначаете обследования и лечение, ставите диагноз и оказываете экстренную помощь на время. В конце — оценка в процентах.
6 кейсов
-
3 темы
-
🔊 озвучка
+
4 этапа в кейсе
+
60с на экстренную помощь
+
% итоговая оценка
-
+
-
Три блока неотложной патологии
-
Кейсы сгруппированы по темам. Каждый — самостоятельный сценарий от жалобы до алгоритма.
-
-
-
❤️
-
ОКС и инфаркт
-
STEMI, NSTEMI — дифференциальная диагностика грудной клетки и реперфузия.
-
-
-
🫁
-
ОДН · астма · ХОБЛ
-
Астматический статус, обострение ХОБЛ с гиперкапнической ОДН.
-
-
-
🩸
-
Шок и травма
-
Геморрагический и септический шок — ABCDE, инфузия, вазопрессоры.
-
+
Как устроен экзамен
+
Каждый кейс — это 4 шага решения. За каждый шаг начисляются баллы. Чем точнее выбор, тем выше оценка.
+
+
1
Обследования Выберите необходимые исследования из списка. Не назначайте лишнее.
+
2
Лечение Назначьте препараты из перечня. Избегайте противопоказанных.
+
3
Диагноз Выберите верный диагноз из вариантов.
+
4
Экстренная помощь ⏱ За 60 секунд выберите правильные действия. Время пошло!
@@ -59,7 +49,7 @@
Клинические кейсы
-
Нажмите «Прослушать» — пациент расскажет жалобы голосом. Дальше соберите данные и поставьте диагноз.
+
Решите кейс отдельно или пройдите весь экзамен. Карточки открывают пошаговый режим с оценкой.
Все кейсы
ОКС / инфаркт
@@ -67,23 +57,34 @@
Шок и травма
+
+
+
Готовы проверить себя целиком?
+
Полный экзамен — все 6 кейсов подряд с итоговой оценкой в процентах и разбивкой по темам.
+
+
🏆 Начать полный экзамен
+
-
-
-
-
-
✕
-
+
+
+
+
+ Кейс 1 из 6
+
+
✕ Выйти
+
+
diff --git a/style.css b/style.css
index 33699fd..ef68541 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,7 @@
--green:#16C784;
--green-50:#E7FBF2;
--purple:#8A5BF6;
+ --amber:#FFB020;
--radius:14px;
--radius-lg:20px;
--shadow:0 12px 40px rgba(15,18,24,.10);
@@ -47,17 +48,20 @@ img{max-width:100%}
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}
+.lead{font-size:20px;color:#aeb8c7;max-width:680px;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;
+ text-decoration:none;border:none;cursor:pointer;transition:.18s;font-family:inherit;
}
.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-primary.big{padding:18px 34px;font-size:17px}
.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)}
+.btn-dark{background:var(--ink);color:#fff}
+.btn-dark:hover{background:#000}
.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}
@@ -67,44 +71,36 @@ img{max-width:100%}
.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}
+.sub{color:var(--gray-500);font-size:18px;max-width:700px;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);
+/* шаги экзамена */
+.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
+.step{background:var(--white);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--gray-100);box-shadow:var(--shadow)}
+.step-n{
+ width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--cyan);
+ display:grid;place-items:center;font-weight:800;font-size:18px;margin-bottom:14px;
}
-.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)}
+.step h3{font-size:18px;font-weight:800;margin-bottom:6px}
+.step p{color:var(--gray-500);font-size:14px}
/* фильтры */
.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;
+ padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s;font-family:inherit;
}
.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}
+.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:40px}
.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;
+ padding:26px;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::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.case-card.t-aks::before{background:var(--red)}
.case-card.t-odn::before{background:var(--blue)}
.case-card.t-shock::before{background:var(--orange)}
@@ -122,49 +118,96 @@ img{max-width:100%}
.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}
+.case-note{color:var(--gray-500);font-size:15px;margin-bottom:18px;flex-grow:1}
+.case-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
+.severity{display:flex;gap:3px;align-items:center}
.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;
+.case-btn{
+ background:var(--ink);color:#fff;border:none;border-radius:10px;padding:11px 18px;
+ font-weight:800;font-size:14px;cursor:pointer;font-family:inherit;transition:.15s;
}
-.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}
+.case-btn:hover{background:var(--cyan);color:var(--ink)}
-/* шапка пациента в модале */
+/* CTA экзамен */
+.exam-cta{
+ background:linear-gradient(135deg,var(--ink),#16203a);color:#fff;border-radius:var(--radius-lg);
+ padding:34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
+}
+.exam-cta h3{font-size:24px;font-weight:800;margin-bottom:6px}
+.exam-cta p{color:#aeb8c7;font-size:16px}
+
+/* футер */
+.footer{background:var(--ink);color:#8b95a6;padding:34px 0;font-size:14px}
+.footer b{color:var(--cyan)}
+
+/* ===== ЭКЗАМЕН (overlay) ===== */
+.exam{
+ position:fixed;inset:0;z-index:200;background:var(--gray-100);
+ display:flex;flex-direction:column;overflow:hidden;
+}
+.exam[hidden]{display:none}
+.exam-bar{
+ background:var(--ink);color:#fff;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;
+}
+.exam-bar-l{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
+.exam-progress-label{font-weight:800;font-size:15px;color:var(--cyan)}
+.exam-dots{display:flex;gap:7px}
+.exam-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.2);transition:.2s}
+.exam-dot.done{background:var(--green)}
+.exam-dot.current{background:var(--cyan);transform:scale(1.25)}
+.exam-exit{
+ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;
+ padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:700;
+}
+.exam-exit:hover{background:var(--red);border-color:var(--red)}
+
+/* трек этапов */
+.exam-stage-track{
+ background:#fff;border-bottom:1px solid var(--gray-100);
+ padding:12px 28px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
+}
+.stage-pill{
+ display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
+ font-size:13px;font-weight:700;color:var(--gray-500);background:var(--gray-100);
+}
+.stage-pill .sp-n{
+ width:20px;height:20px;border-radius:50%;background:var(--gray-300);color:#fff;
+ display:grid;place-items:center;font-size:12px;
+}
+.stage-pill.active{background:var(--ink);color:#fff}
+.stage-pill.active .sp-n{background:var(--cyan);color:var(--ink)}
+.stage-pill.done{background:var(--green-50);color:#0c6e48}
+.stage-pill.done .sp-n{background:var(--green)}
+.stage-sep{color:var(--gray-300);font-size:12px}
+
+/* тело */
+.exam-body{flex:1;overflow-y:auto;padding:30px 28px 60px}
+.exam-wrap{max-width:880px;margin:0 auto}
+
+/* шаг пациента */
.patient{
- padding:30px 34px 24px;background:linear-gradient(135deg,var(--ink) 0%,#16203a 100%);
- color:var(--white);position:relative;
+ background:linear-gradient(135deg,var(--ink) 0%,#16203a 100%);color:#fff;border-radius:var(--radius-lg);
+ padding:30px;margin-bottom:20px;position:relative;overflow:hidden;
}
.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;
+ width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.1);
+ display:grid;place-items:center;font-size:42px;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-avatar.is-speaking::before{
+ content:"";position:absolute;inset:-12px;border-radius:50%;
+ border:2px solid rgba(0,229,255,.4);animation:pulse 1.1s ease-out .3s infinite;
+}
+@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.4);opacity:0}}
+.patient-info h2{font-size:23px;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;
@@ -175,22 +218,31 @@ img{max-width:100%}
.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;
+ padding:11px 18px;font-weight:800;cursor:pointer;font-size:14px;white-space:nowrap;transition:.15s;font-family:inherit;
}
.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;
+ padding:18px 20px;font-size:17px;line-height:1.7;margin-top:18px;font-style:italic;color:#1b2740;
}
-/* аккордеон */
-.acc{border:1px solid var(--gray-100);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:var(--white)}
+/* контекстные данные */
+.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
+.ctx-card{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:18px}
+.ctx-card h4{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500);font-weight:700;margin-bottom:10px}
+.ctx-card ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink)}
+.ctx-card li{margin-bottom:5px}
+.vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
+.vital{border-radius:10px;padding:11px;text-align:center;color:#fff}
+.vital b{display:block;font-size:21px;font-weight:800;line-height:1}
+.vital span{font-size:11px;opacity:.92;display:block;margin-top: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);grid-column:span 4}
+.ctx-full{grid-column:span 2}
+
+/* аккордеон (details) */
+.acc{border:1px solid var(--gray-100);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;background:#fff}
.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;
@@ -198,81 +250,149 @@ img{max-width:100%}
.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{padding:18px 20px}
+.acc-body h4{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--gray-500);margin:14px 0 6px;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}
+.acc-body p{margin-bottom:8px;font-size:14.5px}
+.acc-body ul{margin:0;padding-left:18px;font-size:14.5px}
+.acc-body li{margin-bottom:5px}
-/* жизненные показатели */
-.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)}
+/* заголовок шага */
+.step-head{margin-bottom:18px}
+.step-head .step-tag{display:inline-block;background:var(--ink);color:var(--cyan);padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.3px;margin-bottom:10px}
+.step-head h3{font-size:26px;font-weight:800;margin-bottom:6px}
+.step-head p{color:var(--gray-500);font-size:15px}
-/* квиз диагноза */
-.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;
+/* список выбора (чекбоксы) */
+.opt-list{display:grid;gap:10px;margin-bottom:22px}
+.opt{
+ display:flex;align-items:flex-start;gap:13px;background:#fff;border:1.5px solid var(--gray-100);
+ border-radius:12px;padding:15px 16px;cursor:pointer;transition:.15s;user-select:none;
}
-.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;
+.opt:hover{border-color:var(--gray-300)}
+.opt input{display:none}
+.opt-box{
+ width:24px;height:24px;border-radius:7px;border:2px solid var(--gray-300);flex-shrink:0;
+ display:grid;place-items:center;font-weight:800;color:#fff;font-size:14px;transition:.15s;margin-top:1px;
}
-.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)}
+.opt input:checked + .opt-box{background:var(--cyan);border-color:var(--cyan)}
+.opt input:checked + .opt-box::after{content:"✓"}
+.opt-text{font-size:15px;line-height:1.45}
+.opt.is-radio .opt-box{border-radius:50%}
+.opt.is-radio input:checked + .opt-box::after{content:""}
-.keypoints{display:grid;gap:10px}
-.kp{display:flex;gap:12px;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.5}
+/* результат проверки опций (после submit) */
+.opt.correct{border-color:var(--green);background:var(--green-50)}
+.opt.correct .opt-box{background:var(--green);border-color:var(--green)}
+.opt.wrong-pick{border-color:var(--red);background:var(--red-50)}
+.opt.wrong-pick .opt-box{background:var(--red);border-color:var(--red)}
+.opt.wrong-pick .opt-box::after{content:"✕"}
+.opt.missed{border-color:var(--amber);background:#FFF8E8;border-style:dashed}
+.opt-mark{margin-left:auto;font-size:13px;font-weight:800;padding:3px 9px;border-radius:7px;white-space:nowrap}
+.opt-mark.good{background:var(--green);color:#fff}
+.opt-mark.bad{background:var(--red);color:#fff}
+.opt-mark.warn{background:var(--amber);color:#fff}
+
+/* таймер */
+.timer-wrap{
+ background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:24px 26px;margin-bottom:20px;
+ display:flex;align-items:center;gap:22px;flex-wrap:wrap;
+}
+.timer-ring{position:relative;width:74px;height:74px;flex-shrink:0}
+.timer-ring svg{transform:rotate(-90deg)}
+.timer-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;line-height:1;color:var(--ink)}
+.timer-wrap .timer-num{color:#fff;font-size:24px}
+.score-ring .timer-num{font-size:40px}
+.score-ring .timer-num span{font-size:12px;font-weight:600;opacity:.7;margin-top:5px}
+.final-score .timer-num{font-size:54px}
+.timer-info{flex-grow:1}
+.timer-info h4{font-size:17px;font-weight:800;margin-bottom:4px}
+.timer-info p{color:#aeb8c7;font-size:14px}
+.timer-info .danger{color:var(--red);font-weight:800}
+.timer-bar{height:8px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden;margin-top:10px;width:100%}
+.timer-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width 1s linear;border-radius:999px}
+.timer-bar i.low{background:var(--red)}
+
+/* футер шага / навигация */
+.step-foot{
+ position:sticky;bottom:0;background:rgba(242,244,247,.96);backdrop-filter:blur(6px);
+ border-top:1px solid var(--gray-100);padding:16px 0;margin-top:8px;
+ display:flex;align-items:center;justify-content:space-between;gap:14px;
+}
+.step-foot .score-chip{
+ background:#fff;border:1px solid var(--gray-100);border-radius:999px;padding:8px 16px;
+ font-weight:800;font-size:14px;
+}
+.step-foot .score-chip b{color:var(--ink)}
+
+/* результат кейса */
+.result{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:30px}
+.result-head{text-align:center;margin-bottom:24px}
+.score-ring{position:relative;width:150px;height:150px;margin:0 auto 16px}
+.score-ring svg{transform:rotate(-90deg)}
+.result-head h3{font-size:22px;font-weight:800}
+.verdict{font-size:15px;color:var(--gray-500);margin-top:4px}
+
+.breakdown{display:grid;gap:10px;margin:22px 0}
+.bd-row{display:flex;align-items:center;gap:14px}
+.bd-name{width:170px;font-size:14px;font-weight:700;flex-shrink:0}
+.bd-track{flex-grow:1;height:12px;background:var(--gray-100);border-radius:999px;overflow:hidden}
+.bd-track i{display:block;height:100%;border-radius:999px;transition:width .8s ease}
+.bd-val{width:54px;text-align:right;font-weight:800;font-size:14px}
+
+/* разбор */
+.review{margin-top:8px}
+.review h4{font-size:15px;font-weight:800;margin:18px 0 10px;display:flex;align-items:center;gap:8px}
+.review-block{
+ background:var(--gray-100);border-radius:12px;padding:14px 16px;margin-bottom:8px;font-size:14px;line-height:1.55;
+}
+.review-block b{display:block;margin-bottom:3px}
+.keypoints{display:grid;gap:8px;margin-top:6px}
+.kp{display:flex;gap:10px;padding:11px 14px;border-radius:10px;font-size:13.5px;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}
+.kp-ico{font-size:16px;flex-shrink:0}
-/* футер */
-.footer{background:var(--ink);color:#8b95a6;padding:34px 0;font-size:14px}
-.footer b{color:var(--cyan)}
+/* итоговый экран экзамена */
+.final{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:36px;max-width:760px;margin:0 auto;text-align:center}
+.final-score{position:relative;width:180px;height:180px;margin:0 auto 20px}
+.final-score svg{transform:rotate(-90deg)}
+.final h2{font-size:28px;font-weight:800;margin-bottom:6px}
+.final .grade{font-size:18px;font-weight:800;margin-bottom:6px}
+.final .grade.g5{color:var(--green)}
+.final .grade.g4{color:var(--cyan)}
+.final .grade.g3{color:var(--amber)}
+.final .grade.g2{color:var(--red)}
+.final p.sub{color:var(--gray-500);font-size:15px;margin-bottom:22px}
+.final-cases{display:grid;gap:8px;text-align:left;margin-bottom:24px}
+.fc-row{display:flex;align-items:center;gap:12px;background:var(--gray-100);border-radius:10px;padding:10px 14px;font-size:14px}
+.fc-row .fc-badge{font-size:11px;padding:3px 8px;border-radius:999px;font-weight:800}
+.fc-row .fc-name{flex-grow:1;font-weight:700}
+.fc-row .fc-score{font-weight:800;font-size:15px}
+.theme-summary{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
+.ts{background:var(--gray-100);border-radius:10px;padding:10px 16px;text-align:center;min-width:120px}
+.ts b{display:block;font-size:22px;font-weight:800}
+.ts span{font-size:12px;color:var(--gray-500)}
+.final-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* адаптив */
-@media (max-width:880px){
+@media (max-width:900px){
.hero h1{font-size:40px}
.h2{font-size:30px}
- .topics{grid-template-columns:1fr}
+ .steps{grid-template-columns:repeat(2,1fr)}
.grid{grid-template-columns:1fr}
+ .context-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}
+ .v-temp{grid-column:span 2}
+ .exam-bar,.exam-stage-track,.exam-body{padding-left:18px;padding-right:18px}
+ .bd-name{width:120px}
}
-@media (max-width:520px){
+@media (max-width:540px){
.hero{padding:64px 0 56px}
.hero h1{font-size:32px}
.section{padding:56px 0}
- .hero-stats{gap:24px}
+ .hero-stats{gap:22px}
+ .steps{grid-template-columns:1fr}
+ .patient,.result,.final{padding:22px}
+ .stage-pill .sp-label{display:none}
}