448 lines
25 KiB
HTML
448 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>product_listing</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF_8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Category Filters</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<aside class="category-filters-section" aria-label="Product Category and Price Filters">
|
|
<h2>Filters</h2>
|
|
|
|
<div class="filter-group open" id="category-filter">
|
|
<h3 aria-controls="category-list" aria-expanded="true" tabindex="0">
|
|
Categories
|
|
</h3>
|
|
<div class="filter-group-content" id="category-list" role="group">
|
|
<ul class="filter-list">
|
|
<li>
|
|
<label for="filter-jewelry">
|
|
<input type="checkbox" id="filter-jewelry" name="category" value="jewelry">
|
|
<span>Jewelry</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label for="filter-home-decor">
|
|
<input type="checkbox" id="filter-home-decor" name="category" value="home-decor">
|
|
<span>Home Decor</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label for="filter-textiles">
|
|
<input type="checkbox" id="filter-textiles" name="category" value="textiles">
|
|
<span>Textiles</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label for="filter-pottery">
|
|
<input type="checkbox" id="filter-pottery" name="category" value="pottery">
|
|
<span>Pottery</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label for="filter-art">
|
|
<input type="checkbox" id="filter-art" name="category" value="art">
|
|
<span>Art & Paintings</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label for="filter-accessories">
|
|
<input type="checkbox" id="filter-accessories" name="category" value="accessories">
|
|
<span>Accessories</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label for="filter-custom-orders">
|
|
<input type="checkbox" id="filter-custom-orders" name="category" value="custom-orders">
|
|
<span>Custom Orders</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label for="filter-gifts">
|
|
<input type="checkbox" id="filter-gifts" name="category" value="gifts">
|
|
<span>Gifts & Novelties</span>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-group" id="price-filter">
|
|
<h3 aria-controls="price-range-content" aria-expanded="false" tabindex="0">
|
|
Price Range
|
|
</h3>
|
|
<div class="filter-group-content" id="price-range-content" role="group">
|
|
<div class="price-range-inputs">
|
|
<label for="price-min" class="sr-only">Minimum Price</label>
|
|
<input type="number" id="price-min" name="min_price" value="0" min="0" placeholder="Min">
|
|
<span>—</span>
|
|
<label for="price-max" class="sr-only">Maximum Price</label>
|
|
<input type="number" id="price-max" name="max_price" value="500" min="0" placeholder="Max">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="apply-filters-button">Apply Filters</button>
|
|
</aside>
|
|
|
|
<script>
|
|
// JavaScript for toggling filter groups
|
|
document.querySelectorAll('.filter-group h3').forEach(header => {
|
|
header.addEventListener('click', () => {
|
|
const group = header.closest('.filter-group');
|
|
const content = group.querySelector('.filter-group-content');
|
|
const isExpanded = header.getAttribute('aria-expanded') === 'true';
|
|
|
|
group.classList.toggle('open');
|
|
header.setAttribute('aria-expanded', !isExpanded);
|
|
// Simple toggle for display, max-height transition handled by CSS
|
|
});
|
|
});
|
|
|
|
// Initialize first filter group as open
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const firstGroup = document.querySelector('.filter-group.open');
|
|
if (firstGroup) {
|
|
const header = firstGroup.querySelector('h3');
|
|
header.setAttribute('aria-expanded', 'true');
|
|
// Ensure content max-height is set correctly on load if open class is present
|
|
// This is mostly handled by the CSS max-height transition on display,
|
|
// but can be refined with JS if dynamic height calculation is needed.
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Search Bar - Handmade Crafts Store</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<!-- FontAwesome for search icon (optional, for visual fidelity in wireframe) -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
</head>
|
|
<body>
|
|
<section class="search-section" aria-labelledby="search-section-title">
|
|
<h2 id="search-section-title">Discover Unique Handmade Crafts</h2>
|
|
|
|
<div class="search-bar-container">
|
|
<div class="search-bar">
|
|
<label for="product-search" class="sr-only">Search for products</label>
|
|
<input type="search" id="product-search" name="q" placeholder="Search for products, materials, or ideas..." aria-label="Search products" autocomplete="off">
|
|
<i class="fas fa-search search-icon" aria-hidden="true"></i>
|
|
</div>
|
|
<button type="submit" class="search-button">Search</button>
|
|
</div>
|
|
|
|
<div class="filters-container">
|
|
<div class="filter-group">
|
|
<label for="category-filter">Category</label>
|
|
<select id="category-filter" name="category" aria-label="Filter by category">
|
|
<option value="">All Categories</option>
|
|
<option value="jewelry">Jewelry</option>
|
|
<option value="home-decor">Home Decor</option>
|
|
<option value="textiles">Textiles</option>
|
|
<option value="pottery">Pottery</option>
|
|
<option value="art">Art & Prints</option>
|
|
<option value="accessories">Accessories</option>
|
|
<option value="other">Other Crafts</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="price-min">Price Range</label>
|
|
<div class="price-range">
|
|
<input type="number" id="price-min" name="price_min" placeholder="Min" min="0" aria-label="Minimum price">
|
|
<input type="number" id="price-max" name="price_max" placeholder="Max" min="0" aria-label="Maximum price">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="sort-by">Sort By</label>
|
|
<select id="sort-by" name="sort" aria-label="Sort search results by">
|
|
<option value="relevance">Relevance</option>
|
|
<option value="newest">Newest Arrivals</option>
|
|
<option value="price-asc">Price: Low to High</option>
|
|
<option value="price-desc">Price: High to Low</option>
|
|
<option value="popularity">Most Popular</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wireframe Placeholder for Search Results -->
|
|
<div class="placeholder-image">
|
|
<p>Placeholder: Illustrative Product Display Area</p>
|
|
</div>
|
|
<div class="placeholder-text">
|
|
<p>Placeholder: This section would dynamically display search results, potentially with product cards showing image, title, price, and add-to-cart button. Results would update based on search query and filter selections.</p>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Grid Display</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<section class="product-grid-section" aria-labelledby="productGridTitle">
|
|
<header class="product-grid-section__header">
|
|
<h2 id="productGridTitle" class="product-grid-section__title">Our Handmade Crafts</h2>
|
|
<p class="product-grid-section__description">Discover unique, handcrafted items made with passion. Explore our diverse collection, from intricate jewelry to bespoke home decor.</p>
|
|
</header>
|
|
|
|
<div class="product-grid-controls">
|
|
<div class="product-grid-controls__filter-group">
|
|
<label for="category-filter" class="product-grid-controls__label">Category:</label>
|
|
<select id="category-filter" class="product-grid-controls__select" aria-label="Filter products by category">
|
|
<option value="all">All Crafts</option>
|
|
<option value="jewelry">Jewelry</option>
|
|
<option value="home-decor">Home Decor</option>
|
|
<option value="art">Art & Prints</option>
|
|
<option value="textiles">Textiles</option>
|
|
<option value="ceramics">Ceramics</option>
|
|
<option value="woodwork">Woodwork</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="product-grid-controls__filter-group">
|
|
<label for="price-filter" class="product-grid-controls__label">Price Range:</label>
|
|
<select id="price-filter" class="product-grid-controls__select" aria-label="Filter products by price range">
|
|
<option value="all">All Prices</option>
|
|
<option value="under-25">Under $25</option>
|
|
<option value="25-50">$25 - $50</option>
|
|
<option value="50-100">$50 - $100</option>
|
|
<option value="over-100">Over $100</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="product-grid-controls__sort-group">
|
|
<label for="sort-by" class="product-grid-controls__label">Sort By:</label>
|
|
<select id="sort-by" class="product-grid-controls__select" aria-label="Sort products by attribute">
|
|
<option value="featured">Featured</option>
|
|
<option value="newest">Newest Arrivals</option>
|
|
<option value="price-asc">Price: Low to High</option>
|
|
<option value="price-desc">Price: High to Low</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-grid">
|
|
<!-- Product Card 1 -->
|
|
<article class="product-card">
|
|
<a href="#product-detail-1" aria-label="View details for Hand-painted Ceramic Vase" class="product-card__image-wrapper">
|
|
<img src="https://via.placeholder.com/300x300/e0e0e0/555555?text=Ceramic+Vase" alt="Hand-painted Ceramic Vase with abstract patterns" class="product-card__image">
|
|
</a>
|
|
<div class="product-card__content">
|
|
<div>
|
|
<h3 class="product-card__title">Hand-painted Ceramic Vase</h3>
|
|
<span class="product-card__category">Category: Home Decor</span>
|
|
</div>
|
|
<span class="product-card__price">$49.99</span>
|
|
<button class="product-card__add-to-cart" aria-label="Add Hand-painted Ceramic Vase to cart">Add to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 2 -->
|
|
<article class="product-card">
|
|
<a href="#product-detail-2" aria-label="View details for Artisan Leather Wallet" class="product-card__image-wrapper">
|
|
<img src="https://via.placeholder.com/300x300/d0d0d0/444444?text=Leather+Wallet" alt="Dark brown artisan leather wallet with stitching details" class="product-card__image">
|
|
</a>
|
|
<div class="product-card__content">
|
|
<div>
|
|
<h3 class="product-card__title">Artisan Leather Wallet</h3>
|
|
<span class="product-card__category">Category: Accessories</span>
|
|
</div>
|
|
<span class="product-card__price">$75.00</span>
|
|
<button class="product-card__add-to-cart" aria-label="Add Artisan Leather Wallet to cart">Add to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 3 -->
|
|
<article class="product-card">
|
|
<a href="#product-detail-3" aria-label="View details for Sterling Silver Leaf Necklace" class="product-card__image-wrapper">
|
|
<img src="https://via.placeholder.com/300x300/f0f0f0/666666?text=Leaf+Necklace" alt="Delicate sterling silver necklace with a small leaf pendant" class="product-card__image">
|
|
</a>
|
|
<div class="product-card__content">
|
|
<div>
|
|
<h3 class="product-card__title">Sterling Silver Leaf Necklace</h3>
|
|
<span class="product-card__category">Category: Jewelry</span>
|
|
</div>
|
|
<span class="product-card__price">$35.50</span>
|
|
<button class="product-card__add-to-cart" aria-label="Add Sterling Silver Leaf Necklace to cart">Add to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 4 -->
|
|
<article class="product-card">
|
|
<a href="#product-detail-4" aria-label="View details for Hand-knitted Wool Scarf" class="product-card__image-wrapper">
|
|
<img src="https://via.placeholder.com/300x300/c0c0c0/333333?text=Wool+Scarf" alt="Cozy hand-knitted wool scarf in a warm grey color" class="product-card__image">
|
|
</a>
|
|
<div class="product-card__content">
|
|
<div>
|
|
<h3 class="product-card__title">Hand-knitted Wool Scarf</h3>
|
|
<span class="product-card__category">Category: Textiles</span>
|
|
</div>
|
|
<span class="product-card__price">$62.00</span>
|
|
<button class="product-card__add-to-cart" aria-label="Add Hand-knitted Wool Scarf to cart">Add to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 5 -->
|
|
<article class="product-card">
|
|
<a href="#product-detail-5" aria-label="View details for Abstract Canvas Painting" class="product-card__image-wrapper">
|
|
<img src="https://via.placeholder.com/300x300/e5e5e5/777777?text=Abstract+Art" alt="Vibrant abstract canvas painting with blue and orange hues" class="product-card__image">
|
|
</a>
|
|
<div class="product-card__content">
|
|
<div>
|
|
<h3 class="product-card__title">Abstract Canvas Painting</h3>
|
|
<span class="product-card__category">Category: Art & Prints</span>
|
|
</div>
|
|
<span class="product-card__price">$120.00</span>
|
|
<button class="product-card__add-to-cart" aria-label="Add Abstract Canvas Painting to cart">Add to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 6 -->
|
|
<article class="product-card">
|
|
<a href="#product-detail-6" aria-label="View details for Custom Engraved Wooden Coasters" class="product-card__image-wrapper">
|
|
<img src="https://via.placeholder.com/300x300/f5f5f5/888888?text=Wooden+Coasters" alt="Set of four custom engraved wooden coasters with a minimalist design" class="product-card__image">
|
|
</a>
|
|
<div class="product-card__content">
|
|
<div>
|
|
<h3 class="product-card__title">Custom Engraved Wooden Coasters</h3>
|
|
<span class="product-card__category">Category: Home Decor</span>
|
|
</div>
|
|
<span class="product-card__price">$28.99</span>
|
|
<button class="product-card__add-to-cart" aria-label="Add Custom Engraved Wooden Coasters to cart">Add to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 7 -->
|
|
<article class="product-card">
|
|
<a href="#product-detail-7" aria-label="View details for Hand-Poured Soy Candle" class="product-card__image-wrapper">
|
|
<img src="https://via.placeholder.com/300x300/e0e0e0/555555?text=Soy+Candle" alt="Hand-poured soy candle in a decorative glass jar with a wooden lid" class="product-card__image">
|
|
</a>
|
|
<div class="product-card__content">
|
|
<div>
|
|
<h3 class="product-card__title">Hand-Poured Soy Candle</h3>
|
|
<span class="product-card__category">Category: Home Decor</span>
|
|
</div>
|
|
<span class="product-card__price">$19.50</span>
|
|
<button class="product-card__add-to-cart" aria-label="Add Hand-Poured Soy Candle to cart">Add to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Product Card 8 -->
|
|
<article class="product-card">
|
|
<a href="#product-detail-8" aria-label="View details for Unique Ceramic Mug" class="product-card__image-wrapper">
|
|
<img src="https://via.placeholder.com/300x300/d0d0d0/444444?text=Ceramic+Mug" alt="Unique handmade ceramic mug with a speckled glaze and comfortable handle" class="product-card__image">
|
|
</a>
|
|
<div class="product-card__content">
|
|
<div>
|
|
<h3 class="product-card__title">Unique Ceramic Mug</h3>
|
|
<span class="product-card__category">Category: Ceramics</span>
|
|
</div>
|
|
<span class="product-card__price">$24.00</span>
|
|
<button class="product-card__add-to-cart" aria-label="Add Unique Ceramic Mug to cart">Add to Cart</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<nav class="product-grid-pagination" aria-label="Product Pagination">
|
|
<a href="#" class="pagination-link" aria-label="Go to previous page">«</a>
|
|
<a href="#" class="pagination-link is-active" aria-current="page" aria-label="Current page, page 1">1</a>
|
|
<a href="#" class="pagination-link" aria-label="Go to page 2">2</a>
|
|
<a href="#" class="pagination-link" aria-label="Go to page 3">3</a>
|
|
<span class="pagination-link" aria-hidden="true">...</span>
|
|
<a href="#" class="pagination-link" aria-label="Go to page 10">10</a>
|
|
<a href="#" class="pagination-link" aria-label="Go to next page">»</a>
|
|
</nav>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Price Range Filter</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<aside class="filter-section" aria-labelledby="price-filter-heading">
|
|
<h3 id="price-filter-heading">Price Range</h3>
|
|
|
|
<div class="price-inputs">
|
|
<div class="price-input-group">
|
|
<label for="min-price">Min Price</label>
|
|
<input type="number" id="min-price" name="min_price" value="50" min="0" placeholder="Min" aria-label="Minimum Price">
|
|
</div>
|
|
|
|
<span class="price-range-separator">-</span>
|
|
|
|
<div class="price-input-group">
|
|
<label for="max-price">Max Price</label>
|
|
<input type="number" id="max-price" name="max_price" value="500" min="0" placeholder="Max" aria-label="Maximum Price">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="range-slider-container">
|
|
<!-- Placeholder for a more advanced dual-thumb slider, or a single range input -->
|
|
<input type="range" class="range-slider" min="0" max="1000" value="50" id="price-range-start" aria-label="Price Range Start">
|
|
<input type="range" class="range-slider" min="0" max="1000" value="500" id="price-range-end" aria-label="Price Range End">
|
|
<!-- In a real implementation, these would likely be combined into one complex JS slider or two linked inputs -->
|
|
<!-- For wireframe, two simple sliders represent the concept of a range selection mechanism -->
|
|
</div>
|
|
|
|
<button type="button" class="apply-filter-button" aria-controls="product-list">Apply Filters</button>
|
|
</aside>
|
|
</body>
|
|
</html>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sort Options - Online Store</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<section aria-labelledby="sortOptionsHeading" class="sort-options-section">
|
|
<h2 id="sortOptionsHeading">Sort Products</h2>
|
|
|
|
<div class="sort-control">
|
|
<label for="sort-by">Sort by:</label>
|
|
<select id="sort-by" name="sort-by">
|
|
<option value="relevance">Relevance</option>
|
|
<option value="price-asc">Price: Low to High</option>
|
|
<option value="price-desc">Price: High to Low</option>
|
|
<option value="newest">Newest Arrivals</option>
|
|
<option value="popularity">Popularity</option>
|
|
<option value="rating">Average Customer Review</option>
|
|
</select>
|
|
</div>
|
|
</section>
|
|
|
|
</body>
|
|
</html>
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Crafted Wonders</h3><p class="footer-1-newsletter-text">Be the first to discover new handcrafted treasures and exclusive offers!</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Sign Up</button></div><p class="footer-1-privacy-note"><span>By signing up, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive marketing emails.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Shop All Crafts</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Featured Collections</a></li><li><a href="#">Gift Ideas</a></li><li><a href="#">Our Artisans</a></li></ul></div><div class="footer-1-column"><h4>Customer Care</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Shipping Information</a></li><li><a href="#">Returns & Exchanges</a></li><li><a href="#">Order Tracking</a></li><li><a href="#">FAQs</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2024 Crafted Wonders. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
|
</body>
|
|
</html> |