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>