Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Amazon Product Page</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .product-gallery { | |
| display: grid; | |
| grid-template-columns: 80px 1fr; | |
| gap: 15px; | |
| } | |
| .thumbnail-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .thumbnail { | |
| border: 1px solid #ddd; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .thumbnail:hover, .thumbnail.active { | |
| border-color: #e77600; | |
| box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5); | |
| } | |
| .main-image { | |
| position: relative; | |
| } | |
| .zoom-lens { | |
| position: absolute; | |
| border: 1px solid #d4d4d4; | |
| background-color: rgba(255, 255, 255, 0.5); | |
| display: none; | |
| } | |
| .zoom-result { | |
| position: absolute; | |
| left: 105%; | |
| width: 400px; | |
| height: 400px; | |
| border: 1px solid #d4d4d4; | |
| background-repeat: no-repeat; | |
| display: none; | |
| z-index: 100; | |
| } | |
| .delivery-option { | |
| border-left: 3px solid #e77600; | |
| padding-left: 10px; | |
| } | |
| .color-option { | |
| border: 1px solid #ddd; | |
| padding: 2px; | |
| cursor: pointer; | |
| } | |
| .color-option.selected { | |
| border-color: #e77600; | |
| box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5); | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background: linear-gradient(to right, #ffa41c 80%, #ddd 80%); | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Header --> | |
| <header class="bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="mr-4"> | |
| <a href="#" class="text-2xl font-bold text-white">Amazon</a> | |
| </div> | |
| <div class="hidden md:flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <div> | |
| <div class="text-xs text-gray-300">Deliver to</div> | |
| <div class="text-sm font-bold">United States</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1 mx-4 hidden md:block"> | |
| <div class="relative"> | |
| <select class="h-10 rounded-l-md border-r border-gray-300 bg-gray-100 text-black px-2 text-sm"> | |
| <option>All</option> | |
| <option>Electronics</option> | |
| <option>Books</option> | |
| <option>Home</option> | |
| </select> | |
| <input type="text" class="h-10 w-full px-4 text-black" placeholder="Search Amazon"> | |
| <button class="absolute right-0 top-0 h-10 px-4 bg-yellow-400 rounded-r-md hover:bg-yellow-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="hidden md:block mx-2"> | |
| <div class="text-xs">Hello, Sign in</div> | |
| <div class="text-sm font-bold">Account & Lists</div> | |
| </div> | |
| <div class="hidden md:block mx-2"> | |
| <div class="text-xs">Returns</div> | |
| <div class="text-sm font-bold">& Orders</div> | |
| </div> | |
| <div class="mx-2 flex items-center"> | |
| <i class="fas fa-shopping-cart text-2xl"></i> | |
| <span class="ml-1 text-sm font-bold">Cart</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 py-2 px-4 flex items-center text-sm overflow-x-auto"> | |
| <a href="#" class="flex items-center mr-6 whitespace-nowrap"> | |
| <i class="fas fa-bars mr-1"></i> | |
| <span>All</span> | |
| </a> | |
| <a href="#" class="mr-6 whitespace-nowrap">Today's Deals</a> | |
| <a href="#" class="mr-6 whitespace-nowrap">Customer Service</a> | |
| <a href="#" class="mr-6 whitespace-nowrap">Registry</a> | |
| <a href="#" class="mr-6 whitespace-nowrap">Gift Cards</a> | |
| <a href="#" class="whitespace-nowrap">Sell</a> | |
| </div> | |
| </header> | |
| <!-- Breadcrumb --> | |
| <div class="bg-gray-200 py-2 px-4 text-sm"> | |
| <div class="container mx-auto"> | |
| <a href="#" class="text-blue-600 hover:underline">Electronics</a> | |
| <span class="mx-1">></span> | |
| <a href="#" class="text-blue-600 hover:underline">Computers & Accessories</a> | |
| <span class="mx-1">></span> | |
| <a href="#" class="text-blue-600 hover:underline">Laptops</a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <!-- Product Info Section --> | |
| <div class="md:flex"> | |
| <!-- Product Gallery --> | |
| <div class="md:w-2/5 product-gallery"> | |
| <div class="thumbnail-container"> | |
| <img src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX679_.jpg" class="thumbnail w-full h-20 object-contain active" alt="Thumbnail 1"> | |
| <img src="https://m.media-amazon.com/images/I/71WkD5--Q6L._AC_SX679_.jpg" class="thumbnail w-full h-20 object-contain" alt="Thumbnail 2"> | |
| <img src="https://m.media-amazon.com/images/I/71TPda7cwUL._AC_SX679_.jpg" class="thumbnail w-full h-20 object-contain" alt="Thumbnail 3"> | |
| <img src="https://m.media-amazon.com/images/I/71yZyrDyqVL._AC_SX679_.jpg" class="thumbnail w-full h-20 object-contain" alt="Thumbnail 4"> | |
| </div> | |
| <div class="main-image relative"> | |
| <img id="mainImage" src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX679_.jpg" class="w-full h-auto max-h-96 object-contain" alt="Main Product Image"> | |
| <div class="zoom-lens"></div> | |
| <div class="zoom-result"></div> | |
| </div> | |
| </div> | |
| <!-- Product Details --> | |
| <div class="md:w-3/5 md:pl-8 mt-6 md:mt-0"> | |
| <h1 class="text-2xl font-medium">Apple MacBook Pro (16-inch, M1 Pro chip with 10‑core CPU and 16‑core GPU, 16GB RAM, 1TB SSD) - Space Gray</h1> | |
| <div class="flex items-center mt-2"> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <a href="#reviews" class="text-blue-600 hover:underline ml-2">12,345 ratings</a> | |
| <span class="mx-2">|</span> | |
| <a href="#qa" class="text-blue-600 hover:underline">1,234 answered questions</a> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-red-600 text-lg font-medium">$2,399.00</div> | |
| <div class="text-sm text-gray-600">$2,499.00 (4% off)</div> | |
| <div class="text-sm mt-1">No Import Fees Deposit & $18.98 Shipping to United States</div> | |
| <div class="text-green-700 text-sm mt-1">In Stock</div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="font-medium">About this item</div> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Apple M1 Pro or M1 Max chip for a massive leap in CPU, GPU, and machine learning performance</li> | |
| <li>Up to 10-core CPU delivers up to 2x faster performance to fly through pro workflows quicker than ever</li> | |
| <li>Up to 32-core GPU with up to 4x faster performance for graphics-intensive apps and games</li> | |
| <li>16-core Neural Engine for up to 5x faster machine learning performance</li> | |
| <li>Longer battery life, up to 21 hours</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Purchase Options --> | |
| <div class="mt-8 border-t pt-6"> | |
| <div class="md:flex"> | |
| <div class="md:w-2/5"> | |
| <div class="font-medium mb-2">Color: <span class="font-normal" id="selectedColor">Space Gray</span></div> | |
| <div class="flex space-x-2"> | |
| <div class="color-option selected" data-color="Space Gray" data-image="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX679_.jpg"> | |
| <img src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX45_.jpg" alt="Space Gray" class="w-12 h-12 object-contain"> | |
| </div> | |
| <div class="color-option" data-color="Silver" data-image="https://m.media-amazon.com/images/I/71TPda7cwUL._AC_SX679_.jpg"> | |
| <img src="https://m.media-amazon.com/images/I/71TPda7cwUL._AC_SX45_.jpg" alt="Silver" class="w-12 h-12 object-contain"> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="font-medium mb-2">Size: <span class="font-normal">16-inch</span></div> | |
| <div class="font-medium mb-2">Configuration: <span class="font-normal">M1 Pro, 16GB RAM, 1TB SSD</span></div> | |
| </div> | |
| </div> | |
| <div class="md:w-3/5 md:pl-8 mt-6 md:mt-0"> | |
| <div class="border rounded-md p-4"> | |
| <div class="text-xl font-medium">$2,399.00</div> | |
| <div class="text-sm text-gray-600 mt-1">$2,499.00 (4% off)</div> | |
| <div class="mt-3 delivery-option"> | |
| <div class="font-medium">FREE delivery <span class="font-normal">Monday, June 5</span></div> | |
| <div class="text-sm">Order within 5 hrs 26 mins</div> | |
| <div class="text-sm flex items-center mt-1"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>Deliver to United States</span> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="text-green-700 font-medium">In Stock</div> | |
| <div class="text-sm mt-1">Sold by Amazon.com and ships from Amazon Fulfillment</div> | |
| </div> | |
| <div class="mt-4"> | |
| <select class="w-full p-2 border rounded-md bg-gray-100"> | |
| <option>Qty: 1</option> | |
| <option>2</option> | |
| <option>3</option> | |
| <option>4</option> | |
| <option>5</option> | |
| </select> | |
| </div> | |
| <div class="mt-4 space-y-2"> | |
| <button class="w-full bg-yellow-400 hover:bg-yellow-500 py-2 rounded-full font-medium"> | |
| Add to Cart | |
| </button> | |
| <button class="w-full bg-orange-400 hover:bg-orange-500 py-2 rounded-full font-medium"> | |
| Buy Now | |
| </button> | |
| </div> | |
| <div class="mt-3 text-sm"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="addGift" class="mr-2"> | |
| <label for="addGift">Add a gift receipt for easy returns</label> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm flex items-center"> | |
| <i class="fas fa-lock mr-1"></i> | |
| <span>Secure transaction</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm"> | |
| <span>Add to List</span> | |
| <button class="ml-4 text-blue-600 hover:underline">Add to Wish List</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Info --> | |
| <div class="mt-8 border-t pt-6"> | |
| <h2 class="text-xl font-medium mb-4">Product information</h2> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div> | |
| <table class="w-full"> | |
| <tr class="border-b"> | |
| <td class="py-2 font-medium bg-gray-100">Brand</td> | |
| <td class="py-2">Apple</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-2 font-medium bg-gray-100">Model Name</td> | |
| <td class="py-2">MacBook Pro</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-2 font-medium bg-gray-100">Screen Size</td> | |
| <td class="py-2">16 Inches</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-2 font-medium bg-gray-100">Color</td> | |
| <td class="py-2">Space Gray</td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div> | |
| <table class="w-full"> | |
| <tr class="border-b"> | |
| <td class="py-2 font-medium bg-gray-100">Hard Disk Size</td> | |
| <td class="py-2">1 TB</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-2 font-medium bg-gray-100">CPU Model</td> | |
| <td class="py-2">Apple M1 Pro</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-2 font-medium bg-gray-100">RAM Memory</td> | |
| <td class="py-2">16 GB</td> | |
| </tr> | |
| <tr class="border-b"> | |
| <td class="py-2 font-medium bg-gray-100">Operating System</td> | |
| <td class="py-2">Mac OS</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Customer Reviews --> | |
| <div id="reviews" class="mt-8 border-t pt-6"> | |
| <h2 class="text-xl font-medium mb-4">Customer reviews</h2> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 text-center"> | |
| <div class="text-4xl font-light">4.7</div> | |
| <div class="flex justify-center text-yellow-400 mt-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <div class="text-sm text-gray-600 mt-1">12,345 global ratings</div> | |
| </div> | |
| <div class="md:w-2/3 mt-6 md:mt-0"> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <span class="w-20 text-sm">5 star</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="progress-bar w-full"></div> | |
| </div> | |
| <span class="w-10 text-sm text-right">80%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-20 text-sm">4 star</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="progress-bar w-full" style="background: linear-gradient(to right, #ffa41c 15%, #ddd 15%)"></div> | |
| </div> | |
| <span class="w-10 text-sm text-right">15%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-20 text-sm">3 star</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="progress-bar w-full" style="background: linear-gradient(to right, #ffa41c 3%, #ddd 3%)"></div> | |
| </div> | |
| <span class="w-10 text-sm text-right">3%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-20 text-sm">2 star</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="progress-bar w-full" style="background: linear-gradient(to right, #ffa41c 1%, #ddd 1%)"></div> | |
| </div> | |
| <span class="w-10 text-sm text-right">1%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-20 text-sm">1 star</span> | |
| <div class="flex-1 mx-2"> | |
| <div class="progress-bar w-full" style="background: linear-gradient(to right, #ffa41c 1%, #ddd 1%)"></div> | |
| </div> | |
| <span class="w-10 text-sm text-right">1%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium">Review this product</h3> | |
| <p class="text-sm mt-1">Share your thoughts with other customers</p> | |
| <button class="mt-2 bg-gray-200 hover:bg-gray-300 px-4 py-1 rounded-full text-sm font-medium"> | |
| Write a customer review | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium">Top reviews from the United States</h3> | |
| <div class="mt-4 space-y-6"> | |
| <!-- Review 1 --> | |
| <div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center"> | |
| <span class="text-lg">J</span> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">John D.</div> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="font-medium">Amazing performance!</div> | |
| <p class="mt-1 text-sm">This MacBook Pro is a beast! The M1 Pro chip handles everything I throw at it with ease. The battery life is incredible, and the display is stunning. Worth every penny.</p> | |
| <div class="text-xs text-gray-500 mt-2">Reviewed in the United States on May 15, 2023</div> | |
| <div class="mt-2 text-sm"> | |
| <span class="font-medium">Verified Purchase</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Review 2 --> | |
| <div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center"> | |
| <span class="text-lg">S</span> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="font-medium">Sarah M.</div> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="font-medium">Great but expensive</div> | |
| <p class="mt-1 text-sm">The performance is outstanding and the build quality is excellent as expected from Apple. My only complaint is the price - it's quite steep, but you get what you pay for.</p> | |
| <div class="text-xs text-gray-500 mt-2">Reviewed in the United States on April 28, 2023</div> | |
| <div class="mt-2 text-sm"> | |
| <span class="font-medium">Verified Purchase</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button class="text-blue-600 hover:underline">See all reviews</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Frequently Bought Together --> | |
| <div class="mt-8 border-t pt-6"> | |
| <h2 class="text-xl font-medium mb-4">Frequently bought together</h2> | |
| <div class="md:flex items-start"> | |
| <div class="flex"> | |
| <div class="w-24 h-24 bg-white border rounded flex items-center justify-center"> | |
| <img src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX45_.jpg" alt="MacBook Pro" class="w-20 h-20 object-contain"> | |
| </div> | |
| <div class="mx-2 text-2xl flex items-center">+</div> | |
| <div class="w-24 h-24 bg-white border rounded flex items-center justify-center"> | |
| <img src="https://m.media-amazon.com/images/I/71WkD5--Q6L._AC_SX45_.jpg" alt="USB-C Adapter" class="w-20 h-20 object-contain"> | |
| </div> | |
| <div class="mx-2 text-2xl flex items-center">+</div> | |
| <div class="w-24 h-24 bg-white border rounded flex items-center justify-center"> | |
| <img src="https://m.media-amazon.com/images/I/71TPda7cwUL._AC_SX45_.jpg" alt="Case" class="w-20 h-20 object-contain"> | |
| </div> | |
| </div> | |
| <div class="md:ml-6 mt-4 md:mt-0"> | |
| <div class="text-lg font-medium">Total price: <span class="text-red-600">$2,498.98</span></div> | |
| <div class="mt-2"> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 px-4 py-1 rounded-full text-sm font-medium"> | |
| Add all three to Cart | |
| </button> | |
| </div> | |
| <div class="mt-2 text-sm"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="addAll" class="mr-2" checked> | |
| <label for="addAll">This item: Apple MacBook Pro (16-inch, M1 Pro) - $2,399.00</label> | |
| </div> | |
| <div class="flex items-center mt-1"> | |
| <input type="checkbox" id="addAdapter" class="mr-2" checked> | |
| <label for="addAdapter">USB-C to USB Adapter - $19.99</label> | |
| </div> | |
| <div class="flex items-center mt-1"> | |
| <input type="checkbox" id="addCase" class="mr-2" checked> | |
| <label for="addCase">MacBook Pro 16" Case - $79.99</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Q&A --> | |
| <div id="qa" class="mt-8 border-t pt-6"> | |
| <h2 class="text-xl font-medium mb-4">Customer questions & answers</h2> | |
| <div class="mb-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search questions" class="w-full p-2 border rounded-md pl-10"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Question 1 --> | |
| <div> | |
| <div class="font-medium">Does this model have the Touch Bar?</div> | |
| <div class="text-sm mt-1">Yes, the 16-inch MacBook Pro features the Touch Bar with integrated Touch ID sensor.</div> | |
| <div class="text-xs text-gray-500 mt-2">Answered by Amazon Customer · 3 months ago</div> | |
| <div class="mt-2 text-sm"> | |
| <span class="text-blue-600 hover:underline cursor-pointer">5 people found this helpful</span> | |
| <span class="mx-2">·</span> | |
| <span class="text-blue-600 hover:underline cursor-pointer">Report</span> | |
| </div> | |
| </div> | |
| <!-- Question 2 --> | |
| <div> | |
| <div class="font-medium">Is the RAM upgradable?</div> | |
| <div class="text-sm mt-1">No, the RAM is soldered to the logic board and cannot be upgraded after purchase. Make sure to choose the right configuration when ordering.</div> | |
| <div class="text-xs text-gray-500 mt-2">Answered by Apple Support · 4 months ago</div> | |
| <div class="mt-2 text-sm"> | |
| <span class="text-blue-600 hover:underline cursor-pointer">12 people found this helpful</span> | |
| <span class="mx-2">·</span> | |
| <span class="text-blue-600 hover:underline cursor-pointer">Report</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="text-blue-600 hover:underline">See all questions</button> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-md text-sm font-medium"> | |
| Ask a question | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product Comparison --> | |
| <div class="mt-8 border-t pt-6"> | |
| <h2 class="text-xl font-medium mb-4">Compare with similar items</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-2">Product</th> | |
| <th class="text-left py-2">Price</th> | |
| <th class="text-left py-2">Processor</th> | |
| <th class="text-left py-2">RAM</th> | |
| <th class="text-left py-2">Storage</th> | |
| <th class="text-left py-2">Rating</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3"> | |
| <div class="flex items-center"> | |
| <img src="https://m.media-amazon.com/images/I/71vFKBpKakL._AC_SX45_.jpg" alt="MacBook Pro" class="w-10 h-10 object-contain mr-2"> | |
| <span>MacBook Pro 16" M1 Pro</span> | |
| </div> | |
| </td> | |
| <td class="py-3">$2,399.00</td> | |
| <td class="py-3">M1 Pro 10-core</td> | |
| <td class="py-3">16GB</td> | |
| <td class="py-3">1TB SSD</td> | |
| <td class="py-3"> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3"> | |
| <div class="flex items-center"> | |
| <img src="https://m.media-amazon.com/images/I/61lYIKPieDL._AC_SX45_.jpg" alt="MacBook Air" class="w-10 h-10 object-contain mr-2"> | |
| <span>MacBook Air M2</span> | |
| </div> | |
| </td> | |
| <td class="py-3">$1,199.00</td> | |
| <td class="py-3">M2 8-core</td> | |
| <td class="py-3">8GB</td> | |
| <td class="py-3">256GB SSD</td> | |
| <td class="py-3"> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Product Description --> | |
| <div class="mt-8 border-t pt-6"> | |
| <h2 class="text-xl font-medium mb-4">From the manufacturer</h2> | |
| <div class="mt-4"> | |
| <img src="https://m.media-amazon.com/images/I/71yZyrDyqVL._AC_SX679_.jpg" alt="MacBook Pro Features" class="w-full"> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium">Supercharged for pros</h3> | |
| <p class="mt-2">The most powerful MacBook Pro ever is here. With the blazing-fast M1 Pro or M1 Max chip — the first Apple silicon designed for pros — you get groundbreaking performance and amazing battery life. Add to that a stunning Liquid Retina XDR display, the best camera and audio ever in a Mac notebook, and all the ports you need. The first notebook of its kind, this MacBook Pro is a beast.</p> | |
| </div> | |
| <div class="mt-6 grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="font-medium">M1 Pro or M1 Max chip</h3> | |
| <p class="mt-2">The M1 Pro and M1 Max scale the amazing benefits of Apple silicon to new heights — and for the first time, they bring a system on a chip (SoC) architecture to a pro notebook. Both have more CPU cores, more GPU cores, and more unified memory than M1. Along with a powerful Neural Engine for supercharged machine learning and upgraded media engines with ProRes support, M1 Pro and M1 Max allow pros to push their creativity even further.</p> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Liquid Retina XDR display</h3> | |
| <p class="mt-2">The best display ever in a Mac notebook. The 16-inch Liquid Retina XDR display features extreme dynamic range, a million-to-one contrast ratio, and breathtaking brightness. It supports 1 billion colors, wide color gamut P3, and features pro reference modes for doing your best work on the go.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Specifications --> | |
| <div class="mt-8 border-t pt-6"> | |
| <h2 class="text-xl font-medium mb-4">Technical Details</h2> | |
| <div class="accordion"> | |
| <div class="border-b py-3"> | |
| <div class="flex justify-between items-center cursor-pointer accordion-header"> | |
| <h3 class="font-medium">Display</h3> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </div> | |
| <div class="accordion-content"> | |
| <table class="w-full mt-2"> | |
| <tr> | |
| <td class="py-1 font-medium w-1/3">Screen Size</td> | |
| <td class="py-1">16 Inches</td> | |
| </tr> | |
| <tr> | |
| <td class="py-1 font-medium">Display Resolution Maximum</td> | |
| <td class="py-1">3456 x 2234</td> | |
| </tr> | |
| <tr> | |
| <td class="py-1 font-medium">Display Technology</td> | |
| <td class="py-1">Liquid Retina XDR</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="border-b py-3"> | |
| <div class="flex justify-between items-center cursor-pointer accordion-header"> | |
| <h3 class="font-medium">Processor</h3> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </div> | |
| <div class="accordion-content"> | |
| <table class="w-full mt-2"> | |
| <tr> | |
| <td class="py-1 font-medium w-1/3">CPU Model</td> | |
| <td class="py-1">Apple M1 Pro</td> | |
| </tr> | |
| <tr> | |
| <td class="py-1 font-medium">CPU Speed</td> | |
| <td class="py-1">3.2 GHz (10-core)</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="border-b py-3"> | |
| <div class="flex justify-between items-center cursor-pointer accordion-header"> | |
| <h3 class="font-medium">Memory</h3> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </div> | |
| <div class="accordion-content"> | |
| <table class="w-full mt-2"> | |
| <tr> | |
| <td class="py-1 font-medium w-1/3">RAM Memory</td> | |
| <td class="py-1">16 GB</td> | |
| </tr> | |
| <tr> | |
| <td class="py-1 font-medium">Memory Technology</td> | |
| <td class="py-1">Unified Memory</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-200 mt-10"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="text-center"> | |
| <button class="text-sm bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded"> | |
| Back to top | |
| </button> | |
| </div> | |
| <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="font-bold">Get to Know Us</h3> | |
| <ul class="mt-4 space-y-2 text-sm"> | |
| <li><a href="#" class="hover:underline">Careers</a></li> | |
| <li><a href="#" class="hover:underline">Blog</a></li> | |
| <li><a href="#" class="hover:underline">About Amazon</a></li> | |
| <li><a href="#" class="hover:underline">Investor Relations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Make Money with Us</h3> | |
| <ul class="mt-4 space-y-2 text-sm"> | |
| <li><a href="#" class="hover:underline">Sell products on Amazon</a></li> | |
| <li><a href="#" class="hover:underline">Sell on Amazon Business</a></li> | |
| <li><a href="#" class="hover:underline">Become an Affiliate</a></li> | |
| <li><a href="#" class="hover:underline">Advertise Your Products</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Amazon Payment Products</h3> | |
| <ul class="mt-4 space-y-2 text-sm"> | |
| <li><a href="#" class="hover:underline">Amazon Business Card</a></li> | |
| <li><a href="#" class="hover:underline">Shop with Points</a></li> | |
| <li><a href="#" class="hover:underline">Reload Your Balance</a></li> | |
| <li><a href="#" class="hover:underline">Amazon Currency Converter</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Let Us Help You</h3> | |
| <ul class="mt-4 space-y-2 text-sm"> | |
| <li><a href="#" class="hover:underline">Amazon and COVID-19</a></li> | |
| <li><a href="#" class="hover:underline">Your Account</a></li> | |
| <li><a href="#" class="hover:underline">Your Orders</a></li> | |
| <li><a href="#" class="hover:underline">Shipping Rates & Policies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t pt-6"> | |
| <div class="flex justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/2560px-Amazon_logo.svg.png" alt="Amazon Logo" class="h-6"> | |
| </div> | |
| <div class="mt-4 text-center text-sm"> | |
| <span>© 1996-2023, Amazon.com, Inc. or its affiliates</span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Thumbnail click functionality | |
| document.querySelectorAll('.thumbnail').forEach(thumb => { | |
| thumb.addEventListener('click', function() { | |
| // Remove active class from all thumbnails | |
| document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active')); | |
| // Add active class to clicked thumbnail | |
| this.classList.add('active'); | |
| // Update main image | |
| const mainImage = document.getElementById('mainImage'); | |
| mainImage.src = this.src; | |
| }); | |
| }); | |
| // Color selection functionality | |
| document.querySelectorAll('.color-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove selected class from all color options | |
| document.querySelectorAll('.color-option').forEach(o => o.classList.remove('selected')); | |
| // Add selected class to clicked option | |
| this.classList.add('selected'); | |
| // Update selected color text | |
| document.getElementById('selectedColor').textContent = this.dataset.color; | |
| // Update main image | |
| const mainImage = document.getElementById('mainImage'); | |
| mainImage.src = this.dataset.image; | |
| // Update thumbnails | |
| document.querySelectorAll('.thumbnail').forEach((thumb, index) => { | |
| if (index === 0) { | |
| thumb.src = this.dataset.image; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Image zoom functionality | |
| const mainImage = document.getElementById('mainImage'); | |
| const lens = document.querySelector('.zoom-lens'); | |
| const result = document.querySelector('.zoom-result'); | |
| if (mainImage && lens && result) { | |
| mainImage.addEventListener('mousemove', function(e) { | |
| if (!result.style.backgroundImage) { | |
| result.style.backgroundImage = `url('${this.src}')`; | |
| } | |
| // Calculate the position of the zoom lens | |
| const pos = getCursorPos(e); | |
| let x = pos.x - (lens.offsetWidth / 2); | |
| let y = pos.y - (lens.offsetHeight / 2); | |
| // Prevent the lens from being positioned outside the image | |
| if (x > this.width - lens.offsetWidth) x = this.width - lens.offsetWidth; | |
| if (x < 0) x = 0; | |
| if (y > this.height - lens.offsetHeight) y = this.height - lens.offsetHeight; | |
| if (y < 0) y = 0; | |
| // Set the position of the zoom lens | |
| lens.style.left = x + 'px'; | |
| lens.style.top = y + 'px'; | |
| // Display the zoom lens and result | |
| lens.style.display = 'block'; | |
| result.style.display = 'block'; | |
| // Calculate the zoom ratio | |
| const cx = result.offsetWidth / lens.offsetWidth; | |
| const cy = result.offsetHeight / lens.offsetHeight; | |
| // Set the background position of the zoom result | |
| result.style.backgroundPosition = `-${x * cx}px -${y * cy}px`; | |
| result.style.backgroundSize = `${this.width * cx}px ${this.height * cy}px`; | |
| }); | |
| mainImage.addEventListener('mouseout', function() { | |
| lens.style.display = 'none'; | |
| result.style.display = 'none'; | |
| }); | |
| function getCursorPos(e) { | |
| const a = mainImage.getBoundingClientRect(); | |
| return { | |
| x: e.pageX - a.left - window.pageXOffset, | |
| y: e.pageY - a.top - window.pageYOffset | |
| }; | |
| } | |
| } | |
| // Accordion functionality | |
| document.querySelectorAll('.accordion-header').forEach(header => { | |
| header.addEventListener('click', function() { | |
| const content = this.nextElementSibling; | |
| const icon = this.querySelector('i'); | |
| if (content.style.maxHeight) { | |
| content.style.maxHeight = null; | |
| icon.style.transform = 'rotate(0deg)'; | |
| } else { | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| icon.style.transform = 'rotate(180deg)'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Cyrano2/amazon-detail" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |