ui: move mic button to right side (next to send), fix hint position

This commit is contained in:
wasrusgen 2026-05-30 12:42:13 +03:00
parent 24c6757d6f
commit d565bc52db

View File

@ -44,7 +44,7 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);displ
.mic.rec{background:#FEF2F2;border-color:#EF4444;color:#EF4444} .mic.rec{background:#FEF2F2;border-color:#EF4444;color:#EF4444}
.mic.rec::after{content:'';position:absolute;inset:-4px;border-radius:14px;border:2px solid #EF4444;animation:micPulse 1.3s ease-out infinite;pointer-events:none} .mic.rec::after{content:'';position:absolute;inset:-4px;border-radius:14px;border:2px solid #EF4444;animation:micPulse 1.3s ease-out infinite;pointer-events:none}
@keyframes micPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.25);opacity:0}} @keyframes micPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.25);opacity:0}}
.mic-hint{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12px;padding:6px 12px;border-radius:8px;white-space:nowrap;display:none;z-index:20} .mic-hint{position:absolute;bottom:56px;right:0;background:var(--ink);color:#fff;font-size:12px;padding:6px 12px;border-radius:8px;white-space:nowrap;display:none;z-index:20}
.mic-hint.show{display:block} .mic-hint.show{display:block}
.build-btn{margin:0 20px 14px;padding:13px;border-radius:12px;background:linear-gradient(135deg,var(--dark),var(--primary));color:#fff;border:none;cursor:pointer;font-family:'Inter';font-weight:700;font-size:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px} .build-btn{margin:0 20px 14px;padding:13px;border-radius:12px;background:linear-gradient(135deg,var(--dark),var(--primary));color:#fff;border:none;cursor:pointer;font-family:'Inter';font-weight:700;font-size:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px}
.build-btn:hover{opacity:.92}.build-btn:disabled{opacity:.5;cursor:default} .build-btn:hover{opacity:.92}.build-btn:disabled{opacity:.5;cursor:default}
@ -100,11 +100,11 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);displ
Построить мою бизнес-модель → Построить мою бизнес-модель →
</button> </button>
<div class="inbar"> <div class="inbar">
<textarea class="inp" id="inp" rows="1" placeholder="Напишите или скажите Елене..." onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMsg()}"></textarea>
<button class="mic" id="micBtn" onclick="toggleMic()" title="Голосовой ввод"> <button class="mic" id="micBtn" onclick="toggleMic()" title="Голосовой ввод">
<div class="mic-hint" id="micHint">Слушаю... говорите</div> <div class="mic-hint" id="micHint">Слушаю... говорите</div>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
</button> </button>
<textarea class="inp" id="inp" rows="1" placeholder="Напишите или скажите Елене..." onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMsg()}"></textarea>
<button class="send" id="sendBtn" onclick="sendMsg()"> <button class="send" id="sendBtn" onclick="sendMsg()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
</button> </button>