Add rate limiting, security headers, fix CORS for production

2026-02-19 16:37:47 +00:00
parent a85fa0d211
commit c6b8fb752a
3449 changed files with 926916 additions and 4142 deletions
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Map } from 'lucide-react';
+
+export default function MapPage() {
+  return (
+    <div className="max-w-7xl mx-auto px-6 py-16 space-y-10">
+      <header className="space-y-4">
+        <div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
+          <Map size={16} /> Burrow Map
+        </div>
+        <h1 className="text-4xl font-black text-white">Burrowing Owl Locations</h1>
+        <p className="text-stone-400 text-lg max-w-2xl leading-relaxed">
+          An interactive map of active burrowing owl burrows monitored by CCFW volunteers across Cape Coral.
+        </p>
+      </header>
+
+      {/* Map placeholder — interactive Leaflet map requires client component */}
+      <div className="relative rounded-3xl overflow-hidden bg-surfaceGreen border border-white/5 shadow-2xl" style={{ height: 600 }}>
+        <div className="absolute inset-0 flex flex-col items-center justify-center gap-6 text-stone-500">
+          <div className="text-8xl">🗺️</div>
+          <div className="text-center space-y-2">
+            <p className="text-xl font-bold text-stone-300">Interactive Burrow Map</p>
+            <p className="text-sm">
+              Leaflet map with burrow markers loading from{' '}
+              <code className="text-teal text-xs bg-black/30 px-2 py-0.5 rounded">/api/burrows</code>
+            </p>
+          </div>
+        </div>
+        {/* Decorative grid pattern */}
+        <div
+          className="absolute inset-0 opacity-5"
+          style={{
+            backgroundImage:
+              'linear-gradient(rgba(0,130,167,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(0,130,167,0.5) 1px, transparent 1px)',
+            backgroundSize: '40px 40px',
+          }}
+        />
+      </div>
+
+      {/* Legend */}
+      <div className="flex flex-wrap gap-6 px-4 text-sm text-stone-400">
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-teal shadow-[0_0_8px_rgba(0,130,167,0.8)]" />
+          Active burrow
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-stone-600" />
+          Inactive burrow
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-gold" />
+          Camera location
+        </div>
+      </div>
+    </div>
+  );
+}