# 💖 "Will You Be My Valentine?" - Romantic Web App

A beautiful, interactive, animated web application to ask your girlfriend to be your Valentine. Complete with memory slideshow, funny interactive elements, dramatic proposal animation, confetti/fireworks celebration, and database storage.

## ✨ Features

✅ **Landing Page** - Soft, romantic introduction with floating hearts
✅ **Memory Slideshow** - Full-screen photo gallery with captions (5-10 memories)
✅ **Funny Trap Page** - Playful interaction where NO button tries to escape
✅ **Proposal Page** - Dramatic typewriter animation leading to final question
✅ **Celebration Page** - Confetti, fireworks, and heart rain animation
✅ **Database Storage** - Save all responses with timestamp and IP address
✅ **Email Notifications** - Get notified immediately when she says YES
✅ **Admin Panel** - View all responses and manage data
✅ **Mobile Responsive** - Perfect experience on iPhone and Android
✅ **Easter Eggs** - Hidden features for extra fun
✅ **No Framework Bloat** - Pure HTML, CSS, PHP with vanilla JavaScript

## 🚀 Quick Start

### Requirements
- PHP 8.0+ (MySQL support required)
- MySQL 5.7+
- Modern web browser (Chrome, Safari, Firefox, Edge)
- Text editor or IDE

### Installation (Local - XAMPP)

1. **Extract files** to `C:\xampp\htdocs\valentine` (Windows) or appropriate htdocs folder

2. **Open XAMPP Control Panel** and start Apache + MySQL

3. **Import database** (see SETUP.md)

4. **Edit `config.php`** with your details:
   ```php
   define('HER_NAME', 'Sarah');
   define('MY_NAME', 'You');
   define('MY_EMAIL', 'your-email@gmail.com');
   ```

5. **Add your photos** to `assets/images/`

6. **Visit** `http://localhost/valentine`

Full setup guide: See **SETUP.md**

## 📂 File Structure

```
valentine/
├── index.php              Landing page
├── page2.php              Memory slideshow
├── page3.php              Funny trap page
├── page4.php              Proposal page
├── save_response.php      Backend handler
├── success.php            Celebration page
├── admin.php              Response viewer
├── config.php             ⭐ CUSTOMIZE THIS!
├── style.css              All animations & styling
├── script.js              Interactive features
├── database.sql           Database schema
├── SETUP.md               Complete setup guide
└── assets/
    ├── images/            Add your photos here
    └── music/             Add your music here
```

## 🎨 Customization

Edit **`config.php`** to change:
- Names and email
- Colors (blush pink, rose red, etc.)
- Memory slideshow photos
- Love quotes
- Music files

## 🎵 Add Your Media

### Photos
1. Collect 5-10 photos with your girlfriend
2. Resize to ~800x600px, save as JPG
3. Put in `assets/images/memory1.jpg`, etc.
4. Update `$slideshow_data` in `config.php`

### Music
1. Download royalty-free music from:
   - Pixabay Music: https://pixabay.com/music/
   - Bensound: https://www.bensound.com/
   - Incompetech: https://www.incompetech.com/

2. Save MP3 files to `assets/music/`
3. Update `MUSIC_*` constants in `config.php`

## 📊 Database

Responses are stored with:
- Her response (YES/NO)
- Timestamp
- IP address
- Name

### View in Admin Panel
- URL: `yoursite.com/admin.php`
- Password: `love2024` (change in admin.php)

## 🌐 Deploy to Live Hosting

See **SETUP.md** → **Hosting Deployment** section for:
- Hosting provider recommendations
- FTP upload instructions
- Database setup on hosting
- Email configuration
- SSL/HTTPS setup

## 🧪 Testing

Visit each page and test:
- [ ] All animations and transitions
- [ ] Mobile responsiveness
- [ ] Music playback
- [ ] Button interactions
- [ ] Database insertion
- [ ] Email notification
- [ ] Admin panel access

## 🔒 Security

- All inputs sanitized
- Prepared SQL statements
- HTTPS recommended for deployment
- Change admin password in `admin.php`
- No sensitive data in version control

## 🎁 Special Features

- 💝 **Heart Cursor Trail** - Hearts follow your mouse
- 🎯 **Easter Egg** - Type "iloveyou" for surprise
- ✨ **Particle Effects** - Sparkles and animations everywhere
- 📱 **Touch Friendly** - Optimized for mobile devices
- 🎉 **Celebration Cascade** - Confetti, fireworks, and heart rain
- 🎨 **Smooth Transitions** - Fade effects between pages
- 🔤 **Typewriter Animation** - Romantic text reveal

## 💡 Tips for Success

1. **Choose perfect timing** - Private moment, romantic setting
2. **Test everything beforehand** - Run through the full flow
3. **Use your favorite photos** - Include your best memories
4. **Add personal touches** - Edit the love quotes and messages
5. **Pick romantic music** - Set the mood with perfect soundtrack
6. **Have tissues ready** - She might cry happy tears! 💕

## 🐛 Troubleshooting

**Database connection fails?** → Check credentials in `config.php`
**Photos not showing?** → Verify paths and filenames
**Music won't play?** → Try different format (MP3 usually works)
**Email not sending?** → See SETUP.md email configuration

## 📖 Full Documentation

See **SETUP.md** for:
- Complete local setup guide
- Hosting deployment instructions
- Email configuration
- Security best practices
- Troubleshooting guide

## 💌 What's Included

✅ Fully functional code (HTML5, CSS3, PHP, JavaScript)
✅ Complete database schema
✅ Beautiful animations and effects
✅ Mobile-responsive design
✅ Email notification system
✅ Admin panel to view responses
✅ Detailed setup documentation
✅ Easter eggs and hidden features
✅ No framework dependencies
✅ Sanitized, secure code

## 🎯 How It Works

1. **Landing** → She clicks "Open It"
2. **Memories** → Slideshow of your photos (auto-advance or manual)
3. **Trap** → Click to reveal YES/NO buttons (NO button runs away!)
4. **Proposal** → Dramatic typewriter animation, big glowing question
5. **Response** → She clicks YES
6. **Celebration** → Confetti, fireworks, heart rain animation
7. **Database** → Response saved, email sent to you

## 🚀 Performance

- Lightweight (no frameworks)
- Optimized CSS animations (GPU-accelerated)
- Lazy-loaded assets
- Mobile-friendly
- Fast page transitions
- Minimal JavaScript dependencies

## 💝 Future Enhancements

Could add:
- Photo upload from her
- Guest book for friends
- Countdown timer
- Social sharing
- Secret message mode
- Video message support
- Multiple language support

## 📞 Support

- Check SETUP.md for detailed help
- Review code comments for explanations
- Test locally first before deploying
- Most issues are configuration-related (check config.php!)

## ⚖️ License

Feel free to customize and use for your proposal! This is made with love for your special moment.

## 🎊 Final Note

This entire application is designed to be:
- **Sweet** - Every detail shows you care
- **Playful** - Fun interactions, not boring
- **Romantic** - Beautiful design and animations
- **Personal** - Easy to customize with your memories
- **Memorable** - She'll never forget this moment! 💖

---

**Good luck, and may she say YES!** 💕

Created with ❤️ for your Valentine's Day proposal

---

## Quick Reference

### Admin Panel
- Default password: `love2024`
- URL: `/admin.php`
- Change password in admin.php

### Key Configuration Items
```php
HER_NAME              // Her name
MY_NAME               // Your name  
MY_EMAIL              // Your email address
COLOR_*               // All the colors
MUSIC_*               // All the music files
$slideshow_data       // Memory photos
$love_quotes          // Random quotes
```

### Database Tables
```
responses:
  - id (auto-increment)
  - name
  - response (YES/NO)
  - timestamp
  - ip_address
```

### Pages
- `index.php` → Landing (1/5)
- `page2.php` → Slideshow (2/5)
- `page3.php` → Trap (3/5)
- `page4.php` → Proposal (4/5)
- `success.php` → Celebration (5/5)
- `admin.php` → View responses

Enjoy! 🎉💖
