custom1/product_listing_page.html

402 lines
22 KiB
HTML
Raw Normal View History

SafeValue must use [property]=binding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Listing Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-wrapper">
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Amazon Prime</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Products</a></li><li><a href="product_detail_page.html">Deals</a></li><li><a href="cart_page.html">Cart</a></li><li><a href="checkout_page.html">Checkout</a></li><li><a href="user_account_dashboard.html">My Account</a></li><li class="nav-1-dropdown"><a href="#">Shop by Category<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">Sign In</button><button class="nav-1-btn nav-1-solid">Register</button></div></nav></div>
<section class="category-header">
<div class="category-header__container">
<h1 class="category-header__title">Category Name Placeholder</h1>
<p class="category-header__description">Discover a wide selection of products tailored to this category, featuring the latest trends and best sellers.</p>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Filters</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-content-area">
<aside class="product-filters" aria-label="Product Filters">
<h2>Filter Results</h2>
<div class="filter-group category-filter">
<h3>Department</h3>
<ul>
<li>
<input type="checkbox" id="cat1" name="category" value="electronics">
<label for="cat1">Electronics</label>
</li>
<li>
<input type="checkbox" id="cat2" name="category" value="books">
<label for="cat2">Books</label>
</li>
<li>
<input type="checkbox" id="cat3" name="category" value="home-kitchen">
<label for="cat3">Home & Kitchen</label>
</li>
<li>
<input type="checkbox" id="cat4" name="category" value="apparel">
<label for="cat4">Apparel</label>
</li>
<li>
<input type="checkbox" id="cat5" name="category" value="sports-outdoors">
<label for="cat5">Sports & Outdoors</label>
</li>
</ul>
</div>
<div class="filter-group brand-filter">
<h3>Brand</h3>
<ul>
<li>
<input type="checkbox" id="brand1" name="brand" value="brandx">
<label for="brand1">Brand X</label>
</li>
<li>
<input type="checkbox" id="brand2" name="brand" value="brandy">
<label for="brand2">Brand Y</label>
</li>
<li>
<input type="checkbox" id="brand3" name="brand" value="brandz">
<label for="brand3">Brand Z</label>
</li>
<li>
<input type="checkbox" id="brand4" name="brand" value="another-brand">
<label for="brand4">Another Brand</label>
</li>
</ul>
</div>
<div class="filter-group rating-filter">
<h3>Avg. Customer Review</h3>
<ul>
<li>
<input type="radio" id="rating5" name="rating" value="5" checked>
<label for="rating5">
<span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
<span class="rating-text">5 Stars</span>
</label>
</li>
<li>
<input type="radio" id="rating4up" name="rating" value="4up">
<label for="rating4up">
<span class="stars">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
<span class="rating-text">& Up</span>
</label>
</li>
<li>
<input type="radio" id="rating3up" name="rating" value="3up">
<label for="rating3up">
<span class="stars">&#9733;&#9733;&#9733;&#9734;&#9734;</span>
<span class="rating-text">& Up</span>
</label>
</li>
<li>
<input type="radio" id="rating2up" name="rating" value="2up">
<label for="rating2up">
<span class="stars">&#9733;&#9733;&#9734;&#9734;&#9734;</span>
<span class="rating-text">& Up</span>
</label>
</li>
</ul>
</div>
<div class="filter-group price-range-filter">
<h3>Price</h3>
<ul>
<li>
<input type="radio" id="price1" name="price" value="under25">
<label for="price1">Under $25</label>
</li>
<li>
<input type="radio" id="price2" name="price" value="25-50">
<label for="price2">$25 to $50</label>
</li>
<li>
<input type="radio" id="price3" name="price" value="50-100">
<label for="price3">$50 to $100</label>
</li>
<li>
<input type="radio" id="price4" name="price" value="100-200">
<label for="price4">$100 to $200</label>
</li>
<li>
<input type="radio" id="price5" name="price" value="over200">
<label for="price5">Over $200</label>
</li>
</ul>
<div class="price-input-group">
<input type="number" id="minPrice" placeholder="Min" aria-label="Minimum Price">
<span>-</span>
<input type="number" id="maxPrice" placeholder="Max" aria-label="Maximum Price">
<button type="button">Go</button>
</div>
</div>
<div class="filter-group availability-filter">
<h3>Availability</h3>
<ul>
<li>
<input type="checkbox" id="inStock" name="availability" value="in-stock">
<label for="inStock">In Stock</label>
</li>
<li>
<input type="checkbox" id="comingSoon" name="availability" value="coming-soon">
<label for="comingSoon">Coming Soon</label>
</li>
</ul>
</div>
<!-- Add more filter groups as needed for Amazon clone -->
<div class="filter-group condition-filter">
<h3>Condition</h3>
<ul>
<li>
<input type="radio" id="condNew" name="condition" value="new" checked>
<label for="condNew">New</label>
</li>
<li>
<input type="radio" id="condUsed" name="condition" value="used">
<label for="condUsed">Used</label>
</li>
</ul>
</div>
<div class="filter-group shipping-filter">
<h3>Shipping Option</h3>
<ul>
<li>
<input type="checkbox" id="freeShipping" name="shipping" value="free">
<label for="freeShipping">Free Shipping</label>
</li>
<li>
<input type="checkbox" id="primeEligible" name="shipping" value="prime">
<label for="primeEligible">Prime Eligible</label>
</li>
</ul>
</div>
</aside>
<main class="main-product-display" aria-live="polite">
<h2>Search Results for "Electronics"</h2>
<p>Displaying 1-20 of 1,234 results</p>
<div class="product-grid-placeholder">
<div class="product-card-placeholder">Product Card 1</div>
<div class="product-card-placeholder">Product Card 2</div>
<div class="product-card-placeholder">Product Card 3</div>
<div class="product-card-placeholder">Product Card 4</div>
<div class="product-card-placeholder">Product Card 5</div>
<div class="product-card-placeholder">Product Card 6</div>
<div class="product-card-placeholder">Product Card 7</div>
<div class="product-card-placeholder">Product Card 8</div>
</div>
<!-- More product cards would go here -->
</main>
</div>
</body>
</html>
<section id="product-grid-section" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-10 text-gray-800">Explore Our Top Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Product Name One</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-500 mr-1">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
<span class="text-gray-600 text-sm">(123 reviews)</span>
</div>
<p class="text-xl font-bold text-gray-800 mb-4">$29.99</p>
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
</div>
</article>
<!-- Product Card 2 -->
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Another Product Title</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-500 mr-1">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
<span class="text-gray-600 text-sm">(45 reviews)</span>
</div>
<p class="text-xl font-bold text-gray-800 mb-4">$49.99</p>
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
</div>
</article>
<!-- Product Card 3 -->
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Awesome Gadget X</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-500 mr-1">&#9733;&#9733;&#9733;&#9734;&#9734;</span>
<span class="text-gray-600 text-sm">(88 reviews)</span>
</div>
<p class="text-xl font-bold text-gray-800 mb-4">$129.99</p>
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
</div>
</article>
<!-- Product Card 4 -->
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Essential Kitchen Tool</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-500 mr-1">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
<span class="text-gray-600 text-sm">(201 reviews)</span>
</div>
<p class="text-xl font-bold text-gray-800 mb-4">$19.99</p>
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
</div>
</article>
<!-- Product Card 5 -->
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Stylish Backpack</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-500 mr-1">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
<span class="text-gray-600 text-sm">(78 reviews)</span>
</div>
<p class="text-xl font-bold text-gray-800 mb-4">$59.99</p>
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
</div>
</article>
<!-- Product Card 6 -->
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Comfortable Headphones</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-500 mr-1">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
<span class="text-gray-600 text-sm">(305 reviews)</span>
</div>
<p class="text-xl font-bold text-gray-800 mb-4">$79.99</p>
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
</div>
</article>
<!-- Product Card 7 -->
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Smart Home Device</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-500 mr-1">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
<span class="text-gray-600 text-sm">(150 reviews)</span>
</div>
<p class="text-xl font-bold text-gray-800 mb-4">$99.99</p>
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
</div>
</article>
<!-- Product Card 8 -->
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Durable Water Bottle</h3>
<div class="flex items-center mb-2">
<span class="text-yellow-500 mr-1">&#9733;&#9733;&#9733;&#9733;&#9734;</span>
<span class="text-gray-600 text-sm">(92 reviews)</span>
</div>
<p class="text-xl font-bold text-gray-800 mb-4">$14.99</p>
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
</div>
</article>
</div>
</div>
</section>
<section class="pagination-section" aria-labelledby="pagination-heading">
<h2 id="pagination-heading" class="sr-only">Product Pagination</h2>
<div class="pagination-controls-top">
<span class="pagination-summary">Showing 1 - 12 of 200 results</span>
<div class="pagination-items-per-page">
<label for="items-per-page" class="sr-only">Items per page</label>
<select id="items-per-page" class="pagination-select">
<option value="12">12 per page</option>
<option value="24">24 per page</option>
<option value="48">48 per page</option>
</select>
</div>
</div>
<nav class="pagination-nav" aria-label="Product page navigation">
<ul class="pagination-list">
<li class="pagination-item">
<a href="#" class="pagination-link pagination-prev" aria-label="Previous Page">Previous</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link pagination-active" aria-current="page" aria-label="Page 1">1</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link" aria-label="Page 2">2</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link" aria-label="Page 3">3</a>
</li>
<li class="pagination-item pagination-ellipsis">
<span>...</span>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link" aria-label="Page 10">10</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link pagination-next" aria-label="Next Page">Next</a>
</li>
</ul>
</nav>
<div class="pagination-controls-bottom">
<span class="pagination-summary-bottom">Need help? Visit the <a href="#" class="pagination-help-link">Help section</a></span>
</div>
</section>
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Amazon</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1800 123 4567</span><br></br><a href="mailto:info@amazon.com">info@amazon.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="your_account.html">Your Account</a></li><li><a href="your_orders.html">Your Orders</a></li><li><a href="shipping_delivery.html">Shipping & Delivery</a></li><li><a href="returns_replacements.html">Returns & Replacements</a></li><li><a href="help.html">Help</a></li></ul><ul><li><a href="sell_on_amazon.html">Sell on Amazon</a></li><li><a href="amazon_associates.html">Amazon Associates</a></li><li><a href="careers.html">Careers</a></li><li><a href="gift_cards.html">Gift Cards</a></li><li><a href="amazon_app.html">Amazon App</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2025 Amazon. All rights reserved.</p><ul class="footer-2-links"><li><a href="privacy_policy.html">Privacy Policy</a></li><li><a href="conditions_of_use.html">Conditions of Use</a></li><li><a href="cookies_settings.html">Cookies Settings</a></li><li><a href="order_confirmation_page.html">Order Confirmation</a></li></ul></div></section></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html> (see https://g.co/ng/security#xss)