ruchikakengal · keshripritesh · Oct 12, 2025
diff --git a/public/Day-201_Fashion_Ecommerce_UI/.vscode/settings.json b/public/Day-201_Fashion_Ecommerce_UI/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/public/Day-201_Fashion_Ecommerce_UI/index.html b/public/Day-201_Fashion_Ecommerce_UI/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <title>Modo — Fashion Store UI</title>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header class="store-header">
+    <div class="container header-row">
+      <div class="logo">Modo</div>
+      <div class="search">
+        <input id="searchInput" placeholder="Search products, e.g. 'jacket'" />
+      </div>
+      <div class="header-actions">
+        <button id="wishlistBtn" title="Wishlist" class="icon-btn">
+          <span class="material-icons">favorite_border</span>
+        </button>
+        <button id="cartBtn" title="Cart" class="icon-btn">
+          <span class="material-icons">shopping_cart</span>
+          <span id="cartCount" class="cart-count">0</span>
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <main class="container">
+    <section class="hero-collection fade-in">
+      <div class="hero-left">
+        <h1>New Season • Modern Essentials</h1>
+        <p>Handpicked pieces. Minimalistic design. Sustainable choices.</p>
+        <button class="btn primary explore-btn">Explore Collection</button>
+      </div>
+      <div class="hero-right">
+        <div class="filters">
+          <select id="categorySelect">
+            <option value="all">All</option>
+            <option value="tops">Tops</option>
+            <option value="bottoms">Bottoms</option>
+            <option value="shoes">Shoes</option>
+            <option value="accessories">Accessories</option>
+          </select>
+          <button id="sortBtn" class="btn">Sort: Popular</button>
+        </div>
+      </div>
+    </section>
+
+    <section class="products-grid" id="productsGrid">
+      <!-- Products injected by JS -->
+    </section>
+
+    <div id="cartModal" class="cart-modal">
+      <div class="cart-panel slide-in">
+        <h3>Your Cart</h3>
+        <div id="cartItems" class="cart-items"></div>
+        <div class="cart-footer">
+          <div class="total">Total: <strong id="cartTotal">₹0</strong></div>
+          <button id="checkoutBtn" class="btn primary">Checkout</button>
+        </div>
+        <button id="closeCart" class="close">✕</button>
+      </div>
+    </div>
+  </main>
+
+  <footer class="store-footer fade-in">
+    <div class="container">© Modo • Minimal Fashion</div>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/public/Day-201_Fashion_Ecommerce_UI/script.js b/public/Day-201_Fashion_Ecommerce_UI/script.js
@@ -0,0 +1,133 @@
+const products = [
+  {id:1,title:'Oversized Jacket',category:'tops',price:2499,img:'https://via.placeholder.com/400x400?text=Jacket'},
+  {id:2,title:'Slim Chinos',category:'bottoms',price:1999,img:'https://via.placeholder.com/400x400?text=Chinos'},
+  {id:3,title:'Classic Sneakers',category:'shoes',price:3399,img:'https://via.placeholder.com/400x400?text=Sneakers'},
+  {id:4,title:'Minimal Tee',category:'tops',price:799,img:'https://via.placeholder.com/400x400?text=Tee'},
+  {id:5,title:'Knitted Scarf',category:'accessories',price:599,img:'https://via.placeholder.com/400x400?text=Scarf'},
+  {id:6,title:'Pleated Skirt',category:'bottoms',price:1799,img:'https://via.placeholder.com/400x400?text=Skirt'},
+  {id:7,title:'Leather Boots',category:'shoes',price:4499,img:'https://via.placeholder.com/400x400?text=Boots'},
+  {id:8,title:'Canvas Bag',category:'accessories',price:999,img:'https://via.placeholder.com/400x400?text=Bag'}
+];
+
+const productsGrid = document.getElementById('productsGrid');
+const categorySelect = document.getElementById('categorySelect');
+const searchInput = document.getElementById('searchInput');
+const cartBtn = document.getElementById('cartBtn');
+const cartModal = document.getElementById('cartModal');
+const cartItemsEl = document.getElementById('cartItems');
+const closeCart = document.getElementById('closeCart');
+const cartCountEl = document.getElementById('cartCount');
+const cartTotalEl = document.getElementById('cartTotal');
+const exploreBtn = document.querySelector('.explore-btn');
+
+let cart = JSON.parse(localStorage.getItem('modo_cart') || '[]');
+
+function renderProducts(list){
+  productsGrid.innerHTML = '';
+  list.forEach(p=>{
+    const card = document.createElement('article');
+    card.className = 'card fade-in';
+    card.innerHTML = `
+      <img src="${p.img}" alt="${p.title}">
+      <div class="meta">
+        <div>
+          <h4>${p.title}</h4>
+          <p>${p.category}</p>
+        </div>
+        <div class="price">₹${p.price}</div>
+      </div>
+      <div class="actions">
+        <button class="btn add" data-id="${p.id}">Add</button>
+        <button class="btn quick">Quick view</button>
+      </div>
+    `;
+    productsGrid.appendChild(card);
+  });
+
+  document.querySelectorAll('.add').forEach(b => b.addEventListener('click', e=>{
+    addToCart(+e.target.dataset.id);
+  }));
+
+  document.querySelectorAll('.quick').forEach(btn=>{
+    btn.addEventListener('click', e=>{
+      const id = +e.target.closest('.card').querySelector('.add').dataset.id;
+      const item = products.find(p=>p.id===id);
+      alert(`Quick View:\n${item.title}\nCategory: ${item.category}\nPrice: ₹${item.price}`);
+    });
+  });
+}
+
+function addToCart(id){
+  const item = products.find(p=>p.id===id);
+  const existing = cart.find(c=>c.id===id);
+  if(existing) existing.qty++;
+  else cart.push({...item, qty:1});
+  saveCart();
+  updateCartUI();
+  showCart();
+}
+
+function saveCart(){ localStorage.setItem('modo_cart', JSON.stringify(cart)); }
+function updateCartUI(){
+  cartCountEl.textContent = cart.reduce((s,i)=>s+i.qty,0);
+  cartTotalEl.textContent = '₹' + cart.reduce((s,i)=>s+i.price*i.qty,0);
+}
+
+function showCart(){
+  renderCartItems();
+  cartModal.style.display = 'flex';
+  document.body.style.overflow = 'hidden';
+}
+
+function hideCart(){
+  cartModal.style.display = 'none';
+  document.body.style.overflow = 'auto';
+}
+
+function renderCartItems(){
+  cartItemsEl.innerHTML = '';
+  if(cart.length===0){ cartItemsEl.innerHTML = '<p style="color:#6b7280">Your cart is empty.</p>'; return; }
+  cart.forEach(ci=>{
+    const el = document.createElement('div'); el.className='cart-item';
+    el.innerHTML = `
+      <img src="${ci.img}" alt="">
+      <div style="flex:1"><strong>${ci.title}</strong><div style="color:#6b7280">₹${ci.price} • ${ci.qty} qty</div></div>
+      <div>
+        <button class="btn" data-id="${ci.id}" data-op="inc">+</button>
+        <button class="btn" data-id="${ci.id}" data-op="dec">-</button>
+      </div>
+    `;
+    cartItemsEl.appendChild(el);
+  });
+  cartItemsEl.querySelectorAll('button[data-op]').forEach(btn=>{
+    btn.addEventListener('click', e=>{
+      const id = +e.target.dataset.id; const op = e.target.dataset.op;
+      const it = cart.find(c=>c.id===id);
+      if(op==='inc') it.qty++;
+      else it.qty = Math.max(0, it.qty-1);
+      cart = cart.filter(i=>i.qty>0);
+      saveCart(); renderCartItems(); updateCartUI();
+    });
+  });
+}
+
+function applyFilters(){
+  let out = [...products];
+  const cat = categorySelect.value;
+  if(cat !== 'all') out = out.filter(p=>p.category===cat);
+  const q = searchInput.value.trim().toLowerCase();
+  if(q) out = out.filter(p => p.title.toLowerCase().includes(q) || p.category.includes(q));
+  renderProducts(out);
+}
+
+// events
+categorySelect.addEventListener('change', applyFilters);
+searchInput.addEventListener('input', () => setTimeout(applyFilters, 150));
+cartBtn.addEventListener('click', showCart);
+closeCart.addEventListener('click', hideCart);
+cartModal.addEventListener('click', (e)=>{ if(e.target === cartModal) hideCart(); });
+exploreBtn.addEventListener('click', () => window.scrollTo({ top: productsGrid.offsetTop - 60, behavior: 'smooth' }));
+
+// init
+renderProducts(products);
+updateCartUI();
diff --git a/public/Day-201_Fashion_Ecommerce_UI/style.css b/public/Day-201_Fashion_Ecommerce_UI/style.css
@@ -0,0 +1,181 @@
+:root {
+  --bg: #fbfdff;
+  --muted: #6b7280;
+  --accent: #111827;
+  --primary: #111827;
+  --card: #ffffff;
+  --container: 1100px;
+  font-family: 'Poppins', system-ui, Arial;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: linear-gradient(180deg, #f9fafb, #eef2ff);
+  color: var(--accent);
+  -webkit-font-smoothing: antialiased;
+  transition: background 0.3s;
+}
+
+.container { max-width: var(--container); margin: 0 auto; padding: 1rem; }
+
+.header-row {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 1rem 0; transition: all 0.3s ease;
+}
+.logo {
+  font-weight: 700; font-size: 1.4rem;
+  background: linear-gradient(45deg, #111827, #6366f1);
+  -webkit-background-clip: text; color: transparent;
+}
+.search input {
+  padding: 0.6rem 0.9rem; border-radius: 8px;
+  border: 1px solid #e6e9ef; width: 320px;
+  transition: all 0.3s ease;
+}
+.search input:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
+}
+.header-actions {
+  display: flex; gap: 0.5rem; align-items: center;
+}
+.icon-btn {
+  background: transparent; border: 0; padding: 0.5rem;
+  border-radius: 8px; cursor: pointer;
+  transition: background 0.3s ease, transform 0.2s;
+}
+.icon-btn:hover {
+  background: #f3f4f6;
+  transform: translateY(-2px);
+}
+.cart-count {
+  background: #ef4444; color: white;
+  padding: 2px 6px; border-radius: 999px;
+  font-size: 12px; margin-left: -8px;
+  margin-top: -28px; position: relative;
+}
+
+/* hero + filters */
+.hero-collection {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 1.5rem 0; border-radius: 12px;
+  background: white; box-shadow: 0 8px 20px rgba(0,0,0,0.05);
+}
+.hero-left h1 {
+  font-size: 2rem; margin-bottom: 0.5rem;
+}
+.hero-left p {
+  margin-bottom: 1rem; color: var(--muted);
+}
+.filters { display: flex; gap: 0.6rem; }
+.filters select {
+  padding: 0.5rem; border-radius: 8px; border: 1px solid #e6e9ef;
+  cursor: pointer; transition: border 0.3s;
+}
+.filters select:hover { border-color: #6366f1; }
+.btn {
+  padding: 0.55rem 0.9rem; border-radius: 8px;
+  border: 1px solid #e6e9ef; background: white;
+  cursor: pointer; transition: all 0.3s ease;
+}
+.btn:hover {
+  background: #f3f4f6;
+  transform: translateY(-2px);
+}
+.btn.primary {
+  background: #111827; color: white; border: 0;
+}
+.btn.primary:hover {
+  background: #333f64;
+}
+.explore-btn {
+  margin-top: 0.5rem;
+}
+
+/* products */
+.products-grid {
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 1rem; margin-top: 1rem; opacity: 0; animation: fadeIn 0.8s forwards;
+}
+.card {
+  background: var(--card); border-radius: 12px; padding: 0.6rem;
+  border: 1px solid #f1f5f9;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  position: relative; overflow: hidden;
+}
+.card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
+}
+.card img {
+  width: 100%; border-radius: 8px; object-fit: cover; height: 200px;
+  transition: transform 0.3s ease;
+}
+.card:hover img { transform: scale(1.05); }
+.card .meta {
+  display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem;
+}
+.card h4 { margin: 0; font-size: 1rem; }
+.card p { margin: 0; color: var(--muted); font-size: 0.9rem; }
+.card .actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
+.card .price { font-weight: 600; color: #111827; }
+
+/* cart modal */
+.cart-modal {
+  position: fixed; inset: 0; display: none;
+  align-items: center; justify-content: flex-end;
+  background: rgba(2,6,23,0.35); backdrop-filter: blur(2px);
+}
+.cart-panel {
+  background: white; width: 360px; padding: 1rem; height: 100%;
+  box-shadow: -30px 0 60px rgba(2,6,23,0.12);
+  position: relative; display: flex; flex-direction: column;
+  animation: slideIn 0.4s ease;
+}
+.cart-items { flex: 1; overflow: auto; }
+.cart-item {
+  display: flex; gap: 0.6rem; align-items: center;
+  border-bottom: 1px solid #f3f4f6; padding: 0.6rem 0;
+}
+.cart-item img {
+  width: 64px; height: 64px; border-radius: 8px; object-fit: cover;
+}
+.cart-footer {
+  display: flex; align-items: center; justify-content: space-between;
+  padding-top: 0.6rem;
+}
+.close {
+  position: absolute; top: 10px; right: 10px;
+  border: 0; background: transparent; font-size: 18px; cursor: pointer;
+}
+
+/* footer */
+.store-footer {
+  background: #111827; color: white; text-align: center;
+  padding: 1rem; margin-top: 2rem; border-radius: 12px 12px 0 0;
+}
+
+/* animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(15px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes slideIn {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+.fade-in { animation: fadeIn 1s ease both; }
+
+/* responsive */
+@media (max-width: 1000px) {
+  .products-grid { grid-template-columns: repeat(2, 1fr); }
+  .search input { width: 160px; }
+}
+@media (max-width: 600px) {
+  .products-grid { grid-template-columns: 1fr; }
+  .header-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
+  .hero-collection { flex-direction: column; text-align: center; }
+}