Update script.js

script.js

@@ -636,14 +636,87 @@ 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 Open Models from Novita.AI Model API");
-    if (codeOutputEl) codeOutputEl.innerHTML = '<code class="language-html">// Select a variation or history item to view its code.</code>';
+    previewGridWrapperEl.innerHTML = ''; // Clear existing content
+
+    const initialViewContainer = document.createElement('div');
+    initialViewContainer.id = 'initial-view-content';
+    // Added 'initial-view-animate' for entry animation
+    initialViewContainer.className = 'flex flex-col items-center justify-center text-slate-300 text-lg p-8 space-y-6 h-full initial-view-animate'; 
+
+    // API Key Input Section
+    const apiKeySection = document.createElement('div');
+    apiKeySection.className = 'w-full max-w-md text-center'; // Centered text for this section
+
+    const apiKeyInput = document.createElement('input');
+    apiKeyInput.type = 'password';
+    apiKeyInput.id = 'initial-api-key-input';
+    apiKeyInput.className = 'futuristic-input w-full text-center'; // Added text-center
+    apiKeyInput.placeholder = 'Paste Novita.AI API Key here'; // Changed placeholder
+    if (apiKeyEl && apiKeyEl.value) {
+        apiKeyInput.value = apiKeyEl.value;
+    }
+    apiKeyInput.addEventListener('input', (e) => {
+        if (apiKeyEl) {
+            apiKeyEl.value = e.target.value;
+        }
+    });
+    apiKeySection.appendChild(apiKeyInput);
+
+    const apiKeyLink = document.createElement('p');
+    apiKeyLink.className = 'text-xs text-slate-400 mt-2'; // Adjusted margin
+    apiKeyLink.innerHTML = 'Get your API Key from <a href="https://novita.ai/" target="_blank" class="text-cyan-400 hover:text-cyan-300 underline">Novita.AI</a>.';
+    apiKeySection.appendChild(apiKeyLink);
+    initialViewContainer.appendChild(apiKeySection);
+
+    // Example Prompts Section
+    const examplePromptsSection = document.createElement('div');
+    examplePromptsSection.className = 'w-full max-w-lg text-center pt-4'; // Centered text for this section, added padding top
+
+    const examplePromptsContainer = document.createElement('div');
+    examplePromptsContainer.id = 'example-prompts-container';
+    examplePromptsContainer.className = 'flex flex-wrap justify-center gap-3';
+
+    const examplePrompts = [
+        "A modern landing page for a new meditation app",
+        "A portfolio website for a photographer",
+        "A simple to-do list application",
+        "An e-commerce product card for a smartwatch"
+    ];
+
+    examplePrompts.forEach(promptText => {
+        const button = document.createElement('button');
+        button.className = 'example-prompt-button';
+        button.textContent = promptText;
+        button.addEventListener('click', () => {
+            if (modalUserPromptEl) {
+                modalUserPromptEl.value = promptText;
+            }
+            // Ensure API key from initial input is also considered if config one is empty
+            if (apiKeyEl && !apiKeyEl.value && apiKeyInput.value) {
+                apiKeyEl.value = apiKeyInput.value;
+            }
+            showPromptModal();
+        });
+        examplePromptsContainer.appendChild(button);
+    });
+    examplePromptsSection.appendChild(examplePromptsContainer);
+    initialViewContainer.appendChild(examplePromptsSection);
+
+    // Final instruction
+    const instructionText = document.createElement('p');
+    instructionText.className = 'text-sm text-slate-400 mt-6'; // Adjusted margin
+    instructionText.innerHTML = 'Once you have an API key and a prompt (either typed or from an example),<br>click the <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil inline-block align-middle -mt-1"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg> icon or press Alt+P to open the prompt window and generate.';
+    initialViewContainer.appendChild(instructionText);
+    
+    previewGridWrapperEl.appendChild(initialViewContainer);
+
+    previewGridWrapperEl.className = 'grid-mode initial-view-active'; // Keep grid-mode, add a new class for styling
+    if(perspectiveViewportEl) perspectiveViewportEl.style.perspective = 'none'; // No perspective for initial flat view
+
+    updateMainContentTitles("Welcome!", "Setup your API Key and enter a prompt to begin.");
+    if (codeOutputEl) codeOutputEl.innerHTML = '<code class="language-html">// Code for the selected evolution will appear here.</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;