# Artisan Pottery Studio Website

A beautiful, responsive e-commerce website for selling handcrafted pottery, built with HTML, CSS, and JavaScript. The website reads product data from a CSV file and provides a complete shopping experience.

## Features

### 🏺 Product Management
- **CSV-based inventory**: Easy-to-manage product catalog using `pottery_inventory.csv`
- **Dynamic product display**: Products are loaded and displayed from the CSV file
- **Rich product information**: Includes dimensions, materials, artist info, and care instructions
- **Stock management**: Shows stock levels and prevents ordering out-of-stock items
- **Featured products**: Highlight special items with featured badges

### 🛒 Shopping Experience
- **Interactive shopping cart**: Add, remove, and modify quantities
- **Persistent cart**: Cart contents saved in browser localStorage
- **Product details modal**: Detailed view with specifications and features
- **Stock validation**: Prevents adding more items than available stock
- **Professional checkout**: Comprehensive customer details collection
- **Email order submission**: Real email sending via EmailJS integration

### 📧 Email Integration
- **EmailJS powered**: Real email sending without backend server
- **Order confirmations**: Automatic emails to business and customers
- **Contact form emails**: Direct inquiries to your business email
- **Newsletter subscriptions**: Automated subscriber management
- **Professional templates**: HTML email templates for all communications

### 🔍 Search & Filter
- **Category filtering**: Filter by Mugs, Bowls, Vases, Plant Pots, Tea Sets, Plates
- **Search functionality**: Search across product names, descriptions, materials, colors, and artists
- **Sorting options**: Sort by name, price (low to high, high to low), or newest first
- **Real-time filtering**: Instant results as you type

### 🎨 Design & Usability
- **Responsive design**: Works beautifully on desktop, tablet, and mobile
- **Professional styling**: Earthy color scheme perfect for artisan pottery
- **Smooth animations**: Engaging hover effects and transitions
- **Accessibility**: Proper semantic HTML and keyboard navigation

### 📧 Additional Features
- **Contact form**: Customer inquiry form with validation
- **Newsletter signup**: Email subscription for updates
- **About section**: Story and features highlighting craftsmanship
- **Social media integration**: Links to various social platforms

## File Structure

```
pottery/
├── index.html              # Main HTML file
├── styles.css              # CSS styling
├── script.js               # JavaScript functionality
├── pottery_inventory.csv   # Product database
├── images/                 # Product images directory
│   └── README.md          # Image requirements and list
└── README.md              # This file
```

## Product Data Structure

The CSV file includes these fields for each pottery item:

| Field | Description | Example |
|-------|-------------|---------|
| `id` | Unique product identifier | 1 |
| `name` | Product name | "Classic Blue Mug" |
| `description` | Product description | "Handcrafted ceramic mug..." |
| `price` | Price in USD | 24.99 |
| `category` | Product category | "Mugs" |
| `material` | Clay/ceramic type | "Stoneware" |
| `color` | Primary color | "Blue" |
| `dimensions_height_cm` | Height in centimeters | 10 |
| `dimensions_width_cm` | Width in centimeters | 8 |
| `dimensions_depth_cm` | Depth in centimeters | 8 |
| `weight_kg` | Weight in kilograms | 0.35 |
| `image_url` | Path to product image | "images/blue_mug.jpg" |
| `image_alt` | Alt text for image | "Classic blue ceramic mug" |
| `stock_quantity` | Items in stock | 15 |
| `featured` | Is featured product | true/false |
| `glazed` | Has glaze finish | true/false |
| `dishwasher_safe` | Dishwasher safe | true/false |
| `microwave_safe` | Microwave safe | true/false |
| `handmade` | Handcrafted item | true/false |
| `artist` | Creator name | "Sarah Chen" |
| `date_created` | Creation date | "2024-08-15" |
| `sku` | Stock keeping unit | "POT-MUG-001" |

## How to Run

### Option 1: Local Web Server (Recommended)
Due to CORS restrictions when loading CSV files, you need to run a local web server:

**Using Python (if installed):**
```bash
# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000
```

**Using Node.js (if installed):**
```bash
npx http-server -p 8000
```

**Using PHP (if installed):**
```bash
php -S localhost:8000
```

Then open your browser and navigate to `http://localhost:8000`

### Option 2: VS Code Live Server Extension
1. Install the "Live Server" extension in VS Code
2. Right-click on `index.html`
3. Select "Open with Live Server"

### Option 3: Browser Extensions
Some browsers may allow local file access with extensions like "CORS Unblock" but this is not recommended for security reasons.

## Email Setup (EmailJS)

To enable real email sending for orders, contact forms, and newsletter subscriptions:

1. **Follow the comprehensive guide**: See `EMAILJS_SETUP.md` for detailed instructions
2. **Create EmailJS account**: Free account at [emailjs.com](https://www.emailjs.com/)
3. **Configure email service**: Connect Gmail, Outlook, or custom SMTP
4. **Create email templates**: For orders, contact, and newsletter
5. **Update configuration**: Add your EmailJS keys to `script.js`

**Quick Setup:**
```javascript
// In script.js, update these values:
const EMAILJS_CONFIG = {
    PUBLIC_KEY: 'your_emailjs_public_key',
    SERVICE_ID: 'your_service_id', 
    TEMPLATE_ID: 'your_template_id'
};
```

Without EmailJS setup, the website works in demo mode with simulated email sending.

## Customization

### Adding Products
1. Open `pottery_inventory.csv`
2. Add a new row with all required fields
3. Save the file
4. Refresh the website - new products will appear automatically

### Modifying Styles
- Edit `styles.css` to change colors, fonts, layouts
- CSS variables are defined at the top for easy theme customization
- All colors use the `:root` CSS variables for consistency

### Extending Functionality
- `script.js` contains all the interactive features
- Functions are well-documented and modular
- Easy to add new features like wishlist, reviews, etc.

## Browser Compatibility

- **Modern browsers**: Chrome, Firefox, Safari, Edge (latest versions)
- **Mobile browsers**: iOS Safari, Chrome Mobile, Samsung Internet
- **Features used**: ES6 JavaScript, CSS Grid, Flexbox, CSS Variables

## Performance Notes

- **Lightweight**: No external dependencies except Google Fonts and Font Awesome
- **Fast loading**: Optimized CSS and efficient JavaScript
- **Image optimization**: Placeholder system ready for real product photos
- **Caching**: Browser localStorage used for cart persistence

## Future Enhancements

- **Real image gallery**: Replace icon placeholders with actual product photos
- **Payment integration**: Add Stripe, PayPal, or other payment processors
- **User accounts**: Customer login, order history, saved addresses
- **Inventory management**: Admin panel for updating stock and products
- **Reviews system**: Customer reviews and ratings
- **Wishlist feature**: Save products for later
- **Advanced search**: Filters by price range, materials, sizes
- **Multi-language support**: Internationalization for global customers

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

## License

This project is open source and available under the MIT License.

## Support

For questions or issues, please contact the development team or open an issue in the repository.

---

*Built with ❤️ for artisan pottery makers and lovers of handcrafted ceramics.*