`data/artifacts/0b74c289cca4/qwen25-7b.html`

117 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>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            display: grid;
            gap: 20px;
            max-width: 80%;
            width: 600px;
        }
        .card {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: scale(1.02);
        }
        .search-box {
            margin-bottom: 20px;
            width: calc(100% - 40px);
            max-width: 560px;
        }
        .header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        th, td {
            text-align: left;
            padding: 8px;
        }
    </style>
</head>
<body>
    <input type="text" id="searchBox" class="search-box" placeholder="Search by SKU or Pattern...">
    <table class="container">
        <thead>
            <tr class="header-row">
                <th onclick="sortTable(0)">SKU</th>
                <th onclick="sortTable(1)">Pattern</th>
                <th onclick="sortTable(2)">Colorway</th>
                <th onclick="sortTable(3)">Price ($)</th>
                <th onclick="sortTable(4)">Stock</th>
            </tr>
        </thead>
        <tbody id="wallcoveringCatalog">
            <tr class="card" data-sku="W123" data-pattern="Floral" data-colorway="White" data-price="59.99" data-stock="100">SKU: W123, Pattern: Floral, Colorway: White, Price: $59.99, Stock: 100</tr>
            <tr class="card" data-sku="W456" data-pattern="Geometric" data-colorway="Black and Gold" data-price="79.99" data-stock="80">SKU: W456, Pattern: Geometric, Colorway: Black and Gold, Price: $79.99, Stock: 80</tr>
            <tr class="card" data-sku="W789" data-pattern="Stripes" data-colorway="Red and White" data-price="49.99" data-stock="150">SKU: W789, Pattern: Stripes, Colorway: Red and White, Price: $49.99, Stock: 150</tr>
            <tr class="card" data-sku="W234" data-pattern="Herringbone" data-colorway="Beige" data-price="65.99" data-stock="70">SKU: W234, Pattern: Herringbone, Colorway: Beige, Price: $65.99, Stock: 70</tr>
            <tr class="card" data-sku="W567" data-pattern="Polka Dots" data-colorway="Blue and White" data-price="54.99" data-stock="120">SKU: W567, Pattern: Polka Dots, Colorway: Blue and White, Price: $54.99, Stock: 120</tr>
            <tr class="card" data-sku="W890" data-pattern="Checkerboard" data-colorway="Black and Grey" data-price="69.99" data-stock="90">SKU: W890, Pattern: Checkerboard, Colorway: Black and Grey, Price: $69.99, Stock: 90</tr>
            <tr class="card" data-sku="W135" data-pattern="Floral" data-colorway="Yellow" data-price="57.99" data-stock="110">SKU: W135, Pattern: Floral, Colorway: Yellow, Price: $57.99, Stock: 110</tr>
            <tr class="card" data-sku="W678" data-pattern="Tie-Dye" data-colorway="Multi-Color" data-price="45.99" data-stock="200">SKU: W678, Pattern: Tie-Dye, Colorway: Multi-Color, Price: $45.99, Stock: 200</tr>
        </tbody>
    </table>
    <script>
        function sortTable(columnIndex) {
            let table, rows, switching, i, x, y, shouldSwitch;
            table = document.getElementById("wallcoveringCatalog");
            switching = true;
            while (switching) {
                switching = false;
                rows = table.rows;
                for (i = 1; i < (rows.length - 1); i++) {
                    shouldSwitch = false;
                    x = rows[i].getElementsByTagName("TD")[columnIndex];
                    y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                }
                if (shouldSwitch) {
                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                    switching = true;
                }
            }
        }

        document.getElementById('searchBox').addEventListener('input', function() {
            let input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("searchBox");
            filter = input.value.toLowerCase();
            table = document.getElementById("wallcoveringCatalog");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("TD")[0];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toLowerCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        });
    </script>
</body>
</html>