| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DeepSeek Chatbot</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> |
| <style> |
| .chat-container { |
| height: calc(100vh - 160px); |
| } |
| .message-bubble { |
| max-width: 80%; |
| word-wrap: break-word; |
| } |
| .typing-indicator span { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background-color: #4b5563; |
| animation: bounce 1.5s infinite ease-in-out; |
| } |
| .typing-indicator span:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| .typing-indicator span:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| @keyframes bounce { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-5px); } |
| } |
| #vanta-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.1; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100"> |
| <div id="vanta-bg"></div> |
| |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> |
| |
| <header class="flex items-center justify-between mb-8"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center"> |
| <i data-feather="cpu" class="text-white"></i> |
| </div> |
| <h1 class="text-2xl font-bold text-indigo-400">DeepSeek</h1> |
| </div> |
| <button class="p-2 rounded-full hover:bg-gray-800 transition"> |
| <i data-feather="settings" class="text-gray-400"></i> |
| </button> |
| </header> |
|
|
| |
| <div class="chat-container overflow-y-auto mb-4 rounded-lg bg-gray-800 bg-opacity-50 p-4 shadow-lg border border-gray-700"> |
| |
| <div class="flex justify-start mb-4"> |
| <div class="flex items-start space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center flex-shrink-0"> |
| <i data-feather="cpu" class="text-white w-4 h-4"></i> |
| </div> |
| <div class="message-bubble bg-gray-700 px-4 py-3 rounded-lg rounded-tl-none"> |
| <p class="text-gray-100">Hello! I'm DeepSeek, your AI assistant. How can I help you today?</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex justify-end mb-4"> |
| <div class="message-bubble bg-indigo-600 px-4 py-3 rounded-lg rounded-tr-none max-w-xs"> |
| <p class="text-white">What's the weather like today?</p> |
| </div> |
| </div> |
|
|
| |
| <div class="flex justify-start mb-4"> |
| <div class="flex items-start space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center flex-shrink-0"> |
| <i data-feather="cpu" class="text-white w-4 h-4"></i> |
| </div> |
| <div class="typing-indicator bg-gray-700 px-4 py-3 rounded-lg rounded-tl-none"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex items-center space-x-2 bg-gray-800 rounded-lg p-2 border border-gray-700"> |
| <button class="p-2 rounded-full hover:bg-gray-700 transition"> |
| <i data-feather="plus" class="text-gray-400"></i> |
| </button> |
| <input |
| type="text" |
| placeholder="Type your message..." |
| class="flex-1 bg-transparent border-none focus:outline-none text-gray-100 px-3 py-2" |
| autofocus |
| > |
| <button class="p-2 rounded-full bg-indigo-600 hover:bg-indigo-700 transition"> |
| <i data-feather="send" class="text-white"></i> |
| </button> |
| </div> |
|
|
| |
| <footer class="mt-4 text-center text-gray-500 text-sm"> |
| <p>DeepSeek v1.0 - AI-powered assistant</p> |
| </footer> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| VANTA.WAVES({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x4f46e5, |
| shininess: 52.00, |
| waveHeight: 20.00, |
| waveSpeed: 0.50, |
| zoom: 0.65 |
| }); |
| |
| |
| document.querySelectorAll('.message-bubble').forEach((bubble, index) => { |
| setTimeout(() => { |
| bubble.classList.add('animate-fade-in'); |
| }, index * 200); |
| }); |
| |
| |
| document.querySelector('input').addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| const sendBtn = document.querySelector('button[aria-label="Send"]'); |
| sendBtn.click(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
