fix: hero layout, dynamic api connection and settings panel

Author: ridash2005

frontend/src/api.ts

@@ -1,6 +1,16 @@
 import axios from 'axios'
 
-const api = axios.create({ baseURL: '/' })
+const savedUrl = localStorage.getItem('qm_api_url') || '/'
+const api = axios.create({ baseURL: savedUrl })
+
+export function setApiUrl(url: string) {
+  localStorage.setItem('qm_api_url', url)
+  api.defaults.baseURL = url
+}
+
+export function getApiUrl(): string {
+  return localStorage.getItem('qm_api_url') || ''
+}
 
 export interface QueryResponse {
   sql: string

frontend/src/components/ChatWindow.tsx

@@ -46,8 +46,12 @@ export default function ChatWindow({ messages, setMessages, onAnswer, injectedQu
     try {
       const response = await postQuery(q)
       onAnswer(response)
-    } catch (err: unknown) {
-      const errMsg = err instanceof Error ? err.message : String(err)
+    } catch (err: any) {
+      let errMsg = err instanceof Error ? err.message : String(err)
+      if (errMsg.includes('405') || errMsg.includes('404') || errMsg.includes('Network Error')) {
+        errMsg = "Failed to connect to the backend. If you are on GitHub Pages, click the ⚙️ Settings icon in the top right to configure your local Backend API URL (e.g., http://localhost:8000)."
+      }
+      
       setMessages((prev) => [
         ...prev,
         { id: crypto.randomUUID(), type: 'error', content: errMsg, timestamp: new Date() },

frontend/src/components/HeroSection.tsx

@@ -52,10 +52,12 @@ export default function HeroSection() {
     <section id="hero" style={{
       minHeight: '100vh',
       display: 'flex',
-      alignItems: 'center',
+      flexDirection: 'column',
+      justifyContent: 'center',
       position: 'relative',
       overflow: 'hidden',
-      paddingTop: 'var(--nav-height)',
+      paddingTop: 'calc(var(--nav-height) + 40px)',
+      paddingBottom: '40px',
     }}>
       {/* Background gradient orbs */}
       <div style={{
@@ -270,10 +272,9 @@ export default function HeroSection() {
 
       {/* Stats bar */}
       <div style={{
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
+        position: 'relative',
+        width: '100%',
+        marginTop: '40px',
       }}>
         <div className="qm-container">
           <div className="qm-stats" style={{

frontend/src/components/Navbar.tsx

@@ -1,7 +1,15 @@
 import { useState, useEffect } from 'react'
+import { getApiUrl, setApiUrl } from '../api'
 
 export default function Navbar() {
   const [scrolled, setScrolled] = useState(false)
+  const [showSettings, setShowSettings] = useState(false)
+  const [apiUrlInput, setApiUrlInput] = useState(getApiUrl() || 'http://localhost:8000')
+
+  const saveSettings = () => {
+    setApiUrl(apiUrlInput)
+    setShowSettings(false)
+  }
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 40)
@@ -90,6 +98,20 @@ export default function Navbar() {
           </a>
         ))}
 
+        <button
+          onClick={() => setShowSettings(true)}
+          className="qm-btn-secondary"
+          style={{
+            padding: '8px',
+            fontSize: '16px',
+            background: 'transparent',
+            border: 'none',
+          }}
+          title="Settings"
+        >
+          ⚙️
+        </button>
+
         <a
           href="https://github.com/ridash2005/SQL-Query-Generator"
           target="_blank"
@@ -107,6 +129,63 @@ export default function Navbar() {
           GitHub
         </a>
       </div>
+
+      {showSettings && (
+        <div style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'rgba(0,0,0,0.8)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 1000,
+        }}>
+          <div className="qm-glass-card" style={{ width: '400px', padding: '30px' }}>
+            <h3 style={{ marginBottom: '10px' }}>Backend Connection</h3>
+            <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '20px', lineHeight: 1.5 }}>
+              GitHub Pages is a static host. To use the chat playground, you must run the FastAPI backend locally with your OpenAI API Key and data, then connect the frontend to it.
+            </p>
+            <div style={{ marginBottom: '20px' }}>
+              <label style={{ display: 'block', fontSize: '12px', marginBottom: '8px', color: 'var(--text-tertiary)' }}>
+                API Base URL
+              </label>
+              <input
+                type="text"
+                value={apiUrlInput}
+                onChange={(e) => setApiUrlInput(e.target.value)}
+                placeholder="http://localhost:8000"
+                style={{
+                  width: '100%',
+                  background: 'var(--bg-tertiary)',
+                  border: '1px solid var(--border-color)',
+                  color: 'var(--text-primary)',
+                  padding: '10px 14px',
+                  borderRadius: '6px',
+                  fontFamily: 'var(--font-mono)',
+                  fontSize: '13px',
+                  boxSizing: 'border-box'
+                }}
+              />
+            </div>
+            <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
+              <button
+                onClick={() => setShowSettings(false)}
+                className="qm-btn-secondary"
+                style={{ padding: '8px 16px' }}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={saveSettings}
+                className="qm-btn-primary"
+                style={{ padding: '8px 16px' }}
+              >
+                Save Settings
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </nav>
   )
 }