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 (December 13, 2025)

### Complete Object Storage Migration
All uploaded images are now stored permanently in Replit Object Storage, preventing the issue where files would disappear after a few hours.

**What Was Done:**
1. Installed `replit-object-storage` official Python package
2. Created `object_storage.py` using official Replit SDK
3. Added `/storage/<path>` route to serve files from object storage
4. Added `|image_url` Jinja template filter to handle both local and storage paths
5. Migrated all existing member, mentor, competition, and sponsor images to object storage
6. Updated database paths from `images/filename.jpg` to `/storage/folder/uuid.ext`

**How It Works:**
- New uploads go directly to object storage via `upload_file_to_storage()` helper
- Database stores paths like `/storage/members/uuid.png`
- Templates use `{{ image_path|image_url }}` filter which handles both formats
- `/storage/` route serves files from object storage bucket
- Background images (hero, team, etc.) remain local as they don't get erased

**Bucket:** `ftc-team-images`
**Package:** `replit-object-storage` (installed via pip)

## 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