Skip to content

Commit a709274

Browse files
Digi-MakretDigi-Makret
authored
Create catalog.HTML
1 parent 713c6e0 commit a709274

1 file changed

Lines changed: 119 additions & 0 deletions

File tree

‎catalog.HTML‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dorm Essentials | Kifar</title>
7+
<style>
8+
body { font-family: Arial, sans-serif; padding: 20px; background: #f9f9f9; }
9+
h1 { text-align: center; margin-bottom: 20px; }
10+
.sort-container { text-align: center; margin-bottom: 20px; }
11+
select { padding: 8px 12px; font-size: 16px; margin-left: 10px; }
12+
13+
.product-grid {
14+
display: grid;
15+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
16+
gap: 20px;
17+
}
18+
19+
.product-card {
20+
background: #fff;
21+
border-radius: 10px;
22+
padding: 15px;
23+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
24+
text-align: center;
25+
transition: transform 0.2s;
26+
}
27+
28+
.product-card:hover { transform: translateY(-5px); }
29+
30+
.product-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
31+
32+
.product-card h3 { font-size: 16px; margin-bottom: 5px; }
33+
.product-card p { font-size: 14px; color: #555; margin-bottom: 5px; }
34+
.product-card .price { font-weight: bold; color: #000; margin-bottom: 10px; }
35+
.product-card button {
36+
padding: 8px 12px;
37+
background: #007BFF;
38+
color: white;
39+
border: none;
40+
border-radius: 5px;
41+
cursor: pointer;
42+
}
43+
.product-card button:hover { background: #0056b3; }
44+
</style>
45+
</head>
46+
<body>
47+
48+
<h1>Dorm Essentials</h1>
49+
50+
<div class="sort-container">
51+
<label for="sortSelect">Sort by:</label>
52+
<select id="sortSelect">
53+
<option value="name">Name</option>
54+
<option value="category">Category</option>
55+
<option value="price">Price</option>
56+
</select>
57+
</div>
58+
59+
<div class="product-grid" id="productGrid">
60+
<!-- Products will be injected here -->
61+
</div>
62+
63+
<script>
64+
// Example products (replace image URLs & prices with your actual products)
65+
const products = [
66+
{name: "Lighted Makeup Mirror", category: "Bedding & Comfort", price: 29.99, img: "images/mirror.jpg", id: "p1"},
67+
{name: "Storage Ottoman", category: "Bedding & Comfort", price: 49.99, img: "images/ottoman.jpg", id: "p2"},
68+
{name: "Air Purifier", category: "Bedding & Comfort", price: 89.99, img: "images/airpurifier.jpg", id: "p3"},
69+
{name: "Desk Lamp", category: "Furniture & Workspace", price: 19.99, img: "images/desklamp.jpg", id: "p4"},
70+
{name: "Mini Fridge", category: "Kitchen & Dining", price: 99.99, img: "images/minifridge.jpg", id: "p5"},
71+
{name: "Fairy Lights", category: "Lifestyle & Extras", price: 14.99, img: "images/fairylights.jpg", id: "p6"},
72+
// Add all other products here...
73+
];
74+
75+
const productGrid = document.getElementById('productGrid');
76+
const sortSelect = document.getElementById('sortSelect');
77+
78+
function displayProducts(arr) {
79+
productGrid.innerHTML = '';
80+
arr.forEach(product => {
81+
const card = document.createElement('div');
82+
card.className = 'product-card';
83+
card.innerHTML = `
84+
<img src="${product.img}" alt="${product.name}">
85+
<h3>${product.name}</h3>
86+
<p>${product.category}</p>
87+
<p class="price">$${product.price.toFixed(2)}</p>
88+
<button onclick="addToCart('${product.id}')">Add to Cart</button>
89+
`;
90+
productGrid.appendChild(card);
91+
});
92+
}
93+
94+
function sortProducts(criteria) {
95+
const sorted = [...products].sort((a, b) => {
96+
if(criteria === "price") return a.price - b.price;
97+
if(a[criteria] < b[criteria]) return -1;
98+
if(a[criteria] > b[criteria]) return 1;
99+
return 0;
100+
});
101+
displayProducts(sorted);
102+
}
103+
104+
sortSelect.addEventListener('change', (e) => {
105+
sortProducts(e.target.value);
106+
});
107+
108+
// Placeholder addToCart function
109+
function addToCart(productId) {
110+
// Replace with your actual cart integration
111+
alert(`Added ${productId} to cart`);
112+
}
113+
114+
// Initial display
115+
displayProducts(products);
116+
</script>
117+
118+
</body>
119+
</html>

0 commit comments

Comments
 (0)