olipassey/web-bakery
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 23:46:54 +01:00
commit 7fa743760d
11 changed files with 4856 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
EMAILJS_SETUP.md Normal file
View File

@@ -0,0 +1,421 @@
# EmailJS Setup Guide for Sweet Dreams Bakery
This guide will walk you through setting up EmailJS to enable professional email functionality for order processing, contact forms, and customer communications.
## 📧 What is EmailJS?
EmailJS allows you to send emails directly from your frontend application without needing a backend server. It's perfect for:
- Order confirmations
- Contact form submissions
- Newsletter subscriptions
- Business notifications
## 🚀 Quick Setup (5 minutes)
### **Step 1: Create EmailJS Account**
1. Go to [emailjs.com](https://www.emailjs.com)
2. Click "Sign Up" and create a free account
3. Verify your email address
4. Log in to your EmailJS dashboard
### **Step 2: Set Up Email Service**
1. **Add Email Service:**
- In your EmailJS dashboard, click "Email Services"
- Click "Add New Service"
- Choose your email provider:
- **Gmail** (recommended for personal/small business)
- **Outlook/Hotmail**
- **Yahoo Mail**
- **Other SMTP services**
2. **Configure Gmail Service (Most Common):**
- Select "Gmail"
- Click "Connect Account"
- Sign in with your Gmail account
- Allow EmailJS permissions
- Your service will be created with an ID like `service_abc123`
3. **Configure Custom SMTP (Business Email):**
- Select "Other"
- Enter your SMTP settings:
```
SMTP Server: mail.yourdomain.com
Port: 587 (or 465 for SSL)
Username: orders@yourbakery.com
Password: your-email-password
```
- Test the connection
- Save the service
### **Step 3: Create Email Templates**
You'll need to create these templates in your EmailJS dashboard:
#### **Template 1: Customer Order Confirmation**
1. Go to "Email Templates" → "Create New Template"
2. Template Name: `Customer Order Confirmation`
3. Template ID: `customer_order_confirmation` (you'll need this)
4. Configure the template (see detailed template code below)
#### **Template 2: Business Order Notification**
1. Create another template
2. Template Name: `Business Order Notification`
3. Template ID: `business_order_notification`
4. Configure for internal notifications
#### **Template 3: Contact Form**
1. Create a third template
2. Template Name: `Contact Form Inquiry`
3. Template ID: `contact_form_inquiry`
4. For general inquiries and consultations
### **Step 4: Get Your Credentials**
1. **Service ID**: Found in Email Services (e.g., `service_abc123`)
2. **Template IDs**: From your created templates
3. **User ID (Public Key)**: Account → API Keys → Public Key
### **Step 5: Update Website Configuration**
Edit `script.js` and update the EmailJS configuration:
```javascript
// Update these values with your actual EmailJS credentials
const emailJSConfig = {
serviceID: 'service_abc123', // Your service ID
templateID: 'customer_order_confirmation', // Your main template ID
userID: 'user_xyz789' // Your public key
};
```
## 📝 Email Template Configurations
### **Customer Order Confirmation Template**
**Template Settings:**
- **To Email**: `{{to_email}}`
- **From Name**: Sweet Dreams Bakery
- **From Email**: orders@sweetdreamsbakery.com (or your business email)
- **Subject**: Order Confirmation - Thank You {{to_name}}!
**Email Template Body** (copy this HTML):
```html
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; }
.header { background: linear-gradient(135deg, #F4B8C3, #E8A2AE); padding: 30px; text-align: center; }
.header h1 { color: white; margin: 0; font-size: 28px; }
.content { padding: 30px; background: #fff; }
.order-details { background: #FAF8F5; padding: 20px; border-radius: 8px; margin: 20px 0; }
.footer { background: #4A2C2A; color: white; padding: 20px; text-align: center; }
.btn { background: #8B4B73; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block; margin: 10px 0; }
</style>
</head>
<body>
<div class="header">
<h1>🎂 Order Confirmation</h1>
<p>Thank you for choosing Sweet Dreams Bakery!</p>
</div>
<div class="content">
<h2>Hello {{to_name}}!</h2>
<p>We've received your order and we're excited to create something special for you! Here are your order details:</p>
<div class="order-details">
<h3>📋 Order Summary</h3>
<p><strong>Order Number:</strong> {{order_number}}</p>
<p><strong>Event Date:</strong> {{event_date}}</p>
<p><strong>Delivery Method:</strong> {{delivery_method}}</p>
<h4>Items Ordered:</h4>
<pre>{{order_items}}</pre>
<p><strong>Total Amount:</strong> ${{order_total}}</p>
{{#special_requests}}
<p><strong>Special Requests:</strong> {{special_requests}}</p>
{{/special_requests}}
</div>
<h3>🎯 What's Next?</h3>
<ul>
<li><strong>Within 24 hours:</strong> We'll contact you to confirm details</li>
<li><strong>Design consultation:</strong> Discuss any customizations</li>
<li><strong>Payment arrangement:</strong> Flexible payment options</li>
<li><strong>Final confirmation:</strong> Before we start baking!</li>
</ul>
<p>Have questions? Reply to this email or call us at <strong>(555) 123-CAKE</strong></p>
<a href="#contact" class="btn">Contact Us</a>
</div>
<div class="footer">
<p><strong>Sweet Dreams Bakery</strong><br>
123 Baker Street, Sweet Valley, CA 90210<br>
orders@sweetdreamsbakery.com | (555) 123-CAKE</p>
<p>Follow us: Facebook | Instagram | Pinterest</p>
</div>
</body>
</html>
```
### **Business Order Notification Template**
**Template Settings:**
- **To Email**: orders@sweetdreamsbakery.com (your business email)
- **From Name**: Website Orders
- **Subject**: 🚨 NEW ORDER: {{customer_name}} - ${{order_total}}
**Email Template Body:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; }
.alert { background: #F4B8C3; padding: 20px; border-radius: 8px; }
.customer-info { background: #FAF8F5; padding: 15px; border-radius: 5px; margin: 15px 0; }
.order-details { background: #fff; border: 2px solid #E8A2AE; padding: 15px; border-radius: 5px; }
</style>
</head>
<body>
<div class="alert">
<h1>🎂 NEW CAKE ORDER RECEIVED!</h1>
<p><strong>Order Time:</strong> {{order_time}}</p>
</div>
<div class="customer-info">
<h2>👤 Customer Information</h2>
<p><strong>Name:</strong> {{customer_name}}</p>
<p><strong>Email:</strong> {{customer_email}}</p>
<p><strong>Phone:</strong> {{customer_phone}}</p>
</div>
<div class="order-details">
<h2>🛍️ Complete Order Details</h2>
<pre>{{order_details}}</pre>
</div>
<p><strong>⚡ Action Required:</strong> Contact customer within 24 hours to confirm order details and arrange payment.</p>
</body>
</html>
```
### **Contact Form Template**
**Template Settings:**
- **To Email**: info@sweetdreamsbakery.com
- **From Name**: {{from_name}}
- **From Email**: {{from_email}}
- **Subject**: Website Inquiry: {{inquiry_type}}
**Email Template Body:**
```html
<!DOCTYPE html>
<html>
<body style="font-family: Arial, sans-serif; line-height: 1.6;">
<h2>🍰 New Website Inquiry</h2>
<p><strong>From:</strong> {{from_name}} ({{from_email}})</p>
<p><strong>Phone:</strong> {{phone}}</p>
<p><strong>Inquiry Type:</strong> {{inquiry_type}}</p>
<h3>Message:</h3>
<div style="background: #FAF8F5; padding: 15px; border-radius: 5px;">
{{message}}
</div>
<p><em>Sent from Sweet Dreams Bakery website contact form</em></p>
</body>
</html>
```
## ⚙️ Advanced Configuration
### **Multiple Template Setup**
If you want different templates for different order types:
```javascript
// In script.js, you can configure multiple templates
const emailTemplates = {
customerConfirmation: 'customer_order_confirmation',
businessNotification: 'business_order_notification',
contactInquiry: 'contact_form_inquiry',
newsletterWelcome: 'newsletter_welcome'
};
// Use different templates based on context
await emailjs.send(
emailJSConfig.serviceID,
emailTemplates.customerConfirmation,
emailData
);
```
### **Custom Domain Email**
For professional appearance, use your own domain:
1. **Set up business email** (e.g., orders@yourbakery.com)
2. **Configure SMTP** in EmailJS with your business email settings
3. **Update templates** to use your business email as sender
### **Email Deliverability**
To ensure emails don't go to spam:
1. **SPF Record**: Add EmailJS to your domain's SPF record
2. **DKIM**: Enable DKIM signing in EmailJS settings
3. **Reply-To**: Set up proper reply-to addresses
4. **Test thoroughly**: Send test emails to different providers
## 🧪 Testing Your Setup
### **Test Mode (No Real Emails)**
The website includes demo mode when EmailJS isn't configured:
```javascript
// This runs when EmailJS credentials aren't set up
console.log('Demo mode: Order would be processed via EmailJS');
showNotification('Demo mode: Order would be sent via EmailJS', 'info');
```
### **Send Test Emails**
1. **Use EmailJS Test Mode:**
- Go to your EmailJS dashboard
- Select your template
- Click "Test Template"
- Fill in sample data
- Send test email
2. **Test Through Website:**
- Fill out contact form with your email
- Place a test order
- Check both customer and business emails
### **Debug Common Issues**
```javascript
// Add this to script.js for debugging
emailjs.send(serviceID, templateID, emailData)
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
}, function(error) {
console.log('FAILED...', error);
// Common error codes:
// 400: Bad request (check template variables)
// 403: Forbidden (check service configuration)
// 412: Template not found
});
```
## 🔒 Security Best Practices
### **Public Key Security**
- EmailJS public keys are safe to include in frontend code
- They only allow sending emails, not accessing your account
- Rate limiting is automatically applied
### **Template Validation**
- Always validate form data before sending
- Use template variables to prevent email injection
- Never include sensitive data in email templates
### **Spam Prevention**
- Implement client-side rate limiting
- Add honeypot fields to forms
- Consider adding basic captcha for high-traffic sites
## 📊 Monitoring & Analytics
### **EmailJS Dashboard**
Monitor your email activity:
- **Sent emails count**
- **Success/failure rates**
- **Monthly usage limits**
- **Template performance**
### **Usage Limits**
**Free Plan:**
- 200 emails/month
- Basic templates
- Standard support
**Paid Plans:**
- Higher email limits
- Advanced features
- Priority support
## ❓ Troubleshooting
### **Common Issues**
**"Service not found" Error:**
```javascript
// Check your service ID is correct
const emailJSConfig = {
serviceID: 'service_XXXXXXX', // Must match EmailJS dashboard
// ...
};
```
**"Template not found" Error:**
```javascript
// Verify template ID matches exactly
templateID: 'customer_order_confirmation', // Case-sensitive!
```
**Emails going to spam:**
- Check sender email reputation
- Verify SPF/DKIM setup
- Use professional from addresses
- Avoid spam trigger words
**Template variables not working:**
```javascript
// Ensure variable names match exactly
const emailData = {
to_name: customerName, // Must match {{to_name}} in template
to_email: customerEmail, // Must match {{to_email}} in template
// ...
};
```
### **Getting Help**
1. **EmailJS Documentation**: [docs.emailjs.com](https://www.emailjs.com/docs/)
2. **EmailJS Support**: Available through your dashboard
3. **Community Forums**: Stack Overflow with `emailjs` tag
## 🎉 Success!
Once configured, your bakery website will:
- ✅ Send professional order confirmations to customers
- ✅ Notify you immediately of new orders
- ✅ Handle contact form inquiries automatically
- ✅ Support newsletter subscriptions
- ✅ Work without any backend infrastructure
**Your customers will receive beautiful, professional emails that match your bakery's branding!**
---
*Need help? Check the troubleshooting section above or refer to the main README.md file.*

1023
EMAILJS_TEMPLATES.md Normal file
View File

File diff suppressed because it is too large Load Diff

345
README.md Normal file
View File

@@ -0,0 +1,345 @@
# Sweet Dreams Bakery - E-Commerce Website
A professional, fully-featured bakery e-commerce website built with pure HTML, CSS, and JavaScript. Features CSV-based product management, EmailJS integration for order processing, and a complete shopping cart system.
![Sweet Dreams Bakery](images/hero-cake.jpg)
## 🌟 Features
### **Frontend-Only Architecture**
- Pure HTML5, CSS3, and JavaScript (ES6+)
- No backend required - runs entirely in the browser
- CSV-based product inventory for easy management
- EmailJS integration for professional order processing
- Local storage for cart persistence
### **E-Commerce Functionality**
- ✅ Dynamic product catalog loaded from CSV
- ✅ Advanced product filtering and search
- ✅ Shopping cart with quantity management
- ✅ Professional checkout process
- ✅ Email order confirmation system
- ✅ Stock quantity tracking
- ✅ Custom product options support
### **Professional Design**
- ✅ Bakery-themed color palette and typography
- ✅ Responsive design (mobile-first approach)
- ✅ Smooth animations and transitions
- ✅ Professional product photography integration
- ✅ Accessible and SEO-friendly structure
### **Business Features**
- ✅ Custom cake consultation forms
- ✅ Wedding cake specialization
- ✅ Dietary options support (gluten-free, vegan)
- ✅ Event date scheduling
- ✅ Pickup and delivery options
- ✅ Baker portfolio and process showcase
## 🚀 Quick Start
### **1. Download and Setup**
```bash
# Clone or download the repository
git clone <repository-url> sweet-dreams-bakery
cd sweet-dreams-bakery
# Or simply download and extract the ZIP file
```
### **2. Configure EmailJS (Optional)**
1. Follow the detailed guide in [`EMAILJS_SETUP.md`](EMAILJS_SETUP.md)
2. Update the configuration in `script.js`:
```javascript
const emailJSConfig = {
serviceID: 'your_service_id',
templateID: 'your_template_id',
userID: 'your_user_id'
};
```
### **3. Start Local Server**
Choose one of these methods to run the website locally:
**Option A: Python HTTP Server**
```bash
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000
# Then visit: http://localhost:8000
```
**Option B: Node.js HTTP Server**
```bash
# Install http-server globally
npm install -g http-server
# Run server
http-server -p 8000
# Then visit: http://localhost:8000
```
**Option C: VS Code Live Server**
1. Install "Live Server" extension in VS Code
2. Right-click `index.html` → "Open with Live Server"
## 📁 Project Structure
```
sweet-dreams-bakery/
├── index.html # Main website file
├── styles.css # Complete responsive styling
├── script.js # All interactive functionality
├── cake_inventory.csv # Product database (20 sample cakes)
├── images/ # Product images directory
│ ├── hero-cake.jpg # Main hero image
│ ├── baker-portrait.jpg # About section image
│ ├── gallery-*.jpg # Portfolio gallery images
│ └── product-*.jpg # Individual product images
├── README.md # This file
├── EMAILJS_SETUP.md # EmailJS configuration guide
├── EMAILJS_TEMPLATES.md # Email template code
└── sw.js # Service worker (optional)
```
## 🛍️ Product Management
### **Adding New Products**
Edit `cake_inventory.csv` with the following columns:
| Column | Description | Example |
|--------|-------------|---------|
| `id` | Unique product ID | `21` |
| `name` | Product name | `"Summer Berry Tart"` |
| `description` | Product description | `"Fresh seasonal berries..."` |
| `price` | Price in dollars | `45.99` |
| `category` | Product category | `"Specialty Desserts"` |
| `size_inches` | Cake diameter | `8` |
| `serves_people` | Number of servings | `10` |
| `weight_kg` | Weight in kilograms | `1.5` |
| `flavor` | Primary flavor | `"Mixed Berry"` |
| `image_url` | Image path/URL | `"images/berry-tart.jpg"` |
| `image_alt` | Alt text for accessibility | `"Fresh berry tart with cream"` |
| `stock_quantity` | Available quantity | `5` |
| `featured` | Featured product flag | `true/false` |
| `custom_available` | Custom orders available | `true/false` |
| `dietary_options` | Special dietary info | `"gluten-free available"` |
| `baker_name` | Baker who creates it | `"Sarah Mitchell"` |
| `date_created` | Creation date | `"2024-01-15"` |
| `sku` | Stock keeping unit | `"BERRY-TART-021"` |
| `occasion_type` | Suitable occasions | `"summer, birthday"` |
### **Product Categories**
- Wedding Cakes
- Birthday Cakes
- Celebration Cakes
- Cupcakes & Minis
- Specialty Desserts
- Seasonal Items
### **Image Requirements**
- **Recommended size**: 1000x1000px minimum
- **Format**: JPG, PNG, or WebP
- **Aspect ratio**: Square (1:1) preferred
- **File naming**: Descriptive names (e.g., `chocolate-wedding-cake.jpg`)
- **Alt text**: Always include descriptive alt text for accessibility
## ⚙️ Configuration
### **EmailJS Configuration**
See [`EMAILJS_SETUP.md`](EMAILJS_SETUP.md) for detailed setup instructions.
### **Color Customization**
Update CSS variables in `styles.css`:
```css
:root {
--color-primary: #F4B8C3; /* Soft pink frosting */
--color-secondary: #FFF5E6; /* Cream/vanilla */
--color-accent: #8B4B73; /* Rich berry */
--color-chocolate: #4A2C2A; /* Dark chocolate */
/* ... more variables */
}
```
### **Typography Customization**
Change fonts by updating the Google Fonts import in `index.html`:
```html
<link href="https://fonts.googleapis.com/css2?family=YourFont:wght@400;500;600;700&display=swap" rel="stylesheet">
```
## 🎨 Customization Guide
### **Branding**
1. **Logo**: Replace the cake icon in the header with your logo
2. **Business Name**: Update "Sweet Dreams Bakery" throughout the site
3. **Contact Information**: Update phone, email, and address in the contact section
4. **Social Media**: Add your social media links in the footer
### **Content**
1. **About Section**: Replace baker information and story
2. **Hero Message**: Update the main headline and description
3. **Process Steps**: Customize the 4-step process description
4. **Gallery Images**: Add photos of your actual work
### **Functionality**
1. **Payment Processing**: The system uses a "pay later" approach - collect orders first, then arrange payment
2. **Delivery Areas**: Customize delivery options in the checkout form
3. **Lead Times**: Adjust minimum order advance notice requirements
4. **Business Hours**: Update operating hours in the contact section
## 📱 Responsive Design
The website is fully responsive with breakpoints at:
- **Mobile**: 480px and below
- **Tablet**: 768px and below
- **Desktop**: 1024px and above
- **Large screens**: 1200px and above
## 🔧 Browser Compatibility
**Supported Browsers:**
- Chrome 60+ ✅
- Firefox 55+ ✅
- Safari 12+ ✅
- Edge 79+ ✅
**Required Features:**
- CSS Grid and Flexbox
- JavaScript ES6+ (arrow functions, async/await)
- Local Storage API
- Fetch API
## 🚀 Deployment Options
### **Static Hosting Services**
Perfect for this frontend-only website:
**Netlify (Recommended)**
1. Drag and drop your project folder to [netlify.com](https://netlify.com)
2. Automatic HTTPS and CDN included
3. Custom domain support available
**Vercel**
1. Sign up at [vercel.com](https://vercel.com)
2. Import from Git or upload files
3. Instant deployment with preview URLs
**GitHub Pages**
1. Create a GitHub repository
2. Enable GitHub Pages in repository settings
3. Upload your files to the repository
### **Traditional Web Hosting**
Upload all files to your web hosting provider's public directory (usually `public_html` or `www`).
## 🛡️ Security & Privacy
### **Data Handling**
- All form data is processed client-side
- Cart data stored in browser's local storage
- No personal data stored on servers
- EmailJS handles email transmission securely
### **HTTPS Requirements**
- Required for production deployment
- Most static hosting services provide this automatically
- Necessary for some browser features to work properly
## 🐛 Troubleshooting
### **Products Not Loading**
1. Check browser console for errors
2. Ensure `cake_inventory.csv` is in the root directory
3. Verify CSV format matches expected columns
4. Check file permissions and CORS settings
### **EmailJS Not Working**
1. Verify EmailJS configuration in `script.js`
2. Check EmailJS dashboard for service status
3. Ensure email templates are properly configured
4. Review browser console for API errors
### **Images Not Displaying**
1. Check image file paths in CSV
2. Verify images exist in the `images/` directory
3. Ensure proper file extensions (.jpg, .png, .webp)
4. Check browser console for 404 errors
### **Cart Not Persisting**
1. Ensure local storage is enabled in browser
2. Check for JavaScript errors in console
3. Verify domain consistency (don't mix http/https)
## 📈 Performance Optimization
### **Image Optimization**
1. Compress images before uploading
2. Use appropriate formats (WebP when supported)
3. Implement lazy loading (already included)
4. Consider using a CDN for images
### **Code Optimization**
1. Minify CSS and JavaScript for production
2. Enable gzip compression on server
3. Use browser caching headers
4. Consider implementing a service worker
## 🔄 Updates & Maintenance
### **Regular Tasks**
1. **Update Product Inventory**: Modify `cake_inventory.csv` as needed
2. **Add New Images**: Upload to `images/` directory
3. **Update Content**: Modify HTML content for seasonal changes
4. **Monitor Orders**: Check EmailJS dashboard regularly
### **Seasonal Updates**
1. Update featured products for holidays
2. Add seasonal items to inventory
3. Update hero images for special occasions
4. Modify color scheme for seasonal themes
## 📧 Email Templates
See [`EMAILJS_TEMPLATES.md`](EMAILJS_TEMPLATES.md) for:
- Customer order confirmation template
- Business notification template
- Newsletter subscription template
- Contact form auto-reply template
## 🤝 Support & Contribution
### **Getting Help**
1. Check this README first
2. Review browser console for errors
3. Verify EmailJS configuration
4. Check CSV file format
### **Feature Requests**
This is a complete, production-ready bakery website. Common customization requests:
- Online payment integration
- Inventory management system
- Customer account system
- Advanced booking calendar
## 📄 License
This project is provided as-is for educational and commercial use. You may modify and distribute it according to your needs.
## 🎯 Credits
- **Design**: Custom bakery-themed design system
- **Icons**: Font Awesome 6.4.0
- **Fonts**: Google Fonts (Playfair Display + Inter)
- **Images**: Unsplash (placeholder images)
- **Email Service**: EmailJS
---
**Made with ❤️ for Sweet Dreams Bakery**
For questions or support, please refer to the documentation files included in this project.

21
cake_inventory.csv Normal file
View File

@@ -0,0 +1,21 @@
id,name,description,price,category,size_inches,serves_people,weight_kg,flavor,image_url,image_alt,stock_quantity,featured,custom_available,dietary_options,baker_name,date_created,sku,occasion_type
1,Classic Vanilla Wedding Cake,"Elegant three-tier vanilla sponge with buttercream roses and pearl details. Perfect centerpiece for your special day.",299.99,Wedding Cakes,10,50,3.5,Vanilla,https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Three-tier vanilla wedding cake with white buttercream roses,2,true,true,"gluten-free available, vegan available",Sarah Mitchell,2024-01-15,WED-VAN-001,wedding
2,Chocolate Decadence Birthday Cake,"Rich chocolate cake layered with dark chocolate ganache and fresh berries. A chocolate lover's dream.",89.99,Birthday Cakes,8,12,2.2,Dark Chocolate,https://images.unsplash.com/photo-1606313564200-e75d5e30476c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Dark chocolate birthday cake with ganache and berries,5,true,true,"gluten-free available",Sarah Mitchell,2024-01-20,BDAY-CHOC-002,birthday
3,Red Velvet Anniversary Cake,"Moist red velvet layers with cream cheese frosting and elegant white chocolate decorations.",125.00,Celebration Cakes,9,18,2.8,Red Velvet,https://images.unsplash.com/photo-1621303837174-89787a7d4729?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Red velvet anniversary cake with cream cheese frosting,3,false,true,"none available",Sarah Mitchell,2024-02-01,ANNIV-RV-003,anniversary
4,Lemon Bliss Cupcakes (Dozen),"Fresh lemon cupcakes topped with lemon buttercream and candied lemon zest. Light and refreshing.",36.00,Cupcakes & Minis,3,12,0.8,Lemon,https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Dozen lemon cupcakes with buttercream frosting,15,false,false,"gluten-free available, vegan available",Emma Thompson,2024-02-10,CUP-LEM-004,any
5,Strawberry Shortcake Supreme,"Traditional vanilla sponge layered with fresh strawberries and whipped cream. Summer perfection.",75.50,Specialty Desserts,7,8,1.5,Vanilla Berry,https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Strawberry shortcake with fresh berries and cream,4,true,false,"gluten-free available",Sarah Mitchell,2024-02-15,SPEC-STRAW-005,summer
6,Custom Graduation Cake,"Personalized graduation cake with school colors and custom message. Choice of vanilla, chocolate, or funfetti.",95.00,Celebration Cakes,8,15,2.1,Custom Choice,https://images.unsplash.com/photo-1571115764595-644a1f56a55c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Custom graduation cake with cap and diploma decorations,0,false,true,"gluten-free available, vegan available",Emma Thompson,2024-03-01,GRAD-CUST-006,graduation
7,Funfetti Birthday Surprise,"Colorful funfetti cake with vanilla buttercream and rainbow sprinkles. Perfect for kids' parties.",65.00,Birthday Cakes,6,10,1.4,Funfetti,https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Funfetti birthday cake with colorful sprinkles,8,false,true,"gluten-free available",Emma Thompson,2024-03-05,BDAY-FUN-007,birthday
8,Elegant Rose Garden Wedding Cake,"Four-tier masterpiece with hand-piped sugar roses and cascading pearl details.",450.00,Wedding Cakes,12,75,5.2,Vanilla Almond,https://images.unsplash.com/photo-1535254973040-607b474cb50d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Four-tier wedding cake with sugar roses and pearls,1,true,true,"vegan available",Sarah Mitchell,2024-03-10,WED-ROSE-008,wedding
9,Carrot Cake with Cream Cheese,"Moist spiced carrot cake with walnuts and smooth cream cheese frosting. A classic favorite.",55.00,Specialty Desserts,6,8,1.6,Spiced Carrot,https://images.unsplash.com/photo-1621303837174-89787a7d4729?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Carrot cake slice with cream cheese frosting and walnuts,6,false,false,"gluten-free available",Sarah Mitchell,2024-03-15,SPEC-CAR-009,any
10,Mini Cheesecake Assortment (12),"Assorted mini cheesecakes: classic, chocolate, strawberry, and blueberry flavors.",48.00,Cupcakes & Minis,2,12,1.0,Assorted Cheesecake,https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Assortment of twelve mini cheesecakes in various flavors,10,false,false,"gluten-free available",Emma Thompson,2024-03-20,MINI-CHEESE-010,any
11,Chocolate Ganache Tart,"Rich chocolate tart with smooth ganache filling and gold leaf accents. Sophisticated indulgence.",42.00,Specialty Desserts,5,6,0.9,Dark Chocolate,https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Dark chocolate ganache tart with gold leaf decoration,7,false,false,"gluten-free available, vegan available",Sarah Mitchell,2024-03-25,SPEC-TART-011,any
12,Seasonal Pumpkin Spice Cake,"Warm pumpkin spice cake with cinnamon cream cheese frosting and candied pecans.",70.00,Seasonal Items,7,10,1.8,Pumpkin Spice,https://images.unsplash.com/photo-1571115764595-644a1f56a55c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Pumpkin spice cake with cinnamon frosting and pecans,3,false,true,"gluten-free available",Emma Thompson,2024-04-01,SEAS-PUMP-012,fall
13,Baby Shower Buttercream Cake,"Delicate pastel cake with buttercream flowers and baby-themed decorations.",85.00,Celebration Cakes,8,12,2.0,Vanilla Strawberry,https://images.unsplash.com/photo-1488477304112-4944851de03d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Pink and blue baby shower cake with buttercream flowers,4,false,true,"gluten-free available, vegan available",Emma Thompson,2024-04-05,BABY-SHOW-013,baby shower
14,Tiramisu Layer Cake,"Italian-inspired coffee-soaked layers with mascarpone cream and cocoa dusting.",95.00,Specialty Desserts,8,12,2.3,Coffee Mascarpone,https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Tiramisu layer cake with mascarpone and coffee flavoring,2,true,false,"none available",Sarah Mitchell,2024-04-10,SPEC-TIRA-014,any
15,Valentine's Heart Cake,"Heart-shaped red velvet cake with romantic rose decorations and gold accents.",78.00,Seasonal Items,8,10,1.9,Red Velvet,https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Heart-shaped red velvet cake with roses and gold details,5,false,true,"gluten-free available",Sarah Mitchell,2024-04-15,SEAS-VAL-015,valentine
16,Coconut Cream Paradise,"Tropical coconut cake layers with coconut cream filling and toasted coconut flakes.",68.00,Specialty Desserts,7,10,1.7,Coconut,https://images.unsplash.com/photo-1464349095431-e9a21285b5f3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Coconut cake with cream filling and toasted coconut,6,false,false,"gluten-free available, vegan available",Emma Thompson,2024-04-20,SPEC-COC-016,any
17,Birthday Number Cake,"Custom number-shaped cake for milestone birthdays. Choice of flavors and decorations.",120.00,Birthday Cakes,10,20,2.5,Custom Choice,https://images.unsplash.com/photo-1557925923-cd4648e211a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Large number-shaped birthday cake with custom decorations,1,false,true,"gluten-free available, vegan available",Sarah Mitchell,2024-04-25,BDAY-NUM-017,birthday
18,Luxury Chocolate Tower,"Five-tier chocolate masterpiece with gold details and fresh berries. Ultimate indulgence.",580.00,Wedding Cakes,14,100,7.8,Premium Chocolate,https://images.unsplash.com/photo-1464349095431-e9a21285b5f3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Five-tier luxury chocolate wedding cake with gold and berries,1,true,true,"gluten-free available",Sarah Mitchell,2024-05-01,WED-LUX-018,wedding
19,Spring Lemon Elderflower,"Light lemon cake with elderflower buttercream and fresh flower decorations.",82.00,Seasonal Items,7,12,1.8,Lemon Elderflower,https://images.unsplash.com/photo-1486427944299-d1955d23e34d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Spring cake with lemon elderflower flavor and fresh flowers,4,true,true,"gluten-free available, vegan available",Emma Thompson,2024-05-05,SEAS-SPRING-019,spring
20,Macaron Tower Centerpiece,"Elegant tower of assorted French macarons in pastel colors. Perfect wedding alternative.",185.00,Wedding Cakes,6,40,2.0,Assorted Macaron,https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80,Elegant tower of colorful French macarons,2,false,false,"gluten-free available",Emma Thompson,2024-05-10,WED-MAC-020,wedding
1 id name description price category size_inches serves_people weight_kg flavor image_url image_alt stock_quantity featured custom_available dietary_options baker_name date_created sku occasion_type
2 1 Classic Vanilla Wedding Cake Elegant three-tier vanilla sponge with buttercream roses and pearl details. Perfect centerpiece for your special day. 299.99 Wedding Cakes 10 50 3.5 Vanilla https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Three-tier vanilla wedding cake with white buttercream roses 2 true true gluten-free available, vegan available Sarah Mitchell 2024-01-15 WED-VAN-001 wedding
3 2 Chocolate Decadence Birthday Cake Rich chocolate cake layered with dark chocolate ganache and fresh berries. A chocolate lover's dream. 89.99 Birthday Cakes 8 12 2.2 Dark Chocolate https://images.unsplash.com/photo-1606313564200-e75d5e30476c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Dark chocolate birthday cake with ganache and berries 5 true true gluten-free available Sarah Mitchell 2024-01-20 BDAY-CHOC-002 birthday
4 3 Red Velvet Anniversary Cake Moist red velvet layers with cream cheese frosting and elegant white chocolate decorations. 125.00 Celebration Cakes 9 18 2.8 Red Velvet https://images.unsplash.com/photo-1621303837174-89787a7d4729?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Red velvet anniversary cake with cream cheese frosting 3 false true none available Sarah Mitchell 2024-02-01 ANNIV-RV-003 anniversary
5 4 Lemon Bliss Cupcakes (Dozen) Fresh lemon cupcakes topped with lemon buttercream and candied lemon zest. Light and refreshing. 36.00 Cupcakes & Minis 3 12 0.8 Lemon https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Dozen lemon cupcakes with buttercream frosting 15 false false gluten-free available, vegan available Emma Thompson 2024-02-10 CUP-LEM-004 any
6 5 Strawberry Shortcake Supreme Traditional vanilla sponge layered with fresh strawberries and whipped cream. Summer perfection. 75.50 Specialty Desserts 7 8 1.5 Vanilla Berry https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Strawberry shortcake with fresh berries and cream 4 true false gluten-free available Sarah Mitchell 2024-02-15 SPEC-STRAW-005 summer
7 6 Custom Graduation Cake Personalized graduation cake with school colors and custom message. Choice of vanilla, chocolate, or funfetti. 95.00 Celebration Cakes 8 15 2.1 Custom Choice https://images.unsplash.com/photo-1571115764595-644a1f56a55c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Custom graduation cake with cap and diploma decorations 0 false true gluten-free available, vegan available Emma Thompson 2024-03-01 GRAD-CUST-006 graduation
8 7 Funfetti Birthday Surprise Colorful funfetti cake with vanilla buttercream and rainbow sprinkles. Perfect for kids' parties. 65.00 Birthday Cakes 6 10 1.4 Funfetti https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Funfetti birthday cake with colorful sprinkles 8 false true gluten-free available Emma Thompson 2024-03-05 BDAY-FUN-007 birthday
9 8 Elegant Rose Garden Wedding Cake Four-tier masterpiece with hand-piped sugar roses and cascading pearl details. 450.00 Wedding Cakes 12 75 5.2 Vanilla Almond https://images.unsplash.com/photo-1535254973040-607b474cb50d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Four-tier wedding cake with sugar roses and pearls 1 true true vegan available Sarah Mitchell 2024-03-10 WED-ROSE-008 wedding
10 9 Carrot Cake with Cream Cheese Moist spiced carrot cake with walnuts and smooth cream cheese frosting. A classic favorite. 55.00 Specialty Desserts 6 8 1.6 Spiced Carrot https://images.unsplash.com/photo-1621303837174-89787a7d4729?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Carrot cake slice with cream cheese frosting and walnuts 6 false false gluten-free available Sarah Mitchell 2024-03-15 SPEC-CAR-009 any
11 10 Mini Cheesecake Assortment (12) Assorted mini cheesecakes: classic, chocolate, strawberry, and blueberry flavors. 48.00 Cupcakes & Minis 2 12 1.0 Assorted Cheesecake https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Assortment of twelve mini cheesecakes in various flavors 10 false false gluten-free available Emma Thompson 2024-03-20 MINI-CHEESE-010 any
12 11 Chocolate Ganache Tart Rich chocolate tart with smooth ganache filling and gold leaf accents. Sophisticated indulgence. 42.00 Specialty Desserts 5 6 0.9 Dark Chocolate https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Dark chocolate ganache tart with gold leaf decoration 7 false false gluten-free available, vegan available Sarah Mitchell 2024-03-25 SPEC-TART-011 any
13 12 Seasonal Pumpkin Spice Cake Warm pumpkin spice cake with cinnamon cream cheese frosting and candied pecans. 70.00 Seasonal Items 7 10 1.8 Pumpkin Spice https://images.unsplash.com/photo-1571115764595-644a1f56a55c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Pumpkin spice cake with cinnamon frosting and pecans 3 false true gluten-free available Emma Thompson 2024-04-01 SEAS-PUMP-012 fall
14 13 Baby Shower Buttercream Cake Delicate pastel cake with buttercream flowers and baby-themed decorations. 85.00 Celebration Cakes 8 12 2.0 Vanilla Strawberry https://images.unsplash.com/photo-1488477304112-4944851de03d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Pink and blue baby shower cake with buttercream flowers 4 false true gluten-free available, vegan available Emma Thompson 2024-04-05 BABY-SHOW-013 baby shower
15 14 Tiramisu Layer Cake Italian-inspired coffee-soaked layers with mascarpone cream and cocoa dusting. 95.00 Specialty Desserts 8 12 2.3 Coffee Mascarpone https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Tiramisu layer cake with mascarpone and coffee flavoring 2 true false none available Sarah Mitchell 2024-04-10 SPEC-TIRA-014 any
16 15 Valentine's Heart Cake Heart-shaped red velvet cake with romantic rose decorations and gold accents. 78.00 Seasonal Items 8 10 1.9 Red Velvet https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Heart-shaped red velvet cake with roses and gold details 5 false true gluten-free available Sarah Mitchell 2024-04-15 SEAS-VAL-015 valentine
17 16 Coconut Cream Paradise Tropical coconut cake layers with coconut cream filling and toasted coconut flakes. 68.00 Specialty Desserts 7 10 1.7 Coconut https://images.unsplash.com/photo-1464349095431-e9a21285b5f3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Coconut cake with cream filling and toasted coconut 6 false false gluten-free available, vegan available Emma Thompson 2024-04-20 SPEC-COC-016 any
18 17 Birthday Number Cake Custom number-shaped cake for milestone birthdays. Choice of flavors and decorations. 120.00 Birthday Cakes 10 20 2.5 Custom Choice https://images.unsplash.com/photo-1557925923-cd4648e211a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Large number-shaped birthday cake with custom decorations 1 false true gluten-free available, vegan available Sarah Mitchell 2024-04-25 BDAY-NUM-017 birthday
19 18 Luxury Chocolate Tower Five-tier chocolate masterpiece with gold details and fresh berries. Ultimate indulgence. 580.00 Wedding Cakes 14 100 7.8 Premium Chocolate https://images.unsplash.com/photo-1464349095431-e9a21285b5f3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Five-tier luxury chocolate wedding cake with gold and berries 1 true true gluten-free available Sarah Mitchell 2024-05-01 WED-LUX-018 wedding
20 19 Spring Lemon Elderflower Light lemon cake with elderflower buttercream and fresh flower decorations. 82.00 Seasonal Items 7 12 1.8 Lemon Elderflower https://images.unsplash.com/photo-1486427944299-d1955d23e34d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Spring cake with lemon elderflower flavor and fresh flowers 4 true true gluten-free available, vegan available Emma Thompson 2024-05-05 SEAS-SPRING-019 spring
21 20 Macaron Tower Centerpiece Elegant tower of assorted French macarons in pastel colors. Perfect wedding alternative. 185.00 Wedding Cakes 6 40 2.0 Assorted Macaron https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80 Elegant tower of colorful French macarons 2 false false gluten-free available Emma Thompson 2024-05-10 WED-MAC-020 wedding

1
images/baker-portrait.jpg Normal file
View File

@@ -0,0 +1 @@
placeholder

1
images/chocolate-decadence.jpg Normal file
View File

@@ -0,0 +1 @@
placeholder

1
images/hero-cake.jpg Normal file
View File

@@ -0,0 +1 @@
placeholder

1
images/wedding-vanilla.jpg Normal file
View File

@@ -0,0 +1 @@
placeholder

602
index.html Normal file
View File

@@ -0,0 +1,602 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Dreams Bakery - Artisan Cakes & Desserts</title>
<meta name="description" content="Premium handcrafted cakes and desserts for weddings, birthdays, and special celebrations. Custom designs available.">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- EmailJS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<header class="header" id="header">
<nav class="nav container">
<div class="nav__logo">
<i class="fas fa-birthday-cake"></i>
<span>Sweet Dreams Bakery</span>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">Home</a>
</li>
<li class="nav__item">
<a href="#products" class="nav__link">Cakes</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#process" class="nav__link">Process</a>
</li>
<li class="nav__item">
<a href="#gallery" class="nav__link">Gallery</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">Contact</a>
</li>
</ul>
<div class="nav__close" id="nav-close">
<i class="fas fa-times"></i>
</div>
</div>
<div class="nav__actions">
<button class="nav__cart" id="cart-btn">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count" id="cart-count">0</span>
</button>
<div class="nav__toggle" id="nav-toggle">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
</header>
<!-- Main Content -->
<main class="main">
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero__container container">
<div class="hero__content">
<h1 class="hero__title">Artisan Cakes Made with Love</h1>
<p class="hero__description">
Creating unforgettable moments with handcrafted cakes and desserts.
From elegant wedding cakes to delightful birthday treats, every creation
is made with premium ingredients and artistic passion.
</p>
<div class="hero__buttons">
<a href="#products" class="btn btn--primary">Shop Cakes</a>
<a href="#contact" class="btn btn--secondary">Custom Orders</a>
</div>
</div>
<div class="hero__image">
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Beautiful artisan wedding cake with roses" loading="lazy">
</div>
</div>
</section>
<!-- Products Section -->
<section class="products" id="products">
<div class="container">
<div class="section__header">
<h2 class="section__title">Our Signature Cakes</h2>
<p class="section__subtitle">Discover our collection of handcrafted cakes and desserts</p>
</div>
<!-- Filters and Search -->
<div class="products__controls">
<div class="search__container">
<input type="text" class="search__input" id="search-input" placeholder="Search for cakes...">
<i class="fas fa-search search__icon"></i>
</div>
<div class="filter__container">
<select class="filter__select" id="category-filter">
<option value="all">All Categories</option>
<option value="Wedding Cakes">Wedding Cakes</option>
<option value="Birthday Cakes">Birthday Cakes</option>
<option value="Celebration Cakes">Celebration Cakes</option>
<option value="Cupcakes & Minis">Cupcakes & Minis</option>
<option value="Specialty Desserts">Specialty Desserts</option>
<option value="Seasonal Items">Seasonal Items</option>
</select>
</div>
<div class="sort__container">
<select class="sort__select" id="sort-select">
<option value="featured">Featured</option>
<option value="price-low">Price: Low to High</option>
<option value="price-high">Price: High to Low</option>
<option value="name">Name: A to Z</option>
</select>
</div>
</div>
<!-- Loading State -->
<div class="loading" id="products-loading">
<div class="loading__spinner"></div>
<p>Loading delicious cakes...</p>
</div>
<!-- Products Grid -->
<div class="products__grid" id="products-grid">
<!-- Products will be loaded dynamically -->
</div>
<!-- No Results -->
<div class="no-results" id="no-results" style="display: none;">
<i class="fas fa-search"></i>
<h3>No cakes found</h3>
<p>Try adjusting your search or filter criteria</p>
</div>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="container">
<div class="about__container">
<div class="about__content">
<h2 class="section__title">About Sweet Dreams Bakery</h2>
<p class="about__description">
Founded in 2018 by master baker Sarah Mitchell, Sweet Dreams Bakery has been
creating extraordinary cakes and desserts that turn special moments into
unforgettable memories. With over 15 years of experience in fine pastry arts,
our team combines traditional techniques with innovative flavors.
</p>
<div class="about__features">
<div class="feature">
<i class="fas fa-award"></i>
<h3>Award-Winning Quality</h3>
<p>Recognized for excellence in cake design and taste</p>
</div>
<div class="feature">
<i class="fas fa-leaf"></i>
<h3>Premium Ingredients</h3>
<p>Only the finest, locally-sourced ingredients</p>
</div>
<div class="feature">
<i class="fas fa-palette"></i>
<h3>Custom Designs</h3>
<p>Personalized creations for your special occasions</p>
</div>
</div>
</div>
<div class="about__image">
<img src="https://images.unsplash.com/photo-1607631568010-0666f4ae9d9c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Sarah Mitchell, master baker" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Process Section -->
<section class="process" id="process">
<div class="container">
<div class="section__header">
<h2 class="section__title">Our Baking Process</h2>
<p class="section__subtitle">From consultation to delivery, we ensure perfection at every step</p>
</div>
<div class="process__steps">
<div class="step">
<div class="step__number">1</div>
<div class="step__content">
<h3>Consultation</h3>
<p>We discuss your vision, dietary needs, and event details to create the perfect cake design.</p>
</div>
</div>
<div class="step">
<div class="step__number">2</div>
<div class="step__content">
<h3>Design & Planning</h3>
<p>Our team creates detailed sketches and plans, selecting the finest ingredients for your cake.</p>
</div>
</div>
<div class="step">
<div class="step__number">3</div>
<div class="step__content">
<h3>Handcrafted Creation</h3>
<p>Every element is carefully crafted by hand, from baking to decorating with artistic precision.</p>
</div>
</div>
<div class="step">
<div class="step__number">4</div>
<div class="step__content">
<h3>Quality Check & Delivery</h3>
<p>Final quality inspection and professional delivery or pickup arranged at your convenience.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="gallery" id="gallery">
<div class="container">
<div class="section__header">
<h2 class="section__title">Our Portfolio</h2>
<p class="section__subtitle">A glimpse of our beautiful creations</p>
</div>
<div class="gallery__grid">
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1621303837174-89787a7d4729?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Elegant white wedding cake with cascading flowers" loading="lazy">
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1562440499-64c9a74f0cb2?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Colorful rainbow birthday cake with buttercream" loading="lazy">
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1571115764595-644a1f56a55c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Luxury chocolate cake with gold accents" loading="lazy">
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1486427944299-d1955d23e34d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Delicate cupcake tower arrangement" loading="lazy">
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Rustic naked cake with fresh berries" loading="lazy">
</div>
<div class="gallery__item">
<img src="https://images.unsplash.com/photo-1519915028121-7d3463d20b13?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Artistic fondant cake with hand-painted details" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<div class="container">
<div class="contact__container">
<div class="contact__content">
<h2 class="section__title">Get In Touch</h2>
<p class="contact__description">
Ready to create something special? Contact us for consultations,
custom orders, or any questions about our cakes and services.
</p>
<div class="contact__info">
<div class="contact__item">
<i class="fas fa-map-marker-alt"></i>
<div>
<h4>Address</h4>
<p>123 Baker Street<br>Sweet Valley, CA 90210</p>
</div>
</div>
<div class="contact__item">
<i class="fas fa-phone"></i>
<div>
<h4>Phone</h4>
<p>(555) 123-CAKE</p>
</div>
</div>
<div class="contact__item">
<i class="fas fa-envelope"></i>
<div>
<h4>Email</h4>
<p>orders@sweetdreamsbakery.com</p>
</div>
</div>
<div class="contact__item">
<i class="fas fa-clock"></i>
<div>
<h4>Hours</h4>
<p>Tue-Sat: 8AM-6PM<br>Sun: 9AM-4PM<br>Closed Mondays</p>
</div>
</div>
</div>
</div>
<form class="contact__form" id="contact-form">
<h3>Send us a message</h3>
<div class="form__group">
<input type="text" id="contact-name" name="name" class="form__input" placeholder=" " required>
<label for="contact-name" class="form__label">Full Name *</label>
</div>
<div class="form__group">
<input type="email" id="contact-email" name="email" class="form__input" placeholder=" " required>
<label for="contact-email" class="form__label">Email Address *</label>
</div>
<div class="form__group">
<input type="tel" id="contact-phone" name="phone" class="form__input" placeholder=" ">
<label for="contact-phone" class="form__label">Phone Number</label>
</div>
<div class="form__group">
<select id="contact-inquiry" name="inquiry_type" class="form__input" required>
<option value="">Select inquiry type</option>
<option value="custom_order">Custom Order</option>
<option value="wedding_consultation">Wedding Consultation</option>
<option value="general_inquiry">General Inquiry</option>
<option value="catering">Catering Services</option>
</select>
<label for="contact-inquiry" class="form__label">Inquiry Type *</label>
</div>
<div class="form__group">
<textarea id="contact-message" name="message" class="form__input form__textarea" placeholder=" " rows="5" required></textarea>
<label for="contact-message" class="form__label">Message *</label>
</div>
<button type="submit" class="btn btn--primary">
<span class="btn__text">Send Message</span>
<span class="btn__loading" style="display: none;">
<i class="fas fa-spinner fa-spin"></i> Sending...
</span>
</button>
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__container">
<div class="footer__content">
<div class="footer__section">
<div class="footer__logo">
<i class="fas fa-birthday-cake"></i>
<span>Sweet Dreams Bakery</span>
</div>
<p class="footer__description">
Creating magical moments with artisan cakes and desserts since 2018.
Every creation is made with love and the finest ingredients.
</p>
<div class="footer__social">
<a href="#" class="footer__social-link">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="footer__social-link">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="footer__social-link">
<i class="fab fa-pinterest"></i>
</a>
</div>
</div>
<div class="footer__section">
<h4 class="footer__title">Quick Links</h4>
<ul class="footer__links">
<li><a href="#home">Home</a></li>
<li><a href="#products">Our Cakes</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#process">Our Process</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer__section">
<h4 class="footer__title">Services</h4>
<ul class="footer__links">
<li><a href="#products">Wedding Cakes</a></li>
<li><a href="#products">Birthday Cakes</a></li>
<li><a href="#products">Custom Designs</a></li>
<li><a href="#products">Cupcakes</a></li>
<li><a href="#contact">Consultations</a></li>
<li><a href="#contact">Delivery</a></li>
</ul>
</div>
<div class="footer__section">
<h4 class="footer__title">Newsletter</h4>
<p class="newsletter__text">Subscribe for cake specials and baking tips</p>
<form class="newsletter__form" id="newsletter-form">
<input type="email" class="newsletter__input" placeholder="Your email address" required>
<button type="submit" class="newsletter__btn">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div class="footer__bottom">
<p>&copy; 2024 Sweet Dreams Bakery. All rights reserved.</p>
<div class="footer__legal">
<a href="#privacy">Privacy Policy</a>
<a href="#terms">Terms of Service</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Modals -->
<!-- Cart Modal -->
<div class="modal" id="cart-modal">
<div class="modal__content">
<div class="modal__header">
<h3 class="modal__title">Shopping Cart</h3>
<button class="modal__close" id="cart-modal-close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal__body">
<div class="cart__items" id="cart-items">
<!-- Cart items will be loaded dynamically -->
</div>
<div class="cart__empty" id="cart-empty" style="display: none;">
<i class="fas fa-shopping-cart"></i>
<p>Your cart is empty</p>
<a href="#products" class="btn btn--primary">Browse Cakes</a>
</div>
</div>
<div class="modal__footer" id="cart-footer">
<div class="cart__total">
<span class="total__label">Total: </span>
<span class="total__amount" id="cart-total">$0.00</span>
</div>
<button class="btn btn--primary btn--full" id="checkout-btn">
Proceed to Checkout
</button>
</div>
</div>
</div>
<!-- Product Detail Modal -->
<div class="modal" id="product-modal">
<div class="modal__content modal__content--large">
<div class="modal__header">
<h3 class="modal__title" id="product-modal-title">Product Details</h3>
<button class="modal__close" id="product-modal-close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal__body">
<div class="product__detail" id="product-detail">
<!-- Product details will be loaded dynamically -->
</div>
</div>
</div>
</div>
<!-- Checkout Modal -->
<div class="modal" id="checkout-modal">
<div class="modal__content modal__content--large">
<div class="modal__header">
<h3 class="modal__title">Checkout</h3>
<button class="modal__close" id="checkout-modal-close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal__body">
<form class="checkout__form" id="checkout-form">
<div class="checkout__section">
<h4>Customer Information</h4>
<div class="form__row">
<div class="form__group">
<input type="text" id="checkout-firstname" name="first_name" class="form__input" placeholder=" " required>
<label for="checkout-firstname" class="form__label">First Name *</label>
</div>
<div class="form__group">
<input type="text" id="checkout-lastname" name="last_name" class="form__input" placeholder=" " required>
<label for="checkout-lastname" class="form__label">Last Name *</label>
</div>
</div>
<div class="form__row">
<div class="form__group">
<input type="email" id="checkout-email" name="email" class="form__input" placeholder=" " required>
<label for="checkout-email" class="form__label">Email Address *</label>
</div>
<div class="form__group">
<input type="tel" id="checkout-phone" name="phone" class="form__input" placeholder=" " required>
<label for="checkout-phone" class="form__label">Phone Number *</label>
</div>
</div>
</div>
<div class="checkout__section">
<h4>Delivery Information</h4>
<div class="form__group">
<select id="checkout-delivery" name="delivery_method" class="form__input" required>
<option value="">Select delivery method</option>
<option value="pickup">Pickup at Bakery</option>
<option value="delivery">Home Delivery (+$15)</option>
</select>
<label for="checkout-delivery" class="form__label">Delivery Method *</label>
</div>
<div class="delivery__address" id="delivery-address" style="display: none;">
<div class="form__group">
<input type="text" id="checkout-address" name="address" class="form__input" placeholder=" ">
<label for="checkout-address" class="form__label">Street Address</label>
</div>
<div class="form__row">
<div class="form__group">
<input type="text" id="checkout-city" name="city" class="form__input" placeholder=" ">
<label for="checkout-city" class="form__label">City</label>
</div>
<div class="form__group">
<input type="text" id="checkout-zip" name="zip" class="form__input" placeholder=" ">
<label for="checkout-zip" class="form__label">ZIP Code</label>
</div>
</div>
</div>
</div>
<div class="checkout__section">
<h4>Event Details</h4>
<div class="form__row">
<div class="form__group">
<input type="date" id="checkout-event-date" name="event_date" class="form__input" required>
<label for="checkout-event-date" class="form__label">Event Date *</label>
</div>
<div class="form__group">
<input type="time" id="checkout-event-time" name="event_time" class="form__input">
<label for="checkout-event-time" class="form__label">Preferred Time</label>
</div>
</div>
<div class="form__group">
<textarea id="checkout-special-requests" name="special_requests" class="form__input form__textarea" placeholder=" " rows="3"></textarea>
<label for="checkout-special-requests" class="form__label">Special Requests or Dietary Requirements</label>
</div>
</div>
<div class="checkout__section">
<h4>Order Summary</h4>
<div class="order__summary" id="order-summary">
<!-- Order summary will be loaded dynamically -->
</div>
<div class="order__total">
<div class="total__row">
<span>Subtotal:</span>
<span id="order-subtotal">$0.00</span>
</div>
<div class="total__row">
<span>Delivery:</span>
<span id="order-delivery">$0.00</span>
</div>
<div class="total__row total__final">
<span>Total:</span>
<span id="order-total">$0.00</span>
</div>
</div>
</div>
<div class="checkout__actions">
<button type="submit" class="btn btn--primary btn--full">
<span class="btn__text">Place Order</span>
<span class="btn__loading" style="display: none;">
<i class="fas fa-spinner fa-spin"></i> Processing...
</span>
</button>
<p class="checkout__note">
<i class="fas fa-info-circle"></i>
We'll contact you within 24 hours to confirm your order and arrange payment.
</p>
</div>
</form>
</div>
</div>
</div>
<!-- Notification -->
<div class="notification" id="notification">
<div class="notification__content">
<i class="notification__icon"></i>
<span class="notification__message"></span>
</div>
</div>
<!-- Scripts -->
<script src="script.js"></script>
</body>
</html>

1017
script.js Normal file
View File

File diff suppressed because it is too large Load Diff

1423
styles.css Normal file
View File

File diff suppressed because it is too large Load Diff