|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<title>ChatBot</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> |
|
|
<style> |
|
|
.chat-container { |
|
|
width: 100%; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
min-width: 100%; |
|
|
max-height: 85%; |
|
|
overflow-y: auto; |
|
|
background-color: black; |
|
|
} |
|
|
|
|
|
.chat-messages { |
|
|
width: 100%; |
|
|
max-width: calc(100% - 5px); |
|
|
margin: 0 auto; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
min-width: 90%; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
color: #ffffff; |
|
|
padding: 10px; |
|
|
margin-bottom: 10px; |
|
|
border-radius: 10px; |
|
|
align-self: flex-end; |
|
|
max-width: 70%; |
|
|
word-wrap: break-word; |
|
|
margin-left: 0px; |
|
|
font-family: 'Poppins', sans-serif; |
|
|
font-weight: 200; |
|
|
font-size: 16px; |
|
|
letter-spacing: 0.5px; |
|
|
line-height: 1.6; |
|
|
background-color: #4CAF50; |
|
|
} |
|
|
|
|
|
.ai-response { |
|
|
color: #ffffff; |
|
|
padding: 10px; |
|
|
margin-bottom: 10px; |
|
|
border-radius: 10px; |
|
|
max-width: 80%; |
|
|
align-self: flex-start; |
|
|
font-family: 'Poppins', sans-serif; |
|
|
font-weight: 200; |
|
|
font-size: 16px; |
|
|
letter-spacing: 0.5px; |
|
|
line-height: 1.5; |
|
|
margin-right: 0px; |
|
|
background-color: #333; |
|
|
} |
|
|
|
|
|
#ic { |
|
|
max-width: 90%; |
|
|
margin: auto; |
|
|
min-width: 90%; |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
margin-bottom: 10px; |
|
|
background-color: #1b1b1b; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
#user-input { |
|
|
background-color: #1b1b1b; |
|
|
} |
|
|
|
|
|
@media screen and (max-width:680px) { |
|
|
.user-message, |
|
|
.ai-response { |
|
|
min-width: 95%; |
|
|
max-width: 95%; |
|
|
} |
|
|
} |
|
|
|
|
|
#chat-messages img { |
|
|
width: 40%; |
|
|
margin-left: 7px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body id="idk1" style="background-color: black"> |
|
|
<a href="https://discord.gg/A78e55KyuR" target="_blank" style="color: cyan; text-decoration: underline;margin-left: 5px; letter-spacing: 1px;">DISCORD</a> |
|
|
<a href="https://buymeacoffee.com/mygx" target="_blank" style="color: cyan; text-decoration: underline;margin-left: 5px; letter-spacing: 1px;">Kaffee spendieren</a> |
|
|
<a href="https://discord.gg/A78e55KyuR" id="userCount" style="color: white;margin-left: 10px;"></a> |
|
|
<a href="" id="nn" style="color: white;margin-left: 10px;">Bitte mag diesen Space ❤</a> |
|
|
|
|
|
<div class="chat-container flex-1 flex flex-col" id="idk"> |
|
|
<div class="rounded-lg shadow-md flex-1"> |
|
|
<div id="chat-messages" class="px-4 py-6 chat-messages" style="background-color: black"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-200 px-4 py-3 flex items-center" id="ic"> |
|
|
<input id="user-input" type="text" autocomplete="off" placeholder="Gib deine Nachricht ein..." class="flex-1 py-2 px-2 rounded-lg focus:outline-none focus:ring focus:ring-cyan-400 bg-gray-200 text-gray-300"> |
|
|
<button id='btn' onclick="sendMessage()" class="ml-4 bg-blue-600 text-white px-4 py-2 rounded-lg">Senden</button> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.socket.io/4.1.3/socket.io.min.js"></script> |
|
|
|
|
|
<script> |
|
|
alert(` |
|
|
* Du solltest niemanden im Chat anmachen |
|
|
* Du solltest niemanden mobben |
|
|
* Sei ein normaler Mensch |
|
|
Andernfalls wirst du gebannt |
|
|
|
|
|
* Bildgenerierung ist jetzt verfügbar :) |
|
|
|
|
|
HINWEIS: Du wirst gebannt, wenn du versuchst, das AI-Verhalten zu manipulieren`); |
|
|
|
|
|
var socket = io.connect('https://apix-30ox.onrender.com', { |
|
|
reconnection: true, |
|
|
reconnectionAttempts: Infinity, |
|
|
reconnectionDelay: 1000, |
|
|
reconnectionDelayMax: 5000, |
|
|
randomizationFactor: 0.5 |
|
|
}); |
|
|
|
|
|
var messages = document.getElementById('chat-messages'); |
|
|
let user = localStorage.getItem('userName'); |
|
|
|
|
|
if (user == null) { |
|
|
while (true) { |
|
|
user = prompt('Erstelle deinen Benutzernamen'); |
|
|
if (user != null && user !== '' && user !== undefined) { |
|
|
let upperCaseUser = user.toUpperCase(); |
|
|
if (!upperCaseUser.includes('HTML')) { |
|
|
localStorage.setItem('userName', upperCaseUser); |
|
|
break; |
|
|
} else { |
|
|
alert('Dieser Name ist nicht verfügbar. Bitte wähle einen anderen Benutzernamen.'); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
console.log(user); |
|
|
var userInput = document.getElementById('user-input'); |
|
|
|
|
|
socket.on('user_count', function(data) { |
|
|
var onlineUsersCount = data.count; |
|
|
document.getElementById('userCount').innerText = `Online Benutzer: ${onlineUsersCount}`; |
|
|
}); |
|
|
|
|
|
function sendMessage() { |
|
|
document.getElementById('btn').disabled = true; |
|
|
setTimeout(function() { |
|
|
document.getElementById('btn').disabled = false; |
|
|
}, 7000); |
|
|
var message = userInput.value; |
|
|
if (message.length > 1200) { |
|
|
alert('Nachrichtenlänge überschreitet 1200 Zeichen!'); |
|
|
} else { |
|
|
if (user == ',,,,,,, ' || user == ',,,,, ') { |
|
|
alert('Du wurdest vorübergehend gebannt'); |
|
|
} else { |
|
|
var data = { |
|
|
user: user, |
|
|
message: message |
|
|
}; |
|
|
socket.emit('message', data); |
|
|
userInput.value = ''; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
userInput.addEventListener('keypress', function(event) { |
|
|
if (event.keyCode === 13) { |
|
|
if (!document.getElementById('btn').disabled) { |
|
|
sendMessage(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
socket.on('message', function(data) { |
|
|
var tempElement = document.createElement('div'); |
|
|
tempElement.innerHTML = data; |
|
|
while (tempElement.firstChild) { |
|
|
messages.appendChild(tempElement.firstChild); |
|
|
} |
|
|
}); |
|
|
|
|
|
socket.on('response', function(data) { |
|
|
if (data.img != null || data.img != undefined) { |
|
|
var img = document.createElement('img'); |
|
|
img.src = data.img; |
|
|
messages.appendChild(img); |
|
|
} else { |
|
|
console.log(data.response); |
|
|
var currentMessage = messages.lastChild; |
|
|
if (data.response === 'complete') { |
|
|
currentMessage = null; |
|
|
document.getElementById('btn').disabled = false; |
|
|
} else { |
|
|
if (!currentMessage || !currentMessage.classList.contains('ai-response')) { |
|
|
currentMessage = document.createElement('p'); |
|
|
currentMessage.classList.add('ai-response'); |
|
|
|
|
|
var aiLabel = document.createElement('h1'); |
|
|
aiLabel.style.color = 'skyblue'; |
|
|
aiLabel.textContent = 'AI-ANTWORT: '; |
|
|
|
|
|
currentMessage.appendChild(aiLabel); |
|
|
currentMessage.appendChild(document.createElement('br')); |
|
|
|
|
|
messages.appendChild(currentMessage); |
|
|
} |
|
|
var responseText = document.createTextNode(data.response); |
|
|
currentMessage.appendChild(responseText); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
socket.on('image', function(data) { |
|
|
if (data.image) { |
|
|
var img = document.createElement('img'); |
|
|
img.src = 'data:image/jpeg;base64,' + data.image; |
|
|
document.body.appendChild(img); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
|
|
|
|
|
|
