gemini-prompt: add Change API key button and fix mobile submit layout (#231)

simonw · claude · web-flow · commit 2869ccbfd4f2 · 2026-02-17T23:11:56.000-08:00
- Show a "Change API key" button when a key is already stored in localStorage, so users can update it without clearing storage - Add responsive CSS: on screens ≤600px the controls row wraps and the Submit button stretches full-width https://claude.ai/code/session_01XXTsotCW64yZXECFgWokoj Co-authored-by: Claude <noreply@anthropic.com>
diff --git a/gemini-prompt.html b/gemini-prompt.html
@@ -234,18 +234,51 @@
       font-size: 0.9rem;
     }
 
+    /* API key row */
+    #api-key-row {
+      display: none;
+      margin-bottom: 16px;
+    }
+
+    #change-api-key-btn {
+      background: none;
+      border: 1px solid #d1d5db;
+      color: #6b7280;
+      font-size: 0.8rem;
+      padding: 4px 10px;
+      border-radius: 5px;
+    }
+    #change-api-key-btn:hover {
+      border-color: #4f7df3;
+      color: #4f7df3;
+      background: #eff6ff;
+    }
+
     /* Status */
     #status {
       font-size: 0.8rem;
       color: #6b7280;
       margin-top: 8px;
       height: 1.2em;
     }
+
+    @media (max-width: 600px) {
+      .controls-row {
+        flex-wrap: wrap;
+      }
+      #submit-btn {
+        width: 100%;
+      }
+    }
   </style>
 </head>
 <body>
   <h1>Gemini Prompt</h1>
 
+  <div id="api-key-row">
+    <button id="change-api-key-btn">Change API key</button>
+  </div>
+
   <label for="system-prompt">System Prompt</label>
   <textarea id="system-prompt" placeholder="Optional system prompt…"></textarea>
 
@@ -303,15 +336,31 @@ <h1>Gemini Prompt</h1>
     let showAll  = false;
 
     // ── API key ────────────────────────────────────────────────────────────────
+    function updateApiKeyUI() {
+      const hasKey = !!localStorage.getItem(STORAGE_KEY_API);
+      document.getElementById('api-key-row').style.display = hasKey ? 'block' : 'none';
+    }
+
     function getApiKey() {
       let key = localStorage.getItem(STORAGE_KEY_API);
       if (!key) {
         key = prompt('Enter your Gemini API key:');
-        if (key) localStorage.setItem(STORAGE_KEY_API, key.trim());
+        if (key) {
+          localStorage.setItem(STORAGE_KEY_API, key.trim());
+          updateApiKeyUI();
+        }
       }
       return key;
     }
 
+    document.getElementById('change-api-key-btn').addEventListener('click', () => {
+      const key = prompt('Enter your new Gemini API key:');
+      if (key && key.trim()) {
+        localStorage.setItem(STORAGE_KEY_API, key.trim());
+        updateApiKeyUI();
+      }
+    });
+
     // ── System prompt history ─────────────────────────────────────────────────
     function loadHistory() {
       try { return JSON.parse(localStorage.getItem(STORAGE_KEY_HIST) || '[]'); }
@@ -476,6 +525,7 @@ <h1>Gemini Prompt</h1>
         document.getElementById('system-prompt').value = hist[0];
       }
       renderHistory();
+      updateApiKeyUI();
     })();
   </script>
 </body>
