Initial commit

app/components/DonationPanel.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface DonationPanelProps {
+  id: string;
+}
+
+const DonationPanel: React.FC<DonationPanelProps> = ({ id }) => {
+  return (
+    <Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
+      <CardHeader>
+        <CardTitle className="text-accent neon-glow">Support Wildlife</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          <p className="text-foreground/80">Your donation helps protect and preserve the habitats of these amazing creatures.</p>
+          <div className="flex items-center justify-center p-4 bg-accent/10 rounded-md">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08 .402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <Input type="number" placeholder="Amount in USD" className="bg-black/50 border-accent/30 text-foreground" />
+          <Button className="w-full bg-accent text-accent-foreground hover:bg-accent/80">Donate Now</Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default DonationPanel;

app/components/LiveStream.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface LiveStreamProps {
+  id: string;
+}
+
+const LiveStream: React.FC<LiveStreamProps> = ({ id }) => {
+  return (
+    <Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
+      <CardHeader>
+        <CardTitle className="text-accent neon-glow">Live Cam {id}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="bg-black aspect-video flex items-center justify-center rounded-md border border-accent/30">
+          <p className="text-accent">Livestream {id} placeholder</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default LiveStream;

app/components/OwlInfo.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface OwlInfoProps {
+  id: string;
+}
+
+const OwlInfo: React.FC<OwlInfoProps> = ({ id }) => {
+  return (
+    <Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
+      <CardHeader>
+        <CardTitle className="text-accent neon-glow">About This Livestream</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-foreground/80">
+          This livestream (ID: {id}) showcases the natural habitat and behavior of wildlife in Florida. 
+          By observing these animals in their natural environment, we can learn more about their needs and how to protect them.
+        </p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default OwlInfo;

app/globals.css

@@ -0,0 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 10 10 10;
+  --foreground: 230 230 230;
+  --accent: 0 255 170;
+  --accent-foreground: 0 0 0;
+}
+
+body {
+  color: rgb(var(--foreground));
+  background: rgb(var(--background));
+}
+
+@layer utilities {
+  .neon-glow {
+    text-shadow: 0 0 5px rgb(var(--accent) / 0.5),
+                 0 0 10px rgb(var(--accent) / 0.5),
+                 0 0 15px rgb(var(--accent) / 0.5);
+  }
+}

app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Cape Coral Burrowing Owl Livestream",
+  description: "Live stream of burrowing owls in Cape Coral",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

app/livestream/[id]/page.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import LiveStream from '@/app/components/LiveStream';
+import DonationPanel from '@/app/components/DonationPanel';
+import OwlInfo from '@/app/components/OwlInfo';
+
+export default function LivestreamPage({ params }: { params: { id: string } }) {
+  // In a real app, you'd fetch the livestream data based on the ID
+  const streamData = {
+    id: params.id,
+    name: `Livestream ${params.id}`,
+    location: "Florida",
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <header className="bg-black/50 backdrop-blur-sm">
+        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+          <h1 className="text-4xl font-bold neon-glow text-accent">{streamData.name}</h1>
+        </div>
+      </header>
+      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="px-4 py-6 sm:px-0">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2">
+              <LiveStream id={streamData.id} />
+            </div>
+            <div className="space-y-6">
+              <DonationPanel id={streamData.id} />
+              <OwlInfo id={streamData.id} />
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

app/page.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+// This would typically come from an API or database
+const livestreams = [
+  { id: 1, name: "Cape Coral Burrowing Owl", location: "Cape Coral, FL", status: "Live" },
+  { id: 2, name: "Sanibel Island Osprey", location: "Sanibel Island, FL", status: "Live" },
+  { id: 3, name: "Everglades Alligator", location: "Everglades National Park, FL", status: "Offline" },
+  // ... add more livestreams as needed
+];
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <header className="bg-black/50 backdrop-blur-sm sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
+          <h1 className="text-3xl font-bold text-accent">Florida Wildlife Livestreams</h1>
+        </div>
+      </header>
+      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="px-4 py-6 sm:px-0 space-y-12">
+          <section>
+            <Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="text-2xl text-accent">Welcome to Florida's Wild Side</CardTitle>
+                <CardDescription className="text-foreground/80">
+                  Explore the diverse ecosystems of Florida through our live cameras.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-foreground/80 mb-4">
+                  From the unique burrowing owls of Cape Coral to the majestic ospreys of Sanibel Island and the iconic alligators of the Everglades, witness the beauty of Florida's wildlife in real-time.
+                </p>
+                <p className="text-foreground/80">
+                  Our livestreams offer a window into the natural world, promoting conservation awareness and providing valuable data for researchers and wildlife enthusiasts alike.
+                </p>
+              </CardContent>
+            </Card>
+          </section>
+          
+          <section>
+            <h2 className="text-2xl font-semibold text-accent mb-4">Featured Ecosystems</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {['Cape Coral', 'Sanibel Island', 'Everglades'].map((ecosystem) => (
+                <Card key={ecosystem} className="bg-black/30 border-accent/50 backdrop-blur-sm">
+                  <CardHeader>
+                    <CardTitle className="text-accent">{ecosystem}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-foreground/80">
+                      {ecosystem === 'Cape Coral' && "Home to the largest population of burrowing owls in Florida, supporting these ground-dwelling birds."}
+                      {ecosystem === 'Sanibel Island' && "A barrier island known for its shell beaches and wildlife refuges, crucial for ospreys and coastal birds."}
+                      {ecosystem === 'Everglades' && "The largest subtropical wilderness in the US, home to diverse species including the American alligator."}
+                    </p>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </section>
+          
+          <section>
+            <h2 className="text-2xl font-semibold text-accent mb-4">Live Cameras</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {livestreams.map((stream) => (
+                <Card key={stream.id} className="bg-black/30 border-accent/50 backdrop-blur-sm hover:bg-black/50 transition-colors">
+                  <CardHeader>
+                    <div className="flex justify-between items-center">
+                      <CardTitle className="text-accent">{stream.name}</CardTitle>
+                      <Badge variant={stream.status === 'Live' ? 'default' : 'secondary'}>
+                        {stream.status}
+                      </Badge>
+                    </div>
+                    <CardDescription className="text-foreground/80">{stream.location}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Button asChild className="w-full">
+                      <Link href={`/livestream/${stream.id}`}>Watch Now</Link>
+                    </Button>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+}