diff --git a/mockup.html b/mockup.html index d2140ba..0471a26 100644 --- a/mockup.html +++ b/mockup.html @@ -859,6 +859,37 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei .ret-card:empty{display:none} /* ── HERO TYPEWRITER ── */ .hero-tw-wrap{margin:14px 0 4px;display:flex;align-items:center;gap:7px;min-height:28px} +/* ── HERO CHAT ── */ +.hero-chat{background:rgba(255,255,255,.97);border-radius:18px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.22);margin:14px 0 0;backdrop-filter:blur(12px)} +.hero-chat-hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(159,18,57,.07);border-bottom:1px solid rgba(159,18,57,.12)} +.hero-chat-av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0} +.hero-chat-name{font-size:13px;font-weight:800;color:#1f2937;line-height:1.2} +.hero-chat-status{display:flex;align-items:center;gap:4px;font-size:11px;color:#6b7280} +.hero-chat-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block;animation:hcPulse 2s ease infinite} +@keyframes hcPulse{0%,100%{opacity:1}50%{opacity:.5}} +.hero-chat-msgs{padding:12px 12px 8px;display:flex;flex-direction:column;gap:8px;min-height:100px;max-height:240px;overflow-y:auto} +.hc-msg{display:flex;align-items:flex-end;gap:6px;animation:hcIn .3s ease forwards;opacity:0} +@keyframes hcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} +.hc-av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0} +.hc-bubble{background:#f3f4f6;border-radius:16px 16px 16px 4px;padding:9px 13px;font-size:13px;color:#1f2937;line-height:1.5;max-width:85%} +.hc-bubble b{color:#9f1239} +.hc-bubble.user{background:#9f1239;color:#fff;border-radius:16px 16px 4px 16px;margin-left:auto} +.hc-user-msg{justify-content:flex-end} +.hc-user-msg .hc-bubble{background:#9f1239;color:#fff;border-radius:16px 16px 4px 16px} +.hc-typing{display:flex;align-items:flex-end;gap:6px} +.hc-typing-dots{background:#f3f4f6;border-radius:16px 16px 16px 4px;padding:10px 14px;display:flex;gap:4px;align-items:center} +.hc-typing-dots span{width:7px;height:7px;border-radius:50%;background:#9ca3af;animation:hcDot 1.2s ease infinite} +.hc-typing-dots span:nth-child(2){animation-delay:.2s} +.hc-typing-dots span:nth-child(3){animation-delay:.4s} +@keyframes hcDot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}} +.hero-chat-replies{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px solid #f3f4f6} +.hc-reply{padding:6px 12px;border:1.5px solid #e5e7eb;border-radius:20px;font-size:12px;font-weight:600;color:#374151;background:#fff;cursor:pointer;transition:all .15s;white-space:nowrap} +.hc-reply:hover{border-color:#9f1239;color:#9f1239;background:#fff5f5} +.hero-chat-input-row{display:flex;gap:6px;padding:8px 10px;border-top:1px solid #f3f4f6;background:#fafafa} +.hc-text-inp{flex:1;border:1.5px solid #e5e7eb;border-radius:20px;padding:7px 14px;font-size:13px;outline:none;background:#fff;font-family:inherit} +.hc-text-inp:focus{border-color:#9f1239} +.hc-send-btn{background:#9f1239;color:#fff;border:none;border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s} +.hc-send-btn:hover{background:#7f1d2e} .hero-tw-cur{color:rgba(255,255,255,.5);font-size:18px;flex-shrink:0;line-height:1;animation:twBlink .65s step-start infinite} @keyframes twBlink{0%,100%{opacity:1}50%{opacity:0}} .hero-tw-text{font-size:14px;font-weight:600;color:rgba(255,255,255,.82);line-height:1.4} @@ -1107,17 +1138,27 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
Елена — ваш персональный юридический ИИ. Ответ готов сразу — без счетов и переговоров.
-
+ 
';
+ msgs.appendChild(row);
+ // typewrite word by word
+ var bubble = row.querySelector('.hc-bubble');
+ var words = text.split(' ');
+ var wi = 0;
+ function nextWord() {
+ if (wi < words.length) {
+ bubble.textContent += (wi > 0 ? ' ' : '') + words[wi++];
+ msgs.scrollTop = msgs.scrollHeight;
+ setTimeout(nextWord, 55 + Math.random()*30);
+ }
+ }
+ nextWord();
+ } else {
+ row.innerHTML = '