Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ShutterScoop | Premium Photography Gear</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| sky: { | |
| 500: '#0ea5e9', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header Component --> | |
| <script src="components/header.js"></script> | |
| <custom-header></custom-header> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <!-- Product Section --> | |
| <section class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <!-- Image Carousel --> | |
| <div class="relative"> | |
| <div class="carousel relative overflow-hidden rounded-xl shadow-lg"> | |
| <div class="carousel-inner flex transition-transform duration-300 ease-in-out"> | |
| <div class="carousel-item w-full flex-shrink-0"> | |
| <img src="http://static.photos/technology/1200x630/1" alt="Camera Product" class="w-full h-auto"> | |
| </div> | |
| <div class="carousel-item w-full flex-shrink-0"> | |
| <img src="http://static.photos/technology/1200x630/2" alt="Camera Product" class="w-full h-auto"> | |
| </div> | |
| <div class="carousel-item w-full flex-shrink-0"> | |
| <img src="http://static.photos/technology/1200x630/3" alt="Camera Product" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| <button class="carousel-prev absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white text-sky-500 p-2 rounded-full shadow-md"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| <button class="carousel-next absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white text-sky-500 p-2 rounded-full shadow-md"> | |
| <i data-feather="chevron-right"></i> | |
| </button> | |
| <div class="carousel-indicators flex justify-center space-x-2 mt-4"> | |
| <button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-sky-500"></button> | |
| <button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-sky-500"></button> | |
| <button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-sky-500"></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Info --> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-900">Professional DSLR Camera X-2000</h1> | |
| <div class="flex items-center mt-2"> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-gray-300"></i> | |
| </div> | |
| <span class="text-gray-500 ml-2">(42 reviews)</span> | |
| </div> | |
| <p class="text-2xl font-semibold text-sky-500 mt-4">$1,299.99</p> | |
| <p class="text-gray-600 mt-4">Capture stunning images with our flagship DSLR camera featuring 24.2MP resolution, 4K video recording, and advanced autofocus system. Perfect for professional photographers and enthusiasts alike.</p> | |
| <!-- Color Selector --> | |
| <div class="mt-6"> | |
| <h3 class="text-sm font-medium text-gray-900">Color</h3> | |
| <div class="flex space-x-3 mt-2"> | |
| <button class="w-8 h-8 rounded-full bg-black border-2 border-gray-300 focus:ring-2 focus:ring-sky-500"></button> | |
| <button class="w-8 h-8 rounded-full bg-gray-400 border-2 border-gray-300 focus:ring-2 focus:ring-sky-500"></button> | |
| <button class="w-8 h-8 rounded-full bg-blue-700 border-2 border-gray-300 focus:ring-2 focus:ring-sky-500"></button> | |
| </div> | |
| </div> | |
| <!-- Size Selector --> | |
| <div class="mt-6"> | |
| <h3 class="text-sm font-medium text-gray-900">Bundle</h3> | |
| <div class="grid grid-cols-3 gap-3 mt-2"> | |
| <button class="border rounded-md py-2 px-3 text-sm font-medium hover:bg-sky-50 hover:border-sky-500 focus:bg-sky-50 focus:border-sky-500">Body Only</button> | |
| <button class="border rounded-md py-2 px-3 text-sm font-medium hover:bg-sky-50 hover:border-sky-500 focus:bg-sky-50 focus:border-sky-500">With 18-55mm Lens</button> | |
| <button class="border rounded-md py-2 px-3 text-sm font-medium hover:bg-sky-50 hover:border-sky-500 focus:bg-sky-50 focus:border-sky-500">Pro Kit</button> | |
| </div> | |
| </div> | |
| <!-- Add to Cart --> | |
| <div class="mt-8 flex space-x-4"> | |
| <div class="flex items-center border rounded-md"> | |
| <button class="px-3 py-2 text-gray-600 hover:bg-gray-100">-</button> | |
| <span class="px-4 py-2">1</span> | |
| <button class="px-3 py-2 text-gray-600 hover:bg-gray-100">+</button> | |
| </div> | |
| <button class="flex-1 bg-sky-500 hover:bg-sky-600 text-white py-3 px-6 rounded-md font-medium transition-colors"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| <!-- Shipping Info --> | |
| <div class="mt-8 border-t pt-6"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="truck" class="text-sky-500"></i> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900">Free shipping</p> | |
| <p class="text-sm text-gray-500">Get it by <span class="font-medium">Friday, June 10</span></p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2 mt-4"> | |
| <i data-feather="rotate-ccw" class="text-sky-500"></i> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900">30-day returns</p> | |
| <p class="text-sm text-gray-500">No questions asked</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="mt-16"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-8">Product Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 bg-sky-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="aperture" class="text-sky-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">24.2MP Sensor</h3> | |
| <p class="mt-2 text-gray-600">High-resolution APS-C CMOS sensor delivers stunning image quality with rich detail and vibrant colors.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 bg-sky-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="video" class="text-sky-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">4K Video</h3> | |
| <p class="mt-2 text-gray-600">Record ultra-high definition 4K video at 30fps with full pixel readout for exceptional quality.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 bg-sky-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="zap" class="text-sky-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Fast Autofocus</h3> | |
| <p class="mt-2 text-gray-600">45-point all cross-type AF system ensures fast, accurate focusing even in challenging lighting conditions.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 bg-sky-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="wifi" class="text-sky-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Wireless Connectivity</h3> | |
| <p class="mt-2 text-gray-600">Built-in Wi-Fi and Bluetooth for easy sharing and remote control via smartphone.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 bg-sky-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="battery" class="text-sky-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">Long Battery Life</h3> | |
| <p class="mt-2 text-gray-600">Shoot up to 1200 shots on a single charge, perfect for extended photo sessions.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="w-12 h-12 bg-sky-100 rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="eye" class="text-sky-500"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900">OLED Viewfinder</h3> | |
| <p class="mt-2 text-gray-600">High-resolution 2.36M-dot OLED electronic viewfinder provides a clear, bright viewing experience.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reviews Section --> | |
| <section class="mt-16"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-8">Customer Reviews</h2> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="text-4xl font-bold mr-4">4.8</div> | |
| <div> | |
| <div class="flex mb-1"> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current text-yellow-400"></i> | |
| </div> | |
| <p class="text-sm text-gray-500">Based on 42 reviews</p> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="border-b pb-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">Sarah J.</p> | |
| <span class="text-sm text-gray-500 ml-2">2 weeks ago</span> | |
| </div> | |
| <h3 class="font-medium text-gray-900">Perfect for professional work</h3> | |
| <p class="text-gray-600 mt-1">This camera has exceeded all my expectations. The image quality is outstanding, and the autofocus is lightning fast. I've been using it for my wedding photography business and clients are loving the results.</p> | |
| </div> | |
| <div class="border-b pb-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 mr-2"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current text-gray-300"></i> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900">Michael T.</p> | |
| <span class="text-sm text-gray-500 ml-2">1 month ago</span> | |
| </div> | |
| <h3 class="font-medium text-gray-900">Great upgrade from my old camera</h3> | |
| <p class="text-gray-600 mt-1">The difference in image quality is night and day compared to my 5-year-old DSLR. The only reason I didn't give it 5 stars is that the menu system takes some getting used to.</p> | |
| </div> | |
| <button class="mt-6 text-sky-500 hover:text-sky-600 font-medium flex items-center"> | |
| See all reviews | |
| <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Related Products --> | |
| <section class="mt-16"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-8">You may also like</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/4" alt="Camera Lens" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-900">Professional 70-200mm Lens</h3> | |
| <p class="text-sky-500 font-semibold mt-1">$899.99</p> | |
| <div class="flex mt-2"> | |
| <i data-feather="star" class="w-4 h-4 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/5" alt="Camera Bag" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-gray-900">Professional Camera Backpack</h3> | |
| <p class="text-sky-500 font-semibold mt-1">$129.99</p> | |
| <div class="flex mt-2"> | |
| <i data-feather="star" class="w-4 h-4 fill-current text-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 fill | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |