Initial commit from gitea_uploader script
This commit is contained in:
bizzle
parent
d8da7beb52
commit
a85fa0d211
@ -1,9 +1,9 @@
|
|||||||
services:
|
services:
|
||||||
app:
|
app:
|
||||||
cap_add:
|
cap_add:
|
||||||
- SYS_PTRACE
|
- SYS_PTRACE
|
||||||
command: sleep infinity
|
command: sleep infinity
|
||||||
init: true
|
init: true
|
||||||
security_opt:
|
security_opt:
|
||||||
- seccomp:unconfined
|
- seccomp:unconfined
|
||||||
version: '3.8'
|
version: '3.8'
|
||||||
|
|||||||
3
.npmrc
Normal file
3
.npmrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# npm configuration
|
||||||
|
registry=https://registry.npmjs.org/
|
||||||
|
save-exact=true
|
||||||
181
Dockerfile
181
Dockerfile
@ -1,90 +1,93 @@
|
|||||||
# syntax=docker/dockerfile:1.4
|
# syntax=docker/dockerfile:1.4
|
||||||
ARG NODE_VERSION=20
|
ARG NODE_VERSION=20
|
||||||
|
|
||||||
# Base development image
|
# Base development image
|
||||||
FROM node:${NODE_VERSION}-slim AS base
|
FROM node:${NODE_VERSION}-slim AS base
|
||||||
|
|
||||||
# Install Python and basic build dependencies
|
# Install Python and basic build dependencies
|
||||||
RUN apt-get update && apt-get install -y \
|
RUN apt-get update && apt-get install -y \
|
||||||
python3 \
|
python3 \
|
||||||
python3-pip \
|
python3-pip \
|
||||||
git \
|
git \
|
||||||
curl \
|
curl \
|
||||||
build-essential \
|
build-essential \
|
||||||
procps \
|
procps \
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
# Create cache directories
|
# Create cache directories
|
||||||
RUN mkdir -p /root/.npm
|
RUN mkdir -p /root/.npm
|
||||||
RUN mkdir -p /root/.pip
|
RUN mkdir -p /root/.pip
|
||||||
|
|
||||||
# Set working directory
|
# Set working directory
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
||||||
# Development stage
|
# Development stage
|
||||||
FROM base AS dev
|
FROM base AS dev
|
||||||
|
|
||||||
# Install development tools
|
# Install development tools
|
||||||
RUN apt-get update && apt-get install -y \
|
RUN apt-get update && apt-get install -y \
|
||||||
vim \
|
vim \
|
||||||
ssh \
|
ssh \
|
||||||
&& rm -rf /var/lib/apt/lists/*
|
&& rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
# Create a non-root user for development
|
# Create a non-root user for development
|
||||||
ARG USERNAME=node
|
ARG USERNAME=node
|
||||||
ARG USER_UID=1000
|
ARG USER_UID=1000
|
||||||
ARG USER_GID=$USER_UID
|
ARG USER_GID=$USER_UID
|
||||||
|
|
||||||
# Create the user
|
# Create the user (skip if already exists)
|
||||||
RUN groupadd --gid $USER_GID $USERNAME \
|
RUN (groupadd --gid $USER_GID $USERNAME || true) \
|
||||||
&& useradd --uid $USER_UID --gid $USER_GID -m $USERNAME \
|
&& (useradd --uid $USER_UID --gid $USER_GID -m $USERNAME || true) \
|
||||||
&& apt-get update \
|
&& apt-get update \
|
||||||
&& apt-get install -y sudo \
|
&& apt-get install -y sudo \
|
||||||
&& echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
|
&& echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
|
||||||
&& chmod 0440 /etc/sudoers.d/$USERNAME
|
&& chmod 0440 /etc/sudoers.d/$USERNAME
|
||||||
|
|
||||||
# Set npm config
|
# Set npm config
|
||||||
RUN npm config set cache /root/.npm \
|
RUN npm config set cache /root/.npm \
|
||||||
&& npm config set prefer-offline true \
|
&& npm config set prefer-offline true \
|
||||||
&& npm config set package-lock true
|
&& npm config set package-lock true
|
||||||
|
|
||||||
# Copy package files
|
# Copy package files
|
||||||
COPY package*.json ./
|
COPY package*.json ./
|
||||||
COPY .npmrc ./
|
COPY .npmrc ./
|
||||||
COPY requirements.txt ./
|
COPY requirements.txt ./
|
||||||
|
|
||||||
# Install Node.js dependencies with cache
|
# Install Node.js dependencies with cache
|
||||||
RUN --mount=type=cache,target=/root/.npm \
|
RUN --mount=type=cache,target=/root/.npm \
|
||||||
npm ci
|
npm ci
|
||||||
|
|
||||||
# Install Python dependencies with cache
|
# Install Python dependencies with cache (skip if no real dependencies)
|
||||||
RUN --mount=type=cache,target=/root/.cache/pip \
|
RUN --mount=type=cache,target=/root/.cache/pip \
|
||||||
pip3 install -r requirements.txt
|
pip3 install --break-system-packages -r requirements.txt || echo "No Python dependencies to install"
|
||||||
|
|
||||||
# Switch to non-root user
|
# Switch to non-root user
|
||||||
USER $USERNAME
|
USER $USERNAME
|
||||||
|
|
||||||
# Production stage
|
# Set the default command for development
|
||||||
FROM base AS prod
|
CMD ["npm", "run", "dev"]
|
||||||
|
|
||||||
# Copy package files
|
# Production stage
|
||||||
COPY package*.json ./
|
FROM base AS prod
|
||||||
COPY .npmrc ./
|
|
||||||
COPY requirements.txt ./
|
# Copy package files
|
||||||
|
COPY package*.json ./
|
||||||
# Install production dependencies
|
COPY .npmrc ./
|
||||||
RUN --mount=type=cache,target=/root/.npm \
|
COPY requirements.txt ./
|
||||||
npm ci --only=production
|
|
||||||
|
# Install production dependencies
|
||||||
# Install Python production dependencies
|
RUN --mount=type=cache,target=/root/.npm \
|
||||||
RUN --mount=type=cache,target=/root/.cache/pip \
|
npm ci --only=production
|
||||||
pip3 install -r requirements.txt
|
|
||||||
|
# Install Python production dependencies (skip if no real dependencies)
|
||||||
# Copy application code
|
RUN --mount=type=cache,target=/root/.cache/pip \
|
||||||
COPY . .
|
pip3 install --break-system-packages -r requirements.txt || echo "No Python dependencies to install"
|
||||||
|
|
||||||
# Build the application
|
# Copy application code
|
||||||
RUN npm run build
|
COPY . .
|
||||||
|
|
||||||
# Production command
|
# Build the application
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Production command
|
||||||
CMD ["npm", "start"]
|
CMD ["npm", "start"]
|
||||||
232
README.md
232
README.md
@ -1,36 +1,226 @@
|
|||||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
# 🦉 CCFW Wildlife Livestream Platform
|
||||||
|
|
||||||
## Getting Started
|
A modern, professional web application dedicated to **Cape Coral Friends of Wildlife (CCFW)** that provides real-time wildlife streaming with a focus on Florida's burrowing owls and conservation efforts. Built with cutting-edge web technologies and designed for maximum accessibility and user experience.
|
||||||
|
|
||||||
First, run the development server:
|
[](https://nextjs.org/)
|
||||||
|
[](https://www.typescriptlang.org/)
|
||||||
|
[](https://tailwindcss.com/)
|
||||||
|
[](https://www.docker.com/)
|
||||||
|
|
||||||
|
## 🌟 Features
|
||||||
|
|
||||||
|
### 🎥 **Live Wildlife Streaming**
|
||||||
|
- **Multiple HD livestream channels** focusing on Florida's native wildlife
|
||||||
|
- **Real-time status indicators** showing live/offline status
|
||||||
|
- **Professional streaming interface** with viewer counts and quality badges
|
||||||
|
- **Burrowing owl focus** - dedicated streams from Cape Coral's protected habitats
|
||||||
|
|
||||||
|
### 🦉 **Burrowing Owl Conservation**
|
||||||
|
- **Educational content** about burrowing owl behavior and habitats
|
||||||
|
- **Conservation information** highlighting CCFW's 2,500+ burrow maintenance program
|
||||||
|
- **Interactive maps** showing owl locations and protected areas
|
||||||
|
- **Volunteer opportunities** and ways to get involved
|
||||||
|
|
||||||
|
### 💝 **Support & Donations**
|
||||||
|
- **Integrated donation system** with multiple payment options
|
||||||
|
- **Membership management** for annual and multi-year memberships
|
||||||
|
- **Impact tracking** showing volunteer hours and conservation achievements
|
||||||
|
- **Tax-deductible donations** supporting Florida wildlife preservation
|
||||||
|
|
||||||
|
### 🎨 **Modern Design & UX**
|
||||||
|
- **Responsive design** that works perfectly on all devices
|
||||||
|
- **Dark mode optimized** with excellent contrast ratios
|
||||||
|
- **Smooth animations** and micro-interactions
|
||||||
|
- **Accessibility compliant** with proper focus states and screen reader support
|
||||||
|
- **Professional branding** using CCFW's official colors and themes
|
||||||
|
|
||||||
|
### 📊 **Interactive Features**
|
||||||
|
- **Real-time statistics** showing viewer counts and stream activity
|
||||||
|
- **Interactive wildlife facts** with educational content
|
||||||
|
- **Social media integration** with direct links to CCFW's platforms
|
||||||
|
- **Event calendar integration** for upcoming livestreams and events
|
||||||
|
|
||||||
|
## 🛠️ Tech Stack
|
||||||
|
|
||||||
|
### **Frontend**
|
||||||
|
- **Next.js 13+** with App Router for optimal performance
|
||||||
|
- **TypeScript** for type safety and better developer experience
|
||||||
|
- **Tailwind CSS** for utility-first styling
|
||||||
|
- **shadcn/ui** component library for consistent, accessible UI components
|
||||||
|
- **React Hook Form** for form management
|
||||||
|
|
||||||
|
### **Development & Deployment**
|
||||||
|
- **Docker** containerization for consistent development environments
|
||||||
|
- **ESLint & Prettier** for code quality and formatting
|
||||||
|
- **Git** for version control with comprehensive commit history
|
||||||
|
|
||||||
|
### **Performance & SEO**
|
||||||
|
- **Server-Side Rendering (SSR)** for fast initial page loads
|
||||||
|
- **Image optimization** with Next.js Image component
|
||||||
|
- **Static generation** for improved performance
|
||||||
|
- **SEO optimized** with proper meta tags and structured data
|
||||||
|
|
||||||
|
## 🚀 Quick Start
|
||||||
|
|
||||||
|
### **Prerequisites**
|
||||||
|
- Node.js 18+ or Docker
|
||||||
|
- Git for version control
|
||||||
|
|
||||||
|
### **Installation**
|
||||||
|
|
||||||
|
#### **Option 1: Using Docker (Recommended)**
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
# Clone the repository
|
||||||
# or
|
git clone https://github.com/your-username/ccfw-livestream.git
|
||||||
yarn dev
|
cd ccfw-livestream
|
||||||
# or
|
|
||||||
pnpm dev
|
# Start with Docker Compose
|
||||||
# or
|
docker-compose up -d
|
||||||
bun dev
|
|
||||||
|
# The application will be available at http://localhost:3000
|
||||||
```
|
```
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
#### **Option 2: Local Development**
|
||||||
|
```bash
|
||||||
|
# Clone the repository
|
||||||
|
git clone https://github.com/your-username/ccfw-livestream.git
|
||||||
|
cd ccfw-livestream
|
||||||
|
|
||||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
# Install dependencies
|
||||||
|
npm install
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
# Start development server
|
||||||
|
npm run dev
|
||||||
|
|
||||||
## Learn More
|
# Open http://localhost:3000 in your browser
|
||||||
|
```
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
### **Environment Variables**
|
||||||
|
Create a `.env.local` file in the root directory:
|
||||||
|
```env
|
||||||
|
NEXT_PUBLIC_SITE_URL=http://localhost:3000
|
||||||
|
# Add other environment variables as needed
|
||||||
|
```
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
## 📸 Screenshots
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
### **Main Landing Page**
|
||||||
|
|
||||||
|
*Professional landing page with featured livestreams and conservation information*
|
||||||
|
|
||||||
## Deploy on Vercel
|
### **Live Streaming Interface**
|
||||||
|
|
||||||
|
*HD streaming interface with real-time viewer counts and professional controls*
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
### **Burrowing Owl Information**
|
||||||
|
|
||||||
|
*Educational content about burrowing owls with conservation facts and habitat information*
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
## 🏗️ Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
ccfw-livestream/
|
||||||
|
├── app/ # Next.js app directory
|
||||||
|
│ ├── components/ # Reusable React components
|
||||||
|
│ │ ├── ui/ # shadcn/ui components
|
||||||
|
│ │ ├── LiveStream.tsx # Main streaming component
|
||||||
|
│ │ ├── OwlInfo.tsx # Wildlife information
|
||||||
|
│ │ └── DonationPanel.tsx # Donation interface
|
||||||
|
│ ├── livestream/ # Dynamic livestream pages
|
||||||
|
│ │ └── [id]/ # Individual stream pages
|
||||||
|
│ ├── globals.css # Global styles
|
||||||
|
│ ├── layout.tsx # Root layout
|
||||||
|
│ └── page.tsx # Main landing page
|
||||||
|
├── components/ # Shared UI components
|
||||||
|
├── public/ # Static assets
|
||||||
|
├── images/ # Screenshots and documentation
|
||||||
|
├── Dockerfile # Container configuration
|
||||||
|
├── docker-compose.yml # Docker orchestration
|
||||||
|
└── README.md # This file
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎯 Key Components
|
||||||
|
|
||||||
|
### **LiveStream Component**
|
||||||
|
- **HD video player** with professional controls
|
||||||
|
- **Real-time status** indicators (Live/Offline)
|
||||||
|
- **Viewer statistics** and engagement metrics
|
||||||
|
- **Accessibility features** for screen readers
|
||||||
|
- **Responsive design** for all screen sizes
|
||||||
|
|
||||||
|
### **OwlInfo Component**
|
||||||
|
- **Interactive tabs** for different information categories
|
||||||
|
- **Educational content** about burrowing owls
|
||||||
|
- **Conservation facts** and habitat information
|
||||||
|
- **Visual elements** with proper contrast ratios
|
||||||
|
|
||||||
|
### **DonationPanel Component**
|
||||||
|
- **Multiple donation amounts** with quick selection
|
||||||
|
- **Form validation** and error handling
|
||||||
|
- **Secure payment processing** integration ready
|
||||||
|
- **Impact visualization** showing conservation benefits
|
||||||
|
|
||||||
|
## 🌱 Conservation Impact
|
||||||
|
|
||||||
|
This platform serves as a vital tool for **Cape Coral Friends of Wildlife (CCFW)** to:
|
||||||
|
|
||||||
|
- **Educate the public** about burrowing owl conservation
|
||||||
|
- **Showcase live conservation efforts** in real-time
|
||||||
|
- **Fundraise for habitat protection** through donations
|
||||||
|
- **Recruit volunteers** for burrow maintenance programs
|
||||||
|
- **Track and display conservation impact** metrics
|
||||||
|
|
||||||
|
### **CCFW Mission Support**
|
||||||
|
- **2,500+ burrows** maintained annually
|
||||||
|
- **500+ active members** and volunteers
|
||||||
|
- **Educational outreach** to local communities
|
||||||
|
- **Habitat preservation** in urban environments
|
||||||
|
- **Research and monitoring** of protected species
|
||||||
|
|
||||||
|
## 🤝 Contributing
|
||||||
|
|
||||||
|
We welcome contributions to improve the CCFW Wildlife Livestream Platform!
|
||||||
|
|
||||||
|
### **Development Guidelines**
|
||||||
|
1. **Fork** the repository
|
||||||
|
2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
|
||||||
|
3. **Commit** your changes (`git commit -m 'Add amazing feature'`)
|
||||||
|
4. **Push** to the branch (`git push origin feature/amazing-feature`)
|
||||||
|
5. **Open** a Pull Request
|
||||||
|
|
||||||
|
### **Code Standards**
|
||||||
|
- Use **TypeScript** for all new code
|
||||||
|
- Follow **ESLint** and **Prettier** configurations
|
||||||
|
- Maintain **accessibility standards** (WCAG 2.1)
|
||||||
|
- Write **comprehensive tests** for new features
|
||||||
|
- Document **components and functions** with JSDoc
|
||||||
|
|
||||||
|
## 📄 License
|
||||||
|
|
||||||
|
This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
|
||||||
|
|
||||||
|
## 🙏 Acknowledgments
|
||||||
|
|
||||||
|
- **Cape Coral Friends of Wildlife** for their dedication to wildlife conservation
|
||||||
|
- **Florida wildlife enthusiasts** and conservation volunteers
|
||||||
|
- **Open source community** for the amazing tools and libraries
|
||||||
|
- **Burrowing owl researchers** and habitat experts
|
||||||
|
|
||||||
|
## 📞 Contact
|
||||||
|
|
||||||
|
**Cape Coral Friends of Wildlife**
|
||||||
|
- Website: [ccfriendsofwildlife.org](https://ccfriendsofwildlife.org)
|
||||||
|
- Phone: (239) 980-2593
|
||||||
|
- Email: info@ccfriendsofwildlife.org
|
||||||
|
|
||||||
|
**Project Repository**
|
||||||
|
- GitHub: [github.com/your-username/ccfw-livestream](https://github.com/your-username/ccfw-livestream)
|
||||||
|
- Issues: [Report bugs and request features](https://github.com/your-username/ccfw-livestream/issues)
|
||||||
|
|
||||||
|
## 🌟 Star this Repository
|
||||||
|
|
||||||
|
If you find this project helpful for wildlife conservation and education, please consider giving it a ⭐ on GitHub!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Built with ❤️ for Florida's wildlife and conservation efforts*
|
||||||
|
|||||||
@ -1,33 +1,131 @@
|
|||||||
import React from 'react';
|
"use client";
|
||||||
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
import React, { useState } from 'react';
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
interface DonationPanelProps {
|
import { Input } from "@/components/ui/input";
|
||||||
id: string;
|
|
||||||
}
|
interface DonationPanelProps {
|
||||||
|
id: string;
|
||||||
const DonationPanel: React.FC<DonationPanelProps> = ({ id }) => {
|
}
|
||||||
return (
|
|
||||||
<Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
|
const DonationPanel: React.FC<DonationPanelProps> = ({ id }) => {
|
||||||
<CardHeader>
|
const [amount, setAmount] = useState<number>(25);
|
||||||
<CardTitle className="text-accent neon-glow">Support Wildlife</CardTitle>
|
const [donated, setDonated] = useState<boolean>(false);
|
||||||
</CardHeader>
|
const [donationInProgress, setDonationInProgress] = useState<boolean>(false);
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-4">
|
const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
<p className="text-foreground/80">Your donation helps protect and preserve the habitats of these amazing creatures.</p>
|
const value = parseInt(e.target.value);
|
||||||
<div className="flex items-center justify-center p-4 bg-accent/10 rounded-md">
|
if (!isNaN(value)) {
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
setAmount(value);
|
||||||
<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" />
|
} else {
|
||||||
</svg>
|
setAmount(0);
|
||||||
</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>
|
const handleDonate = () => {
|
||||||
</CardContent>
|
if (amount > 0) {
|
||||||
</Card>
|
setDonationInProgress(true);
|
||||||
);
|
// Simulate API call
|
||||||
};
|
setTimeout(() => {
|
||||||
|
setDonated(true);
|
||||||
export default DonationPanel;
|
setDonationInProgress(false);
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const predefinedAmounts = [10, 25, 50, 100];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm">
|
||||||
|
<CardHeader className="border-b border-ccfw-teal/20 bg-ccfw-beige/10">
|
||||||
|
<CardTitle className="text-ccfw-teal">Support Wildlife</CardTitle>
|
||||||
|
<CardDescription className="text-ccfw-maroon font-medium">
|
||||||
|
Help protect the wildlife featured in Livestream {id}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-4">
|
||||||
|
{!donated ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-ccfw-maroon font-medium">Your donation helps protect and preserve the habitats of these amazing creatures.</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-4 gap-2 my-4">
|
||||||
|
{predefinedAmounts.map((presetAmount) => (
|
||||||
|
<Button
|
||||||
|
key={presetAmount}
|
||||||
|
variant={amount === presetAmount ? "default" : "outline"}
|
||||||
|
className={amount === presetAmount ? "bg-ccfw-teal text-white" : "border-ccfw-teal/30 text-foreground hover:bg-ccfw-teal/10"}
|
||||||
|
onClick={() => setAmount(presetAmount)}
|
||||||
|
>
|
||||||
|
${presetAmount}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<span className="text-ccfw-maroon font-medium">$</span>
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={amount}
|
||||||
|
onChange={handleAmountChange}
|
||||||
|
className="bg-ccfw-beige/20 border-ccfw-teal/30 text-foreground pl-7"
|
||||||
|
placeholder="Custom amount"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2 pt-2">
|
||||||
|
<div className="h-10 w-10 rounded-full bg-ccfw-gold/20 flex items-center justify-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-ccfw-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-ccfw-maroon font-medium">100% of donations go directly to CCFW conservation efforts</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={handleDonate}
|
||||||
|
disabled={amount <= 0 || donationInProgress}
|
||||||
|
className="w-full bg-ccfw-teal text-white hover:bg-ccfw-teal/80 relative overflow-hidden"
|
||||||
|
>
|
||||||
|
{donationInProgress ? (
|
||||||
|
<>
|
||||||
|
<span className="opacity-0">Donate Now</span>
|
||||||
|
<span className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
`Donate $${amount}`
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4 text-center">
|
||||||
|
<div className="mx-auto w-16 h-16 rounded-full bg-ccfw-gold/20 flex items-center justify-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-ccfw-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-ccfw-teal">Thank You!</h3>
|
||||||
|
<p className="text-ccfw-maroon font-medium">Your donation of ${amount} will help protect Florida wildlife.</p>
|
||||||
|
<div className="text-sm text-ccfw-maroon font-medium mt-2">
|
||||||
|
Cape Coral Friends of Wildlife is a 501(c)(3) non-profit organization.
|
||||||
|
All donations are tax-deductible.
|
||||||
|
</div>
|
||||||
|
<Button onClick={() => setDonated(false)} variant="outline" className="border-ccfw-teal/30 text-ccfw-teal mt-4 hover:bg-ccfw-teal/10">
|
||||||
|
Make Another Donation
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DonationPanel;
|
||||||
|
|||||||
@ -1,23 +1,193 @@
|
|||||||
import React from 'react';
|
"use client";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
|
import React from 'react';
|
||||||
interface LiveStreamProps {
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
id: string;
|
|
||||||
}
|
interface LiveStreamProps {
|
||||||
|
id: string;
|
||||||
const LiveStream: React.FC<LiveStreamProps> = ({ id }) => {
|
}
|
||||||
return (
|
|
||||||
<Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
|
// Define burrowing owl info based on stream ID
|
||||||
<CardHeader>
|
const getStreamInfo = (id: string) => {
|
||||||
<CardTitle className="text-accent neon-glow">Live Cam {id}</CardTitle>
|
switch (id) {
|
||||||
</CardHeader>
|
case "1":
|
||||||
<CardContent>
|
return {
|
||||||
<div className="bg-black aspect-video flex items-center justify-center rounded-md border border-accent/30">
|
title: "Cape Coral Burrowing Owl",
|
||||||
<p className="text-accent">Livestream {id} placeholder</p>
|
location: "Cape Coral, FL",
|
||||||
</div>
|
fact: "The burrowing owl is the official city bird of Cape Coral. These unique owls nest underground and are active during the day."
|
||||||
</CardContent>
|
};
|
||||||
</Card>
|
case "2":
|
||||||
);
|
return {
|
||||||
};
|
title: "Burrowing Owl Habitat",
|
||||||
|
location: "Cape Coral, FL",
|
||||||
export default LiveStream;
|
fact: "Burrowing owls prefer open areas with low vegetation and create underground burrows that provide shelter for many wildlife species."
|
||||||
|
};
|
||||||
|
case "3":
|
||||||
|
return {
|
||||||
|
title: "Owl Burrow Monitoring",
|
||||||
|
location: "Cape Coral, FL",
|
||||||
|
fact: "CCFW volunteers maintain over 2,500 burrows throughout Cape Coral to protect these threatened ground-dwelling owls."
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
title: `Burrowing Owl Cam ${id}`,
|
||||||
|
location: "Cape Coral, FL",
|
||||||
|
fact: "Burrowing owls are Florida's smallest owl species and are known for their distinctive long legs and daytime activity."
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Client-side component for dynamic time to avoid hydration errors
|
||||||
|
const ClientTimeDisplay: React.FC = () => {
|
||||||
|
const [currentTime, setCurrentTime] = React.useState<string>('');
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
setCurrentTime(new Date().toLocaleDateString() + ' • ' + new Date().toLocaleTimeString());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return <span className="bg-ccfw-beige/50 py-1 px-2 rounded">{currentTime}</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const LiveStream: React.FC<LiveStreamProps> = ({ id }) => {
|
||||||
|
// This would be determined by your backend in a real app
|
||||||
|
const isLive = id !== "3"; // Let's assume stream #3 is offline for testing
|
||||||
|
|
||||||
|
const streamInfo = getStreamInfo(id);
|
||||||
|
// Use a fixed viewer count to avoid hydration errors
|
||||||
|
const viewerCount = isLive ? (id === "1" ? 128 : id === "2" ? 86 : 75) : 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm">
|
||||||
|
<CardHeader className="pb-2 border-b border-ccfw-teal/20">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<CardTitle className="text-ccfw-teal">{streamInfo.title}</CardTitle>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className={`h-3 w-3 rounded-full ${isLive ? 'bg-ccfw-coral animate-pulse' : 'bg-gray-500'}`}></div>
|
||||||
|
<span className="text-sm font-medium text-ccfw-maroon font-semibold">{isLive ? 'LIVE' : 'OFFLINE'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-4">
|
||||||
|
<div className="bg-black aspect-video flex flex-col items-center justify-center rounded-md border border-ccfw-teal/30 relative overflow-hidden">
|
||||||
|
{isLive ? (
|
||||||
|
<>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-ccfw-teal/5 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Overlay for wildlife stream info */}
|
||||||
|
<div className="absolute top-0 left-0 w-full bg-black/50 p-2 flex justify-between items-center">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="h-2 w-2 rounded-full bg-ccfw-coral animate-pulse mr-2"></div>
|
||||||
|
<span className="text-xs text-white">CCFW Wildlife Stream</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-white bg-ccfw-teal/80 px-2 py-1 rounded">
|
||||||
|
HD
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="z-10 flex flex-col items-center">
|
||||||
|
<div className="bg-black/60 px-4 py-2 rounded-lg border border-ccfw-teal/30">
|
||||||
|
<p className="text-white font-medium">{streamInfo.location} • Cape Coral Friends of Wildlife</p>
|
||||||
|
<p className="text-xs text-white mt-2">HD Video • Live from Florida</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-4 right-4 bg-black/70 text-white text-xs px-2 py-1 rounded flex items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 mr-1 text-ccfw-coral" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||||
|
</svg>
|
||||||
|
{viewerCount}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stream controls overlay */}
|
||||||
|
<div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent pt-8 pb-2 px-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
<button className="text-white hover:text-ccfw-coral transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414-7.071m-2.829 9.9a9 9 0 010-12.728" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button className="text-white hover:text-ccfw-coral transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-white">
|
||||||
|
Powered by CCFW
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className="bg-black/60 p-4 rounded-lg border border-ccfw-teal/30">
|
||||||
|
<div className="flex items-center mb-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 text-gray-600 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<p className="text-white font-medium">Stream currently offline</p>
|
||||||
|
<p className="text-xs text-white/80">Will return soon. Check back later.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-white text-center">
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/events-and-programs/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hover:text-ccfw-coral transition-colors"
|
||||||
|
>
|
||||||
|
View upcoming livestream schedule
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 flex justify-between items-center">
|
||||||
|
<div className="text-xs text-ccfw-maroon/70">
|
||||||
|
<ClientTimeDisplay />
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button className="text-ccfw-teal hover:text-ccfw-coral transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button className="text-ccfw-teal hover:text-ccfw-coral transition-colors">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/events-and-programs/"
|
||||||
|
target="_blank"
|
||||||
|
className="text-ccfw-teal hover:text-ccfw-coral transition-colors"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Wildlife fact */}
|
||||||
|
<div className="mt-3 bg-ccfw-beige/10 p-3 rounded-md border border-ccfw-teal/20">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-ccfw-gold flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
<p className="text-sm text-ccfw-maroon font-medium leading-relaxed">
|
||||||
|
<span className="font-semibold text-ccfw-teal">Wildlife Fact:</span> {streamInfo.fact}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LiveStream;
|
||||||
|
|||||||
@ -1,24 +1,182 @@
|
|||||||
import React from 'react';
|
"use client";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
interface OwlInfoProps {
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||||
id: string;
|
import { Button } from "@/components/ui/button";
|
||||||
}
|
|
||||||
|
interface OwlInfoProps {
|
||||||
const OwlInfo: React.FC<OwlInfoProps> = ({ id }) => {
|
id: string;
|
||||||
return (
|
}
|
||||||
<Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
|
|
||||||
<CardHeader>
|
const OwlInfo: React.FC<OwlInfoProps> = ({ id }) => {
|
||||||
<CardTitle className="text-accent neon-glow">About This Livestream</CardTitle>
|
const [activeTab, setActiveTab] = useState<'facts' | 'habitat' | 'conservation'>('facts');
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
// Get burrowing owl data based on stream ID
|
||||||
<p className="text-sm text-foreground/80">
|
const getWildlifeData = () => {
|
||||||
This livestream (ID: {id}) showcases the natural habitat and behavior of wildlife in Florida.
|
switch (id) {
|
||||||
By observing these animals in their natural environment, we can learn more about their needs and how to protect them.
|
case "1":
|
||||||
</p>
|
return {
|
||||||
</CardContent>
|
species: "Burrowing Owl",
|
||||||
</Card>
|
scientificName: "Athene cunicularia",
|
||||||
);
|
location: "Cape Coral, FL",
|
||||||
};
|
facts: [
|
||||||
|
"Burrowing owls are small, long-legged owls that nest underground in burrows",
|
||||||
export default OwlInfo;
|
"Unlike most owls, they are active during the day (diurnal)",
|
||||||
|
"They stand about 9 inches tall and have bright yellow eyes",
|
||||||
|
"The City of Cape Coral has designated the burrowing owl as its official city bird"
|
||||||
|
],
|
||||||
|
habitat: "Cape Coral has the largest population of burrowing owls in Florida. They prefer open areas with low vegetation such as prairies, grasslands, and open areas of urban development. CCFW volunteers maintain over 2,500 burrows throughout Cape Coral.",
|
||||||
|
conservation: "Burrowing owls are listed as a state-threatened species in Florida. Development of their habitats is the biggest threat to their survival. CCFW works to protect and maintain burrows, educate the public, and collaborate with local authorities to ensure these birds have safe places to nest.",
|
||||||
|
ccfwLink: "https://ccfriendsofwildlife.org/burrowing-owls/"
|
||||||
|
};
|
||||||
|
case "2":
|
||||||
|
return {
|
||||||
|
species: "Burrowing Owl",
|
||||||
|
scientificName: "Athene cunicularia",
|
||||||
|
location: "Cape Coral, FL",
|
||||||
|
facts: [
|
||||||
|
"Burrowing owls create underground burrows that can be up to 30 feet long",
|
||||||
|
"They often use burrows created by other animals like prairie dogs or armadillos",
|
||||||
|
"These owls are known for their distinctive 'bobblehead' behavior when curious",
|
||||||
|
"They can live up to 9 years in the wild with proper habitat protection"
|
||||||
|
],
|
||||||
|
habitat: "Burrowing owls prefer open, grassy areas with sparse vegetation. They are commonly found in prairies, agricultural fields, and urban areas with suitable open spaces. The owls dig their own burrows or modify existing ones.",
|
||||||
|
conservation: "Habitat loss from urban development is the primary threat to burrowing owls. CCFW's burrow maintenance program helps protect existing burrows and creates artificial burrows to support the owl population in Cape Coral.",
|
||||||
|
ccfwLink: "https://ccfriendsofwildlife.org/burrowing-owls/"
|
||||||
|
};
|
||||||
|
case "3":
|
||||||
|
return {
|
||||||
|
species: "Burrowing Owl",
|
||||||
|
scientificName: "Athene cunicularia",
|
||||||
|
location: "Cape Coral, FL",
|
||||||
|
facts: [
|
||||||
|
"Burrowing owls are Florida's smallest owl species",
|
||||||
|
"They have long legs adapted for walking and running on the ground",
|
||||||
|
"Their diet consists mainly of insects, small mammals, and reptiles",
|
||||||
|
"They are the only owl species that nests exclusively underground"
|
||||||
|
],
|
||||||
|
habitat: "These unique owls inhabit open grasslands, pastures, and urban areas with low vegetation. They are particularly well-adapted to the Florida landscape and have thrived in areas where other wildlife has declined.",
|
||||||
|
conservation: "CCFW volunteers monitor and maintain over 2,500 burrows in Cape Coral. The organization's educational programs help the community understand the importance of protecting these threatened birds and their habitats.",
|
||||||
|
ccfwLink: "https://ccfriendsofwildlife.org/burrowing-owls/"
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
species: "Burrowing Owl",
|
||||||
|
scientificName: "Athene cunicularia",
|
||||||
|
location: "Cape Coral, FL",
|
||||||
|
facts: [
|
||||||
|
"Burrowing owls are the official city bird of Cape Coral",
|
||||||
|
"They are diurnal, meaning they are active during the day",
|
||||||
|
"These owls have distinctive long legs and bright yellow eyes",
|
||||||
|
"CCFW maintains over 2,500 burrows to protect this threatened species"
|
||||||
|
],
|
||||||
|
habitat: "Cape Coral provides ideal habitat for burrowing owls with its mix of urban development and open spaces. The city has the largest population of burrowing owls in Florida due to successful conservation efforts.",
|
||||||
|
conservation: "Cape Coral Friends of Wildlife works tirelessly to protect burrowing owls through habitat preservation, burrow maintenance, public education, and collaboration with local authorities.",
|
||||||
|
ccfwLink: "https://ccfriendsofwildlife.org/burrowing-owls/"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const wildlifeData = getWildlifeData();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm">
|
||||||
|
<CardHeader className="border-b border-ccfw-teal/20 bg-ccfw-beige/10">
|
||||||
|
<CardTitle className="text-ccfw-teal">About {wildlifeData.species}</CardTitle>
|
||||||
|
<CardDescription className="text-ccfw-maroon font-medium italic">
|
||||||
|
{wildlifeData.scientificName && (
|
||||||
|
<>{wildlifeData.scientificName} • </>
|
||||||
|
)}
|
||||||
|
{wildlifeData.location}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4 pt-4">
|
||||||
|
<div className="flex space-x-1 bg-ccfw-beige/10 p-1 rounded-md">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className={`flex-1 text-xs h-8 ${activeTab === 'facts' ? 'bg-ccfw-teal/20 text-ccfw-teal' : 'text-ccfw-maroon hover:text-ccfw-teal hover:bg-ccfw-teal/10'}`}
|
||||||
|
onClick={() => setActiveTab('facts')}
|
||||||
|
>
|
||||||
|
Facts
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className={`flex-1 text-xs h-8 ${activeTab === 'habitat' ? 'bg-ccfw-teal/20 text-ccfw-teal' : 'text-ccfw-maroon hover:text-ccfw-teal hover:bg-ccfw-teal/10'}`}
|
||||||
|
onClick={() => setActiveTab('habitat')}
|
||||||
|
>
|
||||||
|
Habitat
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className={`flex-1 text-xs h-8 ${activeTab === 'conservation' ? 'bg-ccfw-teal/20 text-ccfw-teal' : 'text-ccfw-maroon hover:text-ccfw-teal hover:bg-ccfw-teal/10'}`}
|
||||||
|
onClick={() => setActiveTab('conservation')}
|
||||||
|
>
|
||||||
|
Conservation
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="min-h-[180px]">
|
||||||
|
{activeTab === 'facts' && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<ul className="list-disc list-inside space-y-2 text-sm text-ccfw-maroon font-medium">
|
||||||
|
{wildlifeData.facts.map((fact, index) => (
|
||||||
|
<li key={index}>{fact}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'habitat' && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-ccfw-maroon font-medium">{wildlifeData.habitat}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'conservation' && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<p className="text-sm text-ccfw-maroon font-medium">{wildlifeData.conservation}</p>
|
||||||
|
|
||||||
|
<div className="bg-ccfw-beige/10 p-3 rounded-md border border-ccfw-teal/20 flex flex-col sm:flex-row items-center gap-3">
|
||||||
|
<div className="bg-ccfw-gold/20 p-2 rounded-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-ccfw-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="text-center sm:text-left">
|
||||||
|
<p className="text-sm text-ccfw-maroon font-medium">
|
||||||
|
<span className="font-medium text-ccfw-teal">How you can help:</span> Join the Cape Coral Friends of Wildlife in their mission to preserve and protect these incredible creatures.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/volunteer/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-xs text-ccfw-teal hover:text-ccfw-coral transition-colors"
|
||||||
|
>
|
||||||
|
Learn about volunteer opportunities
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-3 border-t border-ccfw-teal/20 flex justify-between items-center">
|
||||||
|
<span className="text-xs text-ccfw-maroon font-medium">Updated daily</span>
|
||||||
|
<a
|
||||||
|
href={wildlifeData.ccfwLink}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-ccfw-teal text-xs hover:text-ccfw-coral transition-colors flex items-center gap-1"
|
||||||
|
>
|
||||||
|
Learn More
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OwlInfo;
|
||||||
|
|||||||
@ -1,23 +1,56 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: 10 10 10;
|
/* CCFW Colors */
|
||||||
--foreground: 230 230 230;
|
--background: 25 25 25;
|
||||||
--accent: 0 255 170;
|
--foreground: 230 230 230;
|
||||||
--accent-foreground: 0 0 0;
|
--muted: 50 50 50;
|
||||||
}
|
--muted-foreground: 180 180 180;
|
||||||
|
|
||||||
body {
|
/* Teal/turquoise from CCFW site */
|
||||||
color: rgb(var(--foreground));
|
--accent: 0 130 167;
|
||||||
background: rgb(var(--background));
|
--accent-foreground: 255 255 255;
|
||||||
}
|
|
||||||
|
/* CCFW Colors */
|
||||||
@layer utilities {
|
--card: 233 230 223;
|
||||||
.neon-glow {
|
--card-foreground: 51 51 51;
|
||||||
text-shadow: 0 0 5px rgb(var(--accent) / 0.5),
|
|
||||||
0 0 10px rgb(var(--accent) / 0.5),
|
/* Teal/turquoise from CCFW */
|
||||||
0 0 15px rgb(var(--accent) / 0.5);
|
--primary: 0 130 167;
|
||||||
}
|
--primary-foreground: 255 255 255;
|
||||||
}
|
|
||||||
|
/* CCFW Yellow/Gold */
|
||||||
|
--secondary: 246 202 66;
|
||||||
|
--secondary-foreground: 51 51 51;
|
||||||
|
|
||||||
|
/* Coral red from CCFW site */
|
||||||
|
--destructive: 255 133 106;
|
||||||
|
--destructive-foreground: 255 255 255;
|
||||||
|
|
||||||
|
/* CCFW Colors */
|
||||||
|
--border: 204 204 204;
|
||||||
|
--input: 233 230 223;
|
||||||
|
--ring: 0 130 167;
|
||||||
|
|
||||||
|
/* Additional CCFW colors */
|
||||||
|
--ccfw-gold: 246 202 66;
|
||||||
|
--ccfw-teal: 0 130 167;
|
||||||
|
--ccfw-coral: 255 133 106;
|
||||||
|
--ccfw-beige: 233 230 223;
|
||||||
|
--ccfw-maroon: 88 40 67;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,36 +1,184 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import LiveStream from '@/app/components/LiveStream';
|
import Link from 'next/link';
|
||||||
import DonationPanel from '@/app/components/DonationPanel';
|
import LiveStream from '@/app/components/LiveStream';
|
||||||
import OwlInfo from '@/app/components/OwlInfo';
|
import DonationPanel from '@/app/components/DonationPanel';
|
||||||
|
import OwlInfo from '@/app/components/OwlInfo';
|
||||||
export default function LivestreamPage({ params }: { params: { id: string } }) {
|
import { Button } from "@/components/ui/button";
|
||||||
// In a real app, you'd fetch the livestream data based on the ID
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
const streamData = {
|
|
||||||
id: params.id,
|
// This would come from an API or database in a real app
|
||||||
name: `Livestream ${params.id}`,
|
const livestreamsData = [
|
||||||
location: "Florida",
|
{
|
||||||
};
|
id: "1",
|
||||||
|
name: "Cape Coral Burrowing Owl",
|
||||||
return (
|
location: "Cape Coral, FL",
|
||||||
<div className="min-h-screen bg-background text-foreground">
|
status: "Live",
|
||||||
<header className="bg-black/50 backdrop-blur-sm">
|
viewers: 128,
|
||||||
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
description: "Watch these unique ground-dwelling owls at their burrows in Cape Coral. These protected birds are the official city bird of Cape Coral!"
|
||||||
<h1 className="text-4xl font-bold neon-glow text-accent">{streamData.name}</h1>
|
},
|
||||||
</div>
|
{
|
||||||
</header>
|
id: "2",
|
||||||
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
name: "Sanibel Island Osprey",
|
||||||
<div className="px-4 py-6 sm:px-0">
|
location: "Sanibel Island, FL",
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
status: "Live",
|
||||||
<div className="lg:col-span-2">
|
viewers: 86,
|
||||||
<LiveStream id={streamData.id} />
|
description: "Observe ospreys building nests and hunting for fish around Sanibel Island."
|
||||||
</div>
|
},
|
||||||
<div className="space-y-6">
|
{
|
||||||
<DonationPanel id={streamData.id} />
|
id: "3",
|
||||||
<OwlInfo id={streamData.id} />
|
name: "Everglades Alligator",
|
||||||
</div>
|
location: "Everglades National Park, FL",
|
||||||
</div>
|
status: "Offline",
|
||||||
</div>
|
viewers: 0,
|
||||||
</main>
|
description: "Temporarily offline. Usually shows alligators in their natural habitat in the Everglades."
|
||||||
</div>
|
},
|
||||||
);
|
];
|
||||||
}
|
|
||||||
|
export default function LivestreamPage({ params }: { params: { id: string } }) {
|
||||||
|
// Find the stream data based on the ID
|
||||||
|
const streamData = livestreamsData.find(stream => stream.id === params.id) || {
|
||||||
|
id: params.id,
|
||||||
|
name: `Wildlife Livestream ${params.id}`,
|
||||||
|
location: "Florida",
|
||||||
|
status: "Live",
|
||||||
|
viewers: Math.floor(Math.random() * 100) + 50,
|
||||||
|
description: "Experience the natural beauty of Florida's wildlife."
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background text-foreground">
|
||||||
|
<header className="bg-ccfw-beige/90 backdrop-blur-sm sticky top-0 z-10 border-b border-ccfw-teal/20">
|
||||||
|
<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<Button variant="ghost" className="text-ccfw-teal mb-2" asChild>
|
||||||
|
<Link href="/">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
Back to all streams
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<h1 className="text-3xl font-bold text-ccfw-teal">{streamData.name}</h1>
|
||||||
|
<p className="text-ccfw-maroon text-sm mt-1">{streamData.location}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`h-3 w-3 rounded-full ${streamData.status === 'Live' ? 'bg-ccfw-coral animate-pulse' : 'bg-gray-500'}`}></div>
|
||||||
|
<span className="text-sm font-medium text-ccfw-maroon font-semibold">{streamData.status}</span>
|
||||||
|
</div>
|
||||||
|
</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 className="mt-6">
|
||||||
|
<Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="bg-ccfw-teal/10 p-3 rounded-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-ccfw-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-medium text-ccfw-teal mb-2">About this livestream</h3>
|
||||||
|
<p className="text-sm text-ccfw-maroon font-medium">
|
||||||
|
This livestream is provided by Cape Coral Friends of Wildlife, a volunteer organization dedicated to the protection and preservation of local wildlife. These cameras help researchers monitor wildlife behavior while allowing the public to connect with nature.
|
||||||
|
</p>
|
||||||
|
<p className="text-sm mt-2">
|
||||||
|
<a
|
||||||
|
href={`https://ccfriendsofwildlife.org/burrowing-owls/`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-ccfw-teal hover:text-ccfw-coral transition-colors underline"
|
||||||
|
>
|
||||||
|
Learn more about our conservation efforts
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<DonationPanel id={streamData.id} />
|
||||||
|
<OwlInfo id={streamData.id} />
|
||||||
|
|
||||||
|
<Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm overflow-hidden">
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<h3 className="text-lg font-medium text-ccfw-teal mb-4">Get Involved</h3>
|
||||||
|
<ul className="space-y-3">
|
||||||
|
<li className="flex items-center gap-3">
|
||||||
|
<div className="bg-ccfw-gold/20 p-2 rounded-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-ccfw-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/volunteer/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-sm text-ccfw-maroon font-medium hover:text-ccfw-teal transition-colors"
|
||||||
|
>
|
||||||
|
Volunteer with CCFW
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-3">
|
||||||
|
<div className="bg-ccfw-teal/20 p-2 rounded-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-ccfw-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/events-and-programs/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-sm text-ccfw-maroon font-medium hover:text-ccfw-teal transition-colors"
|
||||||
|
>
|
||||||
|
Attend an Event
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-3">
|
||||||
|
<div className="bg-ccfw-coral/20 p-2 rounded-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-ccfw-coral" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="mailto:info@ccfriendsofwildlife.org"
|
||||||
|
className="text-sm text-ccfw-maroon font-medium hover:text-ccfw-teal transition-colors"
|
||||||
|
>
|
||||||
|
Contact CCFW
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer className="bg-ccfw-beige/90 text-ccfw-maroon py-8 mt-12">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<p className="text-sm">
|
||||||
|
© {new Date().getFullYear()} Cape Coral Friends of Wildlife. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<p className="text-sm mt-2">
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hover:text-ccfw-teal transition-colors"
|
||||||
|
>
|
||||||
|
Visit our main website
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
731
app/page.tsx
731
app/page.tsx
@ -1,91 +1,640 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Badge } from "@/components/ui/badge";
|
|
||||||
|
// This would typically come from an API or database
|
||||||
// This would typically come from an API or database
|
const livestreams = [
|
||||||
const livestreams = [
|
{
|
||||||
{ id: 1, name: "Cape Coral Burrowing Owl", location: "Cape Coral, FL", status: "Live" },
|
id: 1,
|
||||||
{ id: 2, name: "Sanibel Island Osprey", location: "Sanibel Island, FL", status: "Live" },
|
name: "Cape Coral Burrowing Owl",
|
||||||
{ id: 3, name: "Everglades Alligator", location: "Everglades National Park, FL", status: "Offline" },
|
location: "Cape Coral, FL",
|
||||||
// ... add more livestreams as needed
|
status: "Live",
|
||||||
];
|
viewers: 128,
|
||||||
|
description: "Watch these unique ground-dwelling owls at their burrows in Cape Coral. These protected birds are the official city bird of Cape Coral!"
|
||||||
export default function Home() {
|
},
|
||||||
return (
|
{
|
||||||
<div className="min-h-screen bg-background text-foreground">
|
id: 2,
|
||||||
<header className="bg-black/50 backdrop-blur-sm sticky top-0 z-10">
|
name: "Burrowing Owl Habitat",
|
||||||
<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
|
location: "Cape Coral, FL",
|
||||||
<h1 className="text-3xl font-bold text-accent">Florida Wildlife Livestreams</h1>
|
status: "Live",
|
||||||
</div>
|
viewers: 95,
|
||||||
</header>
|
description: "Observe burrowing owls in their natural habitat. Watch them hunt, nest, and interact with their environment."
|
||||||
<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>
|
id: 3,
|
||||||
<Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
|
name: "Owl Burrow Monitoring",
|
||||||
<CardHeader>
|
location: "Cape Coral, FL",
|
||||||
<CardTitle className="text-2xl text-accent">Welcome to Florida's Wild Side</CardTitle>
|
status: "Live",
|
||||||
<CardDescription className="text-foreground/80">
|
viewers: 67,
|
||||||
Explore the diverse ecosystems of Florida through our live cameras.
|
description: "Monitor active burrowing owl burrows and learn about CCFW's conservation efforts to protect these amazing birds."
|
||||||
</CardDescription>
|
},
|
||||||
</CardHeader>
|
];
|
||||||
<CardContent>
|
|
||||||
<p className="text-foreground/80 mb-4">
|
export default function Home() {
|
||||||
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.
|
return (
|
||||||
</p>
|
<div className="min-h-screen bg-background text-foreground">
|
||||||
<p className="text-foreground/80">
|
<header className="bg-gradient-to-r from-ccfw-beige/95 via-ccfw-beige/90 to-ccfw-beige/95 backdrop-blur-md sticky top-0 z-10 border-b border-ccfw-teal/30 shadow-sm">
|
||||||
Our livestreams offer a window into the natural world, promoting conservation awareness and providing valuable data for researchers and wildlife enthusiasts alike.
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
</p>
|
<div className="flex justify-between items-center h-16">
|
||||||
</CardContent>
|
{/* Logo and Brand */}
|
||||||
</Card>
|
<div className="flex items-center space-x-3">
|
||||||
</section>
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 bg-ccfw-teal/20 rounded-full blur-sm"></div>
|
||||||
<section>
|
<div className="relative bg-gradient-to-br from-ccfw-teal to-ccfw-maroon p-2 rounded-full">
|
||||||
<h2 className="text-2xl font-semibold text-accent mb-4">Featured Ecosystems</h2>
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||||
{['Cape Coral', 'Sanibel Island', 'Everglades'].map((ecosystem) => (
|
</svg>
|
||||||
<Card key={ecosystem} className="bg-black/30 border-accent/50 backdrop-blur-sm">
|
</div>
|
||||||
<CardHeader>
|
</div>
|
||||||
<CardTitle className="text-accent">{ecosystem}</CardTitle>
|
<div>
|
||||||
</CardHeader>
|
<h1 className="text-xl font-bold text-ccfw-teal tracking-tight">CCFW Livestreams</h1>
|
||||||
<CardContent>
|
<p className="text-xs text-ccfw-maroon font-semibold">Cape Coral Friends of Wildlife</p>
|
||||||
<p className="text-foreground/80">
|
</div>
|
||||||
{ecosystem === 'Cape Coral' && "Home to the largest population of burrowing owls in Florida, supporting these ground-dwelling birds."}
|
</div>
|
||||||
{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."}
|
{/* Navigation Actions */}
|
||||||
</p>
|
<div className="flex items-center space-x-3">
|
||||||
</CardContent>
|
<a
|
||||||
</Card>
|
href="https://ccfriendsofwildlife.org/support/membership/"
|
||||||
))}
|
target="_blank"
|
||||||
</div>
|
rel="noopener noreferrer"
|
||||||
</section>
|
className="group relative px-4 py-2 bg-gradient-to-r from-ccfw-teal to-ccfw-maroon text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all duration-200 transform hover:scale-105"
|
||||||
|
>
|
||||||
<section>
|
<span className="relative z-10">Join/Renew</span>
|
||||||
<h2 className="text-2xl font-semibold text-accent mb-4">Live Cameras</h2>
|
<div className="absolute inset-0 bg-gradient-to-r from-ccfw-maroon to-ccfw-teal rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
</a>
|
||||||
{livestreams.map((stream) => (
|
<a
|
||||||
<Card key={stream.id} className="bg-black/30 border-accent/50 backdrop-blur-sm hover:bg-black/50 transition-colors">
|
href="https://ccfriendsofwildlife.org/volunteer/"
|
||||||
<CardHeader>
|
target="_blank"
|
||||||
<div className="flex justify-between items-center">
|
rel="noopener noreferrer"
|
||||||
<CardTitle className="text-accent">{stream.name}</CardTitle>
|
className="group relative px-4 py-2 bg-gradient-to-r from-ccfw-coral to-orange-400 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all duration-200 transform hover:scale-105"
|
||||||
<Badge variant={stream.status === 'Live' ? 'default' : 'secondary'}>
|
>
|
||||||
{stream.status}
|
<span className="relative z-10">Volunteer</span>
|
||||||
</Badge>
|
<div className="absolute inset-0 bg-gradient-to-r from-orange-400 to-ccfw-coral rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
|
||||||
</div>
|
</a>
|
||||||
<CardDescription className="text-foreground/80">{stream.location}</CardDescription>
|
</div>
|
||||||
</CardHeader>
|
</div>
|
||||||
<CardContent>
|
</div>
|
||||||
<Button asChild className="w-full">
|
</header>
|
||||||
<Link href={`/livestream/${stream.id}`}>Watch Now</Link>
|
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||||
</Button>
|
<div className="px-4 py-6 sm:px-0 space-y-12">
|
||||||
</CardContent>
|
{/* Hero Section */}
|
||||||
</Card>
|
<section className="relative">
|
||||||
))}
|
<div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/5 via-transparent to-ccfw-maroon/5 rounded-3xl"></div>
|
||||||
</div>
|
<Card className="relative border-0 bg-gradient-to-br from-ccfw-maroon/90 via-ccfw-maroon/85 to-ccfw-maroon/90 backdrop-blur-md overflow-hidden shadow-2xl">
|
||||||
</section>
|
<div className="absolute inset-0 bg-[url('https://ccfriendsofwildlife.org/wp-content/uploads/2020/07/Featured-image-home-page-1080x675.jpg')] opacity-15 bg-center bg-cover mix-blend-overlay"></div>
|
||||||
</div>
|
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
|
||||||
</main>
|
|
||||||
</div>
|
<CardHeader className="relative z-10 pb-8">
|
||||||
);
|
<div className="flex items-center space-x-3 mb-4">
|
||||||
}
|
<div className="h-1 w-12 bg-gradient-to-r from-ccfw-gold to-ccfw-coral rounded-full"></div>
|
||||||
|
<span className="text-white text-sm font-medium tracking-wider uppercase">Live Wildlife Streams</span>
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-4xl md:text-5xl font-bold text-white leading-tight mb-4">
|
||||||
|
Cape Coral Friends of
|
||||||
|
<span className="block text-transparent bg-gradient-to-r from-ccfw-gold via-ccfw-coral to-orange-400 bg-clip-text">
|
||||||
|
Wildlife Livestreams
|
||||||
|
</span>
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-white/90 text-xl font-medium leading-relaxed">
|
||||||
|
Dedicated to Protection, Preservation and Education
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="relative z-10 space-y-6">
|
||||||
|
<p className="text-white text-lg leading-relaxed font-medium">
|
||||||
|
Discover the fascinating world of <span className="text-ccfw-gold font-semibold">burrowing owls</span>, the official city bird of Cape Coral.
|
||||||
|
These unique ground-dwelling owls are active during the day and nest underground in burrows throughout our community.
|
||||||
|
</p>
|
||||||
|
<p className="text-white/90 text-lg leading-relaxed">
|
||||||
|
Cape Coral Friends of Wildlife is dedicated to protecting these threatened birds through habitat preservation, burrow maintenance, and community education. With over 2,500 burrows maintained by our volunteers, we ensure these amazing owls thrive in our urban environment.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 pt-4">
|
||||||
|
<div className="flex items-center space-x-6 text-white/80">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="h-2 w-2 bg-ccfw-coral rounded-full animate-pulse"></div>
|
||||||
|
<span className="text-sm font-medium">Live 24/7</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<svg className="h-4 w-4 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-sm font-medium">HD Quality</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<svg className="h-4 w-4 text-ccfw-teal" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-sm font-medium">Cape Coral, FL</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
<CardFooter className="relative z-10 pt-6">
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/about-us/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group inline-flex items-center space-x-2 px-6 py-3 bg-gradient-to-r from-ccfw-gold to-ccfw-coral text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
|
||||||
|
>
|
||||||
|
<span>Learn more about CCFW</span>
|
||||||
|
<svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Featured Owls Section */}
|
||||||
|
<section className="space-y-8">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="inline-flex items-center space-x-3">
|
||||||
|
<div className="h-1 w-8 bg-gradient-to-r from-ccfw-teal to-ccfw-maroon rounded-full"></div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-ccfw-teal tracking-tight">Featured Owls</h2>
|
||||||
|
<div className="h-1 w-8 bg-gradient-to-r from-ccfw-maroon to-ccfw-teal rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-center space-x-6 text-sm text-white font-medium">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="h-2 w-2 bg-ccfw-teal rounded-full"></div>
|
||||||
|
<span>Founded in 2001</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<svg className="h-4 w-4 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
|
||||||
|
</svg>
|
||||||
|
<span>500+ Members</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
name: 'Burrowing Owl Facts',
|
||||||
|
icon: '🦉',
|
||||||
|
color: 'from-ccfw-teal to-ccfw-maroon',
|
||||||
|
description: "Burrowing owls are small, long-legged owls that nest underground in burrows. Unlike most owls, they are active during the day and have bright yellow eyes. The City of Cape Coral has designated the burrowing owl as its official city bird."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Owl Conservation',
|
||||||
|
icon: '🌱',
|
||||||
|
color: 'from-ccfw-maroon to-ccfw-teal',
|
||||||
|
description: "CCFW volunteers maintain over 2,500 burrows throughout Cape Coral. These unique birds face threats from habitat loss and development. Our conservation efforts protect these amazing ground-dwelling owls."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Owl Habitat',
|
||||||
|
icon: '🏞️',
|
||||||
|
color: 'from-ccfw-gold to-ccfw-coral',
|
||||||
|
description: "Burrowing owls prefer open areas with low vegetation such as prairies, grasslands, and open areas of urban development. They create burrows that provide shelter for many other wildlife species as well."
|
||||||
|
}
|
||||||
|
].map((owlFeature) => (
|
||||||
|
<Card key={owlFeature.name} className="group relative border-0 bg-gradient-to-br from-white/80 to-white/60 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 overflow-hidden">
|
||||||
|
<div className={`absolute inset-0 bg-gradient-to-br ${owlFeature.color} opacity-0 group-hover:opacity-10 transition-opacity duration-300`}></div>
|
||||||
|
|
||||||
|
<CardHeader className="relative z-10 pb-4">
|
||||||
|
<div className="flex items-center space-x-3 mb-3">
|
||||||
|
<div className="text-3xl group-hover:scale-110 transition-transform duration-200">{owlFeature.icon}</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-xl font-bold text-ccfw-teal group-hover:text-ccfw-maroon transition-colors">
|
||||||
|
{owlFeature.name}
|
||||||
|
</CardTitle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={`h-0.5 w-full bg-gradient-to-r ${owlFeature.color} rounded-full`}></div>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="relative z-10">
|
||||||
|
<p className="text-ccfw-maroon leading-relaxed font-medium">
|
||||||
|
{owlFeature.description}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Live Cameras Section */}
|
||||||
|
<section className="space-y-8">
|
||||||
|
<div className="text-center space-y-4">
|
||||||
|
<div className="inline-flex items-center space-x-3">
|
||||||
|
<div className="h-1 w-8 bg-gradient-to-r from-ccfw-coral to-ccfw-gold rounded-full"></div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-ccfw-teal tracking-tight">Live Cameras</h2>
|
||||||
|
<div className="h-1 w-8 bg-gradient-to-r from-ccfw-gold to-ccfw-coral rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-center space-x-2 text-sm text-white font-medium">
|
||||||
|
<svg className="h-4 w-4 text-ccfw-teal" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm3 2l3 3-3 3V8z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>Powered by</span>
|
||||||
|
<span className="font-bold text-transparent bg-gradient-to-r from-ccfw-gold to-ccfw-coral bg-clip-text">
|
||||||
|
CCFW
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{livestreams.map((stream) => (
|
||||||
|
<Card key={stream.id} className="group relative border-0 bg-gradient-to-br from-white/90 to-white/70 backdrop-blur-sm shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105 hover:-translate-y-2 overflow-hidden">
|
||||||
|
{/* Status Indicator */}
|
||||||
|
<div className="absolute top-4 right-4 z-20">
|
||||||
|
<div className={`flex items-center space-x-2 px-3 py-1.5 rounded-full backdrop-blur-sm border ${
|
||||||
|
stream.status === 'Live'
|
||||||
|
? 'bg-emerald-500/20 border-emerald-400/30 text-emerald-700'
|
||||||
|
: 'bg-gray-600/20 border-gray-500/30 text-gray-700'
|
||||||
|
}`}>
|
||||||
|
<div className={`h-2 w-2 rounded-full ${
|
||||||
|
stream.status === 'Live' ? 'bg-emerald-500 animate-pulse' : 'bg-gray-400'
|
||||||
|
}`}></div>
|
||||||
|
<span className="text-xs font-bold tracking-wide uppercase">{stream.status}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Background Gradient Overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/5 via-transparent to-ccfw-maroon/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||||
|
|
||||||
|
{/* Camera Preview Mockup */}
|
||||||
|
<div className="relative h-48 bg-gradient-to-br from-ccfw-teal/10 to-ccfw-maroon/10 flex items-center justify-center overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||||
|
<div className="relative z-10 text-center space-y-3">
|
||||||
|
<div className="mx-auto w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
|
||||||
|
<svg className="h-8 w-8 text-ccfw-teal" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="text-white/80 text-sm font-medium">HD Live Stream</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quality Badge */}
|
||||||
|
<div className="absolute top-4 left-4 bg-black/60 text-white text-xs px-2 py-1 rounded backdrop-blur-sm">
|
||||||
|
HD
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CardHeader className="relative z-10 pt-6">
|
||||||
|
<CardTitle className="text-xl font-bold text-ccfw-teal group-hover:text-ccfw-maroon transition-colors leading-tight">
|
||||||
|
{stream.name}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-ccfw-maroon font-medium flex items-center space-x-1">
|
||||||
|
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>{stream.location}</span>
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="relative z-10 space-y-4">
|
||||||
|
<p className="text-ccfw-maroon leading-relaxed font-medium text-sm">
|
||||||
|
{stream.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Viewer Count & Quality */}
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex items-center space-x-4 text-xs">
|
||||||
|
{stream.status === 'Live' && (
|
||||||
|
<div className="flex items-center space-x-1 text-ccfw-teal font-semibold">
|
||||||
|
<svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
|
||||||
|
</svg>
|
||||||
|
<span>{stream.viewers} viewers</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-1">
|
||||||
|
<svg className="h-4 w-4 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs font-semibold text-ccfw-maroon">HD</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Watch Button */}
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
className={`w-full font-semibold py-3 rounded-xl shadow-md transition-all duration-200 ${
|
||||||
|
stream.status === 'Live'
|
||||||
|
? 'bg-gradient-to-r from-ccfw-teal to-ccfw-maroon text-white hover:shadow-lg hover:scale-105'
|
||||||
|
: 'bg-gray-300 text-gray-600 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
disabled={stream.status !== 'Live'}
|
||||||
|
>
|
||||||
|
<Link href={`/livestream/${stream.id}`} className="flex items-center justify-center space-x-2">
|
||||||
|
{stream.status === 'Live' ? (
|
||||||
|
<>
|
||||||
|
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M10 12l-6-4h12l-6 4z" />
|
||||||
|
<path d="M10 8l6 4H4l6-4z" />
|
||||||
|
</svg>
|
||||||
|
<span>Watch Live</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>Offline</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Support Our Mission Section */}
|
||||||
|
<section className="relative bg-gradient-to-br from-ccfw-beige/20 via-ccfw-beige/10 to-transparent p-8 rounded-3xl border border-ccfw-teal/30 shadow-lg overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/5 to-ccfw-maroon/5"></div>
|
||||||
|
|
||||||
|
<div className="relative z-10 flex flex-col lg:flex-row gap-12 items-center">
|
||||||
|
{/* Content Section */}
|
||||||
|
<div className="lg:w-1/2 space-y-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="inline-flex items-center space-x-3">
|
||||||
|
<div className="h-1 w-8 bg-gradient-to-r from-ccfw-teal to-ccfw-maroon rounded-full"></div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight">Support Our Mission</h2>
|
||||||
|
</div>
|
||||||
|
<p className="text-lg text-white leading-relaxed font-medium">
|
||||||
|
Cape Coral Friends of Wildlife is a volunteer organization founded in 2001. With over 500 members and an engaged group of volunteers, we work to preserve and enhance the habitats of protected wildlife.
|
||||||
|
</p>
|
||||||
|
<p className="text-lg text-white/90 leading-relaxed font-medium">
|
||||||
|
Your support helps us continue our conservation efforts and educational programs that benefit the unique wildlife of Southwest Florida.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/support/membership/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group relative px-6 py-3 bg-gradient-to-r from-ccfw-gold to-amber-500 text-white font-bold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105 overflow-hidden"
|
||||||
|
>
|
||||||
|
<span className="relative z-10 flex items-center justify-center space-x-2">
|
||||||
|
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
|
||||||
|
</svg>
|
||||||
|
<span>Become a Member</span>
|
||||||
|
</span>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-amber-500 to-ccfw-gold rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/donate-to-ccfw/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group relative px-6 py-3 bg-gradient-to-r from-ccfw-coral to-rose-500 text-white font-bold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105 overflow-hidden"
|
||||||
|
>
|
||||||
|
<span className="relative z-10 flex items-center justify-center space-x-2">
|
||||||
|
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span>Donate Today</span>
|
||||||
|
</span>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-rose-500 to-ccfw-coral rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Card */}
|
||||||
|
<div className="lg:w-1/2 flex justify-center">
|
||||||
|
<div className="relative w-full max-w-md">
|
||||||
|
{/* Background Glow */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/20 to-ccfw-maroon/20 rounded-3xl blur-xl"></div>
|
||||||
|
|
||||||
|
<div className="relative bg-gradient-to-br from-white/90 to-white/70 backdrop-blur-sm p-8 rounded-3xl border border-white/30 shadow-xl">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<div className="inline-flex items-center space-x-2 mb-3">
|
||||||
|
<svg className="h-6 w-6 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-sm font-bold text-white tracking-wider uppercase">Impact This Year</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold text-ccfw-teal">Volunteer Hours</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Stat */}
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r from-ccfw-coral to-rose-400 rounded-full blur-2xl opacity-30"></div>
|
||||||
|
<div className="relative text-7xl md:text-8xl font-black text-transparent bg-gradient-to-r from-ccfw-coral to-rose-500 bg-clip-text">
|
||||||
|
836
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-white font-semibold mt-2">And counting...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<div className="text-center">
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/volunteer/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center space-x-2 px-6 py-3 bg-gradient-to-r from-ccfw-teal to-ccfw-maroon text-white font-semibold rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105"
|
||||||
|
>
|
||||||
|
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||||
|
</svg>
|
||||||
|
<span>Join Our Team</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{/* Modern Footer */}
|
||||||
|
<footer className="relative bg-gradient-to-br from-ccfw-beige/90 via-ccfw-beige/95 to-white/90 backdrop-blur-sm mt-20 border-t border-ccfw-teal/30">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/5 to-transparent"></div>
|
||||||
|
|
||||||
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||||
|
{/* Main Footer Content */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
||||||
|
{/* Organization Info */}
|
||||||
|
<div className="md:col-span-2 space-y-6">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 bg-ccfw-teal/20 rounded-full blur-sm"></div>
|
||||||
|
<div className="relative bg-gradient-to-br from-ccfw-teal to-ccfw-maroon p-2 rounded-full">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-bold text-ccfw-teal tracking-tight">Cape Coral Friends of Wildlife</h3>
|
||||||
|
<p className="text-sm text-ccfw-maroon font-medium">CCFW • Est. 2001</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-ccfw-maroon leading-relaxed font-medium max-w-md">
|
||||||
|
A volunteer organization dedicated to the preservation of wildlife in Cape Coral, Florida. We protect and enhance habitats for protected species through education and conservation.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="flex items-center space-x-2 bg-ccfw-teal/10 px-3 py-1.5 rounded-full">
|
||||||
|
<svg className="h-4 w-4 text-ccfw-teal" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs font-bold text-ccfw-teal">501(c)(3) Nonprofit</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2 bg-ccfw-gold/20 px-3 py-1.5 rounded-full">
|
||||||
|
<svg className="h-4 w-4 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs font-bold text-white">500+ Members</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Links */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-bold text-ccfw-teal tracking-tight">Quick Links</h3>
|
||||||
|
<ul className="space-y-3">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group flex items-center space-x-2 text-ccfw-maroon hover:text-ccfw-teal transition-colors font-medium"
|
||||||
|
>
|
||||||
|
<svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||||
|
</svg>
|
||||||
|
<span>Main Website</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/events-and-programs/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group flex items-center space-x-2 text-ccfw-maroon hover:text-ccfw-teal transition-colors font-medium"
|
||||||
|
>
|
||||||
|
<svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||||
|
</svg>
|
||||||
|
<span>Events & Programs</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/burrowing-owls/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group flex items-center space-x-2 text-ccfw-maroon hover:text-ccfw-teal transition-colors font-medium"
|
||||||
|
>
|
||||||
|
<svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||||
|
</svg>
|
||||||
|
<span>Burrowing Owls</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://ccfriendsofwildlife.org/about-us/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group flex items-center space-x-2 text-ccfw-maroon hover:text-ccfw-teal transition-colors font-medium"
|
||||||
|
>
|
||||||
|
<svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||||
|
</svg>
|
||||||
|
<span>About Us</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact & Social */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-bold text-ccfw-teal tracking-tight">Get In Touch</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center space-x-3 p-3 bg-white/50 rounded-xl border border-ccfw-teal/20">
|
||||||
|
<div className="bg-gradient-to-r from-ccfw-teal to-ccfw-maroon p-2 rounded-lg">
|
||||||
|
<svg className="h-4 w-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-ccfw-maroon font-medium">Call Us</p>
|
||||||
|
<a
|
||||||
|
href="tel:239-980-2593"
|
||||||
|
className="text-ccfw-maroon font-bold hover:text-ccfw-teal transition-colors"
|
||||||
|
>
|
||||||
|
(239) 980-2593
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<p className="text-sm font-bold text-ccfw-teal tracking-wide uppercase">Follow Us</p>
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
<a
|
||||||
|
href="https://www.facebook.com/CCFriendsofWildlife"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group p-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://www.instagram.com/ccfriendsofwildlife/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group p-3 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://www.youtube.com/channel/UC-VIPk6M1K4xEA-gXv6_cZQ"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group p-3 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer Bottom */}
|
||||||
|
<div className="pt-8 border-t border-ccfw-teal/20">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
|
||||||
|
<div className="text-center md:text-left">
|
||||||
|
<p className="text-ccfw-maroon font-medium">
|
||||||
|
© 2024 Cape Coral Friends of Wildlife. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-ccfw-maroon mt-1">
|
||||||
|
Made with ❤️ for Florida's wildlife
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-6 text-xs text-ccfw-maroon font-medium">
|
||||||
|
<span>Privacy Policy</span>
|
||||||
|
<span>Terms of Service</span>
|
||||||
|
<span>Accessibility</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@ -1,56 +1,56 @@
|
|||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import { Slot } from "@radix-ui/react-slot"
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
import { cva, type VariantProps } from "class-variance-authority"
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
destructive:
|
destructive:
|
||||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||||
outline:
|
outline:
|
||||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||||
secondary:
|
secondary:
|
||||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
link: "text-primary underline-offset-4 hover:underline",
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: "h-10 px-4 py-2",
|
default: "h-10 px-4 py-2",
|
||||||
sm: "h-9 rounded-md px-3",
|
sm: "h-9 rounded-md px-3",
|
||||||
lg: "h-11 rounded-md px-8",
|
lg: "h-11 rounded-md px-8",
|
||||||
icon: "h-10 w-10",
|
icon: "h-10 w-10",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: "default",
|
variant: "default",
|
||||||
size: "default",
|
size: "default",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
export interface ButtonProps
|
export interface ButtonProps
|
||||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
VariantProps<typeof buttonVariants> {
|
VariantProps<typeof buttonVariants> {
|
||||||
asChild?: boolean
|
asChild?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
const Comp = asChild ? Slot : "button"
|
const Comp = asChild ? Slot : "button"
|
||||||
return (
|
return (
|
||||||
<Comp
|
<Comp
|
||||||
className={cn(buttonVariants({ variant, size, className }))}
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
Button.displayName = "Button"
|
Button.displayName = "Button"
|
||||||
|
|
||||||
export { Button, buttonVariants }
|
export { Button, buttonVariants }
|
||||||
|
|||||||
@ -1,55 +1,79 @@
|
|||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const Card = React.forwardRef<
|
const Card = React.forwardRef<
|
||||||
HTMLDivElement,
|
HTMLDivElement,
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
"rounded-lg border bg-card text-card-foreground shadow-sm",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
Card.displayName = "Card"
|
Card.displayName = "Card"
|
||||||
|
|
||||||
const CardHeader = React.forwardRef<
|
const CardHeader = React.forwardRef<
|
||||||
HTMLDivElement,
|
HTMLDivElement,
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
CardHeader.displayName = "CardHeader"
|
CardHeader.displayName = "CardHeader"
|
||||||
|
|
||||||
const CardTitle = React.forwardRef<
|
const CardTitle = React.forwardRef<
|
||||||
HTMLParagraphElement,
|
HTMLParagraphElement,
|
||||||
React.HTMLAttributes<HTMLHeadingElement>
|
React.HTMLAttributes<HTMLHeadingElement>
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<h3
|
<h3
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"text-2xl font-semibold leading-none tracking-tight",
|
"text-2xl font-semibold leading-none tracking-tight",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
CardTitle.displayName = "CardTitle"
|
CardTitle.displayName = "CardTitle"
|
||||||
|
|
||||||
const CardContent = React.forwardRef<
|
const CardContent = React.forwardRef<
|
||||||
HTMLDivElement,
|
HTMLDivElement,
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||||
))
|
))
|
||||||
CardContent.displayName = "CardContent"
|
CardContent.displayName = "CardContent"
|
||||||
|
|
||||||
export { Card, CardHeader, CardTitle, CardContent }
|
const CardDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardDescription.displayName = "CardDescription"
|
||||||
|
|
||||||
|
const CardFooter = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex items-center p-6 pt-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardFooter.displayName = "CardFooter"
|
||||||
|
|
||||||
|
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
|
||||||
|
|||||||
@ -1,25 +1,25 @@
|
|||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
export interface InputProps
|
export interface InputProps
|
||||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
({ className, type, ...props }, ref) => {
|
({ className, type, ...props }, ref) => {
|
||||||
return (
|
return (
|
||||||
<input
|
<input
|
||||||
type={type}
|
type={type}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
Input.displayName = "Input"
|
Input.displayName = "Input"
|
||||||
|
|
||||||
export { Input }
|
export { Input }
|
||||||
|
|||||||
@ -1,434 +1,434 @@
|
|||||||
#!/usr/bin/env python3
|
#!/usr/bin/env python3
|
||||||
|
|
||||||
import os
|
import os
|
||||||
import json
|
import json
|
||||||
import yaml
|
import yaml
|
||||||
import argparse
|
import argparse
|
||||||
from typing import Dict, List, Set, Tuple
|
from typing import Dict, List, Set, Tuple
|
||||||
from pathlib import Path
|
from pathlib import Path
|
||||||
|
|
||||||
class DockerConfigGenerator:
|
class DockerConfigGenerator:
|
||||||
def __init__(self, project_path: str):
|
def __init__(self, project_path: str):
|
||||||
self.project_path = Path(project_path).resolve()
|
self.project_path = Path(project_path).resolve()
|
||||||
self.detected_tech = set()
|
self.detected_tech = set()
|
||||||
self.node_version = None
|
self.node_version = None
|
||||||
self.python_version = None
|
self.python_version = None
|
||||||
self.ports = set()
|
self.ports = set()
|
||||||
self.env_vars = set()
|
self.env_vars = set()
|
||||||
self.dependencies = set()
|
self.dependencies = set()
|
||||||
|
|
||||||
def analyze_existing_configs(self) -> None:
|
def analyze_existing_configs(self) -> None:
|
||||||
"""Analyze existing Docker configurations"""
|
"""Analyze existing Docker configurations"""
|
||||||
# Analyze existing Dockerfile
|
# Analyze existing Dockerfile
|
||||||
dockerfile_path = self.project_path / 'Dockerfile'
|
dockerfile_path = self.project_path / 'Dockerfile'
|
||||||
if dockerfile_path.exists():
|
if dockerfile_path.exists():
|
||||||
with open(dockerfile_path) as f:
|
with open(dockerfile_path) as f:
|
||||||
content = f.read()
|
content = f.read()
|
||||||
# Detect base images and versions
|
# Detect base images and versions
|
||||||
if 'FROM node:' in content:
|
if 'FROM node:' in content:
|
||||||
self.detected_tech.add('nodejs')
|
self.detected_tech.add('nodejs')
|
||||||
# Extract node version from FROM statement
|
# Extract node version from FROM statement
|
||||||
import re
|
import re
|
||||||
node_match = re.search(r'FROM node:(\d+)', content)
|
node_match = re.search(r'FROM node:(\d+)', content)
|
||||||
if node_match:
|
if node_match:
|
||||||
self.node_version = node_match.group(1)
|
self.node_version = node_match.group(1)
|
||||||
if 'python' in content.lower():
|
if 'python' in content.lower():
|
||||||
self.detected_tech.add('python')
|
self.detected_tech.add('python')
|
||||||
|
|
||||||
# Detect common patterns
|
# Detect common patterns
|
||||||
if 'npm ci' in content:
|
if 'npm ci' in content:
|
||||||
self.detected_tech.add('npm')
|
self.detected_tech.add('npm')
|
||||||
if 'pip install' in content:
|
if 'pip install' in content:
|
||||||
self.detected_tech.add('pip')
|
self.detected_tech.add('pip')
|
||||||
|
|
||||||
# Analyze existing docker-compose.yml
|
# Analyze existing docker-compose.yml
|
||||||
compose_path = self.project_path / 'docker-compose.yml'
|
compose_path = self.project_path / 'docker-compose.yml'
|
||||||
if compose_path.exists():
|
if compose_path.exists():
|
||||||
with open(compose_path) as f:
|
with open(compose_path) as f:
|
||||||
try:
|
try:
|
||||||
compose_data = yaml.safe_load(f)
|
compose_data = yaml.safe_load(f)
|
||||||
services = compose_data.get('services', {})
|
services = compose_data.get('services', {})
|
||||||
|
|
||||||
# Analyze each service
|
# Analyze each service
|
||||||
for service_name, service_config in services.items():
|
for service_name, service_config in services.items():
|
||||||
# Extract ports
|
# Extract ports
|
||||||
ports = service_config.get('ports', [])
|
ports = service_config.get('ports', [])
|
||||||
for port in ports:
|
for port in ports:
|
||||||
if isinstance(port, str):
|
if isinstance(port, str):
|
||||||
port = port.split(':')[0].replace('${', '').split('-')[-1].replace('}', '')
|
port = port.split(':')[0].replace('${', '').split('-')[-1].replace('}', '')
|
||||||
self.ports.add(int(port))
|
self.ports.add(int(port))
|
||||||
|
|
||||||
# Extract environment variables
|
# Extract environment variables
|
||||||
env = service_config.get('environment', [])
|
env = service_config.get('environment', [])
|
||||||
if isinstance(env, list):
|
if isinstance(env, list):
|
||||||
for var in env:
|
for var in env:
|
||||||
if isinstance(var, str):
|
if isinstance(var, str):
|
||||||
self.env_vars.add(var.split('=')[0])
|
self.env_vars.add(var.split('=')[0])
|
||||||
elif isinstance(env, dict):
|
elif isinstance(env, dict):
|
||||||
self.env_vars.update(env.keys())
|
self.env_vars.update(env.keys())
|
||||||
|
|
||||||
# Extract volumes
|
# Extract volumes
|
||||||
volumes = service_config.get('volumes', [])
|
volumes = service_config.get('volumes', [])
|
||||||
for volume in volumes:
|
for volume in volumes:
|
||||||
if isinstance(volume, str):
|
if isinstance(volume, str):
|
||||||
if 'node_modules' in volume:
|
if 'node_modules' in volume:
|
||||||
self.detected_tech.add('nodejs')
|
self.detected_tech.add('nodejs')
|
||||||
if '.pip' in volume:
|
if '.pip' in volume:
|
||||||
self.detected_tech.add('python')
|
self.detected_tech.add('python')
|
||||||
|
|
||||||
# Extract dependencies
|
# Extract dependencies
|
||||||
depends_on = service_config.get('depends_on', [])
|
depends_on = service_config.get('depends_on', [])
|
||||||
self.dependencies.update(depends_on)
|
self.dependencies.update(depends_on)
|
||||||
|
|
||||||
# Extract volume definitions
|
# Extract volume definitions
|
||||||
volumes = compose_data.get('volumes', {})
|
volumes = compose_data.get('volumes', {})
|
||||||
for volume_name in volumes:
|
for volume_name in volumes:
|
||||||
if 'node_modules' in volume_name:
|
if 'node_modules' in volume_name:
|
||||||
self.detected_tech.add('nodejs')
|
self.detected_tech.add('nodejs')
|
||||||
if 'pip' in volume_name:
|
if 'pip' in volume_name:
|
||||||
self.detected_tech.add('python')
|
self.detected_tech.add('python')
|
||||||
|
|
||||||
except yaml.YAMLError as e:
|
except yaml.YAMLError as e:
|
||||||
print(f"Error parsing docker-compose.yml: {e}")
|
print(f"Error parsing docker-compose.yml: {e}")
|
||||||
|
|
||||||
def detect_technologies(self) -> None:
|
def detect_technologies(self) -> None:
|
||||||
"""Detect technologies used in the project."""
|
"""Detect technologies used in the project."""
|
||||||
# First analyze existing Docker configs
|
# First analyze existing Docker configs
|
||||||
self.analyze_existing_configs()
|
self.analyze_existing_configs()
|
||||||
|
|
||||||
# Then analyze project files as before
|
# Then analyze project files as before
|
||||||
if self._find_file('package.json'):
|
if self._find_file('package.json'):
|
||||||
self.detected_tech.add('nodejs')
|
self.detected_tech.add('nodejs')
|
||||||
with open(self.project_path / 'package.json') as f:
|
with open(self.project_path / 'package.json') as f:
|
||||||
package_data = json.load(f)
|
package_data = json.load(f)
|
||||||
deps = {**package_data.get('dependencies', {}),
|
deps = {**package_data.get('dependencies', {}),
|
||||||
**package_data.get('devDependencies', {})}
|
**package_data.get('devDependencies', {})}
|
||||||
if 'react' in deps:
|
if 'react' in deps:
|
||||||
self.detected_tech.add('react')
|
self.detected_tech.add('react')
|
||||||
if 'express' in deps:
|
if 'express' in deps:
|
||||||
self.detected_tech.add('express')
|
self.detected_tech.add('express')
|
||||||
if '@tensorflow/tfjs' in deps or 'pytorch' in deps:
|
if '@tensorflow/tfjs' in deps or 'pytorch' in deps:
|
||||||
self.detected_tech.add('ml')
|
self.detected_tech.add('ml')
|
||||||
if not self.node_version: # Only detect if not already found
|
if not self.node_version: # Only detect if not already found
|
||||||
self._detect_node_version(package_data)
|
self._detect_node_version(package_data)
|
||||||
|
|
||||||
# Check for Python
|
# Check for Python
|
||||||
if self._find_file('requirements.txt') or self._find_file('setup.py'):
|
if self._find_file('requirements.txt') or self._find_file('setup.py'):
|
||||||
self.detected_tech.add('python')
|
self.detected_tech.add('python')
|
||||||
if self._find_file('requirements.txt'):
|
if self._find_file('requirements.txt'):
|
||||||
with open(self.project_path / 'requirements.txt') as f:
|
with open(self.project_path / 'requirements.txt') as f:
|
||||||
reqs = f.read()
|
reqs = f.read()
|
||||||
if 'torch' in reqs or 'tensorflow' in reqs:
|
if 'torch' in reqs or 'tensorflow' in reqs:
|
||||||
self.detected_tech.add('ml')
|
self.detected_tech.add('ml')
|
||||||
if 'flask' in reqs:
|
if 'flask' in reqs:
|
||||||
self.ports.add(5000)
|
self.ports.add(5000)
|
||||||
if 'fastapi' in reqs:
|
if 'fastapi' in reqs:
|
||||||
self.ports.add(8000)
|
self.ports.add(8000)
|
||||||
|
|
||||||
# Check for AI/ML specific files
|
# Check for AI/ML specific files
|
||||||
if self._find_file('*.onnx', glob=True) or self._find_file('*.pt', glob=True):
|
if self._find_file('*.onnx', glob=True) or self._find_file('*.pt', glob=True):
|
||||||
self.detected_tech.add('ml')
|
self.detected_tech.add('ml')
|
||||||
|
|
||||||
# Check for environment variables
|
# Check for environment variables
|
||||||
env_file = self._find_file('.env')
|
env_file = self._find_file('.env')
|
||||||
if env_file:
|
if env_file:
|
||||||
with open(env_file) as f:
|
with open(env_file) as f:
|
||||||
for line in f:
|
for line in f:
|
||||||
if line.strip() and not line.startswith('#'):
|
if line.strip() and not line.startswith('#'):
|
||||||
key = line.split('=')[0].strip()
|
key = line.split('=')[0].strip()
|
||||||
self.env_vars.add(key)
|
self.env_vars.add(key)
|
||||||
|
|
||||||
def _find_file(self, filename: str, glob: bool = False) -> str:
|
def _find_file(self, filename: str, glob: bool = False) -> str:
|
||||||
"""Find a file in the project directory."""
|
"""Find a file in the project directory."""
|
||||||
if glob:
|
if glob:
|
||||||
for file in self.project_path.glob(filename):
|
for file in self.project_path.glob(filename):
|
||||||
return str(file)
|
return str(file)
|
||||||
else:
|
else:
|
||||||
file_path = self.project_path / filename
|
file_path = self.project_path / filename
|
||||||
if file_path.exists():
|
if file_path.exists():
|
||||||
return str(file_path)
|
return str(file_path)
|
||||||
return None
|
return None
|
||||||
|
|
||||||
def _detect_node_version(self, package_data: Dict) -> None:
|
def _detect_node_version(self, package_data: Dict) -> None:
|
||||||
"""Detect Node.js version from package.json."""
|
"""Detect Node.js version from package.json."""
|
||||||
engines = package_data.get('engines', {})
|
engines = package_data.get('engines', {})
|
||||||
if 'node' in engines:
|
if 'node' in engines:
|
||||||
version = engines['node'].replace('^', '').replace('~', '').split('.')[0]
|
version = engines['node'].replace('^', '').replace('~', '').split('.')[0]
|
||||||
self.node_version = version
|
self.node_version = version
|
||||||
else:
|
else:
|
||||||
self.node_version = '20' # Default to latest LTS
|
self.node_version = '20' # Default to latest LTS
|
||||||
|
|
||||||
def generate_dockerfile(self) -> str:
|
def generate_dockerfile(self) -> str:
|
||||||
"""Generate Dockerfile content based on detected technologies."""
|
"""Generate Dockerfile content based on detected technologies."""
|
||||||
dockerfile = [
|
dockerfile = [
|
||||||
"# syntax=docker/dockerfile:1.4",
|
"# syntax=docker/dockerfile:1.4",
|
||||||
f"ARG NODE_VERSION={self.node_version}",
|
f"ARG NODE_VERSION={self.node_version}",
|
||||||
"",
|
"",
|
||||||
"# Base development image",
|
"# Base development image",
|
||||||
"FROM node:${NODE_VERSION}-slim AS base",
|
"FROM node:${NODE_VERSION}-slim AS base",
|
||||||
"",
|
"",
|
||||||
"# Install Python and basic build dependencies",
|
"# Install Python and basic build dependencies",
|
||||||
"RUN apt-get update && apt-get install -y \\",
|
"RUN apt-get update && apt-get install -y \\",
|
||||||
" python3 \\",
|
" python3 \\",
|
||||||
" python3-pip \\",
|
" python3-pip \\",
|
||||||
" git \\",
|
" git \\",
|
||||||
" curl \\",
|
" curl \\",
|
||||||
" build-essential \\",
|
" build-essential \\",
|
||||||
" procps \\",
|
" procps \\",
|
||||||
" && rm -rf /var/lib/apt/lists/*",
|
" && rm -rf /var/lib/apt/lists/*",
|
||||||
"",
|
"",
|
||||||
"# Create cache directories",
|
"# Create cache directories",
|
||||||
"RUN mkdir -p /root/.npm",
|
"RUN mkdir -p /root/.npm",
|
||||||
"RUN mkdir -p /root/.pip",
|
"RUN mkdir -p /root/.pip",
|
||||||
"",
|
"",
|
||||||
"# Set working directory",
|
"# Set working directory",
|
||||||
"WORKDIR /app",
|
"WORKDIR /app",
|
||||||
"",
|
"",
|
||||||
"# Development stage",
|
"# Development stage",
|
||||||
"FROM base AS dev",
|
"FROM base AS dev",
|
||||||
"",
|
"",
|
||||||
"# Install development tools",
|
"# Install development tools",
|
||||||
"RUN apt-get update && apt-get install -y \\",
|
"RUN apt-get update && apt-get install -y \\",
|
||||||
" vim \\",
|
" vim \\",
|
||||||
" ssh \\",
|
" ssh \\",
|
||||||
" && rm -rf /var/lib/apt/lists/*",
|
" && rm -rf /var/lib/apt/lists/*",
|
||||||
"",
|
"",
|
||||||
"# Create a non-root user for development",
|
"# Create a non-root user for development",
|
||||||
"ARG USERNAME=node",
|
"ARG USERNAME=node",
|
||||||
"ARG USER_UID=1000",
|
"ARG USER_UID=1000",
|
||||||
"ARG USER_GID=$USER_UID",
|
"ARG USER_GID=$USER_UID",
|
||||||
"",
|
"",
|
||||||
"# Create the user",
|
"# Create the user",
|
||||||
"RUN groupadd --gid $USER_GID $USERNAME \\",
|
"RUN groupadd --gid $USER_GID $USERNAME \\",
|
||||||
" && useradd --uid $USER_UID --gid $USER_GID -m $USERNAME \\",
|
" && useradd --uid $USER_UID --gid $USER_GID -m $USERNAME \\",
|
||||||
" && apt-get update \\",
|
" && apt-get update \\",
|
||||||
" && apt-get install -y sudo \\",
|
" && apt-get install -y sudo \\",
|
||||||
" && echo $USERNAME ALL=\\(root\\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \\",
|
" && echo $USERNAME ALL=\\(root\\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \\",
|
||||||
" && chmod 0440 /etc/sudoers.d/$USERNAME",
|
" && chmod 0440 /etc/sudoers.d/$USERNAME",
|
||||||
"",
|
"",
|
||||||
"# Set npm config",
|
"# Set npm config",
|
||||||
"RUN npm config set cache /root/.npm \\",
|
"RUN npm config set cache /root/.npm \\",
|
||||||
" && npm config set prefer-offline true \\",
|
" && npm config set prefer-offline true \\",
|
||||||
" && npm config set package-lock true",
|
" && npm config set package-lock true",
|
||||||
"",
|
"",
|
||||||
"# Copy package files",
|
"# Copy package files",
|
||||||
"COPY package*.json ./",
|
"COPY package*.json ./",
|
||||||
"COPY .npmrc ./",
|
"COPY .npmrc ./",
|
||||||
"COPY requirements.txt ./",
|
"COPY requirements.txt ./",
|
||||||
"",
|
"",
|
||||||
"# Install Node.js dependencies with cache",
|
"# Install Node.js dependencies with cache",
|
||||||
"RUN --mount=type=cache,target=/root/.npm \\",
|
"RUN --mount=type=cache,target=/root/.npm \\",
|
||||||
" npm ci",
|
" npm ci",
|
||||||
"",
|
"",
|
||||||
"# Install Python dependencies with cache",
|
"# Install Python dependencies with cache",
|
||||||
"RUN --mount=type=cache,target=/root/.cache/pip \\",
|
"RUN --mount=type=cache,target=/root/.cache/pip \\",
|
||||||
" pip3 install -r requirements.txt",
|
" pip3 install -r requirements.txt",
|
||||||
"",
|
"",
|
||||||
"# Switch to non-root user",
|
"# Switch to non-root user",
|
||||||
"USER $USERNAME",
|
"USER $USERNAME",
|
||||||
"",
|
"",
|
||||||
"# Production stage",
|
"# Production stage",
|
||||||
"FROM base AS prod",
|
"FROM base AS prod",
|
||||||
"",
|
"",
|
||||||
"# Copy package files",
|
"# Copy package files",
|
||||||
"COPY package*.json ./",
|
"COPY package*.json ./",
|
||||||
"COPY .npmrc ./",
|
"COPY .npmrc ./",
|
||||||
"COPY requirements.txt ./",
|
"COPY requirements.txt ./",
|
||||||
"",
|
"",
|
||||||
"# Install production dependencies",
|
"# Install production dependencies",
|
||||||
"RUN --mount=type=cache,target=/root/.npm \\",
|
"RUN --mount=type=cache,target=/root/.npm \\",
|
||||||
" npm ci --only=production",
|
" npm ci --only=production",
|
||||||
"",
|
"",
|
||||||
"# Install Python production dependencies",
|
"# Install Python production dependencies",
|
||||||
"RUN --mount=type=cache,target=/root/.cache/pip \\",
|
"RUN --mount=type=cache,target=/root/.cache/pip \\",
|
||||||
" pip3 install -r requirements.txt",
|
" pip3 install -r requirements.txt",
|
||||||
"",
|
"",
|
||||||
"# Copy application code",
|
"# Copy application code",
|
||||||
"COPY . .",
|
"COPY . .",
|
||||||
"",
|
"",
|
||||||
"# Build the application",
|
"# Build the application",
|
||||||
"RUN npm run build",
|
"RUN npm run build",
|
||||||
"",
|
"",
|
||||||
"# Production command",
|
"# Production command",
|
||||||
'CMD ["npm", "start"]'
|
'CMD ["npm", "start"]'
|
||||||
]
|
]
|
||||||
|
|
||||||
return '\n'.join(dockerfile)
|
return '\n'.join(dockerfile)
|
||||||
|
|
||||||
def generate_compose(self) -> str:
|
def generate_compose(self) -> str:
|
||||||
"""Generate docker-compose.yml content."""
|
"""Generate docker-compose.yml content."""
|
||||||
compose_config = {
|
compose_config = {
|
||||||
'version': '3.8',
|
'version': '3.8',
|
||||||
'services': {
|
'services': {
|
||||||
'dev': {
|
'dev': {
|
||||||
'build': {
|
'build': {
|
||||||
'context': '.',
|
'context': '.',
|
||||||
'target': 'dev',
|
'target': 'dev',
|
||||||
'args': {
|
'args': {
|
||||||
'NODE_VERSION': self.node_version
|
'NODE_VERSION': self.node_version
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'volumes': [
|
'volumes': [
|
||||||
'../:/app:cached',
|
'../:/app:cached',
|
||||||
'node_modules:/app/node_modules' if 'nodejs' in self.detected_tech else None,
|
'node_modules:/app/node_modules' if 'nodejs' in self.detected_tech else None,
|
||||||
'npm-cache:/root/.npm' if 'nodejs' in self.detected_tech else None,
|
'npm-cache:/root/.npm' if 'nodejs' in self.detected_tech else None,
|
||||||
'pip-cache:/root/.cache/pip' if 'python' in self.detected_tech else None,
|
'pip-cache:/root/.cache/pip' if 'python' in self.detected_tech else None,
|
||||||
'~/.gitconfig:/root/.gitconfig',
|
'~/.gitconfig:/root/.gitconfig',
|
||||||
'~/.ssh:/root/.ssh'
|
'~/.ssh:/root/.ssh'
|
||||||
],
|
],
|
||||||
'environment': list(self.env_vars) if self.env_vars else [
|
'environment': list(self.env_vars) if self.env_vars else [
|
||||||
'NODE_ENV=development',
|
'NODE_ENV=development',
|
||||||
'PORT=${DEV_PORT_1:-3000}',
|
'PORT=${DEV_PORT_1:-3000}',
|
||||||
'BACKEND_PORT=${DEV_PORT_2:-5000}',
|
'BACKEND_PORT=${DEV_PORT_2:-5000}',
|
||||||
],
|
],
|
||||||
'ports': [f"{port}:{port}" for port in self.ports] or [
|
'ports': [f"{port}:{port}" for port in self.ports] or [
|
||||||
'${DEV_PORT_1:-3000}:3000',
|
'${DEV_PORT_1:-3000}:3000',
|
||||||
'${DEV_PORT_2:-5000}:5000',
|
'${DEV_PORT_2:-5000}:5000',
|
||||||
'9229:9229'
|
'9229:9229'
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'volumes': {
|
'volumes': {
|
||||||
'node_modules': {},
|
'node_modules': {},
|
||||||
'npm-cache': {},
|
'npm-cache': {},
|
||||||
'pip-cache': {},
|
'pip-cache': {},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
# Add special services based on dependencies
|
# Add special services based on dependencies
|
||||||
compose_config = self.add_special_services(compose_config)
|
compose_config = self.add_special_services(compose_config)
|
||||||
|
|
||||||
# Remove None values
|
# Remove None values
|
||||||
compose_config['services']['dev']['volumes'] = [v for v in compose_config['services']['dev']['volumes'] if v]
|
compose_config['services']['dev']['volumes'] = [v for v in compose_config['services']['dev']['volumes'] if v]
|
||||||
|
|
||||||
return yaml.dump(compose_config, default_flow_style=False)
|
return yaml.dump(compose_config, default_flow_style=False)
|
||||||
|
|
||||||
def generate_devcontainer(self) -> str:
|
def generate_devcontainer(self) -> str:
|
||||||
"""Generate devcontainer.json content."""
|
"""Generate devcontainer.json content."""
|
||||||
config = {
|
config = {
|
||||||
"name": "Development Environment",
|
"name": "Development Environment",
|
||||||
"dockerComposeFile": [
|
"dockerComposeFile": [
|
||||||
"../docker-compose.yml",
|
"../docker-compose.yml",
|
||||||
"docker-compose.extend.yml"
|
"docker-compose.extend.yml"
|
||||||
],
|
],
|
||||||
"service": "app",
|
"service": "app",
|
||||||
"workspaceFolder": "/app",
|
"workspaceFolder": "/app",
|
||||||
"customizations": {
|
"customizations": {
|
||||||
"vscode": {
|
"vscode": {
|
||||||
"extensions": [
|
"extensions": [
|
||||||
"ms-azuretools.vscode-docker",
|
"ms-azuretools.vscode-docker",
|
||||||
"editorconfig.editorconfig"
|
"editorconfig.editorconfig"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"forwardPorts": list(self.ports)
|
"forwardPorts": list(self.ports)
|
||||||
}
|
}
|
||||||
|
|
||||||
# Add language-specific extensions
|
# Add language-specific extensions
|
||||||
if 'nodejs' in self.detected_tech:
|
if 'nodejs' in self.detected_tech:
|
||||||
config["customizations"]["vscode"]["extensions"].extend([
|
config["customizations"]["vscode"]["extensions"].extend([
|
||||||
"dbaeumer.vscode-eslint",
|
"dbaeumer.vscode-eslint",
|
||||||
"esbenp.prettier-vscode",
|
"esbenp.prettier-vscode",
|
||||||
"christian-kohler.npm-intellisense"
|
"christian-kohler.npm-intellisense"
|
||||||
])
|
])
|
||||||
|
|
||||||
if 'python' in self.detected_tech:
|
if 'python' in self.detected_tech:
|
||||||
config["customizations"]["vscode"]["extensions"].extend([
|
config["customizations"]["vscode"]["extensions"].extend([
|
||||||
"ms-python.python",
|
"ms-python.python",
|
||||||
"ms-python.vscode-pylance"
|
"ms-python.vscode-pylance"
|
||||||
])
|
])
|
||||||
|
|
||||||
return json.dumps(config, indent=2)
|
return json.dumps(config, indent=2)
|
||||||
|
|
||||||
def generate_devcontainer_compose(self) -> str:
|
def generate_devcontainer_compose(self) -> str:
|
||||||
"""Generate docker-compose.extend.yml content for devcontainer."""
|
"""Generate docker-compose.extend.yml content for devcontainer."""
|
||||||
config = {
|
config = {
|
||||||
'version': '3.8',
|
'version': '3.8',
|
||||||
'services': {
|
'services': {
|
||||||
'app': {
|
'app': {
|
||||||
'init': True,
|
'init': True,
|
||||||
'security_opt': ['seccomp:unconfined'],
|
'security_opt': ['seccomp:unconfined'],
|
||||||
'cap_add': ['SYS_PTRACE'],
|
'cap_add': ['SYS_PTRACE'],
|
||||||
'command': 'sleep infinity'
|
'command': 'sleep infinity'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return yaml.dump(config, default_flow_style=False)
|
return yaml.dump(config, default_flow_style=False)
|
||||||
|
|
||||||
def generate_configs(self) -> None:
|
def generate_configs(self) -> None:
|
||||||
"""Generate all configuration files."""
|
"""Generate all configuration files."""
|
||||||
# Create backup directory
|
# Create backup directory
|
||||||
backup_dir = self.project_path / 'docker_config_backups'
|
backup_dir = self.project_path / 'docker_config_backups'
|
||||||
backup_dir.mkdir(exist_ok=True)
|
backup_dir.mkdir(exist_ok=True)
|
||||||
|
|
||||||
# Backup existing files
|
# Backup existing files
|
||||||
for filename in ['Dockerfile', 'docker-compose.yml']:
|
for filename in ['Dockerfile', 'docker-compose.yml']:
|
||||||
filepath = self.project_path / filename
|
filepath = self.project_path / filename
|
||||||
if filepath.exists():
|
if filepath.exists():
|
||||||
backup_path = backup_dir / f"{filename}.backup"
|
backup_path = backup_dir / f"{filename}.backup"
|
||||||
import shutil
|
import shutil
|
||||||
shutil.copy2(filepath, backup_path)
|
shutil.copy2(filepath, backup_path)
|
||||||
print(f"Backed up {filename} to {backup_path}")
|
print(f"Backed up {filename} to {backup_path}")
|
||||||
|
|
||||||
# Create .devcontainer directory if it doesn't exist
|
# Create .devcontainer directory if it doesn't exist
|
||||||
devcontainer_dir = self.project_path / '.devcontainer'
|
devcontainer_dir = self.project_path / '.devcontainer'
|
||||||
devcontainer_dir.mkdir(exist_ok=True)
|
devcontainer_dir.mkdir(exist_ok=True)
|
||||||
|
|
||||||
# Generate and write new files
|
# Generate and write new files
|
||||||
with open(self.project_path / 'Dockerfile', 'w') as f:
|
with open(self.project_path / 'Dockerfile', 'w') as f:
|
||||||
f.write(self.generate_dockerfile())
|
f.write(self.generate_dockerfile())
|
||||||
|
|
||||||
with open(self.project_path / 'docker-compose.yml', 'w') as f:
|
with open(self.project_path / 'docker-compose.yml', 'w') as f:
|
||||||
f.write(self.generate_compose())
|
f.write(self.generate_compose())
|
||||||
|
|
||||||
with open(devcontainer_dir / 'devcontainer.json', 'w') as f:
|
with open(devcontainer_dir / 'devcontainer.json', 'w') as f:
|
||||||
f.write(self.generate_devcontainer())
|
f.write(self.generate_devcontainer())
|
||||||
|
|
||||||
with open(devcontainer_dir / 'docker-compose.extend.yml', 'w') as f:
|
with open(devcontainer_dir / 'docker-compose.extend.yml', 'w') as f:
|
||||||
f.write(self.generate_devcontainer_compose())
|
f.write(self.generate_devcontainer_compose())
|
||||||
|
|
||||||
def add_special_services(self, compose_config: dict) -> dict:
|
def add_special_services(self, compose_config: dict) -> dict:
|
||||||
"""Add special services based on detected dependencies."""
|
"""Add special services based on detected dependencies."""
|
||||||
for dependency in self.dependencies:
|
for dependency in self.dependencies:
|
||||||
if dependency == 'ollama':
|
if dependency == 'ollama':
|
||||||
compose_config['services']['ollama'] = {
|
compose_config['services']['ollama'] = {
|
||||||
'image': 'ollama/ollama',
|
'image': 'ollama/ollama',
|
||||||
'volumes': ['ollama-models:/root/.ollama'],
|
'volumes': ['ollama-models:/root/.ollama'],
|
||||||
'ports': ['${OLLAMA_PORT_1:-11434}:11434']
|
'ports': ['${OLLAMA_PORT_1:-11434}:11434']
|
||||||
}
|
}
|
||||||
compose_config['volumes']['ollama-models'] = {}
|
compose_config['volumes']['ollama-models'] = {}
|
||||||
|
|
||||||
elif dependency == 'sdwebui':
|
elif dependency == 'sdwebui':
|
||||||
compose_config['services']['sdwebui'] = {
|
compose_config['services']['sdwebui'] = {
|
||||||
'image': 'stable-diffusion-webui/stable-diffusion-webui',
|
'image': 'stable-diffusion-webui/stable-diffusion-webui',
|
||||||
'volumes': ['sd-models:/models'],
|
'volumes': ['sd-models:/models'],
|
||||||
'ports': ['${SDWEBUI_PORT_1:-7860}:7860']
|
'ports': ['${SDWEBUI_PORT_1:-7860}:7860']
|
||||||
}
|
}
|
||||||
compose_config['volumes']['sd-models'] = {}
|
compose_config['volumes']['sd-models'] = {}
|
||||||
|
|
||||||
return compose_config
|
return compose_config
|
||||||
|
|
||||||
def main():
|
def main():
|
||||||
parser = argparse.ArgumentParser(description='Generate Docker configurations for a project')
|
parser = argparse.ArgumentParser(description='Generate Docker configurations for a project')
|
||||||
parser.add_argument('project_path', help='Path to the project directory')
|
parser.add_argument('project_path', help='Path to the project directory')
|
||||||
args = parser.parse_args()
|
args = parser.parse_args()
|
||||||
|
|
||||||
generator = DockerConfigGenerator(args.project_path)
|
generator = DockerConfigGenerator(args.project_path)
|
||||||
print("🔍 Analyzing project...")
|
print("🔍 Analyzing project...")
|
||||||
generator.detect_technologies()
|
generator.detect_technologies()
|
||||||
|
|
||||||
print("\n📦 Detected technologies:")
|
print("\n📦 Detected technologies:")
|
||||||
for tech in generator.detected_tech:
|
for tech in generator.detected_tech:
|
||||||
print(f" - {tech}")
|
print(f" - {tech}")
|
||||||
|
|
||||||
print("\n🔧 Generating configuration files...")
|
print("\n🔧 Generating configuration files...")
|
||||||
generator.generate_configs()
|
generator.generate_configs()
|
||||||
|
|
||||||
print("\n✅ Generated files:")
|
print("\n✅ Generated files:")
|
||||||
print(" - Dockerfile")
|
print(" - Dockerfile")
|
||||||
print(" - docker-compose.yml")
|
print(" - docker-compose.yml")
|
||||||
print(" - .devcontainer/devcontainer.json")
|
print(" - .devcontainer/devcontainer.json")
|
||||||
print(" - .devcontainer/docker-compose.extend.yml")
|
print(" - .devcontainer/docker-compose.extend.yml")
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
main()
|
main()
|
||||||
|
|||||||
@ -1,26 +1,26 @@
|
|||||||
services:
|
services:
|
||||||
dev:
|
dev:
|
||||||
build:
|
build:
|
||||||
args:
|
args:
|
||||||
NODE_VERSION: '20'
|
NODE_VERSION: '20'
|
||||||
context: .
|
context: .
|
||||||
target: dev
|
target: dev
|
||||||
environment:
|
environment:
|
||||||
- NODE_ENV=development
|
- NODE_ENV=development
|
||||||
- PORT=${DEV_PORT_1:-3000}
|
- PORT=${DEV_PORT_1:-3000}
|
||||||
- BACKEND_PORT=${DEV_PORT_2:-5000}
|
- BACKEND_PORT=${DEV_PORT_2:-5000}
|
||||||
ports:
|
ports:
|
||||||
- ${DEV_PORT_1:-3000}:3000
|
- ${DEV_PORT_1:-3000}:3000
|
||||||
- ${DEV_PORT_2:-5000}:5000
|
- ${DEV_PORT_2:-5000}:5000
|
||||||
- 9229:9229
|
- 9229:9229
|
||||||
volumes:
|
volumes:
|
||||||
- ../:/app:cached
|
- .:/app:cached
|
||||||
- node_modules:/app/node_modules
|
- node_modules:/app/node_modules
|
||||||
- npm-cache:/root/.npm
|
- npm-cache:/root/.npm
|
||||||
- ~/.gitconfig:/root/.gitconfig
|
- ~/.gitconfig:/root/.gitconfig
|
||||||
- ~/.ssh:/root/.ssh
|
- ~/.ssh:/root/.ssh
|
||||||
version: '3.8'
|
|
||||||
volumes:
|
volumes:
|
||||||
node_modules: {}
|
node_modules: {}
|
||||||
npm-cache: {}
|
npm-cache: {}
|
||||||
pip-cache: {}
|
pip-cache: {}
|
||||||
|
|||||||
BIN
images/CCFW_screenshot1.JPG
Normal file
BIN
images/CCFW_screenshot1.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
images/CCFW_screenshot2.JPG
Normal file
BIN
images/CCFW_screenshot2.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
images/CCFW_screenshot3.JPG
Normal file
BIN
images/CCFW_screenshot3.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
12
lib/utils.ts
12
lib/utils.ts
@ -1,6 +1,6 @@
|
|||||||
import { type ClassValue, clsx } from "clsx"
|
import { type ClassValue, clsx } from "clsx"
|
||||||
import { twMerge } from "tailwind-merge"
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
export function cn(...inputs: ClassValue[]) {
|
||||||
return twMerge(clsx(inputs))
|
return twMerge(clsx(inputs))
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = {
|
const nextConfig = {
|
||||||
/* config options here */
|
/* config options here */
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = nextConfig;
|
module.exports = nextConfig;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: {
|
plugins: {
|
||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
3
requirements.txt
Normal file
3
requirements.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Python dependencies for development
|
||||||
|
# This project is primarily a Next.js application
|
||||||
|
# Add any Python dependencies here if needed
|
||||||
@ -1,19 +1,38 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: [
|
||||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
background: 'rgb(var(--background) / <alpha-value>)',
|
background: 'rgb(var(--background) / <alpha-value>)',
|
||||||
foreground: 'rgb(var(--foreground) / <alpha-value>)',
|
foreground: 'rgb(var(--foreground) / <alpha-value>)',
|
||||||
accent: 'rgb(var(--accent) / <alpha-value>)',
|
muted: 'rgb(var(--muted) / <alpha-value>)',
|
||||||
'accent-foreground': 'rgb(var(--accent-foreground) / <alpha-value>)',
|
'muted-foreground': 'rgb(var(--muted-foreground) / <alpha-value>)',
|
||||||
},
|
accent: 'rgb(var(--accent) / <alpha-value>)',
|
||||||
},
|
'accent-foreground': 'rgb(var(--accent-foreground) / <alpha-value>)',
|
||||||
},
|
card: 'rgb(var(--card) / <alpha-value>)',
|
||||||
plugins: [],
|
'card-foreground': 'rgb(var(--card-foreground) / <alpha-value>)',
|
||||||
}
|
primary: 'rgb(var(--primary) / <alpha-value>)',
|
||||||
|
'primary-foreground': 'rgb(var(--primary-foreground) / <alpha-value>)',
|
||||||
|
secondary: 'rgb(var(--secondary) / <alpha-value>)',
|
||||||
|
'secondary-foreground': 'rgb(var(--secondary-foreground) / <alpha-value>)',
|
||||||
|
destructive: 'rgb(var(--destructive) / <alpha-value>)',
|
||||||
|
'destructive-foreground': 'rgb(var(--destructive-foreground) / <alpha-value>)',
|
||||||
|
border: 'rgb(var(--border) / <alpha-value>)',
|
||||||
|
input: 'rgb(var(--input) / <alpha-value>)',
|
||||||
|
ring: 'rgb(var(--ring) / <alpha-value>)',
|
||||||
|
// CCFW specific colors
|
||||||
|
'ccfw-gold': 'rgb(var(--ccfw-gold) / <alpha-value>)',
|
||||||
|
'ccfw-teal': 'rgb(var(--ccfw-teal) / <alpha-value>)',
|
||||||
|
'ccfw-coral': 'rgb(var(--ccfw-coral) / <alpha-value>)',
|
||||||
|
'ccfw-beige': 'rgb(var(--ccfw-beige) / <alpha-value>)',
|
||||||
|
'ccfw-maroon': 'rgb(var(--ccfw-maroon) / <alpha-value>)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|||||||
@ -1,14 +0,0 @@
|
|||||||
# ~/.ssh/config entry for Gitea
|
|
||||||
Host gitea
|
|
||||||
HostName localhost
|
|
||||||
Port 222
|
|
||||||
User git
|
|
||||||
IdentityFile ~/.ssh/id_ed25519 # Or whatever your SSH key is
|
|
||||||
PreferredAuthentications publickey
|
|
||||||
|
|
||||||
Host localhost
|
|
||||||
HostName localhost
|
|
||||||
Port 222
|
|
||||||
User git
|
|
||||||
IdentityFile ~/.ssh/id_ed25519
|
|
||||||
PreferredAuthentications publickey
|
|
||||||
Loading…
x
Reference in New Issue
Block a user