← back to Model Arena
data/artifacts/0b74c289cca4/qwen3-14b.html
236 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wallcovering Catalog</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f9f9f9;
}
header {
background: #333;
color: white;
padding: 1em;
text-align: center;
}
.search-container {
padding: 1em;
text-align: center;
}
input[type="text"] {
width: 100%;
max-width: 400px;
padding: 0.5em;
font-size: 1em;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1em;
padding: 1em;
}
.card {
background: white;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card-header {
padding: 0.5em;
background: #eee;
font-weight: bold;
text-align: center;
}
.card-body {
padding: 0.5em;
}
.card-body p {
margin: 0.2em 0;
}
.sortable {
cursor: pointer;
color: #007bff;
}
.sortable:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
.search-container input[type="text"] {
font-size: 0.9em;
}
}
</style>
</head>
<body>
<header>
<h1>Wallcovering Catalog</h1>
</header>
<div class="search-container">
<input type="text" id="searchBox" placeholder="Search by pattern, colorway, or SKU">
</div>
<div class="grid" id="catalogGrid">
<div class="card">
<div class="card-header">SKU: W001</div>
<div class="card-body">
<p><strong>Pattern:</strong> Linear Marble</p>
<p><strong>Colorway:</strong> Concrete & Beige</p>
<p><strong>Price:</strong> $18.99/sqft</p>
<p><strong>Stock:</strong> 125</p>
</div>
</div>
<div class="card">
<div class="card-header">SKU: W002</div>
<div class="card-body">
<p><strong>Pattern:</strong> Modern Chevron</p>
<p><strong>Colorway:</strong> Charcoal & Gold</p>
<p><strong>Price:</strong> $22.50/sqft</p>
<p><strong>Stock:</strong> 85</p>
</div>
</div>
<div class="card">
<div class="card-header">SKU: W003</div>
<div class="card-body">
<p><strong>Pattern:</strong> Abstract Floral</p>
<p><strong>Colorway:</strong> Emerald & Ivory</p>
<p><strong>Price:</strong> $20.00/sqft</p>
<p><strong>Stock:</strong> 60</p>
</div>
</div>
<div class="card">
<div class="card-header">SKU: W004</div>
<div class="card-body">
<p><strong>Pattern:</strong> Geometric Triangles</p>
<p><strong>Colorway:</strong> Navy & Teal</p>
<p><strong>Price:</strong> $19.75/sqft</p>
<p><strong>Stock:</strong> 90</p>
</div>
</div>
<div class="card">
<div class="card-header">SKU: W005</div>
<div class="card-body">
<p><strong>Pattern:</strong> Rustic Wood</p>
<p><strong>Colorway:</strong> Oak & Walnut</p>
<p><strong>Price:</strong> $17.50/sqft</p>
<p><strong>Stock:</strong> 150</p>
</div>
</div>
<div class="card">
<div class="card-header">SKU: W006</div>
<div class="card-body">
<p><strong>Pattern:</strong> Persian Rug</p>
<p><strong>Colorway:</strong> Turquoise & Beige</p>
<p><strong>Price:</strong> $24.00/sqft</p>
<p><strong>Stock:</strong> 55</p>
</div>
</div>
<div class="card">
<div class="card-header">SKU: W007</div>
<div class="card-body">
<p><strong>Pattern:</strong> Modern Stripe</p>
<p><strong>Colorway:</strong> Black & Silver</p>
<p><strong>Price:</strong> $21.25/sqft</p>
<p><strong>Stock:</strong> 70</p>
</div>
</div>
<div class="card">
<div class="card-header">SKU: W008</div>
<div class="card-body">
<p><strong>Pattern:</strong> Moroccan Tile</p>
<p><strong>Colorway:</strong> Blue & White</p>
<p><strong>Price:</strong> $23.75/sqft</p>
<p><strong>Stock:</strong> 40</p>
</div>
</div>
</div>
<script>
const catalogGrid = document.getElementById('catalogGrid');
const searchBox = document.getElementById('searchBox');
let cards = [];
function createCard(data) {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<div class="card-header">SKU: ${data.sku}</div>
<div class="card-body">
<p><strong>Pattern:</strong> ${data.pattern}</p>
<p><strong>Colorway:</strong> ${data.colorway}</p>
<p><strong>Price:</strong> $${data.price}/sqft</p>
<p><strong>Stock:</strong> ${data.stock}</p>
</div>
`;
return card;
}
function renderCards(filteredCards) {
catalogGrid.innerHTML = '';
cards = filteredCards.map(data => createCard(data));
catalogGrid.append(...cards);
}
function filterCards(searchTerm) {
return cards.filter(card => {
const text = card.textContent.toLowerCase();
return text.includes(searchTerm.toLowerCase());
});
}
function sortCards(field, order = 1) {
const sorted = cards.sort((a, b) => {
const aVal = a.querySelector(`p:contains('${field}')`).textContent.split(': ')[1];
const bVal = b.querySelector(`p:contains('${field}')`).textContent.split(': ')[1];
return order * aVal.localeCompare(bVal);
});
renderCards(sorted);
}
function setupSortingHeaders() {
const headers = ['SKU', 'Pattern', 'Colorway', 'Price', 'Stock'];
const headerContainer = document.createElement('div');
headerContainer.style.textAlign = 'center';
headerContainer.style.margin = '1em';
headers.forEach(header => {
const span = document.createElement('span');
span.className = 'sortable';
span.textContent = header;
span.addEventListener('click', () => {
sortCards(header, 1);
});
headerContainer.appendChild(span);
});
document.body.insertBefore(headerContainer, catalogGrid);
}
const initialData = [
{ sku: 'W001', pattern: 'Linear Marble', colorway: 'Concrete & Beige', price: '18.99', stock: '125' },
{ sku: 'W002', pattern: 'Modern Chevron', colorway: 'Charcoal & Gold', price: '22.50', stock: '85' },
{ sku: 'W003', pattern: 'Abstract Floral', colorway: 'Emerald & Ivory', price: '20.00', stock: '60' },
{ sku: 'W004', pattern: 'Geometric Triangles', colorway: 'Navy & Teal', price: '19.75', stock: '90' },
{ sku: 'W005', pattern: 'Rustic Wood', colorway: 'Oak & Walnut', price: '17.50', stock: '150' },
{ sku: 'W006', pattern: 'Persian Rug', colorway: 'Turquoise & Beige', price: '24.00', stock: '55' },
{ sku: 'W007', pattern: 'Modern Stripe', colorway: 'Black & Silver', price: '21.25', stock: '70' },
{ sku: 'W008', pattern: 'Moroccan Tile', colorway: 'Blue & White', price: '23.75', stock: '40' },
];
function init() {
const cards = initialData.map(data => createCard(data));
renderCards(cards);
setupSortingHeaders();
searchBox.addEventListener('input', () => {
const filtered = filterCards(searchBox.value);
renderCards(filtered);
});
}
init();
</script>
</body>
</html>