`data/artifacts/1a25203f4053/gemma3-12b.html`

265 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aetheria Wallcoverings - Catalog</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f8f8f8;
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 20px;
      box-sizing: border-box;
    }

    h1 {
      text-align: center;
      color: #4a76c8;
    }

    .search-filters {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .search-input, .filter-select {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-bottom: 10px;
      width: calc(30% - 5px); /* Adjust for spacing */
      box-sizing: border-box;
    }

    .filter-select {
      width: calc(25% - 5px);
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }

    .product-card {
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .product-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .product-details {
      padding: 15px;
    }

    .product-name {
      font-weight: bold;
      margin-bottom: 5px;
      color: #4a76c8;
    }

    .product-price, .product-stock {
      display: block;
      margin-top: 5px;
    }

    /* Sort Control */
    #sortSelect {
        width: calc(10% - 5px); /* Adjust for spacing */
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .density-control label {
      display: block;
      margin-bottom: 5px;
    }


    /* Empty State */
    .empty-state {
      text-align: center;
      padding: 50px;
      background-color: #f8f8f8;
      border: 1px dashed #ccc;
      margin: 20px auto;
    }

    /* Error State */
    .error-state {
        text-align: center;
        padding: 20px;
        background-color: #ffe6e6;
        border: 1px solid red;
        margin: 20px auto;
    }

  </style>
</head>
<body>
  <div class="container">
    <h1>Aetheria Wallcoverings</h1>

    <div class="search-filters">
      <input type="text" id="searchInput" placeholder="Search by name or description" class="search-input">
      <select id="filterCategory" class="filter-select">
        <option value="">All Categories</option>
        <option value="geometric">Geometric</option>
        <option value="floral">Floral</option>
        <option value="abstract">Abstract</option>
        <option value="textured">Textured</option>
      </select>
        <select id="sortSelect" class="filter-select">
            <option value="default">Sort by Default</option>
            <option value="price_asc">Price: Low to High</option>
            <option value="price_desc">Price: High to Low</option>
        </select>
      <label for="densityControl">Density:</label>
        <input type="range" id="densityControl" min="5" max="20" value="10">
    </div>

    <div class="product-grid" id="productGrid">
      <!-- Product Cards will be dynamically generated here -->
    </div>
  </div>


  <script>
    const products = [
      { id: 1, name: "Geometric Echo", category: "geometric", price: 45.99, stock: 15, image: "https://via.placeholder.com/250x200?text=Geometric+Echo" },
      { id: 2, name: "Floral Bloom", category: "floral", price: 38.50, stock: 8, image: "https://via.placeholder.com/250x200?text=Floral+Bloom" },
      { id: 3, name: "Abstract Horizon", category: "abstract", price: 52.75, stock: 22, image: "https://via.placeholder.com/250x200?text=Abstract+Horizon" },
      { id: 4, name: "Textured Stone", category: "textured", price: 61.20, stock: 5, image: "https://via.placeholder.com/250x200?text=Textured+Stone" },
      { id: 5, name: "Geometric Pulse", category: "geometric", price: 49.00, stock: 12, image: "https://via.placeholder.com/250x200?text=Geometric+Pulse" },
      { id: 6, name: "Floral Cascade", category: "floral", price: 42.30, stock: 18, image: "https://via.placeholder.com/250x200?text=Floral+Cascade" },
      { id: 7, name: "Abstract Dream", category: "abstract", price: 58.99, stock: 3, image: "https://via.placeholder.com/250x200?text=Abstract+Dream" },
      { id: 8, name: "Textured Wood", category: "textured", price: 55.60, stock: 10, image: "https://via.placeholder.com/250x200?text=Textured+Wood" },
      { id: 9, name: "Geometric Fusion", category: "geometric", price: 35.80, stock: 25, image: "https://via.placeholder.com/250x200?text=Geometric+Fusion" },
      { id: 10, name: "Floral Whisper", category: "floral", price: 47.15, stock: 7, image: "https://via.placeholder.com/250x200?text=Floral+Whisper" },
      { id: 11, name: "Abstract Flow", category: "abstract", price: 63.45, stock: 14, image: "https://via.placeholder.com/250x200?text=Abstract+Flow" },
      { id: 12, name: "Textured Canvas", category: "textured", price: 40.90, stock: 2, image: "https://via.placeholder.com/250x200?text=Textured+Canvas" }
    ];

    const searchInput = document.getElementById('searchInput');
    const filterCategorySelect = document.getElementById('filterCategory');
    const productGrid = document.getElementById('productGrid');
    const sortSelect = document.getElementById('sortSelect');
    const densityControl = document.getElementById('densityControl');

    let displayedProducts = [...products]; // Start with all products
    let isErrorState = false;

    function renderProducts() {
      productGrid.innerHTML = '';

      if (displayedProducts.length === 0) {
        productGrid.appendChild(createEmptyState());
        return;
      }

      displayedProducts.forEach(product => {
        const productCard = document.createElement('div');
        productCard.classList.add('product-card');
        productCard.innerHTML = `
          <img src="${product.image}" alt="${product.name}" class="product-image">
          <div class="product-details">
            <h2 class="product-name">${product.name}</h2>
            <p class="product-price">$${product.price.toFixed(2)}</p>
            <p class="product-stock">Stock: ${product.stock}</p>
          </div>
        `;
        productGrid.appendChild(productCard);
      });
    }

    function createEmptyState() {
      const emptyState = document.createElement('div');
      emptyState.classList.add('empty-state');
      emptyState.innerHTML = 'No products match your criteria.';
      return emptyState;
    }

     function createErrorState(errorMessage) {
        const errorState = document.createElement('div');
        errorState.classList.add('error-state');
        errorState.innerHTML = `<p>An unexpected error occurred: ${errorMessage}</p><button onclick="recoverFromError()">Retry</button>`;
        return errorState;
    }

    function recoverFromError() {
      isErrorState = false; // Reset the error state
      displayedProducts = [...products];  // Restore initial product list.
       renderProducts();
    }


    searchInput.addEventListener('input', () => {
      const searchTerm = searchInput.value.toLowerCase();
      displayedProducts = products.filter(product =>
        product.name.toLowerCase().includes(searchTerm) || product.category.toLowerCase().includes(searchTerm)
      );
      renderProducts();
    });

    filterCategorySelect.addEventListener('change', () => {
      const selectedCategory = filterCategorySelect.value;
      if (selectedCategory === '') {
        displayedProducts = [...products]; // Reset to all products
      } else {
        displayedProducts = products.filter(product => product.category === selectedCategory);
      }

      renderProducts();
    });

     sortSelect.addEventListener('change', () => {
       const sortValue = sortSelect.value;
         if (sortValue === 'default') {
           displayedProducts = [...products];
        } else if (sortValue === 'price_asc'){
            displayedProducts = displayedProducts.slice().sort((a, b) => a.price - b.price);
        } else if (sortValue === 'price_desc'){
             displayedProducts = displayedProducts.slice().sort((a, b) => b.price - a.price);
         }

       renderProducts();
     });


    densityControl.addEventListener('input', () => {
      //This is a placeholder for density control functionality.  Could be used to show fewer details/images.
      console.log(`Density set to: ${densityControl.value}`); // For demonstration purposes
    });

    // Initial render
    renderProducts();

     //Simulate an error state - remove this in production
     setTimeout(() => {
        if (Math.random() < 0.2) { // Simulate a 20% chance of error
            productGrid.innerHTML = createErrorState("Failed to retrieve products from the server.");
            isErrorState = true;
        }
    }, 2000);


  </script>
</body>
</html>