├── server ├── .gitignore ├── .env ├── vercel.json ├── config │ ├── generateToken.js │ └── Database.js ├── routes │ ├── sellerRoutes.js │ └── userRoutes.js ├── middlewares │ ├── errorHandler.js │ └── sendingImage.js ├── models │ ├── productModel.js │ ├── cartModel.js │ ├── sellerModel.js │ ├── orderModel.js │ └── consumerModel.js ├── controllers │ ├── seller_controller.js │ ├── product_controller.js │ ├── order_controller.js │ ├── cart_controllers.js │ └── con_controller.js ├── server.js └── package.json ├── client ├── images │ ├── dp.jpg │ ├── cover.png │ ├── upload.png │ ├── egg-min.png │ ├── favicon.ico │ ├── fish-min.png │ ├── leaf-min.png │ ├── meat-min.png │ ├── milk-min.png │ ├── vinline.png │ ├── vinline1.png │ ├── apple-min.png │ ├── fruit-min.png │ ├── header-img.png │ ├── panda-min.png │ ├── tomato-min.png │ ├── tomato2-min.png │ ├── vinlinedark.png │ ├── broccoli-min.png │ ├── vegetable-min.png │ └── vinlinelight.png ├── javascript │ ├── login.js │ ├── login-seller.js │ ├── signup-seller.js │ ├── signup.js │ ├── upload-product.js │ ├── profile.js │ ├── cart.js │ ├── navbar.js │ ├── main.js │ └── profile-seller.js ├── reset-password.html ├── styles │ ├── reset-password.css │ ├── login-seller.css │ ├── login.css │ ├── signup-seller.css │ ├── signup.css │ ├── checkout.css │ ├── profile.css │ ├── order-confirmation.css │ ├── profile-seller.css │ ├── cart.css │ ├── global.css │ └── style.css ├── login.html ├── include │ ├── footer.ejs │ └── navbar.ejs ├── signup.html ├── signup-seller.html ├── login-seller.html ├── upload-product.ejs ├── cart.ejs ├── profile.ejs ├── order-confirmation.ejs ├── checkout.ejs ├── profile-seller.ejs └── index.ejs ├── Dockerfile └── README.md /server/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /client/images/dp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/dp.jpg -------------------------------------------------------------------------------- /client/images/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/cover.png -------------------------------------------------------------------------------- /client/images/upload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/upload.png -------------------------------------------------------------------------------- /client/images/egg-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/egg-min.png -------------------------------------------------------------------------------- /client/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/favicon.ico -------------------------------------------------------------------------------- /client/images/fish-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/fish-min.png -------------------------------------------------------------------------------- /client/images/leaf-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/leaf-min.png -------------------------------------------------------------------------------- /client/images/meat-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/meat-min.png -------------------------------------------------------------------------------- /client/images/milk-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/milk-min.png -------------------------------------------------------------------------------- /client/images/vinline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/vinline.png -------------------------------------------------------------------------------- /client/images/vinline1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/vinline1.png -------------------------------------------------------------------------------- /client/images/apple-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/apple-min.png -------------------------------------------------------------------------------- /client/images/fruit-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/fruit-min.png -------------------------------------------------------------------------------- /client/images/header-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/header-img.png -------------------------------------------------------------------------------- /client/images/panda-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/panda-min.png -------------------------------------------------------------------------------- /client/images/tomato-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/tomato-min.png -------------------------------------------------------------------------------- /client/images/tomato2-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/tomato2-min.png -------------------------------------------------------------------------------- /client/images/vinlinedark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/vinlinedark.png -------------------------------------------------------------------------------- /client/images/broccoli-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/broccoli-min.png -------------------------------------------------------------------------------- /client/images/vegetable-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/vegetable-min.png -------------------------------------------------------------------------------- /client/images/vinlinelight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/asif-daffodil/Mern-e-commerce/HEAD/client/images/vinlinelight.png -------------------------------------------------------------------------------- /server/.env: -------------------------------------------------------------------------------- 1 | PORT=4000 2 | MONGO_URI=mongodb+srv://venline:venline@vendorbase.wlor956.mongodb.net/?retryWrites=true&w=majority 3 | JWT_SECRET=prouth -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node 2 | COPY client /Venline/client/ 3 | COPY server /Venline/server/ 4 | WORKDIR /Venline/server 5 | RUN npm install 6 | EXPOSE 3000 7 | CMD ["npm", "start"] -------------------------------------------------------------------------------- /server/vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "name": "Venline", 4 | "builds": [ 5 | { "src": "server.js", "use": "@vercel/node" } 6 | ], 7 | "routes": [ 8 | { "src": "/(.*)", "dest": "/server.js" } 9 | ] 10 | } -------------------------------------------------------------------------------- /server/config/generateToken.js: -------------------------------------------------------------------------------- 1 | const jwt = require("jsonwebtoken"); 2 | const generateToken = (id)=>{ 3 | return jwt.sign({id},`${process.env.JWT_SECRETS}`,{ 4 | expiresIn:"30d", 5 | }) 6 | } 7 | module.exports={generateToken} 8 | exports.generateToken=generateToken -------------------------------------------------------------------------------- /server/config/Database.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | const connectDb = async ()=>{ 3 | try { 4 | const conn = await mongoose.connect(process.env.MONGO_URI,{ 5 | useNewUrlParser:true, 6 | useUnifiedTopology:true, 7 | } 8 | ); 9 | console.log(`Monogo Db Connected: ${conn.connection.host}`.cyan.bold); 10 | } 11 | catch (error) { 12 | console.log(`Error:${error.message}`.red.bold); 13 | process.exit(); 14 | } 15 | }; 16 | module.exports = connectDb; -------------------------------------------------------------------------------- /server/routes/sellerRoutes.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const router = express.Router(); 3 | const {createSeller,authseller} = require('../controllers/seller_controller'); 4 | const{ createProduct}=require('../controllers/product_controller') 5 | 6 | // Create a new seller 7 | router.post('/seller', createSeller); 8 | //authenticate seller 9 | router.post('/seller/login', authseller); 10 | //uploading product 11 | router.post('/seller/upload', createProduct); 12 | 13 | module.exports = router; 14 | -------------------------------------------------------------------------------- /server/middlewares/errorHandler.js: -------------------------------------------------------------------------------- 1 | const notfound=(req,res,next)=>{ 2 | const error=new Error(`Not Found -${req.originalUrl}`) 3 | res.status(404) 4 | next(error) 5 | } 6 | const errorhandler=(err,req,res,next)=>{ 7 | const statusCode=res.statusCode===200?500:res.statusCode 8 | res.status(statusCode) 9 | res.json({ 10 | message:err.message, 11 | stack:process.env.NODE_ENV==='production'?null:err.stack 12 | }) 13 | } 14 | 15 | module.exports = {notfound,errorhandler} 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Venline 2 | Venline is a full-stack web application that aims to connect local vendors with customers looking for fresh and affordable products. With an intuitive user interface, customers can browse through a wide range of products from different vendors, add them to their cart, and complete the purchase through a secure payment gateway. Meanwhile, vendors can create their own accounts, list their products, and manage their inventory and orders. 3 | 4 | ## How To Use 5 | Clone this repository 6 | Open terminal 7 | Run these commands 8 | ``` 9 | cd server 10 | npm install 11 | npm run start 12 | ``` 13 | Go to localhost:3000 14 | -------------------------------------------------------------------------------- /server/models/productModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | 3 | const productSchema = new mongoose.Schema({ 4 | id:{ 5 | type: mongoose.Schema.Types.ObjectId, 6 | unique:true, 7 | }, 8 | name: { 9 | type: String, 10 | required: true 11 | }, 12 | description: { 13 | type: String, 14 | required: true 15 | }, 16 | price: { 17 | type: Number, 18 | required: true 19 | }, 20 | sellername:{ 21 | type: String, 22 | required: true 23 | }, 24 | image: { 25 | type: String, 26 | required: true 27 | } 28 | }); 29 | const Product = mongoose.model('Product', productSchema); 30 | module.exports = Product; -------------------------------------------------------------------------------- /server/models/cartModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | const cartSchema = new mongoose.Schema({ 3 | username: { 4 | type: String, 5 | ref: 'User', 6 | //required: true 7 | }, 8 | items: [{ 9 | productName: { 10 | type: String, 11 | ref: 'Product' 12 | }, 13 | quantity: { 14 | type: Number, 15 | // required: true 16 | }, 17 | price: { 18 | type: Number, 19 | // required: true 20 | } 21 | }], 22 | createdOn: { 23 | type: Date, 24 | default: Date.now 25 | } 26 | }); 27 | 28 | const Cart = mongoose.model('Cart', cartSchema); 29 | 30 | module.exports = Cart; 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /server/routes/userRoutes.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const {registerUser,authUser} = require("../controllers/con_controller"); 3 | const{getProducts,getProductById}=require('../controllers/product_controller') 4 | const{addToCart}=require('../controllers/cart_controllers') 5 | const{addOrderItems}=require('../controllers/order_controller') 6 | const router = express.Router(); 7 | console.log(`registerUser${registerUser}`) 8 | router.post('/',registerUser); 9 | router.post('/login',authUser) 10 | router.post('/cart',addToCart) 11 | router.post('/product',getProducts) 12 | router.post('/search',getProductById) 13 | router.post('/order',addOrderItems,) 14 | module.exports = router -------------------------------------------------------------------------------- /client/javascript/login.js: -------------------------------------------------------------------------------- 1 | const form= document.getElementById('login-form') 2 | form.addEventListener('submit',function(event){ 3 | event.preventDefault() 4 | const formData = new FormData(form) 5 | const email=formData.get('email') 6 | const password = formData.get('password') 7 | const user = { 8 | password, 9 | email, 10 | } 11 | fetch('/api/consumer/login', { 12 | method: 'POST', 13 | body: JSON.stringify(user), 14 | headers: { 15 | 'content-type': 'application/json' 16 | } 17 | }).then(response => response.json()) 18 | .then(createdUser => { 19 | console.log(createdUser) 20 | localStorage.setItem('user', JSON.stringify(createdUser)); 21 | // Redirect to home page 22 | window.location.href = "/"; 23 | }) 24 | }) -------------------------------------------------------------------------------- /client/javascript/login-seller.js: -------------------------------------------------------------------------------- 1 | const form= document.getElementById('login-seller-form') 2 | form.addEventListener('submit',function(event){ 3 | event.preventDefault() 4 | const formData = new FormData(form) 5 | const email=formData.get('email') 6 | const password = formData.get('password') 7 | const user = { 8 | password, 9 | email, 10 | } 11 | fetch('/api/seller/login', { 12 | method: 'POST', 13 | body: JSON.stringify(user), 14 | headers: { 15 | 'content-type': 'application/json' 16 | } 17 | }).then(response => response.json()) 18 | .then(createdUser => { 19 | console.log(createdUser) 20 | localStorage.setItem('user', JSON.stringify(createdUser)); 21 | // Redirect to home page 22 | window.location.href = "/"; 23 | }) 24 | }) -------------------------------------------------------------------------------- /server/middlewares/sendingImage.js: -------------------------------------------------------------------------------- 1 | const multer = require('multer'); 2 | 3 | // Define storage for the uploaded files 4 | const storage = multer.memoryStorage(); 5 | 6 | // Set file size limit and file type restrictions 7 | const limits = { 8 | fileSize: 1024 * 1024 * 5, // 5 MB 9 | files: 1 // allow only one file upload 10 | }; 11 | 12 | // Define file type filter 13 | const fileFilter = (req, file, cb) => { 14 | if ( 15 | file.mimetype === 'image/jpeg' || 16 | file.mimetype === 'image/jpg' || 17 | file.mimetype === 'image/png' 18 | ) { 19 | cb(null, true); 20 | } else { 21 | cb(new Error('Only JPEG, JPG, and PNG files are allowed')); 22 | } 23 | }; 24 | 25 | // Initialize multer middleware with the above configurations 26 | const upload = multer({ storage, limits, fileFilter }); 27 | 28 | module.exports = upload; 29 | -------------------------------------------------------------------------------- /client/javascript/signup-seller.js: -------------------------------------------------------------------------------- 1 | const form= document.getElementById('signup-seller-form') 2 | form.addEventListener('submit',function(event){ 3 | event.preventDefault() 4 | const formData = new FormData(form) 5 | const username = formData.get('username') 6 | const email=formData.get('email') 7 | const password = formData.get('password') 8 | const phone = formData.get('phone') 9 | const user = { 10 | username, 11 | password, 12 | email, 13 | } 14 | fetch('/api/seller', { 15 | method: 'POST', 16 | body: JSON.stringify(user), 17 | headers: { 18 | 'content-type': 'application/json' 19 | } 20 | }).then(response => response.json()) 21 | .then(createdUser => { 22 | console.log(createdUser) 23 | window.location.href = "/login-seller.html" 24 | }) 25 | }) -------------------------------------------------------------------------------- /client/javascript/signup.js: -------------------------------------------------------------------------------- 1 | const form= document.getElementById('signup-form') 2 | form.addEventListener('submit',function(event){ 3 | event.preventDefault() 4 | const formData = new FormData(form) 5 | const username = formData.get('username') 6 | const email=formData.get('email') 7 | const password = formData.get('password') 8 | const phone = formData.get('phone') 9 | const user = { 10 | username, 11 | password, 12 | phone, 13 | email, 14 | } 15 | fetch('/api/consumer', { 16 | method: 'POST', 17 | body: JSON.stringify(user), 18 | headers: { 19 | 'content-type': 'application/json' 20 | } 21 | }).then(response => response.json()) 22 | .then(createdUser => { 23 | console.log(createdUser) 24 | window.location.href = "/login.html" 25 | }) 26 | }) -------------------------------------------------------------------------------- /client/javascript/upload-product.js: -------------------------------------------------------------------------------- 1 | const form= document.getElementById('upload-product') 2 | form.addEventListener('submit',function(event){ 3 | event.preventDefault() 4 | const formData = new FormData(form) 5 | const name = formData.get('name') 6 | const description=formData.get('description') 7 | const sellername=formData.get('sellername') 8 | const price = formData.get('price') 9 | const image = formData.get('image') 10 | const user = { 11 | name, 12 | description, 13 | sellername, 14 | price, 15 | image 16 | } 17 | fetch('/api/seller/upload', { 18 | method: 'POST', 19 | body: JSON.stringify(user), 20 | headers: { 21 | 'content-type': 'application/json' 22 | } 23 | }).then(response => response.json()) 24 | .then(createdUser => { 25 | console.log(createdUser) 26 | window.location.href = "http://localhost:3000" 27 | }) 28 | }) -------------------------------------------------------------------------------- /server/controllers/seller_controller.js: -------------------------------------------------------------------------------- 1 | const asyncHandler = require('express-async-handler'); 2 | const Seller = require('../models/sellerModel'); 3 | 4 | // Create a new seller 5 | const createSeller = asyncHandler(async (req, res) => { 6 | const { username, email, password,} = req.body; 7 | 8 | const seller = new Seller({ 9 | username, 10 | email, 11 | password, 12 | }); 13 | 14 | const createdSeller = await seller.save(); 15 | 16 | res.status(201).json(createdSeller); 17 | }); 18 | const authseller = asyncHandler(async (req, res) => { 19 | const { email, password } = req.body; 20 | const seller = await Seller.findOne({ email }); 21 | if (seller && (await seller.matchPassword(password))) { 22 | res.json({ 23 | _id: seller._id, 24 | username: seller.username, 25 | email: seller.email, 26 | }); 27 | } else { 28 | res.status(401); 29 | throw new Error('Invalid email or password'); 30 | } 31 | }); 32 | 33 | module.exports = { createSeller,authseller }; 34 | exports.createSeller=createSeller 35 | exports.authseller=authseller -------------------------------------------------------------------------------- /server/models/sellerModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | const bcrypt = require('bcryptjs'); 3 | const sellerSchema = new mongoose.Schema({ 4 | username: { 5 | type: String, 6 | required: true 7 | }, 8 | email: { 9 | type: String, 10 | required: true, 11 | unique: true 12 | }, 13 | password: { 14 | type: String, 15 | required: true 16 | }, 17 | }); 18 | 19 | // Hash seller password before saving 20 | sellerSchema.pre('save', async function(next) { 21 | try { 22 | const salt = await bcrypt.genSalt(10); 23 | const hashedPassword = await bcrypt.hash(this.password, salt); 24 | this.password = hashedPassword; 25 | next(); 26 | } catch (error) { 27 | next(error); 28 | } 29 | }); 30 | 31 | // Compare password for login 32 | sellerSchema.methods.matchPassword = async function(password) { 33 | try { 34 | return await bcrypt.compare(password, this.password); 35 | } catch (error) { 36 | throw error; 37 | } 38 | }; 39 | 40 | module.exports = mongoose.model('Seller', sellerSchema); 41 | -------------------------------------------------------------------------------- /server/models/orderModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | 3 | const orderSchema = new mongoose.Schema({ 4 | username: { 5 | type: String, 6 | required: true, 7 | ref:'User' 8 | }, 9 | orderItems: [ 10 | { 11 | name: { type: String, required: true }, 12 | quantity: { type: Number, required: true }, 13 | image: { type: String, required: true }, 14 | price: { type: Number, required: true }, 15 | product: { 16 | type: String, 17 | ref: 'Product' 18 | } 19 | } 20 | ], 21 | shippingAddress: { 22 | address: { type: String, required: true }, 23 | city: { type: String, required: true }, 24 | postalCode: { type: String, required: true }, 25 | country: { type: String, required: true } 26 | }, 27 | totalPrice: { 28 | type: Number, 29 | required: true, 30 | default: 0.0 31 | }, 32 | isDelivered: { 33 | type: Boolean, 34 | required: true, 35 | default: false 36 | }, 37 | deliveredAt: { 38 | type: Date 39 | } 40 | }, { 41 | timestamps: true 42 | }); 43 | 44 | const Order = mongoose.model('Order', orderSchema); 45 | 46 | module.exports = Order; -------------------------------------------------------------------------------- /server/controllers/product_controller.js: -------------------------------------------------------------------------------- 1 | const asyncHandler = require('express-async-handler'); 2 | const Product = require('../models/productModel'); 3 | 4 | // Controller function to get all products 5 | const getProducts = asyncHandler(async (req, res) => { 6 | const products = await Product.find({}); 7 | res.json(products); 8 | }); 9 | 10 | // Controller function to get a single product by ID 11 | const getProductById = asyncHandler(async (req, res) => { 12 | const{name}=req.body 13 | const product = await Product.find({name}); 14 | 15 | if (product) { 16 | res.json(product); 17 | } else { 18 | res.status(404); 19 | throw new Error('Product not found'); 20 | } 21 | }); 22 | 23 | // Controller function to create a new product 24 | const createProduct = asyncHandler(async (req, res) => { 25 | const { name, description, price, image,sellername } = req.body; 26 | 27 | const product = new Product({ 28 | name, 29 | description, 30 | price, 31 | image, 32 | sellername 33 | }); 34 | 35 | const createdProduct = await product.save(); 36 | res.status(201).json(createdProduct); 37 | }); 38 | 39 | module.exports = { getProducts, getProductById, createProduct }; 40 | 41 | -------------------------------------------------------------------------------- /server/controllers/order_controller.js: -------------------------------------------------------------------------------- 1 | const asyncHandler = require('express-async-handler'); 2 | const User=require('../models/consumerModel') 3 | const Product=require('../models/productModel') 4 | const Order = require('../models/orderModel'); 5 | 6 | // @desc Create new order 7 | // @route POST /api/orders 8 | // @access Private 9 | const addOrderItems = asyncHandler(async (req, res) => { 10 | const { 11 | username, 12 | orderItems, 13 | shippingAddress, 14 | totalPrice, 15 | } = req.body; 16 | const usertrue= User.findOne({username}) 17 | if(!usertrue){ 18 | res.status(400); 19 | throw new Error("User not found") 20 | } 21 | else 22 | { 23 | if (orderItems && orderItems.length === 0) { 24 | res.status(400); 25 | throw new Error('No order items'); 26 | return; 27 | } else { 28 | const order = new Order({ 29 | username, 30 | orderItems, 31 | shippingAddress, 32 | totalPrice, 33 | }); 34 | 35 | const createdOrder = await order.save(); 36 | 37 | res.status(201).json(createdOrder); 38 | } 39 | } 40 | 41 | }); 42 | 43 | module.exports = { 44 | addOrderItems, 45 | }; -------------------------------------------------------------------------------- /server/models/consumerModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose') 2 | const bcrypt= require('bcryptjs') 3 | const consumerschema = mongoose.Schema({ 4 | username:{ 5 | type:String, 6 | required:true 7 | }, 8 | email:{ 9 | type:String, 10 | required: true, 11 | unique:true, 12 | }, 13 | phone:{ 14 | type:Number, 15 | required:true, 16 | unique:true, 17 | }, 18 | password:{ 19 | type:String, 20 | required:true, 21 | }, 22 | profile:{ 23 | type:String, 24 | required:true, 25 | default: "https://icon-library.com/images/anonymous-avatar-icon/anonymous-avatar-icon-25.jpg", 26 | }, 27 | }, 28 | { 29 | timestamps:true 30 | }) 31 | consumerschema.methods.matchpassword= async function (enteredPassword){ 32 | return await bcrypt.compare(enteredPassword, this.password) 33 | console.log(this.password) 34 | console.log(this.email) 35 | console.log(this.username) 36 | 37 | } 38 | consumerschema.pre('save',async function (next){ 39 | if(!this.isModified){ 40 | next() 41 | } 42 | console.log(this.password) 43 | const salt= await bcrypt.genSalt(10) 44 | this.password= await bcrypt.hash(this.password,salt) 45 | const password=this.password 46 | console.log(this.password) 47 | console.log(this.email) 48 | console.log(this.username) 49 | }) 50 | const User = mongoose.model("User",consumerschema) 51 | module.exports = User -------------------------------------------------------------------------------- /server/controllers/cart_controllers.js: -------------------------------------------------------------------------------- 1 | const asyncHandler = require('express-async-handler'); 2 | const User = require('../models/consumerModel'); 3 | const Cart = require('../models/cartModel'); 4 | const Product = require('../models/productModel'); 5 | 6 | const addToCart = asyncHandler(async(req, res) => { 7 | const { username, productName, quantity, price } = req.body; 8 | const user = await User.findOne({ username }); 9 | if (!user) { 10 | res.status(404); 11 | throw new Error('User not found'); 12 | } 13 | 14 | const product = await Product.findOne({ name: productName }); 15 | if (!product) { 16 | res.status(404); 17 | throw new Error('Product not found'); 18 | } 19 | 20 | const cart = await Cart.findOne({ username }); 21 | if (!cart) { 22 | const newCart = new Cart({ 23 | username, 24 | items: [{ 25 | productName: product.name, 26 | quantity, 27 | price: product.price 28 | }] 29 | }); 30 | await newCart.save(); 31 | res.status(200).json({ message: 'Cart created' }); 32 | } else { 33 | const cartItem = cart.items.find(item => item.productName === product.name); 34 | if (cartItem) { 35 | cartItem.quantity += quantity; 36 | cartItem.price += quantity * product.price; 37 | } else { 38 | cart.items.push({ 39 | productName: product.name, 40 | quantity, 41 | price: product.price 42 | }); 43 | } 44 | await cart.save(); 45 | res.status(200).json({ message: 'Cart updated' }); 46 | } 47 | }); 48 | 49 | module.exports = { addToCart }; 50 | -------------------------------------------------------------------------------- /client/reset-password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reset Password 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Reset your passsword


21 | 22 |
23 | 24 |
25 |
26 | 27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /client/javascript/profile.js: -------------------------------------------------------------------------------- 1 | //userdata 2 | 3 | // let user = JSON.parse(localStorage.getItem('user')); 4 | 5 | document.getElementById('name').innerHTML = `

${user.username}

`; 6 | 7 | //navboxes 8 | 9 | let navBoxes = document.getElementsByClassName('navboxes'); 10 | let orders = document.getElementById('myOrders'); 11 | let edit = document.getElementById('editProducts'); 12 | let editbtn = document.getElementById('edit'); 13 | 14 | 15 | function myOrdersShow() { 16 | navBoxes[0].classList.add('navcolor'); 17 | navBoxes[1].classList.remove('navcolor'); 18 | orders.classList.add('show'); 19 | edit.classList.remove('show'); 20 | } 21 | 22 | function editShow() { 23 | navBoxes[1].classList.add('navcolor'); 24 | navBoxes[0].classList.remove('navcolor'); 25 | orders.classList.remove('show'); 26 | edit.classList.add('show'); 27 | } 28 | 29 | navBoxes[0].addEventListener('click',myOrdersShow); 30 | navBoxes[1].addEventListener('click',editShow); 31 | editbtn.addEventListener('click',editShow); 32 | 33 | //edit profile 34 | 35 | const nameEdit = document.getElementById('name-edit'); 36 | const phoneEdit = document.getElementById('phone-edit'); 37 | const emailEdit = document.getElementById('email-edit'); 38 | 39 | nameEdit.value = `${user.username}`; 40 | phoneEdit.value = `${user.phone}`; 41 | emailEdit.value = `${user.email}`; 42 | 43 | 44 | const saveBtn = document.getElementById('save'); 45 | 46 | function saveChanges(event){ 47 | event.preventDefault(); 48 | user.username = nameEdit.value; 49 | const userUpdated = JSON.stringify(user); 50 | localStorage.setItem('user',userUpdated); 51 | } 52 | 53 | saveBtn.addEventListener('click',saveChanges); 54 | 55 | //location 56 | 57 | let upCity = localStorage.getItem('city'); 58 | 59 | document.getElementById('up-city').innerHTML = `${upCity}`; -------------------------------------------------------------------------------- /client/styles/reset-password.css: -------------------------------------------------------------------------------- 1 | #reset 2 | { 3 | margin-top: 130px; 4 | text-align: center; 5 | } 6 | 7 | #reset-heading 8 | { 9 | margin-right: 121px; 10 | font-family: 'Lato', sans-serif; 11 | font-weight: 550; 12 | font-size: 23px; 13 | color: black; 14 | margin-bottom: -5px; 15 | } 16 | 17 | 18 | 19 | #email-label 20 | { 21 | margin-top: -30px; 22 | line-height: 48px; 23 | font-family: sans-serif; 24 | font-weight: 300; 25 | margin-right: 300px; 26 | color: #585C65; 27 | } 28 | 29 | 30 | input[type="password"] , input[type="email"] 31 | { 32 | border: 1.5px solid #BEBFC0; 33 | border-radius: 5px; 34 | color: #585C65; 35 | margin-top: -10px; 36 | height: 44px; 37 | width: 350px; 38 | padding: 0.7rem; 39 | } 40 | 41 | input:hover { 42 | outline:none; 43 | border-color:#9ecaed; 44 | box-shadow: 0px 0px 7px #9ecaed; 45 | } 46 | 47 | input:focus { 48 | outline:none; 49 | border-color:#9ecaed; 50 | box-shadow: 0px 0px 7px #9ecaed; 51 | } 52 | 53 | 54 | #submit-link 55 | { 56 | margin-top: 24px; 57 | height: 44px; 58 | width: 350px; 59 | background-color: #ED6E3F; 60 | border: 1.5px solid #BEBFC0; 61 | border-radius: 5px; 62 | color: white; 63 | transition: 0.3s ease-out; 64 | } 65 | 66 | #submit-link:hover 67 | { 68 | background-color: #A43D19; 69 | } 70 | 71 | 72 | #submit-login 73 | { 74 | margin-top: 24px; 75 | height: 44px; 76 | width: 350px; 77 | background-color: white; 78 | border: 1.5px solid #BEBFC0; 79 | border-radius: 5px; 80 | color: #585C65; 81 | transition: 0.3s ease-out; 82 | } 83 | 84 | #submit-login:hover 85 | { 86 | border-color: #ED6E3F; 87 | color: #ED6E3F; 88 | } 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /server/controllers/con_controller.js: -------------------------------------------------------------------------------- 1 | const { request } = require("express") 2 | const asyncHandler = require('express-async-handler'); 3 | const User=require("../models/consumerModel"); 4 | const generateToken=require("../config/generateToken"); 5 | const registerUser=asyncHandler( async (req,res)=>{ 6 | const{username,email,password,phone}= req.body 7 | if (!username||!email||!password||!phone) { 8 | res.status(400); 9 | console.log(Error) 10 | throw new Error("Please provide proper Field") 11 | } 12 | const userExists= await User.findOne({email}); 13 | if (userExists) { 14 | res.status(400) 15 | throw new Error("User already Exists"); 16 | 17 | } 18 | const user = User.create( 19 | { 20 | username, 21 | email, 22 | password, 23 | phone, 24 | } 25 | ) 26 | if(user){ 27 | res.status(201).json({ 28 | _id:user._id, 29 | username:user.username, 30 | password:user.password, 31 | token:generateToken(user._id) 32 | }) 33 | }else{ 34 | res.status(400) 35 | throw new Error("Failed to register") 36 | } 37 | console.log(username,password,email,phone,) 38 | }) 39 | const authUser=asyncHandler(async(req,res)=>{ 40 | const{email,password}=req.body; 41 | const user= await User.findOne({email}) 42 | if(user && (await user.matchpassword(password))){ 43 | res.json({ 44 | _id:user._id, 45 | username:user.username, 46 | email:user.email, 47 | phone:user.phone, 48 | //token:generateToken(user._id) 49 | }) 50 | console.log("login Confirmed") 51 | } 52 | else 53 | { 54 | console.log(Error) 55 | throw new Error("Uername or Password is incorrect") 56 | } 57 | }) 58 | module.exports = {registerUser,authUser} 59 | exports.registerUser = registerUser 60 | exports.authUser=authUser -------------------------------------------------------------------------------- /client/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Log in

21 | 22 |
23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 32 | 33 | 36 | 37 | 38 | 39 | 40 |
41 | 42 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /client/include/footer.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/javascript/cart.js: -------------------------------------------------------------------------------- 1 | // count 2 | 3 | // const { json } = require("body-parser"); 4 | // const axios= require('axios'); 5 | const incre = document.getElementsByClassName('incre'); 6 | const decre = document.getElementsByClassName('decre'); 7 | 8 | for(let i = 0; i < incre.length; i++){ 9 | let btn = incre[i]; 10 | btn.addEventListener('click',function(event){ 11 | let btnClick = event.target; 12 | let counter = btnClick.parentElement.parentElement.children[1]; 13 | counter.innerHTML = parseInt(counter.innerHTML) + 1; 14 | 15 | // total cost 16 | 17 | const individualCost = document.querySelectorAll('.total span'); 18 | const count = document.querySelectorAll('.quantity span'); 19 | 20 | const totalCost = document.querySelector('#cost'); 21 | const subtotal = document.querySelector('#subcost'); 22 | let total = 0; 23 | 24 | for(let i = 0; i < individualCost.length; i++){ 25 | total += individualCost[i].innerHTML * count[i].innerHTML; 26 | totalCost.innerHTML = total; 27 | subtotal.innerHTML = total; 28 | } 29 | }); 30 | let btn2 = decre[i]; 31 | btn2.addEventListener('click',function(event){ 32 | let btnClick = event.target; 33 | let counter = btnClick.parentElement.parentElement.children[1]; 34 | if(counter.innerHTML > 0) 35 | counter.innerHTML = parseInt(counter.innerHTML) - 1; 36 | 37 | // total cost 38 | 39 | const individualCost = document.querySelectorAll('.total span'); 40 | const count = document.querySelectorAll('.quantity span'); 41 | 42 | const totalCost = document.querySelector('#cost'); 43 | const subtotal = document.querySelector('#subcost') 44 | let total = 0; 45 | 46 | for(let i = 0; i < individualCost.length; i++){ 47 | total += individualCost[i].innerHTML * count[i].innerHTML; 48 | totalCost.innerHTML = total; 49 | subtotal.innerHTML = total; 50 | } 51 | }); 52 | } 53 | 54 | // total cost 55 | 56 | const individualCost = document.querySelectorAll('.total span'); 57 | const count = document.querySelectorAll('.quantity span'); 58 | 59 | const totalCost = document.querySelector('#cost'); 60 | const subtotal = document.querySelector('#subcost') 61 | let total = 0; 62 | 63 | for(let i = 0; i < individualCost.length; i++){ 64 | total += individualCost[i].innerHTML * count[i].innerHTML; 65 | totalCost.innerHTML = total; 66 | subtotal.innerHTML = total; 67 | } 68 | -------------------------------------------------------------------------------- /client/styles/login-seller.css: -------------------------------------------------------------------------------- 1 | #login 2 | { 3 | margin-top: 100px; 4 | text-align: center; 5 | } 6 | 7 | #login-heading 8 | { 9 | margin-right: 288px; 10 | font-family: 'Lato', sans-serif; 11 | font-weight: 550; 12 | font-size: 23px; 13 | color: black; 14 | } 15 | 16 | #google 17 | { 18 | margin-top: -10px; 19 | border: 1.5px solid #BEBFC0; 20 | border-radius: 5px; 21 | height: 44px; 22 | width: 350px; 23 | background-color: white; 24 | transition: 0.1s ease-out; 25 | } 26 | 27 | #google:hover 28 | { 29 | background-color: #F6F7F8; 30 | } 31 | 32 | 33 | .line 34 | { 35 | margin-top: 27px; 36 | display: inline-block; 37 | width: 131px; 38 | margin-bottom: -10px; 39 | } 40 | #or 41 | { 42 | display: inline-block; 43 | margin-top: 14px; 44 | margin-left: 30px; 45 | margin-right: 30px; 46 | vertical-align: top; 47 | color: #585C65; 48 | } 49 | 50 | #email-label 51 | { 52 | line-height: 48px; 53 | font-family: sans-serif; 54 | font-weight: 300; 55 | margin-right: 300px; 56 | color: #585C65; 57 | } 58 | 59 | #password-label 60 | { 61 | line-height: 48px; 62 | font-family: sans-serif; 63 | font-weight: 300; 64 | margin-right: 270px; 65 | color: #585C65; 66 | } 67 | 68 | 69 | input[type="password"] , input[type="email"] 70 | { 71 | border: 1.5px solid #BEBFC0; 72 | border-radius: 5px; 73 | color: #585C65; 74 | margin-top: -10px; 75 | height: 44px; 76 | width: 350px; 77 | padding: 0.7rem; 78 | } 79 | 80 | input:hover { 81 | outline:none; 82 | border-color:#9ecaed; 83 | box-shadow: 0px 0px 7px #9ecaed; 84 | } 85 | 86 | input:focus { 87 | outline:none; 88 | border-color:#9ecaed; 89 | box-shadow: 0px 0px 7px #9ecaed; 90 | } 91 | 92 | 93 | #forgot-password 94 | { 95 | margin-top: 10px; 96 | } 97 | 98 | #forgot-password a 99 | { 100 | margin-right: 182px; 101 | text-decoration: none; 102 | color: #ED6E3F; 103 | } 104 | 105 | #forgot-password a:hover 106 | { 107 | text-decoration: underline; 108 | } 109 | 110 | #submit 111 | { 112 | margin-top: 24px; 113 | height: 44px; 114 | width: 350px; 115 | background-color: #ED6E3F; 116 | border: 1.5px solid #BEBFC0; 117 | border-radius: 5px; 118 | color: white; 119 | transition: 0.3s ease-out; 120 | } 121 | 122 | #submit:hover 123 | { 124 | background-color: #A43D19; 125 | } 126 | 127 | #signup-link 128 | { 129 | 130 | margin-top: 20px; 131 | margin-right: 113px; 132 | color: #585C65; 133 | } 134 | 135 | #signup-link a 136 | { 137 | text-decoration: none; 138 | color: #ED6E3F; 139 | } 140 | 141 | #signup-link a:hover 142 | { 143 | text-decoration: underline; 144 | color: #ED6E3F; 145 | } -------------------------------------------------------------------------------- /client/signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Signup 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

20 |

Create your account


21 | 22 | 23 |
24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 |
38 | 39 | 40 | 41 |
42 | 43 | 46 | 47 |
48 | By creating your account, you agree to the
49 |
50 | 51 | Terms of Service 52 | and 53 | Privacy Policy. 54 | 55 |
56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /client/signup-seller.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Signup-seller 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 | 25 |

Create your account

26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 |
38 |
39 | 40 | 41 | 42 |
43 | 44 | 45 | 46 | 47 | 50 | 51 |
52 | By creating your account, you agree to the
53 |
54 | 55 | Terms of Service 56 | and 57 | Privacy Policy. 58 | 59 |
60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /client/styles/login.css: -------------------------------------------------------------------------------- 1 | #login 2 | { 3 | margin-top: 100px; 4 | text-align: center; 5 | } 6 | 7 | #login-heading 8 | { 9 | margin-right: 288px; 10 | font-family: 'Lato', sans-serif; 11 | font-weight: 550; 12 | font-size: 23px; 13 | color: black; 14 | } 15 | 16 | #google 17 | { 18 | margin-top: -10px; 19 | border: 1.5px solid #BEBFC0; 20 | border-radius: 5px; 21 | height: 44px; 22 | width: 350px; 23 | background-color: white; 24 | transition: 0.1s ease-out; 25 | } 26 | 27 | #google:hover 28 | { 29 | background-color: #F6F7F8; 30 | } 31 | 32 | 33 | .line 34 | { 35 | margin-top: 27px; 36 | display: inline-block; 37 | width: 131px; 38 | margin-bottom: -10px; 39 | } 40 | #or 41 | { 42 | display: inline-block; 43 | margin-top: 14px; 44 | margin-left: 30px; 45 | margin-right: 30px; 46 | vertical-align: top; 47 | color: #585C65; 48 | } 49 | 50 | #email-label 51 | { 52 | line-height: 48px; 53 | font-family: sans-serif; 54 | font-weight: 300; 55 | margin-right: 300px; 56 | color: #585C65; 57 | } 58 | 59 | #password-label 60 | { 61 | line-height: 48px; 62 | font-family: sans-serif; 63 | font-weight: 300; 64 | margin-right: 270px; 65 | color: #585C65; 66 | } 67 | 68 | 69 | input[type="password"] , input[type="email"] 70 | { 71 | border: 1.5px solid #BEBFC0; 72 | border-radius: 5px; 73 | color: #585C65; 74 | margin-top: -10px; 75 | height: 44px; 76 | width: 350px; 77 | padding: 0.7rem; 78 | } 79 | 80 | input:hover { 81 | outline:none; 82 | border-color:#9ecaed; 83 | box-shadow: 0px 0px 7px #9ecaed; 84 | } 85 | 86 | input:focus { 87 | outline:none; 88 | border-color:#9ecaed; 89 | box-shadow: 0px 0px 7px #9ecaed; 90 | } 91 | 92 | 93 | #forgot-password 94 | { 95 | margin-top: 10px; 96 | } 97 | 98 | #forgot-password a 99 | { 100 | margin-right: 182px; 101 | text-decoration: none; 102 | color: #ED6E3F; 103 | } 104 | 105 | #forgot-password a:hover 106 | { 107 | text-decoration: underline; 108 | } 109 | 110 | #submit 111 | { 112 | margin-top: 24px; 113 | height: 44px; 114 | width: 350px; 115 | background-color: #ED6E3F; 116 | border: 1.5px solid #BEBFC0; 117 | border-radius: 5px; 118 | color: white; 119 | transition: 0.3s ease-out; 120 | } 121 | 122 | #submit:hover 123 | { 124 | background-color: #A43D19; 125 | } 126 | 127 | #signup-link 128 | { 129 | 130 | margin-top: 20px; 131 | margin-right: 113px; 132 | color: #585C65; 133 | } 134 | 135 | #signup-link a 136 | { 137 | text-decoration: none; 138 | color: #ED6E3F; 139 | } 140 | 141 | #signup-link a:hover 142 | { 143 | text-decoration: underline; 144 | color: #ED6E3F; 145 | } 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /client/login-seller.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

Log in


21 | 22 | 23 |
27 | 28 |
or

29 | 30 |
31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 40 | 41 | 44 | 45 | 46 | 47 | 48 |
49 | 50 | 53 | 54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const http = require('http'); 3 | const express = require('express'); 4 | const dotenv= require('dotenv') 5 | const connectDb= require('./config/Database') 6 | const colors= require('colors') 7 | const userRoutes= require('./routes/userRoutes') 8 | const parse= require('body-parser') 9 | const { notfound, errorhandler } = require('./middlewares/errorHandler'); 10 | const {authUser} = require('./controllers/con_controller') 11 | const{ getProducts}=require('./controllers/product_controller') 12 | const seller= require('./routes/sellerRoutes') 13 | const Product = require('./models/productModel'); 14 | const Cart = require('./models/cartModel'); 15 | dotenv.config() 16 | connectDb() 17 | const app = express(); 18 | app.use(parse.json()) 19 | app.use(express.json()); 20 | const PORT = 5000 || process.env.PORT; 21 | const server = http.createServer(app); 22 | app.set('view engine','ejs'); 23 | app.set('views',path.join(__dirname,'../client')); 24 | 25 | // Set static folder 26 | app.use(express.static(path.join(__dirname, '../client'))); 27 | 28 | // Route for the pages 29 | app.get('/', (req, res) => { 30 | Product.find({}, function(err, products){ 31 | if(err){ 32 | console.log('error!'); 33 | return; 34 | } 35 | res.render(path.join(__dirname, '../client', 'index.ejs'),{ 36 | products : products 37 | }); 38 | }); 39 | }); 40 | const username = 'onkit mondol' 41 | app.get('/cart', (req, res) => { 42 | Cart.findOne({username}, function(err, cart){ 43 | if(err){ 44 | console.log('error!'); 45 | return; 46 | } 47 | res.render(path.join(__dirname, '../client', 'cart.ejs'),{ 48 | cart : cart 49 | }); 50 | }); 51 | }); 52 | app.get('/profile', (req, res) => { 53 | res.render(path.join(__dirname, '../client', 'profile.ejs')); 54 | }); 55 | app.get('/profile-seller', (req, res) => { 56 | res.render(path.join(__dirname, '../client', 'profile-seller.ejs')); 57 | }); 58 | app.get('/order-confirmation', (req, res) => { 59 | res.render(path.join(__dirname, '../client', 'order-confirmation.ejs')); 60 | }); 61 | app.get('/checkout', (req, res) => { 62 | res.render(path.join(__dirname, '../client', 'checkout.ejs')); 63 | }); 64 | app.get('/upload-product', (req, res) => { 65 | res.render(path.join(__dirname, '../client', 'product-file.ejs')); 66 | }); 67 | //Register user 68 | app.use('/api/consumer',userRoutes) 69 | //add to cart 70 | app.use('/api',seller) 71 | app.use('/',getProducts) 72 | app.get('/',getProducts) 73 | //middlewares for error Handling 74 | app.use(notfound) 75 | app.use(errorhandler) 76 | // Start the server 77 | server.listen(PORT, () => { 78 | console.log(`Server is running on port ${PORT}`.green.bold); 79 | }); -------------------------------------------------------------------------------- /client/styles/signup-seller.css: -------------------------------------------------------------------------------- 1 | #signup 2 | { 3 | height: auto; 4 | text-align: center; 5 | background-color: white; 6 | } 7 | 8 | #signup-heading 9 | { 10 | margin: auto; 11 | font-family: 'Lato', sans-serif; 12 | font-weight: 1000; 13 | font-size: 23px; 14 | color: black; 15 | } 16 | 17 | #username-label 18 | { 19 | /* bottom: 2rem;*/ 20 | left: -9.4rem; 21 | } 22 | 23 | #adhar-label 24 | { 25 | /* bottom: 2rem;*/ 26 | left: -9rem; 27 | } 28 | 29 | #phn-label 30 | { 31 | /* bottom: 2rem;*/ 32 | left: -8.5rem; 33 | } 34 | 35 | #email-label 36 | { 37 | /* bottom: 2rem;*/ 38 | left: -9.4rem; 39 | } 40 | 41 | #password-label 42 | { 43 | /* bottom: 2rem;*/ 44 | left: -8.5rem; 45 | } 46 | 47 | 48 | label 49 | { 50 | line-height: 48px; 51 | font-family: sans-serif; 52 | font-weight: 300; 53 | color: #585C65; 54 | position: relative; 55 | } 56 | 57 | .input{ 58 | position: relative; 59 | } 60 | 61 | #inputs{ 62 | display: flex; 63 | flex-wrap: wrap; 64 | width: 55%; 65 | margin: auto; 66 | justify-content: center; 67 | align-items: center; 68 | gap: 1.5rem; 69 | margin-top: 0.5rem; 70 | } 71 | 72 | .pass{ 73 | position: relative; 74 | right: 11.75rem; 75 | } 76 | 77 | input[type="text"], input[type="password"], input[type="number"], input[type="email"] 78 | { 79 | border: 1.5px solid #BEBFC0; 80 | border-radius: 5px; 81 | color: #585C65; 82 | margin-top: -10px; 83 | height: 44px; 84 | width: 350px; 85 | } 86 | 87 | 88 | input:hover { 89 | outline:none; 90 | border-color:#9ecaed; 91 | box-shadow: 0px 0px 7px #9ecaed; 92 | } 93 | 94 | input:focus { 95 | outline:none; 96 | border-color:#9ecaed; 97 | box-shadow: 0px 0px 7px #9ecaed; 98 | } 99 | 100 | #submit 101 | { 102 | margin-top: 28px; 103 | height: 44px; 104 | width: 350px; 105 | background-color: #ED6E3F; 106 | border: 1.5px solid #BEBFC0; 107 | border-radius: 5px; 108 | color: white; 109 | transition: 0.3s ease-out; 110 | } 111 | 112 | #submit:hover 113 | { 114 | background-color: #A43D19; 115 | } 116 | 117 | #login-link 118 | { 119 | 120 | margin-top: 20px; 121 | margin-right: 113px; 122 | color: #585C65; 123 | } 124 | 125 | #login-link a 126 | { 127 | text-decoration: none; 128 | color: #ED6E3F; 129 | 130 | } 131 | 132 | #login-link a:hover 133 | { 134 | text-decoration: underline; 135 | color: #ED6E3F; 136 | } 137 | 138 | #terms1 139 | { 140 | margin-top: 10px; 141 | position: relative; 142 | margin-right: 40px; 143 | color: #585C65; 144 | } 145 | 146 | 147 | #terms2 a 148 | { 149 | color: #ED6E3F; 150 | } 151 | 152 | #terms2 153 | { 154 | position: relative; 155 | margin-right: 88px; 156 | } 157 | 158 | #empty 159 | { 160 | width: 100%; 161 | height: 60px; 162 | background-color: white; 163 | } 164 | 165 | @media screen and (max-width: 980px){ 166 | .pass{ 167 | position: relative; 168 | right: 0; 169 | } 170 | 171 | #empty{ 172 | display: none; 173 | } 174 | } -------------------------------------------------------------------------------- /client/styles/signup.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | /* background-image: url(bg.png);*/ 4 | background-repeat: no-repeat; 5 | } 6 | 7 | 8 | #signup 9 | { 10 | /* margin-left: 100px;*/ 11 | /* margin-top: 70px;*/ 12 | text-align: center; 13 | } 14 | 15 | #signup-heading 16 | { 17 | /* margin-right: 148px;*/ 18 | font-family: 'Lato', sans-serif; 19 | font-weight: 1000; 20 | font-size: 23px; 21 | /* margin-bottom: -10px;*/ 22 | margin-right: 141px; 23 | color: black; 24 | } 25 | 26 | #google 27 | { 28 | margin-top: -10px; 29 | border: 1.5px solid #BEBFC0; 30 | border-radius: 5px; 31 | height: 44px; 32 | width: 350px; 33 | background-color: white; 34 | transition: 0.1s ease-out; 35 | } 36 | 37 | #google:hover 38 | { 39 | background-color: #F6F7F8; 40 | } 41 | 42 | .line 43 | { 44 | margin-top: 27px; 45 | display: inline-block; 46 | width: 131px; 47 | margin-bottom: -10px; 48 | } 49 | #or 50 | { 51 | display: inline-block; 52 | margin-top: 14px; 53 | margin-left: 30px; 54 | margin-right: 30px; 55 | vertical-align: top; 56 | color: #585C65; 57 | } 58 | 59 | #username-label 60 | { 61 | /* margin-top: 40px;*/ 62 | line-height: 48px; 63 | font-family: sans-serif; 64 | font-weight: 300; 65 | margin-right: 303px; 66 | color: #585C65; 67 | } 68 | 69 | #email-label 70 | { 71 | line-height: 48px; 72 | font-family: sans-serif; 73 | font-weight: 300; 74 | margin-right: 300px; 75 | color: #585C65; 76 | } 77 | 78 | #phone-label 79 | { 80 | line-height: 48px; 81 | font-family: sans-serif; 82 | font-weight: 300; 83 | margin-right: 300px; 84 | color: #585C65; 85 | } 86 | 87 | #password-label 88 | { 89 | line-height: 48px; 90 | font-family: sans-serif; 91 | font-weight: 300; 92 | margin-right: 270px; 93 | color: #585C65; 94 | } 95 | 96 | 97 | input[type="password"] , input[type="email"] , input[type="text"] , input[type="number"] 98 | { 99 | border: 1.5px solid #BEBFC0; 100 | border-radius: 5px; 101 | color: #585C65; 102 | margin-top: -10px; 103 | height: 44px; 104 | width: 350px; 105 | padding: 0.7rem; 106 | } 107 | 108 | input:hover { 109 | outline:none; 110 | border-color:#9ecaed; 111 | box-shadow: 0px 0px 7px #9ecaed; 112 | } 113 | 114 | input:focus { 115 | outline:none; 116 | border-color:#9ecaed; 117 | box-shadow: 0px 0px 7px #9ecaed; 118 | } 119 | 120 | 121 | 122 | #submit 123 | { 124 | margin-top: 28px; 125 | height: 44px; 126 | width: 350px; 127 | background-color: #ED6E3F; 128 | border: 1.5px solid #BEBFC0; 129 | border-radius: 5px; 130 | color: white; 131 | transition: 0.3s ease-out; 132 | } 133 | 134 | #submit:hover 135 | { 136 | background-color: #A43D19; 137 | } 138 | 139 | #login-link 140 | { 141 | 142 | margin-top: 20px; 143 | margin-right: 113px; 144 | color: #585C65; 145 | } 146 | 147 | #login-link a 148 | { 149 | text-decoration: none; 150 | color: #ED6E3F; 151 | 152 | } 153 | 154 | #login-link a:hover 155 | { 156 | text-decoration: underline; 157 | color: #ED6E3F; 158 | } 159 | 160 | #terms1 161 | { 162 | margin-top: 10px; 163 | position: relative; 164 | margin-right: 40px; 165 | color: #585C65; 166 | } 167 | 168 | 169 | #terms2 a 170 | { 171 | color: #ED6E3F; 172 | } 173 | 174 | #terms2 175 | { 176 | position: relative; 177 | margin-right: 88px; 178 | } -------------------------------------------------------------------------------- /client/upload-product.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Signup-seller 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 | 25 |

List Your Product

26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 |
38 |
39 |
40 |
41 | 42 | 44 | 45 |
46 |
47 | 48 | 49 |
50 | 51 | 52 | 53 | 54 | 66 |
67 | 68 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /client/javascript/navbar.js: -------------------------------------------------------------------------------- 1 | //navbar 2 | 3 | const navbar = document.getElementById('navbar'); 4 | 5 | function checkscroll() { 6 | if (window.pageYOffset != 0) { 7 | navbar.classList.add("nav-move"); 8 | } 9 | else { 10 | navbar.classList.remove("nav-move"); 11 | } 12 | } 13 | window.addEventListener('scroll', checkscroll); 14 | 15 | //profile 16 | 17 | let dropProfile1 = document.querySelectorAll('.profile i')[0]; 18 | let dropProfile2 = document.querySelectorAll('.profile i')[1]; 19 | let profile1 = document.getElementsByClassName('profile-card')[0]; 20 | let profile2 = document.getElementsByClassName('profile-card')[1]; 21 | 22 | dropProfile1.addEventListener('click', function () { 23 | if (profile1.style.display == 'none') 24 | profile1.style.display = 'flex'; 25 | else 26 | profile1.style.display = 'none'; 27 | }); 28 | 29 | dropProfile2.addEventListener('click', function () { 30 | if (profile2.style.display == 'none') 31 | profile2.style.display = 'flex'; 32 | else 33 | profile2.style.display = 'none'; 34 | }); 35 | 36 | //user Profile data showing in navbar 37 | 38 | const user = JSON.parse(localStorage.getItem('user')); 39 | 40 | // after log in 41 | 42 | if(localStorage.getItem('user')){ 43 | const profileCard = ` 44 |
45 |

${user.username}

46 |

${user.email}

47 |
48 | 49 | 50 |
51 | `; 52 | document.getElementsByClassName('profile-card')[0].innerHTML = profileCard; 53 | document.getElementsByClassName('profile-name')[0].innerHTML = `

${user.username}

`; 54 | document.getElementsByClassName('profile-card')[1].innerHTML = profileCard; 55 | document.getElementsByClassName('profile-name')[1].innerHTML = `

${user.username}

`; 56 | document.getElementsByClassName('login-signup-btn')[0].style.display = 'none'; 57 | document.getElementsByClassName('profile')[0].style.display = 'block'; 58 | document.getElementsByClassName('login-signup-btn')[1].style.display = 'none'; 59 | document.getElementsByClassName('profile')[1].style.display = 'block'; 60 | } 61 | 62 | //log out 63 | 64 | function logOut(){ 65 | localStorage.removeItem('user'); 66 | document.getElementsByClassName('profile-card')[0].innerHTML = ``; 67 | document.getElementsByClassName('profile-name')[0].innerHTML = ``; 68 | document.getElementsByClassName('profile')[0].style.display = 'none'; 69 | document.getElementsByClassName('login-signup-btn')[0].style.display = 'block'; 70 | document.getElementsByClassName('profile-card')[1].innerHTML = ``; 71 | document.getElementsByClassName('profile-name')[1].innerHTML = ``; 72 | document.getElementsByClassName('profile')[1].style.display = 'none'; 73 | document.getElementsByClassName('login-signup-btn')[1].style.display = 'block'; 74 | } 75 | 76 | //hamberger 77 | 78 | function showHam(){ 79 | if(document.getElementById('hamberger-body').style.display == 'none') 80 | document.getElementById('hamberger-body').style.display = 'flex'; 81 | else 82 | document.getElementById('hamberger-body').style.display = 'none'; 83 | } -------------------------------------------------------------------------------- /client/include/navbar.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/javascript/main.js: -------------------------------------------------------------------------------- 1 | // provide section color change effect 2 | 3 | const pcard = document.getElementsByClassName('provide-card'); 4 | const icons = document.getElementsByClassName('i'); 5 | const cartbutton = document.getElementById('cart-button'); 6 | // const axios= require('axios');10 7 | let products = [] 8 | let cartItems = [] 9 | 10 | function changecolor() { 11 | pcard[1].classList.add('cardcolor'); 12 | pcard[0].classList.remove('cardcolor'); 13 | for (let i = 0; i < 7; i++) { 14 | icons[i].classList.remove('logowhite'); 15 | } 16 | for (let i = 7; i < 14; i++) { 17 | icons[i].classList.add('logowhite'); 18 | } 19 | } 20 | 21 | function removecolor() { 22 | pcard[1].classList.remove('cardcolor'); 23 | pcard[0].classList.add('cardcolor'); 24 | for (let i = 0; i < 7; i++) { 25 | icons[i].classList.add('logowhite'); 26 | } 27 | for (let i = 7; i < 14; i++) { 28 | icons[i].classList.remove('logowhite'); 29 | } 30 | } 31 | 32 | pcard[1].addEventListener('mouseover', changecolor); 33 | pcard[1].addEventListener('mouseout', removecolor); 34 | 35 | // search location dropdown 36 | 37 | let arrow_box = document.getElementById('arrow-downBox'); 38 | 39 | let arrow_down = document.getElementById('drop-icon'); 40 | arrow_down.addEventListener('click', function (event) { 41 | event.stopPropagation(); 42 | event.preventDefault(); 43 | if (arrow_box.style.display == 'none') 44 | arrow_box.style.display = 'block'; 45 | else 46 | arrow_box.style.display = 'none'; 47 | }); 48 | 49 | //location detection 50 | 51 | const city = document.getElementById('city'); 52 | 53 | const successfulLookup = (position) => { 54 | const { latitude, longitude } = position.coords; 55 | fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=6fb98deaf8b54d719c0330a5a44a6ac3`) 56 | .then(response => response.json()) 57 | .then(data => { 58 | localStorage.setItem('city', (data.results[0].components.city)); 59 | const cityName = localStorage.getItem('city'); 60 | city.innerHTML = `${cityName}`; 61 | }); 62 | } 63 | 64 | arrow_box.addEventListener('click', function () { 65 | navigator.geolocation.getCurrentPosition(successfulLookup, console.log); 66 | }); 67 | 68 | if (localStorage.getItem('city') != null) { 69 | const cityName = localStorage.getItem('city'); 70 | city.innerHTML = `${cityName}`; 71 | } 72 | 73 | let cart = document.getElementById('cart'); 74 | //CART FUNCTIONS 75 | function getcart(name, price, url, con, btncart) { 76 | const item = { 77 | name: name, 78 | price: price, 79 | url: url, 80 | } 81 | cartItems.push(item); 82 | let storage = JSON.parse(localStorage.getItem("cart")) 83 | if (storage == null) { 84 | products.push(item) 85 | localStorage.setItem("cart", JSON.stringify(products)) 86 | } 87 | else { 88 | products = JSON.parse(localStorage.getItem("cart")) 89 | 90 | } 91 | } 92 | 93 | function addToCart(productName) { 94 | const username = JSON.parse(localStorage.getItem('user')).username; 95 | console.log("Test Cart") 96 | // Get the data from the form or any other source 97 | const data = { 98 | username: username, 99 | productName: productName, 100 | quantity: 1, 101 | price: 100 102 | }; 103 | 104 | // Send the POST request using Axios 105 | fetch('/api/consumer/cart', { 106 | method: 'POST', 107 | body: JSON.stringify(data), 108 | headers: { 109 | 'Content-Type': 'application/json' 110 | } 111 | }) 112 | .then(response => response.json()) 113 | .then(data => { 114 | console.log(data.message); 115 | // Optionally update the UI to reflect the changes in the cart 116 | }) 117 | .catch(error => { 118 | console.error(error); 119 | // Optionally display an error message to the user 120 | }); 121 | 122 | } 123 | -------------------------------------------------------------------------------- /client/javascript/profile-seller.js: -------------------------------------------------------------------------------- 1 | let rating = document.querySelector('.ratings span'); 2 | rating = parseFloat(rating.innerHTML); 3 | 4 | let ratingPercentage = rating * 10; 5 | ratingPercentage += '%'; 6 | 7 | let stars = document.getElementsByClassName('stars-inner'); 8 | stars[0].style.width = ratingPercentage; 9 | 10 | //navboxes 11 | 12 | let navBoxes = document.getElementsByClassName('navboxes'); 13 | let products = document.getElementById('products'); 14 | let upload = document.getElementById('upload'); 15 | let edit = document.getElementById('editProducts'); 16 | let orders = document.getElementById('orders'); 17 | let editbtn = document.getElementById('edit'); 18 | 19 | 20 | function productsShow() { 21 | navBoxes[0].classList.add('navcolor'); 22 | navBoxes[1].classList.remove('navcolor'); 23 | navBoxes[2].classList.remove('navcolor'); 24 | navBoxes[3].classList.remove('navcolor'); 25 | products.classList.add('show'); 26 | upload.classList.remove('show'); 27 | edit.classList.remove('show'); 28 | orders.classList.remove('show'); 29 | } 30 | 31 | function uploadShow() { 32 | navBoxes[1].classList.add('navcolor'); 33 | navBoxes[0].classList.remove('navcolor'); 34 | navBoxes[2].classList.remove('navcolor'); 35 | navBoxes[3].classList.remove('navcolor'); 36 | products.classList.remove('show'); 37 | upload.classList.add('show'); 38 | edit.classList.remove('show'); 39 | orders.classList.remove('show'); 40 | } 41 | 42 | function editShow() { 43 | navBoxes[2].classList.add('navcolor'); 44 | navBoxes[1].classList.remove('navcolor'); 45 | navBoxes[0].classList.remove('navcolor'); 46 | navBoxes[3].classList.remove('navcolor'); 47 | products.classList.remove('show'); 48 | upload.classList.remove('show'); 49 | edit.classList.add('show'); 50 | orders.classList.remove('show'); 51 | } 52 | 53 | function orderShow() { 54 | navBoxes[2].classList.remove('navcolor'); 55 | navBoxes[1].classList.remove('navcolor'); 56 | navBoxes[0].classList.remove('navcolor'); 57 | navBoxes[3].classList.add('navcolor'); 58 | products.classList.remove('show'); 59 | upload.classList.remove('show'); 60 | edit.classList.remove('show'); 61 | orders.classList.add('show'); 62 | } 63 | 64 | navBoxes[0].addEventListener('click',productsShow); 65 | navBoxes[1].addEventListener('click',uploadShow); 66 | navBoxes[2].addEventListener('click',editShow); 67 | navBoxes[3].addEventListener('click',orderShow); 68 | editbtn.addEventListener('click',editShow); 69 | 70 | //userdata 71 | 72 | document.getElementById('name').innerHTML = `

${user.username}

`; 73 | 74 | //edit profile 75 | 76 | const nameEdit = document.getElementById('name-edit'); 77 | const phoneEdit = document.getElementById('phone-edit'); 78 | const emailEdit = document.getElementById('email-edit'); 79 | 80 | nameEdit.value = `${user.username}`; 81 | phoneEdit.value = `${user.phone}`; 82 | emailEdit.value = `${user.email}`; 83 | 84 | 85 | const saveBtn = document.getElementById('save'); 86 | 87 | function saveChanges(event){ 88 | event.preventDefault(); 89 | user.username = nameEdit.value; 90 | const userUpdated = JSON.stringify(user); 91 | localStorage.setItem('user',userUpdated); 92 | } 93 | 94 | saveBtn.addEventListener('click',saveChanges); 95 | 96 | //location detection 97 | 98 | const box = document.getElementById('arrow-downBox') 99 | 100 | const city = document.getElementById('city'); 101 | 102 | const successfulLookup = (position) => { 103 | const { latitude, longitude } = position.coords; 104 | fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=6fb98deaf8b54d719c0330a5a44a6ac3`) 105 | .then(response => response.json()) 106 | .then(data => { 107 | localStorage.setItem('city', (data.results[0].components.city)); 108 | const cityName = localStorage.getItem('city'); 109 | city.value = `${cityName}`; 110 | }); 111 | } 112 | 113 | box.addEventListener('click',function(){ 114 | navigator.geolocation.getCurrentPosition(successfulLookup, console.log); 115 | }); 116 | 117 | if(localStorage.getItem('city') != null){ 118 | const cityName = localStorage.getItem('city'); 119 | city.innerHTML = `${cityName}`; 120 | } -------------------------------------------------------------------------------- /client/cart.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Cart 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | <%- include('include/navbar') %> 19 |
20 | 21 | 22 |
23 |

Items in your cart:

24 |
25 |
26 | 27 | 28 |
29 | 30 | <% for(i of cart.items){ %> 31 |
32 | 33 |
34 |
35 | 36 |
37 | 38 | 39 |
40 | 41 |

<%=i.productName%>

42 |
Seller: Onkit
43 |
In Stock
44 |
45 | 46 |
47 |
48 | 49 |
50 |

Price

51 |
<%=i.price%>
52 |
53 | 54 |
55 |

Quantity

56 |
<%=i.quantity%>
57 |
58 | 59 |
60 |

Total

61 |
40 Rs.
62 |
63 | 64 |
65 | <% } %> 66 |
67 | 68 | 69 |
70 |
71 |
72 | 73 | 74 |
75 | 76 |
77 | 78 |
Sub-total:
0 Rs.
79 |
80 | 81 |
82 | 83 |
Delivery:
00.00 Rs.
84 | 85 |
86 | 87 |
88 | 89 |
Discount:
00.00 Rs.
90 | 91 |
92 | 93 |
94 | 95 |
96 | 97 |
98 | 99 |
Total:
0 Rs.
100 | 101 |
102 | 103 | 104 | 105 | 106 |
107 | 108 |
109 | 110 |
111 | 112 | <%- include('include/footer') %> 113 | 114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /client/profile.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Profile 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | <%- include('include/navbar') %> 17 | 18 |
19 | 34 | 35 | 39 | 40 |
41 |

MY ORDERS

42 |
43 | 44 |
45 |
46 |
47 |

Example Name

48 |

Qty: 1

49 |

40 Rs.

50 |
51 |
52 | 53 |
54 | 55 | 56 |
57 |
58 |
59 |

Example Name

60 |

Qty: 1

61 |

40 Rs.

62 |
63 |
64 | 65 |
66 | 67 |
68 |
69 |
70 |

Example Name

71 |

Qty: 1

72 |

40 Rs.

73 |
74 |
75 |
76 |
77 | 78 |
79 |
80 |

EDIT PROFILE

81 |
82 |
83 | 84 |
85 | 86 |
87 |
88 | 89 |
90 | 91 |
92 |
93 | 94 |
95 | 96 |
97 |
98 | 99 |
100 | 101 |
102 | 103 |
104 |
105 |
106 |
107 | 108 | <%- include('include/footer') %> 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /client/order-confirmation.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Order Confirmed 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 |

Thank You for your order.

20 |

You can browse each vendor's storefront to see their full range of products and learn more about their background and story.

21 |

Your order id is 123456789

22 |
23 | 24 |
25 |
26 |
27 |
28 |

Shipping

29 |

Sector V

30 |

Bidhanagar

31 |

Kolkata

32 |

No Rush Shipping: Rs. 50

33 |
34 | 35 |
36 |

Payment Method

37 |

Cash on Delivery

38 |
39 |
40 | 41 |
42 | 43 |
44 |
45 |

Made a mistake?

46 |

You have one hour from order

47 |

placement to cancel your order.

48 |

Simply click cancel Order.

49 |
50 | 51 |
52 | 53 |
54 |
55 |
56 | 57 |
58 |
59 | 60 | 116 |
117 |
118 | <%- include('include/footer') %> 119 | 120 | 121 | -------------------------------------------------------------------------------- /client/styles/checkout.css: -------------------------------------------------------------------------------- 1 | 2 | body 3 | { 4 | margin: 0; 5 | } 6 | 7 | #parent 8 | { 9 | margin: auto; 10 | height: auto; 11 | width: 70%; 12 | display: flex; 13 | flex-wrap: wrap; 14 | justify-content: space-around; 15 | border: 2px solid #E1E1E1; 16 | border-radius: 3px; 17 | background-color: #F5F5F5; 18 | align-items: flex-start; 19 | margin-bottom: 30px; 20 | 21 | } 22 | 23 | /*-----Payment-----*/ 24 | 25 | 26 | #left h3 27 | { 28 | font-family: sans-serif; 29 | } 30 | 31 | #left 32 | { 33 | margin-top: 20px; 34 | margin-bottom: 20px; 35 | /* width: 400px;*/ 36 | width: 40%; 37 | height: auto; 38 | /* border: 1px solid black;*/ 39 | } 40 | 41 | label 42 | { 43 | line-height: 44px; 44 | font-size: 15px; 45 | font-family: sans-serif; 46 | color: #696969; 47 | font-weight: 400; 48 | } 49 | 50 | input[type="text"] 51 | { 52 | font-size: 14px; 53 | margin-top: -10px; 54 | width: 98%; 55 | height: 30px; 56 | border: 1.5px solid #E1E1E1; 57 | border-radius: 3px; 58 | } 59 | input:hover { 60 | outline:none; 61 | border-color:#9ecaed; 62 | box-shadow: 0px 0px 5px #9ecaed; 63 | } 64 | 65 | input:focus { 66 | outline:none; 67 | border-color:#9ecaed; 68 | box-shadow: 0px 0px 7px #9ecaed; 69 | } 70 | 71 | 72 | #container 73 | { 74 | width: 100%; 75 | display: flex; 76 | } 77 | #state form select 78 | { 79 | margin-top: -7px; 80 | height: 35px; 81 | border: 1.5px solid #E1E1E1; 82 | border-radius: 3px; 83 | font-size: 14px; 84 | color: #696969; 85 | } 86 | 87 | #state form select:hover 88 | { 89 | outline:none; 90 | border-color:#9ecaed; 91 | box-shadow: 0px 0px 7px #9ecaed; 92 | } 93 | 94 | #state form select:focus 95 | { 96 | outline:none; 97 | border-color:#9ecaed; 98 | box-shadow: 0px 0px 7px #9ecaed; 99 | } 100 | #pin-code 101 | { 102 | width: 50%; 103 | margin-left: 30px; 104 | } 105 | #pincode-form 106 | { 107 | width: 96%; 108 | } 109 | 110 | #order 111 | { 112 | margin-top: 30px; 113 | height: 40px; 114 | width: 100%; 115 | font-size: 17px; 116 | background-color: #39b364; 117 | border: 1.5px solid #BEBFC0; 118 | border-radius: 5px; 119 | color: white; 120 | background-color: var(--primary-color); 121 | transition: 0.3s ease-in-out; 122 | cursor: pointer; 123 | } 124 | 125 | #order:hover 126 | { 127 | background-color: #377E49; 128 | } 129 | /*------cart summary-----*/ 130 | 131 | #right 132 | { 133 | margin-top: 96px; 134 | background-color: white; 135 | width: 400px; 136 | /* width: 40%;*/ 137 | height: auto; 138 | border: 1.5px solid #E1E1E1; 139 | border-radius: 4px; 140 | padding-bottom: 20px; 141 | margin-bottom: 15px; 142 | } 143 | 144 | #right h3 145 | { 146 | margin-left: 20px; 147 | font-family: sans-serif; 148 | } 149 | 150 | #right h3 a 151 | { 152 | /* margin-left: 3px;*/ 153 | text-decoration: none; 154 | font-size: 14px; 155 | font-weight: 400; 156 | } 157 | 158 | #right h3 span 159 | { 160 | font-size: 15px; 161 | font-weight: 400; 162 | } 163 | .product 164 | { 165 | margin: auto; 166 | width: 81%; 167 | } 168 | 169 | .product span, #total span 170 | { 171 | font-family: sans-serif; 172 | font-size: 15px; 173 | color: black; 174 | font-weight: 600; 175 | } 176 | 177 | .name 178 | { 179 | margin-left: 3px; 180 | } 181 | 182 | .price 183 | { 184 | margin-left: 40%; 185 | } 186 | 187 | .description, #total 188 | { 189 | margin-top: 5px; 190 | font-size: 15px; 191 | font-family: sans-serif; 192 | color: #696969; 193 | font-weight: 400; 194 | } 195 | 196 | .seperation-line 197 | { 198 | margin-top: 5px; 199 | width: 98%; 200 | border-top: 1.5px solid lightgrey; 201 | margin-bottom: 5px; 202 | } 203 | 204 | #total 205 | { 206 | margin-left: 65.5%; 207 | } 208 | #total span 209 | { 210 | margin-left: 3%; 211 | } 212 | 213 | @media screen and (max-width: 1163px) 214 | { 215 | #parent 216 | { 217 | width: 80%; 218 | } 219 | } 220 | 221 | @media screen and (max-width: 1163px) 222 | { 223 | #parent 224 | { 225 | width: 80%; 226 | } 227 | } 228 | 229 | @media screen and (max-width: 1020px) 230 | { 231 | #parent 232 | { 233 | width: 90%; 234 | } 235 | } 236 | 237 | @media screen and (max-width: 909px) 238 | { 239 | .price 240 | { 241 | margin-left: 33%; 242 | } 243 | #left 244 | { 245 | width: 350px; 246 | } 247 | #parent 248 | { 249 | width: 95%; 250 | } 251 | } 252 | 253 | @media screen and (max-width: 790px) 254 | { 255 | .price 256 | { 257 | margin-left: 40%; 258 | } 259 | 260 | 261 | @media screen and (max-width: 740px) 262 | { 263 | .seperation-line 264 | { 265 | width: 99%; 266 | } 267 | .price 268 | { 269 | margin-left: 34%; 270 | } 271 | 272 | #right 273 | { 274 | width: 350px; 275 | } 276 | #parent 277 | { 278 | width: 95%; 279 | } 280 | #total 281 | { 282 | margin-left: 64%; 283 | } 284 | } 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | -------------------------------------------------------------------------------- /client/styles/profile.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | font-family: 'Lato', sans-serif; 4 | padding-top: 5rem; 5 | } 6 | 7 | ::-webkit-scrollbar { 8 | display: none; 9 | } 10 | 11 | #profile-page{ 12 | max-width: 1500px; 13 | margin: auto; 14 | } 15 | 16 | #header{ 17 | display: flex; 18 | padding-top: 2rem; 19 | padding-bottom: 2rem; 20 | justify-content: space-evenly; 21 | background-image: url(../images/cover.png); 22 | background-size: cover; 23 | background-repeat: no-repeat; 24 | background-position: bottom; 25 | background-attachment: fixed; 26 | color: white; 27 | width: 80%; 28 | margin: auto; 29 | box-shadow: 0px 2px 5px 0px #c7c7c7; 30 | } 31 | 32 | #img{ 33 | width: 30%; 34 | border-radius: 50%; 35 | height: 7.5rem; 36 | width: 7.5rem; 37 | border: 3px solid white; 38 | } 39 | 40 | #img img{ 41 | border-radius: 50%; 42 | height: inherit; 43 | width: inherit; 44 | } 45 | 46 | #details{ 47 | width: 65%; 48 | } 49 | 50 | #name{ 51 | display: inline-block; 52 | margin: 0; 53 | font-size: 0.85rem; 54 | } 55 | 56 | #location{ 57 | display: block; 58 | font-size: 0.8rem; 59 | } 60 | 61 | #reviews{ 62 | font-weight: 100; 63 | } 64 | 65 | #reviews h5{ 66 | margin-top: 0; 67 | } 68 | 69 | #edit{ 70 | height: 3rem; 71 | width: 7.5rem; 72 | border-radius: 0.5rem; 73 | background-color: #39b364; 74 | text-align: center; 75 | padding-top: 0.8rem; 76 | box-sizing: border-box; 77 | margin-top: 3.5rem; 78 | cursor: pointer; 79 | } 80 | 81 | #edit i{ 82 | color: white; 83 | } 84 | 85 | #edit:hover{ 86 | box-shadow: 0px 2px 8px 0px #918f8f; 87 | } 88 | 89 | .stars-outer { 90 | position: relative; 91 | display: inline-block; 92 | } 93 | 94 | .stars-inner { 95 | position: absolute; 96 | top: 0; 97 | left: 0; 98 | overflow: hidden; 99 | width: 0; 100 | } 101 | 102 | .stars-outer::before { 103 | content: "\f005 \f005 \f005 \f005 \f005"; 104 | font-family: "Font Awesome 6 Free"; 105 | font-weight: 900; 106 | color: white; 107 | } 108 | 109 | .stars-inner::before { 110 | content: "\f005 \f005 \f005 \f005 \f005"; 111 | font-family: "Font Awesome 6 Free"; 112 | font-weight: 900; 113 | color: #f8ce0b; 114 | } 115 | 116 | /*navbox*/ 117 | 118 | #navbox{ 119 | margin-top: 3rem; 120 | height: 2.8rem; 121 | width: 80%; 122 | border: 1px solid #f5f5f5; 123 | margin: auto; 124 | display: flex; 125 | gap: 0.25rem; 126 | padding-bottom: 2rem; 127 | } 128 | 129 | .navboxes{ 130 | font-size: 0.95rem; 131 | text-align: center; 132 | width: 10rem; 133 | background-color: #f5f5f5; 134 | outline: none; 135 | border: none; 136 | cursor: pointer; 137 | } 138 | 139 | .navcolor{ 140 | background-color: #39b364; 141 | color: white; 142 | box-shadow: 0px 0px 7px #9ecaed; 143 | } 144 | 145 | /*boxes*/ 146 | 147 | .box{ 148 | margin: auto; 149 | width: 80%; 150 | display: none; 151 | } 152 | 153 | .show{ 154 | display: block; 155 | } 156 | 157 | /*orders*/ 158 | 159 | .product 160 | { 161 | margin-top: -5px; 162 | display: flex; 163 | } 164 | 165 | .head{ 166 | font-size: 1.65rem; 167 | } 168 | 169 | .product-image img 170 | { 171 | margin-left: 3px; 172 | border-radius: 2px; 173 | height: 100px; 174 | width: 110px; 175 | } 176 | 177 | .name 178 | { 179 | font-size: 18px; 180 | font-family: sans-serif; 181 | margin-top: -1px; 182 | margin-left: 7px; 183 | font-weight: 600; 184 | } 185 | 186 | .quantity 187 | { 188 | font-size: 15px; 189 | font-family: sans-serif; 190 | color: #696969; 191 | margin-left: 7px; 192 | margin-top: -10px; 193 | } 194 | 195 | .price 196 | { 197 | margin-top: 37px; 198 | font-size: 14px; 199 | margin-left: 7px; 200 | font-family: sans-serif; 201 | font-weight: 600; 202 | } 203 | 204 | .line 205 | { 206 | border-radius: 2px; 207 | margin: auto; 208 | width: 98%; 209 | border: 0.5px solid #E1E1E1; 210 | margin-bottom: 10px; 211 | margin-top: -7px; 212 | } 213 | 214 | /*edit*/ 215 | 216 | #editProducts{ 217 | width: 80%; 218 | margin: auto; 219 | } 220 | 221 | .inputs{ 222 | margin-top: 2rem; 223 | position: relative; 224 | } 225 | 226 | .inputs button{ 227 | height: 2.5rem; 228 | width: 9rem; 229 | border-radius: 0.5rem; 230 | text-align: center; 231 | color: white; 232 | font-size: 1rem; 233 | border: none; 234 | margin-bottom: 3rem; 235 | padding-left: 1rem; 236 | padding-right: 1rem; 237 | background-color: var(--primary-color); 238 | color: white; 239 | } 240 | 241 | label{ 242 | font-size: 1.2rem; 243 | display: inline-block; 244 | margin-bottom: 0.7rem; 245 | } 246 | 247 | input{ 248 | font-size: 1.2rem; 249 | } 250 | 251 | input[type="password"] , input[type="email"] , input[type="text"] , input[type="number"] , textarea 252 | { 253 | border: 1.5px solid #BEBFC0; 254 | background-color: transparent; 255 | border: none; 256 | color: #585C65; 257 | margin-top: -10px; 258 | height: 44px; 259 | width: 350px; 260 | border-bottom: 2px solid black; 261 | color: black; 262 | outline: none; 263 | font-size: 0.95rem; 264 | } 265 | 266 | textarea{ 267 | font-size: 0.95rem; 268 | height: 88px; 269 | } -------------------------------------------------------------------------------- /server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "dependencies": { 7 | "abbrev": "^1.1.1", 8 | "accepts": "^1.3.8", 9 | "anymatch": "^3.1.3", 10 | "appwrite": "^10.2.0", 11 | "array-flatten": "^1.1.1", 12 | "async-handler": "^0.0.3", 13 | "asynckit": "^0.4.0", 14 | "axios": "^1.3.4", 15 | "balanced-match": "^1.0.2", 16 | "base64-js": "^1.5.1", 17 | "base64id": "^2.0.0", 18 | "bcryptjs": "^2.4.3", 19 | "binary-extensions": "^2.2.0", 20 | "body-parser": "^1.20.1", 21 | "bowser": "^2.11.0", 22 | "brace-expansion": "^1.1.11", 23 | "braces": "^3.0.2", 24 | "bson": "^4.7.2", 25 | "buffer": "^5.7.1", 26 | "buffer-equal-constant-time": "^1.0.1", 27 | "bytes": "^3.1.2", 28 | "call-bind": "^1.0.2", 29 | "chokidar": "^3.5.3", 30 | "cloudinary": "^1.34.0", 31 | "colors": "^1.4.0", 32 | "combined-stream": "^1.0.8", 33 | "concat-map": "^0.0.1", 34 | "content-disposition": "^0.5.4", 35 | "content-type": "^1.0.5", 36 | "cookie": "^0.4.2", 37 | "cookie-signature": "^1.0.6", 38 | "cors": "^2.8.5", 39 | "debug": "^2.6.9", 40 | "delayed-stream": "^1.0.0", 41 | "depd": "^2.0.0", 42 | "destroy": "^1.2.0", 43 | "dotenv": "^16.0.3", 44 | "ecdsa-sig-formatter": "^1.0.11", 45 | "ee-first": "^1.1.1", 46 | "ejs": "^3.1.8", 47 | "encodeurl": "^1.0.2", 48 | "engine.io": "^6.4.0", 49 | "engine.io-parser": "^5.0.6", 50 | "escape-html": "^1.0.3", 51 | "etag": "^1.8.1", 52 | "express": "^4.18.2", 53 | "express-async-handler": "^1.2.0", 54 | "fast-xml-parser": "^4.0.11", 55 | "fill-range": "^7.0.1", 56 | "finalhandler": "^1.2.0", 57 | "follow-redirects": "^1.15.2", 58 | "form-data": "^4.0.0", 59 | "forwarded": "^0.2.0", 60 | "fresh": "^0.5.2", 61 | "function-bind": "^1.1.1", 62 | "get-intrinsic": "^1.2.0", 63 | "glob-parent": "^5.1.2", 64 | "has": "^1.0.3", 65 | "has-flag": "^3.0.0", 66 | "has-symbols": "^1.0.3", 67 | "http-errors": "^2.0.0", 68 | "iconv-lite": "^0.4.24", 69 | "ieee754": "^1.2.1", 70 | "ignore-by-default": "^1.0.1", 71 | "inherits": "^2.0.4", 72 | "ip": "^2.0.0", 73 | "ipaddr.js": "^1.9.1", 74 | "is-binary-path": "^2.1.0", 75 | "is-extglob": "^2.1.1", 76 | "is-glob": "^4.0.3", 77 | "is-number": "^7.0.0", 78 | "jsonwebtoken": "^9.0.0", 79 | "jwa": "^1.4.1", 80 | "jws": "^3.2.2", 81 | "kareem": "^2.5.1", 82 | "lodash": "^4.17.21", 83 | "lru-cache": "^6.0.0", 84 | "media-typer": "^0.3.0", 85 | "memory-pager": "^1.5.0", 86 | "merge-descriptors": "^1.0.1", 87 | "methods": "^1.1.2", 88 | "mime": "^1.6.0", 89 | "mime-db": "^1.52.0", 90 | "mime-types": "^2.1.35", 91 | "minimatch": "^3.1.2", 92 | "mongodb": "^4.13.0", 93 | "mongodb-connection-string-url": "^2.6.0", 94 | "mongoose": "^6.9.1", 95 | "mpath": "^0.9.0", 96 | "mquery": "^4.0.3", 97 | "ms": "^2.0.0", 98 | "multer": "^1.4.5-lts.1", 99 | "negotiator": "^0.6.3", 100 | "node-appwrite": "^8.2.0", 101 | "nodemon": "^2.0.20", 102 | "nopt": "^1.0.10", 103 | "normalize-path": "^3.0.0", 104 | "object-assign": "^4.1.1", 105 | "object-inspect": "^1.12.3", 106 | "on-finished": "^2.4.1", 107 | "parseurl": "^1.3.3", 108 | "path-to-regexp": "^0.1.7", 109 | "picomatch": "^2.3.1", 110 | "proxy-addr": "^2.0.7", 111 | "proxy-from-env": "^1.1.0", 112 | "pstree.remy": "^1.1.8", 113 | "punycode": "^2.3.0", 114 | "qs": "^6.11.0", 115 | "range-parser": "^1.2.1", 116 | "raw-body": "^2.5.1", 117 | "readdirp": "^3.6.0", 118 | "safe-buffer": "^5.2.1", 119 | "safer-buffer": "^2.1.2", 120 | "saslprep": "^1.0.3", 121 | "semver": "^5.7.1", 122 | "send": "^0.18.0", 123 | "serve-static": "^1.15.0", 124 | "setprototypeof": "^1.2.0", 125 | "side-channel": "^1.0.4", 126 | "sift": "^16.0.1", 127 | "simple-update-notifier": "^1.1.0", 128 | "smart-buffer": "^4.2.0", 129 | "socket.io": "^4.6.0", 130 | "socket.io-adapter": "^2.5.2", 131 | "socket.io-parser": "^4.2.2", 132 | "socks": "^2.7.1", 133 | "sparse-bitfield": "^3.0.3", 134 | "statuses": "^2.0.1", 135 | "strnum": "^1.0.5", 136 | "supports-color": "^5.5.0", 137 | "to-regex-range": "^5.0.1", 138 | "toidentifier": "^1.0.1", 139 | "touch": "^3.1.0", 140 | "tr46": "^3.0.0", 141 | "tslib": "^2.5.0", 142 | "type-is": "^1.6.18", 143 | "undefsafe": "^2.0.5", 144 | "unpipe": "^1.0.0", 145 | "utils-merge": "^1.0.1", 146 | "uuid": "^8.3.2", 147 | "vary": "^1.1.2", 148 | "webidl-conversions": "^7.0.0", 149 | "whatwg-url": "^11.0.0", 150 | "ws": "^8.11.0", 151 | "yallist": "^4.0.0" 152 | }, 153 | "scripts": { 154 | "test": "echo \"Error: no test specified\" && exit 1", 155 | "start": "node server.js", 156 | "dev": "nodemon server.js" 157 | }, 158 | "author": "", 159 | "license": "ISC" 160 | } 161 | -------------------------------------------------------------------------------- /client/styles/order-confirmation.css: -------------------------------------------------------------------------------- 1 | 2 | body 3 | { 4 | padding-top: 20px; 5 | margin: auto; 6 | margin: 0; 7 | } 8 | 9 | main 10 | { 11 | 12 | width: 75%; 13 | margin: auto; 14 | } 15 | /*-----confirmation----*/ 16 | 17 | #confirmation 18 | { 19 | margin: auto; 20 | height: auto; 21 | width: 50%; 22 | /* border: 1px solid black;*/ 23 | } 24 | 25 | #confirmation i 26 | { 27 | font-size: 40px; 28 | color: #39b364;; 29 | margin-left: 47%; 30 | } 31 | 32 | #confirmation p, h2 33 | { 34 | font-family: sans-serif; 35 | text-align: center; 36 | } 37 | 38 | #order-id 39 | { 40 | font-weight: 600; 41 | } 42 | 43 | 44 | /*-----shipping------*/ 45 | 46 | #parent 47 | { 48 | display: flex; 49 | width: 100%; 50 | height: auto; 51 | border-top: 2px solid #E1E1E1; 52 | border-bottom: 2px solid #E1E1E1; 53 | margin-bottom: 30px; 54 | } 55 | 56 | #left 57 | { 58 | height: auto; 59 | width: 50%; 60 | } 61 | 62 | #container1 63 | { 64 | width: 100%; 65 | display: flex; 66 | margin-bottom: 10px; 67 | } 68 | #shipping h4, #payment h4 69 | { 70 | font-family: sans-serif; 71 | } 72 | 73 | #shipping p, #payment p 74 | { 75 | color: #696969; 76 | font-size: 14px; 77 | font-family: sans-serif; 78 | margin-top: -10px; 79 | } 80 | 81 | #shipping 82 | { 83 | height: 20%; 84 | width: 50%; 85 | height: auto; 86 | } 87 | 88 | #payment 89 | { 90 | margin-left: 15px; 91 | height: auto; 92 | width: 50%; 93 | } 94 | 95 | #container2 96 | { 97 | margin-top: -10px; 98 | width: 100%; 99 | display: flex; 100 | } 101 | 102 | #cancel-text 103 | { 104 | width: 50%; 105 | } 106 | 107 | #cancel-text h4 108 | { 109 | font-family: sans-serif; 110 | } 111 | 112 | #cancel-text p 113 | { 114 | font-family: sans-serif; 115 | color: #696969; 116 | font-size: 14px; 117 | margin-top: -10px; 118 | } 119 | 120 | #cancel 121 | { 122 | 123 | width: 50%; 124 | } 125 | 126 | #cancel-button 127 | { 128 | cursor: pointer; 129 | margin-top: 40px; 130 | margin-left: 10px; 131 | border-radius: 5px; 132 | padding: 10px 30px 10px 30px; 133 | border-color: red; 134 | color: red; 135 | background-color: white; 136 | } 137 | 138 | #continue-shopping 139 | { 140 | display: flex; 141 | margin-top: 30px; 142 | width: 99%; 143 | margin-bottom: 4px; 144 | } 145 | 146 | #continue-shopping-button 147 | { 148 | cursor: pointer; 149 | 150 | font-size: 90%; 151 | font-weight: 600; 152 | background-color: #39b364; 153 | border: 1.5px solid #BEBFC0; 154 | border-radius: 5px; 155 | color: white; 156 | transition: 0.3s ease-out; 157 | height: 44px; 158 | width: 50%; 159 | margin: auto; 160 | 161 | } 162 | 163 | #continue-shopping-button:hover 164 | { 165 | background-color: #377E49;; 166 | } 167 | /*-----order summary-----*/ 168 | 169 | #right 170 | { 171 | width: 50%; 172 | border-left: 2px solid #E1E1E1; 173 | /* border-right: 1px solid black;*/ 174 | } 175 | 176 | #right h4 177 | { 178 | margin-left: 3px; 179 | font-family: sans-serif; 180 | 181 | } 182 | 183 | 184 | /*-----product-----*/ 185 | 186 | .product 187 | { 188 | margin-top: -5px; 189 | display: flex; 190 | } 191 | .product-image img 192 | { 193 | margin-left: 3px; 194 | border-radius: 2px; 195 | height: 80px; 196 | width: 80px; 197 | } 198 | 199 | .name 200 | { 201 | font-size: 13px; 202 | font-family: sans-serif; 203 | margin-top: -1px; 204 | margin-left: 7px; 205 | font-weight: 600; 206 | } 207 | 208 | .quantity 209 | { 210 | font-size: 11px; 211 | font-family: sans-serif; 212 | color: #696969; 213 | margin-left: 7px; 214 | margin-top: -10px; 215 | } 216 | 217 | .price 218 | { 219 | margin-top: 37px; 220 | font-size: 12px; 221 | margin-left: 7px; 222 | font-family: sans-serif; 223 | font-weight: 600; 224 | } 225 | 226 | .line 227 | { 228 | border-radius: 2px; 229 | margin: auto; 230 | width: 98%; 231 | border: 0.5px solid #E1E1E1; 232 | margin-bottom: 10px; 233 | margin-top: -7px; 234 | } 235 | 236 | /*------calcualation-----*/ 237 | 238 | .calculation 239 | { 240 | margin: auto; 241 | display: flex; 242 | justify-content: space-between; 243 | width: 95%; 244 | } 245 | 246 | .reason, #sub-total, #discount, #delivery 247 | { 248 | font-family: sans-serif; 249 | font-size: 15px; 250 | color: #696969; 251 | margin-bottom: 10px; 252 | } 253 | 254 | #total-label, #total 255 | { 256 | font-family: sans-serif; 257 | color: black; 258 | font-weight: 600; 259 | } 260 | 261 | 262 | @media screen and (max-width: 1200px) 263 | { 264 | #confirmation 265 | { 266 | margin: auto; 267 | height: auto; 268 | width: 60%; 269 | } 270 | main 271 | { 272 | width: 85%; 273 | } 274 | } 275 | 276 | 277 | @media screen and (max-width: 1040px) 278 | { 279 | #confirmation 280 | { 281 | margin: auto; 282 | height: auto; 283 | width: 70%; 284 | } 285 | main 286 | { 287 | width: 90%; 288 | } 289 | } 290 | 291 | @media screen and (max-width: 900px) 292 | { 293 | #confirmation 294 | { 295 | margin: auto; 296 | height: auto; 297 | width: 80%; 298 | } 299 | main 300 | { 301 | width: 95%; 302 | } 303 | } 304 | 305 | @media screen and (max-width: 780px) 306 | { 307 | #confirmation 308 | { 309 | margin: auto; 310 | height: auto; 311 | width: 90%; 312 | } 313 | #parent 314 | { 315 | margin: auto; 316 | display: flex; 317 | flex-wrap: wrap; 318 | justify-content: center; 319 | margin-bottom: 20px; 320 | } 321 | #left 322 | { 323 | width: 350px; 324 | border-bottom: 2px solid #E1E1E1; 325 | } 326 | 327 | #right 328 | { 329 | border-left: 0; 330 | width: 350px; 331 | } 332 | } 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | -------------------------------------------------------------------------------- /client/checkout.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Checkout 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 |
22 |
23 | 24 |

Delivery Details

25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 |
50 |
51 | 90 |
91 |
92 | 93 |
94 |
95 |
96 |
97 |
98 | 99 | 100 |

Payment Method

101 |
102 | Cash on Delivery
103 |
104 | 105 | 106 | 107 |
108 | 109 | 110 | 111 | 112 | 145 | 146 |
147 | <%- include('include/footer') %> 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /client/profile-seller.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Seller Profile 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | <%- include('include/navbar') %> 18 | 19 |
20 | 44 | 45 | 51 | 52 |
53 |
54 |
55 | 56 |
57 |
Example Name
58 |

Lorem ipsumid est laborum.

59 |
5.0
60 |
Remove
61 |
Edit Product
62 |
63 |
64 |
65 | 66 |
67 |
Example Name
68 |

Lorem ipsumid est laborum.

69 |
5.0
70 |
Remove
71 |
Edit Product
72 |
73 |
74 |
75 | 76 |
77 |
Example Name
78 |

Lorem ipsumid est laborum.

79 |
5.0
80 |
Remove
81 |
Edit Product
82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |

UPLOAD PRODUCT

90 |
91 |
92 | 93 |
94 | 95 |
96 |
97 | 98 |
99 | 100 |
101 |
102 | 103 |
104 |
105 | 106 |

Detect Your Current Location

107 |
108 |

Using GPS

109 |
110 |
111 | 112 |
113 | 114 |
115 |
116 | 117 |
118 | 119 |
120 |
121 |

EDIT PROFILE

122 |
123 |
124 | 125 |
126 | 127 |
128 |
129 | 130 |
131 | 132 |
133 |
134 | 135 |
136 | 137 |
138 |
139 | 140 |
141 | 142 |
143 | 144 |
145 |
146 |
147 | 148 |
149 |

Orders

150 |
151 |

Customer Name

152 |

Product

153 |

Quantity

154 |

Address

155 |

Mobile No.

156 |
157 |
158 |

Onkit Mondol

159 |

Apple

160 |

1

161 |

Canning

162 |

1234554321

163 |
164 |
165 |
166 | 167 | <%- include('include/footer') %> 168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /client/styles/profile-seller.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | font-family: 'Lato', sans-serif; 4 | padding-top: 5rem; 5 | } 6 | 7 | ::-webkit-scrollbar { 8 | display: none; 9 | } 10 | 11 | #profile-page{ 12 | max-width: 1500px; 13 | margin: auto; 14 | } 15 | 16 | #header{ 17 | display: flex; 18 | padding-top: 2rem; 19 | padding-bottom: 2rem; 20 | justify-content: space-evenly; 21 | background-image: url(../images/cover.png); 22 | background-size: cover; 23 | background-repeat: no-repeat; 24 | background-position: bottom; 25 | background-attachment: fixed; 26 | color: white; 27 | width: 80%; 28 | margin: auto; 29 | box-shadow: 0px 2px 5px 0px #c7c7c7; 30 | } 31 | 32 | #img{ 33 | width: 30%; 34 | border-radius: 50%; 35 | height: 7.5rem; 36 | width: 7.5rem; 37 | border: 3px solid white; 38 | } 39 | 40 | #img img{ 41 | border-radius: 50%; 42 | height: inherit; 43 | width: inherit; 44 | } 45 | 46 | #details{ 47 | width: 65%; 48 | } 49 | 50 | #name{ 51 | display: inline-block; 52 | margin: 0; 53 | font-size: 0.85rem; 54 | } 55 | 56 | #location{ 57 | display: inline-block; 58 | font-size: 0.8rem; 59 | } 60 | 61 | #reviews{ 62 | font-weight: 100; 63 | } 64 | 65 | #reviews h5{ 66 | margin-top: 0; 67 | } 68 | 69 | #edit{ 70 | height: 3rem; 71 | width: 7.5rem; 72 | border-radius: 0.5rem; 73 | background-color: #39b364; 74 | text-align: center; 75 | padding-top: 0.8rem; 76 | box-sizing: border-box; 77 | margin-top: 3.5rem; 78 | cursor: pointer; 79 | } 80 | 81 | #edit i{ 82 | color: white; 83 | } 84 | 85 | #edit:hover{ 86 | box-shadow: 0px 2px 8px 0px #918f8f; 87 | } 88 | 89 | .stars-outer { 90 | position: relative; 91 | display: inline-block; 92 | } 93 | 94 | .stars-inner { 95 | position: absolute; 96 | top: 0; 97 | left: 0; 98 | overflow: hidden; 99 | width: 0; 100 | } 101 | 102 | .stars-outer::before { 103 | content: "\f005 \f005 \f005 \f005 \f005"; 104 | font-family: "Font Awesome 6 Free"; 105 | font-weight: 900; 106 | color: white; 107 | } 108 | 109 | .stars-inner::before { 110 | content: "\f005 \f005 \f005 \f005 \f005"; 111 | font-family: "Font Awesome 6 Free"; 112 | font-weight: 900; 113 | color: #f8ce0b; 114 | } 115 | 116 | /*navbox*/ 117 | 118 | #navbox{ 119 | margin-top: 3rem; 120 | height: 2.8rem; 121 | width: 80%; 122 | border: 1px solid #f5f5f5; 123 | margin: auto; 124 | display: flex; 125 | gap: 0.25rem; 126 | padding-bottom: 2rem; 127 | } 128 | 129 | .navboxes{ 130 | font-size: 0.95rem; 131 | text-align: center; 132 | width: 10rem; 133 | background-color: #f5f5f5; 134 | outline: none; 135 | border: none; 136 | cursor: pointer; 137 | } 138 | 139 | .navcolor{ 140 | background-color: #39b364; 141 | color: white; 142 | box-shadow: 0px 0px 7px #9ecaed; 143 | } 144 | 145 | .head{ 146 | font-size: 1.65rem; 147 | } 148 | 149 | /*boxes*/ 150 | 151 | .box{ 152 | margin: auto; 153 | width: 80%; 154 | display: none; 155 | } 156 | 157 | .show{ 158 | display: flex; 159 | } 160 | 161 | #cards{ 162 | display: flex; 163 | flex-wrap: wrap; 164 | justify-content: center; 165 | width: 100%; 166 | gap: 1rem; 167 | } 168 | 169 | .card{ 170 | height: 24.5rem; 171 | width: 19rem; 172 | border-radius: 1rem; 173 | position: relative; 174 | background-color: white; 175 | border: 8px white solid; 176 | z-index: 98; 177 | } 178 | 179 | .card:hover{ 180 | box-shadow: 0px 2px 8px 0px #c7c7c7; 181 | } 182 | 183 | .card img{ 184 | height: 68%; 185 | width: 100%; 186 | border-radius: 1rem; 187 | } 188 | 189 | .card-body{ 190 | position: relative; 191 | } 192 | 193 | .rating{ 194 | font-weight: 400; 195 | font-size: 0.85rem; 196 | height: 0.95rem; 197 | width: 2.7rem; 198 | background-color: #39b364; 199 | text-align: center; 200 | color: white; 201 | border-radius: 0.5rem; 202 | padding: 0.2rem; 203 | position: absolute; 204 | top: 0; 205 | right: 0; 206 | } 207 | 208 | .rating i{ 209 | font-size: 0.5rem; 210 | position: relative; 211 | bottom: 2px; 212 | color: white; 213 | } 214 | 215 | .name{ 216 | margin-top: 0.5rem; 217 | font-size: 1.25rem; 218 | } 219 | 220 | .description{ 221 | font-weight: 0; 222 | color: #868686; 223 | margin-bottom: 1rem; 224 | } 225 | 226 | .price{ 227 | display: inline-block; 228 | background-color: #39b364; 229 | color: white; 230 | font-weight: 900; 231 | padding: 0.5rem; 232 | box-sizing: border-box; 233 | display: inline-block; 234 | border-radius: 0.25rem; 235 | font-size: 0.85rem; 236 | } 237 | 238 | .add2cart{ 239 | display: inline-block; 240 | padding: 0.5rem; 241 | border: 1px solid #696969; 242 | font-weight: 100; 243 | margin-left: 0.5rem; 244 | border-radius: 0.25rem; 245 | cursor: pointer; 246 | font-size: 0.85rem; 247 | } 248 | 249 | /*upload*/ 250 | 251 | #upload{ 252 | height: auto; 253 | gap: 3rem; 254 | background-color: white; 255 | color: black; 256 | overflow: hidden; 257 | padding: 0.01rem; 258 | } 259 | 260 | #upload img{ 261 | position: relative; 262 | bottom: 50px; 263 | } 264 | 265 | #upload-btn{ 266 | 267 | } 268 | 269 | #location-input{ 270 | padding-bottom: 0.5rem; 271 | } 272 | 273 | #city{ 274 | margin-bottom: 2rem; 275 | } 276 | 277 | #citylabel{ 278 | margin-top: 1.5rem; 279 | } 280 | 281 | /*location*/ 282 | 283 | #arrow-downBox{ 284 | height: 5rem; 285 | width: 21rem; 286 | overflow-y: scroll; 287 | box-shadow: 0px 2px 8px 0px #c7c7c7; 288 | background-color: white; 289 | border-radius: 0.8rem; 290 | z-index: 99; 291 | border: 1px solid #f1f1f1; 292 | padding: 0.65rem; 293 | } 294 | 295 | #arrow-downBox:hover{ 296 | background-color: #f8f8f8; 297 | } 298 | 299 | #detect{ 300 | display: flex; 301 | flex-direction: row; 302 | font-size: 1.1rem; 303 | align-items: center; 304 | gap: 1rem; 305 | color: red; 306 | font-weight: 200; 307 | } 308 | 309 | #arrow-downBox > p{ 310 | margin-top: -0.75rem; 311 | margin-left: 2.2rem; 312 | font-size: 0.85rem; 313 | } 314 | 315 | /*edit*/ 316 | 317 | #editProducts{ 318 | width: 80%; 319 | margin: auto; 320 | } 321 | 322 | .inputs{ 323 | margin-top: 2rem; 324 | position: relative; 325 | } 326 | 327 | .inputs button{ 328 | height: 2.5rem; 329 | width: 9rem; 330 | border-radius: 0.5rem; 331 | text-align: center; 332 | color: white; 333 | font-size: 1rem; 334 | border: none; 335 | margin-bottom: 3rem; 336 | padding-left: 1rem; 337 | padding-right: 1rem; 338 | background-color: var(--primary-color); 339 | color: white; 340 | } 341 | 342 | label{ 343 | font-size: 1.2rem; 344 | display: inline-block; 345 | margin-bottom: 0.7rem; 346 | } 347 | 348 | input{ 349 | font-size: 1.2rem; 350 | } 351 | 352 | input[type="password"] , input[type="email"] , input[type="text"] , input[type="number"] , textarea 353 | { 354 | border: 1.5px solid #BEBFC0; 355 | background-color: transparent; 356 | border: none; 357 | color: #585C65; 358 | margin-top: -10px; 359 | height: 44px; 360 | width: 350px; 361 | border-bottom: 2px solid black; 362 | color: black; 363 | outline: none; 364 | font-size: 0.95rem; 365 | } 366 | 367 | textarea{ 368 | font-size: 0.95rem; 369 | height: 88px; 370 | } 371 | 372 | /*-----orders-----*/ 373 | 374 | #orders 375 | { 376 | flex-direction: column; 377 | } 378 | 379 | #table 380 | { 381 | background-color: #39b364; 382 | display: flex; 383 | justify-content: space-around; 384 | } 385 | 386 | #table h3 387 | { 388 | text-align: center; 389 | width: 20%; 390 | font-size: 20px; 391 | color: white; 392 | margin: 0; 393 | margin-top: 8px; 394 | margin-bottom: 8px; 395 | } 396 | 397 | .details 398 | { 399 | display: flex; 400 | justify-content: space-around; 401 | text-align: center; 402 | } 403 | 404 | .details h4 405 | { 406 | text-align: center; 407 | width: 20%; 408 | font-size: 15px; 409 | color: black; 410 | } 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | -------------------------------------------------------------------------------- /client/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Venline 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | leaf 21 |
22 |
23 |
24 |
25 | 26 | <%- include('include/navbar') %> 27 | 37 | 38 |
39 |

Fishes

40 |

Fruits

41 |

Diary

42 |

Vegetables

43 |

Eggs

44 |

Meat

45 |
46 | 47 | 89 | 90 |
91 |

What are we Providing..?

92 |
93 |
94 | 95 |

Benefits for Seller

96 |

Increased Sales  -  You can reach a larger audience by selling online,resulting in more sales and revenue

97 |

Increased Visibility  -  Product recommendations and search algorithms can help you increase your product's visibility on online marketplaces

98 |

Lower Overhead Costs  -  Rent,utilities,and other expenses will be reduced due to online sales

99 |
100 |
101 | 102 |

Benefits for Customer

103 |

Competitive pricing  -  Get the best deal on your purchase while saving money

104 |

Doorstep delivery  -  You can receive your items directly at your doorstep with the convenience of home delivery

105 |

High quality graded produce  -  You can rest easy knowing your produce is fresh, graded, and up to your expectations

106 |
107 |
108 |
109 | 110 |
111 |

About Us

112 |
113 |
114 | selling 115 |
116 |
117 |

Our marketplace showcases the latest and greatest products from our featured vendors, with easy-to-navigate categories for everything from fresh produce and handmade crafts to specialty goods and personal services. You can browse each vendor's storefront to see their full range of products and learn more about their background and story.

118 |

Join our community and experience the joy of supporting local vendors while enjoying the convenience of online shopping. Browse our selection of high-quality products, connect with vendors, and discover something new today!

119 |
120 |
121 |
122 | 123 | <%- include('include/footer') %> 124 | 125 |
126 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /client/styles/cart.css: -------------------------------------------------------------------------------- 1 | /*body*/ 2 | 3 | body{ 4 | height: auto; 5 | margin: 0; 6 | font-family: 'Lato', sans-serif; 7 | } 8 | 9 | /*main*/ 10 | 11 | main{ 12 | margin: auto; 13 | width: 80%; 14 | display: flex; 15 | flex-direction: column; 16 | } 17 | 18 | /*navbar*/ 19 | 20 | #navbar{ 21 | display: flex; 22 | justify-content: space-between; 23 | text-align: center; 24 | padding: 1.5rem; 25 | box-sizing: border-box; 26 | position: fixed; 27 | top: 0px; 28 | width: 100%; 29 | z-index: 100; 30 | color: #696969; 31 | } 32 | 33 | nav > div{ 34 | display: inline-block; 35 | font-size: 1.1rem; 36 | } 37 | 38 | .nav-move{ 39 | box-shadow: 0px 0px 10px 0px grey; 40 | background-color: white; 41 | } 42 | 43 | #navigation{ 44 | display: flex; 45 | align-items: center; 46 | } 47 | 48 | /*navbar links*/ 49 | 50 | #navigation > div{ 51 | width: 5rem; 52 | } 53 | 54 | .nav-link{ 55 | color: black; 56 | text-decoration: none; 57 | transition: 0.25s ease-in-out; 58 | color: #696969; 59 | font-weight: 500 60 | } 61 | 62 | .nav-link:hover{ 63 | color: #39b364; 64 | } 65 | 66 | #navigation .btn{ 67 | width: 8rem; 68 | height: 1.3rem; 69 | cursor: pointer; 70 | } 71 | 72 | .navicon{ 73 | width: 3.5rem !important; 74 | } 75 | 76 | .navicon i{ 77 | color: black; 78 | } 79 | 80 | @media screen and (max-width: 720px){ 81 | #navigation{ 82 | display: none; 83 | } 84 | } 85 | 86 | 87 | /*listing*/ 88 | 89 | #cart-heading 90 | { 91 | color: #696969; 92 | margin-top: 6rem; 93 | margin-left: 5px; 94 | } 95 | 96 | 97 | #table 98 | { 99 | height: 45px; 100 | width: 100%; 101 | margin-top: -8px; 102 | background-color: #D84B2A; 103 | display: flex; 104 | flex-wrap: wrap; 105 | justify-content: space-around; 106 | align-items: center; 107 | } 108 | 109 | #table h3 110 | { 111 | height: auto; 112 | width: 225px; 113 | padding-bottom: 4px; 114 | color: white; 115 | margin: 0; 116 | height: 50%; 117 | font-size: 22px; 118 | } 119 | 120 | 121 | /*-----ites-----*/ 122 | 123 | 124 | .seperation-line 125 | { 126 | margin-top: 5px; 127 | margin-bottom: 5px; 128 | margin-left: 10px; 129 | border-top: 1.5px solid grey; 130 | width: 83%; 131 | } 132 | 133 | .product 134 | { 135 | display: flex; 136 | flex-wrap: wrap; 137 | justify-content: space-between; 138 | transition: 0.3s ease-in-out; 139 | height: auto; 140 | width: 85%; 141 | } 142 | 143 | /*.product:hover 144 | { 145 | transform: scale(1.01); 146 | box-shadow: 0px 0px 5px 5px #c7c7c7; 147 | }*/ 148 | 149 | 150 | .product-image 151 | { 152 | display: flex; 153 | flex-wrap: wrap; 154 | /* align-items: center;*/ 155 | height: auto; 156 | width: auto; 157 | } 158 | .product-image img 159 | { 160 | margin-left: 10px; 161 | border-radius: 4px; 162 | height: 120px; 163 | width: 135px; 164 | } 165 | 166 | .product-seller, .product-stock, .remove, .price, .quantity, .total 167 | { 168 | color: #696969; 169 | font-weight: 400; 170 | } 171 | 172 | .product h3 173 | { 174 | font-family: sans-serif; 175 | font-weight: 600; 176 | font-size: 16px; 177 | color: #303132; 178 | } 179 | 180 | 181 | .product-name 182 | { 183 | margin-left: 15px; 184 | margin-top: 1px; 185 | } 186 | 187 | .product-seller 188 | { 189 | margin-left: 15px; 190 | margin-top: -10px; 191 | margin-bottom: 2px; 192 | } 193 | 194 | .product-stock 195 | { 196 | margin-left: 15px; 197 | margin-bottom: 30px; 198 | } 199 | 200 | .remove a 201 | { 202 | margin-top: 20px; 203 | color: #696969; 204 | margin-left: 15px; 205 | } 206 | 207 | 208 | .product-price 209 | { 210 | margin-top: -14px; 211 | height: auto; 212 | width: auto; 213 | } 214 | 215 | .price 216 | { 217 | margin-top: -10px; 218 | } 219 | 220 | 221 | .product-quantity 222 | { 223 | margin-top: -14px; 224 | height: auto; 225 | width: auto; 226 | } 227 | 228 | .quantity 229 | { 230 | margin-top: -7px; 231 | margin-left: -4px; 232 | } 233 | 234 | .minus-icon, .plus-icon 235 | { 236 | padding: 1px; 237 | padding-left: 3.5px; 238 | font-size: 15px; 239 | border-radius: 2px; 240 | border: 1px solid #696969; 241 | width: 15px; 242 | height: auto; 243 | } 244 | 245 | 246 | .minus-icon 247 | { 248 | margin-right: 8px; 249 | } 250 | 251 | .plus-icon 252 | { 253 | margin-left: 8px; 254 | } 255 | 256 | 257 | .product-total 258 | { 259 | margin-top: -14px; 260 | height: auto; 261 | width: auto; 262 | } 263 | 264 | .total 265 | { 266 | margin-top: -10px; 267 | } 268 | 269 | #list 270 | { 271 | margin-top: -10px; 272 | width: 75%; 273 | /* min-width: 639px;*/ 274 | } 275 | 276 | /*-----order sumamry-----*/ 277 | 278 | 279 | #parent 280 | { 281 | display: flex; 282 | flex-wrap: wrap; 283 | justify-content: center; 284 | margin-bottom: 30px; 285 | } 286 | 287 | #summary 288 | { 289 | /* min-width: 200px;*/ 290 | width: 25%; 291 | height: auto; 292 | margin-top: -6px; 293 | } 294 | 295 | #coupon 296 | { 297 | margin-left: -3px; 298 | display: flex; 299 | /* flex-wrap: wrap;*/ 300 | justify-content: center; 301 | } 302 | 303 | #coupon-label 304 | { 305 | color: #696969; 306 | font-size: 14px; 307 | line-height: 25px; 308 | } 309 | 310 | 311 | #coupon-form 312 | { 313 | color: #696969; 314 | font-size: 15px; 315 | width: 59%; 316 | height: 35px; 317 | border: 1px solid #696969; 318 | border-radius: 2px 0px 0px 2px; 319 | } 320 | 321 | input:focus 322 | { 323 | outline:none; 324 | } 325 | 326 | #coupon-submit 327 | { 328 | cursor: pointer; 329 | border: 0; 330 | width: 35.9%; 331 | height: 39px; 332 | font-size: 100%; 333 | background-color: black; 334 | color: white; 335 | border: 1px solid black; 336 | border-radius: 0px 2px 2px 0px; 337 | transition: 0.3s ease-in-out; 338 | } 339 | 340 | 341 | .calculation 342 | { 343 | display: flex; 344 | flex-wrap: wrap; 345 | justify-content: space-between; 346 | align-items: center; 347 | width: 100%; 348 | height: auto; 349 | margin-top: 20px; 350 | } 351 | 352 | .reason 353 | { 354 | color: #696969; 355 | font-weight: 400; 356 | } 357 | 358 | #line 359 | { 360 | margin-top: 15px; 361 | width: 100%; 362 | height: 10px; 363 | border-top: 2px solid #696969; 364 | } 365 | 366 | .total-final 367 | { 368 | margin-top: px; 369 | color: #696969; 370 | font-weight: 600; 371 | } 372 | 373 | #order 374 | { 375 | padding-top: 11.5px; 376 | display: flex; 377 | justify-content: space-around; 378 | margin-top: 40px; 379 | margin-left: 24%; 380 | font-size: 18px; 381 | font-weight: 600; 382 | height: 44px; 383 | width: 55%; 384 | background-color: #39b364; 385 | border: 1.5px solid #BEBFC0; 386 | border-radius: 5px; 387 | color: white; 388 | transition: 0.3s ease-out; 389 | cursor: pointer; 390 | } 391 | 392 | #order:hover 393 | { 394 | background-color: #377E49; 395 | } 396 | 397 | 398 | @media screen and (max-width: 1100px) 399 | { 400 | main 401 | { 402 | margin: auto; 403 | width: 90%; 404 | display: flex; 405 | flex-direction: column; 406 | } 407 | #coupon 408 | { 409 | margin-left: -3px; 410 | } 411 | } 412 | 413 | @media screen and (max-width: 995px) 414 | { 415 | main 416 | { 417 | width: 90%; 418 | } 419 | #coupon 420 | { 421 | margin-left: -5px; 422 | } 423 | .seperation-line 424 | { 425 | width: 98%; 426 | } 427 | .product 428 | { 429 | width: 98%; 430 | } 431 | #list 432 | { 433 | width: 100% 434 | } 435 | #parent 436 | { 437 | display: block; 438 | } 439 | #summary 440 | { 441 | padding-top: 70px; 442 | margin-bottom: 50px; 443 | margin: auto; 444 | width: 45%; 445 | } 446 | } 447 | 448 | @media screen and (max-width: 650px) 449 | { 450 | #coupon 451 | { 452 | margin-left: -5px; 453 | } 454 | main 455 | { 456 | width: 100%; 457 | } 458 | .seperation-line 459 | { 460 | width: 98%; 461 | } 462 | .product 463 | { 464 | width: 98%; 465 | } 466 | #list 467 | { 468 | width: 100% 469 | } 470 | #parent 471 | { 472 | display: block; 473 | } 474 | #summary 475 | { 476 | padding-top: 70px; 477 | margin: auto; 478 | width: 65%; 479 | } 480 | } 481 | 482 | @media screen and (max-width: 550px) 483 | { 484 | .product-total 485 | { 486 | display: none; 487 | } 488 | #coupon 489 | { 490 | margin-left: -5px; 491 | } 492 | main 493 | { 494 | width: 100%; 495 | } 496 | .seperation-line 497 | { 498 | width: 98%; 499 | } 500 | .product 501 | { 502 | width: 98%; 503 | } 504 | #list 505 | { 506 | width: 100% 507 | } 508 | #parent 509 | { 510 | display: block; 511 | } 512 | #summary 513 | { 514 | padding-top: 70px; 515 | margin: auto; 516 | width: 65%; 517 | } 518 | } -------------------------------------------------------------------------------- /client/styles/global.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --primary-color: #39b364; 3 | } 4 | 5 | .btn{ 6 | padding: 0.3rem; 7 | transition: 0.25s ease-in-out; 8 | border: 1px solid #343a40; 9 | border-radius: 0.3rem; 10 | transition: 0.25s; 11 | } 12 | 13 | .btn:hover{ 14 | box-shadow: 0px 0px 5px 6px whitesmoke; 15 | } 16 | 17 | input:focus{ 18 | outline: none; 19 | } 20 | 21 | i{ 22 | color: black; 23 | } 24 | 25 | .btn-arrow{ 26 | background-color: transparent; 27 | border: none; 28 | padding: 0 !important; 29 | } 30 | 31 | /*navbar*/ 32 | 33 | #navbar{ 34 | display: flex; 35 | justify-content: space-between; 36 | text-align: center; 37 | align-items: center; 38 | padding: 1.5rem; 39 | padding-top: 1rem; 40 | box-sizing: border-box; 41 | position: fixed; 42 | top: 0px; 43 | width: 100%; 44 | z-index: 100; 45 | color: #696969; 46 | transition: padding-top 0.5s ease-in-out; 47 | } 48 | 49 | nav > div{ 50 | display: inline-block; 51 | font-size: 1.1rem; 52 | } 53 | 54 | .nav-move{ 55 | box-shadow: 0px 0px 10px 0px grey; 56 | background-color: white; 57 | padding-top: 1.5rem !important; 58 | } 59 | 60 | #navigation{ 61 | display: flex; 62 | align-items: center; 63 | } 64 | 65 | /*navbar links*/ 66 | 67 | #navigation > div{ 68 | width: 5rem; 69 | } 70 | .nav-link{ 71 | text-decoration: none; 72 | transition: 0.25s ease-in-out; 73 | color: #696969; 74 | font-weight: 500 75 | } 76 | 77 | #nav-seller{ 78 | width: 9rem !important; 79 | } 80 | 81 | .nav-link:hover{ 82 | color: var(--primary-color); 83 | } 84 | 85 | #navigation .btn{ 86 | width: 8rem; 87 | height: 1.3rem; 88 | cursor: pointer; 89 | } 90 | 91 | .navicon{ 92 | width: 3.5rem !important; 93 | } 94 | 95 | .navicon i{ 96 | color: black; 97 | } 98 | 99 | .dropdown 100 | { 101 | cursor: pointer; 102 | } 103 | 104 | .dropdown-content 105 | { 106 | /* border-radius: 10px;*/ 107 | margin-top: 6px; 108 | display: none; 109 | background-color: var(--primary-color); 110 | width: auto; 111 | box-shadow: 0px 3px 10px 0px grey; 112 | padding: 5px; 113 | } 114 | 115 | .dropdown-content p 116 | { 117 | font-size: 17px; 118 | padding-top: 8px; 119 | padding-bottom: 7px; 120 | color: white; 121 | margin: 0; 122 | padding: 1.2rem; 123 | } 124 | 125 | .dropdown-content p:hover 126 | { 127 | background-color: #60a365; 128 | } 129 | .dropdown:hover .dropdown-content { 130 | display: block; 131 | 132 | } 133 | 134 | .dropdown:hover #hamberger-body { 135 | height: 25rem; 136 | } 137 | 138 | 139 | .profile{ 140 | width: auto !important; 141 | margin-left: 1rem; 142 | justify-content: center; 143 | align-items: center; 144 | gap: 0.5rem; 145 | position: relative; 146 | display: none; 147 | } 148 | 149 | .profile-img{ 150 | height: 35px; 151 | width: 35px; 152 | display: inline-block; 153 | } 154 | 155 | .profile-img img{ 156 | height: inherit; 157 | width: inherit; 158 | border-radius: 50%; 159 | } 160 | 161 | .profile-name{ 162 | display: inline-block; 163 | } 164 | 165 | .white{ 166 | color: white; 167 | } 168 | 169 | .profile i{ 170 | position: relative; 171 | top: 1px; 172 | cursor: pointer; 173 | } 174 | 175 | .profile-card{ 176 | position: absolute; 177 | display: flex; 178 | flex-direction: column; 179 | top: 2.5rem; 180 | left: -12.45rem; 181 | height: 14rem; 182 | width: 16rem; 183 | background-color: var(--primary-color); 184 | align-items: center; 185 | border-radius: 0.85rem; 186 | display: none; 187 | } 188 | 189 | .profile-card-img{ 190 | height: 70px; 191 | width: 70px; 192 | margin-top: 2rem; 193 | } 194 | 195 | .profile-card-img img{ 196 | height: inherit !important; 197 | width: inherit !important; 198 | border-radius: 50%; 199 | } 200 | 201 | .profile-card h4{ 202 | margin: 0; 203 | margin-top: 0.75rem; 204 | font-size: 1.05rem; 205 | color: black; 206 | font-weight: 500; 207 | color: white; 208 | margin-bottom: 0.25rem; 209 | } 210 | 211 | .profile-card p{ 212 | margin: 0; 213 | font-size: 0.8rem; 214 | color: white; 215 | } 216 | 217 | .profile-card button[type="button"]{ 218 | padding: 0.5rem; 219 | font-size: 0.9rem; 220 | margin-top: 0.8rem; 221 | background-color: #8ec792; 222 | font-weight: 500; 223 | border-radius: 0.5rem; 224 | color: #ebebeb; 225 | outline: none; 226 | border: none; 227 | cursor: pointer; 228 | } 229 | 230 | .profile-card button[type="button"]:hover{ 231 | box-shadow: 0px 2px 8px 0px #c7c7c7; 232 | } 233 | 234 | #hamberger{ 235 | margin-right: 0.5rem; 236 | position: relative; 237 | bottom: 3px; 238 | display: none; 239 | } 240 | 241 | #hamberger-icon{ 242 | cursor: pointer; 243 | background-color: transparent; 244 | border: none; 245 | font-size: 1.5rem; 246 | } 247 | 248 | .ham-link{ 249 | font-size: 1rem; 250 | color: white; 251 | text-decoration: none; 252 | } 253 | 254 | .hamicon i{ 255 | color: white; 256 | } 257 | 258 | .hamicon{ 259 | font-size: 1rem; 260 | } 261 | 262 | .hamicon span{ 263 | color: white; 264 | color: white; 265 | text-decoration: none; 266 | } 267 | 268 | .hamicon a{ 269 | text-decoration: none; 270 | } 271 | 272 | #hamberger-body{ 273 | position: absolute; 274 | top: 2rem; 275 | left: -8rem; 276 | background-color: var(--primary-color); 277 | display: flex; 278 | flex-direction: column; 279 | justify-content: space-evenly; 280 | height: 20rem; 281 | width: 9rem; 282 | align-items: flex-start; 283 | padding-left: 1.5rem; 284 | border-radius: 0.75rem; 285 | transition: 0.45s; 286 | display: none; 287 | } 288 | 289 | #hamberger-body .btn{ 290 | padding: 0.5rem; 291 | font-size: 0.9rem; 292 | background-color: #8ec792; 293 | font-weight: 500; 294 | border-radius: 0.5rem; 295 | color: #ebebeb; 296 | outline: none; 297 | border: none; 298 | box-shadow: none; 299 | width: 70%; 300 | } 301 | 302 | @media screen and (max-width: 860px){ 303 | #navigation{ 304 | display: none; 305 | } 306 | 307 | #hamberger{ 308 | display: flex; 309 | } 310 | } 311 | 312 | /*-----footer----*/ 313 | 314 | #footer 315 | { 316 | padding: 1.75rem; 317 | box-sizing: border-box; 318 | background-color: #383737; 319 | display: flex; 320 | flex-wrap: wrap; 321 | width: 100%; 322 | height: auto; 323 | justify-content: space-between; 324 | } 325 | 326 | #div1 327 | { 328 | padding-left: 5px; 329 | height: auto; 330 | width: 300px; 331 | } 332 | 333 | #div2 334 | { 335 | display: flex; 336 | flex-direction: column; 337 | align-items: flex-start; 338 | height: auto; 339 | width: 200px; 340 | } 341 | 342 | #div3 343 | { 344 | height: auto; 345 | width: 200px; 346 | display: flex; 347 | flex-direction: column; 348 | align-items: flex-start; 349 | } 350 | 351 | 352 | #div5 353 | { 354 | padding-right: 5px; 355 | height: auto; 356 | width: 300px; 357 | } 358 | 359 | /*-----div1-----*/ 360 | /*-----subscribe-----*/ 361 | 362 | #subscribe 363 | { 364 | margin-top: 20px; 365 | color: white; 366 | background-color: #383737; 367 | } 368 | 369 | #email-form 370 | { 371 | border-radius: 5px; 372 | border: 0; 373 | background-color: #464646; 374 | color: #39b364;; 375 | padding-left: 10px; 376 | width: 60%; 377 | height: 30px; 378 | font-family: sans-serif; 379 | font-size: 0.85rem; 380 | margin-left: 0.25rem; 381 | } 382 | 383 | #email-form:focus 384 | { 385 | outline: none; 386 | } 387 | 388 | #email-form::placeholder 389 | { 390 | font-family: sans-serif; 391 | font-size: 15px; 392 | color: #39b364; 393 | } 394 | 395 | #submit 396 | { 397 | height: 30px; 398 | background-color: #464646; 399 | color: #39b364;; 400 | padding: 5px; 401 | border: 0; 402 | border-radius: 5px; 403 | font-size: 15px; 404 | } 405 | 406 | 407 | /*-----social media-----*/ 408 | 409 | #insta, #facebook, #twitter, #linkedin 410 | { 411 | display: inline-block; 412 | } 413 | 414 | #insta i, #facebook i, #twitter i, #linkedin i 415 | { 416 | margin-left: 5px; 417 | color: #D84B2A; 418 | color: white; 419 | margin-top: 22px; 420 | font-size: 25px; 421 | } 422 | 423 | #facebook i, #twitter i, #linkedin i 424 | { 425 | margin-left: 20px; 426 | } 427 | 428 | 429 | /*-----div2-----*/ /*-----div3-----*/ 430 | 431 | .topic 432 | { 433 | margin-top: 20px; 434 | text-align: center; 435 | } 436 | 437 | .topic a 438 | { 439 | text-decoration: none; 440 | font-family: sans-serif; 441 | color: white; 442 | } 443 | 444 | 445 | /*------div5------*/ 446 | 447 | #heading 448 | { 449 | margin-top: 4px; 450 | font-family: sans-serif; 451 | font-size: 20px; 452 | color: white; 453 | font-weight: 600; 454 | } 455 | 456 | #copyrigth 457 | { 458 | margin-top: 10px; 459 | font-size: 15px; 460 | font-family: sans-serif; 461 | color: white; 462 | } 463 | 464 | #content 465 | { 466 | margin-top: 7px; 467 | font-size: 14px; 468 | font-family: sans-serif; 469 | color: white; 470 | font-weight: 100; 471 | letter-spacing: 0.5px; 472 | word-spacing: 0.5px; 473 | } 474 | 475 | 476 | /*-----payemnt-gateways-----*/ 477 | 478 | #payment-gateways 479 | { 480 | text-align: right; 481 | background-color: #39b364; 482 | } 483 | 484 | #payment-gateways img 485 | { 486 | padding-top: 15px; 487 | padding-right: 5px; 488 | height: 20px; 489 | } 490 | 491 | 492 | @media screen and (max-width: 573px) 493 | { 494 | #div3 495 | { 496 | margin-top: 10px; 497 | } 498 | 499 | #div5 500 | { 501 | margin-top: 25px; 502 | } 503 | } 504 | 505 | @media screen and (max-width: 703px) 506 | { 507 | #div3 508 | { 509 | margin-top: 10px; 510 | } 511 | 512 | #div5 513 | { 514 | margin-top: 25px; 515 | } 516 | } 517 | 518 | 519 | @media screen and (max-width: 1009px) 520 | { 521 | #div5 522 | { 523 | margin-top: 25px; 524 | } 525 | } 526 | -------------------------------------------------------------------------------- /client/styles/style.css: -------------------------------------------------------------------------------- 1 | /*body*/ 2 | 3 | body{ 4 | padding-top: 20px; 5 | margin: 0; 6 | font-family: 'Lato', sans-serif; 7 | } 8 | 9 | :root{ 10 | --primary-color: #39b364; 11 | } 12 | 13 | /*main*/ 14 | 15 | main{ 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | } 20 | 21 | /*Background Animation*/ 22 | 23 | @keyframes move{ 24 | 6.25%{ 25 | transform: translatey(2.5px); 26 | } 27 | 28 | 12.5%{ 29 | transform: translatey(5px); 30 | } 31 | 32 | 18.75%{ 33 | transform: translatey(7.5px); 34 | } 35 | 36 | 25%{ 37 | transform: translatey(10px); 38 | } 39 | 40 | 31.25%{ 41 | transform: translatey(12.5px); 42 | } 43 | 44 | 37.5%{ 45 | transform: translatey(15px); 46 | } 47 | 48 | 43.75%{ 49 | transform: translatey(17.5px); 50 | } 51 | 52 | 50%{ 53 | transform: translatey(20px); 54 | } 55 | 56 | 56.25%{ 57 | transform: translatey(22.5px); 58 | } 59 | 60 | 62.5%{ 61 | transform: translatey(25px); 62 | } 63 | 64 | 68.75%{ 65 | transform: translatey(27.5px); 66 | } 67 | 68 | 75%{ 69 | transform: translatey(30px); 70 | } 71 | 72 | 81.25%{ 73 | transform: translatey(32.5px); 74 | } 75 | 76 | 87.5%{ 77 | transform: translatey(35px); 78 | } 79 | 80 | 93.75%{ 81 | transform: translatey(37.5px); 82 | } 83 | 84 | 100%{ 85 | transform: translatey(40px); 86 | } 87 | } 88 | 89 | .back-animation{ 90 | position: absolute; 91 | height: 195px; 92 | width: 195px; 93 | } 94 | 95 | .back-animation:nth-child(1){ 96 | top: 7.5rem; 97 | border-radius: 30% 40% 88% 12%; 98 | animation: move 2s alternate infinite; 99 | opacity: 0.4; 100 | } 101 | 102 | .back-animation:nth-child(2){ 103 | top: 0; 104 | right: 0; 105 | border-radius: 58% 0% 0% 100%; 106 | background-color: #abb166bf; 107 | opacity: 0.4; 108 | height: 34rem; 109 | width: 3rem; 110 | } 111 | 112 | .back-animation:nth-child(3){ 113 | top: 35rem; 114 | border-radius: 30% 40% 88% 12%; 115 | animation: move 2s alternate infinite; 116 | opacity: 0.4; 117 | z-index: 97; 118 | } 119 | 120 | /*all sections*/ 121 | 122 | section{ 123 | max-width: 1500px; 124 | margin-left: auto; 125 | margin-right: auto; 126 | width: 80%; 127 | display: flex; 128 | flex-direction: column; 129 | align-items: center; 130 | } 131 | 132 | /*header*/ 133 | 134 | #header{ 135 | margin-top: 4rem; 136 | margin-bottom: 2rem; 137 | height: auto; 138 | width: 100%; 139 | display: flex; 140 | justify-content: space-around; 141 | flex-direction: row; 142 | background-color: white; 143 | } 144 | 145 | #header h1{ 146 | font-size: 2rem; 147 | font-weight: 500; 148 | letter-spacing: 1px; 149 | } 150 | 151 | #header h3{ 152 | font-size: 1rem; 153 | font-weight: 400; 154 | width: 80%; 155 | line-height: 1.5rem; 156 | color: #696969; 157 | } 158 | 159 | #header-text{ 160 | width: 50%; 161 | padding-left: 6rem; 162 | } 163 | 164 | #header-text button{ 165 | height: 2rem; 166 | width: 8rem; 167 | font-size: 1.15rem; 168 | background-color: white; 169 | box-sizing: content-box; 170 | border: 1px solid black; 171 | color: #696969; 172 | cursor: pointer; 173 | transition: 0.2s ease-in-out; 174 | letter-spacing: 0.5px; 175 | } 176 | 177 | #header-text button:hover{ 178 | transform: scale(1.05); 179 | } 180 | 181 | #header-img{ 182 | width: 22%; 183 | } 184 | 185 | @media screen and (max-width: 978px){ 186 | #header-img{ 187 | display: none; 188 | } 189 | 190 | #header{ 191 | margin-top: 3rem; 192 | } 193 | 194 | #header-text{ 195 | width: 100%; 196 | } 197 | 198 | #header h1{ 199 | margin: 0; 200 | margin-top: 3.5rem; 201 | } 202 | } 203 | 204 | @media screen and (max-width: 720px){ 205 | #header-text h1{ 206 | font-size: 2rem; 207 | } 208 | 209 | #header{ 210 | margin-top: 2rem; 211 | } 212 | 213 | #header-text{ 214 | padding-left: 1rem; 215 | width: 100%; 216 | } 217 | } 218 | 219 | /*categories*/ 220 | 221 | #categories{ 222 | display: flex; 223 | flex-direction: row; 224 | justify-content: center; 225 | gap: 2rem; 226 | box-sizing: border-box; 227 | background-color: #f3f5d885; 228 | width: 100%; 229 | flex-wrap: wrap; 230 | height: auto; 231 | padding: 1.5rem; 232 | padding-top: 1rem; 233 | padding-bottom: 2.5rem; 234 | margin-bottom: 1.5rem; 235 | z-index: 98; 236 | } 237 | 238 | .category{ 239 | height: 140px; 240 | width: 140px; 241 | border-radius: 50%; 242 | text-align: center; 243 | border: white 5px solid; 244 | box-shadow: 0px 2px 8px 0px #c7c7c7; 245 | transition: 0.15 ease-in-out; 246 | cursor: pointer; 247 | transition: 0.1s ease-in-out; 248 | } 249 | 250 | .category:hover{ 251 | transform: scale(1.05); 252 | } 253 | 254 | .category p{ 255 | font-weight: 100; 256 | color: black; 257 | } 258 | 259 | .category img{ 260 | border-radius: 50%; 261 | } 262 | 263 | /*search section*/ 264 | 265 | #search{ 266 | width: 100%; 267 | height: auto; 268 | margin-bottom: 1rem; 269 | } 270 | 271 | #search-bar{ 272 | margin-bottom: 1.5rem; 273 | box-shadow: 0px 2px 8px 0px #c7c7c7; 274 | padding: 0.5rem; 275 | width: 40%; 276 | color: #696969; 277 | display: flex; 278 | align-items: center; 279 | justify-content: right; 280 | gap: 1rem; 281 | position: relative; 282 | flex-wrap: wrap; 283 | } 284 | 285 | #location{ 286 | display: inline-block; 287 | position: absolute; 288 | left: 2rem; 289 | flex-shrink: 0; 290 | } 291 | 292 | #search-side{ 293 | width: 70%; 294 | flex-shrink: 1; 295 | } 296 | 297 | #search-bar input{ 298 | width: 65%; 299 | height: 1rem; 300 | border: none; 301 | font-size: 1rem; 302 | border-radius: 0.8rem; 303 | padding-left: 1rem; 304 | padding-right: 1rem; 305 | padding-top: 0.5rem; 306 | padding-bottom: 0.5rem; 307 | color: #696969; 308 | } 309 | 310 | #search-bar i{ 311 | font-size: 1.15rem; 312 | color: #696969 !important; 313 | } 314 | 315 | #location{ 316 | width: auto; 317 | } 318 | 319 | #location i{ 320 | position: absolute; 321 | left: -1.5rem; 322 | color: red !important; 323 | } 324 | 325 | #search-divider{ 326 | position: relative; 327 | right: 10px; 328 | font-size: 1.5rem; 329 | } 330 | 331 | #search-main{ 332 | width: inherit; 333 | display: flex; 334 | flex-direction: column; 335 | align-items: center; 336 | } 337 | 338 | #drop-icon{ 339 | position: relative; 340 | right: 20px; 341 | } 342 | 343 | #drop-icon i{ 344 | cursor: pointer; 345 | } 346 | 347 | #arrow-downBox{ 348 | height: 5rem; 349 | width: 22rem; 350 | overflow-y: scroll; 351 | box-shadow: 0px 2px 8px 0px #c7c7c7; 352 | position: absolute; 353 | background-color: white; 354 | border-radius: 0.8rem; 355 | z-index: 99; 356 | top: 4rem; 357 | left: 0; 358 | border: 1px solid #f1f1f1; 359 | padding: 0.65rem; 360 | display: none; 361 | } 362 | 363 | #arrow-downBox:hover{ 364 | background-color: #f8f8f8; 365 | } 366 | 367 | #detect{ 368 | cursor: pointer; 369 | display: flex; 370 | flex-direction: row; 371 | font-size: 1.1rem; 372 | align-items: center; 373 | gap: 1rem; 374 | color: red; 375 | font-weight: 200; 376 | } 377 | 378 | #arrow-downBox > p{ 379 | margin-top: -0.75rem; 380 | margin-left: 2.2rem; 381 | font-size: 0.85rem; 382 | } 383 | 384 | @media screen and (max-width: 1420px){ 385 | #search-side{ 386 | width: 60%; 387 | } 388 | } 389 | 390 | @media screen and (max-width: 960px){ 391 | #search-bar{ 392 | width: 65%; 393 | } 394 | #search-side{ 395 | width: 60%; 396 | } 397 | } 398 | 399 | @media screen and (max-width: 620px){ 400 | #search-bar{ 401 | width: 85%; 402 | } 403 | 404 | #search-bar input{ 405 | width: 50%; 406 | } 407 | } 408 | 409 | /*filter*/ 410 | 411 | #filter{ 412 | display: flex; 413 | margin-bottom: 3rem; 414 | width: 40%; 415 | gap: 1rem; 416 | justify-content: center; 417 | align-items: center; 418 | flex-wrap: wrap; 419 | opacity: 0.75; 420 | } 421 | 422 | #filter i{ 423 | color: #696969; 424 | position: relative; 425 | top: 3px; 426 | cursor: pointer; 427 | font-size: 0.85rem; 428 | letter-spacing: 1px; 429 | } 430 | 431 | .filter-box{ 432 | height: 1.4rem; 433 | color: #696969; 434 | text-align: center; 435 | font-size: 0.85rem; 436 | width: 4.5rem; 437 | border-radius: 0.75rem; 438 | border: 1px solid #a9a3a3; 439 | padding: 0.25rem; 440 | display: flex; 441 | justify-content: center; 442 | gap: 0.25rem; 443 | align-items: center; 444 | box-shadow: 0px 2px 5px 0px #c7c7c7; 445 | } 446 | 447 | @media screen and (max-width: 1020px){ 448 | #filter{ 449 | width: 90%; 450 | } 451 | } 452 | 453 | /*cards*/ 454 | 455 | #cards{ 456 | display: flex; 457 | flex-wrap: wrap; 458 | justify-content: center; 459 | width: 100%; 460 | gap: 3rem; 461 | margin-bottom: 2rem; 462 | } 463 | 464 | .card{ 465 | height: 24.5rem; 466 | width: 19rem; 467 | position: relative; 468 | background-color: white; 469 | border: 8px white solid; 470 | z-index: 98; 471 | } 472 | 473 | .card:hover{ 474 | box-shadow: 0px 2px 8px 0px #c7c7c7; 475 | } 476 | 477 | .card img{ 478 | height: 68%; 479 | width: 100%; 480 | } 481 | 482 | .card-body{ 483 | position: relative; 484 | } 485 | 486 | .rating{ 487 | font-weight: 400; 488 | font-size: 0.85rem; 489 | height: 0.95rem; 490 | width: 2.7rem; 491 | background-color: var(--primary-color); 492 | text-align: center; 493 | color: white; 494 | border-radius: 0.5rem; 495 | padding: 0.2rem; 496 | position: absolute; 497 | top: 0; 498 | right: 0; 499 | } 500 | 501 | .rating i{ 502 | font-size: 0.5rem; 503 | position: relative; 504 | bottom: 2px; 505 | color: white; 506 | } 507 | 508 | .name{ 509 | margin-top: 0.5rem; 510 | font-size: 1.25rem; 511 | letter-spacing: 1px; 512 | } 513 | 514 | .description{ 515 | font-weight: 0; 516 | color: #868686; 517 | margin-bottom: 1rem; 518 | letter-spacing: 0.5px; 519 | font-size: 0.9rem; 520 | } 521 | 522 | .price{ 523 | display: inline-block; 524 | background-color: var(--primary-color); 525 | color: white; 526 | font-weight: 900; 527 | padding: 0.5rem; 528 | box-sizing: border-box; 529 | display: inline-block; 530 | border-radius: 0.25rem; 531 | font-size: 0.85rem; 532 | } 533 | 534 | .add2cart{ 535 | display: inline-block; 536 | padding: 0.5rem; 537 | border: 1px solid #696969; 538 | font-weight: 100; 539 | margin-left: 0.5rem; 540 | border-radius: 0.25rem; 541 | cursor: pointer; 542 | font-size: 0.85rem; 543 | letter-spacing: 1px; 544 | } 545 | 546 | /*provide section*/ 547 | 548 | #provide{ 549 | position: relative; 550 | width: 100%; 551 | padding-top: 4rem; 552 | background-color: #f3f5d885; 553 | padding-bottom: 5.5rem; 554 | } 555 | 556 | #provide h1{ 557 | font-size: 2rem; 558 | font-weight: 100; 559 | margin: auto; 560 | margin-bottom: 3rem; 561 | letter-spacing: 0.5px; 562 | } 563 | 564 | #provide h3{ 565 | font-size: 1.25rem; 566 | font-weight: 100; 567 | letter-spacing: 1px; 568 | line-height: 18px; 569 | } 570 | 571 | .provide-card{ 572 | height: auto; 573 | width: 30rem; 574 | box-sizing: border-box; 575 | padding: 2rem; 576 | box-shadow: 1px 13px 20px #e4e5e6; 577 | border-radius: 1rem; 578 | z-index: 99; 579 | color: #6a6a6a; 580 | } 581 | 582 | .sm{ 583 | font-size: 0.45rem; 584 | position: relative; 585 | bottom: 2.5px; 586 | color: #696969; 587 | } 588 | 589 | .i span{ 590 | font-size: 0.9rem; 591 | font-weight: 100 !important; 592 | } 593 | 594 | .cardcolor{ 595 | background-color: var(--primary-color); 596 | color: white; 597 | } 598 | 599 | .cardwhite{ 600 | background-color: white; 601 | color: black; 602 | } 603 | 604 | #provide-cards{ 605 | display: flex; 606 | justify-content: space-evenly; 607 | width: 80%; 608 | flex-wrap: wrap; 609 | } 610 | 611 | .provide-logo i{ 612 | font-size: 4rem; 613 | } 614 | 615 | .logoblack{ 616 | color: black; 617 | } 618 | 619 | .logowhite{ 620 | color: white; 621 | } 622 | 623 | @media screen and (max-width: 720px){ 624 | #provide h1{ 625 | font-size: 2rem; 626 | } 627 | } 628 | 629 | @media screen and (max-width: 950px){ 630 | .provide-card:nth-child(2){ 631 | margin-top: 2rem; 632 | } 633 | } 634 | 635 | /*about*/ 636 | 637 | #about{ 638 | margin-top: 3.5rem; 639 | width: 100%; 640 | } 641 | 642 | #about h1{ 643 | font-size: 2rem; 644 | font-weight: 350; 645 | margin: auto; 646 | margin-bottom: 3rem; 647 | color: black; 648 | } 649 | 650 | #about-text{ 651 | width: 60%; 652 | } 653 | 654 | #about h3{ 655 | font-size: 1.1rem; 656 | font-weight: 400; 657 | line-height: 1.75rem; 658 | word-spacing: 0.35rem; 659 | display: inline-block; 660 | vertical-align: top; 661 | color: black; 662 | } 663 | 664 | #about-body{ 665 | text-align: center; 666 | display: flex; 667 | justify-content: center; 668 | width: 85%; 669 | } 670 | 671 | #about-img{ 672 | display: inline-block; 673 | width: 50%; 674 | position: relative; 675 | top: 15px; 676 | } 677 | 678 | @media screen and (max-width: 1020px){ 679 | #about-img{ 680 | display: none; 681 | } 682 | 683 | #about-text{ 684 | width: 90%; 685 | } 686 | } 687 | --------------------------------------------------------------------------------