FTCWebsite/replit.md

# FTC Team 23344 "Technical Turbulence" Website

## Overview
Flask-based website for FTC Team 23344 with a modern dark theme (#000000 pure black background), comprehensive content management system, PostgreSQL database integration, and premium smooth-scrolling animations.

## Recent Changes (November 13, 2025)

### Critical Fix: Persistent Object Storage for Uploaded Files
Fixed the issue where uploaded images (members, mentors, competitions, sponsors) were disappearing after a few hours.

**The Problem:**
- Files were being saved to local filesystem (`static/images/`)
- Local storage in Replit is **ephemeral** and gets cleared periodically
- All uploaded images would vanish after a few hours

**The Solution:**
- Migrated to **Replit Object Storage** (built on Google Cloud Storage)
- All file uploads now go to **persistent, permanent storage**
- Images are served directly from Google's CDN with full URLs

**Technical Implementation:**
- Created `object_storage.py` module using Google Cloud Storage Python client
- Updated all upload routes to use object storage:
  - `add_member()`, `update_member()` - Member/mentor photos
  - `add_competition()`, `edit_competition()` - Competition images
  - `add_sponsor()` - Sponsor logos
- Intelligent fallback: uses local storage if object storage not configured
- Files organized by type: `members/`, `competitions/`, `sponsors/` folders
- Unique UUIDs prevent filename conflicts
- Public URLs stored in database instead of local paths

**Setup Required (See OBJECT_STORAGE_SETUP.md):**
1. Create bucket in Object Storage pane
2. Set `OBJECT_STORAGE_BUCKET` environment variable
3. Restart server

**Dependencies Added:**
- `google-cloud-storage` (v3.5.0)

## Recent Changes (November 12, 2025)

### Admin Panel Enhancement: Competition Editing
Added full CRUD functionality to the competitions admin panel:

**New Features:**
- ✏️ **Edit Competition Cards**: Click the "Edit" button on any competition to modify its details
- **Collapsible Edit Forms**: Each competition now has an inline edit form that expands/collapses
- **Full Field Editing**: Edit season, event name, date, description, awards, and replace images
- **Image Preservation**: Existing images are preserved unless a new one is uploaded
- **Yellow Edit Buttons**: New amber/yellow themed edit buttons next to delete buttons

**Technical Implementation:**
- New `/admin/competition/edit` route in Flask backend
- Inline collapsible forms with JavaScript toggle functionality
- Award text automatically converted between pipe-separated (database) and newline-separated (form) formats
- Retains existing image if no new file uploaded

## Recent Changes (November 8, 2025)

### Latest UI/UX Refinements
Final polish and user experience improvements:

**Hero Section Enhancements:**
- Made hero section full viewport (100vw x 100vh) for immersive experience
- Applied black & white filter (grayscale 100%) to team image
- Added shadow gradient to top of section for smooth transition from navigation
- Darkened overlay gradient for improved text readability

**Button & Interaction Standardization:**
- Unified all buttons to match team CTA style (blue transparent with subtle border)
- Removed blue hover effects, replaced with clean white shadows
- Fixed custom cursor pointer-events to allow navigation bar clicking
- Removed parallax/wavy animations from sponsor cards and static elements

### Design Refinements & Content Additions
Previous updates focused on improving visual balance and adding key content sections:

**Visual Improvements:**
- Removed excessive blue hover effects across all cards and elements
- Replaced blue hover glows with subtle white shadows for cleaner aesthetic
- Made background gradient significantly more prominent (increased opacity from 0.03 to 0.08)
- Disabled header underline animation on hover for simpler interactions

**New Content Sections:**
- **Value Cards**: Added four feature cards under mission statement showcasing core values:
  - STEM Outreach - workshops and demonstrations
  - Mentorship - guiding rookie teams
  - Education - teaching programming and CAD skills
  - Community - local partnerships and collaboration
- **Restructured Team Section**: 
  - Text content now displays on left, team image on right
  - Fully responsive with stacked layout on mobile
  - New CTA button for viewing team members
  - Maintained parallax effects on team image

### Premium Animation & UX Enhancements
Transformed the entire site with smooth scrolling, parallax effects, and grand animations for a premium, modern feel:

**Animation System:**
- **Lenis Smooth Scrolling**: Integrated velocity-based smooth scrolling with 1.2s duration and custom easing
- **GSAP ScrollTrigger**: Properly proxied with Lenis for synchronized scroll-triggered animations
- **Parallax Effects**: Multi-layer parallax on hero images, team photos, and sponsor logos
- **Scroll Animations**: Fade-in and slide-up effects on all major content sections (including new value cards)
- **Magnetic Buttons**: Interactive hover effects with 3D transforms on CTAs
- **Floating Elements**: Subtle continuous animations on cards and member profiles

**Visual Enhancements:**
- **Custom Cursor**: Premium dual-cursor effect (main + follower) on desktop
- **Scroll Progress Bar**: Gradient progress indicator at top of page
- **Animated Gradients**: Shifting blue/purple gradients on stat cards
- **Shimmer Effects**: Animated shine effects on headings and dividers
- **Background Ambience**: Prominent floating gradient orbs for depth

**Performance:**
- All animations use CSS transforms (GPU-accelerated)
- RequestAnimationFrame loop for smooth 60fps
- Mobile-optimized with reduced motion support
- Custom cursor disabled on mobile devices

**Libraries Added:**
- Lenis v1.0.42 for smooth scrolling
- GSAP 3.12.2 + ScrollTrigger for advanced animations
- Feather Icons for value card icons

## Recent Changes (October 3, 2025)

### Admin Panel System
Created a complete admin panel with password-protected access for managing all website content:

**Access:** `/admin/login` (Password: `techturb123`)

**Features:**
- 📊 **Stats Management**: Edit homepage statistics (seasons, members, awards, competitions)
- 👥 **Members/Mentors Management**: Add, edit, remove team members and mentors with profile picture uploads
- 🏆 **Competitions Management**: Add competitions by season with optional images, awards (bullet points), descriptions, event names, and dates
- 💼 **Sponsors Management**: Add/remove sponsors with logo uploads and website URLs

### Database Integration
- Migrated all content from hardcoded templates to PostgreSQL database
- All public pages now pull data dynamically from database
- Data persists across server restarts
- Initial data seeded from existing website content

**Database Schema:**
- `stats` - Homepage statistics
- `members` - Team members with images, roles, names
- `mentors` - Mentors/coaches with images, roles, names
- `competitions` - Competition entries organized by season
- `sponsors` - Sponsor cards with logos and URLs

### Design Improvements
- Pure black (#000000) background throughout
- Cinematic hero section (700px tall) with darkened team image and text overlay
- Light gray text (gray-300) for paragraph content
- Reduced top margins on headers (40px instead of 64px)
- Mobile-responsive with optimized padding (20px/16px)
- Modern cards with 20px border radius and blue accent hover effects

## Project Structure
```
├── app.py                 # Flask routes, database connections, admin system
├── templates/
│   ├── admin/            # Admin panel templates
│   │   ├── login.html
│   │   ├── base.html     # Admin layout with side navigation
│   │   ├── stats.html
│   │   ├── members.html
│   │   ├── competitions.html
│   │   └── sponsors.html
│   ├── base.html         # Public site layout
│   ├── home.html         # Homepage with stats from DB
│   ├── contributors.html # Team members from DB
│   ├── competitions.html # Competitions from DB
│   └── sponsors.html     # Sponsors from DB
├── static/
│   ├── css/styles.css    # All styling
│   ├── js/scripts.js
│   └── images/           # Team photos, logos, uploads
└── replit.md             # This file

```

## Technology Stack
- **Backend**: Flask (Python)
- **Database**: PostgreSQL (Neon-backed via Replit)
- **Session Management**: Flask-Session
- **File Uploads**: Werkzeug secure_filename
- **Frontend**: HTML5, CSS3, JavaScript

## User Preferences
- Pure black (#000000) background theme
- Gray-300 text color for paragraphs (light grayish, not pure white)
- Preserve hero section layered image design (michiana.png + techturb.gif)
- Minimal navbar with blur effect
- Dramatic spacing reduction throughout site
- Mobile-first responsive design

## Database Connection
Environment variables automatically configured:
- `DATABASE_URL`
- `PGHOST`, `PGPORT`, `PGUSER`, `PGPASSWORD`, `PGDATABASE`

## Security Notes
- Admin password currently hardcoded (techturb123) - consider moving to environment variable for production
- Session secret key uses environment variable with fallback
- File uploads use secure_filename to prevent path traversal
- Admin routes protected with session-based authentication

## Future Considerations
- Add admin password management
- Implement image optimization for uploads
- Add bulk operations for members/competitions
- Consider adding revision history for content changes
- Add export/backup functionality for database content