Update index.html

index.html

@@ -31,8 +31,25 @@
             <div id="error-message" class="mt-2 text-red-400 text-sm font-medium"></div> 
         </div>
 
+        <div id="initial-setup-cta" class="hidden flex-col items-center justify-center text-slate-300 text-lg p-4 space-y-6">
+            <!-- This div will be shown by script.js in the initial state -->
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Google_Gemini_logo.svg/2560px-Google_Gemini_logo.svg.png" alt="Gemini Logo" id="gemini-logo-initial-cta">
+            <div>
+                <input type="password" id="initial-api-key-input" class="futuristic-input w-full max-w-lg text-sm" placeholder="Enter your Gemini API Key">
+                <p class="text-xs text-slate-400 mt-2">
+                    <a href="https://ai.studio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" class="text-cyan-400 hover:text-cyan-300 underline">
+                        Get your Gemini API Key from Google AI Studio
+                    </a>
+                </p>
+            </div>
+            <div id="example-prompts-container" class="flex flex-col items-center gap-3">
+                </div>
+            <p class="mt-4 text-sm text-slate-500">Once you have an API key and a prompt (either typed or from an example),<br>click the pencil icon or press Alt+P to open the prompt window and generate.</p>
+        </div>
+
         <div id="perspective-viewport">
             <div id="preview-grid-wrapper" class="grid-mode">
+                <!-- Content will be dynamically inserted here by script.js -->
                 </div>
         </div>