File size: 3,481 Bytes
cef6a45 f4054a2 cef6a45 f4054a2 cef6a45 82bdc34 cef6a45 f4054a2 cef6a45 1cbee68 82bdc34 cef6a45 82bdc34 cef6a45 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Tile Calculator AI</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.chat-container {
height: 80vh;
background-image: radial-gradient(circle at 1px 1px, #e5e7eb 1px, transparent 0);
background-size: 20px 20px;
}
.typing-indicator span {
animation: bounce 1.5s infinite ease-in-out;
}
@keyframes bounce {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-5px); }
}
</style>
</head>
<body class="bg-gray-100">
<div class="max-w-4xl mx-auto p-4">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<!-- Header -->
<div class="bg-indigo-600 text-white p-4 flex justify-between items-center">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
</div>
<div>
<h1 class="font-bold text-xl">Tile Calculator AI</h1>
<p class="text-xs opacity-80">Powered by your models</p>
</div>
</div>
<button id="reset-btn" class="p-2 rounded-full hover:bg-indigo-700 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
</svg>
</button>
</div>
<!-- Chat Area -->
<div class="chat-container p-4 overflow-y-auto" id="chat-area">
<!-- Initial bot message -->
</div>
<!-- Input Area -->
<div class="border-t p-4 bg-white">
<div class="flex gap-2">
<input type="text" id="user-input" placeholder="Type your message..." class="flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<button onclick="sendMessage()" class="bg-indigo-600 text-white rounded-full p-2 hover:bg-indigo-700 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
</svg>
</button>
</div>
</div>
<!-- Recommendations -->
<div class="bg-gray-50 p-4 border-t">
<h3 class="font-semibold text-gray-800 mb-3">Recommended Products</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="recommendations"></div>
</div>
</div>
</div>
<!-- Include chatbot logic -->
<script src="chat.js"></script>
</body>
</html>
|