Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pro E-Commerce Store</title>

<style>
body { margin:0; font-family: Arial; background:#f4f4f4; }
header { background:#111; color:white; padding:15px; text-align:center; }
nav { background:#222; padding:10px; text-align:center; }
nav button { margin:5px; padding:8px 15px; border:none; cursor:pointer; }

.section { display:none; padding:20px; }
.active { display:block; }

.products { display:flex; flex-wrap:wrap; justify-content:center; }
.card {
    background:white;
    width:250px;
    margin:15px;
    padding:15px;
    text-align:center;
    border-radius:10px;
    box-shadow:0 4px 8px rgba(0,0,0,0.2);
}

button {
    background:#ff9800;
    border:none;
    padding:8px;
    color:white;
    border-radius:5px;
    cursor:pointer;
}

input {
    padding:8px;
    margin:5px;
    width:90%;
}

.cart-item {
    display:flex;
    justify-content:space-between;
    margin:10px 0;
}
</style>
</head>

<body>

<header>
<h1>My Professional Store</h1>
</header>

<nav>
<button onclick="showSection('store')">Store</button>
<button onclick="showSection('cart')">Cart</button>
<button onclick="showSection('checkout')">Checkout</button>
<button onclick="showSection('login')">Login</button>
<button onclick="showSection('admin')">Admin</button>
</nav>

<!-- STORE -->
<section id="store" class="section active">
<h2>Products</h2>
<div class="products" id="productList"></div>
</section>

<!-- CART -->
<section id="cart" class="section">
<h2>Shopping Cart</h2>
<div id="cartItems"></div>
<h3>Total: $<span id="total">0</span></h3>
</section>

<!-- CHECKOUT -->
<section id="checkout" class="section">
<h2>Checkout</h2>
<input placeholder="Full Name"><br>
<input placeholder="Address"><br>
<input placeholder="Card Number"><br>
<button onclick="alert('Order Placed Successfully!')">Place Order</button>
</section>

<!-- LOGIN -->
<section id="login" class="section">
<h2>Login / Signup</h2>
<input placeholder="Email"><br>
<input placeholder="Password" type="password"><br>
<button onclick="alert('Logged In (Demo Only)')">Login</button>
<button onclick="alert('Account Created (Demo Only)')">Signup</button>
</section>

<!-- ADMIN -->
<section id="admin" class="section">
<h2>Admin Panel</h2>
<input id="pname" placeholder="Product Name"><br>
<input id="pprice" placeholder="Price"><br>
<button onclick="addProduct()">Add Product</button>
</section>

<script>
let products = [
    {name:"Smart Watch", price:50},
    {name:"Headphones", price:30},
    {name:"Shoes", price:70}
];

let cart = [];

function showSection(id){
    document.querySelectorAll('.section').forEach(sec=>sec.classList.remove('active'));
    document.getElementById(id).classList.add('active');
}

function renderProducts(){
    let list = document.getElementById("productList");
    list.innerHTML="";
    products.forEach((p,index)=>{
        list.innerHTML += `
        <div class="card">
            <h3>${p.name}</h3>
            <p>$${p.price}</p>
            <button onclick="addToCart(${index})">Add to Cart</button>
        </div>
        `;
    });
}

function addToCart(index){
    let item = cart.find(p=>p.name===products[index].name);
    if(item){ item.qty++; }
    else{ cart.push({...products[index], qty:1}); }
    renderCart();
}

function renderCart(){
    let div = document.getElementById("cartItems");
    let total=0;
    div.innerHTML="";
    cart.forEach((item,i)=>{
        total += item.price * item.qty;
        div.innerHTML += `
        <div class="cart-item">
            ${item.name} ($${item.price}) x ${item.qty}
            <button onclick="removeItem(${i})">X</button>
        </div>
        `;
    });
    document.getElementById("total").innerText=total;
}

function removeItem(i){
    cart.splice(i,1);
    renderCart();
}

function addProduct(){
    let name=document.getElementById("pname").value;
    let price=parseInt(document.getElementById("pprice").value);
    if(name && price){
        products.push({name,price});
        renderProducts();
        alert("Product Added!");
    }
}

renderProducts();
</script>

</body>
</html>
Editor is loading...