pure-ecommerce

byraj modi

Build a complete, production-ready, single-page e-commerce web application called “OFFKART 🔥”. ⚠️ IMPORTANT RULE: The DESIGN, UI theme, colors, animations, and layout MUST be completely different and unique. But ALL FEATURES, LOGIC, FUNCTIONALITY, and USER FLOW must remain EXACTLY the same as described below. ----------------------------------- 🧠 CORE CONCEPT ----------------------------------- A premium deals marketplace website where users can: - Browse products - Filter by category - Search products - Add/remove wishlist ❤️ - View product details in modal - Click “Buy Now” (affiliate redirect) - See trending products based on clicks - Admin can add/delete products ----------------------------------- 🎯 REQUIRED FEATURES (DO NOT CHANGE) ----------------------------------- 1. HERO SECTION - Fullscreen hero - Big headline + subtext - CTA button → scroll to products - Smooth animation 2. LIVE DEALS MARQUEE - Auto-scrolling horizontal deals bar - Pause on hover 3. CATEGORY FILTER SYSTEM - Categories: - All - Fashion - Electronics - Shoes - Beauty - Home - Watches - Click → filter products instantly 4. SEARCH SYSTEM - Real-time filtering - Search by name + description 5. PRODUCT SYSTEM Each product must have: - id - name - description - price - image - category - affiliate link - click count (tracked) 6. PRODUCT CARD UI Each card must include: - Image - Name - Description - Price - ❤️ Wishlist button - Buy button - Smooth hover animation 7. PRODUCT MODAL On click: - Open modal - Show full details - Buy button - Wishlist toggle - Close on outside click or ESC 8. BUY BUTTON LOGIC - Increase click count - Save in localStorage - Open affiliate link - If no link → open Amazon search 9. TRENDING SYSTEM - Based on click count - Show top 6 products - Auto update when user clicks 10. WISHLIST SYSTEM - Toggle heart ❤️ - Save in localStorage - Separate wishlist page - Show only saved items 11. ADMIN PANEL (HIDDEN) - Hidden behind double-click / double-tap trigger - Ask password before access - Password must NOT be visible in UI Admin Features: - Add product - Delete product - View product list - Show click counts 12. STORAGE SYSTEM Use localStorage for: - Products - Wishlist - Click tracking 13. CUSTOM ALERT SYSTEM - Replace alert() and confirm() - Use custom modal UI instead 14. ANIMATIONS - Smooth transitions - Scroll animations - Hover effects - Micro-interactions 15. FULLY RESPONSIVE - Mobile optimized - Tablet + Desktop ----------------------------------- 🎨 DESIGN INSTRUCTIONS (VERY IMPORTANT) ----------------------------------- ⚠️ CHANGE DESIGN COMPLETELY: Use a DIFFERENT design style such as: - Light theme OR neon theme OR glassmorphism OR brutalism OR minimal OR gradient UI - Different fonts - Different layout spacing - Different button styles - Different animation style BUT: - Keep structure and logic SAME ----------------------------------- ⚙️ TECH REQUIREMENTS ----------------------------------- - Use ONLY: - HTML - CSS - Vanilla JavaScript (NO frameworks) - Code must be: - Clean - Well-structured - Commented - Production-ready ----------------------------------- 🔥 EXTRA IMPROVEMENTS (OPTIONAL BUT RECOMMENDED) ----------------------------------- - Add loading skeletons - Add smooth page transitions - Add micro animations - Add hover 3D effect - Add scroll reveal effects ----------------------------------- 📦 OUTPUT FORMAT ----------------------------------- Return FULL working code in ONE FILE: - index.html - Include all CSS + JS inside ----------------------------------- 🎯 FINAL GOAL ----------------------------------- The final result should feel like: - A real startup-level product - Premium UI - Smooth UX - Fully functional deal marketplace But visually DIFFERENT from the original.