It is necessary that when it is opened on a computer or cellphone, its GUI design is the same, and its GUI must be visible to all users who open the website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShopEasy - Online Store</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<header>
<div class="logo">ShopEasy</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="cart-icon">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count">0</span>
</div>
</header>
<div class="hero">
<h1>Welcome to ShopEasy</h1>
<p>Discover amazing products at unbeatable prices</p>
</div>
<div class="container">
<div class="products-grid" id="products">
<!-- Products will be loaded here via JavaScript -->
</div>
</div>
<div class="cart-overlay">
<div class="cart">
<div class="cart-header">
<h2>Your Cart</h2>
<button class="close-cart">×</button>
</div>
<div class="cart-content">
<div class="cart-items">
<!-- Cart items will be loaded here -->
</div>
<div class="cart-total">
<h3>Total: $<span class="total-amount">0</span></h3>
<button class="checkout-btn">Proceed to Checkout</button>
</div>
</div>
</div>
</div>
<footer>
<p>© 2023 ShopEasy. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
// Sample product data
const products = [
{ id: 1, name: "Wireless Headphones", price: 99.99, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 2, name: "Smart Watch", price: 199.99, image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 3, name: "Bluetooth Speaker", price: 79.99, image: "https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 4, name: "Laptop", price: 899.99, image: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 5, name: "Smartphone", price: 699.99, image: "https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 6, name: "Tablet", price: 349.99, image: "https://images.unsplash.com/photo-1527698266440-12104e498b76?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 7, name: "Gaming Console", price: 499.99, image: "https://images.unsplash.com/photo-1607853202273-797f1c22a38e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 8, name: "DSLR Camera", price: 799.99, image: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 9, name: "Wireless Earbuds", price: 129.99, image: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 10, name: "Fitness Tracker", price: 59.99, image: "https://images.unsplash.com/photo-1576243345690-4e4b79b63288?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 11, name: "External Hard Drive", price: 89.99, image: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 12, name: "Wireless Keyboard", price: 49.99, image: "https://images.unsplash.com/photo-1540932239986-30128078f3c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 13, name: "Wireless Mouse", price: 29.99, image: "https://images.unsplash.com/photo-1527814050087-3793815479db?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 14, name: "Monitor", price: 249.99, image: "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 15, name: "Printer", price: 129.99, image: "https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 16, name: "Router", price: 79.99, image: "https://images.unsplash.com/photo-1597764690524-1c588de55d6c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 17, name: "Power Bank", price: 39.99, image: "https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 18, name: "USB Flash Drive", price: 19.99, image: "https://images.unsplash.com/photo-1592155931584-901ac15763e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 19, name: "Webcam", price: 69.99, image: "https://images.unsplash.com/photo-1551969014-7d2c4cddf0b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" },
{ id: 20, name: "Microphone", price: 89.99, image: "https://images.unsplash.com/photo-1598295893369-1918ffaf89a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" }
];
// Cart functionality
let cart = [];
// DOM elements
const productsGrid = document.getElementById('products');
const cartIcon = document.querySelector('.cart-icon');
const cartOverlay = document.querySelector('.cart-overlay');
const closeCart = document.querySelector('.close-cart');
const cartItemsContainer = document.querySelector('.cart-items');
const cartTotal = document.querySelector('.total-amount');
const cartCount = document.querySelector('.cart-count');
const checkoutBtn = document.querySelector('.checkout-btn');
// Display products
function displayProducts() {
productsGrid.innerHTML = products.map(product => `
<div class="product-card">
<div class="product-image">
<img src="${product.image}" alt="${product.name}">
</div>
<div class="product-info">
<h3 class="product-title">${product.name}</h3>
<p class="product-price">$${product.price.toFixed(2)}</p>
<button class="add-to-cart" data-id="${product.id}">Add to Cart</button>
</div>
</div>
`).join('');
// Add event listeners to all add to cart buttons
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', addToCart);
});
}
// Add to cart function
function addToCart(e) {
const productId = parseInt(e.target.dataset.id);
const product = products.find(item => item.id === productId);
// Check if product already in cart
const existingItem = cart.find(item => item.id === productId);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
...product,
quantity: 1
});
}
updateCart();
showCartNotification();
}
// Update cart display
function updateCart() {
cartItemsContainer.innerHTML = cart.map(item => `
<div class="cart-item">
<div class="cart-item-image">
<img src="${item.image}" alt="${item.name}">
</div>
<div class="cart-item-details">
<h4 class="cart-item-title">${item.name}</h4>
<p class="cart-item-price">$${item.price.toFixed(2)}</p>
<button class="cart-item-remove" data-id="${item.id}">Remove</button>
</div>
<div class="cart-item-quantity">
<span>Qty: ${item.quantity}</span>
</div>
</div>
`).join('');
// Calculate total
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
cartTotal.textContent = total.toFixed(2);
// Update cart count
const count = cart.reduce((sum, item) => sum + item.quantity, 0);
cartCount.textContent = count;
// Add event listeners to remove buttons
document.querySelectorAll('.cart-item-remove').forEach(button => {
button.addEventListener('click', removeFromCart);
});
}
// Remove from cart
function removeFromCart(e) {
const productId = parseInt(e.target.dataset.id);
cart = cart.filter(item => item.id !== productId);
updateCart();
}
// Show cart notification
function showCartNotification() {
cartIcon.classList.add('shake');
setTimeout(() => {
cartIcon.classList.remove('shake');
}, 500);
}
// Checkout function
function checkout() {
if (cart.length === 0) {
alert('Your cart is empty!');
return;
}
alert(`Order placed successfully! Total: $${cartTotal.textContent}`);
cart = [];
updateCart();
closeCartOverlay();
}
// Toggle cart overlay
function toggleCartOverlay() {
cartOverlay.style.display = cartOverlay.style.display === 'flex' ? 'none' : 'flex';
}
// Close cart overlay
function closeCartOverlay() {
cartOverlay.style.display = 'none';
}
// Event listeners
cartIcon.addEventListener('click', toggleCartOverlay);
closeCart.addEventListener('click', closeCartOverlay);
checkoutBtn.addEventListener('click', checkout);
// Initialize
displayProducts();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f8f9fa;
color: #333;
}
header {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: #2c3e50;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 2rem;
}
nav ul li a {
text-decoration: none;
color: #2c3e50;
font-weight: 500;
transition: color 0.3s;
}
nav ul li a:hover {
color: #e74c3c;
}
.cart-icon {
position: relative;
cursor: pointer;
font-size: 1.5rem;
}
.cart-count {
position: absolute;
top: -10px;
right: -10px;
background-color: #e74c3c;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8rem;
}
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
margin-bottom: 2rem;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.product-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.product-image {
height: 200px;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-info {
padding: 1rem;
}
.product-title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #2c3e50;
}
.product-price {
font-size: 1.2rem;
font-weight: bold;
color: #e74c3c;
margin-bottom: 1rem;
}
.add-to-cart {
width: 100%;
padding: 0.5rem;
background-color: #2c3e50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.add-to-cart:hover {
background-color: #e74c3c;
}
.cart-overlay {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
justify-content: flex-end;
}
.cart {
width: 400px;
height: 100%;
background-color: white;
padding: 1.5rem;
display: flex;
flex-direction: column;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.close-cart {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.cart-content {
flex: 1;
overflow-y: auto;
}
.cart-item {
display: flex;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.cart-item-image {
width: 80px;
height: 80px;
margin-right: 1rem;
}
.cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-item-details {
flex: 1;
}
.cart-item-title {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.cart-item-price {
font-size: 0.9rem;
color: #e74c3c;
margin-bottom: 0.5rem;
}
.cart-item-remove {
color: #e74c3c;
background: none;
border: none;
cursor: pointer;
font-size: 0.8rem;
}
.cart-total {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #eee;
text-align: right;
}
.checkout-btn {
width: 100%;
padding: 0.8rem;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 1rem;
transition: background-color 0.3s;
}
.checkout-btn:hover {
background-color: #c0392b;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 1.5rem;
margin-top: 2rem;
}
@media (max-width: 768px) {
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.cart {
width: 100%;
}
}