From 02914bdcd00d1e92081617a1bdd2855f4e1138b6 Mon Sep 17 00:00:00 2001
From: b1rdmania <102524336+b1rdmania@users.noreply.github.com>
Date: Thu, 18 Dec 2025 21:08:08 +0000
Subject: [PATCH] Adjust 'Use on your website' UX to coming soon.

---
 index.html  | 13 +++++++------
 src/main.ts | 11 ++++++++---
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 1978181..ea22efc 100644
--- a/index.html
+++ b/index.html
@@ -697,23 +697,24 @@
                 </div>
             </div>
 
-            <div class="section" id="embedSection" style="display:none;">
+            <div class="section" id="embedSection" data-not-live="true" style="display:none;">
                 <div class="section-header">
-                    <h3 class="section-title">Use on your website</h3>
-                    <p class="section-subtitle">Embed this generator as a widget.</p>
+                    <h3 class="section-title">Use on your website <span style="color: rgba(255,255,255,0.5); font-weight: 500;">(Coming soon)</span></h3>
+                    <p class="section-subtitle">Embeddable widget + multiple synth engines.</p>
                 </div>
                 <div class="divider"></div>
 
-                <div class="embed-card">
+                <div class="embed-card" style="opacity:0.55; filter: grayscale(20%); position:relative;">
+                    <div style="position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0)); pointer-events:none;"></div>
                     <div class="embed-row">
                         <pre class="codeblock"><code id="embedCode">&lt;iframe src=&quot;...&quot;&gt;&lt;/iframe&gt;</code></pre>
                         <div style="display:flex; flex-direction:column; gap: calc(var(--spacing-unit) * 1.5);">
-                            <button id="copyEmbedBtn" class="primary" type="button">Copy embed</button>
+                            <button id="copyEmbedBtn" class="primary" type="button" disabled>Copy embed</button>
                             <span id="copyToast" class="copy-toast">Copied</span>
                         </div>
                     </div>
                     <div class="embed-hint">
-                        <strong>Tip:</strong> iOS/Safari requires a tap before audio can start. Add <code>allow=&quot;autoplay&quot;</code> and expect a user gesture.
+                        <strong>Note:</strong> This is not live yet. We’ll ship a dedicated <code>/embed</code> widget + style presets next.
                     </div>
                 </div>
             </div>
diff --git a/src/main.ts b/src/main.ts
index 787397d..bdd21f5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -134,7 +134,7 @@ class MotifApp {
 
     this.nextResultBtn.addEventListener('click', () => this.handleNextResult());
 
-    // Embed snippet copy
+    // Embed snippet copy (may be disabled / not-live)
     this.copyEmbedBtn?.addEventListener('click', () => void this.copyEmbedSnippet());
   }
 
@@ -396,8 +396,9 @@ class MotifApp {
   private updateEmbedSnippet(songTitle: string): void {
     if (!this.embedSection || !this.embedCodeEl) return;
 
-    const origin = window.location.origin;
-    const url = `${origin}/embed?song=${encodeURIComponent(songTitle)}`;
+    const notLive = this.embedSection.getAttribute('data-not-live') === 'true';
+    const base = notLive ? 'https://YOUR_DOMAIN' : window.location.origin;
+    const url = `${base}/embed?song=${encodeURIComponent(songTitle)}`;
 
     const snippet = `<iframe\n  src=\"${url}\"\n  width=\"420\"\n  height=\"260\"\n  style=\"border:0;border-radius:12px;overflow:hidden\"\n  allow=\"autoplay\"\n></iframe>`;
 
@@ -408,6 +409,10 @@ class MotifApp {
 
   private async copyEmbedSnippet(): Promise<void> {
     if (!this.embedCodeEl) return;
+    if (this.embedSection?.getAttribute('data-not-live') === 'true') {
+      this.updateStatus('Embed is coming soon.');
+      return;
+    }
 
     const text = this.embedCodeEl.textContent || '';
     if (!text.trim()) return;