jordonpeter01/Online-Multiplayer-AI-Chat
0
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">8 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">9 10 <title>ChatBot</title>11 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">12 <style>13 14 .chat-container {15 width: 100%;16 max-width: 1200px; 17 margin: 0 auto; 18 min-width: 100%;19 max-height: 85%;20 overflow-y: auto;21 background-color: #4e4e4e;22 }23 24 .chat-messages {25 26 width: 100%; 27 max-width: calc(100% - 5px); 28 margin: 0 auto;29 display: flex; 30 flex-direction: column; 31 min-width: 90%;32 overflow-y: auto;33 }34 35 .user-message {36 37 color: #ffffff; 38 padding: 10px;39 margin-bottom: 10px;40 border-radius: 10px;41 align-self: flex-start; 42 max-width: 70%; 43 word-wrap: break-word;44 margin-left: 0px;45 font-family: 'Poppins', sans-serif; 46 font-weight: 200; 47 font-size: 16px;48 letter-spacing: 0.5px;49 line-height: 1.6; 50 }51 52 .ai-response {53 color: #ffffff;54 padding: 10px;55 margin-bottom: 10px;56 border-radius: 10px;57 max-width: 80%;58 align-self: flex-start;59 font-family: 'Poppins', sans-serif; 60 font-weight: 200; 61 font-size: 16px; 62 letter-spacing: 0.5px; 63 line-height: 1.5; 64 margin-right: 0px;65}66 #ic {67 max-width: 90%;68 margin: auto;69 min-width: 90%;70 position: fixed;71 bottom: 0;72 left: 50%;73 transform: translateX(-50%);74 margin-bottom: 10px;75 background-color: #1b1b1b;76 border-radius: 10px;77}78#idk,#idk1{79 background-color: #333;80}81#user-input{82 background-color: #1b1b1b;83}84 @media screen and (max-width:680px) {85 .user-message,.ai-response{86 min-width: 95%;87 max-width: 95%;88 }89 #chat-messages img{90 min-width: 80%;91 width: 80%;92 }93 }94 #chat-messages img{95 width: 40%;96 margin-left: 7px;97 98 }99 </style>100 101 102 103</head>104<a href="https://discord.gg/A78e55KyuR" target="_blank" style="color: cyan; text-decoration: underline;margin-left: 5px; letter-spacing: 1px;">DISCORD</a>105<a href="https://buymeacoffee.com/mygx" target="_blank" style="color: cyan; text-decoration: underline;margin-left: 5px; letter-spacing: 1px;">Buy Me Coffe </a>106<a href="https://discord.gg/A78e55KyuR" id="userCount" style="color: white;margin-left: 10px;"></a>107<a href="" id="nn" style="color: white;margin-left: 10px;">Please Like This Space ❤</a>108 109</div>110<body id="idk1">111 <div class="chat-container flex-1 flex flex-col" id="idk">112 <div class=" rounded-lg shadow-md flex-1">113 114 115 <div id="chat-messages" class="px-4 py-6 chat-messages">116 117 </div>118 </div>119 </div>120 121 <div class="bg-gray-200 px-4 py-3 flex items-center" id="ic">122 <input id="user-input" type="text" autocomplete="off" placeholder="Type your message..." class="flex-1 py-2 px-2 rounded-lg focus:outline-none focus:ring focus:ring-cyan-400 bg-gray-200 text-gray-300">123 <button id='btn' onclick="sendMessage()" class="ml-4 bg-blue-600 text-white px-4 py-2 rounded-lg">Send</button>124 </div>125 126 127 <script src="https://cdn.socket.io/4.1.3/socket.io.min.js"></script>128 129 <script>130 var socket = io.connect('https://apix-30ox.onrender.com');131 var messages = document.getElementById('chat-messages');132 let user = localStorage.getItem("userName")133 console.log(user)134 if (user == null) {135 while (true) {136 user = prompt('Create Your Username');137 if (user != null && user !== '' && user !== undefined) {138 // Convert the username to uppercase for case-insensitive comparison139 let upperCaseUser = user.toUpperCase();140 141 // Check if the username contains "YASIR" in any form142 if (!upperCaseUser.includes("YASIR")) {143 localStorage.setItem("userName", upperCaseUser);144 break;145 } else {146 alert("This name can't be taken. Please choose a different username.");147 }148 }149 }150}151 152 console.log(user)153 var userInput = document.getElementById('user-input');154 socket.on('user_count', function(data) {155 var onlineUsersCount = data.count;156 document.getElementById('userCount').innerText = `Online Users: ${onlineUsersCount}` 157});158 function sendMessage() {159 document.getElementById('btn').disabled = true;160 setTimeout(function(){161 document.getElementById('btn').disabled = false;162 }, 7000); // 5000 milliseconds = 5 seconds163 164 var message = userInput.value;165 if (message.length > 1200 ) {166 alert('Message length exceeds 1200 characters!!');167 } else {168 if(user ==',,,,,,, ' || user==',,,,, '){169 alert('you have been tempraraily banned')170 }171 else{172 var data = {173 user: user,174 message: message175 };176 socket.emit('message', data);177 userInput.value = '';178 }179 }180}181 182 userInput.addEventListener("keypress", function(event) {183 if (event.keyCode === 13) { 184 if(!document.getElementById('btn').disabled){185 sendMessage();186 }187 188 }189 });190 191 192 socket.on('message', function(data) {193 var newMessage = document.createElement('p');194 195 var userName = document.createElement('strong');196 userName.textContent = data.user;197 userName.style.color = 'pink'198 userName.style.fontSize = '20px'199 var messageText = document.createTextNode(data.message);200 201 newMessage.appendChild(userName);202 newMessage.appendChild(document.createElement('br'));203 newMessage.appendChild(messageText);204 205 newMessage.classList.add('user-message');206 207 messages.appendChild(newMessage);208});209 210socket.on('response', function(data) {211 if(data.img!=null || data.img!=undefined){212 var img = document.createElement('img');213 img.src = data.img;214 messages.appendChild(img);215 }216 else{217 218 console.log(data.response); 219 var currentMessage = messages.lastChild;220 if (data.response === 'complete') {221 currentMessage = null;222 document.getElementById('btn').disabled = false223 } else {224 if (!currentMessage || !currentMessage.classList.contains('ai-response')) {225 currentMessage = document.createElement('p');226 currentMessage.classList.add('ai-response');227 228 var aiLabel = document.createElement('h1');229 aiLabel.style.color = 'skyblue'230 aiLabel.textContent = 'AI RESPONSE: ';231 232 currentMessage.appendChild(aiLabel);233 currentMessage.appendChild(document.createElement('br')); 234 235 messages.appendChild(currentMessage);236 }237 238 var responseText = document.createTextNode(data.response);239 240 241 currentMessage.appendChild(responseText);242 243 }244 245 } 246});247 248 249 250 251socket.on('image', function(data) {252 if (data.image) {253 var img = document.createElement('img');254 img.src = 'data:image/jpeg;base64,' + data.image;255 document.body.appendChild(img); // Or append to a specific container256 }257});258 259 260 261 </script>262</body>263 264</html>