olipassey/web-pottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial

Browse Source
This commit is contained in:
DESKTOP-G4D78VI\Oli
2025-09-27 01:46:37 +01:00
commit 8bacf3b2bb
9 changed files with 3872 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
EMAILJS_SETUP.md Normal file
View File

@@ -0,0 +1,299 @@
# EmailJS Setup Guide for Pottery Website
This guide will help you set up EmailJS to enable real email sending from your pottery website.
## Step 1: Create EmailJS Account
1. Go to [EmailJS.com](https://www.emailjs.com/)
2. Sign up for a free account
3. Verify your email address
## Step 2: Connect Email Service
1. In your EmailJS dashboard, go to **Email Services**
2. Click **Add New Service**
3. Choose your email provider:
- **Gmail** (recommended for personal/small business)
- **Outlook/Hotmail**
- **Yahoo**
- **Custom SMTP** (for business email)
### For Gmail Setup:
1. Select **Gmail**
2. Click **Connect Account**
3. Authorize EmailJS to access your Gmail
4. Your Gmail service will be created
### For Business Email (SMTP):
1. Select **Custom SMTP**
2. Enter your email server settings:
- **SMTP Server**: (e.g., mail.yourdomain.com)
- **Port**: Usually 587 or 465
- **Username**: Your email address
- **Password**: Your email password
- **Security**: TLS/SSL
## Step 3: Create Email Templates
You need to create 3 email templates:
### Template 1: Order Confirmation (Main Template)
1. Go to **Email Templates** → **Create New Template**
2. **Template Name**: `pottery_order_confirmation`
3. **Template Content**:
```html
Subject: New Pottery Order #{{order_id}} - {{customer_name}}
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
.header { background: #8B4513; color: white; padding: 20px; text-align: center; }
.content { padding: 20px; }
.order-details { background: #f9f9f9; padding: 15px; margin: 15px 0; border-radius: 5px; }
.items-table { width: 100%; border-collapse: collapse; margin: 15px 0; }
.items-table th, .items-table td { border: 1px solid #ddd; padding: 10px; text-align: left; }
.items-table th { background: #8B4513; color: white; }
.total { font-size: 18px; font-weight: bold; color: #8B4513; }
.next-steps { background: #e8f4f8; padding: 15px; border-left: 4px solid #8B4513; margin: 20px 0; }
</style>
</head>
<body>
<div class="header">
<h1>🏺 New Order - Artisan Pottery Studio</h1>
</div>
<div class="content">
<h2>Order Details</h2>
<div class="order-details">
<p><strong>Order ID:</strong> {{order_id}}</p>
<p><strong>Order Date:</strong> {{order_date}}</p>
<p><strong>Total Amount:</strong> ${{order_total}}</p>
</div>
<h3>Customer Information</h3>
<div class="order-details">
<p><strong>Name:</strong> {{customer_name}}</p>
<p><strong>Email:</strong> {{customer_email}}</p>
<p><strong>Phone:</strong> {{customer_phone}}</p>
<p><strong>Preferred Contact:</strong> {{preferred_contact}}</p>
</div>
<h3>Shipping Address</h3>
<div class="order-details">
<p>{{shipping_address}}</p>
</div>
<h3>Order Items</h3>
<table class="items-table">
<thead>
<tr>
<th>Item</th>
<th>Category</th>
<th>Color</th>
<th>Price</th>
<th>Qty</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
{{{items_table}}}
</tbody>
</table>
<p class="total">Total: ${{order_total}}</p>
<h3>Payment Information</h3>
<div class="order-details">
<p><strong>Preferred Payment Method:</strong> {{payment_preference}}</p>
</div>
{{#if order_notes}}
<h3>Special Instructions</h3>
<div class="order-details">
<p>{{order_notes}}</p>
</div>
{{/if}}
<div class="next-steps">
<h3>📋 Next Steps:</h3>
<ol>
<li>Contact customer within 24 hours to confirm order</li>
<li>Arrange secure payment processing</li>
<li>Confirm shipping details and timeline</li>
<li>Update order status in system</li>
</ol>
<p><strong>This order requires payment confirmation before processing.</strong></p>
<p>Customer copy sent to: {{customer_email}}</p>
</div>
</div>
</body>
</html>
```
### Template 2: Contact Form
1. Create new template: `pottery_contact_form`
2. **Template Content**:
```html
Subject: New Contact Form Message - {{from_name}}
<h2>New Contact Form Submission</h2>
<p><strong>From:</strong> {{from_name}}</p>
<p><strong>Email:</strong> {{from_email}}</p>
<p><strong>Date:</strong> {{contact_date}}</p>
<h3>Message:</h3>
<div style="background: #f9f9f9; padding: 15px; border-radius: 5px;">
{{message}}
</div>
<hr>
<p><em>Sent from Artisan Pottery Studio website contact form</em></p>
```
### Template 3: Newsletter Subscription
1. Create new template: `pottery_newsletter_subscription`
2. **Template Content**:
```html
Subject: New Newsletter Subscription
<h2>New Newsletter Subscription</h2>
<p><strong>Email:</strong> {{subscriber_email}}</p>
<p><strong>Date:</strong> {{subscribe_date}}</p>
<p>Please add this email to your newsletter mailing list.</p>
<hr>
<p><em>Sent from Artisan Pottery Studio website</em></p>
```
## Step 4: Configure Website
1. Open `script.js` in your pottery website
2. Find the `EMAILJS_CONFIG` section at the top
3. Replace the placeholder values:
```javascript
const EMAILJS_CONFIG = {
PUBLIC_KEY: 'your_actual_public_key', // From EmailJS dashboard
SERVICE_ID: 'your_service_id', // From your connected email service
TEMPLATE_ID: 'pottery_order_confirmation' // Template ID from step 3
};
```
### Getting Your Keys:
1. **Public Key**:
- Go to EmailJS dashboard → **Account** → **General**
- Copy your **Public Key**
2. **Service ID**:
- Go to **Email Services**
- Copy the **Service ID** of your connected service
3. **Template IDs**:
- Go to **Email Templates**
- Copy the **Template ID** for each template you created
## Step 5: Update Template IDs in Code
In the `script.js` file, update these lines with your actual template IDs:
```javascript
// In handleContactFormSubmission function:
const contactTemplateId = 'pottery_contact_form'; // Your contact template ID
// In handleNewsletterSubmission function:
const newsletterTemplateId = 'pottery_newsletter_subscription'; // Your newsletter template ID
```
## Step 6: Test the Integration
1. **Test Order Submission**:
- Add items to cart
- Go through checkout process
- Fill in customer details
- Submit order
- Check your email for order confirmation
2. **Test Contact Form**:
- Fill out contact form at bottom of website
- Submit message
- Check your email
3. **Test Newsletter**:
- Enter email in newsletter signup
- Submit
- Check your email
## Step 7: Email Setup Recommendations
### For Business Use:
1. **Use a dedicated business email** for receiving orders
2. **Set up email filters** to organize order emails
3. **Create email templates** for customer responses
4. **Monitor EmailJS quota** (free plan has limits)
### Email Addresses to Configure:
- `orders@yourdomain.com` - For order confirmations
- `info@yourdomain.com` - For contact form messages
- `newsletter@yourdomain.com` - For newsletter subscriptions
## Troubleshooting
### Common Issues:
1. **Emails not sending**:
- Check EmailJS dashboard for error logs
- Verify service connection
- Check template syntax
2. **Template variables not working**:
- Ensure variable names match exactly
- Use triple braces `{{{variable}}}` for HTML content
3. **Gmail authentication issues**:
- Enable 2-factor authentication
- Use app-specific password instead of regular password
4. **Quota exceeded**:
- Free plan: 200 emails/month
- Upgrade to paid plan for more volume
## Security Notes
- Never commit your EmailJS keys to public repositories
- Consider using environment variables for sensitive data
- Monitor your EmailJS usage to prevent abuse
- Set up CAPTCHA if you experience spam
## Cost Information
- **Free Plan**: 200 emails/month
- **Personal Plan**: $15/month - 1,000 emails
- **Business Plan**: $70/month - 10,000 emails
For a pottery business, the free plan should be sufficient initially.
## Support
- EmailJS Documentation: https://www.emailjs.com/docs/
- EmailJS Support: support@emailjs.com
- Community: https://github.com/emailjs
Once configured, your pottery website will send real emails for:
✅ Order confirmations to your business email
✅ Customer copies of orders
✅ Contact form messages
✅ Newsletter subscriptions
This creates a professional, automated system for managing your pottery business communications!

481
EMAILJS_TEMPLATES.md Normal file
View File

@@ -0,0 +1,481 @@
# EmailJS Template Code for Pottery Website
Copy and paste these templates into your EmailJS dashboard.
## Template 1: Main Order Template (ID: template_qf9hvwa)
**Template Name:** `pottery_order_confirmation`
**Template ID:** `template_qf9hvwa` (matches your script.js config)
### Subject Line:
```
New Pottery Order #{{order_id}} - {{customer_name}}
```
### HTML Email Body:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.email-container {
max-width: 800px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.header {
background: linear-gradient(135deg, #8B4513, #D2691E);
color: white;
padding: 30px 20px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 28px;
font-weight: bold;
}
.header p {
margin: 10px 0 0 0;
font-size: 16px;
opacity: 0.9;
}
.content {
padding: 30px 20px;
}
.order-details {
background: #FAF8F5;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
border-left: 4px solid #8B4513;
}
.order-details h3 {
margin-top: 0;
color: #8B4513;
font-size: 18px;
}
.order-details p {
margin: 8px 0;
font-size: 14px;
}
.items-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
.items-table th {
background: #8B4513;
color: white;
padding: 15px 10px;
text-align: left;
font-weight: bold;
font-size: 14px;
}
.items-table td {
padding: 12px 10px;
border-bottom: 1px solid #eee;
font-size: 13px;
}
.items-table tr:last-child td {
border-bottom: none;
}
.items-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.total-row {
background: #8B4513 !important;
color: white !important;
font-weight: bold;
font-size: 16px;
}
.total-row td {
border-bottom: none !important;
padding: 15px 10px !important;
}
.next-steps {
background: #e8f4f8;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #2980b9;
margin: 25px 0;
}
.next-steps h3 {
color: #2980b9;
margin-top: 0;
}
.next-steps ol {
margin: 15px 0;
padding-left: 20px;
}
.next-steps li {
margin: 8px 0;
font-size: 14px;
}
.highlight {
background: #fff3cd;
padding: 15px;
border-radius: 5px;
border-left: 4px solid #ffc107;
margin: 15px 0;
font-weight: bold;
color: #856404;
}
.footer {
background: #2C1810;
color: white;
padding: 20px;
text-align: center;
font-size: 12px;
}
.footer a {
color: #D2691E;
text-decoration: none;
}
@media (max-width: 600px) {
.content {
padding: 20px 15px;
}
.items-table th,
.items-table td {
padding: 8px 6px;
font-size: 12px;
}
.header h1 {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="email-container">
<div class="header">
<h1>🏺 New Order Received</h1>
<p>Artisan Pottery Studio</p>
</div>
<div class="content">
<h2 style="color: #8B4513; margin-bottom: 20px;">Order Information</h2>
<div class="order-details">
<h3>📋 Order Summary</h3>
<p><strong>Order ID:</strong> {{order_id}}</p>
<p><strong>Order Date:</strong> {{order_date}}</p>
<p><strong>Total Amount:</strong> ${{order_total}}</p>
<p><strong>Items Count:</strong> {{items_count}} items</p>
</div>
<div class="order-details">
<h3>👤 Customer Information</h3>
<p><strong>Name:</strong> {{customer_name}}</p>
<p><strong>Email:</strong> {{customer_email}}</p>
<p><strong>Phone:</strong> {{customer_phone}}</p>
<p><strong>Preferred Contact Method:</strong> {{preferred_contact}}</p>
</div>
<div class="order-details">
<h3>📍 Shipping Address</h3>
<p style="white-space: pre-line;">{{shipping_address}}</p>
</div>
<div class="order-details">
<h3>💳 Payment Information</h3>
<p><strong>Preferred Payment Method:</strong> {{payment_preference}}</p>
</div>
{{#if order_notes}}
<div class="order-details">
<h3>📝 Special Instructions</h3>
<p style="white-space: pre-line;">{{order_notes}}</p>
</div>
{{/if}}
<h3 style="color: #8B4513; margin: 30px 0 15px 0;">🛍️ Ordered Items</h3>
<table class="items-table">
<thead>
<tr>
<th>Item Name</th>
<th>Category</th>
<th>Color</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
{{{items_table}}}
<tr class="total-row">
<td colspan="5"><strong>TOTAL</strong></td>
<td><strong>${{order_total}}</strong></td>
</tr>
</tbody>
</table>
<div class="highlight">
⚠️ This order requires payment confirmation before processing.
</div>
<div class="next-steps">
<h3>📞 Next Steps</h3>
<ol>
<li><strong>Contact customer within 24 hours</strong> at {{customer_email}} or {{customer_phone}}</li>
<li><strong>Confirm order details</strong> and answer any questions</li>
<li><strong>Arrange secure payment</strong> using customer's preferred method: {{payment_preference}}</li>
<li><strong>Confirm shipping details</strong> and delivery timeline</li>
<li><strong>Begin pottery creation</strong> and update customer on progress</li>
<li><strong>Send shipping notification</strong> when order is ready</li>
</ol>
<p><strong>💡 Customer Communication:</strong></p>
<p>A confirmation email copy has been sent to the customer at: <strong>{{customer_email}}</strong></p>
</div>
</div>
<div class="footer">
<p>🏺 <strong>Artisan Pottery Studio</strong></p>
<p>Order Management System | <a href="mailto:{{customer_email}}">Reply to Customer</a></p>
<p>Generated on {{formatted_date}} at {{formatted_time}}</p>
</div>
</div>
</body>
</html>
```
---
## Template 2: Contact Form Template
**Template Name:** `pottery_contact_form`
### Subject Line:
```
💬 New Contact Message from {{from_name}} - Pottery Studio
```
### HTML Email Body:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.header {
background: #8B4513;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
margin-bottom: 20px;
}
.message-box {
background: #FAF8F5;
padding: 20px;
border-radius: 5px;
border-left: 4px solid #8B4513;
margin: 15px 0;
}
.contact-info {
background: #e8f4f8;
padding: 15px;
border-radius: 5px;
margin: 15px 0;
}
.footer {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>💬 New Contact Form Message</h2>
<p>Artisan Pottery Studio Website</p>
</div>
<div class="contact-info">
<h3>👤 Contact Details</h3>
<p><strong>Name:</strong> {{from_name}}</p>
<p><strong>Email:</strong> {{from_email}}</p>
<p><strong>Date Received:</strong> {{contact_date}}</p>
</div>
<div class="message-box">
<h3>📝 Message Content</h3>
<p style="white-space: pre-line; font-size: 14px; line-height: 1.6;">{{message}}</p>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; border-left: 4px solid #ffc107; margin: 20px 0;">
<p><strong>💡 To Reply:</strong> Simply reply to this email or contact {{from_name}} directly at {{from_email}}</p>
</div>
<div class="footer">
<p>🏺 This message was sent through the Artisan Pottery Studio contact form</p>
<p>Received: {{contact_date}}</p>
</div>
</div>
</body>
</html>
```
---
## Template 3: Newsletter Subscription Template
**Template Name:** `pottery_newsletter_subscription`
### Subject Line:
```
📧 New Newsletter Subscription - Pottery Studio
```
### HTML Email Body:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 500px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.header {
background: #8B4513;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
margin-bottom: 20px;
}
.info-box {
background: #FAF8F5;
padding: 20px;
border-radius: 5px;
border-left: 4px solid #8B4513;
margin: 15px 0;
text-align: center;
}
.footer {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #666;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>📧 New Newsletter Subscription</h2>
<p>Artisan Pottery Studio</p>
</div>
<div class="info-box">
<h3>📝 Subscriber Information</h3>
<p><strong>Email Address:</strong> {{subscriber_email}}</p>
<p><strong>Subscription Date:</strong> {{subscribe_date}}</p>
</div>
<div style="background: #e8f4f8; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h4>📋 Action Required:</h4>
<p>Please add <strong>{{subscriber_email}}</strong> to your newsletter mailing list.</p>
<p>Consider sending a welcome email to the new subscriber!</p>
</div>
<div class="footer">
<p>🏺 Newsletter subscription from Artisan Pottery Studio website</p>
<p>Subscribed: {{subscribe_date}}</p>
</div>
</div>
</body>
</html>
```
---
## How to Use These Templates:
1. **Log into your EmailJS dashboard**
2. **Go to Email Templates**
3. **Create New Template** for each one above
4. **Copy and paste** the HTML code into the template editor
5. **Set the Subject Line** as shown above
6. **Save each template** and note the Template IDs
7. **Update your script.js** if template IDs are different
## Template Variables Reference:
**Order Template Variables:**
- `{{order_id}}` - Unique order number
- `{{order_date}}` - Full date and time
- `{{order_total}}` - Total amount
- `{{customer_name}}` - Customer's full name
- `{{customer_email}}` - Customer's email
- `{{customer_phone}}` - Customer's phone
- `{{preferred_contact}}` - Contact preference
- `{{shipping_address}}` - Full shipping address
- `{{payment_preference}}` - Payment method choice
- `{{order_notes}}` - Special instructions
- `{{{items_table}}}` - HTML table of items (note: triple braces)
- `{{items_count}}` - Number of items
**Contact Template Variables:**
- `{{from_name}}` - Contact form sender name
- `{{from_email}}` - Contact form sender email
- `{{message}}` - Contact form message
- `{{contact_date}}` - When message was sent
**Newsletter Template Variables:**
- `{{subscriber_email}}` - Newsletter subscriber email
- `{{subscribe_date}}` - When they subscribed
These templates will create professional, branded emails that match your pottery website's aesthetic and provide all the information you need to process orders and customer communications!

205
README.md Normal file
View File

@@ -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.*

67
emailjs-config-example.js Normal file
View File

@@ -0,0 +1,67 @@
/**
* EmailJS Configuration Example
*
* Follow these steps to enable real email sending:
*
* 1. Create account at https://www.emailjs.com/
* 2. Connect your email service (Gmail, Outlook, etc.)
* 3. Create email templates (see EMAILJS_SETUP.md)
* 4. Get your keys from EmailJS dashboard
* 5. Replace the values below with your actual keys
* 6. Update the template IDs in the functions below
*/
// Step 1: Replace these with your actual EmailJS values
const EMAILJS_CONFIG = {
PUBLIC_KEY: 'YOUR_EMAILJS_PUBLIC_KEY', // From EmailJS Account > General
SERVICE_ID: 'YOUR_SERVICE_ID', // From EmailJS Email Services
TEMPLATE_ID: 'YOUR_ORDER_TEMPLATE_ID' // From EmailJS Email Templates
};
// Step 2: Update template IDs in these functions (in script.js):
/*
In handleContactFormSubmission function, update:
const contactTemplateId = 'YOUR_CONTACT_TEMPLATE_ID';
In handleNewsletterSubmission function, update:
const newsletterTemplateId = 'YOUR_NEWSLETTER_TEMPLATE_ID';
*/
// Step 3: Test email templates with these variable names:
/*
ORDER TEMPLATE VARIABLES:
- order_id
- order_date
- order_total
- customer_name
- customer_email
- customer_phone
- preferred_contact
- shipping_address
- billing_address
- payment_preference
- order_notes
- items_table (HTML)
- items_list (text)
CONTACT TEMPLATE VARIABLES:
- from_name
- from_email
- message
- contact_date
NEWSLETTER TEMPLATE VARIABLES:
- subscriber_email
- subscribe_date
*/
// Example working configuration (replace with your values):
/*
const EMAILJS_CONFIG = {
PUBLIC_KEY: 'abcd1234efgh5678',
SERVICE_ID: 'service_xyz123',
TEMPLATE_ID: 'template_pottery_order'
};
*/

37
images/README.md Normal file
View File

@@ -0,0 +1,37 @@
# Image Placeholder Information
This directory would contain actual product images in a real pottery website.
For this demo, the website uses Font Awesome icons with category-based colors to represent products.
## Expected Image Files (as referenced in the CSV):
1. **blue_mug.jpg** - Classic blue ceramic mug
2. **brown_bowl.jpg** - Rustic brown ceramic bowl
3. **white_vase.jpg** - Elegant white porcelain vase
4. **terracotta_pot.jpg** - Traditional terracotta plant pot
5. **green_tea_set.jpg** - Green glazed ceramic tea set
6. **cream_plate.jpg** - Artisan cream speckled dinner plate
7. **cobalt_pitcher.jpg** - Cobalt blue ceramic water pitcher
8. **sage_planter.jpg** - Sage green ceramic planter with saucer
9. **black_vase.jpg** - Midnight black matte ceramic vase
10. **yellow_mug.jpg** - Sunshine yellow ceramic mug
11. **wave_bowl.jpg** - Ocean wave pattern ceramic bowl
12. **copper_mug.jpg** - Copper glazed ceramic mug
13. **herb_planter_set.jpg** - Set of 3 terracotta herb planters
14. **purple_serving_dish.jpg** - Royal purple ceramic serving dish
15. **clay_pitcher.jpg** - Natural unglazed clay pitcher
## Image Requirements:
- Format: JPG, PNG, or WebP
- Recommended size: 600x600px minimum
- Aspect ratio: 1:1 (square) for consistent display
- High quality product photography with good lighting
- Clean background (white or neutral)
- Multiple angles can be added for product detail views
## To Add Real Images:
1. Place actual product photos in this directory
2. Ensure filenames match those listed in the CSV
3. Update the JavaScript to handle real image loading and error states
4. Consider adding image optimization for web performance

340
index.html Normal file
View File

@@ -0,0 +1,340 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artisan Pottery Studio - Handcrafted Ceramics</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<div class="nav-brand">
<h1><i class="fas fa-shapes"></i> Artisan Pottery Studio</h1>
<p class="tagline">Handcrafted with Love</p>
</div>
<nav class="nav-menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="cart-icon">
<button id="cart-btn" class="cart-btn">
<i class="fas fa-shopping-cart"></i>
<span id="cart-count" class="cart-count">0</span>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h2>Beautiful Handcrafted Pottery</h2>
<p>Discover unique ceramic pieces created by talented artisans. Each piece tells a story of tradition, craftsmanship, and artistic expression.</p>
<button class="cta-btn" onclick="document.getElementById('products').scrollIntoView()">
Shop Collection
</button>
</div>
</section>
<!-- Filters Section -->
<section class="filters">
<div class="container">
<div class="filter-controls">
<div class="search-box">
<input type="text" id="search-input" placeholder="Search pottery...">
<button id="search-btn"><i class="fas fa-search"></i></button>
</div>
<div class="filter-buttons">
<button class="filter-btn active" data-category="all">All</button>
<button class="filter-btn" data-category="Mugs">Mugs</button>
<button class="filter-btn" data-category="Bowls">Bowls</button>
<button class="filter-btn" data-category="Vases">Vases</button>
<button class="filter-btn" data-category="Plant Pots">Plant Pots</button>
<button class="filter-btn" data-category="Tea Sets">Tea Sets</button>
<button class="filter-btn" data-category="Plates">Plates</button>
</div>
<div class="sort-controls">
<select id="sort-select">
<option value="name">Sort by Name</option>
<option value="price-low">Price: Low to High</option>
<option value="price-high">Price: High to Low</option>
<option value="newest">Newest First</option>
</select>
</div>
</div>
</div>
</section>
<!-- Products Section -->
<section id="products" class="products">
<div class="container">
<h2 class="section-title">Our Collection</h2>
<div id="products-grid" class="products-grid">
<!-- Products will be loaded here by JavaScript -->
</div>
<div id="loading" class="loading">
<i class="fas fa-spinner fa-spin"></i> Loading products...
</div>
<div id="no-products" class="no-products" style="display: none;">
<p>No products found matching your criteria.</p>
</div>
</div>
</section>
<!-- Shopping Cart Modal -->
<div id="cart-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Shopping Cart</h3>
<span class="close">&times;</span>
</div>
<div id="cart-items" class="cart-items">
<!-- Cart items will be displayed here -->
</div>
<div class="cart-footer">
<div class="cart-total">
<strong>Total: $<span id="cart-total">0.00</span></strong>
</div>
<div class="cart-actions">
<button id="clear-cart" class="btn-secondary">Clear Cart</button>
<button id="checkout" class="btn-primary">Checkout</button>
</div>
</div>
</div>
</div>
<!-- Checkout Modal -->
<div id="checkout-modal" class="modal">
<div class="modal-content checkout-modal">
<div class="modal-header">
<h3>Checkout - Customer Details</h3>
<span class="close">&times;</span>
</div>
<div class="checkout-content">
<div class="checkout-summary">
<h4>Order Summary</h4>
<div id="checkout-items" class="checkout-items">
<!-- Order items will be displayed here -->
</div>
<div class="checkout-total">
<strong>Total: $<span id="checkout-total">0.00</span></strong>
</div>
</div>
<div class="checkout-form-section">
<h4>Contact Information</h4>
<form id="checkout-form">
<div class="form-row">
<div class="form-group">
<label for="customer-name">Full Name *</label>
<input type="text" id="customer-name" name="customerName" required>
</div>
<div class="form-group">
<label for="customer-email">Email Address *</label>
<input type="email" id="customer-email" name="customerEmail" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="customer-phone">Phone Number *</label>
<input type="tel" id="customer-phone" name="customerPhone" required>
</div>
<div class="form-group">
<label for="preferred-contact">Preferred Contact Method</label>
<select id="preferred-contact" name="preferredContact">
<option value="email">Email</option>
<option value="phone">Phone</option>
<option value="either">Either</option>
</select>
</div>
</div>
<div class="form-group">
<label for="shipping-address">Shipping Address *</label>
<textarea id="shipping-address" name="shippingAddress" rows="3" required placeholder="Street address, City, State, ZIP code"></textarea>
</div>
<div class="form-group">
<label for="billing-address">Billing Address</label>
<div class="checkbox-group">
<input type="checkbox" id="same-as-shipping" name="sameAsShipping" checked>
<label for="same-as-shipping">Same as shipping address</label>
</div>
<textarea id="billing-address" name="billingAddress" rows="3" placeholder="Leave blank if same as shipping address" style="display: none;"></textarea>
</div>
<div class="form-group">
<label for="order-notes">Special Instructions or Notes</label>
<textarea id="order-notes" name="orderNotes" rows="3" placeholder="Any special requests, delivery instructions, or questions..."></textarea>
</div>
<div class="payment-info">
<h4>Payment Information</h4>
<div class="payment-notice">
<i class="fas fa-info-circle"></i>
<p>We will contact you within 24 hours to arrange secure payment. We accept credit cards, PayPal, bank transfers, and cash on delivery.</p>
</div>
<div class="form-group">
<label for="payment-preference">Preferred Payment Method</label>
<select id="payment-preference" name="paymentPreference">
<option value="credit-card">Credit Card</option>
<option value="paypal">PayPal</option>
<option value="bank-transfer">Bank Transfer</option>
<option value="cash-on-delivery">Cash on Delivery</option>
<option value="discuss">Discuss when contacted</option>
</select>
</div>
</div>
<div class="checkout-actions">
<button type="button" id="back-to-cart" class="btn-secondary">Back to Cart</button>
<button type="submit" class="btn-primary">Submit Order</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Product Details Modal -->
<div id="product-modal" class="modal">
<div class="modal-content product-details">
<span class="close">&times;</span>
<div id="product-details-content">
<!-- Product details will be loaded here -->
</div>
</div>
</div>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<h2 class="section-title">About Our Studio</h2>
<div class="about-content">
<div class="about-text">
<p>Welcome to Artisan Pottery Studio, where traditional craftsmanship meets contemporary design. Our talented team of ceramic artists creates unique, handcrafted pottery pieces that bring beauty and functionality to your everyday life.</p>
<p>Each piece in our collection is carefully shaped, glazed, and fired using time-honored techniques passed down through generations. We believe in creating pottery that not only serves a purpose but also tells a story.</p>
<div class="features">
<div class="feature">
<i class="fas fa-hand-paper"></i>
<h4>Handcrafted</h4>
<p>Every piece is uniquely made by hand</p>
</div>
<div class="feature">
<i class="fas fa-leaf"></i>
<h4>Eco-Friendly</h4>
<p>Sustainable materials and practices</p>
</div>
<div class="feature">
<i class="fas fa-award"></i>
<h4>Quality</h4>
<p>High-quality ceramics built to last</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Get in Touch</h2>
<div class="contact-content">
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<div>
<h4>Visit Our Studio</h4>
<p>123 Artisan Lane<br>Pottery District<br>Creative City, CC 12345</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<div>
<h4>Call Us</h4>
<p>(555) 123-CLAY<br>Mon-Sat 9am-6pm</p>
</div>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<div>
<h4>Email Us</h4>
<p>hello@artisanpottery.com<br>info@artisanpottery.com</p>
</div>
</div>
</div>
<div class="contact-form">
<form id="contact-form">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" rows="5" required></textarea>
<button type="submit" class="btn-primary">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>Artisan Pottery Studio</h4>
<p>Creating beautiful, functional pottery since 2015. Follow us on social media for the latest updates and behind-the-scenes content.</p>
<div class="social-links">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="footer-section">
<h4>Shop</h4>
<ul>
<li><a href="#products">All Products</a></li>
<li><a href="#products">Mugs & Cups</a></li>
<li><a href="#products">Bowls & Plates</a></li>
<li><a href="#products">Vases & Decor</a></li>
<li><a href="#products">Plant Pots</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Customer Care</h4>
<ul>
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Returns & Exchanges</a></li>
<li><a href="#">Care Instructions</a></li>
<li><a href="#">Size Guide</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Newsletter</h4>
<p>Subscribe to get updates on new collections and special offers.</p>
<form class="newsletter-form">
<input type="email" placeholder="Your email address">
<button type="submit">Subscribe</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 Artisan Pottery Studio. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

16
pottery_inventory.csv Normal file
View File

@@ -0,0 +1,16 @@
id,name,description,price,category,material,color,dimensions_height_cm,dimensions_width_cm,dimensions_depth_cm,weight_kg,image_url,image_alt,stock_quantity,featured,glazed,dishwasher_safe,microwave_safe,handmade,artist,date_created,sku
1,"Classic Blue Mug","Handcrafted ceramic mug with deep blue glaze. Perfect for your morning coffee or evening tea.",24.99,"Mugs","Stoneware","Blue",10,8,8,0.35,"images/blue_mug.jpg","Classic blue ceramic mug",15,true,true,true,true,true,"Sarah Chen","2024-08-15","POT-MUG-001"
2,"Rustic Brown Bowl","Large serving bowl with earthy brown finish. Ideal for salads, pasta, or fruit.",42.50,"Bowls","Earthenware","Brown",8,25,25,1.2,"images/brown_bowl.jpg","Rustic brown ceramic bowl",8,true,true,true,false,true,"Michael Torres","2024-08-12","POT-BOW-002"
3,"Elegant White Vase","Minimalist white vase with smooth finish. Perfect for fresh flowers or as decorative piece.",68.00,"Vases","Porcelain","White",20,12,12,0.8,"images/white_vase.jpg","Elegant white porcelain vase",5,true,true,false,false,true,"Sarah Chen","2024-08-20","POT-VAS-003"
4,"Terracotta Plant Pot","Traditional terracotta pot with drainage hole. Great for indoor and outdoor plants.",18.75,"Plant Pots","Terracotta","Terra Cotta",15,16,16,1.5,"images/terracotta_pot.jpg","Traditional terracotta plant pot",25,false,false,false,false,true,"James Wilson","2024-08-10","POT-PLT-004"
5,"Green Tea Set","Complete tea set including teapot and 4 cups with beautiful green glaze.",125.00,"Tea Sets","Stoneware","Green",12,18,18,2.1,"images/green_tea_set.jpg","Green glazed ceramic tea set",3,true,true,true,true,true,"Sarah Chen","2024-08-25","POT-TEA-005"
6,"Artisan Dinner Plate","Hand-thrown dinner plate with speckled cream glaze. Part of our signature collection.",32.00,"Plates","Stoneware","Cream",2.5,26,26,0.9,"images/cream_plate.jpg","Artisan cream speckled dinner plate",12,false,true,true,true,true,"Michael Torres","2024-08-18","POT-PLT-006"
7,"Cobalt Blue Pitcher","Water pitcher with striking cobalt blue finish. Holds 1.5 liters.",55.25,"Pitchers","Stoneware","Cobalt Blue",22,15,12,1.8,"images/cobalt_pitcher.jpg","Cobalt blue ceramic water pitcher",6,true,true,true,false,true,"Elena Rodriguez","2024-08-22","POT-PIT-007"
8,"Sage Green Planter","Modern planter with drainage and saucer. Perfect for herbs or small plants.",29.99,"Plant Pots","Stoneware","Sage Green",12,14,14,1.1,"images/sage_planter.jpg","Sage green ceramic planter with saucer",18,false,true,false,false,true,"James Wilson","2024-08-14","POT-PLN-008"
9,"Midnight Black Vase","Dramatic black vase with matte finish. Makes a bold statement piece.",72.50,"Vases","Stoneware","Black",25,10,10,1.3,"images/black_vase.jpg","Midnight black matte ceramic vase",4,true,true,false,false,true,"Elena Rodriguez","2024-08-28","POT-VAS-009"
10,"Sunshine Yellow Mug","Cheerful yellow mug to brighten your day. Comfortable handle and perfect size.",22.50,"Mugs","Earthenware","Yellow",9.5,9,9,0.4,"images/yellow_mug.jpg","Sunshine yellow ceramic mug",20,false,true,true,true,true,"Michael Torres","2024-08-16","POT-MUG-010"
11,"Ocean Wave Bowl","Small bowl with blue and white wave pattern. Perfect for soup or cereal.",28.75,"Bowls","Porcelain","Blue/White",7,15,15,0.6,"images/wave_bowl.jpg","Ocean wave pattern ceramic bowl",10,false,true,true,true,true,"Sarah Chen","2024-08-19","POT-BOW-011"
12,"Copper Glazed Mug","Unique copper-colored glaze creates stunning metallic finish.",35.00,"Mugs","Stoneware","Copper",11,8.5,8.5,0.45,"images/copper_mug.jpg","Copper glazed ceramic mug",7,true,true,false,false,true,"Elena Rodriguez","2024-08-26","POT-MUG-012"
13,"Garden Herb Planter Set","Set of 3 small planters perfect for kitchen herbs. Includes labels.",45.00,"Plant Pots","Terracotta","Natural",8,10,10,0.8,"images/herb_planter_set.jpg","Set of 3 terracotta herb planters",12,false,false,false,false,true,"James Wilson","2024-08-11","POT-HRB-013"
14,"Royal Purple Serving Dish","Large oval serving dish with rich purple glaze. Perfect for special occasions.",58.25,"Serving Dishes","Stoneware","Purple",5,30,20,1.6,"images/purple_serving_dish.jpg","Royal purple ceramic serving dish",6,true,true,true,false,true,"Sarah Chen","2024-08-23","POT-SRV-014"
15,"Natural Clay Pitcher","Unglazed clay pitcher with rustic charm. Traditional design.",38.50,"Pitchers","Clay","Natural",18,12,10,1.4,"images/clay_pitcher.jpg","Natural unglazed clay pitcher",9,false,false,false,false,true,"Michael Torres","2024-08-17","POT-PIT-015"
1 id name description price category material color dimensions_height_cm dimensions_width_cm dimensions_depth_cm weight_kg image_url image_alt stock_quantity featured glazed dishwasher_safe microwave_safe handmade artist date_created sku
2 1 Classic Blue Mug Handcrafted ceramic mug with deep blue glaze. Perfect for your morning coffee or evening tea. 24.99 Mugs Stoneware Blue 10 8 8 0.35 images/blue_mug.jpg Classic blue ceramic mug 15 true true true true true Sarah Chen 2024-08-15 POT-MUG-001
3 2 Rustic Brown Bowl Large serving bowl with earthy brown finish. Ideal for salads, pasta, or fruit. 42.50 Bowls Earthenware Brown 8 25 25 1.2 images/brown_bowl.jpg Rustic brown ceramic bowl 8 true true true false true Michael Torres 2024-08-12 POT-BOW-002
4 3 Elegant White Vase Minimalist white vase with smooth finish. Perfect for fresh flowers or as decorative piece. 68.00 Vases Porcelain White 20 12 12 0.8 images/white_vase.jpg Elegant white porcelain vase 5 true true false false true Sarah Chen 2024-08-20 POT-VAS-003
5 4 Terracotta Plant Pot Traditional terracotta pot with drainage hole. Great for indoor and outdoor plants. 18.75 Plant Pots Terracotta Terra Cotta 15 16 16 1.5 images/terracotta_pot.jpg Traditional terracotta plant pot 25 false false false false true James Wilson 2024-08-10 POT-PLT-004
6 5 Green Tea Set Complete tea set including teapot and 4 cups with beautiful green glaze. 125.00 Tea Sets Stoneware Green 12 18 18 2.1 images/green_tea_set.jpg Green glazed ceramic tea set 3 true true true true true Sarah Chen 2024-08-25 POT-TEA-005
7 6 Artisan Dinner Plate Hand-thrown dinner plate with speckled cream glaze. Part of our signature collection. 32.00 Plates Stoneware Cream 2.5 26 26 0.9 images/cream_plate.jpg Artisan cream speckled dinner plate 12 false true true true true Michael Torres 2024-08-18 POT-PLT-006
8 7 Cobalt Blue Pitcher Water pitcher with striking cobalt blue finish. Holds 1.5 liters. 55.25 Pitchers Stoneware Cobalt Blue 22 15 12 1.8 images/cobalt_pitcher.jpg Cobalt blue ceramic water pitcher 6 true true true false true Elena Rodriguez 2024-08-22 POT-PIT-007
9 8 Sage Green Planter Modern planter with drainage and saucer. Perfect for herbs or small plants. 29.99 Plant Pots Stoneware Sage Green 12 14 14 1.1 images/sage_planter.jpg Sage green ceramic planter with saucer 18 false true false false true James Wilson 2024-08-14 POT-PLN-008
10 9 Midnight Black Vase Dramatic black vase with matte finish. Makes a bold statement piece. 72.50 Vases Stoneware Black 25 10 10 1.3 images/black_vase.jpg Midnight black matte ceramic vase 4 true true false false true Elena Rodriguez 2024-08-28 POT-VAS-009
11 10 Sunshine Yellow Mug Cheerful yellow mug to brighten your day. Comfortable handle and perfect size. 22.50 Mugs Earthenware Yellow 9.5 9 9 0.4 images/yellow_mug.jpg Sunshine yellow ceramic mug 20 false true true true true Michael Torres 2024-08-16 POT-MUG-010
12 11 Ocean Wave Bowl Small bowl with blue and white wave pattern. Perfect for soup or cereal. 28.75 Bowls Porcelain Blue/White 7 15 15 0.6 images/wave_bowl.jpg Ocean wave pattern ceramic bowl 10 false true true true true Sarah Chen 2024-08-19 POT-BOW-011
13 12 Copper Glazed Mug Unique copper-colored glaze creates stunning metallic finish. 35.00 Mugs Stoneware Copper 11 8.5 8.5 0.45 images/copper_mug.jpg Copper glazed ceramic mug 7 true true false false true Elena Rodriguez 2024-08-26 POT-MUG-012
14 13 Garden Herb Planter Set Set of 3 small planters perfect for kitchen herbs. Includes labels. 45.00 Plant Pots Terracotta Natural 8 10 10 0.8 images/herb_planter_set.jpg Set of 3 terracotta herb planters 12 false false false false true James Wilson 2024-08-11 POT-HRB-013
15 14 Royal Purple Serving Dish Large oval serving dish with rich purple glaze. Perfect for special occasions. 58.25 Serving Dishes Stoneware Purple 5 30 20 1.6 images/purple_serving_dish.jpg Royal purple ceramic serving dish 6 true true true false true Sarah Chen 2024-08-23 POT-SRV-014
16 15 Natural Clay Pitcher Unglazed clay pitcher with rustic charm. Traditional design. 38.50 Pitchers Clay Natural 18 12 10 1.4 images/clay_pitcher.jpg Natural unglazed clay pitcher 9 false false false false true Michael Torres 2024-08-17 POT-PIT-015

1258
script.js Normal file
View File

File diff suppressed because it is too large Load Diff

1169
styles.css Normal file
View File

File diff suppressed because it is too large Load Diff