# 💖 Valentine's Day Web App - Complete Setup Guide

## 📋 Table of Contents
1. [Local Setup (XAMPP)](#local-setup)
2. [Database Configuration](#database-configuration)
3. [File Structure](#file-structure)
4. [Personalization](#personalization)
5. [Hosting Deployment](#hosting-deployment)
6. [Email Configuration](#email-configuration)
7. [Troubleshooting](#troubleshooting)

---

## 🏠 Local Setup (XAMPP)

### Step 1: Install XAMPP
- Download from: https://www.apachefriends.org/
- Choose PHP 8.0 or higher
- Install in default location

### Step 2: Extract Project Files
1. Download/unzip the project files
2. Copy entire project folder to: `C:\xampp\htdocs\valentine` (Windows)
   - Or `/Applications/XAMPP/htdocs/valentine` (Mac)
   - Or `/opt/lampp/htdocs/valentine` (Linux)

### Step 3: Start XAMPP
- Open XAMPP Control Panel
- Click **Start** for Apache
- Click **Start** for MySQL

### Step 4: Create Database
1. Open browser: `http://localhost/phpmyadmin`
2. Click **New** (left sidebar)
3. Enter database name: `valentine_app`
4. Click **Create**
5. Select the new `valentine_app` database
6. Click **SQL** tab
7. Copy entire contents of `database.sql`
8. Paste in SQL editor
9. Click **Go**

### Step 5: Access the App
- Open browser: `http://localhost/valentine`
- You should see the landing page! 💖

---

## 🗄️ Database Configuration

### Option 1: Default XAMPP Setup
If using XAMPP defaults (no password):
```php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');           // Empty password
define('DB_NAME', 'valentine_app');
```

### Option 2: Custom Database Credentials
If you set up a custom user/password in MySQL:
```php
define('DB_HOST', 'localhost');
define('DB_USER', 'your_username');
define('DB_PASS', 'your_password');
define('DB_NAME', 'valentine_app');
```

### Test Database Connection
1. Modify `test_db.php` (create this file):
```php
<?php
require_once 'config.php';
try {
    $pdo = getDBConnection();
    echo "✓ Database connected successfully!";
} catch (Exception $e) {
    echo "✗ Connection failed: " . $e->getMessage();
}
?>
```

2. Access: `http://localhost/valentine/test_db.php`

---

## 📁 File Structure

```
valentine/
├── index.php              ← Landing page
├── page2.php              ← Memory slideshow
├── page3.php              ← Funny trap page
├── page4.php              ← Proposal page
├── save_response.php      ← Backend (saves to DB)
├── success.php            ← Success/celebration page
├── admin.php              ← View all responses
├── config.php             ← Configuration (EDIT THIS!)
├── style.css              ← All styling & animations
├── script.js              ← All JavaScript
├── database.sql           ← Database schema
│
├── assets/
│   ├── css/
│   ├── js/
│   ├── images/            ← Put your memory photos here
│   │   ├── memory1.jpg
│   │   ├── memory2.jpg
│   │   └── ...
│   └── music/             ← Put your music files here
│       ├── romantic-intro.mp3
│       ├── romantic-instrumental.mp3
│       └── happy-love-song.mp3
│
└── README.md              ← This file
```

---

## 🎨 Personalization

### Edit `config.php` to customize:

#### 1. Names and Email
```php
define('HER_NAME', 'Sarah');              // Her name
define('MY_NAME', 'You');                 // Your name
define('MY_EMAIL', 'your-email@gmail.com'); // Your email
```

#### 2. Colors
```php
define('COLOR_BLUSH', '#ffb6c1');         // Blush pink
define('COLOR_ROSE', '#ff4d6d');          // Soft red
define('COLOR_DEEP_ROSE', '#c9184a');     // Deep rose
define('COLOR_LIGHT', '#fff5f7');         // Light bg
```

#### 3. Memory Slideshow
Edit the `$slideshow_data` array:
```php
$slideshow_data = [
    [
        'image' => 'assets/images/memory1.jpg',
        'caption' => 'The moment I saw you...'
    ],
    // Add more memories...
];
```

#### 4. Love Quotes
Edit the `$love_quotes` array:
```php
$love_quotes = [
    'You make my heart skip a beat.',
    'Every day with you is a gift.',
    // Add your own quotes...
];
```

#### 5. Music Files
```php
define('MUSIC_LANDING', 'assets/music/romantic-intro.mp3');
define('MUSIC_SLIDESHOW', 'assets/music/romantic-instrumental.mp3');
define('MUSIC_SUCCESS', 'assets/music/happy-love-song.mp3');
```

### Add Your Photos
1. Take photos with your girlfriend (clear, well-lit)
2. Resize to ~800x600px
3. Convert to JPG format
4. Save as: `assets/images/memory1.jpg`, `memory2.jpg`, etc.
5. Update paths in `config.php`

### Add Your Music
1. Find royalty-free romantic music:
   - https://pixabay.com/music/
   - https://www.bensound.com/
   - https://www.incompetech.com/

2. Download MP3 files
3. Save to: `assets/music/`
4. Update file names in `config.php`

---

## 🌐 Hosting Deployment

### Step 1: Choose a Hosting Provider
Recommended hosts with PHP 8+ support:
- **Bluehost** (1-click WordPress install, easy cPanel)
- **SiteGround** (excellent support)
- **HostGator** (affordable, reliable)
- **Namecheap** (budget-friendly)
- **DigitalOcean** (technical, more control)

### Step 2: Upload Files
Using **FTP (File Transfer Protocol)**:
1. Download FileZilla: https://filezilla-project.org/
2. Get FTP credentials from hosting provider
3. Connect via FileZilla
4. Upload all project files to `public_html/`

### Step 3: Create Database on Hosting
1. Log into hosting control panel (cPanel usually)
2. Go to **MySQL Databases** or **Databases**
3. Create new database: `valentine_app`
4. Create new MySQL user with strong password
5. Assign user to database (all privileges)
6. Note the credentials

### Step 4: Update config.php
```php
define('DB_HOST', 'your-host.com');      // Often 'localhost'
define('DB_USER', 'user_database');      // Your MySQL user
define('DB_PASS', 'strong_password');    // MySQL password
define('DB_NAME', 'valentine_app');      // Database name
```

### Step 5: Import Database Schema
1. Log into hosting control panel
2. Go to **phpMyAdmin**
3. Select `valentine_app` database
4. Click **SQL** tab
5. Copy contents of `database.sql`
6. Paste and click **Go**

### Step 6: Enable PHP Mail
Most hosts have mail() enabled by default. To test:
1. Create `test_mail.php`:
```php
<?php
$to = 'your-email@gmail.com';
$subject = 'Test Email';
$message = 'This is a test email from ' . $_SERVER['HTTP_HOST'];
$headers = "Content-Type: text/html; charset=UTF-8\r\n";

if (mail($to, $subject, $message, $headers)) {
    echo "✓ Email sent successfully!";
} else {
    echo "✗ Email failed to send";
}
?>
```
2. Access it and check your email

### Step 7: Test Live Website
1. Visit: `http://yourdomain.com/valentine`
2. Test all pages and interactions
3. Try submitting a YES response
4. Check email for notification

### Step 8: SSL Certificate (HTTPS)
- Most hosts offer free SSL (Let's Encrypt)
- Enable in control panel under **SSL/TLS**
- Update to: `https://yourdomain.com`

---

## 📧 Email Configuration

### Using Standard PHP mail()
Already implemented! Just update `MY_EMAIL` in `config.php`.

### Using Gmail SMTP (Advanced)
If mail() doesn't work, use PHPMailer:

1. **Install PHPMailer via Composer** (if available):
```bash
composer require phpmailer/phpmailer
```

2. **Or download PHPMailer files** manually

3. **Update save_response.php**:
```php
<?php
require 'PHPMailer/PHPMailer.php';
require 'PHPMailer/SMTP.php';
require 'PHPMailer/Exception.php';

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

$mail = new PHPMailer(true);
try {
    $mail->isSMTP();
    $mail->Host = 'smtp.gmail.com';
    $mail->SMTPAuth = true;
    $mail->Username = 'your-email@gmail.com';
    $mail->Password = 'your-app-password'; // Not your Gmail password!
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
    $mail->Port = 587;
    
    $mail->setFrom('your-email@gmail.com', 'Valentine App');
    $mail->addAddress('your-email@gmail.com');
    $mail->Subject = 'She Said YES! 💖';
    $mail->Body = $message;
    
    $mail->send();
    header('Location: success.php');
} catch (Exception $e) {
    echo "Email failed: {$mail->ErrorInfo}";
}
?>
```

**Note:** For Gmail, create an [App Password](https://support.google.com/accounts/answer/185833)

---

## 🐛 Troubleshooting

### Problem: "Database connection failed"
**Solution:**
1. Check `config.php` credentials
2. Verify MySQL is running (XAMPP Control Panel)
3. Confirm database `valentine_app` exists
4. Check user permissions in phpMyAdmin

### Problem: "Table 'responses' doesn't exist"
**Solution:**
1. Import `database.sql` (see Database Configuration section)
2. Run this in phpMyAdmin SQL editor:
```sql
CREATE TABLE responses (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    response VARCHAR(10),
    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
    ip_address VARCHAR(50)
);
```

### Problem: "Email not sending"
**Solution:**
1. Verify `MY_EMAIL` in `config.php`
2. Test with `test_mail.php` (see Email Configuration)
3. Check hosting provider's mail logs
4. Consider using PHPMailer with SMTP

### Problem: "Photos not showing"
**Solution:**
1. Check file paths in `config.php` are correct
2. Verify image files exist in `assets/images/`
3. Make sure file names match exactly (case-sensitive)
4. Convert images to JPG format

### Problem: "Music not playing"
**Solution:**
1. Verify audio files are in `assets/music/`
2. Check file paths in `config.php`
3. Try different audio format (MP3 usually works best)
4. Some browsers require user interaction before playing

### Problem: "Admin page won't load"
**Solution:**
1. Default password is `love2024` (in `admin.php`)
2. Change password in admin.php line: `define('ADMIN_PASSWORD', 'love2024');`
3. Session might not be working - ensure `session_start()` in admin.php

### Problem: "Mobile version looks broken"
**Solution:**
1. Check viewport meta tag in HTML head
2. Test on actual phone (not just browser developer tools)
3. Buttons should be 44+ pixels tall for touch
4. Text should be readable (16px minimum)

---

## 🔒 Security Notes

1. **Change admin password**: Edit `admin.php` line 10
```php
define('ADMIN_PASSWORD', 'your_secure_password');
```

2. **Hide config.php credentials** (hosting):
   - Consider `.htaccess` protection
   - Or move database credentials to parent directory

3. **Use HTTPS** when deployed (free SSL available)

4. **Sanitize inputs**: Already done with `sanitize()` function

5. **Use prepared statements**: Already implemented with PDO

---

## 📱 Testing Checklist

- [ ] Landing page loads with animations
- [ ] Floating hearts appear
- [ ] "Open It" button transitions to slideshow
- [ ] Slideshow auto-advances every 4 seconds
- [ ] Previous/Next buttons work
- [ ] Dots navigate to correct slides
- [ ] "One More Thing" button goes to trap page
- [ ] Trap page "Click Here" button reveals YES/NO
- [ ] NO button moves away on hover/click
- [ ] YES button goes to proposal page
- [ ] Typewriter animation plays
- [ ] Big question appears with glow
- [ ] Final YES buttons trigger celebration
- [ ] Confetti, fireworks, heart rain appear
- [ ] Success page loads
- [ ] Database has new entry
- [ ] Email notification received
- [ ] Admin panel works
- [ ] Mobile looks good
- [ ] Easter egg works (type "iloveyou")

---

## 🚀 Performance Tips

1. **Optimize images**: Compress before uploading
2. **Minify CSS/JS**: Use minifiers for production
3. **Cache audio**: Use browser caching headers
4. **Database indexing**: Already added to schema
5. **CDN**: Consider for images/music on high-traffic sites

---

## 💡 Additional Features You Can Add

- [ ] Photo upload for her to add photos
- [ ] Countdown timer to Valentine's Day
- [ ] Dedicated domain (valentine.yourname.com)
- [ ] Custom background music playlist
- [ ] Guest book for friends to congratulate
- [ ] Secret message mode (password protected)
- [ ] Video message option
- [ ] Social media share button
- [ ] Responsive admin dashboard
- [ ] Email digest of all responses

---

## 📞 Support & Resources

- **PHP Docs**: https://www.php.net/manual/
- **MySQL Docs**: https://dev.mysql.com/doc/
- **MDN Web Docs**: https://developer.mozilla.org/
- **Hosting Issues**: Contact hosting provider support

---

## ❤️ Final Notes

This app is completely functional and ready to use. Customize it with:
- Her favorite colors
- Your special memories
- Your favorite romantic music
- Personal messages and quotes

The experience should feel unique to your relationship. Have fun, and good luck! 💖

---

**Created with ❤️ for your Valentine's Day proposal**

Good luck, and may she say YES! 💕
