PixelMind AI Pro
by BlazeKoala99297 lines10.8 KB
<html lang="de">
<head>
<meta charset="UTF-8">
<title>PixelMind AI Pro</title>
<style>
body {
margin: 0;
background: #1e1e24;
color: white;
font-family: 'Segoe UI', Arial, sans-serif;
}
.header {
background: #111115;
padding: 20px;
text-align: center;
font-size: 28px;
font-weight: bold;
border-bottom: 1px solid #2d2d35;
}
#chat {
height: 72vh;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
}
.msg {
background: #2a2a35;
padding: 15px;
border-radius: 18px;
margin: 8px 0;
white-space: pre-wrap;
max-width: 80%;
align-self: flex-start;
animation: fadeIn 0.3s ease;
word-break: break-word;
}
.msg.user {
background: #007aff;
align-self: flex-end;
}
.ai-image {
max-width: 100%;
width: 400px;
border-radius: 12px;
margin-top: 10px;
display: block;
border: 1px solid #3d3d4d;
}
/* Styling für generierten Code */
.code-container {
background: #111115;
border: 1px solid #3d3d4d;
border-radius: 8px;
margin-top: 10px;
padding: 10px;
font-family: 'Courier New', Courier, monospace;
position: relative;
}
.code-header {
font-size: 12px;
color: #888;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
}
.code-box {
overflow-x: auto;
white-space: pre;
color: #a9dc76;
}
.box {
position: fixed;
bottom: 20px;
left: 5%;
width: 90%;
display: flex;
background: #2a2a35;
border-radius: 24px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #3d3d4d;
}
textarea {
flex: 1;
background: none;
border: 0;
outline: 0;
color: white;
font-size: 16px;
resize: none;
height: 30px;
font-family: inherit;
}
button {
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 20px;
background: #007aff;
color: white;
border: none;
cursor: pointer;
transition: background 0.2s;
}
button:hover {
background: #0056b3;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div class="header">
🧠 PixelMind AI Pro
</div>
<div id="chat">
<div class="msg">
🧠 PixelMind AI: Hallo! Ich bin deine verbesserte KI. Ich verstehe Kontext jetzt noch besser und kann spezifischeren Code generieren! 💻✨
</div>
</div>
<div class="box">
<textarea id="input" placeholder="Schreibe etwas oder frage nach Code..." onkeydown="checkEnter(event)"></textarea>
<button onclick="send()">↑</button>
</div>
<script>
function scrollToBottom() {
let chatBox = document.getElementById("chat");
chatBox.scrollTop = chatBox.scrollHeight;
}
function add(text, isUser = false) {
let box = document.createElement("div");
box.className = isUser ? "msg user" : "msg";
box.innerHTML = text;
document.getElementById("chat").appendChild(box);
scrollToBottom();
return box;
}
function schreiben(box, text) {
box.innerHTML = "<i>🧠 PixelMind AI denkt nach...</i>";
setTimeout(() => {
box.innerHTML = "";
let i = 0;
let isTag = false;
let currentText = "";
let timer = setInterval(() => {
if (text[i] === "<") isTag = true;
currentText += text[i];
if (text[i] === ">") isTag = false;
if (!isTag) {
box.innerHTML = currentText;
scrollToBottom();
}
i++;
if (i >= text.length) {
clearInterval(timer);
box.innerHTML = currentText;
scrollToBottom();
}
}, 8); // Leicht beschleunigt für besseren Workflow
}, 400);
}
// Hilfsfunktion zur Generierung von dynamischen Code-Snippets
function generiereCodeSnippet(sprache, kontext) {
sprache = sprache.toLowerCase();
let code = "";
if (sprache === "html") {
if (kontext.includes("button") || kontext.includes("klick")) {
code = '<button onclick="alert(\'Klick!\')">Klick mich!</button>';
} else if (kontext.includes("bild") || kontext.includes("img")) {
code = '<img src="bild.jpg" alt="Beschreibung" width="300">';
} else {
code = '<!DOCTYPE html>\n<html>\n<head>\n <title>Meine Seite</title>\n</head>\n<body>\n <h1>Hallo Welt</h1>\n</body>\n</html>';
}
} else if (sprache === "css") {
if (kontext.includes("zentrier") || kontext.includes("mitte")) {
code = '.center {\n display: flex;\n justify-content: center;\n align-items: center;\n}';
} else {
code = 'body {\n background-color: #121212;\n color: white;\n font-family: sans-serif;\n}';
}
} else if (sprache === "javascript" || sprache === "js") {
if (kontext.includes("schleife") || kontext.includes("loop")) {
code = 'for (let i = 0; i < 5; i++) {\n console.log("Durchlauf: " + i);\n}';
} else if (kontext.includes("funktion") || kontext.includes("function")) {
code = 'function berechne(a, b) {\n return a + b;\n}';
} else {
code = 'console.log("Hallo aus JavaScript!");\nconst info = "KI aktiv";';
}
} else if (sprache === "python") {
code = 'def hallo_welt():\n print("Hallo Welt von Python!")\n\nhallo_welt()';
} else {
code = '// Beispiel Code:\nconsole.log("Code angefordert!");';
}
// Sicherer machen gegen HTML-Injektion im Codeblock
let sichererCode = code.replace(/</g, "<").replace(/>/g, ">");
return `💻 **Coding-Modul (${sprache.toUpperCase()}):**
Hier ist dein angeforderter Code:
<div class="code-container">
<div class="code-header"><span>${sprache.toUpperCase()}</span></div>
<div class="code-box">${sichererCode}</div>
</div>`;
}
function generiereKiAntwort(userText) {
let t = userText.toLowerCase();
// 1. CODING MODUL (Jetzt dynamisch mit AI-Verständnis für Sprachen und Wünsche)
if (t.includes("code") || t.includes("programmier") || t.includes("html") || t.includes("css") || t.includes("javascript") || t.includes("js") || t.includes("python")) {
let sprache = "javascript"; // Standard
if (t.includes("html")) sprache = "html";
else if (t.includes("css")) sprache = "css";
else if (t.includes("python")) sprache = "python";
else if (t.includes("js") || t.includes("javascript")) sprache = "javascript";
return generiereCodeSnippet(sprache, t);
}
// 2. ECHTE KI BILDER GENERIEREN
if (t.includes("bild") || t.includes("generiere") || t.includes("zeichne") || t.includes("male")) {
let begriff = userText
.replace(/generiere ein bild von/i, "").replace(/generiere ein bild über/i, "")
.replace(/zeig mir ein bild von/i, "").replace(/zeichne mir/i, "")
.replace(/zeichne/i, "").replace(/male mir/i, "").replace(/male/i, "")
.replace(/bild von/i, "").replace(/bild/i, "").trim();
if (!begriff) begriff = "cyberpunk neon city";
let seed = Math.floor(Math.random() * 100000);
let imageUrl = `https://image.pollinations.ai/p/${encodeURIComponent(begriff)}?width=500&height=400&seed=${seed}&nofeed=true`;
return `🖼️ **Hier ist dein KI-generiertes Bild zu:** "${begriff}"\n<img src="${imageUrl}" class="ai-image" alt="${begriff}">`;
}
// 3. WITZE MODUL
if (t.includes("witz") || t.includes("lustig") || t.includes("joke")) {
const witze = [
"Warum stehen Pilze im Wald? Weil Tannen zapfen!",
"Was sagt ein Gen für ein anderes Gen? 'Hör auf zu replizieren, du kopierst mich!'",
"Was ist grün und steht vor der Tür? Ein Klopf-Salat.",
"Wie nennt man ein helles Köpfchen im Dunkeln? Eine Glühbirne."
];
let zufallsWitz = witze[Math.floor(Math.random() * witze.length)];
return `🤖 **Witz-Modul:**\n\n${zufallsWitz} 🤣`;
}
// 4. TEXT / AUFSATZ MODUL
if (t.includes("aufsatz") || t.includes("text") || t.includes("geschichte") || t.includes("schreibe")) {
let thema = userText.replace(/schreibe einen aufsatz über/i, "").replace(/aufsatz/i, "").replace(/schreibe über/i, "").trim();
if(!thema) thema = "Zukunft der Technologie";
return `✍️ **Aufsatz-Generator:**\n\n**Thema:** ${thema}\n\n**Einleitung:**\nDas Thema "${thema}" gewinnt in unserer modernen Gesellschaft rasch an Relevanz.\n\n**Hauptteil:**\nEs zeigt sich, dass hierbei tiefgreifende Entwicklungen stattfinden. Die digitale Transformation treibt diesen Bereich stark voran, bringt jedoch auch Diskussionsbedarf mit sich.\n\n**Schluss:**\nZusammenfassend lässt sich sagen, dass ${thema} uns auch in Zukunft intensiv begleiten wird.`;
}
// 5. BEGRÜSSUNGEN & SMALLTALK
if (t.includes("hallo") || t.includes("hi ") || t.includes("hey")) {
return "Hallo! Ich bin bereit. Frag mich nach **Code** (z.B. 'Schreibe CSS zum Zentrieren'), **Bildern** oder lass uns chatten! 😊";
}
if (t.includes("wie gehts") || t.includes("wie geht es dir")) {
return "Mir geht es hervorragend! Mein Code-Verständnis wurde gerade geupdatet. Wie kann ich dir helfen?";
}
// 6. STANDARD INTENT-VERSTÄNDNIS (Fallback)
return `🧠 **KI-Verständnis:**\nIch habe deine Nachricht analysiert. Du möchtest etwas über "${userText}" wissen.\n\nDa ich offline laufe, probiere folgende Trigger für Spezialmodule:\n- *Code:* "Schreibe einen HTML Button"\n- *Bilder:* "Male ein Bild von einem Astronauten"\n- *Texte:* "Schreibe einen Aufsatz über KI"`;
}
function checkEnter(event) {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
send();
}
}
function send() {
let input = document.getElementById("input");
let user = input.value.trim();
if (!user) return;
add(user, true);
input.value = "";
let antwortText = generiereKiAntwort(user);
let box = add("");
schreiben(box, antwortText);
}
</script>
</body>
</html>Game Source: PixelMind AI Pro
Creator: BlazeKoala99
Libraries: none
Complexity: complex (297 lines, 10.8 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: pixelmind-ai-pro-blazekoala99" to link back to the original. Then publish at arcadelab.ai/publish.