🎮ArcadeLab

DevMind AI Studio Pro

by SparkOwl48
2021 lines44.1 KB
▶ Play
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="DevMind AI Studio Pro – intelligenter Code Analyzer und Coding Assistant">
<title>DevMind AI Studio Pro</title>

<style>
:root {
    --bg: #090d13;
    --panel: #0f141c;
    --panel-2: #151b24;
    --panel-3: #1b2330;
    --border: #26303d;
    --text: #e6edf3;
    --muted: #8b949e;
    --accent: #3fb950;
    --accent-2: #58a6ff;
    --danger: #f85149;
    --warning: #d29922;
    --purple: #bc8cff;
    --code: #0b1017;
    --shadow: 0 15px 45px rgba(0,0,0,.35);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    overflow: hidden;
}

button,
textarea {
    font: inherit;
}

/* =========================
   APP
========================= */

.app {
    display: flex;
    width: 100%;
    height: 100vh;
}

/* =========================
   SIDEBAR
========================= */

.sidebar {
    width: 285px;
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #238636, #2ea043);
    font-size: 20px;
    box-shadow: 0 8px 20px rgba(46,160,67,.2);
}

.brand-title {
    font-weight: 700;
    font-size: 15px;
}

.brand-version {
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}

.sidebar-section-title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
}

.languages {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.language {
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: #79c0ff;
    font: 11px Consolas, monospace;
}

.analysis-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analysis-item {
    padding: 9px 10px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 12px;
    background: rgba(255,255,255,.02);
    border: 1px solid transparent;
}

.analysis-item.active {
    color: var(--text);
    border-color: var(--border);
    background: var(--panel-2);
}

.sidebar-footer {
    margin-top: auto;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

/* =========================
   MAIN
========================= */

.main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.header {
    height: 64px;
    flex-shrink: 0;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}

.header-title {
    font-size: 15px;
    font-weight: 650;
}

.status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(63,185,80,.7);
}

/* =========================
   CHAT
========================= */

.chat {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    scroll-behavior: smooth;
}

.chat-inner {
    width: min(1050px, 100%);
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.message {
    max-width: 92%;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--panel);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.message.user {
    align-self: flex-end;
    background: #111923;
    border-color: #235ea6;
}

.message.ai {
    align-self: flex-start;
}

.message-content {
    padding: 18px 20px;
    line-height: 1.65;
    font-size: 14px;
}

.message-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ai-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: #238636;
    color: white;
}

/* =========================
   ANALYSIS
========================= */

.analysis-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.metric {
    padding: 12px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.metric-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
}

.metric-value {
    font-size: 18px;
    font-weight: 700;
    margin-top: 3px;
}

.improvement-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.improvement {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 13px;
    background: var(--panel-2);
}

.improvement-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    font-size: 13px;
}

.improvement-description {
    color: var(--muted);
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.5;
}

.badge {
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.badge.bug {
    color: #ff7b72;
    background: rgba(248,81,73,.12);
}

.badge.performance {
    color: #79c0ff;
    background: rgba(88,166,255,.12);
}

.badge.quality {
    color: #d2a8ff;
    background: rgba(188,140,255,.12);
}

.badge.security {
    color: #ffa657;
    background: rgba(255,166,87,.12);
}

.badge.style {
    color: #7ee787;
    background: rgba(63,185,80,.12);
}

/* =========================
   CODE
========================= */

.code-container {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
    background: var(--code);
}

.code-header {
    height: 42px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111820;
    border-bottom: 1px solid var(--border);
}

.code-language {
    color: var(--muted);
    font: 11px Consolas, monospace;
    text-transform: uppercase;
}

.code-actions {
    display: flex;
    gap: 6px;
}

.small-btn {
    border: 1px solid var(--border);
    background: var(--panel-3);
    color: var(--text);
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 11px;
    cursor: pointer;
}

.small-btn:hover {
    border-color: #388bfd;
}

.code-body {
    display: flex;
    overflow-x: auto;
    padding: 15px 0;
}

.line-numbers {
    flex-shrink: 0;
    width: 52px;
    padding-right: 12px;
    text-align: right;
    color: #484f58;
    border-right: 1px solid var(--border);
    font: 12px/20px Consolas, monospace;
    user-select: none;
    white-space: pre;
}

.code-content {
    padding: 0 16px;
    white-space: pre;
    font: 12px/20px Consolas, "Fira Code", monospace;
    min-width: max-content;
}

.token-keyword { color: #ff7b72; }
.token-string { color: #a5d6ff; }
.token-function { color: #d2a8ff; }
.token-comment { color: #8b949e; }
.token-number { color: #f2cc60; }
.token-property { color: #79c0ff; }

/* =========================
   INPUT
========================= */

.input-area {
    flex-shrink: 0;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.input-wrapper {
    width: min(1050px, 100%);
    margin: auto;
}

.quick-actions {
    display: flex;
    gap: 7px;
    margin-bottom: 8px;
    overflow-x: auto;
}

.quick-btn {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
}

.quick-btn:hover {
    color: var(--text);
    border-color: #388bfd;
}

.input-box {
    min-height: 58px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.input-box:focus-within {
    border-color: #388bfd;
}

textarea {
    flex: 1;
    min-width: 0;
    max-height: 180px;
    min-height: 36px;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    line-height: 20px;
    font-size: 13px;
}

textarea::placeholder {
    color: #66717e;
}

.send {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.send:hover {
    background: #4acb5f;
}

.send:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* =========================
   WELCOME
========================= */

.welcome {
    text-align: center;
    padding: 55px 20px;
}

.welcome-icon {
    width: 65px;
    height: 65px;
    margin: auto auto 15px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, #238636, #1f6feb);
    font-size: 30px;
    box-shadow: 0 15px 40px rgba(31,111,235,.2);
}

.welcome h1 {
    font-size: 25px;
    margin-bottom: 8px;
}

.welcome p {
    color: var(--muted);
    max-width: 620px;
    margin: auto;
    font-size: 13px;
    line-height: 1.7;
}

.examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.example {
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
}

.example:hover {
    color: var(--text);
    border-color: #388bfd;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 800px) {
    .sidebar {
        display: none;
    }

    .chat {
        padding: 15px;
    }

    .input-area {
        padding: 12px;
    }

    .analysis-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .message {
        max-width: 100%;
    }
}
</style>
</head>

<body>

<div class="app">

    <!-- SIDEBAR -->
    <aside class="sidebar">

        <div class="brand">
            <div class="brand-icon">⌘</div>
            <div>
                <div class="brand-title">DevMind AI</div>
                <div class="brand-version">Code Intelligence v4.0</div>
            </div>
        </div>

        <div>
            <div class="sidebar-section-title">Sprachen</div>

            <div class="languages">
                <span class="language">JavaScript</span>
                <span class="language">TypeScript</span>
                <span class="language">Python</span>
                <span class="language">HTML</span>
                <span class="language">CSS</span>
                <span class="language">SQL</span>
                <span class="language">Java</span>
                <span class="language">C++</span>
                <span class="language">C#</span>
                <span class="language">PHP</span>
            </div>
        </div>

        <div>
            <div class="sidebar-section-title">Analyse</div>

            <div class="analysis-list">
                <div class="analysis-item active">✓ Fehleranalyse</div>
                <div class="analysis-item active">✓ Performance</div>
                <div class="analysis-item active">✓ Sicherheit</div>
                <div class="analysis-item active">✓ Codequalität</div>
                <div class="analysis-item active">✓ Refactoring</div>
                <div class="analysis-item active">✓ Best Practices</div>
            </div>
        </div>

        <div class="sidebar-footer">
            DevMind analysiert Code strukturell und erklärt Änderungen, statt lediglich Text zu ersetzen.
        </div>

    </aside>

    <!-- MAIN -->
    <main class="main">

        <header class="header">
            <div class="header-title">
                🤖 DevMind AI — Advanced Coding Assistant
            </div>

            <div class="status">
                <span class="status-dot"></span>
                Local Analysis Engine
            </div>
        </header>

        <section class="chat" id="chat">

            <div class="chat-inner" id="chatInner">

                <div class="welcome">

                    <div class="welcome-icon">⚡</div>

                    <h1>Code wirklich verstehen.</h1>

                    <p>
                        Füge deinen Code ein und DevMind analysiert mögliche Bugs,
                        Performance-Probleme, Sicherheitsrisiken, Lesbarkeit und
                        Wartbarkeit. Danach wird erklärt, <strong>was</strong>
                        geändert wurde und <strong>warum</strong>.
                    </p>

                    <div class="examples">
                        <button class="example" data-example="Verbessere diesen JavaScript-Code: var numbers = [1,2,3,4,5]; var result = numbers.filter(function(n) { return n % 2 === 0; });">
                            JavaScript verbessern
                        </button>

                        <button class="example" data-example="Analysiere diesen Python-Code: def get_user(id): return db.query('SELECT * FROM users WHERE id=' + id)">
                            Sicherheitsanalyse
                        </button>

                        <button class="example" data-example="Optimiere diesen Code: function sum(arr) { var result = 0; for(var i=0;i<arr.length;i++){ result += arr[i]; } return result; }">
                            Performance prüfen
                        </button>
                    </div>

                </div>

            </div>

        </section>

        <!-- INPUT -->
        <div class="input-area">

            <div class="input-wrapper">

                <div class="quick-actions">
                    <button class="quick-btn" data-action="analyze">🔍 Analysieren</button>
                    <button class="quick-btn" data-action="improve">✨ Verbessern</button>
                    <button class="quick-btn" data-action="bug">🐛 Bugs finden</button>
                    <button class="quick-btn" data-action="security">🔒 Sicherheit</button>
                    <button class="quick-btn" data-action="performance">⚡ Performance</button>
                    <button class="quick-btn" data-action="explain">📖 Erklären</button>
                </div>

                <form id="chatForm">

                    <div class="input-box">

                        <textarea
                            id="input"
                            rows="1"
                            placeholder="Code oder eine Coding-Frage eingeben..."
                            aria-label="Code oder Frage"
                        ></textarea>

                        <button class="send" id="sendButton" type="submit" aria-label="Senden">
                            ➤
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </main>

</div>

<script>
"use strict";

/*
=========================================================
DEV MIND AI
LOCAL CODE INTELLIGENCE ENGINE
=========================================================

Wichtig:

Diese Version besitzt eine echte lokale Analyse-Engine.

Sie ist KEIN vollständiges LLM.
Für wirklich semantisches Verständnis solltest du später
eine Backend/API-Verbindung ergänzen.

Die Architektur ist bereits darauf vorbereitet.
*/

/* =====================================================
   ELEMENTE
===================================================== */

const chat = document.getElementById("chat");
const chatInner = document.getElementById("chatInner");
const form = document.getElementById("chatForm");
const input = document.getElementById("input");
const sendButton = document.getElementById("sendButton");


/* =====================================================
   UTILS
===================================================== */

function escapeHtml(value) {
    return String(value)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}


function scrollBottom() {
    requestAnimationFrame(() => {
        chat.scrollTop = chat.scrollHeight;
    });
}


function detectLanguage(code, prompt = "") {

    const text = `${prompt}\n${code}`.toLowerCase();

    if (
        /<!doctype html|<html|<body|<div|<section|<script/.test(text)
    ) {
        return "html";
    }

    if (
        /SELECT\s+.+\s+FROM|INSERT\s+INTO|UPDATE\s+\w+\s+SET|DELETE\s+FROM/i.test(code)
    ) {
        return "sql";
    }

    if (
        /\bdef\s+\w+\s*\(|\bimport\s+\w+|from\s+\w+\s+import|print\s*\(/.test(code)
    ) {
        return "python";
    }

    if (
        /#include\s*<|std::|cout\s*<<|cin\s*>>/.test(code)
    ) {
        return "cpp";
    }

    if (
        /\bpublic\s+static\s+void\s+main\b|System\.out\.println/.test(code)
    ) {
        return "java";
    }

    if (
        /<style>|[.#][\w-]+\s*\{[\s\S]*?:[\s\S]*?;/.test(code)
    ) {
        return "css";
    }

    return "javascript";
}


/* =====================================================
   CODE EXTRACTOR
===================================================== */

function extractCode(prompt) {

    const fenced = prompt.match(/```(?:[\w+#.-]+)?\s*([\s\S]*?)```/);

    if (fenced) {
        return fenced[1].trim();
    }

    const prefixes = [
        "verbessere:",
        "verbessere",
        "optimier:",
        "optimieren:",
        "optimiere:",
        "analysiere:",
        "analysiere",
        "fix:",
        "fixe:",
        "refactor:",
        "refaktoriere:"
    ];

    let result = prompt.trim();

    for (const prefix of prefixes) {

        if (result.toLowerCase().startsWith(prefix)) {
            result = result.slice(prefix.length).trim();
            break;
        }
    }

    return result;
}


/* =====================================================
   SYNTAX HIGHLIGHTING
===================================================== */

function highlightCode(code, language) {

    let html = escapeHtml(code);

    /*
     * Placeholder-System verhindert,
     * dass Token ineinander verschachtelt werden.
     */

    const tokens = [];

    function protect(regex, className) {

        html = html.replace(regex, match => {

            const id = `___TOKEN_${tokens.length}___`;

            tokens.push(
                `<span class="${className}">${match}</span>`
            );

            return id;
        });
    }

    protect(/("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`)/g, "token-string");

    protect(/(\/\/[^\n]*|\/\*[\s\S]*?\*\/|#[^\n]*)/g, "token-comment");

    protect(/\b\d+(?:\.\d+)?\b/g, "token-number");

    const keywordPattern =
        language === "python"
            ? /\b(and|as|assert|async|await|break|class|continue|def|elif|else|except|False|finally|for|from|if|import|in|is|lambda|None|not|or|pass|raise|return|True|try|while|with|yield)\b/g
            : /\b(const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|class|new|this|async|await|try|catch|finally|throw|import|export|from|default|typeof|instanceof|extends|static|public|private|protected|void|int|float|boolean|null|true|false)\b/g;

    protect(keywordPattern, "token-keyword");

    html = html.replace(
        /\b([A-Za-z_$][\w$]*)(?=\()/g,
        '<span class="token-function">$1</span>'
    );

    html = html.replace(
        /___TOKEN_(\d+)___/g,
        (_, index) => tokens[Number(index)]
    );

    return html;
}


/* =====================================================
   CODE BLOCK
===================================================== */

function codeBlock(code, language, id = "") {

    const safeCode = code.trim();

    const lines = safeCode.split("\n");

    const numbers = lines
        .map((_, index) => index + 1)
        .join("\n");

    return `
        <div class="code-container">

            <div class="code-header">

                <span class="code-language">
                    ${escapeHtml(language)}
                </span>

                <div class="code-actions">

                    <button
                        class="small-btn"
                        onclick="copyCode(this)"
                        type="button">
                        Kopieren
                    </button>

                    <button
                        class="small-btn"
                        onclick="downloadCode(this)"
                        type="button">
                        Speichern
                    </button>

                </div>

            </div>

            <div class="code-body">

                <div class="line-numbers">
                    ${numbers}
                </div>

                <div
                    class="code-content"
                    data-code="${escapeHtml(safeCode)}"
                    id="${id}">
                    ${highlightCode(safeCode, language)}
                </div>

            </div>

        </div>
    `;
}


/* =====================================================
   COPY
===================================================== */

async function copyCode(button) {

    const container = button.closest(".code-container");
    const code = container.querySelector(".code-content");

    const text = code.innerText;

    try {

        await navigator.clipboard.writeText(text);

        button.textContent = "Kopiert ✓";

        setTimeout(() => {
            button.textContent = "Kopieren";
        }, 1600);

    } catch {

        button.textContent = "Fehler";

    }
}


/* =====================================================
   DOWNLOAD
===================================================== */

function downloadCode(button) {

    const container = button.closest(".code-container");
    const code = container.querySelector(".code-content").innerText;

    const language =
        container
            .querySelector(".code-language")
            .textContent
            .trim()
            .toLowerCase();

    const extensions = {
        javascript: "js",
        typescript: "ts",
        python: "py",
        html: "html",
        css: "css",
        sql: "sql",
        java: "java",
        cpp: "cpp",
        csharp: "cs",
        php: "php"
    };

    const extension = extensions[language] || "txt";

    const blob = new Blob([code], {
        type: "text/plain"
    });

    const url = URL.createObjectURL(blob);

    const a = document.createElement("a");

    a.href = url;
    a.download = `devmind-code.${extension}`;

    a.click();

    URL.revokeObjectURL(url);
}


/* =====================================================
   MESSAGE
===================================================== */

function addUserMessage(text) {

    const element = document.createElement("div");

    element.className = "message user";

    element.innerHTML = `
        <div class="message-content">
            ${escapeHtml(text).replace(/\n/g, "<br>")}
        </div>
    `;

    chatInner.appendChild(element);

    scrollBottom();
}


function addAiMessage(html) {

    const element = document.createElement("div");

    element.className = "message ai";

    element.innerHTML = `
        <div class="message-content">

            <div class="message-label">
                <span class="ai-icon">⌘</span>
                DevMind AI
            </div>

            ${html}

        </div>
    `;

    chatInner.appendChild(element);

    scrollBottom();

    return element;
}


/* =====================================================
   ANALYSE ENGINE
===================================================== */

function analyzeCode(code, language) {

    const issues = [];
    const improvements = [];

    const lower = code.toLowerCase();

    /* -------------------------
       VAR
    ------------------------- */

    if (
        language === "javascript" &&
        /\bvar\b/.test(code)
    ) {

        issues.push({
            type: "quality",
            title: "var statt const/let",
            description:
                "var besitzt Function Scope und kann zu schwer nachvollziehbarem Verhalten führen."
        });

        improvements.push({
            type: "style",
            title: "Block Scope verwenden",
            description:
                "Variablen sollten je nach Änderbarkeit mit const oder let deklariert werden."
        });
    }


    /* -------------------------
       CONSOLE
    ------------------------- */

    if (
        language === "javascript" &&
        /console\.log\s*\(/.test(code)
    ) {

        improvements.push({
            type: "quality",
            title: "Debug-Ausgaben prüfen",
            description:
                "console.log-Aufrufe sollten in produktivem Code gezielt eingesetzt oder durch ein Logging-System ersetzt werden."
        });
    }


    /* -------------------------
       INNERHTML
    ------------------------- */

    if (
        /innerHTML\s*=/.test(code)
    ) {

        issues.push({
            type: "security",
            title: "innerHTML erkannt",
            description:
                "Dynamische Inhalte mit innerHTML können bei ungeprüften Benutzerdaten XSS-Risiken erzeugen."
        });
    }


    /* -------------------------
       SQL INJECTION
    ------------------------- */

    if (
        /SELECT[\s\S]*['"`]\s*\+|SELECT[\s\S]*\$\{/.test(code)
    ) {

        issues.push({
            type: "security",
            title: "Mögliche SQL Injection",
            description:
                "SQL wird offenbar durch String-Konkatenation oder direkte Interpolation zusammengesetzt."
        });
    }


    /* -------------------------
       FETCH
    ------------------------- */

    if (
        /\bfetch\s*\(/.test(code) &&
        !/\.catch\s*\(|try\s*\{/.test(code)
    ) {

        issues.push({
            type: "bug",
            title: "Fehlerbehandlung fehlt",
            description:
                "Netzwerkfehler und fehlgeschlagene Requests werden nicht sichtbar behandelt."
        });

        improvements.push({
            type: "quality",
            title: "HTTP-Fehler explizit behandeln",
            description:
                "response.ok sollte geprüft und Netzwerkfehler sollten abgefangen werden."
        });
    }


    /* -------------------------
       FOR LOOP
    ------------------------- */

    if (
        language === "javascript" &&
        /for\s*\(\s*(?:let|var)\s+\w+\s*=/.test(code)
    ) {

        improvements.push({
            type: "performance",
            title: "Iteration überprüfen",
            description:
                "Bei einfachen Array-Operationen können moderne Array-Methoden oder for...of die Absicht deutlicher ausdrücken."
        });
    }


    /* -------------------------
       PYTHON SQL
    ------------------------- */

    if (
        language === "python" &&
        /SELECT[\s\S]*\+/.test(code)
    ) {

        issues.push({
            type: "security",
            title: "Unsichere SQL-Erzeugung",
            description:
                "SQL sollte über parametrisierte Queries beziehungsweise Prepared Statements ausgeführt werden."
        });
    }


    /* -------------------------
       EMPTY CATCH
    ------------------------- */

    if (
        /catch\s*\([^)]*\)\s*\{\s*\}/.test(code)
    ) {

        issues.push({
            type: "bug",
            title: "Leerer catch-Block",
            description:
                "Fehler werden abgefangen, aber vollständig ignoriert."
        });
    }


    /* -------------------------
       LONG FUNCTION
    ------------------------- */

    const functionBlocks = code.match(
        /function\s+\w+\s*\([^)]*\)\s*\{[\s\S]*?\}/g
    );

    if (
        functionBlocks &&
        functionBlocks.some(fn => fn.split("\n").length > 35)
    ) {

        improvements.push({
            type: "quality",
            title: "Große Funktion",
            description:
                "Sehr große Funktionen lassen sich oft besser in kleinere, klar benannte Einheiten aufteilen."
        });
    }


    /* -------------------------
       MAGIC NUMBERS
    ------------------------- */

    const numbers = code.match(/\b\d{2,}\b/g);

    if (
        numbers &&
        numbers.length >= 3
    ) {

        improvements.push({
            type: "style",
            title: "Magic Numbers",
            description:
                "Mehrere fest codierte Zahlen könnten als benannte Konstanten verständlicher werden."
        });
    }


    /* -------------------------
       COMMENTS
    ------------------------- */

    if (
        code.length > 500 &&
        !/\/\*|\/\/|#/.test(code)
    ) {

        improvements.push({
            type: "quality",
            title: "Dokumentation prüfen",
            description:
                "Bei komplexer Logik könnten gezielte Kommentare oder aussagekräftige Funktionsnamen helfen."
        });
    }


    return {
        issues,
        improvements
    };
}


/* =====================================================
   IMPROVEMENT ENGINE
===================================================== */

function improveCode(code, language) {

    let improved = code;
    const changes = [];

    /*
     * Nur sichere und nachvollziehbare Transformationen.
     */

    if (
        language === "javascript" &&
        /\bvar\b/.test(improved)
    ) {

        improved = improved.replace(
            /\bvar\b/g,
            "const"
        );

        changes.push({
            type: "style",
            title: "var → const",
            description:
                "Nicht neu zugewiesene Variablen werden als const behandelt."
        });
    }


    if (
        language === "javascript" &&
        /function\s+([A-Za-z_$][\w$]*)\s*\(([^)]*)\)\s*\{/.test(improved)
    ) {

        /*
         * Wir wandeln Funktionen nicht pauschal um.
         * Stattdessen dokumentieren wir nur die Möglichkeit.
         */

        changes.push({
            type: "quality",
            title: "Funktionssyntax geprüft",
            description:
                "Die Funktion wurde auf moderne JavaScript-Syntax geprüft. Eine Umwandlung in Arrow Functions erfolgt nicht automatisch, da this-Verhalten davon abhängen kann."
        });
    }


    if (
        /\bfetch\s*\(/.test(improved) &&
        !/response\.ok/.test(improved)
    ) {

        changes.push({
            type: "bug",
            title: "HTTP-Statusprüfung empfohlen",
            description:
                "fetch wirft bei HTTP-Statusfehlern nicht automatisch einen Fehler. response.ok sollte deshalb geprüft werden."
        });
    }


    return {
        code: improved,
        changes
    };
}


/* =====================================================
   ANALYSIS HTML
===================================================== */

function analysisHtml(result, code, language) {

    const total =
        result.issues.length +
        result.improvements.length;

    let html = `
        <div>
            <strong>Codeanalyse abgeschlossen.</strong>

            <div class="analysis-summary">

                <div class="metric">
                    <div class="metric-label">Probleme</div>
                    <div class="metric-value">
                        ${result.issues.length}
                    </div>
                </div>

                <div class="metric">
                    <div class="metric-label">Vorschläge</div>
                    <div class="metric-value">
                        ${result.improvements.length}
                    </div>
                </div>

                <div class="metric">
                    <div class="metric-label">Sprache</div>
                    <div class="metric-value" style="font-size:14px">
                        ${escapeHtml(language)}
                    </div>
                </div>

                <div class="metric">
                    <div class="metric-label">Zeilen</div>
                    <div class="metric-value">
                        ${code.split("\n").length}
                    </div>
                </div>

            </div>
    `;

    if (total === 0) {

        html += `
            <div class="improvement">
                <div class="improvement-head">
                    ✓ Keine offensichtlichen Probleme erkannt
                </div>

                <div class="improvement-description">
                    Die lokale Analyse hat keine der eingebauten
                    Problemregeln ausgelöst. Das bedeutet nicht,
                    dass der Code mathematisch oder semantisch
                    garantiert korrekt ist.
                </div>
            </div>
        `;

    } else {

        html += `<div class="improvement-list">`;

        for (const item of [
            ...result.issues,
            ...result.improvements
        ]) {

            html += `
                <div class="improvement">

                    <div class="improvement-head">

                        <span class="badge ${item.type}">
                            ${escapeHtml(item.type)}
                        </span>

                        ${escapeHtml(item.title)}

                    </div>

                    <div class="improvement-description">
                        ${escapeHtml(item.description)}
                    </div>

                </div>
            `;
        }

        html += `</div>`;
    }

    html += `
        </div>

        ${codeBlock(code, language)}
    `;

    return html;
}


/* =====================================================
   FULL IMPROVEMENT RESPONSE
===================================================== */

function improvementResponse(code, language) {

    const analysis = analyzeCode(code, language);
    const result = improveCode(code, language);

    let html = `
        <strong>Ich habe deinen Code analysiert und die Änderungen einzeln geprüft.</strong>

        <div class="analysis-summary">

            <div class="metric">
                <div class="metric-label">Probleme</div>
                <div class="metric-value">
                    ${analysis.issues.length}
                </div>
            </div>

            <div class="metric">
                <div class="metric-label">Änderungen</div>
                <div class="metric-value">
                    ${result.changes.length}
                </div>
            </div>

            <div class="metric">
                <div class="metric-label">Sprache</div>
                <div class="metric-value" style="font-size:14px">
                    ${escapeHtml(language)}
                </div>
            </div>

            <div class="metric">
                <div class="metric-label">Zeilen</div>
                <div class="metric-value">
                    ${code.split("\n").length}
                </div>
            </div>

        </div>
    `;

    if (result.changes.length) {

        html += `
            <strong>Was wurde verbessert?</strong>

            <div class="improvement-list">
        `;

        for (const change of result.changes) {

            html += `
                <div class="improvement">

                    <div class="improvement-head">

                        <span class="badge ${change.type}">
                            ${escapeHtml(change.type)}
                        </span>

                        ${escapeHtml(change.title)}

                    </div>

                    <div class="improvement-description">
                        ${escapeHtml(change.description)}
                    </div>

                </div>
            `;
        }

        html += `</div>`;

    } else {

        html += `
            <div class="improvement">
                <div class="improvement-head">
                    ℹ️ Keine automatische Änderung vorgenommen
                </div>

                <div class="improvement-description">
                    Ich ändere Code nicht nur, damit er anders aussieht.
                    Wenn keine sichere Verbesserung erkannt wird,
                    bleibt der Code unverändert.
                </div>
            </div>
        `;
    }

    html += `
        <br>

        <strong>Verbesserte Version:</strong>

        ${codeBlock(result.code, language)}

        <br>

        <strong>Zusätzliche Analyse:</strong>

        ${analysisHtml(
            analysis,
            result.code,
            language
        )}
    `;

    return html;
}


/* =====================================================
   EXPLAIN
===================================================== */

function explainCode(code, language) {

    const lines = code.split("\n");

    return `
        <strong>Code-Erklärung</strong>

        <p style="margin-top:10px;color:var(--muted)">
            Sprache: <strong style="color:var(--text)">
                ${escapeHtml(language)}
            </strong>
        </p>

        <p style="margin-top:8px;color:var(--muted)">
            Der Code besteht aus ${lines.length} Zeilen.
            DevMind untersucht Variablen, Funktionen,
            Kontrollstrukturen, Fehlerbehandlung und
            potenzielle Sicherheitsprobleme.
        </p>

        ${codeBlock(code, language)}
    `;
}


/* =====================================================
   API READY ARCHITECTURE
===================================================== */

/*
    Hier kann später eine echte KI angeschlossen werden.

    Beispiel:

    async function askRealAI(prompt) {

        const response = await fetch("/api/chat", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                message: prompt
            })
        });

        return await response.json();
    }

    WICHTIG:
    Einen API-Key niemals direkt in diese HTML-Datei schreiben.
    Verwende dafür ein Backend.
*/


/* =====================================================
   PROCESS
===================================================== */

function processPrompt(prompt, forcedAction = null) {

    const code = extractCode(prompt);

    if (!code || code.length < 2) {

        return `
            <strong>Ich brauche etwas Code zur Analyse.</strong>

            <p style="margin-top:8px;color:var(--muted)">
                Beispiel:
            </p>

            ${codeBlock(
                `var numbers = [1, 2, 3];\nvar result = numbers.map(function(n) {\n    return n * 2;\n});`,
                "javascript"
            )}
        `;
    }

    const language = detectLanguage(code, prompt);

    const p = prompt.toLowerCase();

    let action = forcedAction;

    if (!action) {

        if (
            /verbesser|optimier|refactor|refakt|verbessern|modernis/.test(p)
        ) {
            action = "improve";
        } else if (
            /bug|fehler|problem|kaputt|fix/.test(p)
        ) {
            action = "bug";
        } else if (
            /sicher|security|xss|injection/.test(p)
        ) {
            action = "security";
        } else if (
            /performance|schnell|optimierung|speed/.test(p)
        ) {
            action = "performance";
        } else if (
            /erklär|versteh|bedeutet|wie funktioniert/.test(p)
        ) {
            action = "explain";
        } else {
            action = "analyze";
        }
    }


    const analysis = analyzeCode(code, language);

    switch (action) {

        case "improve":
            return improvementResponse(code, language);

        case "bug":

            return analysisHtml(
                {
                    issues: analysis.issues.filter(
                        x => x.type === "bug"
                    ),
                    improvements: analysis.improvements
                },
                code,
                language
            );

        case "security":

            return analysisHtml(
                {
                    issues: analysis.issues.filter(
                        x => x.type === "security"
                    ),
                    improvements: analysis.improvements
                },
                code,
                language
            );

        case "performance":

            return analysisHtml(
                {
                    issues: analysis.issues.filter(
                        x => x.type === "performance"
                    ),
                    improvements: analysis.improvements.filter(
                        x => x.type === "performance"
                    )
                },
                code,
                language
            );

        case "explain":
            return explainCode(code, language);

        default:
            return analysisHtml(
                analysis,
                code,
                language
            );
    }
}


/* =====================================================
   SUBMIT
===================================================== */

form.addEventListener("submit", event => {

    event.preventDefault();

    const prompt = input.value.trim();

    if (!prompt) return;

    addUserMessage(prompt);

    input.value = "";
    input.style.height = "36px";

    sendButton.disabled = true;

    const loading = addAiMessage(`
        <span style="color:var(--muted)">
            🔍 Analysiere Code-Struktur...
        </span>
    `);

    setTimeout(() => {

        const result = processPrompt(prompt);

        loading.querySelector(".message-content").innerHTML = `
            <div class="message-label">
                <span class="ai-icon">⌘</span>
                DevMind AI
            </div>

            ${result}
        `;

        sendButton.disabled = false;

        scrollBottom();

    }, 350);
});


/* =====================================================
   QUICK ACTIONS
===================================================== */

document.querySelectorAll(".quick-btn").forEach(button => {

    button.addEventListener("click", () => {

        const action = button.dataset.action;

        const code = extractCode(input.value.trim());

        if (!code) {

            input.focus();

            input.placeholder =
                "Füge zuerst deinen Code ein...";

            return;
        }

        addUserMessage(
            `${button.textContent.trim()}\n\n${code}`
        );

        input.value = "";

        const loading = addAiMessage(`
            <span style="color:var(--muted)">
                🔍 Analysiere...
            </span>
        `);

        setTimeout(() => {

            const result =
                processPrompt(code, action);

            loading.querySelector(
                ".message-content"
            ).innerHTML = `
                <div class="message-label">
                    <span class="ai-icon">⌘</span>
                    DevMind AI
                </div>

                ${result}
            `;

            scrollBottom();

        }, 350);
    });
});


/* =====================================================
   EXAMPLES
===================================================== */

document.querySelectorAll(".example").forEach(button => {

    button.addEventListener("click", () => {

        input.value = button.dataset.example;

        input.dispatchEvent(
            new Event("input")
        );

        input.focus();
    });
});


/* =====================================================
   TEXTAREA AUTO SIZE
===================================================== */

input.addEventListener("input", () => {

    input.style.height = "36px";

    input.style.height =
        Math.min(
            input.scrollHeight,
            180
        ) + "px";
});


/* =====================================================
   ENTER
===================================================== */

input.addEventListener("keydown", event => {

    if (
        event.key === "Enter" &&
        !event.shiftKey
    ) {

        event.preventDefault();

        form.requestSubmit();
    }
});


/* =====================================================
   INITIAL
===================================================== */

console.log(
    "DevMind AI Studio Pro – Code Intelligence Engine gestartet."
);

</script>

</body>
</html>

Game Source: DevMind AI Studio Pro

Creator: SparkOwl48

Libraries: none

Complexity: complex (2021 lines, 44.1 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-pro-sparkowl48" to link back to the original. Then publish at arcadelab.ai/publish.