Spaces:
Running
Running
| <html lang="en"> | |
| <!-- Mirrored from es-teams-database2025.onrender.com/esteams-ai-pro.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 GMT --> | |
| <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack --> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ES TEAMS AI Chat</title> | |
| <!-- Tailwind CSS --> | |
| <script src="../external.html?link=https://cdn.tailwindcss.com/"></script> | |
| <!-- Google Fonts --> | |
| <link href="../external.html?link=https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Typing Animation */ | |
| .typing { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .typing span { | |
| width: 8px; | |
| height: 8px; | |
| background: white; | |
| margin: 0 2px; | |
| border-radius: 50%; | |
| animation: typing 1.5s infinite; | |
| } | |
| .typing span:nth-child(2) { animation-delay: 0.2s; } | |
| .typing span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typing { | |
| 0%, 100% { opacity: 0.2; } | |
| 50% { opacity: 1; } | |
| } | |
| /* AI Text Animation */ | |
| .ai-text { | |
| opacity: 0; | |
| transform: translateX(100%); | |
| animation: slide-in 1s forwards; | |
| } | |
| @keyframes slide-in { | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white flex items-center justify-center h-screen"> | |
| <div class="w-full max-w-lg bg-gray-800 p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-bold text-center mb-4 ai-text">πͺππππ’π π π§π’ ππ¦ π§πππ π¦ ππ +</h2> | |
| <p class="text-center text-gray-400 mb-6 ai-text">I am an Artificial Intelligence built by ES TEAMS TECH</p> | |
| <div id="chat-box" class="space-y-4 max-h-96 overflow-y-auto p-2 bg-gray-700 rounded-lg"> | |
| <div class="flex items-start space-x-2"> | |
| <div class="bg-blue-600 p-3 rounded-lg text-white"> | |
| Hello! How can I help you today? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mt-4"> | |
| <input id="user-input" type="text" placeholder="Type your message..." | |
| class="flex-1 p-3 rounded-lg bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:outline-none text-white" | |
| oninput="toggleSendButton()"> | |
| <button id="send-button" onclick="sendMessage()" | |
| class="ml-2 bg-gray-600 px-4 py-2 rounded-lg text-white font-bold" disabled> | |
| Send | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| const chatBox = document.getElementById("chat-box"); | |
| const userInput = document.getElementById("user-input"); | |
| const sendButton = document.getElementById("send-button"); | |
| function toggleSendButton() { | |
| if (userInput.value.trim() === "") { | |
| sendButton.disabled = true; | |
| sendButton.classList.add("bg-gray-600"); | |
| sendButton.classList.remove("bg-blue-600", "hover:bg-blue-700"); | |
| } else { | |
| sendButton.disabled = false; | |
| sendButton.classList.remove("bg-gray-600"); | |
| sendButton.classList.add("bg-blue-600", "hover:bg-blue-700"); | |
| } | |
| } | |
| async function sendMessage() { | |
| const query = userInput.value.trim(); | |
| if (!query) return; | |
| addMessage(query, "user"); | |
| userInput.value = ""; | |
| toggleSendButton(); | |
| const typingElement = addTypingAnimation(); | |
| try { | |
| let responseMessage = ""; | |
| if (query.startsWith(".play ")) { | |
| const song = query.replace(".play ", "").trim(); | |
| const audioResponse = await fetch(`https://api.davidcyriltech.my.id/download/ytmp3?url=${encodeURIComponent(song)}`); | |
| const audioData = await audioResponse.json(); | |
| localStorage.setItem("audio", audioData.download_url); | |
| responseMessage = `<button onclick="playAudio()" class="bg-blue-500 text-white px-4 py-2 rounded">βΆ Play</button>`; | |
| } else if (query.startsWith(".video ")) { | |
| const video = query.replace(".video ", "").trim(); | |
| const videoResponse = await fetch(`https://api.davidcyriltech.my.id/download/ytmp4?url=${encodeURIComponent(video)}`); | |
| const videoData = await videoResponse.json(); | |
| localStorage.setItem("video", videoData.download_url); | |
| responseMessage = `<button onclick="playVideo()" class="bg-blue-500 text-white px-4 py-2 rounded">βΆ Play Video</button>`; | |
| } else if (query.startsWith(".wallpaper ")) { | |
| const searchTerm = query.replace(".wallpaper ", "").trim(); | |
| const wallpaperResponse = await fetch(`https://api.davidcyriltech.my.id/search/wallpaper?text=${encodeURIComponent(searchTerm)}`); | |
| const wallpaperData = await wallpaperResponse.json(); | |
| responseMessage = `<img src="${wallpaperData.url}" alt="Wallpaper" class="w-full h-auto rounded-lg"/>`; | |
| } else if (query.startsWith(".url ")) { | |
| const urlToShorten = query.replace(".url ", "").trim(); | |
| const tinyUrlResponse = await fetch(`https://api.davidcyriltech.my.id/tinyurl?url=${encodeURIComponent(urlToShorten)}`); | |
| const tinyUrlData = await tinyUrlResponse.json(); | |
| responseMessage = `Here is your shortened URL: <a href="${tinyUrlData.shortened_url}" target="_blank" class="text-blue-400">${tinyUrlData.shortened_url}</a>`; | |
| } else { | |
| const apiUrl = `https://api.davidcyriltech.my.id/ai/chatbot?query=${encodeURIComponent(query)}`; | |
| const response = await fetch(apiUrl); | |
| const jsonData = await response.json(); | |
| responseMessage = jsonData.result || "Sorry, I couldn't process your request."; | |
| } | |
| removeTypingAnimation(typingElement); | |
| addMessage(responseMessage, "ai"); | |
| } catch (error) { | |
| console.error("Error fetching API response:", error); | |
| removeTypingAnimation(typingElement); | |
| addMessage("An error occurred. Please try again later.", "ai"); | |
| } | |
| } | |
| function addMessage(text, sender) { | |
| const messageDiv = document.createElement("div"); | |
| messageDiv.classList.add("flex", "items-start", "space-x-2"); | |
| if (sender === "ai") { | |
| messageDiv.innerHTML = `<div class="bg-blue-600 p-3 rounded-lg text-white">${text}</div>`; | |
| } else { | |
| messageDiv.classList.add("justify-end"); | |
| messageDiv.innerHTML = `<div class="bg-gray-500 p-3 rounded-lg text-white">${text}</div>`; | |
| } | |
| chatBox.appendChild(messageDiv); | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| } | |
| function addTypingAnimation() { | |
| const typingDiv = document.createElement("div"); | |
| typingDiv.classList.add("typing", "space-x-1", "ml-2"); | |
| for (let i = 0; i < 3; i++) { | |
| const dot = document.createElement("span"); | |
| dot.classList.add("bg-white", "w-2", "h-2", "rounded-full"); | |
| typingDiv.appendChild(dot); | |
| } | |
| chatBox.appendChild(typingDiv); | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| return typingDiv; | |
| } | |
| function removeTypingAnimation(element) { | |
| if (element) element.remove(); | |
| } | |
| function playAudio() { | |
| const audioUrl = localStorage.getItem("audio"); | |
| if (audioUrl) new Audio(audioUrl).play(); | |
| } | |
| function playVideo() { | |
| const videoUrl = localStorage.getItem("video"); | |
| window.open(videoUrl, "_blank"); | |
| } | |
| </script> | |
| </body> | |
| <!-- Mirrored from es-teams-database2025.onrender.com/esteams-ai-pro.html by HTTrack Website Copier/3.x [XR&CO'2017], Fri, 14 Feb 2025 22:35:19 GMT --> | |
| </html> |