Update script.js

script.js

@@ -54,6 +54,11 @@ let modalThinkingBudgetSliderEl, modalThinkingBudgetValueDisplayEl;
 let promptDisplayModalOverlayEl, promptDisplayModalContentEl, fullPromptTextEl, promptDisplayModalCloseBtnEl;
 let showPromptModalButtonEl; // Added for the new button
 
+// --- Elements for Initial Setup CTA ---
+let initialSetupCtaEl;
+let initialApiKeyInputEl;
+let examplePromptsContainerEl;
+
 
 // --- Constants ---
 const API_BASE_URL = 'https://generativelanguage.googleapis.com/v1beta/models/';
@@ -282,7 +287,20 @@ async function generateVariations() {
         return;
     }
 
-    const apiKey = apiKeyEl.value.trim();
+    // Read API key: Prefer config modal, then initial input, then localStorage
+    let apiKey = apiKeyEl.value.trim();
+    if (!apiKey && initialApiKeyInputEl) {
+        apiKey = initialApiKeyInputEl.value.trim();
+    }
+    if (!apiKey) {
+        apiKey = localStorage.getItem('geminiApiKey') || '';
+    }
+    
+    // Update input fields with the resolved API key
+    if (apiKeyEl && apiKeyEl.value !== apiKey) apiKeyEl.value = apiKey;
+    if (initialApiKeyInputEl && initialApiKeyInputEl.value !== apiKey) initialApiKeyInputEl.value = apiKey;
+
+
     const selectedModel = modelSelEl.value;
     const currentIsRefinementMode = modalRefinementCheckboxEl.checked;
     const currentNumVariations = parseInt(numVariationsSliderEl.value, 10);
@@ -290,7 +308,11 @@ async function generateVariations() {
 
     if (!apiKey || !userPrompt) {
         errorMessageEl.textContent = 'Error: API Key and Prompt (via Alt+P) are required.';
-        if (!userPrompt && !promptModalOverlayEl.classList.contains('visible')) showPromptModal();
+        if (!apiKey && initialSetupCtaEl && initialSetupCtaEl.classList.contains('flex')) {
+            if(initialApiKeyInputEl) initialApiKeyInputEl.focus();
+        } else if (!userPrompt && !promptModalOverlayEl.classList.contains('visible')) {
+            showPromptModal();
+        }
         return;
     }
      if (!selectedModel) {
@@ -320,6 +342,10 @@ async function generateVariations() {
         console.log(`Refining Evolution ${activeTimelineIndex + 1}. Original context: "${contextPromptForRefinement}"`);
     } else if (currentIsRefinementMode) {
          errorMessageEl.textContent = 'Error: No active evolution selected to refine. Uncheck "refine" or select an evolution from history.';
+         // Also hide the initial CTA if it's somehow visible
+         if (initialSetupCtaEl) initialSetupCtaEl.classList.add('hidden');
+         if (initialSetupCtaEl) initialSetupCtaEl.classList.remove('flex');
+         if (previewGridWrapperEl) previewGridWrapperEl.classList.remove('hidden');
          return;
     }
 
@@ -339,6 +365,20 @@ async function generateVariations() {
     fullscreenButtons = Array(numVariationsToGenerate).fill(null);
     previewItems = Array(numVariationsToGenerate).fill(null);
 
+    // Ensure correct layout state for generation
+    if (initialSetupCtaEl) {
+        initialSetupCtaEl.classList.remove('active-cta'); // Start hide animation
+        // Hide example prompt buttons immediately or animate them out too
+        if (examplePromptsContainerEl) {
+            examplePromptsContainerEl.querySelectorAll('.example-prompt-button').forEach(btn => btn.classList.remove('visible'));
+        }
+        setTimeout(() => { // Wait for animation to roughly finish
+            initialSetupCtaEl.style.display = 'none';
+            initialSetupCtaEl.classList.remove('flex', 'flex-grow');
+        }, 500); // Corresponds to CSS transition duration
+    }
+    if (perspectiveViewportEl) perspectiveViewportEl.classList.remove('hidden');
+    // previewGridWrapperEl will be managed by showFourGridPreviewUI
 
     showFourGridPreviewUI();
 
@@ -501,6 +541,20 @@ function showSingleLargePreviewUI(htmlContent, titleText, fullPromptText) {
     previewGridWrapperEl.className = 'single-mode';
      if(perspectiveViewportEl) perspectiveViewportEl.style.perspective = 'none';
 
+    // Ensure correct layout state for single preview
+    if (initialSetupCtaEl) {
+        initialSetupCtaEl.classList.remove('active-cta');
+        if (examplePromptsContainerEl) {
+            examplePromptsContainerEl.querySelectorAll('.example-prompt-button').forEach(btn => btn.classList.remove('visible'));
+        }
+        setTimeout(() => {
+            initialSetupCtaEl.style.display = 'none';
+            initialSetupCtaEl.classList.remove('flex', 'flex-grow');
+        }, 500);
+    }
+    if (perspectiveViewportEl) perspectiveViewportEl.classList.remove('hidden');
+    if (previewGridWrapperEl) previewGridWrapperEl.classList.remove('hidden');
+
     const item = document.createElement('div');
     item.className = 'single-preview-item';
 
@@ -533,18 +587,52 @@ function showSingleLargePreviewUI(htmlContent, titleText, fullPromptText) {
 }
 
 function showInitialPreviewStateUI() {
-    previewGridWrapperEl.innerHTML = '<div class="col-span-2 row-span-2 flex items-center justify-center text-slate-500 text-lg"><p>Press Alt+O, then Alt+P to begin.</p></div>';
-    previewGridWrapperEl.className = 'grid-mode';
-    if(perspectiveViewportEl) perspectiveViewportEl.style.perspective = '1500px';
-    updateMainContentTitles("Live Previews", "Powered by Gemini Models");
+    // Hide the main preview grid and show the initial CTA
+    if (previewGridWrapperEl) previewGridWrapperEl.classList.add('hidden');
+    if (perspectiveViewportEl) perspectiveViewportEl.classList.add('hidden'); // Hide the whole viewport
+    
+    if (initialSetupCtaEl) {
+        initialSetupCtaEl.style.display = 'flex'; // Set display before animation
+        initialSetupCtaEl.classList.add('flex-grow');
+        // Use requestAnimationFrame to ensure display:flex is applied before adding class for transition
+        requestAnimationFrame(() => {
+            initialSetupCtaEl.classList.add('active-cta');
+        });
+    }
+
+    updateMainContentTitles("Welcome to Live Previews", "Set up your API Key or try an example below.");
     if (codeOutputEl) codeOutputEl.innerHTML = '<code class="language-html">// Select a variation or history item to view its code.</code>';
     if (selectedCodeTitleH3El) selectedCodeTitleH3El.textContent = "Selected Code:";
     selectedVariationGridIndex = -1;
-    // Reset subtitle state when going back to initial view
     if (mainContentSubtitleH2El) {
         mainContentSubtitleH2El.classList.remove('prompt-truncated');
         delete mainContentSubtitleH2El.dataset.fullPrompt;
     }
+
+    // Populate example prompts
+    if (examplePromptsContainerEl) {
+        examplePromptsContainerEl.innerHTML = ''; // Clear existing
+        const prompts = [
+            "A simple landing page for a new SaaS product.",
+            "A responsive image gallery with a lightbox.",
+            "A futuristic login form.",
+            "A personal portfolio website with a blog section."
+        ];
+        prompts.forEach((promptText, index) => {
+            const button = document.createElement('button');
+            button.className = 'example-prompt-button';
+            button.textContent = promptText;
+            button.addEventListener('click', () => {
+                if (modalUserPromptEl) modalUserPromptEl.value = promptText;
+                showPromptModal();
+            });
+            examplePromptsContainerEl.appendChild(button);
+            // Staggered animation for buttons
+            setTimeout(() => {
+                button.classList.add('visible');
+            }, 300 + index * 120); // Delay after panel animation starts, then stagger
+        });
+    }
 }
 
 function updateMainContentTitles(title, subtitle) {
@@ -1196,10 +1284,15 @@ document.addEventListener('DOMContentLoaded', () => {
     promptDisplayModalCloseBtnEl = document.getElementById('prompt-display-modal-close-button');
     showPromptModalButtonEl = document.getElementById('show-prompt-modal-button'); // Added
 
+    // --- Elements for Initial Setup CTA ---
+    initialSetupCtaEl = document.getElementById('initial-setup-cta');
+    initialApiKeyInputEl = document.getElementById('initial-api-key-input');
+    examplePromptsContainerEl = document.getElementById('example-prompts-container');
+
 
     // --- Check if all required elements exist ---
     let missingElements = [];
-    const requiredElements = { apiKeyEl, modelSelEl, codeOutputEl, errorMessageEl, refinementLoadingIndicator, mainContentEl, configButtonEl, intervalSliderEl, intervalValueDisplayEl, fullscreenOverlayEl, fullscreenIframeEl, exitFullscreenBtnEl, perspectiveViewportEl, previewGridWrapperEl, historyPanelEl, historyPanelPlaceholderEl, selectedCodeTitleH3El, mainContentTitleH1El, mainContentSubtitleH2El, fullscreenHistoryNavEl, historyNavPrevBtnEl, historyNavNextBtnEl, promptModalOverlayEl, promptModalContentEl, modalUserPromptEl, modalGenerateBtnEl, modalCancelBtnEl, modalLoadingIndicatorEl, modalRefinementCheckboxEl, numVariationsSliderEl, numVariationsValueDisplayEl, configModalOverlayEl, configModalContentEl, configModalCloseBtnEl, copyCodeButtonEl, exportCodeButtonEl, historyToggleButtonEl, historyArrowDownEl, historyArrowUpEl, newButtonEl, confirmModalOverlayEl, confirmModalMessageEl, confirmModalConfirmBtnEl, confirmModalCancelBtnEl, historyNavLeftBtnEl, historyNavRightBtnEl, modalThinkingBudgetSliderEl, modalThinkingBudgetValueDisplayEl, promptDisplayModalOverlayEl, promptDisplayModalContentEl, fullPromptTextEl, promptDisplayModalCloseBtnEl, showPromptModalButtonEl }; // Added showPromptModalButtonEl
+    const requiredElements = { apiKeyEl, modelSelEl, codeOutputEl, errorMessageEl, refinementLoadingIndicator, mainContentEl, configButtonEl, intervalSliderEl, intervalValueDisplayEl, fullscreenOverlayEl, fullscreenIframeEl, exitFullscreenBtnEl, perspectiveViewportEl, previewGridWrapperEl, historyPanelEl, historyPanelPlaceholderEl, selectedCodeTitleH3El, mainContentTitleH1El, mainContentSubtitleH2El, fullscreenHistoryNavEl, historyNavPrevBtnEl, historyNavNextBtnEl, promptModalOverlayEl, promptModalContentEl, modalUserPromptEl, modalGenerateBtnEl, modalCancelBtnEl, modalLoadingIndicatorEl, modalRefinementCheckboxEl, numVariationsSliderEl, numVariationsValueDisplayEl, configModalOverlayEl, configModalContentEl, configModalCloseBtnEl, copyCodeButtonEl, exportCodeButtonEl, historyToggleButtonEl, historyArrowDownEl, historyArrowUpEl, newButtonEl, confirmModalOverlayEl, confirmModalMessageEl, confirmModalConfirmBtnEl, confirmModalCancelBtnEl, historyNavLeftBtnEl, historyNavRightBtnEl, modalThinkingBudgetSliderEl, modalThinkingBudgetValueDisplayEl, promptDisplayModalOverlayEl, promptDisplayModalContentEl, fullPromptTextEl, promptDisplayModalCloseBtnEl, showPromptModalButtonEl, initialSetupCtaEl, initialApiKeyInputEl, examplePromptsContainerEl }; // Added showPromptModalButtonEl
     for (const key in requiredElements) { if (!requiredElements[key]) { missingElements.push(key); } }
 
     if (missingElements.length > 0) {