feat: Modal zum manuellen Erstellen von Farbschemata

index.html

@@ -91,10 +91,54 @@
   <div id="sammlung-history" style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.5rem"></div>
 
   <h3>Farbschemata</h3>
+  <button class="action-btn" id="schema-erstellen-btn" style="margin-bottom:1rem">+ Schema erstellen</button>
   <div id="sammlung-schemata"></div>
 </section>
   </main>
 
+  <!-- Schema-Modal -->
+  <div id="schema-modal-overlay" class="modal-overlay" style="display:none">
+    <div class="modal">
+      <h2 style="margin-bottom:1rem">Neues Farbschema</h2>
+
+      <div class="modal-field">
+        <label for="schema-name-input">Name</label>
+        <input id="schema-name-input" type="text" placeholder="z.B. Website Relaunch">
+      </div>
+
+      <div id="schema-farben-preview" class="schema-farben-preview"></div>
+
+      <div id="schema-farbe-eingabe">
+        <p id="schema-farbe-label" class="subtitle" style="margin-bottom:0.5rem">Farbe 1</p>
+
+        <div class="modal-field">
+          <label for="schema-hex-input">Hex-Code</label>
+          <div style="display:flex;gap:0.5rem;align-items:center">
+            <input id="schema-hex-input" type="text" placeholder="#3a8fc1" maxlength="7" style="width:120px">
+            <div id="schema-hex-preview" style="width:36px;height:36px;border-radius:6px;border:1px solid #ddd;background:#eee;flex-shrink:0"></div>
+          </div>
+        </div>
+
+        <p class="subtitle" style="margin:0.75rem 0 0.5rem">oder Bild hochladen</p>
+        <div id="schema-dropzone" class="schema-dropzone">
+          <p>Bild hier ablegen oder</p>
+          <button class="action-btn" id="schema-file-trigger" type="button">Datei wählen</button>
+          <input type="file" id="schema-file-input" accept="image/*" style="display:none">
+        </div>
+        <canvas id="schema-canvas" style="display:none;max-width:100%;cursor:crosshair;border-radius:6px;border:1px solid #ddd;margin-top:0.5rem"></canvas>
+
+        <div class="btn-row" style="margin-top:1rem">
+          <button class="action-btn" id="schema-farbe-hinzufuegen-btn" type="button">Farbe hinzufügen</button>
+        </div>
+      </div>
+
+      <div class="btn-row" style="margin-top:1.5rem;justify-content:space-between">
+        <button class="action-btn" id="schema-abbrechen-btn" type="button">Abbrechen</button>
+        <button class="action-btn" id="schema-abschliessen-btn" type="button" style="background:#222;color:#fff;border-color:#222" disabled>Abschließen</button>
+      </div>
+    </div>
+  </div>
+
   <script type="module" src="js/app.js"></script>
 </body>
 </html>

js/app.js

@@ -1,7 +1,8 @@
 import { initEingabe } from './eingabe.js';
 import { initPicker } from './picker.js';
 import { initHarmonien } from './harmonien.js';
-import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection } from './collection.js';
+import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema } from './collection.js';
+import { initSchemaModal } from './schema-modal.js';
 
 // state.color is read-only from outside — always use setColor() to update,
 // so that the colorChanged event is dispatched to all listening modules.
@@ -37,3 +38,4 @@ document.getElementById('sammlung-export-btn').addEventListener('click', exportC
 document.getElementById('sammlung-import-btn').addEventListener('click', importCollection);
 
 renderSammlung();
+initSchemaModal(saveSchema);

js/collection.js

@@ -74,6 +74,18 @@ export function addColorToSchema(hsl) {
   }
 }
 
+export function saveSchema(name, farben) {
+  const data = load();
+  const existing = data.schemata.find(s => s.name === name);
+  if (existing) {
+    existing.farben = farben;
+  } else {
+    data.schemata.push({ name, farben });
+  }
+  save(data);
+  renderSammlung();
+}
+
 export function deleteSchema(name) {
   const data = load();
   data.schemata = data.schemata.filter(s => s.name !== name);

js/schema-modal.js

@@ -0,0 +1,192 @@
+import { hexToHsl, hslToHex, rgbToHsl, rgbToHex } from './converter.js';
+
+const MAX_FARBEN = 4;
+
+// Aktuell gesammelter Zustand des Modals
+let farben = [];       // Array von HSL-Objekten
+let aktuelleHex = '';  // Hex-Wert des aktuellen Eingabefelds
+
+function resetModal() {
+  farben = [];
+  aktuelleHex = '';
+  document.getElementById('schema-name-input').value = '';
+  document.getElementById('schema-hex-input').value = '';
+  document.getElementById('schema-hex-preview').style.background = '#eee';
+  document.getElementById('schema-farben-preview').textContent = '';
+  document.getElementById('schema-canvas').style.display = 'none';
+  document.getElementById('schema-canvas').getContext('2d').clearRect(0, 0, 1, 1);
+  document.getElementById('schema-farbe-eingabe').style.display = 'block';
+  document.getElementById('schema-abschliessen-btn').disabled = true;
+  updateFarbeLabel();
+}
+
+function updateFarbeLabel() {
+  document.getElementById('schema-farbe-label').textContent =
+    'Farbe ' + (farben.length + 1) + (farben.length === MAX_FARBEN - 1 ? ' (letzte)' : '');
+}
+
+function renderFarbenPreview() {
+  const container = document.getElementById('schema-farben-preview');
+  container.textContent = '';
+  farben.forEach((hsl, i) => {
+    const hex = hslToHex(hsl);
+    const cell = document.createElement('div');
+    cell.style.cssText = 'display:inline-flex;flex-direction:column;align-items:center;gap:0.2rem';
+
+    const swatch = document.createElement('div');
+    swatch.style.cssText = 'width:44px;height:44px;border-radius:6px;border:1px solid #ddd;background:' + hex;
+    swatch.title = hex;
+
+    const label = document.createElement('span');
+    label.style.cssText = 'font-size:0.7rem;font-family:monospace;color:#666';
+    label.textContent = hex;
+
+    const removeBtn = document.createElement('button');
+    removeBtn.className = 'action-btn';
+    removeBtn.style.fontSize = '0.65rem';
+    removeBtn.textContent = '✕';
+    removeBtn.addEventListener('click', () => {
+      farben.splice(i, 1);
+      renderFarbenPreview();
+      updateFarbeLabel();
+      document.getElementById('schema-farbe-eingabe').style.display = 'block';
+      document.getElementById('schema-abschliessen-btn').disabled = farben.length === 0;
+    });
+
+    cell.appendChild(swatch);
+    cell.appendChild(label);
+    cell.appendChild(removeBtn);
+    container.appendChild(cell);
+  });
+}
+
+function loadImageOnCanvas(file) {
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.getElementById('schema-canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0);
+      canvas.style.display = 'block';
+
+      // Mittlerer Pixel als Vorschlag
+      const px = ctx.getImageData(Math.floor(img.width / 2), Math.floor(img.height / 2), 1, 1).data;
+      setAktuelleHex(rgbToHex({ r: px[0], g: px[1], b: px[2] }));
+
+      canvas.onclick = (ev) => {
+        const rect = canvas.getBoundingClientRect();
+        const x = Math.floor((ev.clientX - rect.left) * canvas.width / rect.width);
+        const y = Math.floor((ev.clientY - rect.top) * canvas.height / rect.height);
+        const d = ctx.getImageData(x, y, 1, 1).data;
+        setAktuelleHex(rgbToHex({ r: d[0], g: d[1], b: d[2] }));
+      };
+    };
+    img.src = e.target.result;
+  };
+  reader.readAsDataURL(file);
+}
+
+function setAktuelleHex(hex) {
+  aktuelleHex = hex;
+  document.getElementById('schema-hex-input').value = hex;
+  document.getElementById('schema-hex-preview').style.background = hex;
+}
+
+export function initSchemaModal(onSave) {
+  // Button öffnet Modal
+  document.getElementById('schema-erstellen-btn').addEventListener('click', () => {
+    resetModal();
+    document.getElementById('schema-modal-overlay').style.display = 'flex';
+    document.getElementById('schema-name-input').focus();
+  });
+
+  // Abbrechen
+  document.getElementById('schema-abbrechen-btn').addEventListener('click', () => {
+    document.getElementById('schema-modal-overlay').style.display = 'none';
+  });
+
+  // Klick außerhalb schließt Modal
+  document.getElementById('schema-modal-overlay').addEventListener('click', (e) => {
+    if (e.target === document.getElementById('schema-modal-overlay')) {
+      document.getElementById('schema-modal-overlay').style.display = 'none';
+    }
+  });
+
+  // Hex-Eingabe → Vorschau aktualisieren
+  document.getElementById('schema-hex-input').addEventListener('input', (e) => {
+    const val = e.target.value.trim();
+    if (/^#[0-9a-fA-F]{6}$/.test(val)) {
+      aktuelleHex = val;
+      document.getElementById('schema-hex-preview').style.background = val;
+    }
+  });
+
+  // Datei-Upload
+  document.getElementById('schema-file-trigger').addEventListener('click', () => {
+    document.getElementById('schema-file-input').click();
+  });
+
+  document.getElementById('schema-file-input').addEventListener('change', (e) => {
+    if (e.target.files[0]) loadImageOnCanvas(e.target.files[0]);
+  });
+
+  // Drag & Drop auf Modal-Dropzone
+  const dropzone = document.getElementById('schema-dropzone');
+  dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.style.borderColor = '#222'; });
+  dropzone.addEventListener('dragleave', () => { dropzone.style.borderColor = '#ccc'; });
+  dropzone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropzone.style.borderColor = '#ccc';
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith('image/')) loadImageOnCanvas(file);
+  });
+
+  // Farbe hinzufügen
+  document.getElementById('schema-farbe-hinzufuegen-btn').addEventListener('click', () => {
+    if (!/^#[0-9a-fA-F]{6}$/.test(aktuelleHex)) {
+      document.getElementById('schema-hex-input').style.borderColor = '#e55';
+      document.getElementById('schema-hex-input').focus();
+      return;
+    }
+    document.getElementById('schema-hex-input').style.borderColor = '';
+
+    const hsl = hexToHsl(aktuelleHex);
+    if (!hsl) return;
+    farben.push(hsl);
+
+    renderFarbenPreview();
+    document.getElementById('schema-abschliessen-btn').disabled = false;
+
+    // Eingabe zurücksetzen
+    aktuelleHex = '';
+    document.getElementById('schema-hex-input').value = '';
+    document.getElementById('schema-hex-preview').style.background = '#eee';
+    document.getElementById('schema-canvas').style.display = 'none';
+    document.getElementById('schema-file-input').value = '';
+
+    if (farben.length >= MAX_FARBEN) {
+      // Alle 4 Farben gesammelt — Eingabe ausblenden
+      document.getElementById('schema-farbe-eingabe').style.display = 'none';
+    } else {
+      updateFarbeLabel();
+      document.getElementById('schema-hex-input').focus();
+    }
+  });
+
+  // Abschließen
+  document.getElementById('schema-abschliessen-btn').addEventListener('click', () => {
+    const name = document.getElementById('schema-name-input').value.trim();
+    if (!name) {
+      document.getElementById('schema-name-input').style.borderColor = '#e55';
+      document.getElementById('schema-name-input').focus();
+      return;
+    }
+    if (farben.length === 0) return;
+
+    onSave(name, farben);
+    document.getElementById('schema-modal-overlay').style.display = 'none';
+  });
+}

style.css

@@ -167,6 +167,64 @@ button.action-btn:hover { background: #f0f0f0; }
   gap: 0.5rem;
 }
 
+/* --- Modal --- */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.45);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.modal {
+  background: #fff;
+  border-radius: 12px;
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 460px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+}
+
+.modal-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin-bottom: 0.75rem;
+}
+
+.modal-field label { font-size: 0.75rem; color: #666; text-transform: uppercase; }
+.modal-field input {
+  padding: 0.4rem 0.6rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 0.9rem;
+}
+
+.schema-farben-preview {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  min-height: 20px;
+  margin-bottom: 1rem;
+}
+
+.schema-dropzone {
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+  background: #fafafa;
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.schema-dropzone p { margin-bottom: 0.5rem; }
+
 /* --- Finale Styles --- */
 h2 { font-size: 1.1rem; margin-bottom: 1rem; }
 h3 { font-size: 0.95rem; margin-bottom: 0.5rem; }