Spaces:

bdsmgdjfv
/

anycoder-1cd4e9dd

Running

App Files Files Community

anycoder-1cd4e9dd / index.html

bdsmgdjfv

Upload folder using huggingface_hub

56289af verified 4 months ago

raw

history blame contribute delete

43.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GlobalMarket - AliExpress Clone</title>

	<!-- Icons: FontAwesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

	<!-- Fonts: Poppins -->
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

	<style>
	/* =========================================
	MODERN CSS STYLES
	========================================= */

	:root {
	--primary-color: #F26522; /* AliExpress Orange */
	--primary-dark: #d65616;
	--secondary-color: #212121;
	--accent-color: #0073B3;
	--bg-light: #f7f8fa;
	--text-dark: #333;
	--text-light: #666;
	--white: #ffffff;
	--shadow: 0 4px 12px rgba(0,0,0,0.1);
	--transition: all 0.3s ease;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	}

	body {
	background-color: var(--bg-light);
	color: var(--text-dark);
	line-height: 1.6;
	}

	/* --- HEADER & NAV --- */
	header {
	background-color: var(--white);
	padding: 15px 5%;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	}

	.logo {
	font-size: 28px;
	font-weight: 700;
	color: var(--primary-color);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.logo span {
	color: var(--secondary-color);
	}

	.search-bar {
	flex: 1;
	max-width: 500px;
	position: relative;
	display: none; /* Hidden on very small screens */
	}

	@media(min-width: 768px) {
	.search-bar { display: block; }
	}

	.search-bar input {
	width: 100%;
	padding: 10px 45px 10px 15px;
	border: 2px solid #ddd;
	border-radius: 25px;
	font-size: 14px;
	transition: var(--transition);
	}

	.search-bar input:focus {
	border-color: var(--primary-color);
	outline: none;
	}

	.search-bar button {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--primary-color);
	border: none;
	color: white;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	cursor: pointer;
	transition: var(--transition);
	}

	.search-bar button:hover {
	background: var(--primary-dark);
	}

	.nav-icons {
	display: flex;
	align-items: center;
	gap: 20px;
	}

	.nav-item {
	position: relative;
	cursor: pointer;
	font-size: 18px;
	color: var(--secondary-color);
	transition: color 0.3s;
	}

	.nav-item:hover {
	color: var(--primary-color);
	}

	.cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	background: var(--primary-color);
	color: white;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 10px;
	font-weight: 700;
	}

	.user-menu {
	display: flex;
	align-items: center;
	gap: 10px;
	border-left: 1px solid #eee;
	padding-left: 20px;
	}

	.user-avatar {
	width: 35px;
	height: 35px;
	background-color: #ddd;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #666;
	font-size: 14px;
	}

	/* --- HERO SECTION --- */
	.hero {
	position: relative;
	height: 350px;
	background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--white);
	overflow: hidden;
	}

	.hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: url('https://images.unsplash.com/photo-1472851091035-528553d52223?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
	opacity: 0.3;
	}

	.hero-content {
	position: relative;
	z-index: 2;
	padding: 20px;
	}

	.hero h1 {
	font-size: 3rem;
	margin-bottom: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}

	.hero p {
	font-size: 1.2rem;
	margin-bottom: 20px;
	}

	.btn {
	padding: 12px 30px;
	border-radius: 30px;
	text-decoration: none;
	font-weight: 600;
	transition: var(--transition);
	cursor: pointer;
	border: none;
	font-size: 1rem;
	}

	.btn-primary {
	background-color: var(--primary-color);
	color: white;
	}

	.btn-primary:hover {
	background-color: var(--primary-dark);
	transform: translateY(-2px);
	}

	.btn-outline {
	background-color: transparent;
	border: 2px solid white;
	color: white;
	}

	.btn-outline:hover {
	background-color: white;
	color: var(--primary-color);
	}

	/* --- MAIN CONTENT GRID --- */
	.container {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 20px;
	}

	.section-title {
	font-size: 2rem;
	margin-bottom: 30px;
	color: var(--secondary-color);
	border-bottom: 3px solid var(--primary-color);
	display: inline-block;
	padding-bottom: 5px;
	}

	.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 25px;
	}

	.product-card {
	background: var(--white);
	border-radius: 12px;
	overflow: hidden;
	transition: var(--transition);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	}

	.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	}

	.product-image-container {
	width: 100%;
	height: 250px;
	overflow: hidden;
	position: relative;
	}

	.product-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	}

	.product-card:hover .product-image {
	transform: scale(1.05);
	}

	.product-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(255, 255, 255, 0.9);
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--primary-color);
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	.product-info {
	padding: 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	}

	.product-title {
	font-size: 16px;
	margin-bottom: 10px;
	color: var(--secondary-color);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 48px;
	}

	.product-rating {
	color: #ffc107;
	font-size: 14px;
	margin-bottom: 10px;
	}

	.price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	}

	.product-price {
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-color);
	}

	.product-price span {
	font-size: 14px;
	color: var(--text-light);
	font-weight: 400;
	}

	.add-to-cart-btn {
	background-color: var(--secondary-color);
	color: white;
	border: none;
	padding: 8px 15px;
	border-radius: 6px;
	cursor: pointer;
	transition: var(--transition);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.add-to-cart-btn:hover {
	background-color: var(--primary-color);
	}

	/* --- AUTH PAGES (Login/Register) --- */
	.auth-container {
	max-width: 400px;
	margin: 50px auto;
	background: white;
	padding: 40px;
	border-radius: 15px;
	box-shadow: var(--shadow);
	text-align: center;
	}

	.auth-tabs {
	display: flex;
	margin-bottom: 30px;
	border-bottom: 2px solid #eee;
	}

	.auth-tab {
	flex: 1;
	padding: 15px;
	cursor: pointer;
	font-weight: 600;
	color: var(--text-light);
	transition: var(--transition);
	}

	.auth-tab.active {
	color: var(--primary-color);
	border-bottom: 3px solid var(--primary-color);
	margin-bottom: -2px;
	}

	.form-group {
	margin-bottom: 20px;
	text-align: left;
	}

	.form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: var(--secondary-color);
	}

	.form-group input {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 16px;
	transition: var(--transition);
	}

	.form-group input:focus {
	border-color: var(--primary-color);
	outline: none;
	}

	.btn-full {
	width: 100%;
	padding: 14px;
	font-size: 18px;
	margin-top: 10px;
	}

	.social-login {
	margin-top: 25px;
	display: flex;
	justify-content: center;
	gap: 15px;
	}

	.social-btn {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	cursor: pointer;
	transition: var(--transition);
	color: white;
	}

	.fb { background-color: #3b5998; }
	.google { background-color: #db4437; }
	.twitter { background-color: #1da1f2; }
	.social-btn:hover { transform: scale(1.1); }

	/* --- CART & CHECKOUT --- */
	.cart-container {
	background: white;
	padding: 30px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	}

	.cart-item {
	display: flex;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid #eee;
	}

	.cart-item:last-child { border-bottom: none; }

	.cart-item-img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
	margin-right: 20px;
	}

	.cart-item-details {
	flex-grow: 1;
	}

	.cart-item-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 5px;
	}

	.cart-item-price {
	color: var(--primary-color);
	font-weight: 700;
	font-size: 18px;
	}

	.cart-item-controls {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 10px;
	}

	.qty-btn {
	width: 30px;
	height: 30px;
	border: 1px solid #ddd;
	background: white;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	}

	.cart-summary {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 2px solid #eee;
	text-align: right;
	}

	.cart-summary h3 {
	margin-bottom: 20px;
	font-size: 24px;
	}

	.total-price {
	font-size: 32px;
	font-weight: 700;
	color: var(--primary-color);
	margin: 10px 0 20px 0;
	}

	/* --- ADMIN PANEL --- */
	.admin-panel {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 20px;
	}

	.admin-sidebar {
	background: white;
	padding: 20px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	height: fit-content;
	}

	.admin-menu-item {
	padding: 12px;
	margin-bottom: 10px;
	cursor: pointer;
	border-radius: 8px;
	transition: var(--transition);
	color: var(--text-dark);
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.admin-menu-item:hover, .admin-menu-item.active {
	background-color: #f0f0f0;
	color: var(--primary-color);
	font-weight: 600;
	}

	.admin-content {
	background: white;
	padding: 30px;
	border-radius: 12px;
	box-shadow: var(--shadow);
	}

	.table-responsive {
	overflow-x: auto;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	}

	th, td {
	padding: 15px;
	text-align: left;
	border-bottom: 1px solid #eee;
	}

	th {
	background-color: #f9f9f9;
	font-weight: 600;
	}

	.status-badge {
	padding: 4px 10px;
	border-radius: 15px;
	font-size: 12px;
	font-weight: 600;
	}
	.status-pending { background-color: #fff3cd; color: #856404; }
	.status-shipped { background-color: #d1ecf1; color: #0c5460; }
	.status-delivered { background-color: #d4edda; color: #155724; }

	/* --- FOOTER --- */
	footer {
	background-color: var(--secondary-color);
	color: #ccc;
	padding: 50px 0 20px;
	margin-top: 60px;
	}

	.footer-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
	}

	.footer-col h4 {
	color: white;
	margin-bottom: 20px;
	font-size: 18px;
	}

	.footer-col ul {
	list-style: none;
	}

	.footer-col li { margin-bottom: 10px; }
	.footer-col a { color: #aaa; text-decoration: none; transition: 0.3s; }
	.footer-col a:hover { color: var(--primary-color); }

	.footer-bottom {
	text-align: center;
	padding-top: 30px;
	border-top: 1px solid #444;
	font-size: 14px;
	}

	.footer-bottom a {
	color: var(--primary-color);
	text-decoration: none;
	}

	/* --- NOTIFICATIONS --- */
	.toast {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: var(--secondary-color);
	color: white;
	padding: 15px 25px;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	transform: translateY(100px);
	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	z-index: 2000;
	display: flex;
	align-items: center;
	gap: 10px;
	}
	.toast.show { transform: translateY(0); }
	.toast.success { background-color: #28a745; }
	.toast.error { background-color: #dc3545; }

	/* --- RESPONSIVE --- */
	@media (max-width: 768px) {
	.hero h1 { font-size: 2rem; }
	.product-grid { grid-template-columns: 1fr; }
	.admin-panel { grid-template-columns: 1fr; }
	.nav-icons .user-menu { display: none; } /* Hide user menu on mobile, show in dropdown */
	.mobile-menu-btn { display: block; font-size: 24px; cursor: pointer; }
	.search-bar { max-width: 150px; }
	.search-bar input { display: none; }
	.search-bar.active input { display: block; width: 200px; position: absolute; left: 50%; transform: translateX(-50%); top: 10px; }
	.search-bar.active .search-bar button { top: 50%; transform: translateY(-50%); }
	}

	.mobile-menu-btn { display: none; }

	</style>
	</head>
	<body>

	<!-- Navigation -->
	<header>
	<a href="#" class="logo" onclick="App.navigate('index')">
	<i class="fas fa-globe-americas"></i> Global<span>Market</span>
	</a>

	<div class="search-bar" id="searchBar">
	<input type="text" id="searchInput" placeholder="Search for products, brands and more...">
	<button onclick="App.searchProducts()"><i class="fas fa-search"></i></button>
	</div>

	<div class="nav-icons">
	<div class="nav-item" onclick="alert('Wishlist feature coming soon!')">
	<i class="far fa-heart"></i>
	</div>
	<div class="nav-item" onclick="App.navigate('cart')">
	<i class="fas fa-shopping-cart"></i>
	<span class="cart-count" id="cartCount">0</span>
	</div>

	<div class="user-menu">
	<div class="nav-item" onclick="App.navigate('profile')">
	<i class="far fa-user"></i>
	</div>
	<div class="nav-item" onclick="App.navigate('orders')">
	<i class="fas fa-truck"></i>
	</div>
	<div class="nav-item" onclick="alert('Notifications')">
	<i class="far fa-bell"></i>
	</div>

	<!-- Mobile Menu Toggle -->
	<div class="mobile-menu-btn" onclick="document.querySelector('.user-menu').classList.toggle('show')">
	<i class="fas fa-bars"></i>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content Area -->
	<main id="main-content">
	<!-- Dynamic Content Loaded Here via JS -->
	</main>

	<!-- Toast Notification -->
	<div id="toast" class="toast">
	<i class="fas fa-check-circle"></i>
	<span id="toastMessage">Action Successful</span>
	</div>

	<!-- Footer -->
	<footer>
	<div class="footer-grid">
	<div class="footer-col">
	<h4>GlobalMarket</h4>
	<p>Connecting the world with the best products at unbeatable prices. Your one-stop shop for everything.</p>
	</div>
	<div class="footer-col">
	<h4>Customer Service</h4>
	<ul>
	<li><a href="#">Contact Us</a></li>
	<li><a href="#">Orders Tracking</a></li>
	<li><a href="#">Returns & Refunds</a></li>
	<li><a href="#">FAQ</a></li>
	</ul>
	</div>
	<div class="footer-col">
	<h4>Categories</h4>
	<ul>
	<li><a href="#">Electronics</a></li>
	<li><a href="#">Fashion</a></li>
	<li><a href="#">Home & Living</a></li>
	<li><a href="#">Beauty</a></li>
	</ul>
	</div>
	<div class="footer-col">
	<h4>Connect</h4>
	<div class="social-login" style="justify-content: flex-start; gap: 15px; margin-top: 10px;">
	<div class="social-btn fb" onclick="alert('Facebook')"><i class="fab fa-facebook-f"></i></div>
	<div class="social-btn google" onclick="alert('Google')"><i class="fab fa-google"></i></div>
	<div class="social-btn twitter" onclick="alert('Twitter')"><i class="fab fa-twitter"></i></div>
	</div>
	</div>
	</div>
	<div class="footer-bottom">
	© 2023 GlobalMarket Clone. All Rights Reserved. \|
	<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
	</div>
	</footer>

	<!-- JavaScript Logic -->
	<script>
	// --- MOCK DATA ---
	const productsData = [
	{ id: 1, name: "Wireless Bluetooth Headphones", price: 29.99, rating: 4.5, reviews: 120, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&q=80", badge: "Best Seller" },
	{ id: 2, name: "Smart Watch Fitness Tracker", price: 49.50, rating: 4.2, reviews: 85, image: "https://images.unsplash.com/photo-1523275335684-37898b6a8d27?w=500&q=80", badge: "Hot Deal" },
	{ id: 3, name: "Modern Cotton T-Shirt", price: 15.99, rating: 4.8, reviews: 200, image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=500&q=80", badge: "New" },
	{ id: 4, name: "Premium Leather Backpack", price: 89.00, rating: 4.7, reviews: 50, image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=500&q=80", badge: "" },
	{ id: 5, name: "4K Ultra HD Webcam", price: 120.00, rating: 4.3, reviews: 110, image: "https://images.unsplash.com/photo-1598091383021-15ddea83557a?w=500&q=80", badge: "" },
	{ id: 6, name: "Gaming Mechanical Keyboard", price: 65.00, rating: 4.9, reviews: 340, image: "https://images.unsplash.com/photo-1587829741301-dc798b91a603?w=500&q=80", badge: "Top Rated" },
	{ id: 7, name: "Running Sports Shoes", price: 55.00, rating: 4.1, reviews: 90, image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=500&q=80", badge: "" },
	{ id: 8, name: "Vintage Coffee Maker", price: 45.00, rating: 4.6, reviews: 75, image: "https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?w=500&q=80", badge: "Handmade" }
	];

	let cart = JSON.parse(localStorage.getItem('cart')) \|\| [];

	// --- APP LOGIC ---
	const App = {
	currentPage: 'index',

	init: function() {
	this.renderHome();
	this.updateCartCount();

	// Search functionality
	document.getElementById('searchInput').addEventListener('keypress', (e) => {
	if (e.key === 'Enter') this.searchProducts();
	});
	},

	navigate: function(page, id = null) {
	this.currentPage = page;
	const mainContent = document.getElementById('main-content');

	// Scroll to top
	window.scrollTo(0, 0);

	if (page === 'index') {
	this.renderHome();
	} else if (page === 'products') {
	this.renderProducts();
	} else if (page === 'product') {
	this.renderProductDetail(id);
	} else if (page === 'cart') {
	this.renderCart();
	} else if (page === 'checkout') {
	this.renderCheckout();
	} else if (page === 'login') {
	this.renderAuth('login');
	} else if (page === 'register') {
	this.renderAuth('register');
	} else if (page === 'profile') {
	this.renderProfile();
	} else if (page === 'orders') {
	this.renderOrders();
	} else if (page === 'seller') {
	this.renderSellerDashboard();
	} else if (page === 'admin') {
	this.renderAdmin();
	}
	},

	// --- VIEWS ---

	renderHome: function() {
	const mainContent = document.getElementById('main-content');
	mainContent.innerHTML = `
	<section class="hero">
	<div class="hero-content">
	<h1>Shop the World's Best Deals</h1>
	<p>Over 100 million products available at competitive prices.</p>
	<button class="btn btn-primary" onclick="App.navigate('products')">Start Shopping</button>
	<button class="btn btn-outline" onclick="alert('Join our seller program!')">Sell on GlobalMarket</button>
	</div>
	</section>

	<div class="container">
	<h2 class="section-title">Trending Now</h2>
	<div class="product-grid" id="homeProductGrid">
	${productsData.map(p => this.createProductCardHTML(p)).join('')}
	</div>

	<h2 class="section-title" style="margin-top: 50px;">Category Highlights</h2>
	<div class="product-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
	<div class="product-card" onclick="App.navigate('products')">
	<div class="product-image-container" style="background: #e3f2fd; display:flex; align-items:center; justify-content:center; height: 300px;">
	<i class="fas fa-laptop fa-4x" style="color: #1976d2;"></i>
	</div>
	<div class="product-info" style="text-align:center; padding: 20px;">
	<h3>Electronics</h3>
	<p>Latest gadgets and tech accessories.</p>
	<button class="add-to-cart-btn" style="margin-top:10px; width: 100%;">Explore</button>
	</div>
	</div>
	<div class="product-card" onclick="App.navigate('products')">
	<div class="product-image-container" style="background: #fce4ec; display:flex; align-items:center; justify-content:center; height: 300px;">
	<i class="fas fa-tshirt fa-4x" style="color: #e91e63;"></i>
	</div>
	<div class="product-info" style="text-align:center; padding: 20px;">
	<h3>Fashion</h3>
	<p>Styles for everyone, every season.</p>
	<button class="add-to-cart-btn" style="margin-top:10px; width: 100%;">Explore</button>
	</div>
	</div>
	<div class="product-card" onclick="App.navigate('products')">
	<div class="product-image-container" style="background: #e8f5e9; display:flex; align-items:center; justify-content:center; height: 300px;">
	<i class="fas fa-home fa-4x" style="color: #388e3c;"></i>
	</div>
	<div class="product-info" style="text-align:center; padding: 20px;">
	<h3>Home & Living</h3>
	<p>Decorate your dream space.</p>
	<button class="add-to-cart-btn" style="margin-top:10px; width: 100%;">Explore</button>
	</div>
	</div>
	</div>
	</div>
	`;
	},

	renderProducts: function(filterCategory = null) {
	const mainContent = document.getElementById('main-content');
	let filteredProducts = productsData;

	if(filterCategory) {
	// In a real app, filter logic would be here
	this.showToast("Filtering by " + filterCategory, "success");
	}

	mainContent.innerHTML = `
	<div class="container">
	<h2 class="section-title">All Products</h2>
	<div class="product-grid" id="productGrid">
	${filteredProducts.map(p => this.createProductCardHTML(p)).join('')}
	</div>
	</div>
	`;
	},

	renderProductDetail: function(id) {
	const product = productsData.find(p => p.id === id);
	if (!product) {
	this.navigate('index');
	return;
	}

	const mainContent = document.getElementById('main-content');
	mainContent.innerHTML = `
	<div class="container">
	<div class="product-grid" style="grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;">
	<div class="product-image-container" style="height: 500px; border-radius: 12px; overflow: hidden;">
	<img src="${product.image}" alt="${product.name}" class="product-image" style="border-radius: 12px;">
	</div>
	<div>
	<h1 style="font-size: 2.5rem; margin-bottom: 10px;">${product.name}</h1>
	<div class="product-rating">
	${this.getStars(product.rating)} <span style="color: #999; margin-left: 10px;">(${product.reviews} reviews)</span>
	</div>
	<h2 style="color: var(--primary-color); font-size: 3rem; margin: 20px 0;">$${product.price.toFixed(2)}</h2>
	<p style="color: var(--text-light); margin-bottom: 30px;">
	Free shipping on orders over $35. <br>
	Ships from: China <br>
	Delivery estimate: 7-15 business days
	</p>

	<div style="background: #f9f9f9; padding: 20px; border-radius: 8px; margin-bottom: 30px;">
	<h3>Product Features</h3>
	<ul style="margin-left: 20px; margin-top: 10px; color: #555;">
	<li>Premium quality materials</li>
	<li>1 Year Warranty included</li>
	<li>30-day money back guarantee</li>
	<li>24/7 Customer Support</li>
	</ul>
	</div>

	<div style="display: flex; gap: 20px;">
	<button class="btn btn-primary" style="font-size: 1.5rem; flex: 1;" onclick="App.addToCart(${product.id})">
	<i class="fas fa-shopping-cart"></i> Add to Cart
	</button>
	<button class="btn btn-outline" style="font-size: 1.5rem; flex: 1; border-color: var(--primary-color); color: var(--primary-color);">
	Buy It Now
	</button>
	</div>
	</div>
	</div>

	<div style="margin-top: 50px;">
	<h2 class="section-title">Related Products</h2>
	<div class="product-grid" id="relatedProductsGrid" style="margin-top: 20px;">
	${productsData.filter(p => p.id !== id).slice(0,4).map(p => this.createProductCardHTML(p)).join('')}
	</div>
	</div>
	</div>
	`;
	},

	renderCart: function() {
	if (cart.length === 0) {
	const mainContent = document.getElementById('main-content');
	mainContent.innerHTML = `
	<div class="container" style="text-align: center; padding: 50px;">
	<i class="fas fa-shopping-cart fa-5x" style="color: #ddd; margin-bottom: 20px;"></i>
	<h2>Your cart is empty</h2>
	<p style="color: #666; margin-bottom: 30px;">Looks like you haven't added anything to your cart yet.</p>
	<button class="btn btn-primary" onclick="App.navigate('products')">Start Shopping</button>
	</div>
	`;
	return;
	}

	let totalPrice = 0;
	let html = `<div class="container"><h2 class="section-title">Shopping Cart</h2><div class="cart-container"><div style="overflow-x: auto;">`;


	html += `<table>
	<thead>
	<tr>
	<th>Product</th>
	<th>Price</th>
	<th>Quantity</th>
	<th>Subtotal</th>
	<th>Action</th>
	</tr>
	</thead>
	<tbody>`;

	cart.forEach(item => {
	const product = productsData.find(p => p.id === item.id);
	if (product) {
	const subtotal = product.price * item.qty;
	totalPrice += subtotal;
	html += `
	<tr>
	<td style="display: flex; align-items: center; gap: 15px;">
	<img src="${product.image}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 5px;">
	<span>${product.name}</span>
	</td>
	<td>$${product.price.toFixed(2)}</td>
	<td>
	<div class="cart-item-controls" style="margin-top:0; justify-content: center;">
	<button class="qty-btn" onclick="App.updateCartQty(${product.id}, -1)">-</button>
	<span style="font-weight:600; width: 30px; text-align:center;">${item.qty}</span>
	<button class="qty-btn" onclick="App.updateCartQty(${product.id}, 1)">+</button>
	</div>
	</td>
	<td style="font-weight:700; color: var(--primary-color); font-size: 1.2rem;">$${subtotal.toFixed(2)}</td>
	<td>
	<button onclick="App.removeFromCart(${product.id})" style="color: #dc3545; border:none; background:none; cursor:pointer; font-size: 1.2rem;"><i class="fas fa-trash"></i></button>
	</td>
	</tr>
	`;
	}
	});

	html += `</tbody></table></div>`;

	html += `
	<div class="cart-summary">
	<h3>Order Summary</h3>
	<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
	<span>Subtotal</span>
	<span>$${totalPrice.toFixed(2)}</span>
	</div>
	<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
	<span>Shipping</span>
	<span style="color: #28a745;">Free</span>
	</div>
	<div style="display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 0.9rem; color: #666;">
	<span>Tax (Estimated)</span>
	<span>$${(totalPrice * 0.05).toFixed(2)}</span>
	</div>
	<div class="total-price">$${(totalPrice * 1.05).toFixed(2)}</div>
	<button class="btn btn-primary btn-full" onclick="App.navigate('checkout')">Proceed to Checkout</button>
	<button class="btn btn-outline" style="margin-top: 10px; width: 100%; padding: 10px;" onclick="App.navigate('products')">Continue Shopping</button>
	</div>
	</div></div>`;

	document.getElementById('main-content').innerHTML = html;
	},

	renderCheckout: function() {
	if (cart.length === 0) {
	this.navigate('cart');
	return;
	}

	const mainContent = document.getElementById('main-content');
	let totalPrice = 0;
	cart.forEach(item => {
	const product = productsData.find(p => p.id === item.id);
	if (product) totalPrice += product.price * item.qty;
	});
	const finalTotal = totalPrice * 1.05;

	mainContent.innerHTML = `
	<div class="container">
	<h2 class="section-title">Checkout</h2>
	<div class="cart-container" style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
	<div>
	<h3 style="margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px;">Shipping Information</h3>
	<div class="form-group">
	<label>Full Name</label>
	<input type="text" placeholder="John Doe">
	</div>
	<div class="form-group">
	<label>Address</label>
	<input type="text" placeholder="123 Main St, City, Country">
	</div>
	<div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
	<div>
	<label>City</label>
	<input type="text" placeholder="New York">
	</div>
	<div>
	<label>Zip Code</label>
	<input type="text" placeholder="10001">
	</div>
	</div>
	<div class="form-group">
	<label>Phone Number</label>
	<input type="text" placeholder="+1 234 567 890">
	</div>

	<h3 style="margin: 30px 0 20px; border-bottom: 2px solid #eee; padding-bottom: 10px;">Payment Method</h3>
	<div class="form-group">
	<label>Credit Card Number</label>
	<input type="text" placeholder="0000 0000 0000 0000">
	</div>
	<div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
	<div>
	<label>Expiry</label>
	<input type="text" placeholder="MM/YY">
	</div>
	<div>
	<label>CVV</label>
	<input type="text" placeholder="123">
	</div>
	</div>
	</div>
	<div>
	<div class="cart-summary" style="text-align: left; background: #f9f9f9; padding: 30px; border-radius: 12px;">
	<h3>Order Summary</h3>
	<p style="margin-bottom: 20px; color: #666;">Items: ${cart.reduce((a,b) => a + b.qty, 0)} \| Total Weight: 1.2kg</p>
	<div style="display: flex; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px dashed #ccc; padding-bottom: 5px;">
	<span>Subtotal</span>
	<span>$${totalPrice.toFixed(2)}</span>
	</div>
	<div style="display: flex; justify-content: space-between; margin-bottom: 20px; border-bottom: 1px dashed #ccc; padding-bottom: 5px;">
	<span>Shipping</span>
	<span style="color: #28a745;">Free</span>
	</div>
	<div class="total-price" style="font-size: 28px;">Total: $${finalTotal.toFixed(