341 lines
16 KiB
HTML
341 lines
16 KiB
HTML
<!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">×</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">×</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">×</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>© 2024 Artisan Pottery Studio. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|