Einstellmöglichkeiten mit einem Prompt

components/settings.js

@@ -0,0 +1,128 @@
+class CustomSettings extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          background: rgba(17, 24, 39, 0.8);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 0.75rem;
+          padding: 1.5rem;
+          backdrop-filter: blur(10px);
+        }
+        h2 {
+          color: white;
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 1.5rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .setting-group {
+          margin-bottom: 1.5rem;
+        }
+        label {
+          display: block;
+          color: rgb(156, 163, 175);
+          margin-bottom: 0.5rem;
+        }
+        textarea, select, input[type="range"] {
+          width: 100%;
+          background: rgba(31, 41, 55, 0.6);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 0.5rem;
+          padding: 0.75rem;
+          color: white;
+          margin-bottom: 0.5rem;
+        }
+        textarea {
+          min-height: 100px;
+          resize: vertical;
+        }
+        .range-value {
+          color: rgb(156, 163, 175);
+          font-size: 0.875rem;
+        }
+        button {
+          background: linear-gradient(to right, rgb(168, 85, 247), rgb(98, 143, 229));
+          color: white;
+          border: none;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1.5rem;
+          font-weight: 500;
+          cursor: pointer;
+          width: 100%;
+          transition: opacity 0.2s;
+        }
+        button:hover {
+          opacity: 0.9;
+        }
+      </style>
+      <div>
+        <h2>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+          </svg>
+          Generate with Prompt
+        </h2>
+        
+        <div class="setting-group">
+          <label for="style">Style</label>
+          <select id="style">
+            <option value="dark-minimal">Dark Minimal</option>
+            <option value="dark-ambient">Dark Ambient</option>
+            <option value="industrial">Industrial</option>
+            <option value="dark-cinematic">Dark Cinematic</option>
+          </select>
+        </div>
+        
+        <div class="setting-group">
+          <label for="intensity">Darkness Intensity</label>
+          <input type="range" id="intensity" min="1" max="5" value="3">
+          <div class="range-value" id="intensityValue">Medium</div>
+        </div>
+        
+        <div class="setting-group">
+          <label for="custom-prompt">Custom Prompt</label>
+          <textarea id="custom-prompt" placeholder="Describe the dark minimal sound you want to create..."></textarea>
+        </div>
+        
+        <button id="apply-settings">Apply Settings</button>
+      </div>
+    `;
+
+    const intensity = this.shadowRoot.getElementById('intensity');
+    const intensityValue = this.shadowRoot.getElementById('intensityValue');
+    
+    intensity.addEventListener('input', () => {
+      const values = ['Very Light', 'Light', 'Medium', 'Dark', 'Very Dark'];
+      intensityValue.textContent = values[intensity.value - 1];
+    });
+    
+    this.shadowRoot.getElementById('apply-settings').addEventListener('click', () => {
+      const styles = {
+        'dark-minimal': 'A dark minimal techno track',
+        'dark-ambient': 'A dark ambient soundscape', 
+        'industrial': 'An industrial dark techno sound',
+        'dark-cinematic': 'A cinematic dark soundtrack'
+      };
+      
+      const style = this.shadowRoot.getElementById('style').value;
+      const intensity = this.shadowRoot.getElementById('intensity').value;
+      const customPrompt = this.shadowRoot.getElementById('custom-prompt').value;
+      
+      const fullPrompt = `${styles[style]} with ${intensity} intensity. ${customPrompt}`;
+      
+      this.dispatchEvent(new CustomEvent('settings-applied', {
+        detail: { prompt: fullPrompt },
+        bubbles: true,
+        composed: true
+      }));
+    });
+  }
+}
+
+customElements.define('custom-settings', CustomSettings);

index.html

@@ -19,10 +19,10 @@
         <section class="max-w-4xl mx-auto text-center mb-16">
             <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">Sonic Darkness Generator</h1>
             <p class="text-xl text-gray-400 mb-8">Upload a track and our AI will transform it into haunting Dark Minimal perfection</p>
-            
-            <div class="bg-gray-900 rounded-xl p-8 shadow-lg border border-gray-800">
+            <div class="bg-gray-900 rounded-xl p-8 shadow-lg border border-gray-800 relative">
+                <custom-settings id="settingsPanel" class="hidden absolute left-0 right-0 top-0 bottom-0 z-10 flex items-center justify-center"></custom-settings>
                 <div class="flex flex-col items-center justify-center border-2 border-dashed border-gray-700 rounded-lg p-12 mb-8 hover:border-purple-500 transition-all" id="dropzone">
-                    <i data-feather="upload-cloud" class="w-16 h-16 text-purple-500 mb-4"></i>
+<i data-feather="upload-cloud" class="w-16 h-16 text-purple-500 mb-4"></i>
                     <h3 class="text-2xl font-semibold mb-2">Upload Your Track</h3>
                     <p class="text-gray-400 mb-4">Drag & drop or click to browse</p>
                     <input type="file" id="fileInput" class="hidden" accept="audio/*">