|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ShopEase - Modern Shopping UI</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> |
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 4px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 0.5s ease; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); } |
|
|
to { transform: translateX(0); } |
|
|
} |
|
|
.slide-in { |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
|
|
|
|
|
|
.blog-card { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
.blog-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.review-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.review-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.rating-stars { |
|
|
color: #f59e0b; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-10"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-shopping-bag text-2xl text-indigo-600"></i> |
|
|
<h1 class="text-xl font-bold text-gray-800">ShopEase</h1> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Home</a> |
|
|
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Products</a> |
|
|
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Categories</a> |
|
|
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">Blog</a> |
|
|
<a href="#" class="text-gray-700 hover:text-indigo-600 transition">About</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button id="searchBtn" class="text-gray-600 hover:text-indigo-600"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<div id="searchBar" class="hidden absolute right-0 mt-2 w-64 bg-white p-2 rounded shadow-lg"> |
|
|
<input type="text" placeholder="Search products..." class="w-full px-3 py-1 border rounded focus:outline-none focus:ring-1 focus:ring-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="cartBtn" class="relative text-gray-600 hover:text-indigo-600"> |
|
|
<i class="fas fa-shopping-cart text-xl"></i> |
|
|
<span id="cartCount" class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
|
|
</button> |
|
|
|
|
|
<button class="md:hidden text-gray-600 hover:text-indigo-600"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-12"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-4xl font-bold mb-4">Summer Collection 2025</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Discover our latest arrivals with up to 30% off on selected items</p> |
|
|
<button class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition shadow-lg">Shop Now</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4">Shop by Category</h2> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
<div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer"> |
|
|
<div class="bg-indigo-100 rounded-full p-3 inline-block mb-2"> |
|
|
<i class="fas fa-tshirt text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<p class="font-medium">Clothing</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer"> |
|
|
<div class="bg-green-100 rounded-full p-3 inline-block mb-2"> |
|
|
<i class="fas fa-laptop text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<p class="font-medium">Electronics</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer"> |
|
|
<div class="bg-yellow-100 rounded-full p-3 inline-block mb-2"> |
|
|
<i class="fas fa-home text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<p class="font-medium">Home</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer"> |
|
|
<div class="bg-red-100 rounded-full p-3 inline-block mb-2"> |
|
|
<i class="fas fa-utensils text-red-600 text-xl"></i> |
|
|
</div> |
|
|
<p class="font-medium">Kitchen</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer"> |
|
|
<div class="bg-blue-100 rounded-full p-3 inline-block mb-2"> |
|
|
<i class="fas fa-book text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<p class="font-medium">Books</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-4 text-center hover:shadow-md transition cursor-pointer"> |
|
|
<div class="bg-purple-100 rounded-full p-3 inline-block mb-2"> |
|
|
<i class="fas fa-dumbbell text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<p class="font-medium">Fitness</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-16"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Featured Products</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">All</button> |
|
|
<button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">New</button> |
|
|
<button class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition">Popular</button> |
|
|
<button class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 transition">Sale</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Running Shoes" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">SALE</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-gray-800 mb-1">Nike Air Max</h3> |
|
|
<p class="text-gray-600 text-sm mb-2">Premium running shoes with air cushioning</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="font-bold text-indigo-600">$89.99</span> |
|
|
<span class="text-gray-400 text-sm line-through ml-2">$120.00</span> |
|
|
</div> |
|
|
<button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="1" data-name="Nike Air Max" data-price="89.99" data-image="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> |
|
|
<i class="fas fa-cart-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1099&q=80" alt="Smart Watch" class="w-full h-48 object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-gray-800 mb-1">Smart Watch Pro</h3> |
|
|
<p class="text-gray-600 text-sm mb-2">Track your fitness with this advanced smartwatch</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="font-bold text-indigo-600">$199.99</span> |
|
|
</div> |
|
|
<button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="2" data-name="Smart Watch Pro" data-price="199.99" data-image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1099&q=80"> |
|
|
<i class="fas fa-cart-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Headphones" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">NEW</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-gray-800 mb-1">Wireless Headphones</h3> |
|
|
<p class="text-gray-600 text-sm mb-2">Noise cancelling with 30hr battery life</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="font-bold text-indigo-600">$149.99</span> |
|
|
</div> |
|
|
<button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition, data-id="3" data-name="Wireless Headphones" data-price="149.99" data-image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> |
|
|
<i class="fas fa-cart-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Backpack" class="w-full h-48 object-cover"> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-gray-800 mb-1">Travel Backpack</h3> |
|
|
<p class="text-gray-600 text-sm mb-2">Waterproof with USB charging port</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="font-bold text-indigo-600">$79.99</span> |
|
|
</div> |
|
|
<button class="add-to-cart bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition" data-id="4" data-name="Travel Backpack" data-price="79.99" data-image="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80"> |
|
|
<i class="fas fa-cart-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<section class="bg-gray-50 py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">Latest From Our Blog</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Discover the latest trends, tips, and stories from our experts</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md blog-card"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1035&q=80" alt="Fashion Trends" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-4 left-4"> |
|
|
<span class="bg-indigo-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Fashion</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>June 15, 2025</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>5 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Top Summer Fashion Trends for 2025</h3> |
|
|
<p class="text-gray-600 mb-4">Discover the must-have styles and colors that will dominate this summer season...</p> |
|
|
<a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 transition flex items-center"> |
|
|
Read More |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md blog-card"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Tech Gadgets" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-4 left-4"> |
|
|
<span class="bg-green-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Technology</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>June 10, 2025</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>7 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Essential Tech Gadgets for Digital Nomads</h3> |
|
|
<p class="text-gray-600 mb-4">The ultimate guide to the technology that will keep you productive while working remotely...</p> |
|
|
<a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 transition flex items-center"> |
|
|
Read More |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md blog-card"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1556909212-d5b604d0c90d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Home Decor" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-4 left-4"> |
|
|
<span class="bg-yellow-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Lifestyle</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<span>June 5, 2025</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>4 min read</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Minimalist Home Decor Ideas for Small Spaces</h3> |
|
|
<p class="text-gray-600 mb-4">Transform your small living space with these simple yet effective minimalist design principles...</p> |
|
|
<a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 transition flex items-center"> |
|
|
Read More |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-10"> |
|
|
<a href="#" class="inline-block bg-indigo-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-indigo-700 transition shadow-lg"> |
|
|
View All Blog Posts |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">What Our Clients Say</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Trusted by thousands of customers worldwide</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg review-card"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover"> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold">Sarah Johnson</h4> |
|
|
<div class="flex rating-stars"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">"I've been shopping with ShopEase for over a year now and I'm consistently impressed with their product quality and customer service. The shipping is always fast and the items arrive exactly as described."</p> |
|
|
<div class="text-sm text-gray-500">June 12, 2025</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg review-card"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full object-cover"> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold">Michael Chen</h4> |
|
|
<div class="flex rating-stars"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">"The selection of electronics at ShopEase is unmatched. I recently purchased a smartwatch and it's been working perfectly. Their return policy is also very customer-friendly, though I haven't needed to use it yet!"</p> |
|
|
<div class="text-sm text-gray-500">May 28, 2025</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg review-card"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez" class="w-12 h-12 rounded-full object-cover"> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold">Emma Rodriguez</h4> |
|
|
<div class="flex rating-stars"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">"I ordered a travel backpack for my upcoming trip and it exceeded all my expectations. The quality is outstanding and it has so many useful compartments. ShopEase is now my go-to for all travel essentials."</p> |
|
|
<div class="text-sm text-gray-500">April 15, 2025</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 text-center"> |
|
|
<button class="inline-flex items-center px-6 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-600 hover:text-white transition"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Add Your Review |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-gray-100 py-12"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-2">Subscribe to Our Newsletter</h2> |
|
|
<p class="text-gray-600 mb-6 max-w-2xl mx-auto">Get the latest updates on new products and upcoming sales</p> |
|
|
<div class="max-w-md mx-auto flex"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 border rounded-l focus:outline-none focus:ring-1 focus:ring-indigo-500"> |
|
|
<button class="bg-indigo-600 text-white px-6 py-2 rounded-r hover:bg-indigo-700 transition">Subscribe</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">ShopEase</h3> |
|
|
<p class="text-gray-400">Your one-stop shop for all your needs. Quality products at affordable prices.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Shop</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">All Products</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">New Arrivals</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Featured</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Discounts</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Customer Service</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQs</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Shipping & Returns</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Connect With Us</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest"></i></a> |
|
|
</div> |
|
|
<p class="text-gray-400 mt-4">support@shopease.com</p> |
|
|
<p class="text-gray-400">+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p>© 2025 ShopEase. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="cartSidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full z-20 transition duration-300 ease-in-out overflow-y-auto"> |
|
|
<div class="p-4 border-b"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="text-xl font-bold">Your Cart (<span id="sidebarCartCount">0</span>)</h3> |
|
|
<button id="closeCart" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="cartItems" class="p-4 space-y-4"> |
|
|
|
|
|
<div class="text-center py-8 text-gray-500"> |
|
|
<i class="fas fa-shopping-cart text-4xl mb-2"></i> |
|
|
<p>Your cart is empty</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t"> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span>Subtotal:</span> |
|
|
<span id="cartSubtotal">$0.00</span> |
|
|
</div> |
|
|
<div class="flex justify-between mb-4"> |
|
|
<span>Shipping:</span> |
|
|
<span>Calculated at checkout</span> |
|
|
</div> |
|
|
<button id="checkoutBtn" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">Proceed to Checkout</button> |
|
|
<p class="text-center text-sm text-gray-500 mt-2">or <a href="#" class="text-indigo-600 hover:underline">continue shopping</a></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-10 hidden"></div> |
|
|
|
|
|
|
|
|
<div id="toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg hidden z-30"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span id="toastMessage">Item added to cart!</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const cartBtn = document.getElementById('cartBtn'); |
|
|
const closeCart = document.getElementById('closeCart'); |
|
|
const cartSidebar = document.getElementById('cartSidebar'); |
|
|
const overlay = document.getElementById('overlay'); |
|
|
const addToCartButtons = document.querySelectorAll('.add-to-cart'); |
|
|
const cartItemsContainer = document.getElementById('cartItems'); |
|
|
const cartCount = document.getElementById('cartCount'); |
|
|
const sidebarCartCount = document.getElementById('sidebarCartCount'); |
|
|
const cartSubtotal = document.getElementById('cartSubtotal'); |
|
|
const checkoutBtn = document.getElementById('checkoutBtn'); |
|
|
const searchBtn = document.getElementById('searchBtn'); |
|
|
const searchBar = document.getElementById('searchBar'); |
|
|
const toast = document.getElementById('toast'); |
|
|
const toastMessage = document.getElementById('toastMessage'); |
|
|
|
|
|
|
|
|
let cart = JSON.parse(localStorage.getItem('cart')) || []; |
|
|
|
|
|
|
|
|
updateCart(); |
|
|
|
|
|
|
|
|
cartBtn.addEventListener('click', toggleCart); |
|
|
closeCart.addEventListener('click', toggleCart); |
|
|
overlay.addEventListener('click', toggleCart); |
|
|
checkoutBtn.addEventListener('click', proceedToCheckout); |
|
|
searchBtn.addEventListener('click', toggleSearch); |
|
|
|
|
|
|
|
|
addToCartButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const id = button.dataset.id; |
|
|
const name = button.dataset.name; |
|
|
const price = parseFloat(button.dataset.price); |
|
|
const image = button.dataset.image; |
|
|
|
|
|
addToCart(id, name, price, image); |
|
|
showToast(`${name} added to cart!`); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function toggleCart() { |
|
|
cartSidebar.classList.toggle('translate-x-full'); |
|
|
overlay.classList.toggle('hidden'); |
|
|
document.body.classList.toggle('overflow-hidden'); |
|
|
} |
|
|
|
|
|
function toggleSearch() { |
|
|
searchBar.classList.toggle('hidden'); |
|
|
} |
|
|
|
|
|
function addToCart(id, name, price, image) { |
|
|
const existingItem = cart.find(item => item.id === id); |
|
|
|
|
|
if (existingItem) { |
|
|
existingItem.quantity += 1; |
|
|
} else { |
|
|
cart.push({ id, name, price, image, quantity: 1 }); |
|
|
} |
|
|
|
|
|
updateCart(); |
|
|
saveCartToLocalStorage(); |
|
|
|
|
|
|
|
|
cartCount.classList.add('pulse'); |
|
|
setTimeout(() => cartCount.classList.remove('pulse'), 500); |
|
|
} |
|
|
|
|
|
function updateCart() { |
|
|
|
|
|
const totalItems = cart.reduce((total, item) => total + item.quantity, 0); |
|
|
cartCount.textContent = totalItems; |
|
|
sidebarCartCount.textContent = totalItems; |
|
|
|
|
|
|
|
|
if (cart.length === 0) { |
|
|
cartItemsContainer.innerHTML = ` |
|
|
<div class="text-center py-8 text-gray-500"> |
|
|
<i class="fas fa-shopping-cart text-4xl mb-2"></i> |
|
|
<p>Your cart is empty</p> |
|
|
</div> |
|
|
`; |
|
|
cartSubtotal.textContent = '$0.00'; |
|
|
return; |
|
|
} |
|
|
|
|
|
cartItemsContainer.innerHTML = cart.map(item => ` |
|
|
<div class="flex items-center border-b pb-4" data-id="${item.id}"> |
|
|
<img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded"> |
|
|
<div class="ml-4 flex-grow"> |
|
|
<h4 class="font-medium">${item.name}</h4> |
|
|
<p class="text-gray-600">$${item.price.toFixed(2)}</p> |
|
|
<div class="flex items-center mt-1"> |
|
|
<button class="decrease-quantity text-gray-500 hover:text-indigo-600" data-id="${item.id}"> |
|
|
<i class="fas fa-minus text-xs"></i> |
|
|
</button> |
|
|
<span class="quantity mx-2">${item.quantity}</span> |
|
|
<button class="increase-quantity text-gray-500 hover:text-indigo-600" data-id="${item.id}"> |
|
|
<i class="fas fa-plus text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="remove-item text-gray-400 hover:text-red-500 ml-2" data-id="${item.id}"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
`).join(''); |
|
|
|
|
|
|
|
|
const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0); |
|
|
cartSubtotal.textContent = `$${subtotal.toFixed(2)}`; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.decrease-quantity').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
const id = e.target.closest('button').dataset.id; |
|
|
updateQuantity(id, -1); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.increase-quantity').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
const id = e.target.closest('button').dataset.id; |
|
|
updateQuantity(id, 1); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.remove-item').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
const id = e.target.closest('button').dataset.id; |
|
|
removeFromCart(id); |
|
|
showToast('Item removed from cart'); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
function updateQuantity(id, change) { |
|
|
const item = cart.find(item => item.id === id); |
|
|
|
|
|
if (item) { |
|
|
item.quantity += change; |
|
|
|
|
|
if (item.quantity <= 0) { |
|
|
cart = cart.filter(item => item.id !== id); |
|
|
} |
|
|
|
|
|
updateCart(); |
|
|
saveCartToLocalStorage(); |
|
|
} |
|
|
} |
|
|
|
|
|
function removeFromCart(id) { |
|
|
cart = cart.filter(item => item.id !== id); |
|
|
updateCart(); |
|
|
saveCartToLocalStorage(); |
|
|
} |
|
|
|
|
|
function saveCartToLocalStorage() { |
|
|
localStorage.setItem('cart', JSON.stringify(cart)); |
|
|
} |
|
|
|
|
|
function proceedToCheckout() { |
|
|
if (cart.length === 0) { |
|
|
showToast('Your cart is empty!'); |
|
|
return; |
|
|
} |
|
|
showToast('Proceeding to checkout...'); |
|
|
|
|
|
setTimeout(() => { |
|
|
toggleCart(); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function showToast(message) { |
|
|
toastMessage.textContent = message; |
|
|
toast.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
|
toast.classList.add('hidden'); |
|
|
}, 3000); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DhruvinDI/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
