|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Gemini Code Generator & Preview (Config Modal)</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> |
|
|
<link rel="preconnect" href="https://rsms.me/"> |
|
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
</head> |
|
|
<body class="font-sans"> |
|
|
<div id="top-left-controls"> |
|
|
<button id="new-button" aria-label="New Session" title="Start New Session (Refresh)"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg> |
|
|
</button> |
|
|
<button id="show-prompt-modal-button" aria-label="Open Prompt Modal" title="Open Prompt (Alt / Option + P)"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><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> |
|
|
</button> |
|
|
<button id="config-button" aria-label="Open Configuration" title="Open Configuration (Alt / Option + O)"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings-2"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="main-content" class="p-6 flex flex-col space-y-4"> |
|
|
<div class="text-center mt-8"> |
|
|
<h1 id="main-content-title" class="text-2xl font-bold text-cyan-400">Live Previews</h1> |
|
|
<h2 id="main-content-subtitle" class="text-base font-semibold text-slate-300 mt-2">Powered by Gemini Models</h2> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<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 class="w-full flex justify-center"> |
|
|
<input type="password" id="initial-api-key-input" class="futuristic-input w-[70%] text-sm" placeholder="Enter your Gemini API Key"> |
|
|
</div> |
|
|
<div class="w-full flex justify-center text-center"> |
|
|
<p class="text-xs text-slate-400 mt-1"> |
|
|
<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> |
|
|
|
|
|
<button id="variation-nav-left" class="variation-nav-button fixed left-2 top-1/2 -translate-y-1/2 z-50 hidden" aria-label="Scroll Left" title="Scroll Left"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg> |
|
|
</button> |
|
|
|
|
|
<div id="perspective-viewport"> |
|
|
<div id="preview-grid-wrapper" class="mobile-preview-layout"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="variation-nav-right" class="variation-nav-button fixed right-2 top-1/2 -translate-y-1/2 z-50 hidden" aria-label="Scroll Right" title="Scroll Right"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg> |
|
|
</button> |
|
|
|
|
|
<p class="mt-2 text-xs text-slate-500 flex-shrink-0 text-center">Note: Some JS/external resources might be restricted by the sandbox.</p> |
|
|
</div> |
|
|
|
|
|
<div id="history-panel-controls"> |
|
|
<button id="history-nav-left-button" class="history-nav-button" aria-label="Previous History Step" title="Previous History (Alt + Page Up)" disabled> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg> |
|
|
</button> |
|
|
<button id="history-toggle-button" aria-label="Toggle History Panel"> |
|
|
<svg id="history-arrow-down" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down hidden"><path d="m6 9 6 6 6-6"/></svg> |
|
|
<svg id="history-arrow-up" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg> |
|
|
</button> |
|
|
<button id="history-nav-right-button" class="history-nav-button" aria-label="Next History Step" title="Next History (Alt + Page Down)" disabled> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="history-panel" class="history-collapsed"> |
|
|
<div id="history-panel-placeholder">Evolution history will appear here.</div> |
|
|
</div> |
|
|
|
|
|
<div id="refinement-loading-indicator"> |
|
|
<span>Refining code...</span> |
|
|
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
<div id="fullscreen-overlay"> |
|
|
<div id="fullscreen-history-nav"> |
|
|
<button id="history-nav-prev" title="Previous History (W)"> |
|
|
<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="inline-block mr-1"><polyline points="15 18 9 12 15 6"></polyline></svg> |
|
|
Prev (W) |
|
|
</button> |
|
|
<button id="history-nav-next" title="Next History (D)"> |
|
|
Next (D) |
|
|
<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="inline-block ml-1"><polyline points="9 18 15 12 9 6"></polyline></svg> |
|
|
</button> |
|
|
</div> |
|
|
<button id="exit-fullscreen-btn" class="px-3 py-1 text-sm font-medium rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1 focus:ring-offset-slate-900" title="Exit Full Screen"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="inline-block mr-1 -mt-px"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> |
|
|
Exit |
|
|
</button> |
|
|
<iframe id="fullscreen-iframe" title="Full Screen Preview"></iframe> |
|
|
</div> |
|
|
|
|
|
<div id="prompt-modal-overlay" class="modal-overlay"> |
|
|
<div id="prompt-modal-content" class="modal-content"> |
|
|
<h3 class="text-xl font-semibold text-cyan-300">Enter Prompt (Alt+P)</h3> |
|
|
<textarea id="modal-user-prompt" rows="6" class="futuristic-input block w-full px-3 py-2 sm:text-sm" placeholder="Describe the web page/app to build or refine..."></textarea> |
|
|
|
|
|
<div class="flex items-center mt-2"> |
|
|
<input id="modal-refinement-checkbox" name="modal-refinement-checkbox" type="checkbox" class="h-4 w-4 text-cyan-500 focus:ring-cyan-400 border-slate-600 rounded bg-slate-700 focus:ring-offset-slate-800"> |
|
|
<label for="modal-refinement-checkbox" class="ml-2 block text-sm text-slate-200">Use prompt to refine active evolution</label> |
|
|
</div> |
|
|
|
|
|
<div class="mt-2"> |
|
|
<label for="num-variations-slider" class="block text-sm font-medium text-slate-300 mb-1">Number of Variations: <span id="num-variations-value">4</span></label> |
|
|
<input type="range" id="num-variations-slider" name="num-variations-slider" min="1" max="4" step="1" value="4" class="futuristic-slider w-full h-2 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
|
|
|
<div class="mt-2"> |
|
|
<label for="model-select" class="block text-sm font-medium text-slate-300 mb-1">Select Model:</label> |
|
|
<select id="model-select" name="model-select" class="futuristic-select block w-full sm:text-sm"> |
|
|
<option value="gemini-2.5-pro-preview-05-06">gemini-2.5-pro-preview-05-06</option> |
|
|
<option value="gemini-2.5-flash-preview-04-17">gemini-2.5-flash-preview-04-17</option> |
|
|
<option value="gemini-2.0-flash">gemini-2.0-flash</option> |
|
|
<option value="gemini-2.0-flash-lite">gemini-2.0-flash-lite</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mt-3"> |
|
|
<label for="modal-thinking-budget-slider" class="block text-sm font-medium text-slate-300 mb-1">Thinking Budget: <span id="modal-thinking-budget-value">0</span></label> |
|
|
<input type="range" id="modal-thinking-budget-slider" name="modal-thinking-budget-slider" min="0" max="24576" step="1024" value="0" class="futuristic-slider w-full h-2 rounded-lg appearance-none cursor-pointer"> |
|
|
<p class="mt-1 text-xs text-slate-400">Set to 0 to disable. Higher values may improve quality for complex prompts but increase latency.</p> |
|
|
</div> |
|
|
|
|
|
<p class="text-xs text-slate-400 mt-1">Use Ctrl/Cmd+Enter to generate, Esc to close.</p> |
|
|
<div class="flex justify-end gap-3 mt-2"> |
|
|
<button id="modal-cancel-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Cancel</button> |
|
|
<button id="modal-generate-button" class="futuristic-button px-4 py-2 text-sm"> |
|
|
Generate |
|
|
<svg id="modal-loading-indicator" class="animate-spin -mr-1 ml-3 h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="config-modal-overlay" class="modal-overlay"> |
|
|
<div id="config-modal-content" class="modal-content"> |
|
|
<h3 class="text-xl font-semibold text-cyan-300">Configuration (Alt+O)</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label for="api-key" class="block text-sm font-medium text-slate-300 mb-1">Gemini API Key (AI Studio):</label> |
|
|
<input type="password" id="api-key" name="api-key" class="futuristic-input block w-full sm:text-sm" placeholder="Enter your API Key"> |
|
|
</div> |
|
|
|
|
|
<div class="pt-1"> |
|
|
<label for="preview-interval-slider" class="block text-sm font-medium text-slate-300 mb-1">Live Preview Update Interval: <span id="interval-value">500</span>ms</label> |
|
|
<input type="range" id="preview-interval-slider" name="preview-interval-slider" min="100" max="2000" step="100" value="500" class="futuristic-slider w-full h-2 rounded-lg appearance-none cursor-pointer"> |
|
|
<p class="mt-1 text-xs text-slate-400">Min time between preview updates (higher = less frequent).</p> |
|
|
</div> |
|
|
|
|
|
<div id="code-output-container"> |
|
|
<div id="code-output-header"> |
|
|
<h3 id="selected-code-title" class="text-lg font-medium text-cyan-300 flex-shrink-0">Selected Code:</h3> |
|
|
<div class="flex items-center gap-2"> |
|
|
<button id="copy-code-button" title="Copy Code"> |
|
|
<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-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg> |
|
|
</button> |
|
|
<button id="export-code-button" title="Export Code as ZIP"> |
|
|
<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-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow overflow-hidden min-h-0 flex"> |
|
|
<pre id="code-output" class="h-full"><code class="language-html">// Select a variation or history item to view its code.</code></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-end gap-3 mt-4"> |
|
|
<button id="config-modal-close-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Close</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="confirm-modal-overlay" class="modal-overlay"> |
|
|
<div id="confirm-modal-content" class="modal-content max-w-md"> |
|
|
<h3 class="text-xl font-semibold text-cyan-300">Confirm Action</h3> |
|
|
<p id="confirm-modal-message" class="text-sm text-slate-300">Are you sure?</p> |
|
|
<div class="flex justify-end gap-3 mt-4"> |
|
|
<button id="confirm-modal-cancel-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Cancel</button> |
|
|
<button id="confirm-modal-confirm-button" class="futuristic-button px-4 py-2 text-sm bg-red-600 hover:bg-red-700">Confirm</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="prompt-display-modal-overlay" class="modal-overlay"> |
|
|
<div id="prompt-display-modal-content" class="modal-content max-w-2xl"> |
|
|
<h3 class="text-xl font-semibold text-cyan-300 mb-2">Full Prompt</h3> |
|
|
<pre id="full-prompt-text" class="text-sm text-slate-300 whitespace-pre-wrap break-words bg-slate-800 p-3 rounded border border-slate-600 max-h-96 overflow-y-auto"></pre> |
|
|
<div class="flex justify-end gap-3 mt-4"> |
|
|
<button id="prompt-display-modal-close-button" class="futuristic-button modal-button-secondary px-4 py-2 text-sm">Close</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
