<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Assistant - Nova Money</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#8b5cf6',
}
}
}
}
</script>
<style>
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message-slide-in {
animation: slideIn 0.3s ease-out;
}
.typing-indicator span {
animation: blink 1.4s infinite both;
}
.typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes blink {
0%,
60%,
100% {
opacity: 0.3;
}
30% {
opacity: 1;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f5f9;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
</style>
</head>
<body class="bg-gradient-to-br from-indigo-50 via-white to-purple-50 min-h-screen">
<!-- Header -->
<header class="bg-white border-b border-gray-200 shadow-sm">
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div
class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
</div>
<div>
<h1 class="text-lg font-bold text-gray-900 sm:text-xl">Customer Assistant</h1>
<p class="text-xs text-gray-500 sm:text-sm">Cadastro, CEP e Pagamentos</p>
</div>
</div>
<button id="resetBtn"
class="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:px-4">
<svg class="h-4 w-4 sm:mr-2 sm:inline-block sm:h-5 sm:w-5" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
<span class="hidden sm:inline">Resetar Chat</span>
</button>
</div>
</div>
</header>
<!-- Main Chat Container -->
<main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl">
<!-- Chat Box -->
<div class="overflow-hidden rounded-2xl bg-white shadow-xl">
<!-- Messages Container -->
<div id="messagesContainer"
class="custom-scrollbar h-[calc(100vh-280px)] min-h-[400px] overflow-y-auto p-4 sm:h-[calc(100vh-240px)] sm:p-6">
<!-- Welcome Message -->
<div class="message-slide-in mb-4">
<div class="flex items-start space-x-3">
<div
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600">
<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
<div class="flex-1">
<div
class="rounded-2xl rounded-tl-none bg-gradient-to-br from-indigo-500 to-purple-600 px-4 py-3 shadow-md">
<p class="text-sm font-medium leading-relaxed text-white">
👋 Olá! Sou seu assistente digital.
</p>
<p class="mt-2 text-sm leading-relaxed text-white/95">
Posso ajudar você com:
</p>
<ul class="mt-2 space-y-1 text-sm text-white/95">
<li>📋 Cadastro de clientes</li>
<li>📍 Consulta de endereços por CEP</li>
<li>💳 Informações sobre planos de pagamento</li>
<li>💳 Informações sobre ofertas de checkout</li>
</ul>
<p class="mt-3 text-sm leading-relaxed text-white/90">
Como posso te ajudar hoje?
</p>
</div>
<span class="mt-1 block text-xs text-gray-500">Agora</span>
</div>
</div>
</div>
</div>
<!-- Input Area -->
<div class="border-t border-gray-200 bg-gray-50 p-4">
<form id="chatForm" class="flex items-end space-x-2">
<div class="flex-1">
<textarea id="messageInput" rows="1" placeholder="Digite sua mensagem aqui..."
class="block w-full resize-none rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm shadow-sm transition focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-base"
style="min-height: 44px; max-height: 120px;"></textarea>
</div>
<button type="submit" id="sendBtn"
class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-lg transition hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
</svg>
</button>
</form>
<p class="mt-2 text-center text-xs text-gray-500">
Pressione <kbd class="rounded bg-gray-200 px-1.5 py-0.5 font-mono text-xs">Enter</kbd> para
enviar,
<kbd class="rounded bg-gray-200 px-1.5 py-0.5 font-mono text-xs">Shift + Enter</kbd> para nova
linha
</p>
</div>
</div>
<!-- Status Bar -->
<div class="mt-4 rounded-lg bg-white/50 px-4 py-2 text-center backdrop-blur-sm">
<p class="text-xs text-gray-600">
<span class="inline-block h-2 w-2 rounded-full bg-green-500"></span>
<span class="ml-1">Online e pronto para ajudar</span>
</p>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>
