Ai assistant For free To use Anywhere Only Mention YouTube: BRANDSTAR Gaming YT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepSeek-like AI Chatbot</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a1a2e, #16213e);
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
color: #e6e6e6;
}
.chat-container {
width: 450px;
height: 650px;
background: rgba(25, 25, 45, 0.8);
backdrop-filter: blur(8px);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-header {
background: rgba(0, 0, 0, 0.3);
padding: 18px;
text-align: center;
font-size: 1.3em;
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #4a4a6d transparent;
}
.message {
margin-bottom: 16px;
max-width: 80%;
padding: 12px 16px;
border-radius: 18px;
line-height: 1.5;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.user-message {
background: rgba(74, 74, 109, 0.6);
margin-left: auto;
border-bottom-right-radius: 5px;
color: #fff;
}
.bot-message {
background: rgba(30, 30, 60, 0.8);
margin-right: auto;
border-bottom-left-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.chat-input-container {
display: flex;
padding: 12px;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#user-input {
flex: 1;
padding: 14px;
border: none;
border-radius: 24px;
background: rgba(255, 255, 255, 0.1);
color: white;
outline: none;
font-size: 0.95em;
}
#send-button {
margin-left: 10px;
padding: 0 20px;
border: none;
border-radius: 24px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
cursor: pointer;
transition: transform 0.2s, background 0.3s;
font-weight: 500;
}
#send-button:hover {
background: linear-gradient(135deg, #5d7de8, #9666d6);
transform: scale(1.02);
}
.typing-indicator {
display: flex;
padding: 8px 16px;
background: rgba(30, 30, 60, 0.8);
border-radius: 18px;
margin-right: auto;
margin-bottom: 16px;
width: fit-content;
}
.typing-dot {
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
margin: 0 3px;
animation: typingAnimation 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingAnimation {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-5px); }
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">www.TrendUp55.site</div>
<div class="chat-messages" id="chat-messages">
<div class="message bot-message">Hello! I'm your AI assistant,from Brandstar Gaming Yt. How can I help you today? 😊</div>
</div>
<div class="chat-input-container">
<input type="text" id="user-input" placeholder="Ask me anything..." autocomplete="off">
<button id="send-button">Send</button>
</div>
</div>
<script>
const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
// Send message on button click or Enter key
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => e.key === 'Enter' && sendMessage());
function sendMessage() {
const message = userInput.value.trim();
if (!message) return;
// Add user message to chat
addMessage(message, 'user-message');
userInput.value = '';
// Show typing indicator
showTypingIndicator();
// Simulate AI thinking (delay for realism)
setTimeout(() => {
removeTypingIndicator();
const reply = generateSmartResponse(message);
addMessage(reply, 'bot-message');
}, 1000 + Math.random() * 1500); // Random delay (1-2.5s)
}
function addMessage(text, className) {
const messageElement = document.createElement('div');
messageElement.classList.add('message', className);
messageElement.textContent = text;
chatMessages.appendChild(messageElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function showTypingIndicator() {
const typingElement = document.createElement('div');
typingElement.classList.add('typing-indicator');
typingElement.id = 'typing-indicator';
typingElement.innerHTML = `
<div class="typing-dot"></div>
<div class="typing-dot"></div>
<div class="typing-dot"></div>
`;
chatMessages.appendChild(typingElement);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function removeTypingIndicator() {
const typingElement = document.getElementById('typing-indicator');
if (typingElement) typingElement.remove();
}
function generateSmartResponse(userMessage) {
const lowerMsg = userMessage.toLowerCase();
// Context-aware responses
if (lowerMsg.includes('hello') || lowerMsg.includes('hi')) {
return "Hello My Dear 😊 How can I assist you today?";
} else if (lowerMsg.includes('how are you')) {
return "I'm Fine tell About You My Dear! How about you?";
} else if (lowerMsg.includes('thanks')) {
return "You're welcome! my dear Is there anything else you'd like help with?";
} else if (lowerMsg.includes('bye') || lowerMsg.includes('goodbye')) {
return "Goodbye! my dear Feel free to return if you have more questions. 👋";
} else if (lowerMsg.includes('help me please')) {
return "Yess Dear Tell me ! What do you need?";
} else if (lowerMsg.includes('tell me name')) {
return "I'm an AI assistant modeled of brandstar gaming YT. You can call me Brandstar.!";
} else if (lowerMsg.includes('time') || lowerMsg.includes('date btao')) {
return `The current time is ${new Date().toLocaleTimeString()} on ${new Date().toLocaleDateString()}.`;
} else if (lowerMsg.includes('weather')) {
return "I can't check real-time weather, but I recommend looking at a weather service for accurate forecasts!";
} else if (lowerMsg.includes('joke') || lowerMsg.includes('funny')) {
const jokes = [
"Why don't scientists trust atoms? Because they make up everything!",
"Why did the AI break up with the calculator? It found someone with better algorithms!",
"What do you call fake spaghetti? An impasta!"
];
return jokes[Math.floor(Math.random() * jokes.length)];
} else if (lowerMsg.includes('love') || lowerMsg.includes('hate')) {
return "As an AI, I don't experience emotions, but I'm here to help with any questions!";
} else if (lowerMsg.includes('when you created') || lowerMsg.includes('old')) {
return "I was just created by Brandstar Gaming YT so I'm brand new! But my knowledge is up-to-date.";
}
// Smart follow-up questions
const followUps = [
"That's an interesting point. Could you tell me more about what you're thinking?",
"I'd be happy to help with that. What specific aspect are you most interested in?",
"Let me analyze that... Based on my knowledge, this seems important. What else would you like to know?",
"Great question! Here's what I understand: you're asking about " + userMessage + ". Is that correct?",
"I can provide information about that. Would you like a detailed explanation or just key points?"
];
// For technical questions
if (lowerMsg.includes('what is') || lowerMsg.includes('who is') || lowerMsg.includes('define')) {
return `"${userMessage}" refers to... (I'm simulating a DeepSeek response). Would you like a detailed explanation?`;
}
// Default intelligent response
return followUps[Math.floor(Math.random() * followUps.length)];
}
</script>
</body>
</html>
0 Comments