NFL Team Selector Overlay

An interactive web application for selecting NFL teams with animated visual effects.

Features

• Complete grid display of all 32 NFL teams
• Click-to-select functionality with visual feedback
• Enlarged logo display with animation effects
• Track selected teams (no duplicate selections)
• Reset functionality to start over
• Next button for sequential selection

Technologies Used

• HTML5
• CSS3 (with animations and effects)
• Vanilla JavaScript
• Responsive design

Project Structure

├── index.html          # Main HTML file
├── styles.css          # Styling and animations
├── script.js           # JavaScript functionality
└── Icons/              # NFL team logo images
    ├── 49ers.jpg
    ├── Bears.jpg
    ├── Bengals.jpg
    └── ... (all 32 teams)

Usage

1. Open index.html in a web browser
2. Click on any team logo to select it
3. The selected team will be enlarged with visual effects
4. Use the "Next" button to proceed to the next selection
5. Use the "Reset" button to clear all selections and start over

Features in Detail

• Team Selection: Click any team logo to select it. Once selected, teams cannot be selected again.
• Visual Effects: Selected teams display with smoke and explosion particle effects.
• State Management: The application tracks which teams have been selected to prevent duplicates.

Using with OBS Studio

This overlay is designed to work seamlessly with OBS Studio for streaming or recording:

Setup Instructions

1. Add Browser Source

   • In OBS, click the "+" button in Sources
   • Select "Browser"
   • Name your source (e.g., "NFL Team Selector")

2. Configure Browser Source

   • Local File: Check this option
   • Browse: Navigate to and select the index.html file
   • Width: 1920 (or your stream resolution width)
   • Height: 1080 (or your stream resolution height)
   • FPS: 30 or 60 (depending on your stream settings)

3. Transparency Settings

   • Ensure "Shutdown source when not visible" is unchecked
   • Ensure "Refresh browser when scene becomes active" is unchecked

4. Interaction

   • Right-click the browser source in OBS
   • Select "Interact" to open the interaction window
   • Click team logos directly in the interaction window
   • Use the control buttons as needed

Tips for Streaming

• Chroma Key: The application uses a transparent background by default, perfect for overlaying on gameplay
• Positioning: Resize and position the browser source as needed in your scene
• Hotkeys: Consider setting up OBS hotkeys to show/hide the overlay during streams
• Performance: The animations are optimized for streaming and should not impact performance

Customization for Streaming

• Modify styles.css to adjust:
  • Grid size and spacing
  • Animation duration and effects
  • Control button positioning
  • Logo sizes

Browser Compatibility

• Chrome (recommended)
• Firefox
• Safari
• Edge

License

This project is licensed under the MIT License - see the LICENSE file for details.