Обратная связь <div id="chat-widget" style="position:fixed; bottom:20px; right:20px; z-index:1000;"> <button id="chat-toggle" class="btn btn-primary rounded-circle shadow" style="width:60px;height:60px;font-size:24px;">💬</button> <div id="chat-box" style="display:none; position:fixed; bottom:90px; right:20px; width:320px; max-height:450px; background:white; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.2); overflow:hidden;"> <div style="background:#0d6efd; color:white; padding:12px; font-weight:600;">Онлайн-чат</div> <div id="chat-setup" style="padding:12px;"> <input type="text" id="chat-name" class="form-control form-control-sm mb-2" placeholder="Ваше имя"> <input type="text" id="chat-phone" class="form-control form-control-sm mb-2" placeholder="+998901234567"> <button id="chat-start-btn" class="btn btn-primary btn-sm w-100">Начать чат</button> </div> <div id="chat-messages" style="display:none; padding:12px; height:280px; overflow-y:auto;"></div> <div id="chat-input-area" style="display:none; padding:8px; border-top:1px solid #eee;"> <div class="input-group input-group-sm"> <input type="text" id="chat-input" class="form-control" placeholder="Сообщение..."> <button id="chat-send-btn" class="btn btn-primary">➤</button> </div> </div> </div> </div> <script> document.getElementById('chat-toggle').onclick = function() { var box = document.getElementById('chat-box'); box.style.display = box.style.display === 'none' ? 'block' : 'none'; }; document.getElementById('chat-start-btn').onclick = function() { var name = document.getElementById('chat-name').value.trim(); var phone = document.getElementById('chat-phone').value.trim(); if (!name) { alert('Введите имя'); return; } var fd = new FormData(); fd.append('name', name); fd.append('phone', phone); fetch('/chat/start', {method:'POST', body:fd}) .then(r => r.json()) .then(data => { document.getElementById('chat-setup').style.display = 'none'; document.getElementById('chat-messages').style.display = 'block'; document.getElementById('chat-input-area').style.display = 'block'; loadMessages(); setInterval(loadMessages, 4000); }); }; function loadMessages() { fetch('/chat/messages').then(r => r.json()).then(data => { var box = document.getElementById('chat-messages'); box.innerHTML = ''; data.messages.forEach(function(m) { var div = document.createElement('div'); div.style.marginBottom = '8px'; div.style.textAlign = m.sender === 'client' ? 'right' : 'left'; var bubble = document.createElement('span'); bubble.style.display = 'inline-block'; bubble.style.padding = '6px 10px'; bubble.style.borderRadius = '10px'; bubble.style.background = m.sender === 'client' ? '#0d6efd' : '#f1f1f1'; bubble.style.color = m.sender === 'client' ? 'white' : 'black'; bubble.style.maxWidth = '80%'; bubble.style.fontSize = '14px'; bubble.textContent = m.message; div.appendChild(bubble); box.appendChild(div); }); box.scrollTop = box.scrollHeight; }); } document.getElementById('chat-send-btn').onclick = sendChatMessage; document.getElementById('chat-input').addEventListener('keypress', function(e) { if (e.key === 'Enter') sendChatMessage(); }); function sendChatMessage() { var input = document.getElementById('chat-input'); var text = input.value.trim(); if (!text) return; var fd = new FormData(); fd.append('message', text); fetch('/chat/send', {method:'POST', body:fd}).then(function() { input.value = ''; loadMessages(); }); } </script>