Spaces:

spanexx
/

ebayalt

Running

App Files Files Community

ebayalt / index.html

spanexx

work on sell page - Follow Up Deployment

ed3eb56 verified 9 months ago

raw

history blame contribute delete

100 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>MarketBay - Online Marketplace</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>
	/* Custom styles that can't be done with Tailwind */
	.gradient-bg {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}
	.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
	}
	.auction-timer {
	font-family: 'Courier New', monospace;
	}
	.image-gallery-thumbnail.active {
	border: 2px solid #3b82f6;
	}
	.chat-message:hover {
	background-color: #f3f4f6;
	}
	/* Smooth transitions */
	.transition-all {
	transition: all 0.3s ease;
	}
	</style>
	<script>
	// Handle page navigation
	document.addEventListener('DOMContentLoaded', function() {
	// Get all page elements
	const landingPage = document.getElementById('landing-page');
	const dealsPage = document.getElementById('deals-page');
	const categoryPage = document.getElementById('category-page');
	const createListingPage = document.getElementById('create-listing-page');

	// Get navigation links
	const dealsNavLink = document.getElementById('deals-nav-link');
	const mobileDealsNavLink = document.getElementById('mobile-deals-nav-link');
	const categoriesNavLinks = document.querySelectorAll('[data-nav="categories"]');
	const mobileCategoriesNavLinks = document.querySelectorAll('[data-nav="mobile-categories"]');
	const sellNavLinks = document.querySelectorAll('[data-nav="sell"]');
	const mobileSellNavLinks = document.querySelectorAll('[data-nav="mobile-sell"]');

	function showPage(page) {
	// Hide all pages
	landingPage.classList.add('hidden');
	dealsPage.classList.add('hidden');
	categoryPage.classList.add('hidden');

	// Show requested page
	if (page === 'deals') {
	dealsPage.classList.remove('hidden');
	} else if (page === 'categories') {
	categoryPage.classList.remove('hidden');
	} else {
	landingPage.classList.remove('hidden');
	}

	// Update active state in navigation
	document.querySelectorAll('nav a').forEach(link => {
	link.classList.remove('border-blue-500', 'text-gray-900');
	link.classList.add('border-transparent', 'text-gray-500');
	});

	if (page === 'deals') {
	dealsNavLink.classList.remove('border-transparent', 'text-gray-500');
	dealsNavLink.classList.add('border-blue-500', 'text-gray-900');
	} else if (page === 'categories') {
	categoriesNavLinks.forEach(link => {
	link.classList.remove('border-transparent', 'text-gray-500');
	link.classList.add('border-blue-500', 'text-gray-900');
	});
	}
	}

	// Navigation event listeners
	dealsNavLink.addEventListener('click', function(e) {
	e.preventDefault();
	showPage('deals');
	});

	mobileDealsNavLink.addEventListener('click', function(e) {
	e.preventDefault();
	showPage('deals');
	});

	categoriesNavLinks.forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	showPage('categories');
	});
	});

	mobileCategoriesNavLinks.forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	showPage('categories');
	});
	});

	sellNavLinks.forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	showPage('sell');
	});
	});

	mobileSellNavLinks.forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	showPage('sell');
	});
	});

	// Deal countdown timer
	function updateDealCountdown() {
	// This would be replaced with actual deal end time logic
	const now = new Date();
	const endTime = new Date(now.getTime() + 12 * 60 * 60 * 1000 + 34 * 60 * 1000);

	const diff = endTime - now;
	const hours = Math.floor(diff / (1000 * 60 * 60));
	const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

	document.getElementById('deal-hours').textContent = hours.toString().padStart(2, '0');
	document.getElementById('deal-minutes').textContent = minutes.toString().padStart(2, '0');
	}

	// Flash deal countdown timer
	function updateFlashCountdown() {
	// This would be replaced with actual flash deal end time logic
	const now = new Date();
	const endTime = new Date(now.getTime() + 5 * 60 * 60 * 1000 + 47 * 60 * 1000 + 32 * 1000);

	const diff = endTime - now;
	const hours = Math.floor(diff / (1000 * 60 * 60));
	const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
	const seconds = Math.floor((diff % (1000 * 60)) / 1000);

	document.getElementById('flash-hours').textContent = hours.toString().padStart(2, '0');
	document.getElementById('flash-minutes').textContent = minutes.toString().padStart(2, '0');
	document.getElementById('flash-seconds').textContent = seconds.toString().padStart(2, '0');
	}

	// Initialize timers
	updateDealCountdown();
	updateFlashCountdown();
	setInterval(updateDealCountdown, 60000);
	setInterval(updateFlashCountdown, 1000);
	});
	</script>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- Navigation -->
	<nav class="bg-white shadow-md sticky top-0 z-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between h-16">
	<div class="flex items-center">
	<a href="#" class="flex-shrink-0 flex items-center">
	<i class="fas fa-store text-blue-600 text-2xl mr-2"></i>
	<span class="text-xl font-bold text-gray-800">MarketBay</span>
	</a>
	<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
	<a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
	<a href="#" data-nav="categories" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Categories</a>
	<a href="#" id="deals-nav-link" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Deals</a>
	<a href="#" data-nav="sell" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Sell</a>
	</div>
	</div>
	<div class="hidden sm:ml-6 sm:flex sm:items-center">
	<div class="relative mx-4">
	<input type="text" placeholder="Search for anything..." class="w-64 px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
	<button class="absolute right-0 top-0 h-full px-4 text-gray-500 hover:text-blue-600">
	<i class="fas fa-search"></i>
	</button>
	</div>
	<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-heart text-xl"></i>
	</button>
	<button class="ml-3 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-bell text-xl"></i>
	</button>
	<button class="ml-3 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-shopping-cart text-xl"></i>
	</button>
	<div class="ml-3 relative">
	<div>
	<button id="user-menu" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
	</button>
	</div>
	<div id="user-dropdown" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
	</div>
	</div>
	</div>
	<div class="-mr-2 flex items-center sm:hidden">
	<button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Mobile menu -->
	<div id="mobile-menu" class="hidden sm:hidden">
	<div class="pt-2 pb-3 space-y-1">
	<a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
	<a href="#" data-nav="mobile-categories" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Categories</a>
	<a href="#" id="mobile-deals-nav-link" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Deals</a>
	<a href="#" data-nav="mobile-sell" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Sell</a>
	</div>
	<div class="pt-4 pb-3 border-t border-gray-200">
	<div class="flex items-center px-4">
	<div class="flex-shrink-0">
	<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
	</div>
	<div class="ml-3">
	<div class="text-base font-medium text-gray-800">John Doe</div>
	<div class="text-sm font-medium text-gray-500">john@example.com</div>
	</div>
	<button class="ml-auto flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-heart"></i>
	</button>
	<button class="ml-2 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fas fa-shopping-cart"></i>
	</button>
	</div>
	<div class="mt-3 space-y-1">
	<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Your Profile</a>
	<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Settings</a>
	<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign out</a>
	</div>
	</div>
	</div>
	</nav>

	<!-- Main Content - Dynamic based on page -->
	<!-- Category Page (Hidden by default) -->
	<div id="category-page" class="hidden">
	<div class="flex flex-col md:flex-row gap-8">
	<!-- Sidebar Filters -->
	<div class="w-full md:w-64 bg-white p-4 rounded-lg shadow-sm">
	<h3 class="font-bold text-lg mb-4">Filters</h3>

	<!-- Price Range -->
	<div class="mb-6">
	<h4 class="font-medium text-gray-900 mb-3">Price Range</h4>
	<div class="flex items-center justify-between mb-2">
	<input type="number" placeholder="Min" class="w-20 px-2 py-1 border border-gray-300 rounded">
	<span class="mx-2 text-gray-500">to</span>
	<input type="number" placeholder="Max" class="w-20 px-2 py-1 border border-gray-300 rounded">
	</div>
	<button class="w-full bg-blue-600 text-white py-1 px-4 rounded text-sm">Apply</button>
	</div>

	<!-- Condition -->
	<div class="mb-6">
	<h4 class="font-medium text-gray-900 mb-3">Condition</h4>
	<div class="space-y-2">
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">New</span>
	</label>
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">Used - Like New</span>
	</label>
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">Used - Good</span>
	</label>
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">Used - Fair</span>
	</label>
	</div>
	</div>

	<!-- Delivery Options -->
	<div class="mb-6">
	<h4 class="font-medium text-gray-900 mb-3">Delivery Options</h4>
	<div class="space-y-2">
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">Free Shipping</span>
	</label>
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">Local Pickup</span>
	</label>
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">Fast Delivery</span>
	</label>
	</div>
	</div>

	<!-- Seller Rating -->
	<div class="mb-6">
	<h4 class="font-medium text-gray-900 mb-3">Seller Rating</h4>
	<div class="space-y-2">
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	& Up
	</span>
	</label>
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	& Up
	</span>
	</label>
	<label class="flex items-center">
	<input type="checkbox" class="rounded text-blue-600">
	<span class="ml-2 text-sm">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	& Up
	</span>
	</label>
	</div>
	</div>

	<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded text-sm font-medium">
	Reset All Filters
	</button>
	</div>

	<!-- Main Category Content -->
	<div class="flex-1">
	<!-- Category Header -->
	<div class="bg-white p-4 rounded-lg shadow-sm mb-6">
	<div class="flex flex-col md:flex-row md:items-center md:justify-between">
	<div>
	<h2 class="text-2xl font-bold text-gray-900">Electronics</h2>
	<p class="text-gray-600">1,234 items found</p>
	</div>
	<div class="mt-4 md:mt-0">
	<label for="sort" class="sr-only">Sort</label>
	<select id="sort" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
	<option>Sort by: Recommended</option>
	<option>Price: Low to High</option>
	<option>Price: High to Low</option>
	<option>Newest First</option>
	<option>Ending Soonest</option>
	<option>Most Watched</option>
	</select>
	</div>
	</div>
	</div>

	<!-- Subcategories -->
	<div class="bg-white p-4 rounded-lg shadow-sm mb-6">
	<h3 class="font-medium text-gray-900 mb-3">Shop Subcategories</h3>
	<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
	<a href="#" class="text-center p-2 hover:bg-gray-50 rounded">
	<div class="bg-blue-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-mobile-alt text-blue-600"></i>
	</div>
	<p class="text-sm font-medium">Phones</p>
	</a>
	<a href="#" class="text-center p-2 hover:bg-gray-50 rounded">
	<div class="bg-purple-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-laptop text-purple-600"></i>
	</div>
	<p class="text-sm font-medium">Laptops</p>
	</a>
	<a href="#" class="text-center p-2 hover:bg-gray-50 rounded">
	<div class="bg-green-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-headphones text-green-600"></i>
	</div>
	<p class="text-sm font-medium">Audio</p>
	</a>
	<a href="#" class="text-center p-2 hover:bg-gray-50 rounded">
	<div class="bg-yellow-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-gamepad text-yellow-600"></i>
	</div>
	<p class="text-sm font-medium">Gaming</p>
	</a>
	<a href="#" class="text-center p-2 hover:bg-gray-50 rounded">
	<div class="bg-red-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-camera text-red-600"></i>
	</div>
	<p class="text-sm font-medium">Cameras</p>
	</a>
	</div>
	</div>

	<!-- Product Grid -->
	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- Product cards would be repeated here -->
	<!-- Example product card (same as featured listings) -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
	<div class="absolute top-2 left-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">NEW</div>
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Premium Headphones</h3>
	<p class="text-gray-500 text-sm">Electronics</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$129.99</p>
	<p class="text-xs text-gray-500 line-through">$199.99</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.8</span>
	<span class="text-gray-500 text-xs ml-1">(124)</span>
	</div>
	<div class="ml-auto">
	<span class="text-green-600 text-sm font-medium">Free shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Buy Now</button>
	</div>
	</div>
	<!-- More product cards would go here -->
	</div>

	<!-- Pagination -->
	<div class="mt-8 flex justify-center">
	<nav class="inline-flex rounded-md shadow">
	<a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
	Previous
	</a>
	<a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-blue-600 hover:bg-blue-50">
	1
	</a>
	<a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
	2
	</a>
	<a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
	3
	</a>
	<a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
	Next
	</a>
	</nav>
	</div>
	</div>
	</div>
	</div>
	<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
	<!-- Deals Page -->
	<div id="deals-page" class="hidden">
	<section class="mb-12">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-gray-900">Today's Best Deals</h2>
	<div class="flex items-center">
	<span class="text-sm text-gray-500 mr-2">Ending in:</span>
	<div class="bg-red-600 text-white text-sm font-bold px-3 py-1 rounded">
	<span id="deal-hours">12</span>h <span id="deal-minutes">34</span>m
	</div>
	</div>
	</div>

	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
	<!-- Deal Card 1 -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all relative">
	<div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded z-10">
	50% OFF
	</div>
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Deal product">
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Premium Headphones</h3>
	<p class="text-gray-500 text-sm">Electronics</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$99.99</p>
	<p class="text-xs text-gray-500 line-through">$199.99</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.8</span>
	<span class="text-gray-500 text-xs ml-1">(124)</span>
	</div>
	<div class="ml-auto">
	<span class="text-green-600 text-sm font-medium">Free shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-md transition-colors">
	Get Deal
	</button>
	</div>
	</div>

	<!-- More deal cards would go here -->
	</div>
	</section>

	<section class="mb-12">
	<h2 class="text-2xl font-bold text-gray-900 mb-6">Flash Deals</h2>
	<div class="bg-gradient-to-r from-red-600 to-pink-600 rounded-lg p-6 text-white">
	<div class="flex flex-col md:flex-row items-center">
	<div class="md:w-1/3 mb-4 md:mb-0">
	<h3 class="text-xl font-bold mb-2">Limited Time Offer</h3>
	<p class="mb-4">Huge discounts on select items - while supplies last!</p>
	<div class="flex items-center">
	<div class="text-center px-2">
	<div class="bg-black bg-opacity-30 rounded-lg px-3 py-2">
	<span id="flash-hours">05</span>
	</div>
	<span class="text-xs mt-1">HOURS</span>
	</div>
	<span class="mx-1">:</span>
	<div class="text-center px-2">
	<div class="bg-black bg-opacity-30 rounded-lg px-3 py-2">
	<span id="flash-minutes">47</span>
	</div>
	<span class="text-xs mt-1">MIN</span>
	</div>
	<span class="mx-1">:</span>
	<div class="text-center px-2">
	<div class="bg-black bg-opacity-30 rounded-lg px-3 py-2">
	<span id="flash-seconds">32</span>
	</div>
	<span class="text-xs mt-1">SEC</span>
	</div>
	</div>
	</div>
	<div class="md:w-2/3 grid grid-cols-2 md:grid-cols-3 gap-4">
	<!-- Flash deal items would go here -->
	</div>
	</div>
	</div>
	</section>
	</div>

	<!-- Landing Page -->
	<div id="landing-page">
	<!-- Hero Section -->
	<section class="gradient-bg rounded-xl p-8 mb-8">
	<div class="max-w-3xl mx-auto text-center">
	<h1 class="text-4xl font-bold text-gray-900 mb-4">Find great deals on everything you love</h1>
	<p class="text-xl text-gray-600 mb-6">Buy, sell, and bid on millions of items. Join millions of happy customers.</p>
	<div class="relative max-w-xl mx-auto">
	<input type="text" placeholder="Search for anything..." class="w-full px-6 py-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-lg">
	<button class="absolute right-0 top-0 h-full px-6 bg-blue-600 text-white rounded-r-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
	<i class="fas fa-search"></i> Search
	</button>
	</div>
	<div class="mt-4 flex justify-center space-x-4">
	<button class="px-6 py-2 bg-white text-blue-600 rounded-full border border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Popular</button>
	<button class="px-6 py-2 bg-white text-blue-600 rounded-full border border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Electronics</button>
	<button class="px-6 py-2 bg-white text-blue-600 rounded-full border border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Fashion</button>
	<button class="px-6 py-2 bg-white text-blue-600 rounded-full border border-blue-600 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Home & Garden</button>
	</div>
	</div>
	</section>

	<!-- Featured Listings -->
	<section class="mb-12">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-gray-900">Featured Listings</h2>
	<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">View all</a>
	</div>
	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
	<!-- Product Card 1 -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
	<div class="absolute top-2 left-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">NEW</div>
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Premium Headphones</h3>
	<p class="text-gray-500 text-sm">Electronics</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$129.99</p>
	<p class="text-xs text-gray-500 line-through">$199.99</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.8</span>
	<span class="text-gray-500 text-xs ml-1">(124)</span>
	</div>
	<div class="ml-auto">
	<span class="text-green-600 text-sm font-medium">Free shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Buy Now</button>
	</div>
	</div>

	<!-- Product Card 2 (Auction) -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	<div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-31T23:59:59">
	2d 4h 32m left
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Smart Watch Series 5</h3>
	<p class="text-gray-500 text-sm">Electronics</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$175.50</p>
	<p class="text-xs text-gray-500">Current bid</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.5</span>
	<span class="text-gray-500 text-xs ml-1">(89)</span>
	</div>
	<div class="ml-auto">
	<span class="text-gray-600 text-sm font-medium">+$5.99 shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
	</div>
	</div>

	<!-- Product Card 3 -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Leather Wallet</h3>
	<p class="text-gray-500 text-sm">Fashion</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$29.99</p>
	<p class="text-xs text-gray-500 line-through">$39.99</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.2</span>
	<span class="text-gray-500 text-xs ml-1">(42)</span>
	</div>
	<div class="ml-auto">
	<span class="text-green-600 text-sm font-medium">Free shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Buy Now</button>
	</div>
	</div>

	<!-- Product Card 4 -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1592921870789-04563d55041c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Vintage Camera</h3>
	<p class="text-gray-500 text-sm">Collectibles</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$89.99</p>
	<p class="text-xs text-gray-500">Buy It Now</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.9</span>
	<span class="text-gray-500 text-xs ml-1">(156)</span>
	</div>
	<div class="ml-auto">
	<span class="text-gray-600 text-sm font-medium">+$8.99 shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Buy Now</button>
	</div>
	</div>
	</div>
	</section>

	<!-- Categories Section -->
	<section class="mb-12">
	<h2 class="text-2xl font-bold text-gray-900 mb-6">Shop by Category</h2>
	<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
	<a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
	<div class="bg-blue-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-mobile-alt text-blue-600 text-xl"></i>
	</div>
	<h3 class="font-medium text-gray-900">Electronics</h3>
	<p class="text-gray-500 text-sm">1,234 items</p>
	</a>
	<a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
	<div class="bg-pink-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-tshirt text-pink-600 text-xl"></i>
	</div>
	<h3 class="font-medium text-gray-900">Fashion</h3>
	<p class="text-gray-500 text-sm">3,456 items</p>
	</a>
	<a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
	<div class="bg-green-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-home text-green-600 text-xl"></i>
	</div>
	<h3 class="font-medium text-gray-900">Home & Garden</h3>
	<p class="text-gray-500 text-sm">2,789 items</p>
	</a>
	<a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
	<div class="bg-yellow-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-gamepad text-yellow-600 text-xl"></i>
	</div>
	<h3 class="font-medium text-gray-900">Toys & Games</h3>
	<p class="text-gray-500 text-sm">1,023 items</p>
	</a>
	<a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
	<div class="bg-purple-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-book text-purple-600 text-xl"></i>
	</div>
	<h3 class="font-medium text-gray-900">Books</h3>
	<p class="text-gray-500 text-sm">876 items</p>
	</a>
	<a href="#" class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow">
	<div class="bg-red-100 rounded-full p-3 inline-block mb-2">
	<i class="fas fa-car text-red-600 text-xl"></i>
	</div>
	<h3 class="font-medium text-gray-900">Vehicles</h3>
	<p class="text-gray-500 text-sm">342 items</p>
	</a>
	</div>
	</section>

	<!-- Ending Soon Section -->
	<section class="mb-12">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-gray-900">Ending Soon</h2>
	<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">View all</a>
	</div>
	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
	<!-- Product Card 5 (Auction) -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	<div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-15T18:30:00">
	1h 23m left
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Wireless Earbuds</h3>
	<p class="text-gray-500 text-sm">Electronics</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$45.99</p>
	<p class="text-xs text-gray-500">Current bid</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.3</span>
	<span class="text-gray-500 text-xs ml-1">(67)</span>
	</div>
	<div class="ml-auto">
	<span class="text-gray-600 text-sm font-medium">+$3.99 shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
	</div>
	</div>

	<!-- Product Card 6 (Auction) -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	<div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-15T19:45:00">
	2h 38m left
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Vintage Camera</h3>
	<p class="text-gray-500 text-sm">Collectibles</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$78.25</p>
	<p class="text-xs text-gray-500">Current bid</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.7</span>
	<span class="text-gray-500 text-xs ml-1">(92)</span>
	</div>
	<div class="ml-auto">
	<span class="text-gray-600 text-sm font-medium">+$6.99 shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
	</div>
	</div>

	<!-- Product Card 7 (Auction) -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	<div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-15T21:15:00">
	4h 8m left
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Designer Watch</h3>
	<p class="text-gray-500 text-sm">Jewelry</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$210.00</p>
	<p class="text-xs text-gray-500">Current bid</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.9</span>
	<span class="text-gray-500 text-xs ml-1">(143)</span>
	</div>
	<div class="ml-auto">
	<span class="text-gray-600 text-sm font-medium">+$8.99 shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
	</div>
	</div>

	<!-- Product Card 8 (Auction) -->
	<div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all">
	<div class="relative pb-3/4 h-48">
	<img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product image">
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	<div class="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded auction-timer" data-end="2023-12-15T22:30:00">
	5h 23m left
	</div>
	</div>
	<div class="p-4">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="text-lg font-semibold text-gray-900 mb-1">Perfume Set</h3>
	<p class="text-gray-500 text-sm">Beauty</p>
	</div>
	<div class="text-right">
	<p class="text-lg font-bold text-blue-600">$32.50</p>
	<p class="text-xs text-gray-500">Current bid</p>
	</div>
	</div>
	<div class="mt-3 flex items-center">
	<div class="flex items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.5</span>
	<span class="text-gray-500 text-xs ml-1">(56)</span>
	</div>
	<div class="ml-auto">
	<span class="text-gray-600 text-sm font-medium">+$4.99 shipping</span>
	</div>
	</div>
	<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">Place Bid</button>
	</div>
	</div>
	</div>
	</section>
	</div>

	<!-- Product Details Page (Hidden by default) -->
	<div id="product-details-page" class="hidden">
	<div class="bg-white rounded-lg shadow-md overflow-hidden">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
	<!-- Product Images -->
	<div class="p-4">
	<div class="relative h-96 mb-4 bg-gray-100 rounded-lg overflow-hidden">
	<img id="main-product-image" class="absolute h-full w-full object-contain" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Main product image">
	<div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
	<i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
	</div>
	<div class="absolute bottom-2 left-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">NEW</div>
	</div>
	<div class="grid grid-cols-4 gap-2">
	<div class="image-gallery-thumbnail cursor-pointer border border-gray-200 rounded p-1 hover:border-blue-500">
	<img class="h-20 w-full object-contain" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product thumbnail 1">
	</div>
	<div class="image-gallery-thumbnail cursor-pointer border border-gray-200 rounded p-1 hover:border-blue-500">
	<img class="h-20 w-full object-contain" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product thumbnail 2">
	</div>
	<div class="image-gallery-thumbnail cursor-pointer border border-gray-200 rounded p-1 hover:border-blue-500">
	<img class="h-20 w-full object-contain" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product thumbnail 3">
	</div>
	<div class="image-gallery-thumbnail cursor-pointer border border-gray-200 rounded p-1 hover:border-blue-500">
	<img class="h-20 w-full object-contain" src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Product thumbnail 4">
	</div>
	</div>
	</div>

	<!-- Product Info -->
	<div class="p-6">
	<h1 class="text-3xl font-bold text-gray-900 mb-2">Premium Wireless Headphones with Noise Cancellation</h1>
	<div class="flex items-center mb-4">
	<div class="flex items-center mr-4">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star-half-alt text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.8</span>
	<span class="text-gray-500 text-sm ml-1">(124 reviews)</span>
	</div>
	<span class="text-blue-600 text-sm font-medium">123 sold</span>
	</div>

	<div class="bg-gray-50 p-4 rounded-lg mb-6">
	<div class="flex items-center mb-2">
	<span class="text-3xl font-bold text-gray-900">$129.99</span>
	<span class="ml-2 text-sm text-gray-500 line-through">$199.99</span>
	<span class="ml-2 bg-red-100 text-red-800 text-xs font-semibold px-2 py-0.5 rounded">35% OFF</span>
	</div>
	<div class="text-green-600 font-medium mb-2">
	<i class="fas fa-truck"></i> Free shipping
	</div>
	<div class="text-gray-600 text-sm">
	<i class="fas fa-map-marker-alt"></i> Ships from United States
	</div>
	</div>

	<div class="mb-6">
	<h3 class="text-lg font-semibold text-gray-900 mb-2">Description</h3>
	<p class="text-gray-700 mb-4">
	Experience premium sound quality with these wireless headphones featuring active noise cancellation technology.
	Perfect for music lovers and frequent travelers. Includes 30-hour battery life, touch controls, and built-in microphone.
	</p>
	<ul class="list-disc list-inside text-gray-700">
	<li>Active Noise Cancellation</li>
	<li>30-hour battery life</li>
	<li>Bluetooth 5.0</li>
	<li>Built-in microphone</li>
	<li>Touch controls</li>
	<li>Comfortable over-ear design</li>
	</ul>
	</div>

	<div class="mb-6">
	<h3 class="text-lg font-semibold text-gray-900 mb-2">Shipping & Returns</h3>
	<div class="grid grid-cols-2 gap-4 text-sm text-gray-700">
	<div>
	<div class="font-medium">Shipping:</div>
	<p>Free standard shipping</p>
	<p>Estimated delivery: Dec 20-24</p>
	</div>
	<div>
	<div class="font-medium">Returns:</div>
	<p>30-day return policy</p>
	<p>Buyer pays for return shipping</p>
	</div>
	</div>
	</div>

	<div class="flex space-x-4">
	<button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-medium transition-colors">
	<i class="fas fa-shopping-cart mr-2"></i> Add to Cart
	</button>
	<button class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white py-3 px-6 rounded-lg font-medium transition-colors">
	Buy Now
	</button>
	</div>
	</div>
	</div>

	<!-- Product Tabs -->
	<div class="border-t border-gray-200 mt-8">
	<div class="flex border-b border-gray-200">
	<button class="product-tab active py-4 px-6 font-medium text-blue-600 border-b-2 border-blue-500">Details</button>
	<button class="product-tab py-4 px-6 font-medium text-gray-500 hover:text-gray-700">Shipping & Policies</button>
	<button class="product-tab py-4 px-6 font-medium text-gray-500 hover:text-gray-700">Seller Information</button>
	<button class="product-tab py-4 px-6 font-medium text-gray-500 hover:text-gray-700">Reviews (124)</button>
	</div>
	<div class="p-6">
	<div id="details-tab" class="product-tab-content">
	<h3 class="text-lg font-semibold text-gray-900 mb-4">Product Details</h3>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<h4 class="font-medium text-gray-900 mb-2">Specifications</h4>
	<table class="w-full text-sm text-gray-700">
	<tr class="border-b border-gray-200">
	<td class="py-2 font-medium">Brand</td>
	<td class="py-2">SoundMaster</td>
	</tr>
	<tr class="border-b border-gray-200">
	<td class="py-2 font-medium">Model</td>
	<td class="py-2">SM-4500</td>
	</tr>
	<tr class="border-b border-gray-200">
	<td class="py-2 font-medium">Color</td>
	<td class="py-2">Black</td>
	</tr>
	<tr class="border-b border-gray-200">
	<td class="py-2 font-medium">Connectivity</td>
	<td class="py-2">Bluetooth 5.0</td>
	</tr>
	<tr class="border-b border-gray-200">
	<td class="py-2 font-medium">Battery Life</td>
	<td class="py-2">30 hours</td>
	</tr>
	</table>
	</div>
	<div>
	<h4 class="font-medium text-gray-900 mb-2">What's in the box</h4>
	<ul class="list-disc list-inside text-gray-700">
	<li>Wireless Headphones</li>
	<li>USB-C Charging Cable</li>
	<li>3.5mm Audio Cable</li>
	<li>Carrying Case</li>
	<li>Quick Start Guide</li>
	</ul>
	</div>
	</div>
	</div>
	<div id="shipping-tab" class="product-tab-content hidden">
	<h3 class="text-lg font-semibold text-gray-900 mb-4">Shipping & Policies</h3>
	<div class="space-y-4">
	<div>
	<h4 class="font-medium text-gray-900">Shipping</h4>
	<p class="text-gray-700">Free standard shipping on all orders. Expedited shipping options available at checkout.</p>
	</div>
	<div>
	<h4 class="font-medium text-gray-900">Returns</h4>
	<p class="text-gray-700">30-day return policy. Item must be in original condition with all accessories included. Buyer is responsible for return shipping costs unless item is defective or incorrect.</p>
	</div>
	<div>
	<h4 class="font-medium text-gray-900">Payments</h4>
	<p class="text-gray-700">We accept all major credit cards, PayPal, and MarketBay Pay.</p>
	</div>
	</div>
	</div>
	<div id="seller-tab" class="product-tab-content hidden">
	<h3 class="text-lg font-semibold text-gray-900 mb-4">Seller Information</h3>
	<div class="flex items-start mb-6">
	<img class="h-16 w-16 rounded-full mr-4" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Seller profile">
	<div>
	<h4 class="font-bold text-gray-900">TechGadgetsStore</h4>
	<div class="flex items-center mb-1">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-gray-700 ml-1">4.9</span>
	<span class="text-gray-500 text-sm ml-1">(1,234 reviews)</span>
	</div>
	<p class="text-gray-700 text-sm">Member since 2018</p>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-4 text-sm">
	<div>
	<div class="font-medium text-gray-900">Response Rate:</div>
	<p class="text-gray-700">98%</p>
	</div>
	<div>
	<div class="font-medium text-gray-900">Response Time:</div>
	<p class="text-gray-700">Within 1 hour</p>
	</div>
	<div>
	<div class="font-medium text-gray-900">Items Sold:</div>
	<p class="text-gray-700">5,678</p>
	</div>
	<div>
	<div class="font-medium text-gray-900">Followers:</div>
	<p class="text-gray-700">12,345</p>
	</div>
	</div>
	<button class="mt-6 bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-md transition-colors">
	Contact Seller
	</button>
	</div>
	<div id="reviews-tab" class="product-tab-content hidden">
	<h3 class="text-lg font-semibold text-gray-900 mb-4">Customer Reviews (124)</h3>
	<div class="flex items-center mb-6">
	<div class="text-4xl font-bold mr-4">4.8</div>
	<div class="mr-6">
	<div class="flex items-center mb-1">
	<span class="w-16 text-sm text-gray-600">5 stars</span>
	<div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
	<div class="bg-yellow-400 h-2.5 rounded-full" style="width: 85%"></div>
	</div>
	<span class="text-sm text-gray-600">105</span>
	</div>
	<div class="flex items-center mb-1">
	<span class="w-16 text-sm text-gray-600">4 stars</span>
	<div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
	<div class="bg-yellow-400 h-2.5 rounded-full" style="width: 10%"></div>
	</div>
	<span class="text-sm text-gray-600">12</span>
	</div>
	<div class="flex items-center mb-1">
	<span class="w-16 text-sm text-gray-600">3 stars</span>
	<div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
	<div class="bg-yellow-400 h-2.5 rounded-full" style="width: 3%"></div>
	</div>
	<span class="text-sm text-gray-600">4</span>
	</div>
	<div class="flex items-center mb-1">
	<span class="w-16 text-sm text-gray-600">2 stars</span>
	<div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
	<div class="bg-yellow-400 h-2.5 rounded-full" style="width: 1%"></div>
	</div>
	<span class="text-sm text-gray-600">1</span>
	</div>
	<div class="flex items-center">
	<span class="w-16 text-sm text-gray-600">1 star</span>
	<div class="w-32 bg-gray-200 rounded-full h-2.5 mx-2">
	<div class="bg-yellow-400 h-2.5 rounded-full" style="width: 1%"></div>
	</div>
	<span class="text-sm text-gray-600">2</span>
	</div>
	</div>
	<button class="ml-auto bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded-md transition-colors">
	Write a Review
	</button>
	</div>

	<div class="space-y-6">
	<!-- Review 1 -->
	<div class="border-b border-gray-200 pb-6">
	<div class="flex items-center mb-2">
	<div class="flex items-center mr-4">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	</div>
	<div class="text-gray-900 font-medium">Excellent sound quality!</div>
	</div>
	<div class="text-sm text-gray-500 mb-3">By John D. on November 15, 2023</div>
	<p class="text-gray-700 mb-3">
	These headphones exceeded my expectations. The noise cancellation is incredible and the sound quality is crisp and clear.
	Very comfortable for long listening sessions. Battery life is as advertised.
	</p>
	<div class="flex items-center text-sm text-gray-500">
	<span class="mr-4">Was this review helpful?</span>
	<button class="mr-2 text-blue-600 hover:text-blue-800">Yes (24)</button>
	<button class="text-blue-600 hover:text-blue-800">No (2)</button>
	</div>
	</div>

	<!-- Review 2 -->
	<div class="border-b border-gray-200 pb-6">
	<div class="flex items-center mb-2">
	<div class="flex items-center mr-4">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="far fa-star text-yellow-400"></i>
	</div>
	<div class="text-gray-900 font-medium">Great headphones, minor issues</div>
	</div>
	<div class="text-sm text-gray-500 mb-3">By Sarah M. on November 8, 2023</div>
	<p class="text-gray-700 mb-3">
	Overall very happy with these headphones. Sound quality is excellent and they're comfortable to wear.
	My only complaint is that the touch controls can be a bit too sensitive at times.
	Would definitely recommend though!
	</p>
	<div class="flex items-center text-sm text-gray-500">
	<span class="mr-4">Was this review helpful?</span>
	<button class="mr-2 text-blue-600 hover:text-blue-800">Yes (18)</button>
	<button class="text-blue-600 hover:text-blue-800">No (1)</button>
	</div>
	</div>

	<!-- Review 3 -->
	<div class="pb-6">
	<div class="flex items-center mb-2">
	<div class="flex items-center mr-4">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star-half-alt text-yellow-400"></i>
	</div>
	<div class="text-gray-900 font-medium">Almost perfect</div>
	</div>
	<div class="text-sm text-gray-500 mb-3">By Michael T. on October 30, 2023</div>
	<p class="text-gray-700 mb-3">
	These are fantastic headphones for the price. Noise cancellation works well, sound is balanced, and they're comfortable.
	Battery life is excellent. My only minor complaint is that the ear cups could be a bit larger for people with bigger ears.
	</p>
	<div class="flex items-center text-sm text-gray-500">
	<span class="mr-4">Was this review helpful?</span>
	<button class="mr-2 text-blue-600 hover:text-blue-800">Yes (15)</button>
	<button class="text-blue-600 hover:text-blue-800">No (0)</button>
	</div>
	</div>
	</div>

	<button class="mt-6 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-6 rounded-md transition-colors">
	Load More Reviews
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- User Dashboard (Hidden by default) -->
	<div id="user-dashboard" class="hidden">
	<div class="flex flex-col md:flex-row gap-6">
	<!-- Sidebar -->
	<div class="w-full md:w-64 bg-white rounded-lg shadow-md p-4 h-fit">
	<div class="flex items-center mb-6">
	<img class="h-12 w-12 rounded-full mr-3" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile">
	<div>
	<h3 class="font-bold text-gray-900">John Doe</h3>
	<p class="text-sm text-gray-500">Member since 2022</p>
	</div>
	</div>
	<div class="space-y-1">
	<a href="#" class="dashboard-tab active flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-700">
	<i class="fas fa-user-circle mr-3 text-blue-600"></i>
	Profile
	</a>
	<a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
	<i class="fas fa-list mr-3 text-gray-400"></i>
	My Listings
	</a>
	<a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
	<i class="fas fa-gavel mr-3 text-gray-400"></i>
	Bids Made
	</a>
	<a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
	<i class="fas fa-shopping-bag mr-3 text-gray-400"></i>
	Orders
	</a>
	<a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
	<i class="fas fa-heart mr-3 text-gray-400"></i>
	Wishlist
	</a>
	<a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
	<i class="fas fa-envelope mr-3 text-gray-400"></i>
	Messages
	<span class="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">3</span>
	</a>
	<a href="#" class="dashboard-tab flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
	<i class="fas fa-cog mr-3 text-gray-400"></i>
	Settings
	</a>
	</div>
	</div>

	<!-- Main Content -->
	<div class="flex-1 bg-white rounded-lg shadow-md p-6">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-gray-900">My Profile</h2>
	<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">
	Edit Profile
	</button>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
	<div class="col-span-2">
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
	<p class="text-gray-900">John Doe</p>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
	<p class="text-gray-900">john.doe@example.com</p>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
	<p class="text-gray-900">(555) 123-4567</p>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
	<p class="text-gray-900">123 Main St, Apt 4B<br>New York, NY 10001<br>United States</p>
	</div>
	</div>
	<div class="flex flex-col items-center">
	<div class="relative mb-4">
	<img class="h-32 w-32 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile">
	<button class="absolute bottom-0 right-0 bg-white rounded-full p-2 shadow-md">
	<i class="fas fa-camera text-blue-600"></i>
	</button>
	</div>
	<div class="text-center">
	<h3 class="font-bold text-gray-900">John Doe</h3>
	<p class="text-sm text-gray-500">Member since June 2022</p>
	<div class="mt-2 flex justify-center">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star-half-alt text-yellow-400"></i>
	<span class="ml-1 text-gray-700">4.7</span>
	</div>
	</div>
	</div>
	</div>

	<div class="border-t border-gray-200 pt-6">
	<h3 class="text-lg font-semibold text-gray-900 mb-4">Account Verification</h3>
	<div class="space-y-4">
	<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
	<div>
	<h4 class="font-medium text-gray-900">Email Verification</h4>
	<p class="text-sm text-gray-500">Verify your email address to secure your account</p>
	</div>
	<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Verified</span>
	</div>
	<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
	<div>
	<h4 class="font-medium text-gray-900">Phone Verification</h4>
	<p class="text-sm text-gray-500">Verify your phone number for additional security</p>
	</div>
	<button class="bg-blue-600 hover:bg-blue-700 text-white text-sm py-1 px-3 rounded-md transition-colors">
	Verify Now
	</button>
	</div>
	<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
	<div>
	<h4 class="font-medium text-gray-900">ID Verification</h4>
	<p class="text-sm text-gray-500">Required to become a verified seller</p>
	</div>
	<button class="bg-blue-600 hover:bg-blue-700 text-white text-sm py-1 px-3 rounded-md transition-colors">
	Start Verification
	</button>
	</div>
	</div>
	</div>

	<div class="border-t border-gray-200 pt-6 mt-6">
	<h3 class="text-lg font-semibold text-gray-900 mb-4">Account Activity</h3>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Activity</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP Address</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:45 AM</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Login</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Successful login</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.1</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 8:30 PM</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Listing Created</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">"Vintage Camera"</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.1</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dec 10, 3:15 PM</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Order Placed</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Order #MB-45678</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.1</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Dec 8, 11:20 AM</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Password Changed</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Password updated</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.1</td>
	</tr>
	</tbody>
	</table>
	</div>
	<button class="mt-4 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
	View All Activity
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Create Listing Page (Hidden by default) -->
	<div id="create-listing-page" class="hidden">
	<div class="bg-white rounded-lg shadow-md overflow-hidden p-6">
	<h1 class="text-2xl font-bold text-gray-900 mb-6">Create New Listing</h1>

	<form>
	<div class="grid grid-cols-1 gap-6 mb-8">
	<!-- Listing Title -->
	<div>
	<label for="listing-title" class="block text-sm font-medium text-gray-700 mb-1">Listing Title*</label>
	<input type="text" id="listing-title" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="What are you selling?">
	<p class="mt-1 text-sm text-gray-500">Be specific and include keywords that buyers would search for.</p>
	</div>

	<!-- Description -->
	<div>
	<label for="listing-description" class="block text-sm font-medium text-gray-700 mb-1">Description*</label>
	<textarea id="listing-description" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Describe your item in detail"></textarea>
	<p class="mt-1 text-sm text-gray-500">Include condition, features, dimensions, and any flaws.</p>
	</div>

	<!-- Images -->
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Photos*</label>
	<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
	<div class="space-y-1 text-center">
	<div class="flex text-sm text-gray-600">
	<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
	<span>Upload files</span>
	<input id="file-upload" name="file-upload" type="file" class="sr-only" multiple>
	</label>
	<p class="pl-1">or drag and drop</p>
	</div>
	<p class="text-xs text-gray-500">PNG, JPG up to 10MB</p>
	</div>
	</div>
	<div class="grid grid-cols-4 gap-2 mt-4">
	<div class="relative h-24 border rounded-md overflow-hidden">
	<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Preview" class="h-full w-full object-cover">
	<button class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-sm">
	<i class="fas fa-times text-red-500 text-xs"></i>
	</button>
	</div>
	<div class="relative h-24 border rounded-md overflow-hidden">
	<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Preview" class="h-full w-full object-cover">
	<button class="absolute top-1 right-1 bg-white rounded-full p-1 shadow-sm">
	<i class="fas fa
	<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=spanexx/ebayalt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>