feat: Eingabe-Tab mit bidirektionaler Farbumrechnung

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -22,8 +22,27 @@
       <p>Picker kommt hier</p>
     </section>
     <section id="tab-eingabe" class="tab-content">
-      <p>Eingabe kommt hier</p>
-    </section>
+  <h2>Farbe eingeben</h2>
+  <div id="eingabe-preview" class="color-preview" style="background:#3a8fc1"></div>
+  <div class="color-codes">
+    <div class="color-code-group">
+      <label>Hex</label>
+      <input id="eingabe-hex" type="text" value="#3a8fc1" maxlength="7">
+    </div>
+    <div class="color-code-group">
+      <label>RGB</label>
+      <input id="eingabe-rgb" type="text" value="58, 143, 193">
+    </div>
+    <div class="color-code-group">
+      <label>HSL</label>
+      <input id="eingabe-hsl" type="text" value="204, 54%, 49%">
+    </div>
+  </div>
+  <div style="display:flex;gap:0.5rem">
+    <button class="action-btn" id="eingabe-fav-btn">Zu Favoriten</button>
+    <button class="action-btn" id="eingabe-schema-btn">Zu Schema hinzufügen</button>
+  </div>
+</section>
     <section id="tab-harmonien" class="tab-content">
       <p>Harmonien kommen hier</p>
     </section>

js/app.js

@@ -21,3 +21,10 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
     if (section) section.classList.add('active');
   });
 });
+
+import { initEingabe } from './eingabe.js';
+
+function addFavorit(hsl) { console.log('addFavorit', hsl); }
+function addColorToSchema(hsl) { console.log('addColorToSchema', hsl); }
+
+initEingabe(addFavorit, addColorToSchema);

js/eingabe.js

@@ -0,0 +1,74 @@
+import { hexToRgb, rgbToHex, hexToHsl, hslToHex, hslToRgb, rgbToHsl } from './converter.js';
+import { state } from './app.js';
+
+function hslToDisplay({ h, s, l }) { return h + ', ' + s + '%, ' + l + '%'; }
+function rgbToDisplay({ r, g, b }) { return r + ', ' + g + ', ' + b; }
+
+function parseRgb(str) {
+  const parts = str.replace(/[^\d,]/g, '').split(',').map(Number);
+  if (parts.length !== 3 || parts.some(isNaN)) return null;
+  const [r, g, b] = parts;
+  if ([r, g, b].some(v => v < 0 || v > 255)) return null;
+  return { r, g, b };
+}
+
+function parseHsl(str) {
+  const parts = str.replace(/[^\d,]/g, '').split(',').map(Number);
+  if (parts.length !== 3 || parts.some(isNaN)) return null;
+  const [h, s, l] = parts;
+  if (h < 0 || h > 360 || s < 0 || s > 100 || l < 0 || l > 100) return null;
+  return { h, s, l };
+}
+
+function updateUI(hsl) {
+  const hex = hslToHex(hsl);
+  const rgb = hslToRgb(hsl);
+  document.getElementById('eingabe-preview').style.background = hex;
+  document.getElementById('eingabe-hex').value = hex;
+  document.getElementById('eingabe-rgb').value = rgbToDisplay(rgb);
+  document.getElementById('eingabe-hsl').value = hslToDisplay(hsl);
+}
+
+export function initEingabe(onSaveFavorit, onSaveSchema) {
+  const hexInput = document.getElementById('eingabe-hex');
+  const rgbInput = document.getElementById('eingabe-rgb');
+  const hslInput = document.getElementById('eingabe-hsl');
+
+  hexInput.addEventListener('input', () => {
+    const val = hexInput.value.trim();
+    if (/^#[0-9a-fA-F]{6}$/.test(val)) {
+      const hsl = hexToHsl(val);
+      state.setColor(hsl);
+      updateUI(hsl);
+    }
+  });
+
+  rgbInput.addEventListener('input', () => {
+    const rgb = parseRgb(rgbInput.value);
+    if (rgb) {
+      const hsl = rgbToHsl(rgb);
+      state.setColor(hsl);
+      updateUI(hsl);
+    }
+  });
+
+  hslInput.addEventListener('input', () => {
+    const hsl = parseHsl(hslInput.value);
+    if (hsl) {
+      state.setColor(hsl);
+      updateUI(hsl);
+    }
+  });
+
+  document.addEventListener('colorChanged', () => updateUI(state.color));
+
+  document.getElementById('eingabe-fav-btn').addEventListener('click', () => {
+    onSaveFavorit(state.color);
+  });
+
+  document.getElementById('eingabe-schema-btn').addEventListener('click', () => {
+    onSaveSchema(state.color);
+  });
+
+  updateUI(state.color);
+}