<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechStore - Premium Electronics</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
font-size: 2rem;
font-weight: bold;
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #667eea;
}
.cart-icon {
position: relative;
cursor: pointer;
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.cart-icon:hover {
transform: scale(1.1);
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: #ff4757;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
}
/* Hero Section */
.hero {
margin-top: 80px;
padding: 4rem 0;
text-align: center;
color: white;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
animation: fadeInUp 1s ease;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
animation: fadeInUp 1s ease 0.3s both;
}
.cta-button {
display: inline-block;
padding: 15px 30px;
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: all 0.3s ease;
animation: fadeInUp 1s ease 0.6s both;
box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 107, 107, 0.6);
}
/* Products Section */
.products-section {
background: white;
padding: 4rem 0;
margin-top: 2rem;
border-radius: 30px 30px 0 0;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #333;
}
.search-container {
position: relative;
max-width: 400px;
margin: 0 auto 2rem;
}
.search-input {
width: 100%;
padding: 15px 50px 15px 20px;
border: 2px solid #ddd;
border-radius: 25px;
font-size: 1rem;
transition: all 0.3s ease;
}
.search-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
}
.search-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: #667eea;
color: white;
border: none;
border-radius: 50%;
width: 35px;
height: 35px;
cursor: pointer;
transition: all 0.3s ease;
}
.search-btn:hover {
background: #5a6fd8;
transform: translateY(-50%) scale(1.1);
}
.filter-buttons {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 10px 20px;
border: 2px solid #667eea;
background: transparent;
color: #667eea;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.[Link],
.filter-btn:hover {
background: #667eea;
color: white;
transform: translateY(-2px);
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.product-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
animation: fadeInUp 0.6s ease both;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.product-image {
width: 100%;
height: 250px;
background: linear-gradient(45deg, #f1f2f6, #ddd);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.product-card:hover .product-image {
transform: scale(1.05);
}
.product-info {
padding: 1.5rem;
}
.product-rating {
display: flex;
gap: 2px;
margin-bottom: 0.5rem;
}
.star {
color: #ffd700;
font-size: 1.2rem;
}
.[Link] {
color: #ddd;
}
.product-name {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #333;
}
.product-price {
font-size: 1.5rem;
font-weight: bold;
color: #667eea;
margin-bottom: 1rem;
}
.add-to-cart {
width: 100%;
padding: 12px;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.add-to-cart:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}
.add-to-cart:active {
transform: scale(0.95);
}
/* Cart Modal */
.cart-modal {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100vh;
background: white;
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
z-index: 2000;
transition: right 0.3s ease;
overflow-y: auto;
}
.[Link] {
right: 0;
}
.cart-header {
padding: 2rem;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-cart {
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
transition: transform 0.3s ease;
}
.close-cart:hover {
transform: scale(1.2);
}
.cart-items {
padding: 2rem;
}
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid #eee;
}
.cart-total {
padding: 2rem;
background: #f8f9fa;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}
.checkout-btn {
width: 100%;
padding: 15px;
background: linear-gradient(45deg, #2ed573, #26d0ce);
color: white;
border: none;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
font-size: 1.1rem;
margin-top: 1rem;
transition: all 0.3s ease;
}
.checkout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(46, 213, 115, 0.4);
}
/* Overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1500;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.[Link] {
opacity: 1;
visibility: visible;
}
.quantity-selector {
display: flex;
align-items: center;
gap: 10px;
}
.quantity-btn {
background: #667eea;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
transition: all 0.2s ease;
}
.quantity-btn:hover {
transform: scale(1.1);
}
.quantity-input {
width: 50px;
text-align: center;
border: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
}
/* Toast */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: #2ed573;
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(46, 213, 115, 0.4);
transform: translateX(400px);
transition: transform 0.3s ease;
z-index: 3000;
}
.[Link] {
transform: translateX(0);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.pulse {
animation: pulse 0.5s ease;
}
/* Responsive */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2.5rem;
}
.cart-modal {
width: 100%;
right: -100%;
}
.products-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<nav class="container">
<div class="logo">TechStore</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="cart-icon" onclick="toggleCart()">
🛒
<span class="cart-count" id="cartCount">0</span>
</div>
</nav>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<h1>Premium Electronics Store</h1>
<p>Discover the latest technology with unbeatable prices and
quality</p>
<a href="#products" class="cta-button">Shop Now</a>
</div>
</section>
<!-- Products Section -->
<section class="products-section" id="products">
<div class="container">
<h2 class="section-title">Our Products</h2>
<!-- Search Bar -->
<div class="search-container">
<input type="text" class="search-input" placeholder="Search
products..." id="searchInput">
<button class="search-btn" onclick="searchProducts()">🔍</button>
</div>
<!-- Filter Buttons -->
<div class="filter-buttons">
<button class="filter-btn active"
onclick="filterProducts('all')">All</button>
<button class="filter-btn"
onclick="filterProducts('phones')">Phones</button>
<button class="filter-btn"
onclick="filterProducts('laptops')">Laptops</button>
<button class="filter-btn"
onclick="filterProducts('accessories')">Accessories</button>
</div>
<!-- Products Grid -->
<div class="products-grid" id="productsGrid">
<!-- Products will be loaded here -->
</div>
</div>
</section>
<!-- Cart Modal -->
<div class="overlay" id="overlay" onclick="toggleCart()"></div>
<div class="cart-modal" id="cartModal">
<div class="cart-header">
<h3>Shopping Cart</h3>
<button class="close-cart" onclick="toggleCart()">×</button>
</div>
<div class="cart-items" id="cartItems">
<p style="text-align: center; color: #999;">Your cart is empty</p>
</div>
<div class="cart-total">
<div>Total: $<span id="cartTotal">0.00</span></div>
<button class="checkout-btn" onclick="checkout()">Proceed to
Checkout</button>
</div>
</div>
<!-- Toast Notification -->
<div class="toast" id="toast">
<span id="toastMessage"></span>
</div>
<script>
// Product data
const products = [
{
id: 1,
name: "iPhone 15 Pro",
price: 999,
category: "phones",
icon: "📱",
rating: 5,
description: "Latest iPhone with titanium design and advanced
camera system"
},
{
id: 2,
name: "MacBook Air M3",
price: 1299,
category: "laptops",
icon: "💻",
rating: 5,
description: "Ultra-thin laptop with incredible performance and
battery life"
},
{
id: 3,
name: "AirPods Pro",
price: 249,
category: "accessories",
icon: "🎧",
rating: 4,
description: "Premium wireless earbuds with active noise
cancellation"
},
{
id: 4,
name: "Samsung Galaxy S24",
price: 899,
category: "phones",
icon: "📱",
rating: 4,
description: "Flagship Android phone with AI-powered features"
},
{
id: 5,
name: "Dell XPS 13",
price: 1199,
category: "laptops",
icon: "💻",
rating: 4,
description: "Premium ultrabook with InfinityEdge display"
},
{
id: 6,
name: "iPad Pro 12.9",
price: 1099,
category: "accessories",
icon: "📱",
rating: 5,
description: "Professional tablet for creative work and
productivity"
},
{
id: 7,
name: "Sony WH-1000XM5",
price: 399,
category: "accessories",
icon: "🎧",
rating: 5,
description: "Industry-leading noise canceling headphones"
},
{
id: 8,
name: "Google Pixel 8",
price: 699,
category: "phones",
icon: "📱",
rating: 4,
description: "Google's flagship phone with advanced AI photography"
}
];
let cart = [];
let currentFilter = 'all';
// Initialize when page loads
[Link] = function() {
displayProducts(products);
updateCartCount();
};
// Display products
function displayProducts(productsToShow) {
const grid = [Link]('productsGrid');
[Link] = '';
[Link]((product, index) => {
const productCard = [Link]('div');
[Link] = 'product-card';
[Link] = `${index * 0.1}s`;
[Link] = `
<div class="product-image">
${[Link]}
</div>
<div class="product-info">
<div class="product-rating">
${generateStars([Link])}
</div>
<div class="product-name">${[Link]}</div>
<div class="product-price">$${[Link]}</div>
<button class="add-to-cart" onclick="addToCart($
{[Link]}); [Link]();">
Add to Cart
</button>
</div>
`;
[Link](productCard);
});
}
// Generate star rating
function generateStars(rating) {
let stars = '';
for (let i = 1; i <= 5; i++) {
if (i <= rating) {
stars += '<span class="star">★</span>';
} else {
stars += '<span class="star empty">★</span>';
}
}
return stars;
}
// Filter products
function filterProducts(category) {
currentFilter = category;
// Update active button
[Link]('.filter-btn').forEach(btn => {
[Link]('active');
});
[Link]('active');
// Filter and display products
const filtered = category === 'all' ? products : [Link](p =>
[Link] === category);
displayProducts(filtered);
}
// Search products
function searchProducts() {
const searchTerm =
[Link]('searchInput').[Link]();
const filtered = [Link](product =>
[Link]().includes(searchTerm) ||
[Link]().includes(searchTerm)
);
displayProducts(filtered);
}
// Add to cart
function addToCart(productId) {
const product = [Link](p => [Link] === productId);
const existingItem = [Link](item => [Link] === productId);
if (existingItem) {
[Link] += 1;
} else {
[Link]({ ...product, quantity: 1 });
}
updateCartCount();
updateCartDisplay();
showToast(`${[Link]} added to cart!`);
// Add pulse animation to cart icon
[Link]('.cart-icon').[Link]('pulse');
setTimeout(() => {
[Link]('.cart-icon').[Link]('pulse');
}, 500);
}
// Update cart count
function updateCartCount() {
const count = [Link]((total, item) => total + [Link], 0);
[Link]('cartCount').textContent = count;
}
// Update cart display
function updateCartDisplay() {
const cartItems = [Link]('cartItems');
const cartTotal = [Link]('cartTotal');
if ([Link] === 0) {
[Link] = '<p style="text-align: center; color: #999;
padding: 2rem;">Your cart is empty</p>';
[Link] = '0.00';
return;
}
[Link] = '';
let total = 0;
[Link](item => {
total += [Link] * [Link];
const cartItem = [Link]('div');
[Link] = 'cart-item';
[Link] = `
<div>
<div style="font-weight: bold;">${[Link]}</div>
<div style="color: #666;">$${[Link]} x $
{[Link]}</div>
</div>
<div class="quantity-selector">
<button class="quantity-btn" onclick="updateQuantity($
{[Link]}, -1)">−</button>
<input type="number" class="quantity-input" value="$
{[Link]}" readonly>
<button class="quantity-btn" onclick="updateQuantity($
{[Link]}, 1)">+</button>
<button onclick="removeFromCart(${[Link]})" style="margin-
left: 10px; color: #ff4757; cursor: pointer; background: none; border: none; font-
size: 1.2rem;"></button>
</div>
`;
[Link](cartItem);
});
[Link] = [Link](2);
}
// Update quantity
function updateQuantity(productId, change) {
const item = [Link](item => [Link] === productId);
if (item) {
[Link] += change;
if ([Link] <= 0) {
removeFromCart(productId);
} else {
updateCartCount();
updateCartDisplay();
}
}
}
// Remove from cart
function removeFromCart(productId) {
cart = [Link](item => [Link] !== productId);
updateCartCount();
updateCartDisplay();
showToast('Item removed from cart');
}
// Toggle cart
function toggleCart() {
const cartModal = [Link]('cartModal');
const overlay = [Link]('overlay');
[Link]('active');
[Link]('active');
if ([Link]('active')) {
updateCartDisplay();
}
}
// Show toast notification
function showToast(message) {
const toast = [Link]('toast');
const toastMessage = [Link]('toastMessage');
[Link] = message;
[Link]('show');
setTimeout(() => {
[Link]('show');
}, 3000);
}
// Checkout function
function checkout() {
if ([Link] === 0) {
showToast('Your cart is empty!');
return;
}
showToast('Thank you for your purchase! 🎉');
cart = [];
updateCartCount();
updateCartDisplay();
setTimeout(() => {
toggleCart();
}, 1000);
}
// Search on Enter key
[Link]('DOMContentLoaded', function() {
[Link]('searchInput').addEventListener('keypress',
function(e) {
if ([Link] === 'Enter') {
searchProducts();
}
});
// Smooth scrolling for navigation links
[Link]('a[href^="#"]').forEach(anchor => {
[Link]('click', function (e) {
[Link]();
const target =
[Link]([Link]('href'));
if (target) {
[Link]({
behavior: 'smooth',
block: 'start'
});
}
});
});
});
// Header scroll effect
[Link]('scroll', function() {
const header = [Link]('header');
if ([Link] > 100) {
[Link] = 'rgba(255, 255, 255, 0.98)';
[Link] = '0 2px 30px rgba(0, 0, 0, 0.15)';
} else {
[Link] = 'rgba(255, 255, 255, 0.95)';
[Link] = '0 2px 20px rgba(0, 0, 0, 0.1)';
}
});
</script>
</body>
</html>
