From 554b04ee17a044d40ff884987a6420131b93ff59 Mon Sep 17 00:00:00 2001
From: Branko May Trinkwald <bmt@mac.localdomain>
Date: Tue, 23 Dec 2025 23:11:00 +0100
Subject: [PATCH] schnippsi ui editor v.0.0

---
 crumbblocks/schnippsi_ui.html | 306 +++++++---------------------------
 1 file changed, 58 insertions(+), 248 deletions(-)
diff --git a/crumbblocks/schnippsi_ui.html b/crumbblocks/schnippsi_ui.html
index fb45f43..b6696f2 100755
--- a/crumbblocks/schnippsi_ui.html
+++ b/crumbblocks/schnippsi_ui.html
@@ -1,293 +1,103 @@
 <!DOCTYPE html>
 <html lang="de">
-
 <head>
   <meta charset="UTF-8">
+  <title>Schnippsis Live-Editor 🧁</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Dein Zeichen im Wald 🌿</title>
   <style>
-    /* ✂️ SCHNIPPSI'S CSS LABOR ✂️ */
-    :root {
-      --bg-color: #121212;
-      --text-color: #e0e0e0;
-      --glass-bg: rgba(255, 255, 255, 0.1);
-      --glass-border: rgba(255, 255, 255, 0.2);
-      --accent: #4caf50;
-      /* Waldgrün */
-      --accent-hover: #66bb6a;
-      --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
     body {
+      font-family: sans-serif;
       margin: 0;
+      padding: 0;
+      background: #fefce8;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto 1fr;
       height: 100vh;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      background: var(--bg-color);
-      color: var(--text-color);
-
-      /* Zentrierung: Das Herz des Layouts */
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      /* Ein bisschen Wald-Atmosphäre */
-      background-image: radial-gradient(circle at 50% 50%, #1e2820 0%, #0a0e0b 100%);
     }
 
-    /* Der Container für dein Zeichen */
-    .forest-container {
+    header {
+      grid-column: 1 / -1;
+      background: #ffb6b9;
+      color: #222;
+      padding: 1rem;
       text-align: center;
-    }
-
-    /* Das "Zeichen" (Der Button/Trigger) */
-    .sign-box {
-      background: var(--glass-bg);
-      backdrop-filter: blur(10px);
-      /* Der Glassmorphism Effekt */
-      -webkit-backdrop-filter: blur(10px);
-      border: 1px solid var(--glass-border);
-      border-radius: 20px;
-      padding: 40px 60px;
-      box-shadow: var(--shadow);
-      cursor: pointer;
-      transition: transform 0.3s ease, border-color 0.3s ease;
-    }
-
-    .sign-box:hover {
-      transform: translateY(-5px);
-      border-color: var(--accent);
-    }
-
-    .sign-icon {
-      font-size: 4rem;
-      margin-bottom: 10px;
-      display: block;
-    }
-
-    .sign-label {
-      font-size: 1.5rem;
       font-weight: bold;
-      letter-spacing: 1px;
     }
 
-    /* 🌶️ DAS MODAL (Overlay) */
-    .modal-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
+    textarea {
       width: 100%;
       height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      opacity: 0;
-      pointer-events: none;
-      /* Klick durchlassen wenn unsichtbar */
-      transition: opacity 0.3s ease;
-      z-index: 100;
-    }
-
-    .modal-overlay.active {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    .modal-content {
-      background: #1e1e1e;
-      border: 1px solid var(--accent);
-      border-radius: 15px;
-      padding: 30px;
-      width: 90%;
-      max-width: 400px;
-      box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
-      transform: scale(0.9);
-      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
-
-    .modal-overlay.active .modal-content {
-      transform: scale(1);
-    }
-
-    h3 {
-      margin-top: 0;
-      color: var(--accent);
-    }
-
-    label {
-      display: block;
-      margin: 15px 0 5px;
+      padding: 1rem;
+      font-family: monospace;
       font-size: 0.9rem;
-      color: #aaa;
-      text-align: left;
-    }
-
-    input,
-    textarea {
-      width: 100%;
-      padding: 10px;
-      background: #2a2a2a;
-      border: 1px solid #444;
-      border-radius: 5px;
-      color: white;
-      font-family: inherit;
-    }
-
-    textarea {
-      height: 100px;
+      border: none;
+      outline: none;
       resize: none;
     }
 
-    input:focus,
-    textarea:focus {
-      outline: none;
-      border-color: var(--accent);
-    }
-
-    .actions {
-      margin-top: 20px;
-      display: flex;
-      justify-content: space-between;
-    }
-
-    button {
-      padding: 10px 20px;
+    iframe {
+      width: 100%;
+      height: 100%;
       border: none;
-      border-radius: 5px;
-      cursor: pointer;
-      font-weight: bold;
-      transition: opacity 0.2s;
+      background: white;
     }
 
-    .btn-cancel {
-      background: transparent;
-      color: #aaa;
-      border: 1px solid #444;
+    .editor-section {
+      display: flex;
+      flex-direction: column;
     }
 
-    .btn-cancel:hover {
-      color: white;
-      border-color: white;
+    .code-inputs {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
     }
 
-    .btn-send {
-      background: var(--accent);
-      color: white;
-    }
-
-    .btn-submit:hover {
-      opacity: 0.9;
-    }
-
-    /* Nachricht nach dem Senden */
-    #status {
-      position: absolute;
-      bottom: 20px;
-      font-size: 0.9rem;
-      color: var(--accent);
-      opacity: 0;
-      transition: opacity 0.5s;
+    .code-inputs textarea {
+      border-right: 1px solid #ddd;
     }
   </style>
 </head>
-
 <body>
+  <header>
+    🧁 Schnippsis Web-Baukasten – HTML, CSS & JS live!
+  </header>
 
-  <!-- 🏛️ TEMPLATUS DOM STRUKTUR -->
-  <div class="forest-container">
-    <div class="sign-box" id="openModalBtn">
-      <span class="sign-icon">🌲</span>
-      <span class="sign-label">ZEICHEN SETZEN</span>
-    </div>
-    <div id="status">Daten kopiert! Zurück zum Terminal.</div>
-  </div>
-
-  <!-- MODAL -->
-  <div class="modal-overlay" id="modal">
-    <div class="modal-content">
-      <h3>Dein Zeichen im Wald</h3>
-      <p>Hinterlasse eine Nachricht für die anderen Krümel.</p>
-
-      <label for="inpName">Dein Name (oder Pseudonym)</label>
-      <input type="text" id="inpName" placeholder="z.B. Wanderer">
-
-      <label for="inpMsg">Deine Botschaft</label>
-      <textarea id="inpMsg" placeholder="Was hast du entdeckt?"></textarea>
-
-      <div class="actions">
-        <button class="btn-cancel" id="closeModalBtn">Abbrechen</button>
-        <button class="btn-send" id="sendBtn">🚀 Senden</button>
-      </div>
+  <div class="editor-section">
+    <div class="code-inputs">
+      <textarea id="htmlCode" placeholder="💡 HTML hier..."></textarea>
+      <textarea id="cssCode" placeholder="🎨 CSS hier..."></textarea>
+      <textarea id="jsCode" placeholder="⚙️ JavaScript hier..."></textarea>
     </div>
   </div>
 
+  <iframe id="preview"></iframe>
+
   <script>
-    // 🌶️ PEPPER'S LOGIK LABOR
+    const htmlInput = document.getElementById('htmlCode');
+    const cssInput = document.getElementById('cssCode');
+    const jsInput = document.getElementById('jsCode');
+    const previewFrame = document.getElementById('preview');
 
-    const modal = document.getElementById('modal');
-    const btnOpen = document.getElementById('openModalBtn');
-    const btnClose = document.getElementById('closeModalBtn');
-    const btnSend = document.getElementById('sendBtn');
+    function updatePreview() {
+      const html = htmlInput.value;
+      const css = `<style>${cssInput.value}</style>`;
+      const js = `<script>${jsInput.value}<\/script>`;
 
-    const inpName = document.getElementById('inpName');
-    const inpMsg = document.getElementById('inpMsg');
-    const status = document.getElementById('status');
+      previewFrame.srcdoc = html + css + js;
+    }
 
-    // Modal öffnen
-    btnOpen.addEventListener('click', () => {
-      modal.classList.add('active');
-      inpName.focus();
+    [htmlInput, cssInput, jsInput].forEach(el => {
+      el.addEventListener('input', updatePreview);
     });
 
-    // Modal schließen
-    btnClose.addEventListener('click', () => {
-      modal.classList.remove('active');
-    });
+    // Schnippsi-Vorschlag (Startzustand)
+    htmlInput.value = `<h1>Hallo Krümel! 🌼</h1>\n<p>Dies ist dein erstes HTML im Editor!</p>`;
+    cssInput.value = `body { font-family: sans-serif; background: #fff8dc; color: #333; padding: 2rem; }`;
+    jsInput.value = `console.log("Krümel hat gerade Schnippsis Editor benutzt! 🧁");`;
 
-    // Klick auf Hintergrund schließt auch
-    modal.addEventListener('click', (e) => {
-      if (e.target === modal) modal.classList.remove('active');
-    });
-
-    // Senden & JSON bauen
-    btnSend.addEventListener('click', async () => {
-      const name = inpName.value.trim() || 'Unbekannt';
-      const msg = inpMsg.value.trim() || 'Stilles Rauschen...';
-
-      // Das Datenpaket für die Crew
-      const data = {
-        mission: "schnippsi_ui",
-        author: name,
-        message: msg,
-        timestamp: new Date().toISOString(),
-        style: "glassmorphism"
-      };
-
-      const jsonStr = JSON.stringify(data, null, 2);
-
-      try {
-        await navigator.clipboard.writeText(jsonStr);
-
-        // UI Feedback
-        modal.classList.remove('active');
-        status.textContent = "✨ Copied! Füge es jetzt im Terminal ein: ./missions/evaluate_sign.sh";
-        status.style.opacity = '1';
-
-        // Nach 3s ausblenden
-        setTimeout(() => { status.style.opacity = '0'; }, 5000);
-
-      } catch (err) {
-        alert("Fehler beim Kopieren: " + err);
-      }
-    });
+    updatePreview();
   </script>
-
 </body>
-
-</html>
\ No newline at end of file
+</html>
