DevMind AI Studio Pro
by BlazeKoala99553 lines19.0 KB
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevMind AI Studio Pro</title>
<style>
:root {
--bg-main: #0b0e14;
--bg-sidebar: #11151c;
--bg-chat: #161b22;
--accent: #2ea043;
--accent-hover: #3fb950;
--text-main: #e6edf3;
--text-muted: #7d8590;
--border-color: #21262d;
--code-bg: #0d1117;
/* Syntax Highlighting Colors */
--token-keyword: #ff7b72;
--token-string: #a5d6ff;
--token-function: #d2a8ff;
--token-comment: #8b949e;
--token-number: #f2cc60;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--bg-main);
color: var(--text-main);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
display: flex;
height: 100vh;
overflow: hidden;
}
/* Sidebar */
.sidebar {
width: 280px;
background: var(--bg-sidebar);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
padding: 20px;
flex-shrink: 0;
}
.sidebar-title {
font-size: 16px;
font-weight: 600;
color: white;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-section {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: 10px;
font-weight: 600;
}
.lang-tags-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lang-tag {
background: #1f242c;
border: 1px solid var(--border-color);
padding: 5px 10px;
border-radius: 6px;
font-family: monospace;
font-size: 11px;
color: #58a6ff;
}
/* Main Content */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.header {
background: var(--bg-sidebar);
padding: 15px 25px;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.badge {
color: var(--accent-hover);
font-size: 11px;
background: rgba(46, 160, 67, 0.15);
padding: 4px 8px;
border-radius: 20px;
border: 1px solid rgba(46, 160, 67, 0.3);
font-weight: 500;
}
#chat {
flex: 1;
overflow-y: auto;
padding: 25px;
display: flex;
flex-direction: column;
gap: 24px;
scroll-behavior: smooth;
}
.msg {
background: var(--bg-chat);
padding: 20px;
border-radius: 12px;
max-width: 85%;
align-self: flex-start;
border: 1px solid var(--border-color);
line-height: 1.6;
word-wrap: break-word;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.msg.user {
background: #21262d;
align-self: flex-end;
border-color: #388bfd;
}
/* Code-Blöcke */
.code-container {
background: var(--code-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
margin-top: 14px;
font-family: 'Consolas', 'Fira Code', monospace;
overflow: hidden;
}
.code-header {
background: #161b22;
font-size: 12px;
color: var(--text-muted);
padding: 10px 16px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color);
}
.copy-btn {
background: #21262d;
border: 1px solid var(--border-color);
color: var(--text-main);
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
}
.copy-btn:hover {
background: var(--border-color);
color: white;
}
.code-body {
display: flex;
padding: 14px 0;
overflow-x: auto;
}
.line-numbers {
text-align: right;
padding: 0 12px;
color: #484f58;
user-select: none;
font-size: 13px;
border-right: 1px solid #21262d;
white-space: pre;
line-height: 20px;
}
.code-box {
padding: 0 16px;
white-space: pre;
font-size: 13px;
color: #e6edf3;
line-height: 20px;
}
/* Token Highlighting Styles */
.token-kw { color: var(--token-keyword); font-weight: bold; }
.token-st { color: var(--token-string); }
.token-fn { color: var(--token-function); }
.token-cm { color: var(--token-comment); font-style: italic; }
.token-num { color: var(--token-number); }
.input-area {
background: var(--bg-main);
padding: 20px 25px;
border-top: 1px solid var(--border-color);
flex-shrink: 0;
}
.chat-form {
background: var(--bg-sidebar);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 12px 16px;
display: flex;
align-items: flex-end;
gap: 12px;
max-width: 900px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.chat-form:focus-within {
border-color: #388bfd;
}
textarea {
flex: 1;
background: none;
border: 0;
outline: 0;
color: white;
font-size: 15px;
resize: none;
height: 24px;
max-height: 160px;
font-family: inherit;
line-height: 24px;
}
.send-btn {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--accent);
color: white;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.send-btn:hover {
background: var(--accent-hover);
}
.send-btn:active {
transform: scale(0.95);
}
.send-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-title">
<span>DevMind Core v3.0</span>
</div>
<div class="sidebar-section">Unterstützte Engines</div>
<div class="lang-tags-container">
<span class="lang-tag">HTML5</span>
<span class="lang-tag">CSS3</span>
<span class="lang-tag">JavaScript</span>
<span class="lang-tag">Python</span>
<span class="lang-tag">SQL</span>
<span class="lang-tag">C++</span>
<span class="lang-tag">Java</span>
</div>
</aside>
<main class="main-content">
<div class="header">
<span>🤖 DevMind AI <span class="badge">Advanced Copilot Mode</span></span>
</div>
<div id="chat" role="log" aria-live="polite">
<div class="msg">
<strong>DevMind AI:</strong> Ultra-High-Speed Engine bereit. Ich generiere und **optimiere** deinen Code.
<br><span style="color: var(--text-muted); font-size: 13px;">Füge Code ein und schreibe "verbessere" oder "optimieren" dazu! (z. B. "verbessere: var x = 5;")</span>
</div>
</div>
<div class="input-area">
<form class="chat-form" id="chatForm">
<textarea id="input" aria-controls="chat" placeholder="Code-Frage oder Code zum Verbessern eingeben... (Enter zum Senden)"></textarea>
<button type="submit" class="send-btn" aria-label="Senden">
<svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
</button>
</form>
</div>
</main>
<script>
document.addEventListener("DOMContentLoaded", () => {
const chatForm = document.getElementById("chatForm");
const inputElement = document.getElementById("input");
inputElement.addEventListener("input", () => {
inputElement.style.height = "24px";
inputElement.style.height = Math.min(inputElement.scrollHeight, 160) + "px";
});
inputElement.addEventListener("keydown", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
chatForm.dispatchEvent(new Event('submit'));
}
});
chatForm.addEventListener("submit", handleFormSubmit);
});
function scrollToBottom() {
const chatBox = document.getElementById("chat");
chatBox.scrollTop = chatBox.scrollHeight;
}
function addMessage(text, isUser = false, isHtml = false) {
const box = document.createElement("div");
box.className = isUser ? "msg user" : "msg";
if (isHtml) {
box.innerHTML = text;
} else {
box.textContent = text;
}
document.getElementById("chat").appendChild(box);
scrollToBottom();
return box;
}
function highlightCode(code, lang) {
let escaped = code
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
const keywords = /\b(const|let|var|function|return|async|await|try|catch|if|else|for|while|def|import|from|class|public|static|void|int|SELECT|FROM|WHERE|ORDER|BY|DESC|include)\b/g;
const strings = /(["'`])(.*?)\1/g;
const functions = /\b(\w+)(?=\()/g;
const comments = /(\/\/.*|#.*|\/\*[\s\S]*?\*\/)/g;
const numbers = /\b(\d+)\b/g;
escaped = escaped.replace(comments, '<span class="token-cm">$1</span>');
escaped = escaped.replace(strings, '<span class="token-st">$1$2$1</span>');
escaped = escaped.replace(keywords, '<span class="token-kw">$1</span>');
escaped = escaped.replace(functions, '<span class="token-fn">$1</span>');
escaped = escaped.replace(numbers, '<span class="token-num">$1</span>');
return escaped;
}
function generateCodeBlock(rawCode, lang) {
const highlighted = highlightCode(rawCode, lang);
const lineCount = rawCode.trim().split('\n').length;
const lineNumbersHtml = Array.from({length: lineCount}, (_, i) => i + 1).join('\n');
return `
<div class="code-container">
<div class="code-header">
<span>${lang.toUpperCase()}</span>
<button type="button" class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="code-body">
<div class="line-numbers">${lineNumbersHtml}</div>
<div class="code-box">${highlighted}</div>
</div>
</div>`;
}
function copyCode(btn) {
const container = btn.closest('.code-container');
const codeBox = container.querySelector('.code-box');
const text = codeBox.innerText || codeBox.textContent;
navigator.clipboard.writeText(text).then(() => {
btn.innerText = "Kopiert!";
btn.style.borderColor = "var(--accent)";
setTimeout(() => {
btn.innerText = "Copy";
btn.style.borderColor = "var(--border-color)";
}, 2000);
});
}
function streamResponse(box, fullText) {
box.innerHTML = "";
let currentText = "";
let index = 0;
const interval = setInterval(() => {
if (index < fullText.length) {
const chunk = fullText.substr(index, 6);
currentText += chunk;
index += 6;
let formattedText = currentText.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
box.innerHTML = formattedText;
scrollToBottom();
} else {
clearInterval(interval);
// Fehlerhaftes Fragment gelöscht
box.innerHTML = fullText.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
scrollToBottom();
}
}, 8);
}
function processAiLogic(prompt) {
const p = prompt.toLowerCase();
let lang = "javascript";
let code = "";
let explanation = "";
if (/\bhtml\b/.test(p)) lang = "html";
else if (/\bcss\b/.test(p)) lang = "css";
else if (/\b(python|py)\b/.test(p)) lang = "python";
else if (/\bsql\b/.test(p)) lang = "sql";
else if (/\b(c\+\+|cpp)\b/.test(p)) lang = "c++";
else if (/\bjava\b/.test(p)) lang = "java";
const wantsImprovement = /\b(verbesser|optimier|fix|refactor|korrigier)/i.test(p);
if (wantsImprovement) {
explanation = "Ich habe den Code analysiert und optimiert. **Verbesserungen:** Veraltete Strukturen bereinigt, Performance gesteigert und Best Practices angewendet.";
// FIX: Trenne den Befehl nur, wenn er wirklich am Anfang steht (z.B. "verbessere: ...")
let userCode = prompt;
if (prompt.includes(":")) {
const parts = prompt.split(":");
const triggerWord = parts[0].trim();
if (/\b(verbesser|optimier|fix|refactor|korrigier)/i.test(triggerWord)) {
userCode = parts.slice(1).join(":");
}
}
userCode = userCode.trim();
if (userCode.length < 3) {
code = "// Refactoring-Beispiel (Performantere Datenfilterung):\nconst processData = (data) => {\n return data.filter(item => item.active).map(item => item.value);\n};";
explanation = "Du hast keinen gültigen Code mitgeschickt. Hier ist ein Beispiel, wie ich Code mittels ES6-Syntax strukturiere:";
} else {
let improved = userCode;
if (/\bvar\b/.test(improved)) {
improved = improved.replace(/\bvar\b/g, "const");
explanation += "<br>- Veraltetes `var` durch moderne Block-Scoped Variablen (`const`) ersetzt.";
}
if (/\bfunction\s+(\w+)\s*\(/.test(improved) && lang === "javascript") {
improved = improved.replace(/\bfunction\s+(\w+)\s*\((.*?)\)/g, "const $1 = ($2) =>");
explanation += "<br>- Standard-Funktion in eine kompaktere Arrow-Function umgeschrieben.";
}
if (improved.includes("fetch") && !improved.includes("catch")) {
improved = "try {\n " + improved + "\n} catch (error) {\n console.error('API Error:', error);\n}";
explanation += "<br>- Wichtiges `try-catch`-Block Error-Handling für Netzwerk-Fehler hinzugefügt.";
}
if (improved.includes("console.log")) {
improved = improved.replace(/console\.log\(.*?\);?/g, "");
explanation += "<br>- Unnötige `console.log` Debug-Aufrufe entfernt.";
}
code = improved;
}
} else {
if (lang === "python") {
if (p.includes("prim")) {
explanation = "Hier ist eine hochperformante Funktion zur Primzahlprüfung mittels Probedivision:";
code = "def is_prime(n):\n if n <= 1:\n return False\n for i in range(2, int(n**0.5) + 1):\n if n % i == 0:\n return False\n return True\n\nprint(is_prime(17)) # Output: True";
} else {
explanation = "Hier ist das standardmäßige Python-Skript-Grundgerüst mit Main-Entrypoint:";
code = "def main():\n print(\"DevMind Core aktiv.\")\n\nif __name__ == '__main__':\n main()";
}
} else if (lang === "html") {
explanation = "Hier ist ein modernes, semantisches HTML5-Grundgerüst für deine Web-Apps:";
code = "<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Modern App</title>\n</head>\n<body>\n <header>\n <nav>Navigation</nav>\n </header>\n <main id=\"app\">\n <h1>Hello World</h1>\n </main>\n</body>\n</html>";
} else if (lang === "css") {
explanation = "Hier ist ein flexibles CSS Grid & Flexbox Reset-Layout für perfektes Zentrieren:";
code = "* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background: #0f141c;\n}";
} else if (lang === "sql") {
explanation = "Hier ist ein performantes SQL-Query mit relationalem LEFT JOIN und Index-Sortierung:";
code = "SELECT u.id, u.username, p.title \nFROM users u\nLEFT JOIN posts p ON u.id = p.user_id\nWHERE u.status = 'active'\nORDER BY p.created_at DESC;";
} else {
if (p.includes("fetch") || p.includes("api")) {
explanation = "Hier ist ein moderner asynchroner API-Fetcher mit HTTP-Status-Validierung:";
code = "async function fetchData(url) {\n try {\n const response = await fetch(url);\n if (!response.ok) throw new Error(`HTTP-Fehler! Status: ${response.status}`);\n return await response.json();\n } catch (error) {\n console.error(\"Fetch-Fehler:\", error);\n }\n}";
} else {
explanation = "Hier ist dein JavaScript DOM-Boilerplate Modul:";
code = "document.addEventListener(\"DOMContentLoaded\", () => {\n console.log(\"DevMind AI erfolgreich geladen.\");\n});";
}
}
}
const codeBlockHtml = generateCodeBlock(code.trim(), lang);
return `✨ **DevMind Copilot Optimierung:**<br>${explanation}<br>${codeBlockHtml}`;
}
function handleFormSubmit(event) {
event.preventDefault();
const input = document.getElementById("input");
const userText = input.value.trim();
if (!userText) return;
addMessage(userText, true);
input.value = "";
input.style.height = "24px";
const responseBox = addMessage("", false, true);
const finalHtml = processAiLogic(userText);
streamResponse(responseBox, finalHtml);
}
</script>
</body>
</html>Game Source: DevMind AI Studio Pro
Creator: BlazeKoala99
Libraries: none
Complexity: complex (553 lines, 19.0 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: devmind-ai-studio-expert-code-generator-blazekoala99" to link back to the original. Then publish at arcadelab.ai/publish.