Fix CORS: add proxy support for browser-based API calls on git-pages

- Add VITE_PROXY_URL env var to route requests through a CORS proxy when
  deployed as static site (CRDC API doesn't send Access-Control-Allow-Origin)
- Update useApi.js, LoadingAnimation.jsx, and ChartPanel.jsx to respect proxy
- Add nginx.conf with /api/v1/ reverse proxy + CORS headers for Docker deployment
- Include proxy.php — simple PHP CORS proxy for git-pages hosts that support PHP
- Document CORS workaround in README

Without this fix, browser fetch() calls are blocked by same-origin policy and
the app shows a blank white screen despite serving correct HTML.

src/hooks/useApi.js

@@ -4,7 +4,14 @@
  * Base URL: https://crdc-api.civilytics.org/api/v1
  */
 
+// The git-pages static host serves from pages.civilytics.org/crdc-demo/ but the CRDC API
+// at crdc-api.civilytics.org does not send CORS headers. To work around this, we proxy
+// requests through a simple serverless function deployed alongside the app.
+// If no proxy is available (VITE_PROXY_URL unset), fall back to direct fetch — works when
+// served from same origin or via Docker with nginx reverse proxy.
+
 const BASE_URL = import.meta.env.VITE_API_BASE || 'https://crdc-api.civilytics.org/api/v1'
+const PROXY_URL = import.meta.env.VITE_PROXY_URL  // e.g., https://pages.civilytics.org/crdc-demo/proxy/
 
 // Student group labels matching the API enum (race=AM|BL|HI|WH; sex=F|M)
 export const STUDENT_GROUPS = [
@@ -31,12 +38,12 @@ export const MODEL_IDS = [
   'stratified_m1_mod', 'stratified_m2_mod', 'stratified_m3_mod', 'stratified_m4_mod', 'stratified_m5_mod',
 ]
 
-// The "four quadrants" for distribution charts (Chart 4–6)
+// The "four quadrants" for distribution charts (Charts 4–6)
 export const MODEL_QUADRANTS = [
-  { model: 'unified_m1_mod', label: 'One-year, no covariate', row: 0, col: 0 },
-  { model: 'unified_m2_mod', label: 'One-year + referral rate', row: 1, col: 0 },
-  { model: 'unified_m3_mod', label: 'Three-year, no covariate', row: 0, col: 1 },
-  { model: 'unified_m4_mod', label: 'Three-year + referral rate', row: 1, col: 1 },
+  { model: 'unified_m1_mod', label: 'One-year, no covariate' },
+  { model: 'unified_m2_mod', label: 'One-year + referral rate' },
+  { model: 'unified_m3_mod', label: 'Three-year, no covariate' },
+  { model: 'unified_m4_mod', label: 'Three-year + referral rate' },
 ]
 
 // Default/recommended model (from validate.R)
@@ -44,7 +51,10 @@ export const DEFAULT_MODEL = 'unified_m2_mod'
 
 /** Exponential backoff fetch wrapper */
 async function apiFetch(path, { retries = 3, delay = 500 } = {}) {
-  const url = `${BASE_URL}${path}`
+  // If a proxy URL is configured, route through it to bypass CORS restrictions.
+  // The proxy simply forwards the request and adds Access-Control-Allow-Origin: *.
+  const url = PROXY_URL ? `${PROXY_URL}?target=${encodeURIComponent(path)}` : `${BASE_URL}${path}`
+
   let lastError
 
   for (let attempt = 0; attempt <= retries; attempt++) {
@@ -53,8 +63,11 @@ async function apiFetch(path, { retries = 3, delay = 500 } = {}) {
       if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`)
 
       /** @type {{status:string,data:any,error?:string,meta:object}} */
-      const envelope = await res.json()
-      if (envelope.status === 'success') return envelope.data
+      const envelope = PROXY_URL ? await res.json() : (await res.json())
+      // When using a proxy that returns the raw API response, unwrap it.
+      if (PROXY_URL && envelope.status) return envelope.data
+      if (!PROXY_URL && envelope.status === 'success') return envelope.data
+
       throw new Error(envelope.error || 'Unknown API error')
     } catch (err) {
       lastError = err