From a2bdcd1b68a23e1f020dc0b715ad0bc4fdae878a Mon Sep 17 00:00:00 2001 From: "[anchalbha]" <[anchalbhandari235@gmail.com]> Date: Thu, 7 Aug 2025 16:31:00 +0530 Subject: [PATCH 1/2] Added reviews and ratings feature --- README.md | 337 +++++++++++++++++++++++++++--------------------------- 1 file changed, 166 insertions(+), 171 deletions(-) diff --git a/README.md b/README.md index 4699e1e..38dae34 100644 --- a/README.md +++ b/README.md @@ -1,227 +1,222 @@ -# STYLÉKA - Modern E-Commerce Fashion Website -![STYLÉKA Logo](https://img.shields.io/badge/STYL%C3%89KA-Fashion%20Store-088178?style=for-the-badge&logo=shopping-bag&logoColor=white) +# ✨ STYLÉKA - Modern E-Commerce Fashion Website -A modern, responsive e-commerce website for fashion and lifestyle products built with HTML, CSS, and JavaScript. +![STYLÉKA Badge](https://img.shields.io/badge/STYL%C3%89KA-Fashion%20Store-088178?style=for-the-badge&logo=shopping-bag&logoColor=white) -## 🌟 Features +> A modern, responsive e-commerce platform tailored for fashion & lifestyle products. Crafted with HTML, CSS, and JavaScript — delivering smooth performance and a stunning user experience. + +--- + +## 🌟 Features Overview ### 🛍️ Core E-Commerce Features -- **Product Catalog**: Comprehensive product listings with detailed information -- **Advanced Search**: Real-time product search with multiple filters -- **Shopping Cart**: Add to cart functionality with cart management -- **Product Categories**: Organized product sections (Featured Products, New Arrivals) -- **Individual Product Pages**: Detailed product views with specifications +- 📦 **Product Catalog** — Intuitive layout with rich product details +- 🔎 **Advanced Search** — Instant filtering by name, brand, and price +- 🛒 **Shopping Cart** — Add/manage items with ease +- 🧾 **Product Categories** — Featured, New Arrivals & curated sections +- 📃 **Product Pages** — Dedicated view with specifications & imagery +- ⭐ **Product Reviews** — Users can submit written feedback on each product +- 🌟 **Product Ratings** — Visual star rating system with averages ### 🎨 Modern UI/UX -- **Responsive Design**: Mobile-first approach, works on all devices -- **Gradient Backgrounds**: Modern gradient designs throughout the site -- **Interactive Elements**: Hover effects, smooth transitions, and animations -- **Glass Morphism**: Modern translucent design elements -- **Professional Typography**: Clean and readable font choices - -### 🔍 Advanced Search System -- **Text Search**: Search by product name, brand, or description -- **Brand Filtering**: Filter products by specific brands (Adidas, Zara, Gucci, etc.) -- **Price Range Filtering**: Filter by price ranges (₹0-2000, ₹2000-5000, etc.) -- **Real-time Results**: Instant filtering as you type -- **Clear Search**: Easy reset functionality +- 📱 **Responsive Design** — Seamless across mobile, tablet, and desktop +- 🎞️ **Interactive UI** — Hover effects, transitions & animations +- 🌈 **Glass Morphism** — Trendy translucent components +- 🖋️ **Professional Typography** — Clean and readable font pairings ### 📱 User Experience -- **Authentication UI**: Login and signup interfaces -- **Newsletter Subscription**: Email subscription for updates -- **Social Media Integration**: Follow us on various platforms -- **Mobile Navigation**: Hamburger menu for mobile devices -- **Fast Loading**: Optimized images and efficient code +- 🔐 **Authentication UI** — Smooth login & signup experience +- 💌 **Newsletter Signup** — Stay updated on trends and deals +- 📲 **Mobile Navigation** — Touch-optimized hamburger menu +- ⚡ **Fast Loading** — Optimized assets & efficient scripts +- 🔗 **Social Media Integration** — Expand your fashion network + +--- -## 🏗️ Project Structure +## 🗂️ Project Structure -``` +```bash STYLÉKA/ ├── index.html # Homepage -├── shop.html # Product catalog page -├── blog.html # Blog/news section -├── about.html # About us page -├── contact.html # Contact information -├── login.html # User login page -├── register.html # User registration page -├── cart.html # Shopping cart -├── cancel.html # Order cancellation -├── success.html # Order success page -├── sproduct*.html # Individual product pages (1-15) -├── style.css # Main stylesheet -├── script.js # JavaScript functionality -├── server.js # Backend server (if applicable) -└── README.md # Project documentation +├── shop.html # Product catalog +├── blog.html # Blog / News +├── about.html # About the brand +├── contact.html # Contact info +├── login.html # Login page +├── register.html # Register page +├── cart.html # Shopping cart +├── cancel.html # Cancel order +├── success.html # Order success +├── sproduct*.html # Individual product pages +├── style.css # Core styles +├── script.js # All JS functionality +├── server.js # Backend (optional) +└── README.md # Project documentation ``` -## 🛠️ Technologies Used +## 🛠️ Tech Stack -### Frontend -- **HTML5**: Semantic markup and structure -- **CSS3**: Modern styling with flexbox, grid, gradients, and animations -- **JavaScript (ES6+)**: Interactive functionality and DOM manipulation -- **Font Awesome 6.4.2**: Icons and visual elements -- **Google Fonts**: Professional typography +### 🔧 Frontend +- HTML5 — Semantic structure +- CSS3 — Flexbox, Grid, gradients & animations +- JavaScript (ES6+) — Dynamic interactions -### Design Elements -- **Responsive Design**: Mobile-first approach -- **CSS Grid & Flexbox**: Modern layout systems -- **CSS Animations**: Smooth transitions and hover effects -- **Gradient Backgrounds**: Modern visual appeal -- **Box Shadows**: Depth and visual hierarchy +### 🎨 Design Tools +- Font Awesome 6.4.2 — Clean icons +- Google Fonts — Modern typography +- Pexels & Unsplash — Product & banner images -### External Resources -- **Pexels CDN**: High-quality product images -- **Unsplash**: Hero section backgrounds -- **FontAwesome CDN**: Icons and UI elements +--- ## 🚀 Getting Started ### Prerequisites -- Modern web browser (Chrome, Firefox, Safari, Edge) -- Text editor or IDE (VS Code recommended) -- Local server (optional, for full functionality) +- Browser: Chrome, Firefox, Safari, Edge +- IDE: VS Code or any modern editor +- Optional: Local server (Live Server, Python, Node.js) ### Installation -1. **Clone the repository** - ```bash - git clone https://github.com/Channpreetk/Styleka.git - cd Styleka - ``` - -2. **Open the project** - - Open `index.html` in your web browser, or - - Use a local server for better performance: - ```bash - # Using Python - python -m http.server 8000 - - # Using Node.js - npx serve . - - # Using VS Code Live Server extension - Right-click on index.html → "Open with Live Server" - ``` - -3. **Navigate the website** - - Visit `http://localhost:8000` (if using local server) - - Or simply open `index.html` in your browser - -## 📖 Usage Guide - -### 🏠 Homepage Features -- **Hero Section**: Eye-catching banner with call-to-action -- **Featured Products**: Highlighted products with search functionality -- **Why Choose Us**: Benefits and unique selling points -- **New Arrivals**: Latest product additions -- **Newsletter Signup**: Stay updated with latest offers - -### 🛒 Shopping Features -- **Product Search**: Use the search bar to find specific products -- **Filter Options**: Use brand and price filters to narrow down results -- **Product Details**: Click on products to view detailed information -- **Add to Cart**: Add desired items to your shopping cart - -### 📱 Mobile Experience -- **Responsive Navigation**: Hamburger menu for mobile devices -- **Touch-Friendly**: Optimized for touch interactions -- **Fast Loading**: Optimized for mobile networks +```bash +git clone https://github.com/Channpreetk/Styleka.git +cd Styleka +``` -## 🎨 Customization +### Run the Project -### Color Scheme -The website uses a modern teal-based color palette: -- **Primary**: #088178 (Teal) -- **Secondary**: #06b19e (Light Teal) -- **Accent**: Various gradients and complementary colors +Open `index.html` directly or use a local server: -### Fonts -- **Primary Font**: "Play" - Modern, clean sans-serif -- **Fallback**: System fonts for compatibility +```bash +# Python +python -m http.server 8000 -### Images -- All product images are sourced from Pexels CDN for reliability -- Hero backgrounds from Unsplash for high quality +# Node +npx serve . +``` -## 🔧 Configuration +Or use Live Server in VS Code: Right-click `index.html` → "Open with Live Server" -### Search Functionality -The search system can be customized in `script.js`: -- Add new brands to the brand filter -- Modify price ranges -- Adjust search algorithms +Visit: `http://localhost:8000` -### Styling -Main styles are in `style.css`: -- Modify color variables for theme changes -- Adjust responsive breakpoints -- Customize animations and transitions +--- -## 🌐 Browser Support +## 📖 User Guide -- **Chrome**: ✅ Fully supported -- **Firefox**: ✅ Fully supported -- **Safari**: ✅ Fully supported -- **Edge**: ✅ Fully supported -- **Mobile Browsers**: ✅ Optimized for mobile +### 🏠 Homepage Highlights +- Hero Banner — High-impact visuals + CTA +- New Arrivals — Fresh seasonal picks +- Featured Picks — Hand-selected must-haves +- Newsletter — Stay in vogue -## 📊 Performance Features +### 🛍️ Shopping Features +- Search Bar — Real-time, keyword-based +- Filters — Brand & price range +- Product View — See specs, images, ratings & reviews +- Cart — Add, update, remove items -- **Optimized Images**: Compressed and properly sized images -- **Efficient CSS**: Minimized CSS with efficient selectors -- **Fast JavaScript**: Optimized DOM manipulation -- **CDN Resources**: Fast loading external resources +### ⭐ Product Ratings (1-5) +- Users can leave star ratings +- Display average rating per product +- Ratings shown visually on product listings and detail pages -## 🤝 Contributing +### 💬 Product Reviews +- Users can leave written reviews for each product +- Display all submitted reviews under each product +- Reviews can be edited/deleted if user-authenticated +- Dynamically updatable with backend support -Contributions are welcome! Please feel free to submit a Pull Request. +--- -1. Fork the project -2. Create your feature branch (`git checkout -b feature/AmazingFeature`) -3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) -4. Push to the branch (`git push origin feature/AmazingFeature`) -5. Open a Pull Request +## 📱 Mobile Experience +- Fully responsive layout +- Touch-friendly navigation +- Optimized media & performance -## 📝 License +## 🎨 Customization -This project is open source and available under the [MIT License](LICENSE). +### 🎨 Color Scheme +- Primary: `#088178` (Teal) +- Secondary: `#06b19e` (Light Teal) +- Accents: Gradients & contrast-based UI highlights -## 👨‍💻 Author +### ✏️ Fonts +- Primary: `"Play"` +- Fallback: System UI fonts -**Channpreet Kaur** -- GitHub: [@Channpreetk](https://github.com/Channpreetk) +### 🖼️ Images +- Product visuals: Pexels +- Hero & banners: Unsplash -## 🙏 Acknowledgments +### 🔧 Configuration -- **Images**: Pexels and Unsplash for high-quality images -- **Icons**: Font Awesome for beautiful icons -- **Fonts**: Google Fonts for typography -- **Inspiration**: Modern e-commerce design trends +#### 🧠 Search & Filters (`script.js`) +- Modify price brackets or brands +- Adjust filtering logic for backend support -## 📞 Contact - -For any queries or support, please contact: -- **Email**: [Your Email] -- **Phone**: (+91) - 8507566667 -- **Address**: Guru Nanak Dev University, Amritsar +#### 🧵 Styles (`style.css`) +- Change theme colors +- Update breakpoints for responsiveness +- Customize animations --- -
- Made with ❤️ for modern fashion enthusiasts -
+## 🌐 Browser Support + +| Browser | Supported | +|----------------|-----------| +| Chrome | ✅ | +| Firefox | ✅ | +| Safari | ✅ | +| Edge | ✅ | +| Mobile Browsers | ✅ | + +## 📈 Performance Highlights +- ✅ Compressed images +- ✅ Modular CSS +- ✅ Efficient JavaScript +- ✅ CDN-delivered assets --- -## 🔄 Version History +## 🙌 Contribution Guide + +```bash +# Contribute +1. Fork the repository +2. Create a branch: git checkout -b feature/AmazingFeature +3. Commit: git commit -m 'Add AmazingFeature' +4. Push: git push origin feature/AmazingFeature +5. Open a Pull Request +``` + +## 📦 Version History -- **v1.0.0** - Initial release with basic e-commerce functionality -- **v1.1.0** - Added advanced search and filtering -- **v1.2.0** - Enhanced mobile responsiveness -- **v1.3.0** - Improved UI/UX with modern design elements +| Version | Description | +|---------|-------------| +| v1.0.0 | Initial release | +| v1.1.0 | Added advanced search & filtering | +| v1.2.0 | Improved mobile responsiveness | +| v1.3.0 | Glass morphism & modern UI elements | +| v1.4.0 | Added separate reviews & ratings system | --- -*Last updated: January 2025* \ No newline at end of file +## 👤 Author + +**Channpreet Kaur** +GitHub: [@Channpreetk](https://github.com/Channpreetk) + +## 💬 Contact + +📧 Email: [Your Email] +📞 Phone: (+91) 85075-66667 +📍 Location: Guru Nanak Dev University, Amritsar + +## 🙏 Acknowledgments + +- 🖼️ Images: Pexels, Unsplash +- 🧩 Icons: Font Awesome +- 🖋️ Fonts: Google Fonts +- 💡 Inspiration: Modern e-commerce design trends + +
💖 Built for modern fashion lovers — STYLÉKA
From 0d8804e5826701828f833c47dd19e3547007a3fc Mon Sep 17 00:00:00 2001 From: "[anchalbha]" <[anchalbhandari235@gmail.com]> Date: Thu, 7 Aug 2025 16:42:31 +0530 Subject: [PATCH 2/2] Improved PR File --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 38dae34..51ea905 100644 --- a/README.md +++ b/README.md @@ -204,7 +204,7 @@ Visit: `http://localhost:8000` ## 👤 Author **Channpreet Kaur** -GitHub: [@Channpreetk](https://github.com/Channpreetk) +GitHub:[@Channpreetk](https://github.com/Channpreetk) ## 💬 Contact