Visual Model Comparison

10 interactive components. 3 models. Each generates a complete HTML page. Click, type, interact with the live output.

GPT-5.4-mini

Claude Sonnet 4.6
8.7
Brewmode 8B
5.6
Qwen3-8B base
6.8

Gemini 3.1 Flash

Claude Sonnet 4.6
8.0
Brewmode 8B
5.1
Qwen3-8B base
6.0

Brewmode runs locally at $0/call. Claude costs ~$0.03/call. Both judges are neutral third parties.

Models
Claude Sonnet 4.6 (frontier)
Brewmode Qwen3-8B (fine-tuned on user data)
Qwen3-8B base (untuned control)
Setup
4,096 max tokens, equal for all
Plain HTML + Tailwind + vanilla JS
Thinking mode enabled for Qwen models
Try it
Click buttons, type in search boxes
Check if countdown timers tick
Test add-to-cart, quantity +/-, remove
1 Search Autocomplete GPT: 9/6/7 · Gemini: 9/6/7 +
Claude Sonnet 4.6 10,235 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Search Bar</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">
    <!-- Navigation Bar -->
    <nav class="bg-[#131921] px-4 py-2">
        <div class="max-w-7xl mx-auto flex items-center justify-between">
            <!-- Amazon Logo -->
            <div class="text-white text-xl font-bold">
                amazon
            </div>
            
            <!-- Search Bar Container -->
            <div class="flex-1 max-w-4xl mx-8 relative">
                <div class="flex">
                    <!-- Category Dropdown -->
                    <div class="relative">
                        <select id="categorySelect" class="bg-gray-200 border border-gray-300 rounded-l-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 h-10">
                            <option value="all">All</option>
                            <option value="electronics">Electronics</option>
                            <option value="books">Books</option>
                            <option value="clothing">Clothing</option>
                            <option value="home">Home & Garden</option>
                        </select>
                    </div>
                    
                    <!-- Search Input -->
                    <div class="flex-1 relative">
                        <input 
                            type="text" 
                            id="searchInput" 
                            placeholder="Search Amazon"
                            class="w-full px-4 py-2 border-t border-b border-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-500 h-10"
                            autocomplete="off"
                        >
                        
                        <!-- Autocomplete Dropdown -->
                        <div id="autocompleteDropdown" class="absolute top-full left-0 right-0 bg-white border border-gray-300 border-t-0 rounded-b-md shadow-lg z-10 hidden max-h-64 overflow-y-auto">
                            <!-- Suggestions will be populated here -->
                        </div>
                    </div>
                    
                    <!-- Search Button -->
                    <button id="searchButton" class="bg-orange-400 hover:bg-orange-500 text-black px-6 py-2 rounded-r-md focus:outline-none focus:ring-2 focus:ring-orange-600 h-10 flex items-center justify-center">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Right Nav Items -->
            <div class="flex items-center space-x-4 text-white text-sm">
                <div>Sign In</div>
                <div>Cart</div>
            </div>
        </div>
    </nav>
    
    <!-- Main Content -->
    <div class="max-w-7xl mx-auto p-8">
        <h1 class="text-2xl font-bold text-gray-800 mb-4">Search for products</h1>
        <p class="text-gray-600">Start typing to see autocomplete suggestions...</p>
    </div>

    <script>
        // Hardcoded product suggestions
        const products = [
            'iPhone 15',
            'MacBook Pro',
            'AirPods Pro',
            'iPad Air',
            'Apple Watch',
            'Samsung Galaxy',
            'Sony Headphones',
            'Kindle Paperwhite'
        ];

        const searchInput = document.getElementById('searchInput');
        const autocompleteDropdown = document.getElementById('autocompleteDropdown');
        const searchButton = document.getElementById('searchButton');

        // Filter products based on input
        function filterProducts(query) {
            if (!query.trim()) return [];
            return products.filter(product => 
                product.toLowerCase().includes(query.toLowerCase())
            ).slice(0, 8); // Limit to 8 suggestions
        }

        // Create suggestion HTML
        function createSuggestionHTML(product, query) {
            const regex = new RegExp(`(${query})`, 'gi');
            const highlighted = product.replace(regex, '<strong>$1</strong>');
            return `
                <div class="suggestion-item px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0" data-product="${product}">
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        <span class="text-sm">${highlighted}</span>
                    </div>
                </div>
            `;
        }

        // Show autocomplete suggestions
        function showAutocomplete(suggestions, query) {
            if (suggestions.length === 0) {
                autocompleteDropdown.classList.add('hidden');
                return;
            }

            const html = suggestions.map(product => createSuggestionHTML(product, query)).join('');
            autocompleteDropdown.innerHTML = html;
            autocompleteDropdown.classList.remove('hidden');

            // Add click event listeners to suggestions
            const suggestionItems = autocompleteDropdown.querySelectorAll('.suggestion-item');
            suggestionItems.forEach(item => {
                item.addEventListener('click', function() {
                    const product = this.getAttribute('data-product');
                    searchInput.value = pro
Brewmode 8B 2,920 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Amazon Search Bar</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <div class="max-w-md mx-auto p-6">
        <div class="relative">
            <input 
                type="text" 
                id="searchInput" 
                placeholder="Search Amazon..." 
                class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white"
            >
            <div id="suggestions" class="absolute w-full mt-1 bg-white border border-gray-300 rounded-lg max-h-60 overflow-y-auto hidden">
                <ul class="divide-y divide-gray-200">
                    <!-- Suggestions will appear here dynamically -->
                </ul>
            </div>
        </div>
    </div>

    <script>
        const products = [
            "Echo Dot (4th Gen) - Smart Speaker",
            "Apple AirPods Pro with Case",
            "Sony WH-1000XM5 Noise-Canceling Headphones",
            "Amazon Fire TV Stick with Alexa Built-In",
            "Dyson V15 Detect Cordless Vacuum",
            "Instant Pot Plus 7-in-1 Pressure Cooker",
            "GoPro Hero 10 Black Action Camera",
            "Bose SoundLink Revolve Plus Speaker",
            "Philips Hue White and Color Ambiance Bulbs",
            "Ninja Foodi 6-in-1 Indoor Grill"
        ];

        const searchInput = document.getElementById('searchInput');
        const suggestionsList = document.querySelector('#suggestions ul');

        searchInput.addEventListener('input', () => {
            const query = searchInput.value.toLowerCase();
            suggestionsList.innerHTML = '';

            if (query.length > 0) {
                const filtered = products.filter(product => 
                    product.toLowerCase().includes(query)
                );

                if (filtered.length > 0) {
                    filtered.forEach(product => {
                        const li = document.createElement('li');
                        li.className = 'px-4 py-2 hover:bg-gray-100 cursor-pointer';
                        li.textContent = product;
                        li.addEventListener('click', () => {
                            searchInput.value = product;
                            suggestionsList.classList.remove('block');
                            suggestionsList.classList.add('hidden');
                        });
                        suggestionsList.appendChild(li);
                    });
                    suggestionsList.classList.remove('hidden');
                    suggestionsList.classList.add('block');
                }
            } else {
                suggestionsList.classList.remove('block');
                suggestionsList.classList.add('hidden');
            }
        });
    </script>
</body>
</html>
Qwen3-8B base 3,346 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Search Bar with Autocomplete</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white">

  <!-- Navigation Bar -->
  <nav class="bg-[#131921] p-4 shadow-lg">
    <div class="container mx-auto flex items-center justify-between">
      <div class="text-xl font-bold">Amazon</div>
      <div class="flex items-center">
        <!-- Category Dropdown -->
        <div class="relative">
          <select class="bg-gray-800 text-white border border-gray-700 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-orange-500">
            <option>Electronics</option>
            <option>Books</option>
            <option>Home & Kitchen</option>
            <option>Apps & Games</option>
          </select>
        </div>
        <!-- Search Bar -->
        <div class="relative ml-4">
          <input type="text" id="searchInput" class="bg-gray-800 text-white border border-gray-700 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-500 w-64" placeholder="Search Amazon" />
          <button id="searchButton" class="bg-orange-500 text-white px-4 py-2 rounded-r-md hover:bg-orange-600 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
        <!-- Autocomplete Dropdown -->
        <div id="autocomplete" class="absolute bg-gray-800 border border-gray-700 rounded-md mt-1 w-64 hidden max-h-64 overflow-y-auto z-10"></div>
      </div>
    </div>
  </nav>

  <script>
    const searchInput = document.getElementById('searchInput');
    const autocomplete = document.getElementById('autocomplete');
    const searchButton = document.getElementById('searchButton');

    const products = [
      "iPhone 15",
      "MacBook Pro",
      "AirPods Pro",
      "iPad Air",
      "Apple Watch",
      "Samsung Galaxy",
      "Sony Headphones",
      "Kindle Paperwhite"
    ];

    searchInput.addEventListener('input', () => {
      autocomplete.innerHTML = '';
      autocomplete.classList.add('hidden');

      const query = searchInput.value.toLowerCase();
      const filtered = products.filter(product => product.toLowerCase().includes(query));

      if (filtered.length > 0) {
        autocomplete.classList.remove('hidden');
        filtered.forEach(product => {
          const div = document.createElement('div');
          div.textContent = product;
          div.classList.add('p-2', 'cursor-pointer', 'hover:bg-orange-500', 'hover:text-white');
          div.addEventListener('click', () => {
            searchInput.value = product;
            autocomplete.classList.add('hidden');
          });
          autocomplete.appendChild(div);
        });
      }
    });

    searchButton.addEventListener('click', () => {
      const query = searchInput.value.trim();
      if (query) {
        alert(`Searching for: ${query}`);
      }
    });
  </script>
</body>
</html>
2 Shopping Cart GPT: 9/5/7 · Gemini: 9/7/7 +
Claude Sonnet 4.6 10,354 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Shopping Cart</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen py-8">
    <div class="max-w-4xl mx-auto px-4">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h1 class="text-2xl font-bold text-gray-800 mb-6">Shopping Cart</h1>
            
            <!-- Cart Items -->
            <div id="cart-items" class="space-y-4">
                <!-- Item 1: Wireless Headphones -->
                <div class="cart-item border-b border-gray-200 pb-4" data-price="79.99">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="w-16 h-16 bg-blue-500 rounded-md flex items-center justify-center">
                                <span class="text-white text-xs font-bold">🎧</span>
                            </div>
                            <div>
                                <h3 class="text-lg font-medium text-gray-800">Wireless Headphones</h3>
                                <p class="text-xl font-bold text-gray-900">$79.99</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <!-- Quantity Controls -->
                            <div class="flex items-center border border-gray-300 rounded">
                                <button class="quantity-btn minus px-3 py-1 text-gray-600 hover:bg-gray-100" data-action="decrease">-</button>
                                <span class="quantity px-3 py-1 border-l border-r border-gray-300">1</span>
                                <button class="quantity-btn plus px-3 py-1 text-gray-600 hover:bg-gray-100" data-action="increase">+</button>
                            </div>
                            <button class="remove-btn text-blue-600 hover:text-blue-800 underline">Remove</button>
                        </div>
                    </div>
                </div>

                <!-- Item 2: USB-C Cable -->
                <div class="cart-item border-b border-gray-200 pb-4" data-price="12.99">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="w-16 h-16 bg-green-500 rounded-md flex items-center justify-center">
                                <span class="text-white text-xs font-bold">🔌</span>
                            </div>
                            <div>
                                <h3 class="text-lg font-medium text-gray-800">USB-C Cable</h3>
                                <p class="text-xl font-bold text-gray-900">$12.99</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <!-- Quantity Controls -->
                            <div class="flex items-center border border-gray-300 rounded">
                                <button class="quantity-btn minus px-3 py-1 text-gray-600 hover:bg-gray-100" data-action="decrease">-</button>
                                <span class="quantity px-3 py-1 border-l border-r border-gray-300">1</span>
                                <button class="quantity-btn plus px-3 py-1 text-gray-600 hover:bg-gray-100" data-action="increase">+</button>
                            </div>
                            <button class="remove-btn text-blue-600 hover:text-blue-800 underline">Remove</button>
                        </div>
                    </div>
                </div>

                <!-- Item 3: Phone Case -->
                <div class="cart-item border-b border-gray-200 pb-4" data-price="24.99">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="w-16 h-16 bg-purple-500 rounded-md flex items-center justify-center">
                                <span class="text-white text-xs font-bold">📱</span>
                            </div>
                            <div>
                                <h3 class="text-lg font-medium text-gray-800">Phone Case</h3>
                                <p class="text-xl font-bold text-gray-900">$24.99</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <!-- Quantity Controls -->
                            <div class="flex items-center border border-gray-300 rounded">
                                <button class="quantity-btn minus px-3 py-1 text-gray-600 hover:bg-gray-100" data-action="decrease">-</button>
                                <span class="quantity px-3 py-1 border-l border-r border-gray-300">1</span>
                                <button class="quantity-btn plus px-3 py-1 text-gray-600 hover:bg-gray-100" data-action="increase">+</button>
                            </div>
                            <button class="remove-btn text-blue-600 hover:text-blue-800 underline">Remove</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cart Summary -->
            <div class="mt-6 pt-4 border-t border-gray-200">
                <div class="flex justify-between items-center mb-4">
                    <div class="text-lg">
                        <span class="text-gray-600">Subtotal </span>
                        <span id="item-count" class="text-gray-600">(3 items)</span>:
                        <span id="subtotal" class="font-bold text-xl text-gray-900 ml-2">$117.97</span>
                    </div>
                </div>
                
                <!-- Checko
Brewmode 8B 4,262 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Cart</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
  <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
    <h1 class="text-2xl font-bold mb-4">Your Cart</h1>
    
    <div class="space-y-4">
      <!-- Item 1 -->
      <div class="flex items-center justify-between p-4 border border-gray-200 rounded">
        <div class="flex items-center">
          <img src="https://via.placeholder.com/60" alt="Headphones" class="w-12 h-12 rounded mr-4" />
          <div>
            <h2 class="font-medium">Wireless Headphones</h2>
            <p class="text-sm text-gray-500">$79.99</p>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          <button onclick="updateQuantity(this, 1)" class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">-</button>
          <span id="qty1">1</span>
          <button onclick="updateQuantity(this, -1)" class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">+</button>
          <button onclick="removeItem(1)" class="text-gray-500 hover:text-red-500">Remove</button>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="flex items-center justify-between p-4 border border-gray-200 rounded">
        <div class="flex items-center">
          <img src="https://via.placeholder.com/60" alt="Cable" class="w-12 h-12 rounded mr-4" />
          <div>
            <h2 class="font-medium">USB-C Cable</h2>
            <p class="text-sm text-gray-500">$12.99</p>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          <button onclick="updateQuantity(this, 2)" class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">-</button>
          <span id="qty2">1</span>
          <button onclick="updateQuantity(this, -2)" class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">+</button>
          <button onclick="removeItem(2)" class="text-gray-500 hover:text-red-500">Remove</button>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="flex items-center justify-between p-4 border border-gray-200 rounded">
        <div class="flex items-center">
          <img src="https://via.placeholder.com/60" alt="Case" class="w-12 h-12 rounded mr-4" />
          <div>
            <h2 class="font-medium">Phone Case</h2>
            <p class="text-sm text-gray-500">$24.99</p>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          <button onclick="updateQuantity(this, 3)" class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">-</button>
          <span id="qty3">1</span>
          <button onclick="updateQuantity(this, -3)" class="px-2 py-1 bg-gray-200 rounded hover:bg-gray-300">+</button>
          <button onclick="removeItem(3)" class="text-gray-500 hover:text-red-500">Remove</button>
        </div>
      </div>
    </div>

    <div class="mt-6 p-4 bg-gray-50 rounded">
      <h2 class="font-medium mb-2">Subtotal</h2>
      <p class="text-2xl font-bold text-gray-800" id="subtotal">$117.97</p>
    </div>

    <button onclick="window.location.href='checkout.html'" class="mt-6 w-full py-3 px-4 bg-black text-white rounded hover:bg-gray-800 font-medium">Proceed to Checkout</button>
  </div>

  <script>
    const prices = [79.99, 12.99, 24.99];
    const quantities = [1, 1, 1];
    const subtotalEl = document.getElementById('subtotal');

    function updateQuantity(button, delta) {
      const item = button.closest('div');
      const qtyEl = item.querySelector('span');
      const idx = Array.from(item.parentElement.children).indexOf(item);
      
      if (quantities[idx] + delta >= 1) {
        quantities[idx] += delta;
        qtyEl.textContent = quantities[idx];
        updateSubtotal();
      }
    }

    function removeItem(index) {
      quantities[index - 1] = 1;
      document.getElementById(`qty${index}`).textContent = 1;
      updateSubtotal();
    }

    function updateSubtotal() {
      const total = quantities.reduce((sum, q, i) => sum + q * prices[i], 0);
      subtotalEl.textContent = `$${total.toFixed(2)}`;
    }
  </script>
</body>
</html>
Qwen3-8B base 4,525 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Shopping Cart</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="bg-white shadow-lg rounded-lg p-6 w-full max-w-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800">Shopping Cart</h2>

    <div class="space-y-4">
      <!-- Item 1 -->
      <div class="flex items-center border-b pb-2">
        <div class="w-16 h-16 bg-blue-500 rounded flex items-center justify-center text-white text-xl mr-4">
          H
        </div>
        <div class="flex-1">
          <h3 class="font-medium text-gray-800">Wireless Headphones</h3>
          <p class="text-gray-600">$79.99</p>
        </div>
        <div class="flex items-center space-x-2">
          <button onclick="changeQuantity('item1', -1)" class="bg-gray-200 text-gray-700 px-2 py-1 rounded">-</button>
          <span id="qty1" class="w-8 text-center">1</span>
          <button onclick="changeQuantity('item1', 1)" class="bg-gray-200 text-gray-700 px-2 py-1 rounded">+</button>
          <a href="#" onclick="removeItem('item1')" class="text-red-500 hover:text-red-700 ml-4">Remove</a>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="flex items-center border-b pb-2">
        <div class="w-16 h-16 bg-green-500 rounded flex items-center justify-center text-white text-xl mr-4">
          C
        </div>
        <div class="flex-1">
          <h3 class="font-medium text-gray-800">USB-C Cable</h3>
          <p class="text-gray-600">$12.99</p>
        </div>
        <div class="flex items-center space-x-2">
          <button onclick="changeQuantity('item2', -1)" class="bg-gray-200 text-gray-700 px-2 py-1 rounded">-</button>
          <span id="qty2" class="w-8 text-center">1</span>
          <button onclick="changeQuantity('item2', 1)" class="bg-gray-200 text-gray-700 px-2 py-1 rounded">+</button>
          <a href="#" onclick="removeItem('item2')" class="text-red-500 hover:text-red-700 ml-4">Remove</a>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="flex items-center border-b pb-2">
        <div class="w-16 h-16 bg-purple-500 rounded flex items-center justify-center text-white text-xl mr-4">
          P
        </div>
        <div class="flex-1">
          <h3 class="font-medium text-gray-800">Phone Case</h3>
          <p class="text-gray-600">$24.99</p>
        </div>
        <div class="flex items-center space-x-2">
          <button onclick="changeQuantity('item3', -1)" class="bg-gray-200 text-gray-700 px-2 py-1 rounded">-</button>
          <span id="qty3" class="w-8 text-center">1</span>
          <button onclick="changeQuantity('item3', 1)" class="bg-gray-200 text-gray-700 px-2 py-1 rounded">+</button>
          <a href="#" onclick="removeItem('item3')" class="text-red-500 hover:text-red-700 ml-4">Remove</a>
        </div>
      </div>
    </div>

    <!-- Subtotal -->
    <div class="mt-6 pt-4 border-t flex justify-between items-center">
      <p class="font-medium text-gray-800">Subtotal:</p>
      <p id="subtotal" class="text-xl font-bold text-gray-800">$117.97</p>
    </div>

    <!-- Checkout Button -->
    <button onclick="alert('Checkout clicked!')" class="mt-6 w-full bg-yellow-500 text-white py-2 px-4 rounded hover:bg-yellow-600 transition">
      Checkout
    </button>
  </div>

  <script>
    const prices = {
      'item1': 79.99,
      'item2': 12.99,
      'item3': 24.99
    };

    const quantities = {
      'item1': 1,
      'item2': 1,
      'item3': 1
    };

    const quantityElements = {
      'item1': document.getElementById('qty1'),
      'item2': document.getElementById('qty2'),
      'item3': document.getElementById('qty3')
    };

    function updateSubtotal() {
      let total = 0;
      for (const item in prices) {
        total += prices[item] * quantities[item];
      }
      document.getElementById('subtotal').textContent = `$${total.toFixed(2)}`;
    }

    function changeQuantity(item, delta) {
      if (quantities[item] + delta < 1) return;
      if (quantities[item] + delta > 10) return;

      quantities[item] += delta;
      quantityElements[item].textContent = quantities[item];
      updateSubtotal();
    }

    function removeItem(item) {
      quantities[item] = 0;
      quantityElements[item].textContent = 0;
      updateSubtotal();
    }
  </script>
</body>
</html>
3 Image Gallery + Zoom GPT: 8/6/4 · Gemini: 8/4/5 +
Claude Sonnet 4.6 9,658 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Product Image Gallery</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .zoom-lens {
            position: absolute;
            border: 2px solid #000;
            width: 100px;
            height: 100px;
            pointer-events: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(1px);
        }
        
        .zoom-result {
            position: absolute;
            right: -220px;
            top: 0;
            width: 200px;
            height: 200px;
            border: 1px solid #d1d5db;
            background-repeat: no-repeat;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        }
        
        .main-image-container:hover .zoom-lens {
            display: block;
        }
        
        .main-image-container:hover .zoom-result {
            display: block;
        }
        
        .zoom-lens,
        .zoom-result {
            display: none;
        }
        
        .thumbnail-ring {
            box-shadow: 0 0 0 2px #ff9500;
        }
        
        .image-transition {
            transition: opacity 0.3s ease-in-out;
        }
    </style>
</head>
<body class="bg-gray-100 p-8">
    <div class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow-lg">
        <h1 class="text-2xl font-bold mb-6 text-gray-800">Product Gallery</h1>
        
        <!-- Main Image Area -->
        <div class="relative mb-4">
            <div class="main-image-container relative w-96 h-96 mx-auto border border-gray-200 rounded-lg overflow-hidden bg-white cursor-crosshair">
                <img 
                    id="mainImage" 
                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23ef4444'/%3E%3Ctext x='200' y='200' text-anchor='middle' dy='0.3em' font-family='Arial' font-size='24' fill='white'%3EProduct Image 1%3C/text%3E%3C/svg%3E"
                    alt="Main Product Image" 
                    class="w-full h-full object-cover image-transition"
                >
                <div class="zoom-lens"></div>
                <div class="zoom-result"></div>
            </div>
        </div>
        
        <!-- Thumbnails -->
        <div class="flex justify-center space-x-3">
            <div class="thumbnail w-16 h-16 border-2 border-gray-200 rounded cursor-pointer hover:border-gray-400 transition-colors thumbnail-ring" 
                 data-index="0"
                 data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23ef4444'/%3E%3Ctext x='200' y='200' text-anchor='middle' dy='0.3em' font-family='Arial' font-size='24' fill='white'%3EProduct Image 1%3C/text%3E%3C/svg%3E">
                <div class="w-full h-full bg-red-500 rounded flex items-center justify-center text-white text-xs font-medium">
                    IMG 1
                </div>
            </div>
            
            <div class="thumbnail w-16 h-16 border-2 border-gray-200 rounded cursor-pointer hover:border-gray-400 transition-colors" 
                 data-index="1"
                 data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%2306b6d4'/%3E%3Ctext x='200' y='200' text-anchor='middle' dy='0.3em' font-family='Arial' font-size='24' fill='white'%3EProduct Image 2%3C/text%3E%3C/svg%3E">
                <div class="w-full h-full bg-cyan-500 rounded flex items-center justify-center text-white text-xs font-medium">
                    IMG 2
                </div>
            </div>
            
            <div class="thumbnail w-16 h-16 border-2 border-gray-200 rounded cursor-pointer hover:border-gray-400 transition-colors" 
                 data-index="2"
                 data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%2365a30d'/%3E%3Ctext x='200' y='200' text-anchor='middle' dy='0.3em' font-family='Arial' font-size='24' fill='white'%3EProduct Image 3%3C/text%3E%3C/svg%3E">
                <div class="w-full h-full bg-green-600 rounded flex items-center justify-center text-white text-xs font-medium">
                    IMG 3
                </div>
            </div>
            
            <div class="thumbnail w-16 h-16 border-2 border-gray-200 rounded cursor-pointer hover:border-gray-400 transition-colors" 
                 data-index="3"
                 data-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%237c3aed'/%3E%3Ctext x='200' y='200' text-anchor='middle' dy='0.3em' font-family='Arial' font-size='24' fill='white'%3EProduct Image 4%3C/text%3E%3C/svg%3E">
                <div class="w-full h-full bg-purple-600 rounded flex items-center justify-center text-white text-xs font-medium">
                    IMG 4
                </div>
            </div>
        </div>
        
        <!-- Product Info -->
        <div class="mt-6 text-center">
            <h2 class="text-xl font-semibold text-gray-800 mb-2">Sample Product</h2>
            <p class="text-gray-600">Click thumbnails to change images. Hover main image for zoom effect.</p>
        </div>
    </div>

    <script>
        // Get DOM elements
        const mainImage = document.getElementById('mainImage');
        const thumbnails = document.querySelectorAll('.thumbnail');
        const mainImageContainer = document.querySelector('.main-image-container');
        const zoomLens = document.querySelector('.zoom-lens');
        const zoomResult = document.querySelector('.zoom-result');
Brewmode 8B 12,894 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Product Gallery</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .thumbnail:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .thumbnail:focus {
            outline: none;
        }
        .main-image:hover {
            transform: scale(1.03);
            box-shadow: 0 6px 18px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <h1 class="text-3xl font-bold mb-8">Amazon Product Gallery</h1>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
            <!-- Thumbnails -->
            <div class="thumbnail cursor-pointer" data-image="https://images.unsplash.com/photo-1620798235730-b2741703026e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHxpY29uYWwlc3JjYW58ZW58MHx8fHwxNzI4NjM5MjQ0fDA&ixlib=rb-4.0.3&w=600&h=600&fit=crop" onclick="showImage(this)">
                <img src="https://images.unsplash.com/photo-1620798235730-b2741703026e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHxpY29uYWwlc3JjYW58ZW58MHx8fHwxNzI4NjM5MjQ0fDA&ixlib=rb-4.0.3&w=200&h=200&fit=crop" alt="Product 1" class="w-full h-48 object-cover rounded-lg">
                <div class="text-center p-2">
                    <p class="text-xs font-medium text-gray-600">Product 1</p>
                </div>
            </div>
            <div class="thumbnail cursor-pointer" data-image="https://images.unsplash.com/photo-1620798235730-b2741703026e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHxpY29uYWwlc3JjYW58ZW58MHx8fHwxNzI4NjM5MjQ0fDA&ixlib=rb-4.0.3&w=600&h=600&fit=crop" onclick="showImage(this)">
                <img src="https://images.unsplash.com/photo-1620798235730-b2741703026e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHxpY29uYWwlc3JjYW58ZW58MHx8fHwxNzI4NjM5MjQ0fDA&ixlib=rb-4.0.3&w=200&h=200&fit=crop" alt="Product 2" class="w-full h-48 object-cover rounded-lg">
                <div class="text-center p-2">
                    <p class="text-xs font-medium text-gray-600">Product 2</p>
                </div>
            </div>
            <div class="thumbnail cursor-pointer" data-image="https://images.unsplash.com/photo-1620798235730-b2741703026e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHxpY29uYWwlc3JjYW58ZW58MHx8fHwxNzI4NjM5MjQ0fDA&ixlib=rb-4.0.3&w=600&h=600&fit=crop" onclick="showImage(this)">
                <img src="https://images.unsplash.com/photo-1620798235730-b2741703026e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHxpY29uYWwlc3JjYW58ZW58MHx8fHwxNzI4NjM5MjQ0fDA&ixlib=rb-4.0.3&w=200&h=200&fit=crop" alt="Product 3" class="w-full h-48 object-cover rounded-lg">
                <div class="text-center p-2">
                    <p class="text-xs font-medium text-gray-600">Product 3</p>
                </div>
            </div>
            <div class="thumbnail cursor-pointer" data-image="https://images.unsplash.com/photo-1620798235730-b2741703026e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHxpY29uYWwlc3JjYW58ZW58MHx8fHwxNzI4NjM5MjQ0fDA&ixlib=rb-4.0.3&w=600&h=600&fit=crop" onclick="showImage(this)">
                <img src="https://images.unsplash.com/photo-1620798235730-b2741703026e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHxpY29uYWwlc3JjYW58ZW58MHx8fHwxNzI4NjM5MjQ0fDA&ixlib=rb-4.0.3&w=200&h=200&fit=crop" alt="Product 4" class="w-full h-48 object-cover rounded-lg">
                <div class="text-center p-2">
                    <p class="text-xs font-medium text-gray-600">Product 4</p>
                </div>
            </div>
        </div>
        
        <!-- Main image display -->
        <div class="main-image border border-gray-300 rounded-lg overflow-hidden shadow-lg mb-8">
            <img id="mainImage" src="https://images.unsplash.com/photo-1620798235730-b2741703026e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHxpY29uYWwlc3JjYW58ZW58MHx8fHwxNzI4NjM5MjQ0fDA&ixlib=rb-4.0.3&w=800&h=800&fit=crop" alt="Main Product Image" class="w-full h-auto object-cover">
        </div>
        
        <!-- Product details -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-2xl font-bold mb-4">Product Details</h2>
            <p class="text-gray-600 mb-4">This is a high-quality product with advanced features and exceptional performance. It's designed to meet the highest standards of excellence and reliability.</p>
            <div class="flex items-center mb-4">
                <span class="text-3xl font-bold text-gray-900 mr-2">$99.99</span>
                <span class="text-sm text-gray-500">In stock</span>
            </div>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors">
                Add to Cart
            </button>
        </div>
        
        <!-- Additional images -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-white rounded-lg shadow-lg p-4">
                <h3 class="text-lg font-semibold mb-2">Product Specifications</h3>
                <ul class="space-y-1 text-sm text-gray-600">
                    <li>Dimensions: 12" x 8" x 4"</li>
                    <li>Weight: 3.5 lbs</li>
                    <li>Material: Premium aluminum alloy</li>
                    <li>Power Source: Rechargeable battery</li>
                    <li>Warranty: 2 years</li>
                </ul>
            </div>
            <div class="bg-white rounded-lg shadow-lg p-4">
                <h3 class="text-lg font-semibold mb-2">Customer Reviews</h3>
                <div class="flex items-center mb-2">
                    <span class="text-yellow-400 text-2xl mr-1">⭐⭐⭐⭐⭐</span>
                    <span class="text-gray-600 text-sm">4.8/5</span>
Qwen3-8B base 3,315 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Product Image Gallery</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen">

  <div class="w-full max-w-4xl">
    <!-- Main Image Area -->
    <div class="relative mb-4">
      <img 
        id="mainImage" 
        src="https://via.placeholder.com/400x400?text=Product+Image" 
        alt="Product" 
        class="w-full h-40 object-contain"
      />
      <!-- Zoom Lens on Hover -->
      <div id="zoomLens" class="absolute inset-0 hidden flex items-center justify-center">
        <div class="w-20 h-20 bg-white border-4 border-gray-300 rounded-full flex items-center justify-center">
          <div class="w-12 h-12 bg-gray-300 rounded-full"></div>
        </div>
      </div>
    </div>

    <!-- Thumbnails -->
    <div class="flex space-x-2">
      <div class="w-16 h-16 bg-red-500 rounded-md flex items-center justify-center cursor-pointer" 
           data-image="https://via.placeholder.com/400x400?text=Red+Image" 
           onclick="changeImage(this)">
        <span class="text-white text-sm">1</span>
      </div>
      <div class="w-16 h-16 bg-blue-500 rounded-md flex items-center justify-center cursor-pointer" 
           data-image="https://via.placeholder.com/400x400?text=Blue+Image" 
           onclick="changeImage(this)">
        <span class="text-white text-sm">2</span>
      </div>
      <div class="w-16 h-16 bg-green-500 rounded-md flex items-center justify-center cursor-pointer" 
           data-image="https://via.placeholder.com/400x400?text=Green+Image" 
           onclick="changeImage(this)">
        <span class="text-white text-sm">3</span>
      </div>
      <div class="w-16 h-16 bg-yellow-500 rounded-md flex items-center justify-center cursor-pointer" 
           data-image="https://via.placeholder.com/400x400?text=Yellow+Image" 
           onclick="changeImage(this)">
        <span class="text-white text-sm">4</span>
      </div>
    </div>
  </div>

  <script>
    // JavaScript to handle image switching
    let activeThumb = null;

    function changeImage(thumbnail) {
      // Remove active ring from all thumbnails
      document.querySelectorAll('.flex > div').forEach(thumb => {
        thumb.classList.remove('ring-2', 'ring-white');
      });

      // Add active ring to the clicked thumbnail
      thumbnail.classList.add('ring-2', 'ring-white');

      // Update main image
      const mainImage = document.getElementById('mainImage');
      const zoomLens = document.getElementById('zoomLens');
      mainImage.src = thumbnail.getAttribute('data-image');
      mainImage.classList.remove('opacity-50');
      zoomLens.classList.remove('hidden');

      // Set active thumbnail
      activeThumb = thumbnail;
    }

    // Hover effect for zoom lens
    const mainImage = document.getElementById('mainImage');
    mainImage.addEventListener('mouseenter', () => {
      document.getElementById('zoomLens').classList.remove('hidden');
    });

    mainImage.addEventListener('mouseleave', () => {
      document.getElementById('zoomLens').classList.add('hidden');
    });
  </script>
</body>
</html>
4 Star Rating Filter GPT: 9/7/6 · Gemini: 9/6/7 +
Claude Sonnet 4.6 6,646 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Star Rating Filter</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8">
    <div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-sm">
        <h2 class="text-lg font-semibold mb-4 text-gray-800">Customer Reviews</h2>
        
        <!-- Selected filter display -->
        <div id="selectedFilter" class="hidden mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
            <span class="text-blue-800 font-medium"></span>
        </div>

        <!-- Rating filters -->
        <div class="space-y-2">
            <!-- 5 stars -->
            <div class="rating-row flex items-center p-2 rounded cursor-pointer hover:bg-gray-50" data-stars="5">
                <div class="flex items-center">
                    <div class="star-container flex">
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                    </div>
                    <span class="ml-2 text-blue-600 hover:underline">& Up</span>
                </div>
                <span class="ml-auto text-gray-600">(4521)</span>
            </div>

            <!-- 4 stars -->
            <div class="rating-row flex items-center p-2 rounded cursor-pointer hover:bg-gray-50" data-stars="4">
                <div class="flex items-center">
                    <div class="star-container flex">
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                    </div>
                    <span class="ml-2 text-blue-600 hover:underline">& Up</span>
                </div>
                <span class="ml-auto text-gray-600">(3892)</span>
            </div>

            <!-- 3 stars -->
            <div class="rating-row flex items-center p-2 rounded cursor-pointer hover:bg-gray-50" data-stars="3">
                <div class="flex items-center">
                    <div class="star-container flex">
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                    </div>
                    <span class="ml-2 text-blue-600 hover:underline">& Up</span>
                </div>
                <span class="ml-auto text-gray-600">(2105)</span>
            </div>

            <!-- 2 stars -->
            <div class="rating-row flex items-center p-2 rounded cursor-pointer hover:bg-gray-50" data-stars="2">
                <div class="flex items-center">
                    <div class="star-container flex">
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                    </div>
                    <span class="ml-2 text-blue-600 hover:underline">& Up</span>
                </div>
                <span class="ml-auto text-gray-600">(987)</span>
            </div>

            <!-- 1 star -->
            <div class="rating-row flex items-center p-2 rounded cursor-pointer hover:bg-gray-50" data-stars="1">
                <div class="flex items-center">
                    <div class="star-container flex">
                        <span class="star text-yellow-400 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                        <span class="star text-gray-300 text-lg">★</span>
                    </div>
                    <span class="ml-2 text-blue-600 hover:underline">& Up</span>
                </div>
                <span class="ml-auto text-gray-600">(342)</span>
            </div>
        </div>
    </div>

    <script>
        let selectedRating = null;

        // Get all rating rows
        const ratingRows = document.querySelectorAll('.rating-row');
        const selectedFilterDiv = document.getElementById('selectedFilter');
        const selectedFilterText = selectedFilterDiv.querySelector('span');

        // Add click event listeners to each row
        ratingRows.forEach(row => {
            row.addEventListener('click', function() {
                const stars = this.getAttribute('data-stars');
                
                // If clicking the same row, deselect it
                if (selectedRating === stars) {
                    deselectAll();
                    selectedRating = null;
                    hideSelectedFilter();
                } else {
                    // Deselect all first
                    deselectAll();
                    
                    // Select this row
                    this.classList.add('bg-blue-100', 'border', 'border-blue-300');
                    selectedRating = stars;
                    sho
Brewmode 8B 5,860 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Star Rating Filter</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-900 font-sans">
  <div class="max-w-md mx-auto py-8 px-4">
    <div class="bg-white rounded-lg shadow-md p-6 mb-4">
      <h2 class="text-lg font-semibold mb-4">Filter by Star Rating</h2>
      <div class="space-y-2">
        <!-- Star rating rows -->
        <div class="flex items-center space-x-1">
          <div class="flex items-center">
            <!-- Star 5 -->
            <input 
              type="radio" 
              id="star-5" 
              name="rating" 
              value="5" 
              class="sr-only"
              checked
            />
            <label 
              for="star-5" 
              class="flex items-center cursor-pointer"
            >
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L24 17.77l-6.18 3.25L12 22l-6.17-3.25L4 17.77l5.18-6.88-1.18-6.88L2 9.27l5.09-4.87L12 2z" />
              </svg>
              <span class="ml-1 text-sm font-medium text-gray-700">5 stars</span>
            </label>
          </div>
          <span class="text-sm text-gray-500">500</span>
        </div>
        
        <div class="flex items-center space-x-1">
          <div class="flex items-center">
            <!-- Star 4 -->
            <input 
              type="radio" 
              id="star-4" 
              name="rating" 
              value="4" 
              class="sr-only"
            />
            <label 
              for="star-4" 
              class="flex items-center cursor-pointer"
            >
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L24 17.77l-6.18 3.25L12 22l-6.17-3.25L4 17.77l5.18-6.88-1.18-6.88L2 9.27l5.09-4.87L12 2z" />
              </svg>
              <span class="ml-1 text-sm font-medium text-gray-700">4 stars</span>
            </label>
          </div>
          <span class="text-sm text-gray-500">1,200</span>
        </div>
        
        <div class="flex items-center space-x-1">
          <div class="flex items-center">
            <!-- Star 3 -->
            <input 
              type="radio" 
              id="star-3" 
              name="rating" 
              value="3" 
              class="sr-only"
            />
            <label 
              for="star-3" 
              class="flex items-center cursor-pointer"
            >
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L24 17.77l-6.18 3.25L12 22l-6.17-3.25L4 17.77l5.18-6.88-1.18-6.88L2 9.27l5.09-4.87L12 2z" />
              </svg>
              <span class="ml-1 text-sm font-medium text-gray-700">3 stars</span>
            </label>
          </div>
          <span class="text-sm text-gray-500">3,800</span>
        </div>
        
        <div class="flex items-center space-x-1">
          <div class="flex items-center">
            <!-- Star 2 -->
            <input 
              type="radio" 
              id="star-2" 
              name="rating" 
              value="2" 
              class="sr-only"
            />
            <label 
              for="star-2" 
              class="flex items-center cursor-pointer"
            >
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L24 17.77l-6.18 3.25L12 22l-6.17-3.25L4 17.77l5.18-6.88-1.18-6.88L2 9.27l5.09-4.87L12 2z" />
              </svg>
              <span class="ml-1 text-sm font-medium text-gray-700">2 stars</span>
            </label>
          </div>
          <span class="text-sm text-gray-500">1,400</span>
        </div>
        
        <div class="flex items-center space-x-1">
          <div class="flex items-center">
            <!-- Star 1 -->
            <input 
              type="radio" 
              id="star-1" 
              name="rating" 
              value="1" 
              class="sr-only"
            />
            <label 
              for="star-1" 
              class="flex items-center cursor-pointer"
            >
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L24 17.77l-6.18 3.25L12 22l-6.17-3.25L4 17.77l5.18-6.88-1.18-6.88L2 9.27l5.09-4.87L12 2z" />
              </svg>
              <span class="ml-1 text-sm font-medium text-gray-700">1 star</span>
            </label>
          </div>
          <span class="text-sm text-gray-500">800</span>
        </div>
      </div>
    </div>
    
    <!-- Filter status -->
    <div id="filterStatus" class="bg-blue-50 border-l-4 border-blue-400 text-blue-700 p-4 rounded mb-4">
      <p class="font-medium">Filtered by <span id="filterText">5 stars</span></p>
    </div>
  </div>
  
  <script>
    // Get references
    const radios = document.querySelectorAll('input[type="radio"]');
    const filterStatus = document.getElementById('filterStatus');
    const filterText = document.getElementById('filterText');
    
    // Add event listeners to all radio buttons
    radios.forEach(radio => {
      radio.addEventListener('change', () => {
        const selected = document.querySelector('input[name="rating"]:checked');
        const rating = selected.value;
        
        // Update filter status
        filterText.textContent = rating + ' stars';
        filterStatus.classList.remove('hidden');
      });
    });
  </script>
</body>
</html>
Qwen3-8B base 2,286 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Star Rating Filter</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">

  <div class="max-w-md mx-auto bg-white p-6 rounded shadow-md">
    <h2 class="text-lg font-semibold mb-4">Rating Filter</h2>
    <div id="filterHeader" class="text-center text-gray-600 mb-4">Select a rating</div>
    
    <div id="ratingFilter" class="space-y-3">
      <!-- Rating rows will be inserted here -->
    </div>
  </div>

  <script>
    const ratings = [
      { stars: 5, count: 4521 },
      { stars: 4, count: 3892 },
      { stars: 3, count: 2105 },
      { stars: 2, count: 987 },
      { stars: 1, count: 342 }
    ];

    const filterContainer = document.getElementById('ratingFilter');
    const filterHeader = document.getElementById('filterHeader');

    ratings.forEach(rating => {
      const row = document.createElement('div');
      row.className = 'flex items-center justify-between p-2 bg-gray-50 rounded cursor-pointer hover:bg-gray-100';

      const stars = document.createElement('div');
      stars.className = 'flex';

      for (let i = 0; i < rating.stars; i++) {
        const star = document.createElement('span');
        star.className = 'text-yellow-500 mr-1';
        star.textContent = '★';
        stars.appendChild(star);
      }

      const text = document.createElement('span');
      text.textContent = '& Up';

      const count = document.createElement('span');
      count.textContent = ` (${rating.count})`;

      row.appendChild(stars);
      row.appendChild(text);
      row.appendChild(count);

      row.addEventListener('click', () => {
        // Deselect any previously selected row
        document.querySelectorAll('#ratingFilter div').forEach(el => {
          el.classList.remove('bg-blue-100');
        });

        // Highlight current row
        row.classList.toggle('bg-blue-100');

        // Update header text
        const selectedStars = rating.stars;
        filterHeader.textContent = `Showing ${selectedStars} stars & up`;
      });

      filterContainer.appendChild(row);
    });
  </script>

</body>
</html>
5 Add to Cart Widget GPT: 9/5/7 · Gemini: 9/6/7 +
Claude Sonnet 4.6 6,473 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Add to Cart Sidebar</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'amazon-yellow': '#FFD814',
                        'amazon-orange': '#FF9900',
                        'amazon-green': '#007600'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100 p-6">
    <div class="max-w-sm mx-auto bg-white border border-gray-300 rounded-lg p-4 shadow-sm">
        <!-- Price -->
        <div class="mb-3">
            <span class="text-2xl font-normal text-red-600">$29.99</span>
        </div>
        
        <!-- Stock Status -->
        <div class="flex items-center mb-3">
            <span class="text-sm font-medium text-amazon-green">In Stock</span>
        </div>
        
        <!-- Delivery Info -->
        <div class="mb-4">
            <div class="text-sm">
                <span class="font-medium">FREE delivery</span>
                <span class="text-blue-600 cursor-pointer hover:text-red-600" id="deliveryDate">
                    Tuesday, December 17
                </span>
            </div>
            <div class="text-xs text-gray-600 mt-1">
                Order within <span class="text-amazon-green font-medium">6 hrs 23 mins</span>
            </div>
        </div>
        
        <!-- Quantity Selector -->
        <div class="mb-4">
            <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">
                Quantity:
            </label>
            <select id="quantity" class="border border-gray-300 rounded-md px-3 py-1 text-sm bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <script>
                    // Generate options 1-30
                    for(let i = 1; i <= 30; i++) {
                        document.write(`<option value="${i}">${i}</option>`);
                    }
                </script>
            </select>
        </div>
        
        <!-- Add to Cart Button -->
        <div class="mb-3">
            <button id="addToCartBtn" class="w-full bg-amazon-yellow hover:bg-yellow-400 text-black font-medium py-2 px-4 rounded-full text-sm transition-colors duration-200 border border-yellow-600">
                Add to Cart
            </button>
        </div>
        
        <!-- Buy Now Button -->
        <div class="mb-4">
            <button id="buyNowBtn" class="w-full bg-amazon-orange hover:bg-orange-600 text-white font-medium py-2 px-4 rounded-full text-sm transition-colors duration-200">
                Buy Now
            </button>
        </div>
        
        <!-- Success Message (Hidden by default) -->
        <div id="successMessage" class="hidden mb-4 p-3 bg-green-50 border border-green-200 rounded-md">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-amazon-green mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm font-medium text-amazon-green">Added to Cart</span>
            </div>
        </div>
        
        <!-- Ship From Info -->
        <div class="text-xs text-gray-600 border-t pt-3">
            <div class="mb-1">Ships from Amazon</div>
            <div>Sold by Amazon</div>
        </div>
        
        <!-- Gift Options -->
        <div class="mt-3 pt-3 border-t">
            <label class="flex items-center text-sm">
                <input type="checkbox" class="mr-2 text-blue-600 focus:ring-blue-500">
                <span>Add gift options</span>
            </label>
        </div>
    </div>

    <script>
        // Get delivery date (2 days from today)
        function getDeliveryDate() {
            const today = new Date();
            const deliveryDate = new Date(today.getTime() + (2 * 24 * 60 * 60 * 1000));
            
            const options = { 
                weekday: 'long', 
                month: 'long', 
                day: 'numeric' 
            };
            
            return deliveryDate.toLocaleDateString('en-US', options);
        }
        
        // Set the delivery date
        document.getElementById('deliveryDate').textContent = getDeliveryDate();
        
        // Add to Cart functionality
        document.getElementById('addToCartBtn').addEventListener('click', function() {
            const quantity = document.getElementById('quantity').value;
            const successMessage = document.getElementById('successMessage');
            const button = this;
            
            // Show success message
            successMessage.classList.remove('hidden');
            
            // Temporarily change button text
            const originalText = button.textContent;
            button.textContent = 'Added to Cart';
            button.classList.add('bg-green-100', 'border-green-300');
            button.classList.remove('bg-amazon-yellow', 'border-yellow-600');
            
            // Hide success message and reset button after 3 seconds
            setTimeout(() => {
                successMessage.classList.add('hidden');
                button.textContent = originalText;
                button.classList.remove('bg-green-100', 'border-green-300');
                button.classList.add('bg-amazon-yellow', 'border-yellow-600');
            }, 3000);
            
            console.log(`Added ${quantity} item(s) to cart`);
        });
        
        // Buy Now functionality
        document.getElementById('buyNowBtn').addEventListener('click', fu
Brewmode 8B 3,836 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Add to Cart</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
  <div class="fixed top-0 right-0 z-50 mt-4 mr-4">
    <button id="cartBtn" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Cart</button>
  </div>

  <div id="cartOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40 hidden">
    <div class="bg-white rounded-lg p-6 w-full max-w-md">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-bold">Cart</h2>
        <button id="closeCart" class="text-gray-500 hover:text-gray-700">&times;</button>
      </div>
      <div class="bg-gray-50 p-4 rounded mb-4">
        <p class="font-medium">Item Added</p>
        <p class="text-sm text-gray-500">Item added to your cart</p>
      </div>
      <button id="closeCartBtn" class="w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-700">Close</button>
    </div>
  </div>

  <div class="max-w-md mx-auto mt-10">
    <div class="bg-white rounded-lg shadow-lg p-6">
      <div class="flex justify-between items-center mb-4">
        <h1 class="text-xl font-bold">Amazon</h1>
        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">In Stock</span>
      </div>
      <div class="flex justify-between items-center mb-4">
        <span class="text-gray-500">Price</span>
        <span class="font-bold text-lg">$29.99</span>
      </div>
      <div class="flex justify-between items-center mb-4">
        <span class="text-gray-500">Delivery</span>
        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Next Day</span>
      </div>
      <div class="mb-4">
        <label for="quantity" class="block text-sm font-medium text-gray-700 mb-1">Quantity</label>
        <select id="quantity" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
        </select>
      </div>
      <div class="flex justify-between items-center mb-4">
        <button id="addToCart" class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">Add to Cart</button>
        <button id="buyNow" class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">Buy Now</button>
      </div>
    </div>
  </div>

  <script>
    const addToCartBtn = document.getElementById('addToCart');
    const buyNowBtn = document.getElementById('buyNow');
    const cartBtn = document.getElementById('cartBtn');
    const cartOverlay = document.getElementById('cartOverlay');
    const closeCartBtn = document.getElementById('closeCartBtn');
    const closeCart = document.getElementById('closeCart');
    const cartOverlayBtn = document.getElementById('cartOverlayBtn');

    addToCartBtn.addEventListener('click', () => {
      cartOverlay.classList.remove('hidden');
    });

    buyNowBtn.addEventListener('click', () => {
      cartOverlay.classList.remove('hidden');
    });

    cartBtn.addEventListener('click', () => {
      cartOverlay.classList.remove('hidden');
    });

    closeCartBtn.addEventListener('click', () => {
      cartOverlay.classList.add('hidden');
    });

    closeCart.addEventListener('click', () => {
      cartOverlay.classList.add('hidden');
    });

    cartOverlayBtn.addEventListener('click', () => {
      cartOverlay.classList.add('hidden');
    });
  </script>
</body>
</html>
Qwen3-8B base 3,624 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Add to Cart Sidebar</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">

  <div class="bg-white shadow-lg rounded-lg p-6 w-80">
    <!-- Product Title -->
    <h2 class="text-xl font-bold mb-2">Product Name</h2>

    <!-- In Stock Label -->
    <div class="text-green-600 text-sm mb-2">In Stock</div>

    <!-- Price -->
    <div class="text-3xl font-bold text-green-700 mb-4">$29.99</div>

    <!-- Delivery Date -->
    <div class="text-sm text-gray-600 mb-4">FREE delivery in 3 days</div>

    <!-- Quantity Dropdown -->
    <div class="mb-4">
      <label for="quantity" class="block text-sm font-medium text-gray-700">Quantity</label>
      <select id="quantity" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
      </select>
    </div>

    <!-- Buttons -->
    <div class="flex space-x-4">
      <!-- Add to Cart Button -->
      <button id="addToCart" class="bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 px-4 rounded">
        Add to Cart
      </button>

      <!-- Buy Now Button -->
      <button id="buyNow" class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-2 px-4 rounded">
        Buy Now
      </button>
    </div>

    <!-- Confirmation Message -->
    <div id="cartConfirmation" class="hidden mt-4 text-green-600 text-sm">
      <div class="flex items-center">
        <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        Added to Cart
      </div>
    </div>
  </div>

  <script>
    // Add to Cart Button
    document.getElementById('addToCart').addEventListener('click', function () {
      const confirmation = document.getElementById('cartConfirmation');
      confirmation.classList.remove('hidden');
      setTimeout(() => {
        confirmation.classList.add('hidden');
      }, 3000);
    });

    // Buy Now Button (you can extend this with a function later)
    document.getElementById('buyNow').addEventListener('click', function () {
      alert('Buy Now clicked! You can add functionality here.');
    });
  </script>
</body>
</html>
6 Product Reviews GPT: 7/3/8 · Gemini: 9/4/7 +
Claude Sonnet 4.6 12,648 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Review Section</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-4">
    <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm p-6">
        <!-- Overall Rating Section -->
        <div class="border-b border-gray-200 pb-6 mb-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-4">Customer Reviews</h2>
            
            <div class="flex flex-col lg:flex-row gap-6">
                <!-- Overall Rating -->
                <div class="flex-shrink-0">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="text-4xl font-bold text-gray-900">4.3</span>
                        <div class="flex text-orange-400">
                            <svg class="w-6 h-6 fill-current" viewBox="0 0 20 20">
                                <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                            </svg>
                            <svg class="w-6 h-6 fill-current" viewBox="0 0 20 20">
                                <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                            </svg>
                            <svg class="w-6 h-6 fill-current" viewBox="0 0 20 20">
                                <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                            </svg>
                            <svg class="w-6 h-6 fill-current" viewBox="0 0 20 20">
                                <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                            </svg>
                            <svg class="w-6 h-6 fill-current text-gray-300" viewBox="0 0 20 20">
                                <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/>
                            </svg>
                        </div>
                    </div>
                    <p class="text-gray-600 text-sm">Based on 1,234 reviews</p>
                </div>

                <!-- Rating Breakdown -->
                <div class="flex-1 max-w-md">
                    <div class="space-y-2">
                        <!-- 5 Stars -->
                        <div class="flex items-center gap-3 text-sm">
                            <span class="w-8 text-gray-600">5 ★</span>
                            <div class="flex-1 bg-gray-200 rounded-full h-2">
                                <div class="bg-orange-400 h-2 rounded-full" style="width: 65%"></div>
                            </div>
                            <span class="w-10 text-gray-600">65%</span>
                        </div>
                        <!-- 4 Stars -->
                        <div class="flex items-center gap-3 text-sm">
                            <span class="w-8 text-gray-600">4 ★</span>
                            <div class="flex-1 bg-gray-200 rounded-full h-2">
                                <div class="bg-orange-400 h-2 rounded-full" style="width: 20%"></div>
                            </div>
                            <span class="w-10 text-gray-600">20%</span>
                        </div>
                        <!-- 3 Stars -->
                        <div class="flex items-center gap-3 text-sm">
                            <span class="w-8 text-gray-600">3 ★</span>
                            <div class="flex-1 bg-gray-200 rounded-full h-2">
                                <div class="bg-orange-400 h-2 rounded-full" style="width: 10%"></div>
                            </div>
                            <span class="w-10 text-gray-600">10%</span>
                        </div>
                        <!-- 2 Stars -->
                        <div class="flex items-center gap-3 text-sm">
                            <span class="w-8 text-gray-600">2 ★</span>
                            <div class="flex-1 bg-gray-200 rounded-full h-2">
                                <div class="bg-orange-400 h-2 rounded-full" style="width: 3%"></div>
                            </div>
                            <span class="w-10 text-gray-600">3%</span>
                        </div>
                        <!-- 1 Star -->
                        <div class="flex items-center gap-3 text-sm">
                            <span class="w-8 text-gray-600">1 ★</span>
                            <div class="flex-1 bg-gray-200 rounded-full h-2">
                                <div class="bg-orange-400 h-2 rounded-full" style="width: 2%"></div>
                            </div>
                            <span class="w-10 text-gray-600">2%</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Write Review Button -->
            <button id="writeReviewBtn" class="mt-4 bg-orange-500 hover:bg-orange-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
                Write a Review
            </button>
        </div>

        <!-- Write Review Form (Hidden by default) -->
        <div id="reviewForm" class="hidden border-b border-gray-200 pb-6 mb-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-4">Write Your Review</h3>
            <form>
                <!-- Rating Selection -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Your Rating</label>
                    <div class="flex gap-1" id="starRating">
                        <button type="button" class="star-btn text-gray-300 hover:text-orange-400 focus:outline-none" data-rating="1">
                            <svg cl
Brewmode 8B 4,585 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Reviews</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-900 font-sans">
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-6">Customer Reviews</h1>
    
    <!-- Reviews -->
    <div class="space-y-6 mb-8">
      <!-- Review 1 -->
      <div class="bg-white rounded-lg shadow-md p-4 border border-gray-200">
        <div class="flex items-start mb-2">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L24 18.81l-7-3.49-7 3.49L2 18.81l1.18-6.88-5-4.87L2 9.27l6.91-1.01zM12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71M12 2v7l3.71 3.71
Qwen3-8B base 7,973 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Reviews</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans">

  <div class="container mx-auto p-6">
    <h1 class="text-3xl font-bold mb-6">Product Reviews</h1>

    <!-- Overall Rating -->
    <div class="mb-6">
      <div class="flex items-center mb-2">
        <span class="text-xl font-bold">4.3</span>
        <div class="flex ml-2">
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-gray-400">★</span>
        </div>
      </div>
      <div class="w-full bg-gray-300 rounded-full h-2.5 mb-4">
        <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 86%;"></div>
      </div>
      <div class="text-sm text-gray-600">
        Based on 123 reviews
      </div>
    </div>

    <!-- Review Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Review 1 -->
      <div class="bg-white p-4 rounded shadow">
        <div class="flex items-center mb-2">
          <img src="https://via.placeholder.com/50" alt="User Avatar" class="rounded-full mr-2">
          <div>
            <h3 class="font-semibold">John Doe</h3>
            <span class="text-xs text-gray-500">Verified Buyer</span>
          </div>
        </div>
        <div class="flex mb-2">
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-gray-400">★</span>
        </div>
        <h4 class="text-lg font-medium mb-1">Great Product!</h4>
        <div class="text-sm text-gray-500 mb-2">April 5, 2025</div>
        <p class="mb-3">This product is amazing. It did exactly what I expected and more. Highly recommend!</p>
        <div class="flex items-center text-sm">
          <span class="mr-2">Helpful: <span class="font-semibold">25</span></span>
          <button class="text-blue-500 hover:underline">Report</button>
        </div>
      </div>

      <!-- Review 2 -->
      <div class="bg-white p-4 rounded shadow">
        <div class="flex items-center mb-2">
          <img src="https://via.placeholder.com/50" alt="User Avatar" class="rounded-full mr-2">
          <div>
            <h3 class="font-semibold">Jane Smith</h3>
            <span class="text-xs text-gray-500">Verified Buyer</span>
          </div>
        </div>
        <div class="flex mb-2">
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-gray-400">★</span>
          <span class="text-gray-400">★</span>
        </div>
        <h4 class="text-lg font-medium mb-1">Good Value</h4>
        <div class="text-sm text-gray-500 mb-2">March 20, 2025</div>
        <p class="mb-3">It's a decent product for the price. Works well, but could be better in some areas.</p>
        <div class="flex items-center text-sm">
          <span class="mr-2">Helpful: <span class="font-semibold">12</span></span>
          <button class="text-blue-500 hover:underline">Report</button>
        </div>
      </div>

      <!-- Review 3 -->
      <div class="bg-white p-4 rounded shadow">
        <div class="flex items-center mb-2">
          <img src="https://via.placeholder.com/50" alt="User Avatar" class="rounded-full mr-2">
          <div>
            <h3 class="font-semibold">Alex Johnson</h3>
            <span class="text-xs text-gray-500">Verified Buyer</span>
          </div>
        </div>
        <div class="flex mb-2">
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
          <span class="text-yellow-500">★</span>
        </div>
        <h4 class="text-lg font-medium mb-1">Perfect Purchase</h4>
        <div class="text-sm text-gray-500 mb-2">February 15, 2025</div>
        <p class="mb-3">I'm very satisfied with this product. It exceeded my expectations and is worth every penny.</p>
        <div class="flex items-center text-sm">
          <span class="mr-2">Helpful: <span class="font-semibold">42</span></span>
          <button class="text-blue-500 hover:underline">Report</button>
        </div>
      </div>
    </div>

    <!-- Write Review Section -->
    <div class="mt-10">
      <button id="writeReviewBtn" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">Write Review</button>

      <div id="reviewForm" class="mt-4 hidden bg-white p-6 rounded shadow">
        <h2 class="text-xl font-semibold mb-4">Write a Review</h2>

        <div class="mb-4">
          <label for="rating" class="block text-sm font-medium mb-1">Rating</label>
          <div class="flex">
            <span class="text-yellow-500 cursor-pointer" onclick="setRating(1)">★</span>
            <span class="text-yellow-500 cursor-pointer" onclick="setRating(2)">★</span>
            <span class="text-yellow-500 cursor-pointer" onclick="setRating(3)">★</span>
            <span class="text-yellow-500 cursor-pointer" onclick="setRating(4)">★</span>
            <span class="text-yellow-500 cursor-pointer" onclick="setRating(5)">★</span>
          </div>
          <div id="selectedRating" class="text-sm mt-1">Please select a rating</div>
        </div>

        <div class="mb-4">
          <label for="title" class="block text-sm font-medium mb-1">Title</label>
          <input type="text" id="title" class="w-full px-3 py-2 border rounded" placeholder="Enter your title">
        </div>

        <div class="mb-4">
          <label for="reviewText" class="bl
7 Deal of the Day GPT: 9/6/7 · Gemini: 9/6/7 +
Claude Sonnet 4.6 6,401 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Deal of the Day - Sony WH-1000XM5</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-4">
    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
        <!-- Red Deal Badge Header -->
        <div class="bg-red-600 text-white text-center py-2 px-4">
            <h2 class="font-bold text-lg">Deal of the Day</h2>
        </div>
        
        <div class="p-6">
            <!-- Product Image Placeholder -->
            <div class="w-full h-64 bg-gray-200 rounded-lg mb-4 flex items-center justify-center">
                <svg class="w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
                </svg>
            </div>
            
            <!-- Product Title -->
            <h1 class="text-xl font-semibold text-gray-900 mb-3">Sony WH-1000XM5</h1>
            
            <!-- Rating and Reviews -->
            <div class="flex items-center mb-4">
                <div class="flex items-center">
                    <!-- Stars -->
                    <div class="flex text-yellow-400">
                        <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                        <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                        <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                        <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                        </svg>
                        <svg class="w-4 h-4 fill-current text-gray-300" viewBox="0 0 24 24">
                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                            <path class="text-yellow-400" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77V2z"/>
                        </svg>
                    </div>
                    <span class="ml-2 text-sm text-gray-600">4.7</span>
                    <span class="ml-1 text-sm text-blue-600">(12,847)</span>
                </div>
            </div>
            
            <!-- Discount Badge and Pricing -->
            <div class="flex items-center mb-4">
                <span class="bg-red-600 text-white px-2 py-1 rounded text-sm font-bold mr-3">-40%</span>
                <div class="flex items-center">
                    <span class="text-2xl font-bold text-red-600">$29.99</span>
                    <span class="ml-2 text-lg text-gray-500 line-through">$49.99</span>
                </div>
            </div>
            
            <!-- Claimed Progress Bar -->
            <div class="mb-4">
                <div class="flex justify-between text-sm text-gray-600 mb-1">
                    <span>Claimed</span>
                    <span>67%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-orange-500 h-2 rounded-full" style="width: 67%"></div>
                </div>
            </div>
            
            <!-- Countdown Timer -->
            <div class="mb-6">
                <div class="text-sm text-gray-600 mb-2">Deal ends in:</div>
                <div class="flex space-x-2">
                    <div class="bg-gray-800 text-white px-3 py-2 rounded text-lg font-mono">
                        <span id="hours">02</span>
                    </div>
                    <div class="flex items-center text-gray-800">:</div>
                    <div class="bg-gray-800 text-white px-3 py-2 rounded text-lg font-mono">
                        <span id="minutes">30</span>
                    </div>
                    <div class="flex items-center text-gray-800">:</div>
                    <div class="bg-gray-800 text-white px-3 py-2 rounded text-lg font-mono">
                        <span id="seconds">00</span>
                    </div>
                </div>
            </div>
            
            <!-- Add to Cart Button -->
            <button class="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-semibold py-3 px-4 rounded-lg transition-colors duration-200">
                Add to Cart
            </button>
        </div>
    </div>

    <script>
        // Countdown timer functionality
        let totalSeconds = 2 * 3600 + 30 * 60; // 2:30:00 in seconds
        
        function updateTimer() {
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;
            
            document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
            document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
            document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
            
            if (totalSeconds > 0) {
                totalSeconds--;
            } else {
                clearInterval(timerInterval);
                // Optionally handle timer expiration
                document.querySelector('button').t
Brewmode 8B 2,020 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Deal of the Day</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
  <div class="max-w-3xl mx-auto px-4 py-8">
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h1 class="text-2xl font-bold">Amazon Deal of the Day</h1>
          <div class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-medium">-40%</div>
        </div>
        
        <div class="flex justify-between items-center mb-4">
          <div>
            <div class="text-4xl font-bold text-gray-900">$29.99</div>
            <div class="text-lg text-gray-400 line-through">$49.99</div>
          </div>
          <div class="bg-yellow-500 text-white px-5 py-2 rounded-lg font-medium text-sm">
            <span id="countdown">2:30:00</span>
          </div>
        </div>
        
        <div class="flex justify-center mb-6">
          <button class="bg-yellow-500 text-white px-8 py-3 rounded-lg font-medium text-lg hover:bg-yellow-600 transition-colors">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Countdown timer
    const countdownElement = document.getElementById('countdown');
    let timeLeft = 2 * 60 * 60; // 2 hours in seconds
    
    function updateCountdown() {
      const hours = Math.floor(timeLeft / 3600);
      const minutes = Math.floor((timeLeft % 3600) / 60);
      const seconds = timeLeft % 60;
      countdownElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      if (timeLeft > 0) {
        timeLeft--;
        setTimeout(updateCountdown, 1000);
      }
    }
    
    updateCountdown();
  </script>
</body>
</html>
Qwen3-8B base 6,049 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Deal of the Day - Sony WH-1000XM5</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Custom styles for countdown timer */
    .countdown {
      font-size: 1.2rem;
      font-weight: bold;
    }
  </style>
</head>
<body class="bg-gray-100 text-gray-800">

  <!-- Deal of the Day Header -->
  <div class="bg-red-600 text-white text-center py-4">
    <h1 class="text-2xl font-bold">Deal of the Day</h1>
  </div>

  <!-- Product Container -->
  <div class="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-md">
    <!-- Product Image -->
    <div class="mb-4">
      <img src="https://via.placeholder.com/400x300" alt="Sony WH-1000XM5" class="w-full h-auto rounded-lg" />
    </div>

    <!-- Product Title and Ratings -->
    <div class="mb-4">
      <h2 class="text-2xl font-bold">Sony WH-1000XM5</h2>
      <div class="flex items-center">
        <div class="flex">
          <!-- Star Rating -->
          <div class="flex">
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.922-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.922-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.922-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.922-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.922-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
            </svg>
          </div>
          <span class="ml-2 text-sm">4.7</span>
          <span class="ml-1 text-sm">•</span>
          <span class="ml-1 text-sm">12,847 ratings</span>
        </div>
      </div>
    </div>

    <!-- Price and Discount -->
    <div class="flex items-center mb-4">
      <div class="flex items-center">
        <span class="text-red-600 text-lg font-bold">-40%</span>
        <span class="text-lg font-bold line-through">$49.99</span>
        <span class="text-xl font-bold ml-2">$29.99</span>
      </div>
    </div>

    <!-- Claimed Bar -->
    <div class="mb-4">
      <div class="w-full bg-gray-200 rounded-full h-2.5">
        <div class="bg-red-600 h-2.5 rounded-full" style="width: 67%"></div>
      </div>
      <div class="text-center text-sm text-gray-600 mt-1">67% claimed</div>
    </div>

    <!-- Countdown Timer -->
    <div class="flex justify-center mb-4">
      <div class="flex space-x-4">
        <div class="text-center">
          <div class="countdown">2</div>
          <div class="text-xs">Days</div>
        </div>
        <div class="text-center">
          <div class="countdown">3</div>
          <div class="text-xs">Hours</div>
        </div>
        <div class="text-center">
          <div class="countdown">0</div>
          <div class="text-xs">Minutes</div>
        </div>
        <div class="text-center">
          <div class="countdown">0</div>
          <div class="text-xs">Seconds</div>
        </div>
      </div>
    </div>

    <!-- Add to Cart Button -->
    <button class="w-full bg-yellow-500 text-white py-3 px-4 rounded-lg font-semibold hover:bg-yellow-600 transition">
      Add to Cart
    </button>
  </div>

  <!-- Countdown Timer Script -->
  <script>
    // Set the countdown time (in seconds)
    let totalSeconds = 2 * 3600 + 3 * 60 + 0;

    function updateCountdown() {
      const days = Math.floor(totalSeconds / 3600 / 24);
      const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;

      document.querySelector('.countdown:nth-child(1)').textContent = days;
      document.querySelector('.countdown:nth-child(2)').textContent = hours;
      document.querySelector('.countdown:nth-child(3)').textContent = minutes;
      document.querySelector('.countdown:nth-child(4)').textContent = seconds;

      totalSeconds--;
    }

    // Update every second
    setInterval(up
8 Top Navigation GPT: 9/6/7 · Gemini: —/—/— +
Claude Sonnet 4.6 8,470 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Navigation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'amazon-dark': '#131921',
                        'amazon-light': '#232f3e',
                        'amazon-orange': '#ff9900'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-white">
    <!-- Top Navigation -->
    <div class="bg-amazon-dark text-white">
        <div class="flex items-center px-4 py-2 max-w-screen-xl mx-auto">
            <!-- Amazon Logo -->
            <div class="flex-shrink-0 mr-4">
                <div class="flex items-center cursor-pointer hover:outline hover:outline-1 hover:outline-white rounded p-1">
                    <span class="text-white font-bold text-xl">amazon</span>
                    <div class="ml-1">
                        <svg width="20" height="15" viewBox="0 0 20 15" class="fill-amazon-orange">
                            <path d="M15.5 10.5c-2.5 2-6.5 3-9.5 3-4.5 0-8.5-1.5-11.5-4-.2-.2 0-.5.3-.3 3.5 2 8 3.2 12.5 3.2 3 0 6.5-.6 9.5-1.9.5-.2.8.3.2.7z"/>
                            <path d="M16.5 9.5c-.3-.4-2-.2-2.8-.1-.2 0-.3-.2-.1-.4 1.4-1 3.7-.7 4-.4.3.4-.1 2.8-.2 4-.1.2-.2.1-.2 0-.2-1.2-.8-2.8-1.7-3.1z"/>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Delivery Location -->
            <div class="flex-shrink-0 mr-4">
                <div class="flex items-center cursor-pointer hover:outline hover:outline-1 hover:outline-white rounded p-1">
                    <i class="fas fa-map-marker-alt text-white mr-1"></i>
                    <div class="flex flex-col text-xs">
                        <span class="text-gray-300">Deliver to</span>
                        <span class="font-bold">New York 10001</span>
                    </div>
                </div>
            </div>

            <!-- Search Bar -->
            <div class="flex-1 flex mx-4">
                <div class="flex w-full">
                    <!-- Category Dropdown -->
                    <div class="relative">
                        <select id="categorySelect" class="bg-gray-200 text-gray-700 px-2 py-2 rounded-l-md border-r border-gray-300 focus:outline-none focus:ring-2 focus:ring-amazon-orange text-sm h-full">
                            <option>All</option>
                            <option>Books</option>
                            <option>Electronics</option>
                            <option>Clothing</option>
                            <option>Home & Garden</option>
                            <option>Sports</option>
                        </select>
                    </div>
                    <!-- Search Input -->
                    <input 
                        type="text" 
                        placeholder="Search Amazon" 
                        class="flex-1 px-4 py-2 text-black focus:outline-none focus:ring-2 focus:ring-amazon-orange"
                        id="searchInput"
                    >
                    <!-- Search Button -->
                    <button class="bg-amazon-orange hover:bg-orange-600 px-4 py-2 rounded-r-md transition-colors">
                        <i class="fas fa-search text-amazon-dark"></i>
                    </button>
                </div>
            </div>

            <!-- Account Info -->
            <div class="flex-shrink-0 mr-4">
                <div class="cursor-pointer hover:outline hover:outline-1 hover:outline-white rounded p-1">
                    <div class="flex flex-col text-xs">
                        <span class="text-gray-300">Hello, Sign in</span>
                        <span class="font-bold">Account & Lists</span>
                    </div>
                </div>
            </div>

            <!-- Returns & Orders -->
            <div class="flex-shrink-0 mr-4">
                <div class="cursor-pointer hover:outline hover:outline-1 hover:outline-white rounded p-1">
                    <div class="flex flex-col text-xs">
                        <span class="text-gray-300">Returns</span>
                        <span class="font-bold">& Orders</span>
                    </div>
                </div>
            </div>

            <!-- Cart -->
            <div class="flex-shrink-0">
                <div class="flex items-center cursor-pointer hover:outline hover:outline-1 hover:outline-white rounded p-1 relative">
                    <div class="relative">
                        <i class="fas fa-shopping-cart text-white text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-amazon-orange text-amazon-dark rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">3</span>
                    </div>
                    <span class="ml-1 font-bold text-sm">Cart</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="bg-amazon-light text-white">
        <div class="flex items-center px-4 py-2 max-w-screen-xl mx-auto space-x-6">
            <!-- All Menu -->
            <div class="cursor-pointer hover:outline hover:outline-1 hover:outline-white rounded p-1 flex items-center">
                <i class="fas fa-bars mr-2"></i>
                <span class="font-bold">All</span>
            </div>

            <!-- Menu Items -->
            <div class="cursor-pointer hover:outline hover:outline-1 hover:outline-white rounded p-1">
                <span>Today's Deals</span>
            </div>
            <div class="cursor-pointer hover:outline hover:outline-1 hover:outline-white rounded p-1">
Brewmode 8B 2,462 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Top Nav</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white">
  <nav class="flex items-center justify-between p-4">
    <!-- Logo -->
    <div class="flex items-center">
      <a href="#" class="text-2xl font-bold text-orange-500 mr-4">Amazon</a>
    </div>

    <!-- Search Bar -->
    <div class="relative">
      <div class="flex items-center border border-gray-600 rounded-lg px-3 py-2">
        <select class="appearance-none bg-transparent text-gray-300 rounded-l-lg">
          <option>All Departments</option>
          <option>Electronics</option>
          <option>Books</option>
          <option>Home & Kitchen</option>
          <option>Beauty & Personal Care</option>
          <option>Health & Household</option>
          <option>Automotive</option>
          <option>Apparel</option>
          <option>Food & Beverages</option>
          <option>Computers</option>
        </select>
        <input type="text" placeholder="Search" class="bg-transparent text-white w-full outline-none px-2 py-1" />
        <button class="bg-gray-700 rounded-r-lg px-3 py-1 hover:bg-gray-600">
          🔍
        </button>
      </div>
    </div>

    <!-- Right Navigation -->
    <div class="flex items-center space-x-4">
      <!-- Hello & Sign In -->
      <a href="#" class="hover:text-gray-300">Hello, Sign in</a>

      <!-- Account & Lists -->
      <a href="#" class="hover:text-gray-300">Account & Lists</a>

      <!-- Returns & Orders -->
      <a href="#" class="hover:text-gray-300">Returns & Orders</a>

      <!-- Cart with badge -->
      <div class="relative">
        <a href="#" class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4L3 7zM21 13V8a2 2 0 00-2-2H5a2 2 0 00-2 2v5m16 0v6a2 2 0 01-2 2H7a2 2 0 01-2-2v-6m16 0v6a2 2 0 01-2 2H7a2 2 0 01-2-2v-6" />
          </svg>
          <span class="ml-2 text-sm">Cart</span>
          <span class="absolute top-0 right-0 bg-orange-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
        </a>
      </div>
    </div>
  </nav>
</body>
</html>
Qwen3-8B base 4,173 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Navigation</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Custom styles for orange button and badge */
    .orange-button {
      background-color: #ff9900;
      color: white;
    }

    .orange-button:hover {
      background-color: #e68900;
    }

    .cart-badge {
      background-color: #ff9900;
      color: white;
      border-radius: 50%;
      padding: 2px 6px;
      font-size: 12px;
    }
  </style>
</head>
<body class="bg-white text-gray-800">

  <!-- Top Navigation -->
  <nav class="bg-[#131921] text-white shadow-lg">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <div class="flex items-center">
        <a href="#" class="text-xl font-bold text-orange-500 flex items-center">
          <span>Amazon</span>
          <span class="ml-1 text-orange-500">→</span>
        </a>
      </div>

      <!-- Location & Search -->
      <div class="flex items-center space-x-4">
        <div class="flex items-center">
          <span class="text-sm">Deliver to</span>
          <span class="ml-1 text-sm font-medium">United States</span>
        </div>

        <!-- Search Bar -->
        <div class="relative w-80">
          <select class="absolute inset-y-0 left-0 pl-3 z-10 bg-transparent text-gray-300">
            <option>All Departments</option>
            <option>Books</option>
            <option>Electronics</option>
            <option>Home & Kitchen</option>
          </select>
          <input
            type="text"
            placeholder="Search Amazon"
            class="w-full pl-12 pr-4 py-2 rounded-md bg-[#232f3e] text-white focus:outline-none"
          />
          <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-orange-500">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </button>
        </div>

        <!-- Sign In / Cart -->
        <div class="flex items-center space-x-4">
          <button class="text-sm text-gray-300 hover:text-white">Sign in</button>
          <button class="text-sm text-gray-300 hover:text-white">Account</button>
          <button class="text-sm text-gray-300 hover:text-white">Returns</button>
          <button class="text-sm text-gray-300 hover:text-white">Orders</button>
          <div class="relative">
            <button class="flex items-center text-sm text-gray-300 hover:text-white">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 113.414 2.586L6.586 15H10" />
              </svg>
              <span class="ml-1 cart-badge">3</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <!-- Bottom Navigation -->
  <nav class="bg-[#232f3e] text-white">
    <div class="container mx-auto px-4 py-3 flex flex-wrap justify-between">
      <!-- Menu Items -->
      <div class="flex space-x-4">
        <a href="#" class="text-sm hover:text-orange-500 transition duration-200">All</a>
        <a href="#" class="text-sm hover:text-orange-500 transition duration-200">Today's Deals</a>
        <a href="#" class="text-sm hover:text-orange-500 transition duration-200">Customer Service</a>
        <a href="#" class="text-sm hover:text-orange-500 transition duration-200">Registry</a>
        <a href="#" class="text-sm hover:text-orange-500 transition duration-200">Gift Cards</a>
        <a href="#" class="text-sm hover:text-orange-500 transition duration-200">Sell</a>
      </div>
    </div>
  </nav>

</body>
</html>
9 Order Confirmation GPT: 9/7/8 · Gemini: 9/7/6 +
Claude Sonnet 4.6 9,579 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order Confirmation - Amazon</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="max-w-4xl mx-auto p-6">
        <!-- Header -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <div class="flex items-center mb-4">
                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-3">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                </div>
                <h1 class="text-2xl font-semibold text-green-700">Order placed!</h1>
            </div>
            <p class="text-gray-600 mb-2">Your order has been confirmed and will be shipped soon.</p>
            <p class="text-sm text-gray-500">Order #112-3456789</p>
        </div>

        <!-- Delivery Info -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="text-lg font-semibold mb-3">Delivery Information</h2>
            <div class="flex items-center">
                <div class="w-3 h-3 bg-orange-400 rounded-full mr-3"></div>
                <span class="font-medium">Estimated delivery: April 8, 2024</span>
            </div>
        </div>

        <!-- Order Items -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
            <h2 class="text-lg font-semibold mb-4">Order Items (3 items)</h2>
            
            <!-- Item 1 -->
            <div class="flex items-center justify-between py-4 border-b border-gray-200">
                <div class="flex items-center">
                    <div class="w-16 h-16 bg-blue-500 rounded-lg mr-4 flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-medium">Wireless Bluetooth Headphones</h3>
                        <p class="text-sm text-gray-500">Qty: 1</p>
                    </div>
                </div>
                <span class="font-medium">$59.99</span>
            </div>

            <!-- Item 2 -->
            <div class="flex items-center justify-between py-4 border-b border-gray-200">
                <div class="flex items-center">
                    <div class="w-16 h-16 bg-red-500 rounded-lg mr-4 flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-medium">USB-C Fast Charging Cable</h3>
                        <p class="text-sm text-gray-500">Qty: 2</p>
                    </div>
                </div>
                <span class="font-medium">$24.99</span>
            </div>

            <!-- Item 3 -->
            <div class="flex items-center justify-between py-4">
                <div class="flex items-center">
                    <div class="w-16 h-16 bg-green-500 rounded-lg mr-4 flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-medium">Phone Case with Stand</h3>
                        <p class="text-sm text-gray-500">Qty: 1</p>
                    </div>
                </div>
                <span class="font-medium">$32.99</span>
            </div>
        </div>

        <div class="grid md:grid-cols-2 gap-6">
            <!-- Shipping Address -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-lg font-semibold mb-3">Shipping Address</h2>
                <div class="text-gray-600">
                    <p class="font-medium">John Doe</p>
                    <p>123 Main Street</p>
                    <p>Apartment 4B</p>
                    <p>New York, NY 10001</p>
                    <p>United States</p>
                </div>
            </div>

            <!-- Payment & Order Summary -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h2 class="text-lg font-semibold mb-3">Payment Method</h2>
                <div class="flex items-center mb-6">
                    <div class="w-8 h-5 bg-blue-600 rounded mr-2 flex items-center justify-center">
                        <span class="text-white text-xs font-bold">••••</span>
                    </div>
                    <span class="text-gray-600">Ending in 4242</span>
                </div>

                <h3 class="text-lg font-semibold mb-3">Order Summary</h3>
                <div class="space-y-2">
                    <div class="flex justify-between
Brewmode 8B 6,905 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Order Confirmation</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-900 font-sans">
  <div class="container mx-auto px-4 py-8">
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
      <div class="flex justify-between items-center mb-4">
        <h1 class="text-xl font-bold">Order Confirmation</h1>
        <div class="flex items-center">
          <span class="mr-2 text-sm">Order #</span>
          <span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded text-sm">112-3456789</span>
        </div>
      </div>
      
      <div class="flex justify-between items-center mb-4">
        <div>
          <p class="text-sm text-gray-500">Delivered by</p>
          <p class="font-medium">Amazon</p>
        </div>
        <div>
          <p class="text-sm text-gray-500">Delivery Date</p>
          <p class="font-medium">April 8</p>
        </div>
      </div>
      
      <div class="bg-gray-50 rounded-lg p-4 mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="font-medium">Track Package</span>
          <button id="trackButton" class="bg-transparent border border-gray-300 text-gray-700 px-3 py-1 text-sm rounded hover:bg-gray-100 transition-colors">Tracking</button>
        </div>
        <p class="text-sm text-gray-500">Track your order and get updates on delivery</p>
      </div>
      
      <div class="mb-6">
        <h2 class="text-lg font-semibold mb-3">Items</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="bg-gray-50 p-4 rounded-lg">
            <div class="flex items-center mb-2">
              <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mr-3">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L18 21H11V10z" />
                </svg>
              </div>
              <div>
                <p class="font-medium">Echo Dot (3rd Gen)</p>
                <p class="text-sm text-gray-500">Echo Dot (3rd Gen) - Smart Speaker with Alexa Voice Assistant</p>
              </div>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-500">Qty: 1</span>
              <span class="font-medium">$59.99</span>
            </div>
          </div>
          
          <div class="bg-gray-50 p-4 rounded-lg">
            <div class="flex items-center mb-2">
              <div class="bg-green-100 rounded-full w-12 h-12 flex items-center justify-center mr-3">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a6 6 0 11-12 0 6 6 0 0112 0z" />
                </svg>
              </div>
              <div>
                <p class="font-medium">Kindle Paperwhite</p>
                <p class="text-sm text-gray-500">Kindle Paperwhite - 8GB Wi-Fi, 6" Display</p>
              </div>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-500">Qty: 1</span>
              <span class="font-medium">$199.99</span>
            </div>
          </div>
          
          <div class="bg-gray-50 p-4 rounded-lg">
            <div class="flex items-center mb-2">
              <div class="bg-purple-100 rounded-full w-12 h-12 flex items-center justify-center mr-3">
                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L18 21H11V10z" />
                </svg>
              </div>
              <div>
                <p class="font-medium">AmazonBasics USB-C to USB-C 2.0 Charger</p>
                <p class="text-sm text-gray-500">USB-C to USB-C 2.0 Charger - 2.4A, 24W</p>
              </div>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-500">Qty: 2</span>
              <span class="font-medium">$29.99</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bg-gray-50 rounded-lg p-4 mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="font-medium">Shipping Address</span>
          <button class="bg-transparent border border-gray-300 text-gray-700 px-3 py-1 text-sm rounded hover:bg-gray-100 transition-colors">Edit</button>
        </div>
        <p class="text-sm text-gray-500">123 Main St, Seattle, WA 98101</p>
      </div>
      
      <div class="bg-gray-50 rounded-lg p-4 mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="font-medium">Payment Method</span>
          <button class="bg-transparent border border-gray-300 text-gray-700 px-3 py-1 text-sm rounded hover:bg-gray-100 transition-colors">Edit</button>
        </div>
        <p class="text-sm text-gray-500">Credit Card</p>
        <p class="font-medium">**** 4242</p>
      </div>
      
      <div class="bg-gray-50 rounded-lg p-4 mb-6">
        <div class="flex justify-between items-center mb-2">
          <span class="font-medium">Order Summary</span>
        </div>
        <div class="space-y-2">
          <div class="flex justify-between">
            <span class="text-sm text-gray-500">Subtotal</span>
            <span class="font-medium">$289.97</span>
          </div>
          <div class="flex justify-between">
            <span class="text-sm text-gray-500">Shipping</span>
            <span class="font-medium">$10.00</span>
          </div>
Qwen3-8B base 5,576 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Order Confirmation</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">

  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <div class="bg-white rounded-lg shadow-lg p-6">
      <div class="flex items-center justify-center mb-6">
        <div class="text-green-500 text-5xl">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </div>
      </div>

      <h1 class="text-3xl font-bold text-center mb-4">Order placed!</h1>
      <p class="text-center text-gray-600 mb-6">Your order has been successfully placed.</p>

      <div class="mb-6">
        <p class="text-lg font-medium">Order #</p>
        <p class="text-xl">112-3456789</p>
      </div>

      <div class="mb-6">
        <p class="text-lg font-medium">Delivery Date</p>
        <p class="text-xl">April 8</p>
      </div>

      <div class="mb-6">
        <h2 class="text-xl font-bold mb-3">Items in your order</h2>
        <div class="space-y-4">
          <div class="flex items-center">
            <div class="w-16 h-16 bg-blue-100 rounded-md flex items-center justify-center mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
            </div>
            <div>
              <p class="font-medium">Wireless Bluetooth Headphones</p>
              <div class="flex items-center">
                <span class="text-sm mr-2">Qty: 1</span>
                <span class="text-sm">$59.99</span>
              </div>
            </div>
          </div>

          <div class="flex items-center">
            <div class="w-16 h-16 bg-purple-100 rounded-md flex items-center justify-center mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div>
              <p class="font-medium">Smart Fitness Tracker</p>
              <div class="flex items-center">
                <span class="text-sm mr-2">Qty: 2</span>
                <span class="text-sm">$29.99</span>
              </div>
            </div>
          </div>

          <div class="flex items-center">
            <div class="w-16 h-16 bg-yellow-100 rounded-md flex items-center justify-center mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div>
              <p class="font-medium">Portable Power Bank</p>
              <div class="flex items-center">
                <span class="text-sm mr-2">Qty: 1</span>
                <span class="text-sm">$38.00</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mb-6">
        <h2 class="text-xl font-bold mb-3">Shipping Address</h2>
        <p>John Doe</p>
        <p>123 Main Street</p>
        <p>Anytown, CA 98765</p>
      </div>

      <div class="mb-6">
        <h2 class="text-xl font-bold mb-3">Payment</h2>
        <p>Ending in 4242</p>
      </div>

      <div class="border-t border-gray-200 pt-4 mb-6">
        <div class="flex justify-between mb-2">
          <span class="text-gray-600">Subtotal</span>
          <span>$117.97</span>
        </div>
        <div class="flex justify-between mb-2">
          <span class="text-gray-600">Shipping</span>
          <span class="text-green-600">FREE</span>
        </div>
        <div class="flex justify-between mb-2">
          <span class="text-gray-600">Tax</span>
          <span>$9.44</span>
        </div>
        <div class="flex justify-between font-bold text-lg">
          <span>Total</span>
          <span>$127.41</span>
        </div>
      </div>

      <div class="flex justify-center">
        <button 
          id="trackPackageBtn"
          class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
        >
          Track Package
        </button>
      </div>

      <div id="trackingSpinner" class="hidden mt-4 text-center">
        <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
        <p class="mt-2">Tracking your package...</p>
      </div>
    </div>
  </div>

  <script>
    document.getElementById('trackPackageBtn').addEventListener('click', function () {
      this.disabled = true;
      this.textContent = 'Tracking...';
      document.getElementById('trackingSpinner').classList.remove('hidden');
    });
  </script>

</body>
</html>
10 Product Comparison Table GPT: 9/5/7 · Gemini: 9/5/7 +
Claude Sonnet 4.6 9,976 chars
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Product Comparison</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .gradient-1 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .gradient-2 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        .gradient-3 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
    </style>
</head>
<body class="bg-gray-50 p-6">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-900 mb-8 text-center">Compare Products</h1>
        
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <!-- Product Headers -->
            <div class="grid grid-cols-4 gap-0 border-b">
                <div class="p-6 bg-gray-50 font-semibold text-gray-600">
                    Features
                </div>
                
                <!-- Product 1 -->
                <div class="p-6 text-center border-l">
                    <div class="gradient-1 w-24 h-24 rounded-lg mx-auto mb-4 flex items-center justify-center">
                        <span class="text-white text-2xl font-bold">P1</span>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Samsung Galaxy S24 Ultra</h3>
                    <div class="text-2xl font-bold text-red-600 mb-2">$1,199.99</div>
                    <div class="flex justify-center items-center mb-2">
                        <div class="flex text-yellow-400">
                            ★★★★★
                        </div>
                        <span class="ml-2 text-sm text-gray-600">(4.5)</span>
                    </div>
                    <div class="inline-flex items-center bg-blue-500 text-white text-xs px-2 py-1 rounded mb-4">
                        <span class="mr-1">📦</span>
                        Prime
                    </div>
                    <button onclick="addToCart(1)" id="btn1" class="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-semibold py-2 px-4 rounded-lg transition duration-200">
                        Add to Cart
                    </button>
                </div>
                
                <!-- Product 2 -->
                <div class="p-6 text-center border-l">
                    <div class="gradient-2 w-24 h-24 rounded-lg mx-auto mb-4 flex items-center justify-center">
                        <span class="text-white text-2xl font-bold">P2</span>
                    </div>
                    <h3 class="font-bold text-lg mb-2">iPhone 15 Pro Max</h3>
                    <div class="text-2xl font-bold text-red-600 mb-2">$1,299.99</div>
                    <div class="flex justify-center items-center mb-2">
                        <div class="flex text-yellow-400">
                            ★★★★☆
                        </div>
                        <span class="ml-2 text-sm text-gray-600">(4.2)</span>
                    </div>
                    <div class="inline-flex items-center bg-blue-500 text-white text-xs px-2 py-1 rounded mb-4">
                        <span class="mr-1">📦</span>
                        Prime
                    </div>
                    <button onclick="addToCart(2)" id="btn2" class="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-semibold py-2 px-4 rounded-lg transition duration-200">
                        Add to Cart
                    </button>
                </div>
                
                <!-- Product 3 -->
                <div class="p-6 text-center border-l">
                    <div class="gradient-3 w-24 h-24 rounded-lg mx-auto mb-4 flex items-center justify-center">
                        <span class="text-white text-2xl font-bold">P3</span>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Google Pixel 8 Pro</h3>
                    <div class="text-2xl font-bold text-red-600 mb-2">$999.99</div>
                    <div class="flex justify-center items-center mb-2">
                        <div class="flex text-yellow-400">
                            ★★★★★
                        </div>
                        <span class="ml-2 text-sm text-gray-600">(4.7)</span>
                    </div>
                    <div class="inline-flex items-center bg-blue-500 text-white text-xs px-2 py-1 rounded mb-4">
                        <span class="mr-1">📦</span>
                        Prime
                    </div>
                    <button onclick="addToCart(3)" id="btn3" class="w-full bg-yellow-400 hover:bg-yellow-500 text-black font-semibold py-2 px-4 rounded-lg transition duration-200">
                        Add to Cart
                    </button>
                </div>
            </div>
            
            <!-- Feature Rows -->
            <!-- Display -->
            <div class="grid grid-cols-4 gap-0 border-b">
                <div class="p-4 bg-gray-50 font-semibold text-gray-700">
                    Display
                </div>
                <div class="p-4 border-l text-sm">
                    6.8" Dynamic AMOLED<br>
                    3120 x 1440 pixels
                </div>
                <div class="p-4 border-l text-sm">
                    6.7" Super Retina XDR<br>
                    2796 x 1290 pixels
                </div>
                <div class="p-4 border-l text-sm">
                    6.7" LTPO OLED<br>
                    2992 x 1344 pixels
                </div>
            </div>
            
            <!-- Battery -->
            <div class="grid grid-cols-4 gap-0 border-b bg-gray-25">
                <div class="p-4 bg-gray-50 font-semibold text-gray-700">
                    Battery
                </div>
                <div class="p-4 border-l text-sm">
                    5000mAh<br>
Brewmode 8B 8,302 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Amazon Product Comparison</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-900">
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">Product Comparison</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Product 1 -->
      <div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
        <div class="flex items-center mb-4">
          <div class="w-16 h-16 rounded-lg bg-amber-500 flex items-center justify-center text-white font-bold text-2xl mr-4">
            1
          </div>
          <div>
            <h2 class="text-xl font-bold mb-1">Sony WH-1000XM5</h2>
            <div class="flex items-center">
              <span class="text-lg text-gray-900 font-bold mr-2">$399</span>
              <span class="text-sm text-gray-500">Amazon</span>
            </div>
          </div>
        </div>
        
        <div class="flex items-center mb-4">
          <div class="flex items-center">
            <svg class="w-4 h-4 text-yellow-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.89h3.462c.979 0 1.371 1.285.588 1.81l-2.236 1.644a1 1 0 00.298 1.785l1.213 5.46c.794.055 1.604-.249 1.798-1.03.197-.784-.52-1.846-1.645-1.846h-3.463c-.81 0-1.382.749-1.19 1.586l1.213 5.46c.794.055 1.604-.249 1.798-1.03.197-.784-.52-1.846-1.645-1.846h-3.462c-.979 0-1.371 1.285-.588 1.81l2.236 1.644a1 1 0 00.298 1.785l1.213 5.46c.794.055 1.604-.249 1.798-1.03.197-.784-.52-1.846-1.645-1.846h-1.07l-.453-1.458c-.876-.438-1.27 1.267-.588 1.81l2.236 1.644a1 1 0 00.86 0l2.236-1.644c.684-.443 1.08-1.81 0-1.81h-3.462z"></path>
          </svg>
          <span class="text-xs text-gray-500 ml-1">4.7</span>
        </div>
      </div>
      
      <!-- Product 2 -->
      <div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
        <div class="flex items-center mb-4">
          <div class="w-16 h-16 rounded-lg bg-emerald-500 flex items-center justify-center text-white font-bold text-2xl mr-4">
            2
          </div>
          <div>
            <h2 class="text-xl font-bold mb-1">Apple AirPods Pro</h2>
            <div class="flex items-center">
              <span class="text-lg text-gray-900 font-bold mr-2">$249</span>
              <span class="text-sm text-gray-500">Amazon</span>
            </div>
          </div>
        </div>
        
        <div class="flex items-center mb-4">
          <div class="flex items-center">
            <svg class="w-4 h-4 text-yellow-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.89h3.462c.979 0 1.371 1.285.588 1.81l-2.236 1.644a1 1 0 00.298 1.785l1.213 5.46c.794.055 1.604-.249 1.798-1.03.197-.784-.52-1.846-1.645-1.846h-3.463c-.81 0-1.382.749-1.19 1.586l1.213 5.46c.794.055 1.604-.249 1.798-1.03.197-.784-.52-1.846-1.645-1.846h-3.462c-.979 0-1.371 1.285-.588 1.81l2.236 1.644a1 1 0 00.298 1.785l1.213 5.46c.794.055 1.604-.249 1.798-1.03.197-.784-.52-1.846-1.645-1.846h-1.07l-.453-1.458c-.876-.438-1.27 1.267-.588 1.81l2.236 1.644a1 1 0 00.86 0l2.236-1.644c.684-.443 1.08-1.81 0-1.81h-3.462z"></path>
          </svg>
          <span class="text-xs text-gray-500 ml-1">4.8</span>
        </div>
      </div>
      
      <!-- Product 3 -->
      <div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
        <div class="flex items-center mb-4">
          <div class="w-16 h-16 rounded-lg bg-blue-500 flex items-center justify-center text-white font-bold text-2xl mr-4">
            3
          </div>
          <div>
            <h2 class="text-xl font-bold mb-1">Bose QuietComfort 35 II</h2>
            <div class="flex items-center">
              <span class="text-lg text-gray-900 font-bold mr-2">$299</span>
              <span class="text-sm text-gray-500">Amazon</span>
            </div>
          </div>
        </div>
        
        <div class="flex items-center mb-4">
          <div class="flex items-center">
            <svg class="w-4 h-4 text-yellow-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.89h3.462c.979 0 1.371 1.285.588 1.81l-2.236 1.644a1 1 0 00.298 1.785l1.213 5.46c.794.055 1.604-.249 1.798-1.03.197-.784-.52-1.846-1.645-1.846h-3.463c-.81 0-1.382.749-1.19 1.586l1.213 5.46c.794.055 1.604-.249 1.798-1.03.197-.784-.52-1.846-1.645-1.846h-3.462c-.979 0-1.371 1.285-.588 1.81l2.236 1.644a1 1 0 00.298 1.785l1.213 5.46c.794.055 1.604-.249 1.798-1.03.197-.784-.52-1.846-1.645-1.846h-1.07l-.453-1.458c-.876-.438-1.27 1.267-.588 1.81l2.236 1.644a1 1 0 00.86 0l2.236-1.644c.684-.443 1.08-1.81 0-1.81h-3.462z"></path>
          </svg>
          <span class="text-xs text-gray-500 ml-1">4.6</span>
        </div>
      </div>
      
      <!-- Features -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
        <div class="bg-white rounded-xl shadow-md p-6 border border-gray-200">
          <h3 class="text-lg font-bold mb-4">Features</h3>
          <div class="space-y-3">
            <div class="flex items-center">
              <svg class="w-5 h-5 text-gray-900 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
              </svg>
              <span>Bluetooth 5.0</span>
            </div>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-gray-900 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l
Qwen3-8B base 7,685 chars
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Product Comparison Table</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans text-gray-800">

  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8 text-center">Product Comparison</h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Product 1 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="relative">
          <div class="w-full h-48 bg-gradient-to-br from-blue-500 to-purple-600 rounded-t-lg"></div>
          <div class="absolute top-0 right-0 p-2 bg-white rounded-bl-lg">
            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Prime</span>
          </div>
        </div>
        <h2 class="text-xl font-semibold mt-4">Smartphone X</h2>
        <p class="text-gray-600 text-sm mt-1">$699.99</p>
        <div class="flex items-center mt-2">
          <div class="flex">
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
          </div>
          <span class="ml-1 text-sm">(4.8)</span>
        </div>
        <div class="mt-6">
          <div class="grid grid-cols-2 gap-4">
            <div>
              <p class="text-sm font-medium">Display</p>
              <p class="text-gray-600 text-sm">6.7" AMOLED, 120Hz</p>
            </div>
            <div>
              <p class="text-sm font-medium">Battery</p>
              <p class="text-gray-600 text-sm">4500 mAh, 65W</p>
            </div>
            <div>
              <p class="text-sm font-medium">Storage</p>
              <p class="text-gray-600 text-sm">128GB</p>
            </div>
            <div>
              <p class="text-sm font-medium">Weight</p>
              <p class="text-gray-600 text-sm">198g</p>
            </div>
            <div>
              <p class="text-sm font-medium">Camera</p>
              <p class="text-gray-600 text-sm">108MP + 12MP + 8MP</p>
            </div>
            <div>
              <p class="text-sm font-medium">Water Resistance</p>
              <p class="text-gray-600 text-sm">IP68</p>
            </div>
          </div>
        </div>
        <button onclick="addToCart('Smartphone X')" class="mt-6 w-full bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 transition">
          Add to Cart
        </button>
        <div id="cartMessage1" class="mt-2 text-center text-green-600 text-sm hidden">Added!</div>
      </div>

      <!-- Product 2 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="relative">
          <div class="w-full h-48 bg-gradient-to-br from-pink-500 to-red-600 rounded-t-lg"></div>
          <div class="absolute top-0 right-0 p-2 bg-white rounded-bl-lg">
            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Prime</span>
          </div>
        </div>
        <h2 class="text-xl font-semibold mt-4">Smartphone Y</h2>
        <p class="text-gray-600 text-sm mt-1">$799.99</p>
        <div class="flex items-center mt-2">
          <div class="flex">
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
          </div>
          <span class="ml-1 text-sm">(4.7)</span>
        </div>
        <div class="mt-6">
          <div class="grid grid-cols-2 gap-4">
            <div>
              <p class="text-sm font-medium">Display</p>
              <p class="text-gray-600 text-sm">6.5" OLED, 120Hz</p>
            </div>
            <div>
              <p class="text-sm font-medium">Battery</p>
              <p class="text-gray-600 text-sm">4000 mAh, 67W</p>
            </div>
            <div>
              <p class="text-sm font-medium">Storage</p>
              <p class="text-gray-600 text-sm">256GB</p>
            </div>
            <div>
              <p class="text-sm font-medium">Weight</p>
              <p class="text-gray-600 text-sm">205g</p>
            </div>
            <div>
              <p class="text-sm font-medium">Camera</p>
              <p class="text-gray-600 text-sm">108MP + 12MP + 8MP</p>
            </div>
            <div>
              <p class="text-sm font-medium">Water Resistance</p>
              <p class="text-gray-600 text-sm">IP68</p>
            </div>
          </div>
        </div>
        <button onclick="addToCart('Smartphone Y')" class="mt-6 w-full bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 transition">
          Add to Cart
        </button>
        <div id="cartMessage2" class="mt-2 text-center text-green-600 text-sm hidden">Added!</div>
      </div>

      <!-- Product 3 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="relative">
          <div class="w-full h-48 bg-gradient-to-br from-green-500 to-teal-600 rounded-t-lg"></div>
          <div class="absolute top-0 right-0 p-2 bg-white rounded-bl-lg">
            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Prime</span>
          </div>
        </div>
        <h2 class="text-xl font-semibold mt-4">Smartphone Z</h2>
        <p class="text-gray-600 text-sm mt-1">$899.99</p>
        <div class="flex items-center mt-2">
          <div class="flex">
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
            <span class="text-yellow-500">★</span>
          </div>
          <span class="ml-1 text-sm">(4.9)</span>