From 2074cc3eed8a4efe1eb3ef5746c3b327f71549c5 Mon Sep 17 00:00:00 2001
From: simonpipe <simonpipe@noreply.codeberg.org>
Date: Tue, 7 Jul 2026 20:48:52 +0200
Subject: [PATCH] Update index.html

---
 index.html | 207 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 206 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 32f95c0..b1c21a8 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,206 @@
-hi
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SimonUp – Live Playground</title>
+    <style>
+        :root {
+            --bg-color: #f8f9fa;
+            --panel-bg: #ffffff;
+            --text-color: #212529;
+            --border-color: #dee2e6;
+            --accent-color: #007bff;
+            --font-mono: 'Fira Code', 'Courier New', Courier, monospace;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        header {
+            background-color: var(--panel-bg);
+            border-bottom: 1px solid var(--border-color);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        header h1 {
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+
+        header h1 span {
+            color: var(--accent-color);
+        }
+
+        .subtitle {
+            font-size: 0.85rem;
+            color: #6c757d;
+        }
+
+        .main-container {
+            flex: 1;
+            display: flex;
+            overflow: hidden;
+        }
+
+        .panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .panel-header {
+            background-color: #e9ecef;
+            padding: 0.5rem 1rem;
+            font-size: 0.8rem;
+            font-weight: bold;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: #495057;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        #editor {
+            flex: 1;
+            width: 100%;
+            height: 100%;
+            padding: 1rem;
+            border: none;
+            resize: none;
+            font-family: var(--font-mono);
+            font-size: 1rem;
+            line-height: 1.5;
+            outline: none;
+            background-color: var(--panel-bg);
+            color: var(--text-color);
+        }
+
+        #preview {
+            flex: 1;
+            padding: 1.5rem;
+            overflow-y: auto;
+            background-color: var(--panel-bg);
+            border-left: 1px solid var(--border-color);
+            line-height: 1.6;
+        }
+
+        /* Styling für das gerenderte SimonUp-HTML */
+        #preview h1, #preview h2, #preview h3 {
+            margin-top: 1.5rem;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+        }
+        #preview p {
+            margin-bottom: 1rem;
+        }
+        #preview code {
+            background-color: #f1f3f5;
+            padding: 0.2rem 0.4rem;
+            border-radius: 4px;
+            font-family: var(--font-mono);
+            font-size: 0.9em;
+        }
+        #preview .simonup-toc-wrapper {
+            background-color: #f8f9fa;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+        }
+        #preview .simonup-toc ul {
+            margin-left: 1.5rem;
+        }
+        #preview table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 1rem;
+        }
+        #preview th, #preview td {
+            border: 1px solid var(--border-color);
+            padding: 0.5rem;
+            text-align: left;
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <div>
+            <h1>Simon<span>Up</span> Playground</h1>
+            <p class="subtitle">Die moderne Fluss- & Block-Auszeichnungssprache</p>
+        </div>
+    </header>
+
+    <div class="main-container">
+        <div class="panel">
+            <div class="panel-header">SimonUp Input (.up)</div>
+            <textarea id="editor" placeholder="Tippe dein SimonUp hier..." spellcheck="false">&toc Inhaltsverzeichnis
+Die Spielwiese läuft! Hier ist die Übersicht deiner Kapitel.
+&
+
+1#x Willkommen bei SimonUp! 1#x
+Das hier ist der Live-Editor für deine neue Sprache. Wenn du diesen Text änderst, siehst du rechts sofort das Ergebnis.
+
+2#x Coole Fluss-Formatierungen 2#x
+Du kannst Text problemlos **fett machen**, ihn /kursiv setzen/ oder sogar =wichtige Dinge markieren=. Alles mitten im Satz!
+
+2#x Intelligente Blöcke 2#x
+Hier ist eine schnelle Tabelle:
+
+&t 3x
+**Name** | **Beruf** | **Status** |
+Steve Jobs | Visionär | Legende |
+Simon | Architekt | Baut SimonUp |
+&
+
+Viel Spaß beim Testen!</textarea>
+        </div>
+
+        <div class="panel">
+            <div class="panel-header">HTML Vorschau (Live)</div>
+            <div id="preview"></div>
+        </div>
+    </div>
+
+    <script src="Core.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const editor = document.getElementById('editor');
+            const preview = document.getElementById('preview');
+            
+            // Instanziiere deinen SimonUp-Compiler aus der Core.js
+            const compiler = new SimonUp();
+
+            function render() {
+                const rawText = editor.value;
+                // Jage den Text durch deine Core.js
+                const htmlOutput = compiler.parse(rawText);
+                // Setze das Ergebnis in die Vorschau
+                preview.innerHTML = htmlOutput;
+            }
+
+            // Live-Rendering bei jeder Tastatureingabe
+            editor.addEventListener('input', render);
+
+            // Initialer Render-Aufruf beim Laden der Seite
+            render();
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
