Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Intergram Clone</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} | |
| 40% {transform: translateY(-20px);} | |
| 60% {transform: translateY(-10px);} | |
| } | |
| .chat-window { | |
| box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16); | |
| transition: all 0.3s ease; | |
| } | |
| .message-bubble { | |
| max-width: 70%; | |
| word-wrap: break-word; | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #999; | |
| margin: 0 2px; | |
| animation: bounce 1.4s infinite ease-in-out; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| .chat-toggle { | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .chat-toggle:hover { | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="fixed bottom-6 right-6 z-50"> | |
| <!-- Chat Toggle Button --> | |
| <div id="chatToggle" class="chat-toggle bg-blue-600 w-14 h-14 rounded-full flex items-center justify-center cursor-pointer text-white"> | |
| <i class="fas fa-comment-dots text-2xl"></i> | |
| </div> | |
| <!-- Chat Window --> | |
| <div id="chatWindow" class="chat-window hidden absolute bottom-20 right-0 w-80 h-[500px] bg-white rounded-lg overflow-hidden flex flex-col"> | |
| <!-- Chat Header --> | |
| <div class="bg-blue-600 text-white p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-blue-600 mr-2"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">Customer Support</h3> | |
| <p class="text-xs opacity-80">We're online</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-white opacity-70 hover:opacity-100"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <button id="closeChat" class="text-white opacity-70 hover:opacity-100"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div id="chatMessages" class="flex-1 p-4 overflow-y-auto bg-gray-50"> | |
| <!-- Initial greeting message --> | |
| <div class="mb-4 flex"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <div> | |
| <div class="message-bubble bg-white p-3 rounded-lg shadow-sm mb-1"> | |
| <p>Hello! 👋 How can we help you today?</p> | |
| </div> | |
| <p class="text-xs text-gray-500">Just now</p> | |
| </div> | |
| </div> | |
| <!-- Typing indicator (hidden by default) --> | |
| <div id="typingIndicator" class="mb-4 flex hidden"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <div> | |
| <div class="message-bubble bg-white p-3 rounded-lg shadow-sm"> | |
| <div class="typing-indicator"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="border-t border-gray-200 p-3 bg-white"> | |
| <div class="flex items-center"> | |
| <input id="messageInput" type="text" placeholder="Type your message..." | |
| class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <button id="sendMessage" class="ml-2 w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">Press Enter to send</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatToggle = document.getElementById('chatToggle'); | |
| const chatWindow = document.getElementById('chatWindow'); | |
| const closeChat = document.getElementById('closeChat'); | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendMessage = document.getElementById('sendMessage'); | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| let isChatOpen = false; | |
| // Toggle chat window | |
| chatToggle.addEventListener('click', function() { | |
| isChatOpen = !isChatOpen; | |
| chatWindow.classList.toggle('hidden'); | |
| chatToggle.innerHTML = isChatOpen | |
| ? '<i class="fas fa-times text-2xl"></i>' | |
| : '<i class="fas fa-comment-dots text-2xl"></i>'; | |
| }); | |
| // Close chat window | |
| closeChat.addEventListener('click', function() { | |
| isChatOpen = false; | |
| chatWindow.classList.add('hidden'); | |
| chatToggle.innerHTML = '<i class="fas fa-comment-dots text-2xl"></i>'; | |
| }); | |
| // Send message | |
| function sendMessageHandler() { | |
| const message = messageInput.value.trim(); | |
| if (message) { | |
| // Add user message | |
| const userMessageDiv = document.createElement('div'); | |
| userMessageDiv.className = 'mb-4 flex justify-end'; | |
| userMessageDiv.innerHTML = ` | |
| <div> | |
| <div class="message-bubble bg-blue-600 text-white p-3 rounded-lg shadow-sm mb-1"> | |
| <p>${message}</p> | |
| </div> | |
| <p class="text-xs text-gray-500 text-right">Just now</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center ml-2"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| `; | |
| chatMessages.appendChild(userMessageDiv); | |
| // Clear input | |
| messageInput.value = ''; | |
| // Show typing indicator | |
| typingIndicator.classList.remove('hidden'); | |
| // Scroll to bottom | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| // Simulate reply after 1-3 seconds | |
| setTimeout(() => { | |
| typingIndicator.classList.add('hidden'); | |
| const replies = [ | |
| "I understand your concern. Let me check that for you.", | |
| "Thanks for reaching out! We'll help you with that.", | |
| "That's a great question! Here's what I found...", | |
| "I appreciate your patience. Here's the information you requested.", | |
| "Let me connect you with the right team to help with this." | |
| ]; | |
| const randomReply = replies[Math.floor(Math.random() * replies.length)]; | |
| const botMessageDiv = document.createElement('div'); | |
| botMessageDiv.className = 'mb-4 flex'; | |
| botMessageDiv.innerHTML = ` | |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <div> | |
| <div class="message-bubble bg-white p-3 rounded-lg shadow-sm mb-1"> | |
| <p>${randomReply}</p> | |
| </div> | |
| <p class="text-xs text-gray-500">Just now</p> | |
| </div> | |
| `; | |
| chatMessages.appendChild(botMessageDiv); | |
| // Scroll to bottom | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| }, 1000 + Math.random() * 2000); | |
| } | |
| } | |
| // Send message on button click | |
| sendMessage.addEventListener('click', sendMessageHandler); | |
| // Send message on Enter key | |
| messageInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessageHandler(); | |
| } | |
| }); | |
| // Initial animation for chat toggle | |
| setTimeout(() => { | |
| chatToggle.classList.add('animate-bounce'); | |
| setTimeout(() => { | |
| chatToggle.classList.remove('animate-bounce'); | |
| }, 2000); | |
| }, 3000); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=micheal012/my-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |