← back to Model Arena
data/artifacts/1a25203f4053/qwen3-14b.html
275 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wallcovering Catalog</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background: #f9f9f9;
color: #333;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: #2c3e50;
color: #fff;
padding: 1rem 2rem;
text-align: center;
font-size: 1.5rem;
flex-shrink: 0;
}
main {
flex: 1;
padding: 1rem;
display: flex;
flex-direction: column;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
align-items: center;
flex-wrap: wrap;
}
.controls > * {
flex: 1 1 200px;
min-width: 200px;
}
input[type="text"],
select,
input[type="range"],
input[type="number"] {
width: 100%;
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="range"] {
width: 100%;
}
.empty-state,
.error-state,
.results {
display: none;
}
.results {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.product {
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
flex: 1 1 calc(25% - 1.5rem);
min-width: 200px;
transition: transform 0.2s;
}
.product:hover {
transform: scale(1.02);
}
.product h3 {
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.product p {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.product .price {
color: #27ae60;
font-weight: bold;
}
.product .stock {
color: #e74c3c;
font-weight: bold;
}
.product .density {
font-size: 0.9rem;
color: #7f7f7f;
}
.product .actions {
margin-top: 1rem;
}
.product .actions button {
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
border: none;
border-radius: 4px;
background: #3498db;
color: #fff;
cursor: pointer;
margin-right: 0.5rem;
}
.product .actions button:hover {
background: #2980b9;
}
@media (max-width: 768px) {
.product {
flex: 1 1 calc(50% - 1.5rem);
}
}
@media (max-width: 480px) {
.product {
flex: 1 1 100%;
}
}
.empty-state p {
text-align: center;
margin-top: 2rem;
font-size: 1.2rem;
color: #999;
}
.error-state {
text-align: center;
color: #e74c3c;
margin-top: 2rem;
}
.error-state p {
font-size: 1.2rem;
}
.error-state button {
margin-top: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
background: #e74c3c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.error-state button:hover {
background: #c0392b;
}
.focus-ring:focus {
outline: 2px solid #3498db;
}
</style>
</head>
<body>
<header>
Wallcovering Catalog
</header>
<main>
<div class="controls">
<input type="text" id="search" placeholder="Search by SKU or Name" class="focus-ring" />
<select id="filter-category" class="focus-ring">
<option value="">All Categories</option>
<option value="textured">Textured</option>
<option value="vinyl">Vinyl</option>
<option value="fabric">Fabric</option>
<option value="metallic">Metallic</option>
</select>
<input type="range" id="filter-density" min="1" max="10" value="5" class="focus-ring" />
<label for="filter-density" style="font-size: 0.9rem; margin-left: 0.5rem;">Density (1-10)</label>
<input type="number" id="filter-price" min="0" max="1000" value="500" class="focus-ring" />
<label for="filter-price" style="font-size: 0.9rem; margin-left: 0.5rem;">Max Price</label>
</div>
<div class="empty-state" id="empty-state">
<p>No products match your current filters. Try adjusting your search or filter options.</p>
</div>
<div class="error-state" id="error-state">
<p>Oops! Something went wrong. Try refreshing the page.</p>
<button onclick="handleError()">Try Again</button>
</div>
<div class="results" id="results"></div>
</main>
<script>
const products = [
{ sku: "SKU-001", name: "Ceramic Tile", category: "textured", density: 8, price: 250, stock: 100 },
{ sku: "SKU-002", name: "Vinyl Mosaic", category: "vinyl", density: 6, price: 350, stock: 50 },
{ sku: "SKU-003", name: "Fabric Stripe", category: "fabric", density: 4, price: 150, stock: 200 },
{ sku: "SKU-004", name: "Metallic Sheen", category: "metallic", density: 9, price: 450, stock: 30 },
{ sku: "SKU-005", name: "Wood Grain", category: "textured", density: 5, price: 300, stock: 150 },
{ sku: "SKU-006", name: "Plastic Panel", category: "vinyl", density: 3, price: 100, stock: 250 },
{ sku: "SKU-007", name: "Velvet Velvet", category: "fabric", density: 7, price: 200, stock: 80 },
{ sku: "SKU-008", name: "Chrome Shine", category: "metallic", density: 10, price: 500, stock: 10 },
{ sku: "SKU-009", name: "Stone Pattern", category: "textured", density: 2, price: 180, stock: 120 },
{ sku: "SKU-010", name: "Rubber Matte", category: "vinyl", density: 4, price: 220, stock: 70 },
{ sku: "SKU-011", name: "Cotton Canvas", category: "fabric", density: 5, price: 120, stock: 220 },
{ sku: "SKU-012", name: "Aluminum Foil", category: "metallic", density: 8, price: 400, stock: 40 }
];
function renderProducts(filteredProducts) {
const resultsContainer = document.getElementById('results');
resultsContainer.innerHTML = '';
if (filteredProducts.length === 0) {
document.getElementById('empty-state').style.display = 'block';
resultsContainer.style.display = 'none';
return;
}
document.getElementById('empty-state').style.display = 'none';
resultsContainer.style.display = 'flex';
filteredProducts.forEach(product => {
const productDiv = document.createElement('div');
productDiv.className = 'product';
productDiv.innerHTML = `
<h3>${product.name}</h3>
<p><strong>SKU:</strong> ${product.sku}</p>
<p class="density">Density: ${product.density}/10</p>
<p class="price">Price: $${product.price}</p>
<p class="stock">Stock: ${product.stock}</p>
<div class="actions">
<button onclick="selectProduct('${product.sku}')">Select</button>
<button onclick="addToCart('${product.sku}')">Add to Cart</button>
</div>
`;
resultsContainer.appendChild(productDiv);
});
}
function selectProduct(sku) {
alert(`Selected product: ${sku}`);
}
function addToCart(sku) {
alert(`Added ${sku} to cart`);
}
function filterProducts() {
const search = document.getElementById('search').value.toLowerCase();
const category = document.getElementById('filter-category').value;
const density = parseInt(document.getElementById('filter-density').value);
const maxPrice = parseInt(document.getElementById('filter-price').value);
const filtered = products.filter(product => {
const matchesSearch = product.name.toLowerCase().includes(search) || product.sku.toLowerCase().includes(search);
const matchesCategory = category === '' || product.category === category;
const matchesDensity = product.density <= density;
const matchesPrice = product.price <= maxPrice;
return matchesSearch && matchesCategory && matchesDensity && matchesPrice;
});
renderProducts(filtered);
}
function handleError() {
document.getElementById('error-state').style.display = 'none';
filterProducts();
}
function init() {
document.getElementById('search').addEventListener('input', filterProducts);
document.getElementById('filter-category').addEventListener('change', filterProducts);
document.getElementById('filter-density').addEventListener('input', filterProducts);
document.getElementById('filter-price').addEventListener('input', filterProducts);
filterProducts();
}
window.onload = init;
</script>
</body>
</html>