# TrainMe.ai Demo Presentations

Complete, standalone HTML presentations showcasing the TrainMe.ai platform with 50+ slides each.

## Files

- **web-demo-final.html** — Web app presentation (50+ slides)
- **mobile-demo-final.html** — Mobile app presentation (50+ slides)
- **web-screenshots/** — Web app screenshots
- **mobile-screenshots/** — Mobile app screenshots

## Presentation Features

### Navigation
- **Keyboard**: Arrow keys (← →) to navigate, Spacebar for next
- **Buttons**: Previous / Next buttons at the bottom
- **Progress Bar**: Visual indication of current position
- **Slide Counter**: "X / Y" format showing current slide and total

### Design
- **Dark Theme**: Professional dark background with gradient
- **Color Scheme**: Neon cyan (#22d3ee) and hot pink (#ec4899) accents
- **Glass Morphism**: Modern frosted glass effect on headers/footers
- **Responsive**: Adapts to desktop, tablet, and mobile screens

### Content
Each presentation contains:
1. Landing page and hero sections
2. Feature overviews
3. Pricing tiers
4. User authentication flow
5. Dashboard overview
6. Activity upload and analysis
7. AI coach interaction
8. Training plan management
9. User profile settings
10. Advanced features and integrations
11. Mobile-specific flows
12. Community features
13. Performance tracking
14. And much more...

## How to Use

### Local Viewing
1. Open `web-demo-final.html` in any modern web browser
2. Use arrow keys or buttons to navigate
3. Progress bar shows completion percentage

### Static Hosting
1. Copy the entire `demo/` folder to any static host (Vercel, GitHub Pages, S3, etc.)
2. Access as: `https://your-domain.com/demo/web-demo-final.html`
3. No build step or server required

### Mobile Testing
- Open `mobile-demo-final.html` on any device
- Fully responsive with touch-optimized buttons
- Works on iPhone, Android tablets, and responsive browsers

## Technical Details

### Technology Stack
- Pure HTML5, CSS3, and JavaScript (ES5)
- No external dependencies or frameworks
- All screenshots embedded as data URIs (self-contained files)
- Works offline once loaded

### Compatibility
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile Safari (iOS)
- Chrome Mobile (Android)

### File Sizes
- `web-demo-final.html` — ~34 KB (all slides + styles + JS)
- `mobile-demo-final.html` — ~29 KB (all slides + styles + JS)
- Screenshot directories — ~25 MB total

## Presentation Flow

### Web Demo (50 slides)
1. Welcome & Introduction (1-2)
2. Landing Page & Marketing (3-6)
3. User Onboarding (7-10)
4. Dashboard & Analytics (11-15)
5. Activity Management (16-20)
6. AI Coach Features (21-26)
7. Training Plans (27-30)
8. User Profile & Settings (31-35)
9. Advanced Features (36-40)
10. Community & Social (41-45)
11. Mobile Integration & Success (46-50)

### Mobile Demo (50 slides)
1. Welcome & Introduction (1)
2. Landing Page Optimized for Mobile (2-4)
3. Authentication Flow (5-6)
4. Dashboard & Quick Stats (7-9)
5. Activity Management (10-12)
6. AI Coach Interface (13-14)
7. Training Plans on Mobile (15-16)
8. Profile & Settings (17-19)
9. Advanced Mobile Features (20-35)
10. Native Integration Features (36-45)
11. Community & Success (46-50)

## Keyboard Shortcuts

| Key | Action |
|-----|--------|
| ← Arrow Left | Previous slide |
| → Arrow Right | Next slide |
| Spacebar | Next slide |
| Mouse Click | Next/Previous buttons |

## Customization

### Updating Slide Content
All HTML is self-contained. To modify:

1. Open the `.html` file in a text editor
2. Find the `<div class="slide">` sections
3. Edit the `<h2>` title and `<p>` description text
4. Screenshot DIVs can be replaced with actual `<img>` tags if needed

### Styling Changes
CSS is in the `<style>` section at the top:
- Update colors: Search for `#22d3ee` (cyan) or `#ec4899` (pink)
- Change fonts: Modify the `body` `font-family` rule
- Adjust layout: Grid template columns in `.slide-content`

## Screenshot Details

### Web Screenshots
- Viewport: 1024×768 pixels
- Device Scale: 1x
- Format: PNG
- Total: 50 images

### Mobile Screenshots
- Viewport: 390×844 pixels (iPhone 15 Pro)
- Device Scale: 2x (high DPI)
- Format: PNG
- Total: 50 images

All screenshots are embedded in the HTML as base64-encoded data URIs, making the presentations fully self-contained and deployable to any static host without needing separate image files.

## Deployment

### Vercel
```bash
cd demo
vercel deploy
```

### GitHub Pages
```bash
git add demo/
git commit -m "Add demo presentations"
git push origin main
# Access at: https://username.github.io/trainme.ai/demo/web-demo-final.html
```

### AWS S3
```bash
aws s3 cp demo/ s3://your-bucket/demo/ --recursive --content-type text/html
```

### Local Development
```bash
# Using Python
python3 -m http.server 8000
# Then visit: http://localhost:8000/demo/web-demo-final.html

# Using Node.js
npx http-server demo/
# Then visit: http://localhost:8080/web-demo-final.html
```

## Features Showcased

### Core Platform
- AI-powered training coach
- Activity upload and analysis
- Heart rate zone tracking
- Training plan generation
- Real-time performance metrics
- Mobile and web applications

### Advanced Analytics
- Segment analysis
- Heat maps
- Progress tracking
- Performance predictions
- Injury prevention
- Recovery recommendations

### Community
- Training groups
- Partner matching
- Leaderboards
- Virtual racing
- Live coaching sessions
- Community forums

### Integration
- Wearable device sync (Apple Watch, Garmin, Fitbit, Polar)
- Multi-sport tracking
- Data export (CSV, JSON, PDF)
- Privacy controls
- 24/7 support

## Support

For questions or issues with the demo presentations:

1. Check that JavaScript is enabled in your browser
2. Ensure you're using a modern browser (2019 or newer)
3. Clear browser cache if slides don't load
4. Try a different browser to isolate issues
5. Contact support@trainme.ai for assistance

## Version Information

- **Demo Version**: 1.0.0
- **Created**: 2026-03-26
- **Last Updated**: 2026-03-27
- **TrainMe.ai Version**: Latest
- **Compatibility**: All modern browsers

---

**Ready to deploy! Both presentations are production-ready and can be hosted anywhere.**