Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Amazon Clone - Shop Everything</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"> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script> | |
| <style> | |
| /* Custom CSS for elements that need more precise styling */ | |
| .search-bar { | |
| transition: all 0.3s ease; | |
| } | |
| .search-bar:focus-within { | |
| box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.3); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .dropdown-menu { | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| #product-viewer-3d { | |
| width: 100%; | |
| height: 400px; | |
| background-color: #f3f4f6; | |
| } | |
| #product-360-viewer { | |
| width: 100%; | |
| height: 400px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .carousel-item { | |
| transition: transform 0.5s ease; | |
| } | |
| .dashboard-nav-item.active { | |
| border-left: 4px solid #f59e0b; | |
| background-color: rgba(245, 158, 11, 0.1); | |
| } | |
| .country-flag { | |
| width: 20px; | |
| height: 15px; | |
| display: inline-block; | |
| margin-right: 5px; | |
| background-size: cover; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Navigation Bar --> | |
| <nav class="bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-yellow-400">amazon</a> | |
| <div class="ml-6 hidden md:block"> | |
| <div class="dropdown relative"> | |
| <button class="flex items-center text-sm hover:text-yellow-300"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span>Deliver to <br>United States</span> | |
| </button> | |
| <div class="dropdown-menu absolute left-0 mt-2 w-64 bg-white text-gray-800 rounded shadow-lg z-50 p-4"> | |
| <h3 class="font-bold mb-2">Choose your location</h3> | |
| <div class="mb-4"> | |
| <p class="text-sm mb-2">Select a delivery location to see product availability and delivery options</p> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black px-4 py-2 rounded text-sm font-medium">Sign in to see your addresses</button> | |
| </div> | |
| <div class="border-t pt-3"> | |
| <a href="#" class="flex items-center text-sm py-1 hover:text-yellow-600"> | |
| <span class="country-flag" style="background-image: url('https://flagcdn.com/w20/us.png')"></span> | |
| United States | |
| </a> | |
| <a href="#" class="flex items-center text-sm py-1 hover:text-yellow-600"> | |
| <span class="country-flag" style="background-image: url('https://flagcdn.com/w20/gb.png')"></span> | |
| United Kingdom | |
| </a> | |
| <a href="#" class="flex items-center text-sm py-1 hover:text-yellow-600"> | |
| <span class="country-flag" style="background-image: url('https://flagcdn.com/w20/ca.png')"></span> | |
| Canada | |
| </a> | |
| <a href="#" class="flex items-center text-sm py-1 hover:text-yellow-600"> | |
| <span class="country-flag" style="background-image: url('https://flagcdn.com/w20/au.png')"></span> | |
| Australia | |
| </a> | |
| <a href="#" class="flex items-center text-sm py-1 hover:text-yellow-600"> | |
| <span class="country-flag" style="background-image: url('https://flagcdn.com/w20/de.png')"></span> | |
| Germany | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="flex-1 mx-4 hidden md:block"> | |
| <div class="search-bar flex rounded-md overflow-hidden"> | |
| <select class="bg-gray-100 text-gray-800 px-2 py-2 text-sm border-r border-gray-300"> | |
| <option>All</option> | |
| <option>Alexa Skills</option> | |
| <option>Amazon Devices</option> | |
| <option>Amazon Fashion</option> | |
| <option>Amazon Fresh</option> | |
| <option>Amazon Pharmacy</option> | |
| <option>Appliances</option> | |
| <option>Apps & Games</option> | |
| <option>Baby</option> | |
| <option>Beauty</option> | |
| <option>Books</option> | |
| <option>Car & Motorbike</option> | |
| <option>Clothing & Accessories</option> | |
| <option>Collectibles</option> | |
| <option>Computers & Accessories</option> | |
| <option>Electronics</option> | |
| <option>Furniture</option> | |
| <option>Garden & Outdoors</option> | |
| <option>Gift Cards</option> | |
| <option>Grocery & Gourmet Foods</option> | |
| <option>Health & Personal Care</option> | |
| <option>Home & Kitchen</option> | |
| <option>Industrial & Scientific</option> | |
| <option>Jewellery</option> | |
| <option>Kindle Store</option> | |
| <option>Luggage & Bags</option> | |
| <option>Luxury Beauty</option> | |
| <option>Movies & TV Shows</option> | |
| <option>Music</option> | |
| <option>Musical Instruments</option> | |
| <option>Office Products</option> | |
| <option>Pet Supplies</option> | |
| <option>Prime Video</option> | |
| <option>Same-Day Delivery</option> | |
| <option>Shoes & Handbags</option> | |
| <option>Software</option> | |
| <option>Sports, Fitness & Outdoors</option> | |
| <option>Subscribe & Save</option> | |
| <option>Toys & Games</option> | |
| <option>Under ₹500</option> | |
| <option>Video Games</option> | |
| <option>Watches</option> | |
| </select> | |
| <input type="text" class="flex-1 px-4 py-2 focus:outline-none" placeholder="Search Amazon"> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-800 px-4 py-2"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right Navigation --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="dropdown relative hidden md:block"> | |
| <button class="flex flex-col items-start text-sm hover:text-yellow-300"> | |
| <span class="text-xs">Hello, Sign in</span> | |
| <span class="font-bold">Account & Lists</span> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-64 bg-white text-gray-800 rounded shadow-lg z-50 p-4"> | |
| <div class="mb-4"> | |
| <button class="w-full bg-yellow-400 hover:bg-yellow-500 text-black px-4 py-2 rounded text-sm font-medium">Sign in</button> | |
| </div> | |
| <div class="border-t pt-3"> | |
| <h4 class="font-bold mb-2">Your Lists</h4> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Create a Wish List</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Wish from Any Website</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Baby Wishlist</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Discover Your Style</a> | |
| </div> | |
| <div class="border-t pt-3"> | |
| <h4 class="font-bold mb-2">Your Account</h4> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Account</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Orders</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Recommendations</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Browsing History</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Watchlist</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Video Purchases & Rentals</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Kindle Unlimited</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Content & Devices</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Subscribe & Save Items</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Memberships & Subscriptions</a> | |
| <a href="#" class="block text-sm py-1 hover:text-yellow-600">Music Library</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dropdown relative hidden md:block"> | |
| <button class="flex flex-col items-start text-sm hover:text-yellow-300"> | |
| <span class="text-xs">Returns</span> | |
| <span class="font-bold">& Orders</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex flex-col items-center text-sm hover:text-yellow-300 relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="font-bold">Cart</span> | |
| <span class="absolute -top-2 -right-2 bg-yellow-400 text-black text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </a> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-800 px-4 py-2"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-user mr-2"></i> | |
| <span>Hello, Sign in</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 text-sm"> | |
| <a href="#" class="bg-gray-700 rounded px-2 py-1 text-center">Today's Deals</a> | |
| <a href="#" class="bg-gray-700 rounded px-2 py-1 text-center">Customer Service</a> | |
| <a href="#" class="bg-gray-700 rounded px-2 py-1 text-center">Registry</a> | |
| <a href="#" class="bg-gray-700 rounded px-2 py-1 text-center">Gift Cards</a> | |
| <a href="#" class="bg-gray-700 rounded px-2 py-1 text-center">Sell</a> | |
| <a href="#" class="bg-gray-700 rounded px-2 py-1 text-center">Shop deals</a> | |
| </div> | |
| </div> | |
| <!-- Secondary Navigation --> | |
| <div class="bg-gray-800 text-white px-4 py-2 hidden md:block"> | |
| <div class="container mx-auto flex items-center space-x-6 text-sm"> | |
| <a href="#" class="flex items-center hover:text-yellow-300"> | |
| <i class="fas fa-bars mr-1"></i> | |
| <span>All</span> | |
| </a> | |
| <a href="#" class="hover:text-yellow-300">Today's Deals</a> | |
| <a href="#" class="hover:text-yellow-300">Customer Service</a> | |
| <a href="#" class="hover:text-yellow-300">Registry</a> | |
| <a href="#" class="hover:text-yellow-300">Gift Cards</a> | |
| <a href="#" class="hover:text-yellow-300">Sell</a> | |
| <a href="#" class="hover:text-yellow-300">Shop deals</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gray-900 text-white"> | |
| <div class="container mx-auto"> | |
| <div class="flex"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-800 p-4 hidden lg:block"> | |
| <h3 class="font-bold mb-4">Shop By Department</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-yellow-300">Electronics</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Computers</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Smart Home</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Arts & Crafts</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Automotive</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Baby</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Beauty & Personal Care</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Books</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Boys' Fashion</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Girls' Fashion</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Health & Household</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Home & Kitchen</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Industrial & Scientific</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Luggage</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Men's Fashion</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Movies & TV</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Music, CDs & Vinyl</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Pet Supplies</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Prime Video</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Software</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Sports & Outdoors</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Tools & Home Improvement</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Toys & Games</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Video Games</a></li> | |
| <li><a href="#" class="hover:text-yellow-300">Women's Fashion</a></li> | |
| </ul> | |
| </div> | |
| <!-- Hero Carousel --> | |
| <div class="flex-1 relative overflow-hidden"> | |
| <div class="carousel-container relative w-full h-64 md:h-96 overflow-hidden"> | |
| <div class="carousel-track flex transition-transform duration-500"> | |
| <div class="carousel-item w-full flex-shrink-0"> | |
| <img src="https://m.media-amazon.com/images/I/61TD5JLGhIL._SX3000_.jpg" alt="Hero Banner 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="carousel-item w-full flex-shrink-0"> | |
| <img src="https://m.media-amazon.com/images/I/61jovjd+f9L._SX3000_.jpg" alt="Hero Banner 2" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="carousel-item w-full flex-shrink-0"> | |
| <img src="https://m.media-amazon.com/images/I/61DUO0NqyyL._SX3000_.jpg" alt="Hero Banner 3" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <button class="carousel-prev absolute left-2 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 rounded-full p-2 shadow-md"> | |
| <i class="fas fa-chevron-left text-gray-800"></i> | |
| </button> | |
| <button class="carousel-next absolute right-2 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 rounded-full p-2 shadow-md"> | |
| <i class="fas fa-chevron-right text-gray-800"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Product Grid --> | |
| <section class="container mx-auto px-4 py-8"> | |
| <h2 class="text-2xl font-bold mb-6">Today's Deals</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"> | |
| <!-- Product Card 1 --> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="relative"> | |
| <img src="https://m.media-amazon.com/images/I/71Swqqe7XAL._AC_UY218_.jpg" alt="Product" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| <span>35% off</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium line-clamp-2">Amazon Echo Dot (3rd Gen) - Smart speaker with Alexa - Charcoal</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-yellow-400 text-xs"> | |
| <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> | |
| </span> | |
| <span class="text-gray-500 text-xs ml-1">12,345</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">$24.99</span> | |
| <span class="text-gray-500 text-sm line-through ml-1">$38.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Prime FREE Delivery</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="relative"> | |
| <img src="https://m.media-amazon.com/images/I/71WrHATQPAL._AC_UY218_.jpg" alt="Product" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| <span>20% off</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium line-clamp-2">Apple AirPods Pro with MagSafe Charging Case (2021)</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-yellow-400 text-xs"> | |
| <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="far fa-star"></i> | |
| </span> | |
| <span class="text-gray-500 text-xs ml-1">8,765</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">$199.00</span> | |
| <span class="text-gray-500 text-sm line-through ml-1">$249.00</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Prime FREE Delivery</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="relative"> | |
| <img src="https://m.media-amazon.com/images/I/61L5QgPvgxL._AC_UY218_.jpg" alt="Product" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| <span>15% off</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium line-clamp-2">Samsung Galaxy Tab A8 10.5" 32GB Android Tablet w/ LCD Screen</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-yellow-400 text-xs"> | |
| <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="far fa-star"></i> | |
| </span> | |
| <span class="text-gray-500 text-xs ml-1">5,432</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">$179.99</span> | |
| <span class="text-gray-500 text-sm line-through ml-1">$209.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Prime FREE Delivery</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 4 --> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="relative"> | |
| <img src="https://m.media-amazon.com/images/I/71sBtM3Yi5L._AC_UY218_.jpg" alt="Product" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| <span>25% off</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium line-clamp-2">PlayStation 5 Console (PS5)</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-yellow-400 text-xs"> | |
| <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> | |
| </span> | |
| <span class="text-gray-500 text-xs ml-1">15,678</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">$499.99</span> | |
| <span class="text-gray-500 text-sm line-through ml-1">$549.99</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Prime FREE Delivery</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 5 --> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="relative"> | |
| <img src="https://m.media-amazon.com/images/I/71WrHATQPAL._AC_UY218_.jpg" alt="Product" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| <span>30% off</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium line-clamp-2">Apple Watch Series 7 (GPS, 41mm) - Midnight Aluminum Case</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-yellow-400 text-xs"> | |
| <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> | |
| </span> | |
| <span class="text-gray-500 text-xs ml-1">9,876</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">$329.00</span> | |
| <span class="text-gray-500 text-sm line-through ml-1">$399.00</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Prime FREE Delivery</div> | |
| </div> | |
| </div> | |
| <!-- Product Card 6 --> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300"> | |
| <div class="relative"> | |
| <img src="https://m.media-amazon.com/images/I/61L5QgPvgxL._AC_UY218_.jpg" alt="Product" class="w-full h-48 object-contain"> | |
| <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded"> | |
| <span>40% off</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-medium line-clamp-2">Bose QuietComfort 45 Bluetooth Wireless Noise Cancelling Headphones</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-yellow-400 text-xs"> | |
| <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> | |
| </span> | |
| <span class="text-gray-500 text-xs ml-1">7,654</span> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-600 font-bold">$279.00</span> | |
| <span class="text-gray-500 text-sm line-through ml-1">$329.00</span> | |
| </div> | |
| <div class="text-green-600 text-xs mt-1">Prime FREE Delivery</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- International Shipping Section --> | |
| <section class="bg-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-bold mb-6">International Shipping Made Easy</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="border rounded-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-globe text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Shop from Anywhere</h3> | |
| </div> | |
| <p class="text-gray-600">Access millions of products from Amazon's global marketplaces with shipping to over 100 countries.</p> | |
| </div> | |
| <div class="border rounded-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-box-open text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Duties & Taxes Calculated at Checkout</h3> | |
| </div> | |
| <p class="text-gray-600">No surprise fees. See the total cost including shipping, import fees, and taxes before you pay.</p> | |
| </div> | |
| <div class="border rounded-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-shipping-fast text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Fast & Reliable Delivery</h3> | |
| </div> | |
| <p class="text-gray-600">Track your international shipments with estimated delivery dates and real-time updates.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dropshipping Section --> | |
| <section class="bg-gray-100 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-bold mb-6">Start Your Dropshipping Business</h2> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-xl font-bold mb-4">Amazon Dropshipping Program</h3> | |
| <p class="text-gray-600 mb-6">Sell products without holding inventory. When a customer places an order, we ship directly to them.</p> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Access to millions of products</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>No upfront inventory costs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Automated order fulfillment</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Prime shipping eligibility</span> | |
| </li> | |
| </ul> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black px-6 py-3 rounded-md font-medium">Learn More</button> | |
| </div> | |
| <div class="md:w-1/2 bg-blue-50 flex items-center justify-center p-8"> | |
| <img src="https://m.media-amazon.com/images/I/61aUBxqc5PL._AC_SY500_.jpg" alt="Dropshipping" class="max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Product Detail Section (3D, 360°, Video) --> | |
| <section class="bg-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-bold mb-6">Featured Product with Interactive Media</h2> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-6"> | |
| <!-- Product Media Tabs --> | |
| <div class="mb-4"> | |
| <div class="flex border-b"> | |
| <button class="product-media-tab active px-4 py-2 font-medium" data-target="images">Images</button> | |
| <button class="product-media-tab px-4 py-2 font-medium" data-target="3d">3D View</button> | |
| <button class="product-media-tab px-4 py-2 font-medium" data-target="360">360° View</button> | |
| <button class="product-media-tab px-4 py-2 font-medium" data-target="video">Video</button> | |
| </div> | |
| </div> | |
| <!-- Product Media Content --> | |
| <div class="product-media-content"> | |
| <!-- Images --> | |
| <div id="images" class="product-media-pane active"> | |
| <div class="relative h-96 bg-gray-100 rounded-lg flex items-center justify-center"> | |
| <img src="https://m.media-amazon.com/images/I/71Swqqe7XAL._AC_SL1500_.jpg" alt="Product Image" class="max-h-full max-w-full"> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="w-2 h-2 rounded-full bg-gray-400"></button> | |
| <button class="w-2 h-2 rounded-full bg-gray-300"></button> | |
| <button class="w-2 h-2 rounded-full bg-gray-300"></button> | |
| <button class="w-2 h-2 rounded-full bg-gray-300"></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3D View --> | |
| <div id="3d" class="product-media-pane hidden"> | |
| <div id="product-viewer-3d" class="rounded-lg"> | |
| <!-- 3D viewer will be rendered here by JavaScript --> | |
| <div class="flex items-center justify-center h-full"> | |
| <p class="text-gray-500">Loading 3D viewer...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 360° View --> | |
| <div id="360" class="product-media-pane hidden"> | |
| <div id="product-360-viewer" class="rounded-lg"> | |
| <!-- 360° viewer will be rendered here by JavaScript --> | |
| <div class="flex items-center justify-center h-full"> | |
| <p class="text-gray-500">Loading 360° viewer...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video --> | |
| <div id="video" class="product-media-pane hidden"> | |
| <div class="relative h-96 bg-gray-900 rounded-lg overflow-hidden"> | |
| <video controls class="w-full h-full"> | |
| <source src="https://example.com/product-video.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-6"> | |
| <h1 class="text-2xl font-bold mb-2">Amazon Echo Dot (4th Gen) | Smart speaker with Alexa | Charcoal</h1> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <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="#" class="text-blue-600 text-sm hover:underline">124,321 ratings</a> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="text-3xl font-bold text-red-600 mb-1">$49.99</div> | |
| <div class="text-gray-500 line-through mb-1">$59.99</div> | |
| <div class="text-green-600 text-sm">Save $10.00 (17%)</div> | |
| <div class="text-green-600 text-sm mt-1">FREE delivery <span class="font-bold">Tomorrow, May 18</span></div> | |
| <div class="text-sm mt-1">Or fastest delivery <span class="font-bold">Today</span> if you order within <span class="font-bold">3 hrs 14 mins</span></div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center text-sm mb-2"> | |
| <span class="font-medium mr-2">Color:</span> | |
| <span>Charcoal</span> | |
| </div> | |
| <div class="flex space-x-2 mb-4"> | |
| <button class="w-8 h-8 rounded-full border-2 border-gray-300 focus:border-blue-500" style="background-color: #2D2D2D;"></button> | |
| <button class="w-8 h-8 rounded-full border-2 border-gray-300 focus:border-blue-500" style="background-color: #D4D4D4;"></button> | |
| <button class="w-8 h-8 rounded-full border-2 border-gray-300 focus:border-blue-500" style="background-color: #7F1D1D;"></button> | |
| <button class="w-8 h-8 rounded-full border-2 border-gray-300 focus:border-blue-500" style="background-color: #1E40AF;"></button> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="font-medium mb-1">Style:</div> | |
| <select class="w-full border rounded-md p-2"> | |
| <option>Echo Dot (4th Gen)</option> | |
| <option>Echo Dot (4th Gen) + Smart Bulb</option> | |
| <option>Echo Dot (4th Gen) + Smart Plug</option> | |
| <option>Echo Dot (4th Gen) Bundle</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="font-medium mb-1">Configuration:</div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="config1" name="configuration" class="mr-2" checked> | |
| <label for="config1">Echo Dot (4th Gen) - Charcoal</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="config2" name="configuration" class="mr-2"> | |
| <label for="config2">Echo Dot (4th Gen) with clock - Charcoal</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="font-medium mb-1">About this item</div> | |
| <ul class="list-disc pl-5 space-y-1 text-sm"> | |
| <li>Meet the all-new Echo Dot - Our most popular smart speaker with Alexa. The sleek, compact design delivers crisp vocals and balanced bass for full sound.</li> | |
| <li>Voice control your entertainment - Stream songs from Amazon Music, Apple Music, Spotify, SiriusXM, and others. Play music, audiobooks, and podcasts throughout your home with multi-room music.</li> | |
| <li>Ready to help - Ask Alexa to play music, answer questions, play the news, check the weather, set alarms, control compatible smart home devices, and more.</li> | |
| <li>Control your smart home - Use your voice to turn on lights, adjust thermostats, lock doors, and more with compatible connected devices. Create routines to start and end your day.</li> | |
| <li>Connect with others - Call almost anyone hands-free. Instantly drop in on other rooms in your home or make an announcement to every room with a compatible Echo device.</li> | |
| <li>Designed to protect your privacy - Amazon is not in the business of selling your personal information to others. Built with multiple layers of privacy controls including a mic off button.</li> | |
| </ul> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black px-6 py-2 rounded-md font-medium flex-1">Add to Cart</button> | |
| <button class="bg-orange-400 hover:bg-orange-500 text-white px-6 py-2 rounded-md font-medium flex-1">Buy Now</button> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm"> | |
| <input type="checkbox" id="add-gift" class="mr-2"> | |
| <label for="add-gift">Add a gift receipt for easy returns</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Customer Dashboard Section --> | |
| <section class="bg-gray-100 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl font-bold mb-6">Your Amazon Dashboard</h2> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <!-- Dashboard Sidebar --> | |
| <div class="md:w-1/4 bg-gray-50 p-4"> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center text-white font-bold mr-3">JD</div> | |
| <div> | |
| <div class="font-bold">John Doe</div> | |
| <div class="text-sm text-gray-500">Prime Member</div> | |
| </div> | |
| </div> | |
| <div class="text-sm text-blue-600 hover:underline cursor-pointer">Manage your account</div> | |
| </div> | |
| <nav> | |
| <ul class="space-y-1"> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100 active">Dashboard</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Orders</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Buy Again</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Your Lists</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Account</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Recommendations</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Browsing History</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Your Prime Membership</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Your Subscribe & Save Items</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Memberships & Subscriptions</a></li> | |
| <li><a href="#" class="dashboard-nav-item block px-3 py-2 text-sm font-medium hover:bg-gray-100">Customer Service</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <!-- Dashboard Content --> | |
| <div class="md:w-3/4 p-6"> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-bold mb-4">Your Orders</h3> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <div class="grid grid-cols-12 bg-gray-100 p-3 text-sm font-medium"> | |
| <div class="col-span-3">Order Placed</div> | |
| <div class="col-span-2">Total</div> | |
| <div class="col-span-4">Ship To</div> | |
| <div class="col-span-3">Order #</div> | |
| </div> | |
| <div class="grid grid-cols-12 p-3 border-b text-sm items-center hover:bg-gray-50"> | |
| <div class="col-span-3">May 15, 2023</div> | |
| <div class="col-span-2">$49.99</div> | |
| <div class="col-span-4">John Doe</div> | |
| <div class="col-span-3 text-blue-600 hover:underline cursor-pointer">113-1234567-9876543</div> | |
| </div> | |
| <div class="grid grid-cols-12 p-3 border-b text-sm items-center hover:bg-gray-50"> | |
| <div class="col-span-3">May 10, 2023</div> | |
| <div class="col-span-2">$129.99</div> | |
| <div class="col-span-4">John Doe</div> | |
| <div class="col-span-3 text-blue-600 hover:underline cursor-pointer">113-7654321-1234567</div> | |
| </div> | |
| <div class="grid grid-cols-12 p-3 border-b text-sm items-center hover:bg-gray-50"> | |
| <div class="col-span-3">April 28, 2023</div> | |
| <div class="col-span-2">$24.99</div> | |
| <div class="col-span-4">John Doe</div> | |
| <div class="col-span-3 text-blue-600 hover:underline cursor-pointer">113-9876543-7654321</div> | |
| </div> | |
| <div class="p-3 text-center"> | |
| <a href="#" class="text-blue-600 hover:underline text-sm">View all orders</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-bold mb-4">Your Recently Viewed Items</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div class="border rounded-lg p-3 hover:shadow-md cursor-pointer"> | |
| <img src="https://m.media-amazon.com/images/I/71Swqqe7XAL._AC_UY218_.jpg" alt="Product" class="w-full h-32 object-contain mb-2"> | |
| <div class="text-sm line-clamp-2">Amazon Echo Dot (3rd Gen) - Smart speaker with Alexa - Charcoal</div> | |
| </div> | |
| <div class="border rounded-lg p-3 hover:shadow-md cursor-pointer"> | |
| <img src="https://m.media-amazon.com/images/I/71WrHATQPAL._AC_UY218_.jpg" alt="Product" class="w-full h-32 object-contain mb-2"> | |
| <div class="text-sm line-clamp-2">Apple AirPods Pro with MagSafe Charging Case (2021)</div> | |
| </div> | |
| <div class="border rounded-lg p-3 hover:shadow-md cursor-pointer"> | |
| <img src="https://m.media-amazon.com/images/I/61L5QgPvgxL._AC_UY218_.jpg" alt="Product" class="w-full h-32 object-contain mb-2"> | |
| <div class="text-sm line-clamp-2">Samsung Galaxy Tab A8 10.5" 32GB Android Tablet w/ LCD Screen</div> | |
| </div> | |
| <div class="border rounded-lg p-3 hover:shadow-md cursor-pointer"> | |
| <img src="https://m.media-amazon.com/images/I/71sBtM3Yi5L._AC_UY218_.jpg" alt="Product" class="w-full h-32 object-contain mb-2"> | |
| <div class="text-sm line-clamp-2">PlayStation 5 Console (PS5)</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Your Recommendations</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div class="border rounded-lg p-3 hover:shadow-md cursor-pointer"> | |
| <img src="https://m.media-amazon.com/images/I/61DUO0NqyyL._AC_UY218_.jpg" alt="Product" class="w-full h-32 object-contain mb-2"> | |
| <div class="text-sm line-clamp-2">Fire TV Stick 4K streaming device with Alexa Voice Remote (includes TV controls)</div> | |
| </div> | |
| <div class="border rounded-lg p-3 hover:shadow-md cursor-pointer"> | |
| <img src="https://m.media-amazon.com/images/I/61DjwgH5wVL._AC_U | |
| <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-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |