Initial

2025-09-27 01:46:37 +01:00
commit 8bacf3b2bb
9 changed files with 3872 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,205 @@
+# 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.*