-
${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}