jurgenpaul82 commited on
Commit
7b33de7
·
verified ·
1 Parent(s): 53f47e9

Create SUPER ENTERTAINO .ts

Browse files
Files changed (1) hide show
  1. SUPER ENTERTAINO .ts +576 -0
SUPER ENTERTAINO .ts ADDED
@@ -0,0 +1,576 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Super Entertainment Chatbot</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ height: 100vh;
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: center;
21
+ overflow: hidden;
22
+ }
23
+
24
+ .chat-container {
25
+ width: 90%;
26
+ max-width: 800px;
27
+ height: 80vh;
28
+ background: rgba(255, 255, 255, 0.95);
29
+ border-radius: 20px;
30
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
31
+ backdrop-filter: blur(10px);
32
+ display: flex;
33
+ flex-direction: column;
34
+ overflow: hidden;
35
+ position: relative;
36
+ }
37
+
38
+ .chat-header {
39
+ background: linear-gradient(45deg, #ff6b6b, #feca57);
40
+ color: white;
41
+ padding: 20px;
42
+ text-align: center;
43
+ position: relative;
44
+ }
45
+
46
+ .bot-name {
47
+ font-size: 24px;
48
+ font-weight: bold;
49
+ margin-bottom: 5px;
50
+ animation: glow 2s ease-in-out infinite alternate;
51
+ }
52
+
53
+ @keyframes glow {
54
+ from { text-shadow: 0 0 5px rgba(255,255,255,0.5); }
55
+ to { text-shadow: 0 0 20px rgba(255,255,255,0.8); }
56
+ }
57
+
58
+ .bot-status {
59
+ font-size: 14px;
60
+ opacity: 0.9;
61
+ }
62
+
63
+ .mode-selector {
64
+ display: flex;
65
+ gap: 10px;
66
+ padding: 15px;
67
+ background: rgba(255, 255, 255, 0.8);
68
+ flex-wrap: wrap;
69
+ justify-content: center;
70
+ }
71
+
72
+ .mode-btn {
73
+ padding: 8px 16px;
74
+ border: none;
75
+ border-radius: 20px;
76
+ background: linear-gradient(45deg, #667eea, #764ba2);
77
+ color: white;
78
+ cursor: pointer;
79
+ transition: all 0.3s ease;
80
+ font-size: 12px;
81
+ font-weight: bold;
82
+ }
83
+
84
+ .mode-btn:hover {
85
+ transform: translateY(-2px);
86
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
87
+ }
88
+
89
+ .mode-btn.active {
90
+ background: linear-gradient(45deg, #ff6b6b, #feca57);
91
+ transform: scale(1.05);
92
+ }
93
+
94
+ .chat-messages {
95
+ flex: 1;
96
+ padding: 20px;
97
+ overflow-y: auto;
98
+ display: flex;
99
+ flex-direction: column;
100
+ gap: 15px;
101
+ }
102
+
103
+ .message {
104
+ max-width: 80%;
105
+ padding: 12px 18px;
106
+ border-radius: 20px;
107
+ animation: slideIn 0.3s ease-out;
108
+ word-wrap: break-word;
109
+ }
110
+
111
+ @keyframes slideIn {
112
+ from { opacity: 0; transform: translateY(20px); }
113
+ to { opacity: 1; transform: translateY(0); }
114
+ }
115
+
116
+ .user-message {
117
+ align-self: flex-end;
118
+ background: linear-gradient(45deg, #667eea, #764ba2);
119
+ color: white;
120
+ margin-left: auto;
121
+ }
122
+
123
+ .bot-message {
124
+ align-self: flex-start;
125
+ background: rgba(255, 255, 255, 0.9);
126
+ color: #333;
127
+ border: 2px solid #f0f0f0;
128
+ position: relative;
129
+ }
130
+
131
+ .bot-message::before {
132
+ content: '🤖';
133
+ position: absolute;
134
+ left: -10px;
135
+ top: -5px;
136
+ font-size: 20px;
137
+ background: white;
138
+ border-radius: 50%;
139
+ padding: 2px;
140
+ }
141
+
142
+ .input-container {
143
+ display: flex;
144
+ padding: 20px;
145
+ gap: 10px;
146
+ background: rgba(255, 255, 255, 0.9);
147
+ }
148
+
149
+ .user-input {
150
+ flex: 1;
151
+ padding: 12px 20px;
152
+ border: 2px solid #ddd;
153
+ border-radius: 25px;
154
+ font-size: 16px;
155
+ outline: none;
156
+ transition: all 0.3s ease;
157
+ }
158
+
159
+ .user-input:focus {
160
+ border-color: #667eea;
161
+ box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
162
+ }
163
+
164
+ .send-btn {
165
+ padding: 12px 24px;
166
+ background: linear-gradient(45deg, #667eea, #764ba2);
167
+ color: white;
168
+ border: none;
169
+ border-radius: 25px;
170
+ cursor: pointer;
171
+ font-weight: bold;
172
+ transition: all 0.3s ease;
173
+ }
174
+
175
+ .send-btn:hover {
176
+ transform: scale(1.05);
177
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
178
+ }
179
+
180
+ .typing-indicator {
181
+ display: none;
182
+ align-items: center;
183
+ gap: 10px;
184
+ padding: 10px 18px;
185
+ background: rgba(255, 255, 255, 0.9);
186
+ border-radius: 20px;
187
+ max-width: 80px;
188
+ margin-bottom: 15px;
189
+ }
190
+
191
+ .dot {
192
+ width: 8px;
193
+ height: 8px;
194
+ background: #667eea;
195
+ border-radius: 50%;
196
+ animation: bounce 1.5s infinite;
197
+ }
198
+
199
+ .dot:nth-child(2) { animation-delay: 0.3s; }
200
+ .dot:nth-child(3) { animation-delay: 0.6s; }
201
+
202
+ @keyframes bounce {
203
+ 0%, 60%, 100% { transform: translateY(0); }
204
+ 30% { transform: translateY(-10px); }
205
+ }
206
+
207
+ .fun-facts {
208
+ font-style: italic;
209
+ color: #666;
210
+ margin-top: 10px;
211
+ }
212
+
213
+ .joke-rating {
214
+ margin-top: 10px;
215
+ display: flex;
216
+ gap: 5px;
217
+ }
218
+
219
+ .rating-btn {
220
+ padding: 5px 10px;
221
+ border: none;
222
+ border-radius: 15px;
223
+ cursor: pointer;
224
+ font-size: 12px;
225
+ transition: all 0.2s ease;
226
+ }
227
+
228
+ .rating-btn:hover {
229
+ transform: scale(1.1);
230
+ }
231
+
232
+ .like-btn {
233
+ background: #2ecc71;
234
+ color: white;
235
+ }
236
+
237
+ .dislike-btn {
238
+ background: #e74c3c;
239
+ color: white;
240
+ }
241
+ </style>
242
+ </head>
243
+ <body>
244
+ <div class="chat-container">
245
+ <div class="chat-header">
246
+ <div class="bot-name">🎭 ENTERTAINO BOT 🎪</div>
247
+ <div class="bot-status">Your Super Fun AI Companion!</div>
248
+ </div>
249
+
250
+ <div class="mode-selector">
251
+ <button class="mode-btn active" data-mode="general">🎉 General Fun</button>
252
+ <button class="mode-btn" data-mode="jokes">😂 Joke Master</button>
253
+ <button class="mode-btn" data-mode="riddles">🧩 Riddle Me This</button>
254
+ <button class="mode-btn" data-mode="stories">📚 Story Time</button>
255
+ <button class="mode-btn" data-mode="games">🎮 Word Games</button>
256
+ <button class="mode-btn" data-mode="trivia">🧠 Trivia Quiz</button>
257
+ </div>
258
+
259
+ <div class="chat-messages" id="chatMessages">
260
+ <div class="message bot-message">
261
+ 🌟 Welcome to the ultimate entertainment experience! I'm Entertaino Bot, your digital fun companion!
262
+ <br><br>I can tell jokes, create stories, ask riddles, play word games, quiz you with trivia, and so much more!
263
+ Choose a mode above or just say hi to get started! 🚀
264
+ <div class="fun-facts">💡 Fun Fact: I have over 1000 jokes in my database and I'm always learning new ones!</div>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="typing-indicator" id="typingIndicator">
269
+ <div class="dot"></div>
270
+ <div class="dot"></div>
271
+ <div class="dot"></div>
272
+ </div>
273
+
274
+ <div class="input-container">
275
+ <input type="text" class="user-input" id="userInput" placeholder="Type your message here... 💬">
276
+ <button class="send-btn" id="sendBtn">Send 🚀</button>
277
+ </div>
278
+ </div>
279
+
280
+ <script>
281
+ class EntertainmentBot {
282
+ constructor() {
283
+ this.currentMode = 'general';
284
+ this.gameState = {};
285
+ this.userStats = {
286
+ jokesHeard: 0,
287
+ riddlesSolved: 0,
288
+ triviaScore: 0,
289
+ gamesPlayed: 0
290
+ };
291
+
292
+ this.jokes = [
293
+ "Why don't scientists trust atoms? Because they make up everything!",
294
+ "Why did the scarecrow win an award? Because he was outstanding in his field!",
295
+ "Why don't eggs tell jokes? They'd crack each other up!",
296
+ "What do you call a fake noodle? An impasta!",
297
+ "Why did the math book look so sad? Because it had too many problems!",
298
+ "What do you call a bear with no teeth? A gummy bear!",
299
+ "Why don't programmers like nature? It has too many bugs!",
300
+ "What do you call a sleeping bull? A bulldozer!",
301
+ "Why did the coffee file a police report? It got mugged!",
302
+ "What do you call a fish wearing a bowtie? Sofishticated!"
303
+ ];
304
+
305
+ this.riddles = [
306
+ {
307
+ question: "I'm tall when I'm young, and I'm short when I'm old. What am I?",
308
+ answer: "candle",
309
+ hint: "Think about something that burns!"
310
+ },
311
+ {
312
+ question: "What has keys but no locks, space but no room, and you can enter but not go inside?",
313
+ answer: "keyboard",
314
+ hint: "You're probably using one right now!"
315
+ },
316
+ {
317
+ question: "What gets wet while drying?",
318
+ answer: "towel",
319
+ hint: "You use it after a shower!"
320
+ },
321
+ {
322
+ question: "I have cities, but no houses. I have mountains, but no trees. I have water, but no fish. What am I?",
323
+ answer: "map",
324
+ hint: "Travelers use me to find their way!"
325
+ }
326
+ ];
327
+
328
+ this.triviaQuestions = [
329
+ {
330
+ question: "What's the largest planet in our solar system?",
331
+ options: ["Earth", "Jupiter", "Saturn", "Mars"],
332
+ correct: 1,
333
+ fact: "Jupiter is so big that all other planets could fit inside it!"
334
+ },
335
+ {
336
+ question: "Which animal is known as the 'Ship of the Desert'?",
337
+ options: ["Horse", "Elephant", "Camel", "Donkey"],
338
+ correct: 2,
339
+ fact: "Camels can go weeks without water!"
340
+ },
341
+ {
342
+ question: "What's the fastest land animal?",
343
+ options: ["Cheetah", "Lion", "Gazelle", "Leopard"],
344
+ correct: 0,
345
+ fact: "Cheetahs can run up to 70 mph!"
346
+ }
347
+ ];
348
+
349
+ this.storyPrompts = [
350
+ "Once upon a time in a magical forest...",
351
+ "In a distant galaxy far, far away...",
352
+ "Deep beneath the ocean waves...",
353
+ "High up in the clouds lived...",
354
+ "In a bustling city of robots..."
355
+ ];
356
+
357
+ this.initializeEventListeners();
358
+ this.showWelcomeMessage();
359
+ }
360
+
361
+ initializeEventListeners() {
362
+ document.getElementById('sendBtn').addEventListener('click', () => this.sendMessage());
363
+ document.getElementById('userInput').addEventListener('keypress', (e) => {
364
+ if (e.key === 'Enter') this.sendMessage();
365
+ });
366
+
367
+ document.querySelectorAll('.mode-btn').forEach(btn => {
368
+ btn.addEventListener('click', () => this.switchMode(btn.dataset.mode));
369
+ });
370
+ }
371
+
372
+ switchMode(mode) {
373
+ this.currentMode = mode;
374
+ document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
375
+ document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
376
+
377
+ this.addMessage(this.getModeWelcomeMessage(mode), 'bot');
378
+ }
379
+
380
+ getModeWelcomeMessage(mode) {
381
+ const messages = {
382
+ general: "🎉 General Fun Mode activated! I'm ready for anything - chat, jokes, stories, or whatever you're in the mood for!",
383
+ jokes: "😂 Joke Master Mode ON! Get ready to laugh until your sides hurt! Want to hear a joke?",
384
+ riddles: "🧩 Riddle Mode engaged! I've got brain teasers that'll make you think. Ready for a challenge?",
385
+ stories: "📚 Story Time! Let's create amazing adventures together. Want me to start a story or continue one?",
386
+ games: "🎮 Game Mode activated! Let's play word games, 20 questions, or create some fun together!",
387
+ trivia: "🧠 Trivia Quiz time! Test your knowledge and learn fun facts. Ready for your first question?"
388
+ };
389
+ return messages[mode];
390
+ }
391
+
392
+ sendMessage() {
393
+ const input = document.getElementById('userInput');
394
+ const message = input.value.trim();
395
+
396
+ if (message) {
397
+ this.addMessage(message, 'user');
398
+ input.value = '';
399
+ this.showTyping();
400
+
401
+ setTimeout(() => {
402
+ this.hideTyping();
403
+ this.processMessage(message);
404
+ }, Math.random() * 1000 + 500);
405
+ }
406
+ }
407
+
408
+ processMessage(message) {
409
+ const lowerMessage = message.toLowerCase();
410
+ let response = '';
411
+
412
+ switch (this.currentMode) {
413
+ case 'jokes':
414
+ response = this.handleJokeMode(lowerMessage);
415
+ break;
416
+ case 'riddles':
417
+ response = this.handleRiddleMode(lowerMessage);
418
+ break;
419
+ case 'stories':
420
+ response = this.handleStoryMode(lowerMessage);
421
+ break;
422
+ case 'games':
423
+ response = this.handleGameMode(lowerMessage);
424
+ break;
425
+ case 'trivia':
426
+ response = this.handleTriviaMode(lowerMessage);
427
+ break;
428
+ default:
429
+ response = this.handleGeneralMode(lowerMessage);
430
+ }
431
+
432
+ this.addMessage(response, 'bot');
433
+ }
434
+
435
+ handleJokeMode(message) {
436
+ if (message.includes('joke') || message.includes('yes') || message.includes('another')) {
437
+ this.userStats.jokesHeard++;
438
+ const joke = this.jokes[Math.floor(Math.random() * this.jokes.length)];
439
+ return `${joke} 😄<div class="joke-rating"><button class="rating-btn like-btn">😂 Hilarious!</button><button class="rating-btn dislike-btn">😐 Not Funny</button></div>`;
440
+ } else if (message.includes('no') || message.includes('stop')) {
441
+ return "No worries! 😊 You've heard " + this.userStats.jokesHeard + " jokes so far. Want to try a different mode?";
442
+ }
443
+ return "Want to hear a joke? Just say 'yes' or 'joke me'! 🎭";
444
+ }
445
+
446
+ handleRiddleMode(message) {
447
+ if (!this.gameState.currentRiddle) {
448
+ const riddle = this.riddles[Math.floor(Math.random() * this.riddles.length)];
449
+ this.gameState.currentRiddle = riddle;
450
+ this.gameState.attempts = 0;
451
+ return `🧩 Here's your riddle:<br><br><strong>${riddle.question}</strong><br><br>Take your time and think about it! 🤔`;
452
+ } else {
453
+ this.gameState.attempts++;
454
+ if (message.includes(this.gameState.currentRiddle.answer)) {
455
+ this.userStats.riddlesSolved++;
456
+ const response = `🎉 Correct! The answer is "${this.gameState.currentRiddle.answer}"! You solved it in ${this.gameState.attempts} attempts!<br><br>Want another riddle?`;
457
+ this.gameState.currentRiddle = null;
458
+ return response;
459
+ } else if (this.gameState.attempts >= 2) {
460
+ const hint = `🔍 Hint: ${this.gameState.currentRiddle.hint}<br><br>Try again! 💪`;
461
+ return hint;
462
+ } else {
463
+ return "Not quite right! 🤔 Keep thinking... or ask for a hint!";
464
+ }
465
+ }
466
+ }
467
+
468
+ handleStoryMode(message) {
469
+ if (message.includes('story') || message.includes('start') || message.includes('begin')) {
470
+ const prompt = this.storyPrompts[Math.floor(Math.random() * this.storyPrompts.length)];
471
+ return `📚 ${prompt} a curious little creature named Zippy discovered something amazing! ✨<br><br>What do you think Zippy found? Continue the story!`;
472
+ } else {
473
+ const responses = [
474
+ `📖 What an interesting twist! And then suddenly, a mysterious figure appeared who said "${message}"...`,
475
+ `🌟 Plot twist! As the adventure continued, everyone realized that "${message}" was the key to solving everything!`,
476
+ `⚡ The story takes an unexpected turn when our hero discovers that "${message}" holds magical powers!`,
477
+ `🎭 Meanwhile, in another part of the story, the wise old owl whispered: "${message}" and everything changed!`
478
+ ];
479
+ return responses[Math.floor(Math.random() * responses.length)] + "<br><br>What happens next? Keep the story going! 🚀";
480
+ }
481
+ }
482
+
483
+ handleGameMode(message) {
484
+ const games = [
485
+ "🎯 Let's play 20 Questions! Think of something and I'll try to guess it!",
486
+ "🔤 Word Association! I'll say a word, you say the first thing that comes to mind: SUNSHINE",
487
+ "📝 Rhyming Game! I'll give you a word and you give me a word that rhymes: CAT",
488
+ "🎨 Creative Challenge! Describe your perfect day in exactly 10 words!"
489
+ ];
490
+ return games[Math.floor(Math.random() * games.length)];
491
+ }
492
+
493
+ handleTriviaMode(message) {
494
+ if (!this.gameState.currentTrivia) {
495
+ const question = this.triviaQuestions[Math.floor(Math.random() * this.triviaQuestions.length)];
496
+ this.gameState.currentTrivia = question;
497
+ let optionsHtml = question.options.map((option, index) =>
498
+ `${index + 1}. ${option}`).join('<br>');
499
+ return `🧠 <strong>${question.question}</strong><br><br>${optionsHtml}<br><br>Type the number of your answer! 🤔`;
500
+ } else {
501
+ const userAnswer = parseInt(message) - 1;
502
+ const correct = this.gameState.currentTrivia.correct;
503
+
504
+ if (userAnswer === correct) {
505
+ this.userStats.triviaScore++;
506
+ const response = `🎉 Correct! ${this.gameState.currentTrivia.fact}<br><br>Score: ${this.userStats.triviaScore}<br><br>Ready for another question?`;
507
+ this.gameState.currentTrivia = null;
508
+ return response;
509
+ } else {
510
+ const response = `❌ Not quite! The correct answer was: ${this.gameState.currentTrivia.options[correct]}<br><br>${this.gameState.currentTrivia.fact}<br><br>Want to try another question?`;
511
+ this.gameState.currentTrivia = null;
512
+ return response;
513
+ }
514
+ }
515
+ }
516
+
517
+ handleGeneralMode(message) {
518
+ const responses = [
519
+ "That's super interesting! 🌟 Tell me more!",
520
+ "Wow, I love chatting with you! 😊 What else is on your mind?",
521
+ "You're so fun to talk to! 🎉 What should we explore next?",
522
+ "Awesome! 🚀 I'm having such a great time chatting with you!",
523
+ "That's fascinating! 🤔 Want to hear a joke about that?",
524
+ "You know what? You're pretty cool! 😎 What's your favorite thing to do for fun?"
525
+ ];
526
+
527
+ if (message.includes('hello') || message.includes('hi')) {
528
+ return "Hello there! 👋 I'm so excited to entertain you! What sounds fun today? 🎪";
529
+ }
530
+
531
+ return responses[Math.floor(Math.random() * responses.length)];
532
+ }
533
+
534
+ addMessage(text, sender) {
535
+ const messagesContainer = document.getElementById('chatMessages');
536
+ const messageDiv = document.createElement('div');
537
+ messageDiv.className = `message ${sender}-message`;
538
+ messageDiv.innerHTML = text;
539
+ messagesContainer.appendChild(messageDiv);
540
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
541
+
542
+ // Add click listeners for rating buttons
543
+ if (text.includes('joke-rating')) {
544
+ setTimeout(() => {
545
+ messageDiv.querySelectorAll('.rating-btn').forEach(btn => {
546
+ btn.addEventListener('click', (e) => {
547
+ const rating = e.target.textContent;
548
+ this.addMessage(`Thanks for the feedback: ${rating} 🎭`, 'bot');
549
+ });
550
+ });
551
+ }, 100);
552
+ }
553
+ }
554
+
555
+ showTyping() {
556
+ document.getElementById('typingIndicator').style.display = 'flex';
557
+ const messagesContainer = document.getElementById('chatMessages');
558
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
559
+ }
560
+
561
+ hideTyping() {
562
+ document.getElementById('typingIndicator').style.display = 'none';
563
+ }
564
+
565
+ showWelcomeMessage() {
566
+ // Welcome message is already in HTML
567
+ }
568
+ }
569
+
570
+ // Initialize the bot when the page loads
571
+ window.addEventListener('load', () => {
572
+ new EntertainmentBot();
573
+ });
574
+ </script>
575
+ </body>
576
+ </html>