From a54c5ea11e2364f238a04ee6157f4c30986e5956 Mon Sep 17 00:00:00 2001 From: Dauren777 Date: Fri, 26 Jun 2026 07:01:17 +0000 Subject: [PATCH] =?UTF-8?q?=D1=84=D0=BE=D1=82=D0=BE/=D0=B2=D0=B8=D0=B4?= =?UTF-8?q?=D0=B5=D0=BE=20=D0=BF=D0=B0=D1=86=D0=B8=D0=B5=D0=BD=D1=82=D0=BE?= =?UTF-8?q?=D0=B2:=20SVG-=D0=BF=D0=BE=D1=80=D1=82=D1=80=D0=B5=D1=82=D1=8B?= =?UTF-8?q?=20(=D1=84=D0=BE=D1=82=D0=BE=20=D0=B2=20=D0=BA=D0=B0=D1=80?= =?UTF-8?q?=D1=82=D0=BE=D1=87=D0=BA=D0=B5=20+=20=D0=B3=D0=BE=D0=B2=D0=BE?= =?UTF-8?q?=D1=80=D1=8F=D1=89=D0=B5=D0=B5=20=D0=B2=D0=B8=D0=B4=D0=B5=D0=BE?= =?UTF-8?q?=20=D1=81=20=D0=BC=D0=B8=D0=BC=D0=B8=D0=BA=D0=BE=D0=B9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.js | 36 ++++++++++++++++++++++++++++++++---- style.css | 19 ++++++++++++++----- 2 files changed, 46 insertions(+), 9 deletions(-) diff --git a/app.js b/app.js index 5e80c13..d944436 100644 --- a/app.js +++ b/app.js @@ -718,7 +718,7 @@ function renderCards(filter="all"){ el.className=`case-card t-${c.theme}`; el.innerHTML=`
-
${c.patient.avatar}
+
${portrait(c.patient)}

${c.title}

${c.patient.name}, ${c.patient.age.split(",")[0]}
@@ -868,10 +868,38 @@ function ring(pct, size, stroke, color, track, num){
${num}
`; } +function portrait(p){ + const ageM=(p.age||"").match(/(\d+)/); const age=ageM?+ageM[1]:40; + const male=/мужчин|муж|мальчик/i.test(p.age||"")||/муж/i.test(p.name||""); + const old=age>=55; + const skin="#e8b894", skinSh="#cf9c75"; + const hair=old?"#cfc8bf":(male?"#2e2018":"#5a3a22"); + const cloth=male?"#33414f":"#7b2d3b"; + const hairEl = male + ? `${old?``:""}` + : ``; + return ` + + + + + + ${hairEl} + + + + + + + + + `; +} + function patientBlock(c){ return `
-
${c.patient.avatar}
+
${portrait(c.patient)}

${c.title}

${c.patient.name} · ${c.patient.age} · ${c.patient.ctx}
@@ -881,7 +909,7 @@ function patientBlock(c){
-
${c.patient.avatar}
+
${portrait(c.patient)}
● ВИДЕО · LIVE 📷 Фото пациента
@@ -906,7 +934,7 @@ function vitalsHTML(v){ } function bindSpeak(c, root){ const btn=root.querySelector("#speakBtn"), - av=root.querySelector(".vp-avatar"), + av=root.querySelector(".vp-portrait"), player=root.querySelector("#vplayer"), subs=root.querySelector("#vpSubs"); if(!btn) return; diff --git a/style.css b/style.css index 10ed6d9..35c4e91 100644 --- a/style.css +++ b/style.css @@ -150,7 +150,8 @@ h1,h2,h3{letter-spacing:-.4px} .case-card.t-odn::before{background:var(--teal)} .case-card.t-shock::before{background:var(--rust)} .case-head{display:flex;align-items:center;gap:15px;margin-bottom:12px} -.case-avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:var(--paper);flex-shrink:0} +.case-avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--paper);flex-shrink:0;overflow:hidden} +.case-avatar .por{width:118%;height:auto;display:block} .case-head h3{font-size:19px;font-weight:800;margin-bottom:2px} .case-head .case-sub{font-size:13.5px;color:var(--gray-500)} .badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase} @@ -263,7 +264,8 @@ h1,h2,h3{letter-spacing:-.4px} /* шаг пациента */ .patient{background:linear-gradient(135deg,var(--navy) 0%,#16203a 100%);color:#fff;border-radius:var(--radius-lg);padding:28px;margin-bottom:18px;position:relative;overflow:hidden} .patient-top{display:flex;align-items:center;gap:18px;margin-bottom:18px} -.patient-avatar{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:40px;flex-shrink:0;position:relative} +.patient-avatar{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0;position:relative;overflow:hidden} +.patient-avatar .por{width:120%;height:auto;display:block} .patient-avatar.is-speaking::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);animation:pulse 1.1s ease-out infinite} .patient-avatar.is-speaking::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(176,141,87,.4);animation:pulse 1.1s ease-out .3s infinite} @keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.4);opacity:0}} @@ -289,9 +291,16 @@ h1,h2,h3{letter-spacing:-.4px} .vplayer.is-speaking .vp-waves i:nth-child(2){animation-delay:.55s} .vplayer.is-speaking .vp-waves i:nth-child(3){animation-delay:1.1s} @keyframes vpwave{0%{transform:scale(.55);opacity:.7}100%{transform:scale(2.3);opacity:0}} -.vp-avatar{font-size:104px;line-height:1;position:relative;z-index:2;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))} -.vplayer.is-speaking .vp-avatar{animation:vptalk .45s ease-in-out infinite alternate} -@keyframes vptalk{0%{transform:scale(1) translateY(0)}100%{transform:scale(1.05) translateY(-4px)}} +.vp-portrait{width:58%;max-width:240px;position:relative;z-index:2;height:auto} +.vp-portrait .por{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))} +.vplayer.is-speaking .vp-portrait{animation:vptalk .45s ease-in-out infinite alternate} +@keyframes vptalk{0%{transform:translateY(0)}100%{transform:translateY(-4px)}} +.por{width:100%;height:auto;display:block} +/* мимика */ +.vplayer.is-speaking .mouth{transform-origin:100px 134px;animation:talk .34s ease-in-out infinite alternate} +@keyframes talk{0%{transform:scaleY(.55)}100%{transform:scaleY(1.9)}} +.eyelid{transform:translateY(-16px);animation:blink 5.5s infinite} +@keyframes blink{0%,90%,100%{transform:translateY(-16px)}93%,96%{transform:translateY(0)}} .vp-live{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;padding:4px 10px;border-radius:6px;z-index:3} .vplayer.is-speaking .vp-live{color:#ff6b6b} .vp-photo{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.45);color:#cfd6e0;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;z-index:3}