From b4c93d92155859f17aa8055982b71c4173dc7a81 Mon Sep 17 00:00:00 2001 From: taruntailor7 <66818449+taruntailor7@users.noreply.github.com> Date: Fri, 5 Aug 2022 03:34:55 +0530 Subject: [PATCH] About to Complete Project --- account.html | 2 +- cart.css | 46 +++- cart.html | 24 +- cart.js | 111 +++++++--- checkout.css | 42 +++- checkout.html | 22 +- checkout.js | 80 ++++++- homepage.css | 600 ++++++++++++++++++++++++++++++++++++++++++++++++++ homepage.html | 250 +++++++++++++++++++++ homepage.js | 345 +++++++++++++++++++++++++++++ index.css | 19 +- index.html | 19 +- index.js | 43 +++- location.css | 47 +++- location.html | 22 +- location.js | 16 +- login.css | 23 +- login.html | 47 +--- login.js | 38 +++- order.css | 473 +++++++++++++++++++++++++++++++++++++++ order.html | 221 +++++++++++++++++++ order.js | 119 ++++++++++ otp.css | 512 ++++++++++++++++++++++++++++++++++++++++++ otp.html | 211 ++++++++++++++++++ otp.js | 118 ++++++++++ payment.css | 12 +- payment.html | 19 +- payment.js | 16 +- signup.css | 20 +- signup.html | 48 +--- signup.js | 19 +- 31 files changed, 3364 insertions(+), 220 deletions(-) create mode 100644 homepage.css create mode 100644 homepage.html create mode 100644 homepage.js create mode 100644 order.css create mode 100644 order.html create mode 100644 order.js diff --git a/account.html b/account.html index e9bf88e..d85db43 100644 --- a/account.html +++ b/account.html @@ -8,7 +8,7 @@ Account Page - +

Logout

 \ No newline at end of file diff --git a/cart.css b/cart.css index d201eab..5b78a89 100644 --- a/cart.css +++ b/cart.css @@ -76,20 +76,20 @@ header{ /* border:1px solid red; */ width: 27%; } -#container > :last-child > i,a{ +#container > :last-child > a{ font-size:15px; color:grey; margin-top: 15px; } -#container > :last-child > i{ +/* #container > :last-child > i{ margin-top: 17px; -} +} */ #container > :last-child > p{ font-size:15px; color:grey; margin-top: 15px; font-family: sans-serif; - margin-left: -25px; + margin-left: -40px; } a>i{ color:grey; @@ -104,7 +104,7 @@ a>i:hover{ #container > :last-child > p > a:hover{ color: black; } -#container > :last-child > button{ +/* #container > :last-child > button{ border: 1px solid #ccc; border-radius:10px; height:40px; @@ -112,7 +112,7 @@ a>i:hover{ margin-top:3.5px; background-color:#5DC6AD; color:white; -} +} */ #container > :last-child > i:hover{ color:black; } @@ -224,6 +224,30 @@ a>i:hover{ margin-top:55px; margin-left:50px; } + /* new css */ +.nameAndQuantityPrice>div:first-child{ + width:40%; +} +.nameAndQuantityPrice>div:nth-child(2){ + width:20%; + display:flex; + justify-content: space-around; + position: relative; +} +.nameAndQuantityPrice>div:nth-child(2)>button{ + width:25px; + height: 35px; + margin-top:18px; + border: none; + border-radius:4px; + background-color:#5DC6AD; + color: #fff; +} +.nameAndQuantityPrice>div:nth-child(2)>p{ + position: absolute; + top: -55px; +} +/* End */ .nameAndQuantityPrice>button{ width:100px; height: 35px; @@ -235,7 +259,7 @@ a>i:hover{ } #cartValue{ width:33%; - height:450px; + height:500px; padding: 10px; margin-top:20px; border-radius: 5px; @@ -271,6 +295,10 @@ td{ /* font-family:Helvetica Neue, Helvetica, Arial, sans-serif; */ font-family:Verdana, Geneva, Tahoma, sans-serif; } +.item>:first-child>td{ + font-size:25px; + color: black; +} hr{ width: 95%; margin: auto; @@ -283,6 +311,10 @@ hr{ font-size:12px; font-family:Verdana, Geneva, Tahoma, sans-serif; } +.Pay>tbody>:first-child>td{ + font-size:14px; + color: black; +} #checkout{ width: 100%; margin: auto; diff --git a/cart.html b/cart.html index 117c8dc..f498f38 100644 --- a/cart.html +++ b/cart.html @@ -16,7 +16,7 @@
- logo + logo

Location

@@ -27,10 +27,15 @@

Cart

- -

Credits

- - + + +

Credits

+ + +

+ +
@@ -67,7 +72,7 @@
-

ok

+

@@ -79,7 +84,12 @@

ok

Bill Details - + + + Cart Items + + + Total Items Price diff --git a/cart.js b/cart.js index 9f27f00..592935e 100644 --- a/cart.js +++ b/cart.js @@ -1,22 +1,31 @@ var cartProduct = JSON.parse(localStorage.getItem("cart")) || []; - +// console.log(cartProduct); var cart = document.getElementById('cart'); if(cartProduct.length == 0){ displayEmptyProduct(); } else{ - displayProduct(); + displayProduct(cartProduct); cartValue(); } -document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length; +document.getElementById("items").innerText = cartProduct.length; +// document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length; document.getElementById('items').innerText =cartProduct.length+" items"; document.getElementById('items').style.fontSize="12px"; function cartValue(){ - var total = cartProduct.reduce(function(accumulator, element) { - return accumulator+Number(element.price); - },0); + var total = 0; + if(cartProduct.length!=0){ + cartProduct.map(function(element){ + total += element.price*element.piec; + }); + } + else{ + total = cartProduct.reduce(function(accumulator, element) { + return accumulator+Number(element.price); + },0); + } document.getElementById("total").innerText ="₹ "+total; document.getElementById("totals").innerText ="₹ "+total; @@ -24,6 +33,12 @@ function cartValue(){ document.getElementById("check").innerText ="₹ "+total; } +// Header Section +var loggedInUser = JSON.parse(localStorage.getItem("userName")) || []; +// console.log(loggedInUser); + +document.getElementById("user").innerText =loggedInUser[0].name; + function displayEmptyProduct(){ document.getElementById('cart').style.display = 'none'; document.getElementById('cartValue').style.display = 'none'; @@ -34,7 +49,7 @@ function displayEmptyProduct(){ // imgDiv.setAttribute("class", "img"); var image = document.createElement('img'); - image.setAttribute("src","/system-zombies/images/empty.png"); + image.setAttribute("src","https://webasset.fraazo.com/production/empty_cart.35cdf7d10a7af693e2ea.png"); // imgDiv.append(image); @@ -49,7 +64,7 @@ function displayEmptyProduct(){ // div.setAttribute("id", "button"); var a = document.createElement('a'); - a.setAttribute("href", "index.html"); + a.setAttribute("href", "homepage.html"); var btn = document.createElement('button'); btn.innerText = "Let's Shop!"; @@ -60,31 +75,60 @@ function displayEmptyProduct(){ document.getElementById("empty").append(h1,image,h2,p,a); } -function displayProduct(){ +function displayProduct(prod){ document.getElementById("empty").style.display = "none"; - // document.getElementById("cart").innerText=""; - cartProduct.map(function(element, index){ - var div = document.createElement("div"); + document.getElementById("cart").innerText=""; + prod.map(function(element, index){ + // var h1 = document.createElement("h1"); + // h1.innerText = cartProduct.length; - var image = document.createElement("img"); - image.setAttribute("src", element.image_url); + var div = document.createElement("div"); + // div.style.border = "1px solid blue"; + var image = document.createElement("img"); + image.setAttribute("src", element.image_url); var mainDiv = document.createElement("div"); mainDiv.setAttribute("class","nameAndQuantityPrice"); - + // mainDiv.style.border = "1px solid red"; + var div1 = document.createElement("div"); + // div1.style.border = "1px solid red"; + var p = document.createElement("p"); + p.innerText = element.name; - var p = document.createElement("p"); - p.innerText = element.name; - - var quantity = document.createElement("p"); - quantity.innerText = element.quantity; + var quantity = document.createElement("p"); + quantity.innerText = element.quantity; - var price = document.createElement("h4"); - price.innerText = "₹ "+ element.price; + var price = document.createElement("h4"); + price.innerText = "₹ "+ element.price*element.piec; //jsoidghdhrgdd div1.append(p,quantity,price); + var btnDiv = document.createElement("div"); + btnDiv.width = "100%" + // btnDiv.style.border = "1px solid black" + + var minus = document.createElement("button"); + minus.innerText = "-"; + minus.addEventListener("click",function(){ + decrease(index); + refreshPage(); + }); + + var pieces = document.createElement("p"); + pieces.innerText = element.piec; + pieces.setAttribute("id", "decVal") + pieces.style.marginTop = "80px" + + var plus = document.createElement("button"); + plus.innerText = "+"; + plus.addEventListener("click",function(){ + increase(index); + refreshPage(); + }); + + btnDiv.append(minus, pieces, plus,); + var btn = document.createElement("button"); btn.innerText = "Remove"; btn.addEventListener("click", function(){ @@ -92,7 +136,7 @@ function displayProduct(){ refreshPage(); // this is for refreshing the page because when we remove last one page should refresh and then show empty cart. }); - mainDiv.append(div1,btn); + mainDiv.append(div1, btnDiv, btn); div.append(image,mainDiv); document.getElementById("cart").append(div); @@ -101,10 +145,27 @@ function displayProduct(){ function remove(index){ cartProduct.splice(index,1); - displayProduct(); localStorage.setItem("cart",JSON.stringify(cartProduct)); + displayProduct(cartProduct); } function refreshPage(){ window.location.reload(); -} \ No newline at end of file +} + +function decrease(index){ + cartProduct[index].piec = cartProduct[index].piec - 1; + if(cartProduct[index].piec == 0){ + remove(index); + } + localStorage.setItem("cart",JSON.stringify(cartProduct)); + displayProduct(cartProduct); + +} +function increase(index){ + cartProduct[index].piec = cartProduct[index].piec + 1; + localStorage.setItem("cart",JSON.stringify(cartProduct)); + displayProduct(cartProduct); +} + +// console.log(cartProduct); \ No newline at end of file diff --git a/checkout.css b/checkout.css index ee8fe25..afeec9c 100644 --- a/checkout.css +++ b/checkout.css @@ -81,15 +81,15 @@ header{ color:grey; margin-top: 15px; } -#container > :last-child > i{ +/* #container > :last-child > i{ margin-top: 17px; -} +} */ #container > :last-child > p{ font-size:15px; color:grey; margin-top: 15px; font-family: sans-serif; - margin-left: -25px; + margin-left: -40px; } a>i{ color:grey; @@ -104,7 +104,7 @@ a>i:hover{ #container > :last-child > p > a:hover{ color: black; } -#container > :last-child > button{ +/* #container > :last-child > button{ border: 1px solid #ccc; border-radius:10px; height:40px; @@ -112,7 +112,7 @@ a>i:hover{ margin-top:3.5px; background-color:#5DC6AD; color:white; -} +} */ #container > :last-child > i:hover{ color:black; } @@ -269,6 +269,30 @@ a>i:hover{ margin-top:55px; margin-left:50px; } +/* new css */ +.nameAndQuantityPrice>div:first-child{ + width:40%; +} +.nameAndQuantityPrice>div:nth-child(2){ + width:20%; + display:flex; + justify-content: space-around; + position: relative; +} +.nameAndQuantityPrice>div:nth-child(2)>button{ + width:25px; + height: 35px; + margin-top:18px; + border: none; + border-radius:4px; + background-color:#5DC6AD; + color: #fff; +} +.nameAndQuantityPrice>div:nth-child(2)>p{ + position: absolute; + top: -55px; +} +/* End */ .nameAndQuantityPrice>button{ width:100px; height: 35px; @@ -316,6 +340,10 @@ td{ /* font-family:Helvetica Neue, Helvetica, Arial, sans-serif; */ font-family:Verdana, Geneva, Tahoma, sans-serif; } +/* .item>:first-child>td{ + font-size:25px; + color: black; +} */ hr{ width: 95%; margin: auto; @@ -328,6 +356,10 @@ hr{ font-size:12px; font-family:Verdana, Geneva, Tahoma, sans-serif; } +/* .Pay>tbody>:first-child>td{ + font-size:14px; + color: black; +} */ #checkout{ width: 100%; margin: auto; diff --git a/checkout.html b/checkout.html index 9a9629f..950d6b6 100644 --- a/checkout.html +++ b/checkout.html @@ -16,7 +16,7 @@
- logo + logo

Location

@@ -27,10 +27,15 @@

Cart

- -

Credits

- - + + +

Credits

+ + +

+ +
@@ -90,7 +95,12 @@

Bill Details - + + Total Items Price diff --git a/checkout.js b/checkout.js index d12e612..8817571 100644 --- a/checkout.js +++ b/checkout.js @@ -5,19 +5,37 @@ if(cartProduct.length == 0){ displayEmptyProduct(); } else{ - displayProduct(); + displayProduct(cartProduct); cartValue(); } +// Header Section +var loggedInUser = JSON.parse(localStorage.getItem("userName")) || []; +console.log(loggedInUser); + +document.getElementById("user").innerText =loggedInUser[0].name; + +// +// document.getElementById("items").innerText = cartProduct.length; document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length; document.getElementById('items').innerText =cartProduct.length+" items"; document.getElementById('items').style.fontSize="12px"; function cartValue(){ - var total = cartProduct.reduce(function(accumulator, element) { - return accumulator+Number(element.price); - },0); - + var total = 0; + if(cartProduct.length!=0){ + cartProduct.map(function(element){ + total += element.price*element.piec; + }); + } + else{ + total = cartProduct.reduce(function(accumulator, element) { + return accumulator+Number(element.price); + },0); + } + + localStorage.setItem("total",total); + // console.log() document.getElementById("total").innerText ="₹ "+total; document.getElementById("totals").innerText ="₹ "+total; document.getElementById("pay").innerText ="₹ "+total; @@ -49,7 +67,7 @@ function displayEmptyProduct(){ // div.setAttribute("id", "button"); var a = document.createElement('a'); - a.setAttribute("href", "index.html"); + a.setAttribute("href", "homepage.html"); var btn = document.createElement('button'); btn.innerText = "Let's Shop!"; @@ -60,10 +78,10 @@ function displayEmptyProduct(){ document.getElementById("empty").append(h1,image,h2,p,a); } -function displayProduct(){ +function displayProduct(prod){ document.getElementById("empty").style.display = "none"; // document.getElementById("cart").innerHTML=""; - cartProduct.map(function(element, index){ + prod.map(function(element, index){ var div = document.createElement("div"); var image = document.createElement("img"); @@ -81,10 +99,35 @@ function displayProduct(){ quantity.innerText = element.quantity; var price = document.createElement("h4"); - price.innerText = "₹ "+ element.price; + price.innerText = "₹ "+ element.price*element.piec; div1.append(p,quantity,price); + var btnDiv = document.createElement("div"); + btnDiv.width = "100%" + // btnDiv.style.border = "1px solid black" + + var minus = document.createElement("button"); + minus.innerText = "-"; + minus.addEventListener("click",function(){ + decrease(index); + refreshPage(); + }); + + var pieces = document.createElement("p"); + pieces.innerText = element.piec; + pieces.setAttribute("id", "decVal") + pieces.style.marginTop = "80px" + + var plus = document.createElement("button"); + plus.innerText = "+"; + plus.addEventListener("click",function(){ + increase(index); + refreshPage(); + }); + + btnDiv.append(minus, pieces, plus,); + var btn = document.createElement("button"); btn.innerText = "Remove"; btn.addEventListener("click", function(){ @@ -92,7 +135,7 @@ function displayProduct(){ refreshPage(); // this is for refreshing the page because when we remove last one page should refresh and then show empty cart. }); - mainDiv.append(div1,btn); + mainDiv.append(div1,btnDiv,btn); div.append(image,mainDiv); document.getElementById("cart").append(div); @@ -101,10 +144,25 @@ function displayProduct(){ function remove(index){ cartProduct.splice(index,1); - displayProduct(); localStorage.setItem("cart",JSON.stringify(cartProduct)); + displayProduct(cartProduct); } function refreshPage(){ window.location.reload(); +} + +function decrease(index){ + cartProduct[index].piec = cartProduct[index].piec - 1; + if(cartProduct[index].piec == 0){ + remove(index); + } + localStorage.setItem("cart",JSON.stringify(cartProduct)); + displayProduct(cartProduct); + +} +function increase(index){ + cartProduct[index].piec = cartProduct[index].piec + 1; + localStorage.setItem("cart",JSON.stringify(cartProduct)); + displayProduct(cartProduct); } \ No newline at end of file diff --git a/homepage.css b/homepage.css new file mode 100644 index 0000000..7cb084a --- /dev/null +++ b/homepage.css @@ -0,0 +1,600 @@ +*{ + margin:0px; +} +/* Header Section */ +header{ + /* overflow: hidden; */ + background-color: #fff; + position: fixed; + top: 0; + width: 100%; + z-index: 1000; +} +#container{ + width: 100%; + margin: auto; + padding:20px 10px; + position:relative; + display:flex; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + /* border-top: 1px solid black; */ +} +#container > div { + /* border-top: 1px solid teal; */ + display: flex; + justify-content:space-around; +} +#container > :first-child{ + width: 70%; +} +#container > :first-child > a { + width: 14%; + margin-top:0px; +} +#container > :first-child > div{ + display: flex; +} +#container > :first-child > div > i{ + font-size:15px; + color:grey; + position:absolute; + left:250px; + top: 39px; +} +#container > :first-child > div > p{ + font-size:15px; + color:grey; + font-family: sans-serif; + position:absolute; + left:270px; + top: 37px; +} +#container > :first-child > div > i:hover{ + color:black; +} +#container > :first-child > div > p:hover{ + color:black; +} +#container > :first-child > input{ + border: 1px solid #ccc; + border-radius:30px; + width: 60%; + padding:15px; + font-family: sans-serif; + margin-left:120px; +} +#container > :first-child > i{ + color:grey; + position:absolute; + right:510px; + top:37px; +} +#container > :first-child > i:hover{ + color:#5DC6AD; +} +#container > :last-child{ + /* border:1px solid red; */ + width: 27%; + position: relative; +} +#container > :last-child > a{ + font-size:15px; + color:grey; + margin-top: 15px; +} +/* #container > :last-child > i{ + margin-top: 17px; +} */ +#container > :last-child > p{ + font-size:15px; + color:grey; + margin-top: 15px; + font-family: sans-serif; + margin-left: -40px; +} +a>i{ + color:grey; +} +a>i:hover{ + color: black; +} +#container > :last-child > p > a{ + color: grey; + text-decoration: none; +} +#container > :last-child > p > a:hover{ + color: black; +} +/* #container > :last-child > button{ + border: 1px solid #ccc; + border-radius:10px; + height:40px; + width:80px; + margin-top:3.5px; + background-color:#5DC6AD; + color:white; +} */ +#container > :last-child > i:hover{ + color:black; +} +#container > :last-child > p:hover{ + color:black; +} +#valueCart{ + background-color:#51D7B7; + padding:2px 5px 1px 5px; + border-radius:50%; + position:absolute; + left:74px; + top:-11px; +} +/* Category Section */ +.category{ + margin-top: 90px; + display:flex; + justify-content:center; + border:1px solid #ccc; + border-left: none; + border-right: none; + border-top: none; +} +.btn{ + background-color:white; + margin-top: 8px; + color:grey; +} +.dropdown:hover .dropdown-content { + display: block; +} +.imgs{ + width: 95%; + margin: auto; + display:flex; + /* border: 1px solid green; */ + justify-content: space-between; +} +/* Carousel Section */ +.carou{ + width: 65%; + margin-top: 20px; + /* border: 1px solid blue; */ + position: relative; +} +.carousel-indicators{ + position: absolute; + top:300px; +} +ol > li{ + color: #5DC6AD; +} +.banners{ + width: 33%; + margin-top: 20px; + /* border: 1px solid red; */ + align-items:center +} +.banners img{ + width: 100%; +} +.banners :nth-child(2){ + margin-top:13px; +} +.banners :last-child{ + margin-top: 13px; +} +/*Best Deal Section*/ +.bestDeals{ + margin-top:50px; +} +#bestdeal { + width:95%; + margin: auto; + display: grid; + grid-template-columns: repeat(5,1fr); + gap: 20px; + margin-top:30px; +} +#bestdeal > div{ + box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; + border-radius: 5px; + position: relative; +} +h3, hr{ + width: 95%; + margin: auto; + font-family: sans-serif; + font-weight: lighter; +} +#bestdeal > div > img{ + width: 100%; + background-color:#F9F9F9; +} +#bestdeal > div >:nth-child(2){ + margin-top:10px; + font-size:14px; + margin-left: 10px; +} +#bestdeal > div >:nth-child(3){ + margin-top:15px; + font-size:11px; + margin-left: 10px; +} +#bestdeal > div >:nth-child(4){ + margin-top:-5px; + font-size:15px; + margin-left: 10px; +} +#bestdeal > div > button{ + border:1px solid #5DC6AD;; + border-radius:15px; + width:25%; + margin-left: 190px; + position: absolute; + bottom: 10px; + color:#5DC6AD; + background-color:white; +} +#bestdeal > div > button:hover{ + background-color: #5DC6AD; + color:white; +} +#bestdeal > div:hover{ + /* transition-timing-function: ease-in; */ + transition: all ease-in 0.3s; + box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; +} +/* Fruites and Vegetables Section*/ +.FandV{ + width:50%; + display:flex; + margin: auto; + margin-top:50px; +} +.FandV > a > img{ + width:80%; + margin-top:50px; +} + +/* Fruits Section */ +.fruSection{ + margin-top:50px; +} +#fruits { + width:95%; + margin: auto; + display: grid; + grid-template-columns: repeat(5,1fr); + gap: 20px; + margin-top:30px; +} +#fruits > div{ + box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; + border-radius: 5px; + position: relative; +} +#fruits > div > img{ + width: 100%; + background-color:#F9F9F9; +} +#fruits > div >:nth-child(2){ + margin-top:10px; + font-size:14px; + margin-left: 10px; +} +#fruits > div >:nth-child(3){ + margin-top:15px; + font-size:11px; + margin-left: 10px; +} +#fruits > div >:nth-child(4){ + margin-top:-5px; + font-size:15px; + margin-left: 10px; +} +#fruits > div > button{ + border:1px solid #5DC6AD;; + border-radius:15px; + width:25%; + margin-left: 190px; + position: absolute; + bottom: 10px; + color:#5DC6AD; + background-color:white; +} +#fruits > div > button:hover{ + background-color: #5DC6AD; + color:white; +} +#fruits > div:hover{ + transition: all ease-in 0.3s; + box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; +} +/* Vegetables Section */ +.vegeSection{ + margin-top:50px; +} +#vegetables{ + width:95%; + margin: auto; + display: grid; + grid-template-columns: repeat(5,1fr); + gap: 20px; + margin-top:30px; +} +#vegetables > div{ + box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; + border-radius: 5px; + position: relative; +} +#vegetables > div:hover{ + opacity: 1; +} +#vegetables > div > img{ + width: 100%; + background-color:#F9F9F9; +} +#vegetables > div >:nth-child(2){ + margin-top:10px; + font-size:14px; + margin-left: 10px; +} +#vegetables > div >:nth-child(3){ + margin-top:15px; + font-size:11px; + margin-left: 10px; +} +#vegetables > div >:nth-child(4){ + margin-top:-5px; + font-size:15px; + margin-left: 10px; +} +#vegetables > div > button{ + border:1px solid #5DC6AD;; + border-radius:15px; + width:25%; + margin-left: 190px; + position: absolute; + bottom: 10px; + color:#5DC6AD; + background-color:white; +} +#vegetables > div > button:hover{ + background-color: #5DC6AD; + color:white; +} +#vegetables > div:hover{ + transition: all ease-in 0.3s; + box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; +} +/* Our Application Section */ +.application{ + width: 100%; + /* border: 1px solid black; */ + margin-top: 10px; + display:flex +} +.appImg{ + width: 50%; + /* border: 1px solid red; */ + /* display: flex; */ +} +.appImg >:first-child{ + width: 45%; + position:absolute; + z-index: -1; +} +.appImg >:last-child{ + width: 80%; + display: block; + margin-left: 5%; + margin-top: 130px; +} +.downloadApp{ + width: 50%; + /* border: 1px solid blue; */ +} +.download{ + width: 75%; + margin: auto; + margin-top:150px; +} +.download>h1{ + font-size:40px; +} +.download>p{ + margin-top:20px; +} +.roundedDiv{ + width: 45%; + margin-top:40px; + padding:8px; + border-radius: 30px; + /* border: 1px solid red; */ + display:flex; + justify-content:space-between; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; +} +.roundedDiv>div>i{ + font-size: 22px; +} +.roundedDiv>:first-child{ + background-color:black; + border-radius: 25px; + padding: 10px 15px 10px 15px; +} +.roundedDiv>:last-child{ + background-color:white; + border-radius: 25px; + padding: 10px; +} +.roundedDiv>:first-child>i{ + color:white; +} +.form{ + width: 100%; + margin-top:20px; +} +.form > input{ + width: 80%; + padding:20px; + border:1px solid #51D7B7; + border-radius: 5px; + outline: none; +} +.form > button{ + width: 80%; + margin-top: 20px; + padding:20px; + border:1px solid #ccc; + border-radius: 5px; + color: white; + background-color:#51D7B7; +} +.PandA{ + margin-top:50px; + color:grey; + font-size:18px; +} +/* Footer Image Section */ +.footerImg{ + width: 100%; + /* border: 1px solid white; */ +} +.footerImg > img{ + width: 100%; +} +/* Footer Section */ +.footer{ + width: 100%; + background-color:#165241; + padding-bottom: 20px; +} +.footer > :first-child{ + width: 95%; + margin: auto; + /* border: 1px solid blue; */ +} +.first{ + width: 95%; + display:flex; +} +.ff{ + width: 50%; + /* border: 1px solid red; */ + display:flex; + /* justify-content:space-between; */ +} +.fff{ + width: 40%; + /* border: 1px solid white; */ + color:#b9cbc6; + font-family: sans-serif; +} +.fff>p{ + margin-top:30px; + line-height: 2; + font-size: 15px; +} +.ffs{ + width: 40%; + margin-top: 26px; + margin-left: 100px; +} +.ffs>ul{ + font-size: 22px; + color:white; + font-family: sans-serif; +} +.ffs>ul>li{ + list-style: none; + font-size: 16px; + line-height: 2.5; + color:#b9cbc6; +} +.ffs>ul>li>a{ + text-decoration: none; + color:#b9cbc6; +} +.fs{ + width:50%; + display: flex; +} +.fsf{ + width: 40%; + /* border: 1px solid white; */ + margin-top: 26px; +} +.fss{ + width: 50%; + margin-top: 26px; + margin-left: 50px; + /* border: 1px solid white; */ +} +.fsf,.fss>ul{ + font-size: 22px; + color:white; + font-family: sans-serif; +} +.fsf>ul>li{ + list-style: none; + font-size: 16px; + line-height: 2.5; + color:#b9cbc6; +} +.fss>ul>li{ + list-style: none; + font-size: 16px; + line-height: 2.5; + color:#b9cbc6; +} +.fsf>ul>li>a{ + text-decoration: none; + color:#b9cbc6; +} +.fss>ul>li>a{ + text-decoration: none; + color:#b9cbc6; +} +.fss>ul>li>a>i{ + color:#b9cbc6; +} + +.second{ + width: 95%; + margin: auto; + /* border: 1px solid white; */ +} +.second > h1{ + color: white; +} +.second > p{ + color:#b9cbc6; + line-height:1.5; + text-align: justify; + margin-top: 20px; +} +.third{ + width: 95%; + margin: auto; +} +.third > p{ + color: #b9cbc6; + text-align: center; + margin-top:30px; + font-size: 16px; +} +.fss > h4{ + color: White; + margin-left: 40px; + margin-top: 30px; +} +.fss > h4 + div{ + width: 100%; + text-align: end; +} +.fss > h4 + div > :first-child{ + width: 39%; +} +.fss > h4 + div > :last-child{ + width: 48%; +} \ No newline at end of file diff --git a/homepage.html b/homepage.html new file mode 100644 index 0000000..7c58b94 --- /dev/null +++ b/homepage.html @@ -0,0 +1,250 @@ + + + + + + + + + + + + Buy Fresh Fruits & Vegetables Online at best price at Fraazo | Green Grocery Delivered Everyday | Fraazo + + + +
+
+
+ logo +
+ +

Location

+
+ + +
+
+ +

0

+

Cart

+ + +

Credits

+ + +

+ +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ +
+
+ 1 + 2 + 3 +
+
+
+ + +
+
+

BEST DEALS

+
+
+ + +
+
+
+ + +
+
+ fruit + vegetable +
+
+ + +
+
+

FRUITS

+
+
+ +
+
+
+ + +
+
+

VEGETABLES

+
+
+ +
+
+
+ + +
+
+
+ bg + mobileApp +
+
+
+

Download The App

+

Enter your phone number to receive a text with a link to
download the app

+
+
+ Android +
+
+ IPhone +
+
+
+ + +
+
+ Available On + play + apple +
+
+
+
+
+ + +
+ Footer Image +
+ + +
+
+
+
+
+ footer logo +

+ Order online vegetables & fruits + directly from the farm. Fraazo is + online platform that allows customer + to get farm fresh produce directly + from farmers. +

+
+
+ +
+
+
+
+ +
+
+ +

Download The App

+
+ play store + apple store +
+
+
+
+
+

Fresh Fruits & Vegetables Grocery Shopping Online

+

The quality of fruits & vegetables is synonymous with its freshness, while getting fresh fruits and vegetables is a tedious task at times but with Fraazo you can get it delivered at your doorstep. Fraazo brings a wide range of farm fresh fruits, vegetables and dairy products to you, all in just a click. We currently serve about more than 3lacs+ happy customers in Mumbai, Navi Mumbai, Thane, Kalyan-Dombivli and Virar. Fraazo has made online shopping of fresh produce much easier with its hassle-free home delivery options. You can choose the delivery slot as per your choice and schedule your order accordingly. Or you can simply opt for the option of 90 mins Express Delivery and get your order delivered in not more than 90 mins. The farm fresh fruits and vegetables on Fraazo are available at best prices compared to other vendors & supermarkets. Plus with so many exciting offers, one can save up to 20% on their Monthly grocery budgets. No need to wait in long queues in crowded supermarkets or local mandis for getting the best prices on veggies. Kick the stress out & just Fraazo your dose of freshness with savings at the comfort of your home. Fraazo directly sources fresh fruits and veggies from an extensive network of farmers across Maharashtra, hence bringing you fresh produce straight from farm to table in less than 18 hours. With our Safe & Hygienic packaging and minimal multiple handling, we ensure you get the best quality fresh produce.

+

The fruits and vegetables are 100% hand-picked fresh from farm, while some products are hydroponically-grown. The wide range of fruits and veggies on Fraazo include more than 100+ farm fresh vegetables and fruits, starting from regular veggies like dudhi, cauliflower, beetroot, cabbage, etc. to exotic veggies like broccoli, lettuce etc. We also provide the essential vegetable combos like Onion, Potato, Tomato Combo, Salad Combo, Fresh Cut-Veg Combos or Fruit Combos like Banana, Apple Combo, & more. There are a lot of exciting deals on vegetables & fruits, every day of the week, the major highlights being Monday Mandi, Veggie Wednesday, Freelivery Thursday & Fruit Friday.For payments, you can choose from the multiple payment options as Fraazo accepts Debit card, Credit card, UPI options like iMobile, Google Pay, 8+ e-Wallet options like Phonepe, JioPay, MobiKwik, Sodexo, NetBanking and Cash on Delivery (COD). If you ever have an issue with missing items or any quality issue, you can raise your concern with us in 48 hrs & we shall refund/ replace your product with “no-questions-asked-policy”. You can simply connect with our Customer Support team via Chat Support or Call on 9152291522.

+
+
+
+

© Copyrights 2021 - 2022. Fraazo. All Rights Reserved.

+
+
+
+ + + + \ No newline at end of file diff --git a/homepage.js b/homepage.js new file mode 100644 index 0000000..26d691d --- /dev/null +++ b/homepage.js @@ -0,0 +1,345 @@ +var fruits = [ + { + id: '1', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/FAVO21.png?width=256&height=256&format=webp", + name: "Indian Avocado", + quantity: "1 pc", + price: "89", + piec:1, + }, + { + id: '2', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/FBAN14.png?width=256&height=256&format=webp", + name: "Robusta Bnana", + quantity: "1 Kg", + price: "47", + piec:1, + }, + { + id: '3', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VPAP12.png?width=256&height=256&format=webp", + name: "Raw Papaya", + quantity: "1 pc", + price: "32", + piec:1, + }, + { + id: '4', + image_url: "https://imageprod.fraazo.com/fraazo-prod/products/product_images/000/000/157/original/data?width=256&height=256&format=webp", + name: "pineapple", + quantity: "1 pc", + price: "62", + piec:1, + }, + { + id: '5', + image_url: "https://imageprod.fraazo.com/fraazo-prod/products/product_images/000/000/261/original/data?width=256&height=256&format=webp", + name: "Pomegranate (Anar)", + quantity: "1 kg", + price: "120", + piec:1, + }, + // { + // id: '6', + // image_url: "https://imageprod.fraazo.com/fraazo-prod/products/product_images/000/000/432/original/data?width=256&height=256&format=webp", + // name: "Orange", + // quantity: "1 kg", + // price: "52", + // }, + // { + // id: '7', + // image_url: "https://imageprod.fraazo.com/fraazo-prod/products/product_images/000/000/442/original/data?width=256&height=256&format=webp", + // name: "Smoothie Combo (1kg Robusta Bnana + 1 pkt Blueberry)", + // quantity: "1 combo", + // price: "289", + // }, + // { + // id: '8', + // image_url: "https://imagemaster.fraazo.com/fraazo-master/products/FAVO21.png?width=256&height=256&format=webp", + // name: "Coconut Combo (2 pcs Coconuts)", + // quantity: "1 combo", + // price: "60", + // }, + // { + // id: '9', + // image_url: "https://imageprod.fraazo.com/fraazo-prod/products/product_images/000/000/446/original/data?width=256&height=256&format=webp", + // name: "Prasad Combo (Royal Gala Apple, Green Pear, Robusta Banana)", + // quantity: "1 combo", + // price: "288", + // }, + // { + // id: '10', + // image_url: "https://imageprod.fraazo.com/fraazo-prod/products/product_images/000/000/447/original/data?width=256&height=256&format=webp", + // name: "Shubh Combo (Red Delicious Apple, Robusta Banana, Coconut)", + // quantity: "1 combo", + // price: "253", + // }, +]; + +var vegetables = [ + { + id: '1', + image_url: "https://imageprod.fraazo.com/fraazo-prod/images/images/000/006/605/original/data?width=256&height=256", + name: "Tomato", + quantity: "1 kg", + price: "35", + piec:1, + }, + { + id: '2', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VARB12.png?width=256&height=256", + name: "Arbi", + quantity: "500 g", + price: "37", + piec:1, + }, + { + id: '3', + image_url: "https://imageprod.fraazo.com/fraazo-prod/images/images/000/009/241/original/data?width=256&height=256", + name: "Bnana Stem", + quantity: "1 pc", + price: "41", + piec:1, + }, + { + id: '4', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/BONI11.png?width=256&height=256", + name: "Onion", + quantity: "1 kg", + price: "26", + piec:1, + }, + { + id: '5', + image_url: "https://imageprod.fraazo.com/fraazo-prod/products/product_images/000/000/012/original/data?width=256&height=256", + name: "Potato", + quantity: "1 kg", + price: "25", + piec:1, + }, + // { + // id: '6', + // image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VMUL12.png?width=256&height=256", + // name: "Radish", + // quantity: "1 kg", + // price: "52", + // }, + // { + // id: '7', + // image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VCAP12.png?width=256&height=256", + // name: "Green Capsicum", + // quantity: "250 g", + // price: "32", + // }, + // { + // id: '8', + // image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VCAU12.png?width=256&height=256", + // name: "Colliflower", + // quantity: "1 pc", + // price: "39", + // }, + // { + // id: '9', + // image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VCAB12.png?width=256&height=256", + // name: "Cabbage", + // quantity: "1 pc", + // price: "41", + // }, + // { + // id: '10', + // image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VBRI22.png?width=256&height=256", + // name: "Black Nagpur Brinjal", + // quantity: "250 g", + // price: "40", + // }, +]; + +var bestdeal = [ + { + id: '1', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/FAVO21.png?width=256&height=256&format=webp", + name: "Coconut Combo (2 pcs Coconuts)", + quantity: "1 combo", + price: "60", + piec:1, + }, + { + id: '2', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VCAB12.png?width=256&height=256", + name: "Cabbage", + quantity: "1 pc", + price: "41", + piec:1, + }, + { + id: '3', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VPAP12.png?width=256&height=256&format=webp", + name: "Raw Papaya", + quantity: "1 pc", + price: "32", + piec:1, + }, + { + id: '4', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VBRI22.png?width=256&height=256", + name: "Black Nagpur Brinjal", + quantity: "250 g", + price: "40", + piec:1, + }, + { + id: '5', + image_url: "https://imagemaster.fraazo.com/fraazo-master/products/VCAP12.png?width=256&height=256", + name: "Green Capsicum", + quantity: "250 g", + price: "32", + piec:1, + }, +]; + +var carousel = [ + { + image_url : "https://imageprod.fraazo.com/fraazo-prod/web_ban/5609.png" + }, + { + image_url : "https://imageprod.fraazo.com/fraazo-prod/web_ban/4986.png" + }, + { + image_url : "https://imageprod.fraazo.com/fraazo-prod/web_ban/4985.png" + }, +]; + +// Header Section +var loggedInUser = JSON.parse(localStorage.getItem("userName")) || []; +console.log(loggedInUser); + +document.getElementById("user").innerText =loggedInUser[0].name; +// Carousel Section +carousel.map(function(element){ + var div = document.createElement("div"); + div.setAttribute("class", "item"); + + var image = document.createElement("img"); + image.setAttribute("src", element.image_url); + + div.append(image); + document.getElementById("carousel").append(div); +}); +// Best Deal Section +bestdeal.map(function(element, index){ + var div = document.createElement("div"); + + var image = document.createElement("img"); + image.setAttribute("src", element.image_url); + image.setAttribute("alt", index); + + var p = document.createElement("p"); + p.innerText = element.name; + + var quantity = document.createElement("p"); + quantity.innerText = element.quantity; + + var price = document.createElement("h4"); + price.innerText = "₹ "+ element.price; + + var btn = document.createElement("button"); + btn.innerText = "Add"; + btn.addEventListener("click", function(){ + addToCart(index); + alert("Item has added to Cart!"); + increaseCartValue(); + }); + + div.append(image, p, quantity, price,btn); + document.getElementById("bestdeal").append(div); +}); +//Fruits Section +fruits.map(function(element, index){ + var div = document.createElement("div"); + + var image = document.createElement("img"); + image.setAttribute("src", element.image_url); + + var p = document.createElement("p"); + p.innerText = element.name; + + var quantity = document.createElement("p"); + quantity.innerText = element.quantity; + + var price = document.createElement("h4"); + price.innerText = "₹ "+ element.price; + + var btn = document.createElement("button"); + btn.innerText = "Add"; + btn.addEventListener("click", function(){ + addToCart(index); + alert("Item has added to Cart!"); + increaseCartValue(); + }); + + div.append(image, p, quantity, price,btn); + document.getElementById("fruits").append(div); +}); +// Vegetables Section +vegetables.map(function(element, index){ + var div = document.createElement("div"); + + var image = document.createElement("img"); + image.setAttribute("src", element.image_url); + + var p = document.createElement("p"); + p.innerText = element.name; + + var quantity = document.createElement("p"); + quantity.innerText = element.quantity; + + var price = document.createElement("h4"); + price.innerText = "₹ "+ element.price; + + var btn = document.createElement("button"); + btn.innerText = "Add"; + btn.addEventListener("click", function(){ + addToCart(index); + alert("Item has added to Cart!"); + increaseCartValue(); + }); + + div.append(image, p, quantity, price,btn); + document.getElementById("vegetables").append(div); +}); + +var cartProduct = JSON.parse(localStorage.getItem("cart")) || []; + +// document.getElementById("valueCart").innerText = cartProduct.length; + +function addToCart(index){ + var product = bestdeal.filter(function(element, ind){ + return ind == index; + }); + // product.piec = 1; // + cartProduct.push(product[0]); + localStorage.setItem("cart", JSON.stringify(cartProduct)); +} + +// function addToCart(index){ +// var product = fruits.filter(function(element, ind){ +// return ind == index; +// }); +// cartProduct.push(product[0]); +// localStorage.setItem("cart", JSON.stringify(cartProduct)); +// } +// function addToCart(index){ +// var product = vegetables.filter(function(element, ind){ +// return ind == index; +// }); +// cartProduct.push(product[0]); +// localStorage.setItem("cart", JSON.stringify(cartProduct)); +// } + +// console.log("okay"); + +document.getElementById("valueCart").innerText = cartProduct.length; +function increaseCartValue(){ + document.getElementById("valueCart").innerText = cartProduct.length; +} + diff --git a/index.css b/index.css index 35fe485..7ecfb36 100644 --- a/index.css +++ b/index.css @@ -75,15 +75,16 @@ header{ #container > :last-child{ /* border:1px solid red; */ width: 27%; + position: relative; } -#container > :last-child > i,a{ +#container > :last-child > a{ font-size:15px; color:grey; margin-top: 15px; } -#container > :last-child > i{ +/* #container > :last-child > i{ margin-top: 17px; -} +} */ #container > :last-child > p{ font-size:15px; color:grey; @@ -119,6 +120,18 @@ a>i:hover{ #container > :last-child > p:hover{ color:black; } +#valueCart{ + background-color:#51D7B7; + padding:2px 5px 1px 5px; + border-radius:50%; + position:absolute; + left:50px; + top:-11px; +} +#userlogo{ + display:none; +} + /* Category Section */ .category{ margin-top: 90px; diff --git a/index.html b/index.html index bfa96c6..a85118c 100644 --- a/index.html +++ b/index.html @@ -25,12 +25,19 @@
- -

Cart

- -

Credits

- - + +

0

+

Cart

+ + + +

Credits

+ + + + +
diff --git a/index.js b/index.js index 28ba749..01d0664 100644 --- a/index.js +++ b/index.js @@ -193,6 +193,33 @@ var carousel = [ image_url : "https://imageprod.fraazo.com/fraazo-prod/web_ban/4985.png" }, ]; + +// Header Section +function signup(){ + window.location.href = "signup.html"; +} +function login(){ + window.location.href = "login.html"; +} + +document.getElementById("cartt").addEventListener("click", gotoLogin); +document.getElementById("cartt2").addEventListener("click", gotoLogin); +document.getElementById("credit").addEventListener("click", gotoLogin); +document.getElementById("credit2").addEventListener("click", gotoLogin); +function gotoLogin(){ + alert("Please Sign Up or Log In !"); + window.location.href = "signup.html"; +} + +// var loggedInUser = JSON.parse(localStorage.getItem("userName")) || []; +// console.log(loggedInUser); +// if(!loggedInUser.length==0){ +// document.getElementById("userlogo").style.display="block" +// document.getElementById("user").innerText =loggedInUser[0].name; +// document.getElementById("signup").style.display = "none"; +// document.getElementById("login").style.display = "none"; +// } + // Carousel Section carousel.map(function(element){ var div = document.createElement("div"); @@ -225,11 +252,14 @@ bestdeal.map(function(element, index){ btn.innerText = "Add"; btn.addEventListener("click", function(){ addToCart(index); + alert("Item has added to Cart!"); + increaseCartValue(); }); div.append(image, p, quantity, price,btn); document.getElementById("bestdeal").append(div); }); + //Fruits Section fruits.map(function(element, index){ var div = document.createElement("div"); @@ -250,6 +280,8 @@ fruits.map(function(element, index){ btn.innerText = "Add"; btn.addEventListener("click", function(){ addToCart(index); + alert("Item has added to Cart!"); + increaseCartValue(); }); div.append(image, p, quantity, price,btn); @@ -275,6 +307,8 @@ vegetables.map(function(element, index){ btn.innerText = "Add"; btn.addEventListener("click", function(){ addToCart(index); + alert("Item has added to Cart!"); + increaseCartValue(); }); div.append(image, p, quantity, price,btn); @@ -282,7 +316,7 @@ vegetables.map(function(element, index){ }); var cartProduct = JSON.parse(localStorage.getItem("cart")) || []; - +// var valueCart = []; function addToCart(index){ var product = bestdeal.filter(function(element, ind){ return ind == index; @@ -290,6 +324,13 @@ function addToCart(index){ cartProduct.push(product[0]); localStorage.setItem("cart", JSON.stringify(cartProduct)); } + // console.log("okay"); +document.getElementById("valueCart").innerText = cartProduct.length; +function increaseCartValue(){ + document.getElementById("valueCart").innerText = cartProduct.length; +} + + diff --git a/location.css b/location.css index 90666fb..b4c5490 100644 --- a/location.css +++ b/location.css @@ -76,20 +76,20 @@ header{ /* border:1px solid red; */ width: 27%; } -#container > :last-child > i,a{ +#container > :last-child > a{ font-size:15px; color:grey; margin-top: 15px; } -#container > :last-child > i{ +/* #container > :last-child > i{ margin-top: 17px; -} +} */ #container > :last-child > p{ font-size:15px; color:grey; margin-top: 15px; font-family: sans-serif; - margin-left: -25px; + margin-left: -40px; } a>i{ color:grey; @@ -104,7 +104,7 @@ a>i:hover{ #container > :last-child > p > a:hover{ color: black; } -#container > :last-child > button{ +/* #container > :last-child > button{ border: 1px solid #ccc; border-radius:10px; height:40px; @@ -112,7 +112,7 @@ a>i:hover{ margin-top:3.5px; background-color:#5DC6AD; color:white; -} +} */ #container > :last-child > i:hover{ color:black; } @@ -253,19 +253,48 @@ a>i:hover{ padding:0px 20px 20px 20px; margin-top:20px; border-radius: 5px; - box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; +} #cart>h1{ font-size: 25px; font-family:Verdana, Geneva, Tahoma, sans-serif; } +/* #cart > div{ + display:flex; + justify-content:space-between; +} +#cart>div>div{ + width:50%; +} +#cart>div>:last-child{ + width:40%; + border:2px solid #5DC6AD; +} */ +#cart input{ + width:100%; + padding:20px; + border:2px solid #5DC6AD; + outline:none; + border-radius:5px; + margin-top:20px; +} +#cart>div>div{ + width:100%; + margin-top:100px; + text-align:center; +} +#cart>div>div>i{ + font-size: 100px; + color:#5DC6AD; +} #cart>div{ width:100%; /* border:1px solid red; */ - display: flex; + /* display: flex; */ /* justify-content:space-between; */ margin-top: 10px; border-radius: 5px; - box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */ } #cart>div>img{ width: 20%; diff --git a/location.html b/location.html index 2071293..20cc978 100644 --- a/location.html +++ b/location.html @@ -16,7 +16,7 @@
- logo + logo

Location

@@ -27,10 +27,14 @@

Cart

- -

Credits

- - + + +

Credits

+ + +

+
@@ -78,7 +82,13 @@
-

+

Address

+
+ +
+ +
+
diff --git a/location.js b/location.js index f227dc7..36bcbad 100644 --- a/location.js +++ b/location.js @@ -8,15 +8,23 @@ else{ // displayProduct(); cartValue(); } +// Header Section +var loggedInUser = JSON.parse(localStorage.getItem("userName")) || []; +console.log(loggedInUser); + +document.getElementById("user").innerText =loggedInUser[0].name; // document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length; document.getElementById('items').innerText =cartProduct.length+" items"; document.getElementById('items').style.fontSize="12px"; function cartValue(){ - var total = cartProduct.reduce(function(accumulator, element) { - return accumulator+Number(element.price); - },0); + // var total = cartProduct.reduce(function(accumulator, element) { + // return accumulator+Number(element.price); + // },0); + + var total = localStorage.getItem("total"); + // console.log(total); document.getElementById("total").innerText ="₹ "+total; document.getElementById("totals").innerText ="₹ "+total; @@ -49,7 +57,7 @@ function displayEmptyProduct(){ // div.setAttribute("id", "button"); var a = document.createElement('a'); - a.setAttribute("href", "index.html"); + a.setAttribute("href", "homepage.html"); var btn = document.createElement('button'); btn.innerText = "Let's Shop!"; diff --git a/login.css b/login.css index ed589da..7bd904a 100644 --- a/login.css +++ b/login.css @@ -1,8 +1,7 @@ -body{ - background-color: white; - font-family: Rockwell,"Times New Roman",serif; - } - * { + body{ + font-family:Verdana, Geneva, Tahoma, sans-serif; + } + * { margin: 0; padding: 0; box-sizing: border-box; @@ -13,7 +12,7 @@ body{ position: absolute; } - .form-box { + .form { width: 40%; height: 100%; background: @@ -24,7 +23,7 @@ body{ } - .input-gr { + .input { margin: 30px auto; position: relative; margin-left: px; @@ -45,7 +44,7 @@ body{ h1{ font-size: 30px; font-weight: 300; - font-family: Rockwell,"Times New Roman",serif; + /* font-family: Rockwell,"Times New Roman",serif; */ margin-top: 20px; margin-left: 17px; @@ -86,7 +85,13 @@ body{ p{ font-size: 19px; font-weight: 300; - margin-left: 210px; + margin-left: 10px; + } + p>a{ + text-decoration: none; + font-weight: 700; + color: #5dc6ad; + font-size: 20px; } .fr { height: 80px; diff --git a/login.html b/login.html index 6c7f523..50047c6 100644 --- a/login.html +++ b/login.html @@ -9,49 +9,24 @@
-
- fraazo - - -

Sign in

+
+ fraazo +

Sign In

-
- - -
-
- - +
+ +
-
+
- - + +
-

Forget Password

+ +

Don't have an account ? SignUp

-
Image diff --git a/login.js b/login.js index 9de7b39..cfeff38 100644 --- a/login.js +++ b/login.js @@ -1,22 +1,36 @@ -var arr = JSON.parse(localStorage.getItem("signup")) || []; -function login(event) { +var users = JSON.parse(localStorage.getItem("user")) || []; + +function login() { event.preventDefault(); - var email = document.getElementById("mail").value; - var password = document.getElementById("password").value; - var mobile = document.getElementById("mobile").value; - - + var email = document.getElementById("email").value; + var password = document.getElementById("pass").value; + + var newUser = []; // var flag = false; - for (var i = 0; i < arr.length; i++) { - if (arr[i].mobile === mobile && arr[i].email === email && arr[i].password === password) { + for (var i = 0; i < users.length; i++) { + if (users[i].email === email && users[i].password === password) { flag = true; + + var userObj = { + name:users[i].name, + }; + // console.log(users[i].name); + // console.log(userObj); + + newUser.push(userObj); + // console.log(newUser); + localStorage.setItem("userName",JSON.stringify(newUser)); break; } } - if (flag) { + if(flag){ alert("Login Successfull"); - } else { - alert("Please Enter Correct Email and Password"); + window.location.href ="./homepage.html"; + } + else{ + alert("Wrong Credentials"); } + + } \ No newline at end of file diff --git a/order.css b/order.css new file mode 100644 index 0000000..4fabe39 --- /dev/null +++ b/order.css @@ -0,0 +1,473 @@ +*{ + margin:0px; +} +/* Header Section */ +header{ + /* overflow: hidden; */ + background-color: #fff; + position: fixed; + top: 0; + width: 100%; + z-index: 1000; +} +#container{ + width: 100%; + margin: auto; + padding:20px 10px; + position:relative; + display:flex; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + /* border-top: 1px solid black; */ +} +#container > div { + /* border-top: 1px solid teal; */ + display: flex; + justify-content:space-around; +} +#container > :first-child{ + width: 70%; +} +#container > :first-child > a { + width: 14%; + margin-top:0px; +} +#container > :first-child > div{ + display: flex; +} +#container > :first-child > div > i{ + font-size:15px; + color:grey; + position:absolute; + left:250px; + top: 39px; +} +#container > :first-child > div > p{ + font-size:15px; + color:grey; + font-family: sans-serif; + position:absolute; + left:270px; + top: 37px; +} +#container > :first-child > div > i:hover{ + color:black; +} +#container > :first-child > div > p:hover{ + color:black; +} +#container > :first-child > input{ + border: 1px solid #ccc; + border-radius:30px; + width: 60%; + padding:15px; + font-family: sans-serif; + margin-left:120px; +} +#container > :first-child > i{ + color:grey; + position:absolute; + right:510px; + top:37px; +} +#container > :first-child > i:hover{ + color:#5DC6AD; +} +#container > :last-child{ + /* border:1px solid red; */ + width: 27%; +} +#container > :last-child > a{ + font-size:15px; + color:grey; + margin-top: 15px; +} +/* #container > :last-child > i{ + margin-top: 17px; +} */ +#container > :last-child > p{ + font-size:15px; + color:grey; + margin-top: 15px; + font-family: sans-serif; + margin-left: -40px; +} +a>i{ + color:grey; +} +a>i:hover{ + color: black; +} +#container > :last-child > p > a{ + color: grey; + text-decoration: none; +} +#container > :last-child > p > a:hover{ + color: black; +} +/* #container > :last-child > button{ + border: 1px solid #ccc; + border-radius:10px; + height:40px; + width:80px; + margin-top:3.5px; + background-color:#5DC6AD; + color:white; +} */ +#container > :last-child > i:hover{ + color:black; +} +#container > :last-child > p:hover{ + color:black; +} +/* Category Section */ +.category{ + margin-top: 90px; + display:flex; + justify-content:center; + border:1px solid #ccc; + border-left: none; + border-right: none; + border-top: none; +} +.btn{ + background-color:white; + margin-top: 8px; + color:grey; +} +.dropdown:hover .dropdown-content { + display: block; +} +.imgs{ + width: 95%; + margin: auto; + display:flex; + /* border: 1px solid green; */ + justify-content: space-between; +} + +/* Status Section */ + +/* cart section */ +.kart{ + display: flex; + width: 95%; + margin: auto; + justify-content: space-between; +} +#empty{ + width: 95%; + margin: auto; + /* border: 1px solid black; */ + text-align: center; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + +} +#empty>h1{ + font-size: 30px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +#empty>img{ + width: 20%; + margin-top: 20px; +} +#empty>h2{ + font-size: 20px; + font-family:Verdana, Geneva, Tahoma, sans-serif; + margin-top:30px; +} +#empty>p{ + font-size: 15px; + width: 17%; + margin: auto; + font-family:Verdana, Geneva, Tahoma, sans-serif; + color: grey; +} +#empty>a{ + text-decoration: none; + color: white; +} +#empty>a>button{ + border:1px solid #5DC6AD; + background-color:#5DC6AD; + padding:13px 18px 13px 18px; + border-radius:25px; + margin-top:20px; + margin-bottom: 10px; +} +#cart{ + /* border:1px solid #5DC6AD; */ + width:65%; + padding:0px 20px 20px 20px; + margin-top:20px; + border-radius: 5px; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; +} +#cart>h1{ + font-size: 25px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +#cart>div{ + width:100%; + /* border:1px solid red; */ + display: flex; + /* justify-content:space-between; */ + margin-top: 50px; + border-radius: 5px; + /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */ +} +#cart>div{ + /* border: 1px solid teal; */ + text-align: center; +} +#cart>div>h3{ + margin: auto; + font-family: verdana, arial, helvetica; +} +#cart>div>h4{ + margin: auto; + margin-top:-35px; + color: gray; + font-family: verdana, arial, helvetica; +} +#cart>div>img{ + width: 30%; + margin: auto; +} +.nameAndQuantityPrice{ + width:75%; + display:flex; + justify-content: space-between; +} +.nameAndQuantityPrice>div{ + margin-top:55px; + margin-left:50px; +} +.nameAndQuantityPrice>button{ + width:100px; + height: 35px; + margin-top: 75px; + border: none; + border-radius:4px; + background-color:#5DC6AD; + color: #fff; +} +#cartValue{ + width:33%; + height:450px; + padding: 10px; + margin-top:20px; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + /* border:1px solid blue; */ +} +#cartValue>button{ + width:100%; + background-color:#fffbf9; + padding: 10px; + border:2px dashed crimson; + border-radius:5px; + font-size: 25px; +} +#cartValue>h1{ + font-size: 30px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +table{ + width: 100%; + margin-top: 20px; + border:none; + border-collapse: collapse; +} +th{ + font-size:25px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +td{ + color: #9e9796; + font-size:16px; + /* font-family: 'Open Sans'; */ + /* font-family:Helvetica Neue, Helvetica, Arial, sans-serif; */ + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +hr{ + width: 95%; + margin: auto; +} +.Pay{ + width: 100%; + margin-left: 10px; +} +.Pay>tbody>tr>:nth-child(2){ + font-size:12px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +#checkout{ + width: 100%; + margin: auto; + display:flex; + justify-content:space-between; + background-color:#47BE9B; + padding:1px; + margin-top: 25px; + border-radius: 10px; + color: #fff; + display: none; +} +#checkout>div>p{ + margin-left: 15px; + line-height: 0.8; + margin-top: 10px; +} +#checkout>div>:last-child{ + font-size: 15px; +} +#checkout>h4{ + margin-top: 17px; + margin-right: 15px; +} +#cartValue>a{ + text-decoration: none; +} +/* Footer Image Section */ +.footerImg{ + width: 100%; + /* border: 1px solid white; */ +} +.footerImg > img{ + width: 100%; +} +/* Footer Section */ +.footer{ + width: 100%; + background-color:#165241; + padding-bottom: 20px; +} +.footer > :first-child{ + width: 95%; + margin: auto; + /* border: 1px solid blue; */ +} +.first{ + width: 95%; + display:flex; +} +.ff{ + width: 50%; + /* border: 1px solid red; */ + display:flex; + /* justify-content:space-between; */ +} +.fff{ + width: 40%; + /* border: 1px solid white; */ + color:#b9cbc6; + font-family: sans-serif; +} +.fff>p{ + margin-top:30px; + line-height: 2; + font-size: 15px; +} +.ffs{ + width: 40%; + margin-top: 26px; + margin-left: 100px; +} +.ffs>ul{ + font-size: 22px; + color:white; + font-family: sans-serif; +} +.ffs>ul>li{ + list-style: none; + font-size: 16px; + line-height: 2.5; + color:#b9cbc6; +} +.ffs>ul>li>a{ + text-decoration: none; + color:#b9cbc6; +} +.fs{ + width:50%; + display: flex; +} +.fsf{ + width: 40%; + /* border: 1px solid white; */ + margin-top: 26px; +} +.fss{ + width: 50%; + margin-top: 26px; + margin-left: 50px; + /* border: 1px solid white; */ +} +.fsf,.fss>ul{ + font-size: 22px; + color:white; + font-family: sans-serif; +} +.fsf>ul>li{ + list-style: none; + font-size: 16px; + line-height: 2.5; + color:#b9cbc6; +} +.fss>ul>li{ + list-style: none; + font-size: 16px; + line-height: 2.5; + color:#b9cbc6; +} +.fsf>ul>li>a{ + text-decoration: none; + color:#b9cbc6; +} +.fss>ul>li>a{ + text-decoration: none; + color:#b9cbc6; +} +.fss>ul>li>a>i{ + color:#b9cbc6; +} + +.second{ + width: 95%; + margin: auto; + /* border: 1px solid white; */ +} +.second > h1{ + color: white; +} +.second > p{ + color:#b9cbc6; + line-height:1.5; + text-align: justify; + margin-top: 20px; +} +.third{ + width: 95%; + margin: auto; +} +.third > p{ + color: #b9cbc6; + text-align: center; + margin-top:30px; + font-size: 16px; +} +.fss > h4{ + color: White; + margin-left: 40px; + margin-top: 30px; +} +.fss > h4 + div{ + width: 100%; + text-align: end; +} +.fss > h4 + div > :first-child{ + width: 39%; +} +.fss > h4 + div > :last-child{ + width: 48%; +} diff --git a/order.html b/order.html new file mode 100644 index 0000000..a5b3abe --- /dev/null +++ b/order.html @@ -0,0 +1,221 @@ + + + + + + + + + + + + OTP + + + +
+
+
+ logo +
+ +

Location

+
+ + +
+
+ +

Cart

+ + +

Credits

+ + +

+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + + + + +
+ +
+
+
+

+

Your Order has Confirmed.

+
+ confirm +
+
+

Thanks

+
+
+

Your order has been received

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Bill Details
Total Items Price
Product Discount₹ 0
Cart Totalok
Other Charges₹ 0
+
+ + + + + + + + +
Nett PaidYou saved ₹ 0
+ +
+
+

Total

+

ok

+
+

Submit

+
+ +
+
+ + +
+ Footer Image +
+ + +
+
+
+
+
+ footer logo +

+ Order online vegetables & fruits + directly from the farm. Fraazo is + online platform that allows customer + to get farm fresh produce directly + from farmers. +

+
+
+ +
+
+
+
+ +
+
+ +

Download The App

+
+ play store + apple store +
+
+
+
+
+

Fresh Fruits & Vegetables Grocery Shopping Online

+

The quality of fruits & vegetables is synonymous with its freshness, while getting fresh fruits and vegetables is a tedious task at times but with Fraazo you can get it delivered at your doorstep. Fraazo brings a wide range of farm fresh fruits, vegetables and dairy products to you, all in just a click. We currently serve about more than 3lacs+ happy customers in Mumbai, Navi Mumbai, Thane, Kalyan-Dombivli and Virar. Fraazo has made online shopping of fresh produce much easier with its hassle-free home delivery options. You can choose the delivery slot as per your choice and schedule your order accordingly. Or you can simply opt for the option of 90 mins Express Delivery and get your order delivered in not more than 90 mins. The farm fresh fruits and vegetables on Fraazo are available at best prices compared to other vendors & supermarkets. Plus with so many exciting offers, one can save up to 20% on their Monthly grocery budgets. No need to wait in long queues in crowded supermarkets or local mandis for getting the best prices on veggies. Kick the stress out & just Fraazo your dose of freshness with savings at the comfort of your home. Fraazo directly sources fresh fruits and veggies from an extensive network of farmers across Maharashtra, hence bringing you fresh produce straight from farm to table in less than 18 hours. With our Safe & Hygienic packaging and minimal multiple handling, we ensure you get the best quality fresh produce.

+

The fruits and vegetables are 100% hand-picked fresh from farm, while some products are hydroponically-grown. The wide range of fruits and veggies on Fraazo include more than 100+ farm fresh vegetables and fruits, starting from regular veggies like dudhi, cauliflower, beetroot, cabbage, etc. to exotic veggies like broccoli, lettuce etc. We also provide the essential vegetable combos like Onion, Potato, Tomato Combo, Salad Combo, Fresh Cut-Veg Combos or Fruit Combos like Banana, Apple Combo, & more. There are a lot of exciting deals on vegetables & fruits, every day of the week, the major highlights being Monday Mandi, Veggie Wednesday, Freelivery Thursday & Fruit Friday.For payments, you can choose from the multiple payment options as Fraazo accepts Debit card, Credit card, UPI options like iMobile, Google Pay, 8+ e-Wallet options like Phonepe, JioPay, MobiKwik, Sodexo, NetBanking and Cash on Delivery (COD). If you ever have an issue with missing items or any quality issue, you can raise your concern with us in 48 hrs & we shall refund/ replace your product with “no-questions-asked-policy”. You can simply connect with our Customer Support team via Chat Support or Call on 9152291522.

+
+
+
+

© Copyrights 2021 - 2022. Fraazo. All Rights Reserved.

+
+
+
+ + + + \ No newline at end of file diff --git a/order.js b/order.js new file mode 100644 index 0000000..e251210 --- /dev/null +++ b/order.js @@ -0,0 +1,119 @@ +var cartProduct = JSON.parse(localStorage.getItem("cart")) || []; + +var cart = document.getElementById('cart'); +if(cartProduct.length == 0){ + displayEmptyProduct(); +} +else{ + // displayProduct(); + cartValue(); +} +// Header Section +var loggedInUser = JSON.parse(localStorage.getItem("userName")) || []; +console.log(loggedInUser); + +document.getElementById("user").innerText =loggedInUser[0].name; +document.getElementById("greet").innerText ="Thanks "+loggedInUser[0].name; + +// document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length; +document.getElementById('items').innerText =cartProduct.length+" items"; +document.getElementById('items').style.fontSize="12px"; + +function cartValue(){ + // var total = cartProduct.reduce(function(accumulator, element) { + // return accumulator+Number(element.price); + // },0); + + var total = localStorage.getItem("total"); + // console.log(total); + + document.getElementById("total").innerText ="₹ "+total; + document.getElementById("totals").innerText ="₹ "+total; + document.getElementById("pay").innerText ="₹ "+total; + document.getElementById("check").innerText ="₹ "+total; +} + +function displayEmptyProduct(){ + document.getElementById('cart').style.display = 'none'; + document.getElementById('cartValue').style.display = 'none'; + var h1 = document.createElement('h1'); + h1.innerText = "My Cart (0 Items)"; + + // var imgDiv = document.createElement('div'); + // imgDiv.setAttribute("class", "img"); + + var image = document.createElement('img'); + image.setAttribute("src","/system-zombies/images/empty.png"); + + // imgDiv.append(image); + + var h2 = document.createElement('h2'); + h2.innerText = "Whoops... Cart is empty"; + + var p = document.createElement('p'); + p.setAttribute("class", "underline"); + p.innerText = "Add some fruits, veggies and dairy products to your cart."; + + // var div = document.createElement('div'); + // div.setAttribute("id", "button"); + + var a = document.createElement('a'); + a.setAttribute("href", "homepage.html"); + + var btn = document.createElement('button'); + btn.innerText = "Let's Shop!"; + + a.append(btn); + // div.append(a); + + document.getElementById("empty").append(h1,image,h2,p,a); + +} +function displayProduct(){ + document.getElementById("empty").style.display = "none"; + // document.getElementById("cart").innerHTML=""; + cartProduct.map(function(element, index){ + var div = document.createElement("div"); + + var image = document.createElement("img"); + image.setAttribute("src", element.image_url); + + var mainDiv = document.createElement("div"); + mainDiv.setAttribute("class","nameAndQuantityPrice"); + + var div1 = document.createElement("div"); + + var p = document.createElement("p"); + p.innerText = element.name; + + var quantity = document.createElement("p"); + quantity.innerText = element.quantity; + + var price = document.createElement("h4"); + price.innerText = "₹ "+ element.price; + + div1.append(p,quantity,price); + + var btn = document.createElement("button"); + btn.innerText = "Remove"; + btn.addEventListener("click", function(){ + remove(index); + refreshPage(); // this is for refreshing the page because when we remove last one page should refresh and then show empty cart. + }); + + mainDiv.append(div1,btn); + + div.append(image,mainDiv); + document.getElementById("cart").append(div); + }); +} + +function remove(index){ + cartProduct.splice(index,1); + displayProduct(); + localStorage.setItem("cart",JSON.stringify(cartProduct)); +} + +function refreshPage(){ + window.location.reload(); +} \ No newline at end of file diff --git a/otp.css b/otp.css index e69de29..c98b855 100644 --- a/otp.css +++ b/otp.css @@ -0,0 +1,512 @@ +*{ + margin:0px; +} +/* Header Section */ +header{ + /* overflow: hidden; */ + background-color: #fff; + position: fixed; + top: 0; + width: 100%; + z-index: 1000; +} +#container{ + width: 100%; + margin: auto; + padding:20px 10px; + position:relative; + display:flex; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + /* border-top: 1px solid black; */ +} +#container > div { + /* border-top: 1px solid teal; */ + display: flex; + justify-content:space-around; +} +#container > :first-child{ + width: 70%; +} +#container > :first-child > a { + width: 14%; + margin-top:0px; +} +#container > :first-child > div{ + display: flex; +} +#container > :first-child > div > i{ + font-size:15px; + color:grey; + position:absolute; + left:250px; + top: 39px; +} +#container > :first-child > div > p{ + font-size:15px; + color:grey; + font-family: sans-serif; + position:absolute; + left:270px; + top: 37px; +} +#container > :first-child > div > i:hover{ + color:black; +} +#container > :first-child > div > p:hover{ + color:black; +} +#container > :first-child > input{ + border: 1px solid #ccc; + border-radius:30px; + width: 60%; + padding:15px; + font-family: sans-serif; + margin-left:120px; +} +#container > :first-child > i{ + color:grey; + position:absolute; + right:510px; + top:37px; +} +#container > :first-child > i:hover{ + color:#5DC6AD; +} +#container > :last-child{ + /* border:1px solid red; */ + width: 27%; +} +#container > :last-child > a{ + font-size:15px; + color:grey; + margin-top: 15px; +} +/* #container > :last-child > i{ + margin-top: 17px; +} */ +#container > :last-child > p{ + font-size:15px; + color:grey; + margin-top: 15px; + font-family: sans-serif; + margin-left: -40px; +} +a>i{ + color:grey; +} +a>i:hover{ + color: black; +} +#container > :last-child > p > a{ + color: grey; + text-decoration: none; +} +#container > :last-child > p > a:hover{ + color: black; +} +/* #container > :last-child > button{ + border: 1px solid #ccc; + border-radius:10px; + height:40px; + width:80px; + margin-top:3.5px; + background-color:#5DC6AD; + color:white; +} */ +#container > :last-child > i:hover{ + color:black; +} +#container > :last-child > p:hover{ + color:black; +} +/* Category Section */ +.category{ + margin-top: 90px; + display:flex; + justify-content:center; + border:1px solid #ccc; + border-left: none; + border-right: none; + border-top: none; +} +.btn{ + background-color:white; + margin-top: 8px; + color:grey; +} +.dropdown:hover .dropdown-content { + display: block; +} +.imgs{ + width: 95%; + margin: auto; + display:flex; + /* border: 1px solid green; */ + justify-content: space-between; +} + +/* Status Section */ +.status{ + width: 100%; + /* border: 1px solid blue; */ + background-color:#eff9f7; +} +#cartOnly{ + /* border: 1px solid blue; */ + width: 30%; + display: flex; + margin:auto; + /* justify-content:space-between; */ + padding:25px; +} +#cartOnly>div{ + width: 14%; + /* border: 1px solid red; */ + text-align: center; + padding: 10px; + border-radius: 50%; + background-color:white; + /* margin-left:20px; */ +} +#cartOnly>:nth-child(even){ + background-color:#eff9f7; + width: 25%; + height:1px; + border-radius: 1px; + border-bottom: 2px solid #5dc6ad; + /* border:2px dashed #99a2a0; */ + border-left: none; + border-top:none; + border-right:none; + margin-top: 5px; +} +#cartOnly>div>i{ + font-size:25px; + color:gray; + margin-top: 5px; +} +#cartOnly>:first-child{ + background-color:#5DC6AD; +} +#cartOnly>:nth-child(3){ + background-color: #5dc6ad; +} +#cartOnly>:last-child{ + background-color: #5dc6ad; +} +#cartOnly>:first-child>i{ + color: white; +} +#cartOnly>:nth-child(3)>i{ + color:white; +} +#cartOnly>:last-child>i{ + color:white; +} +/* cart section */ +.kart{ + display: flex; + width: 95%; + margin: auto; + justify-content: space-between; +} +#empty{ + width: 95%; + margin: auto; + /* border: 1px solid black; */ + text-align: center; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + +} +#empty>h1{ + font-size: 30px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +#empty>img{ + width: 20%; + margin-top: 20px; +} +#empty>h2{ + font-size: 20px; + font-family:Verdana, Geneva, Tahoma, sans-serif; + margin-top:30px; +} +#empty>p{ + font-size: 15px; + width: 17%; + margin: auto; + font-family:Verdana, Geneva, Tahoma, sans-serif; + color: grey; +} +#empty>a{ + text-decoration: none; + color: white; +} +#empty>a>button{ + border:1px solid #5DC6AD; + background-color:#5DC6AD; + padding:13px 18px 13px 18px; + border-radius:25px; + margin-top:20px; + margin-bottom: 10px; +} +#cart{ + /* border:1px solid #5DC6AD; */ + width:65%; + padding:0px 20px 20px 20px; + margin-top:20px; + border-radius: 5px; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;} +#cart>h1{ + font-size: 25px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +#cart>div{ + width:100%; + /* border:1px solid red; */ + display: flex; + /* justify-content:space-between; */ + margin-top: 10px; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; +} +#cart>div>img{ + width: 20%; +} +.nameAndQuantityPrice{ + width:75%; + display:flex; + justify-content: space-between; +} +.nameAndQuantityPrice>div{ + margin-top:55px; + margin-left:50px; +} +.nameAndQuantityPrice>button{ + width:100px; + height: 35px; + margin-top: 75px; + border: none; + border-radius:4px; + background-color:#5DC6AD; + color: #fff; +} +#cartValue{ + width:33%; + height:450px; + padding: 10px; + margin-top:20px; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; + /* border:1px solid blue; */ +} +#cartValue>button{ + width:100%; + background-color:#fffbf9; + padding: 10px; + border:2px dashed crimson; + border-radius:5px; + font-size: 25px; +} +#cartValue>h1{ + font-size: 30px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +table{ + width: 100%; + margin-top: 20px; + border:none; + border-collapse: collapse; +} +th{ + font-size:25px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +td{ + color: #9e9796; + font-size:16px; + /* font-family: 'Open Sans'; */ + /* font-family:Helvetica Neue, Helvetica, Arial, sans-serif; */ + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +hr{ + width: 95%; + margin: auto; +} +.Pay{ + width: 100%; + margin-left: 10px; +} +.Pay>tbody>tr>:nth-child(2){ + font-size:12px; + font-family:Verdana, Geneva, Tahoma, sans-serif; +} +#checkout{ + width: 100%; + margin: auto; + display:flex; + justify-content:space-between; + background-color:#47BE9B; + padding:1px; + margin-top: 25px; + border-radius: 10px; + color: #fff; +} +#checkout>div>p{ + margin-left: 15px; + line-height: 0.8; + margin-top: 10px; +} +#checkout>div>:last-child{ + font-size: 15px; +} +#checkout>h4{ + margin-top: 17px; + margin-right: 15px; +} +#cartValue>a{ + text-decoration: none; +} +/* Footer Image Section */ +.footerImg{ + width: 100%; + /* border: 1px solid white; */ +} +.footerImg > img{ + width: 100%; +} +/* Footer Section */ +.footer{ + width: 100%; + background-color:#165241; + padding-bottom: 20px; +} +.footer > :first-child{ + width: 95%; + margin: auto; + /* border: 1px solid blue; */ +} +.first{ + width: 95%; + display:flex; +} +.ff{ + width: 50%; + /* border: 1px solid red; */ + display:flex; + /* justify-content:space-between; */ +} +.fff{ + width: 40%; + /* border: 1px solid white; */ + color:#b9cbc6; + font-family: sans-serif; +} +.fff>p{ + margin-top:30px; + line-height: 2; + font-size: 15px; +} +.ffs{ + width: 40%; + margin-top: 26px; + margin-left: 100px; +} +.ffs>ul{ + font-size: 22px; + color:white; + font-family: sans-serif; +} +.ffs>ul>li{ + list-style: none; + font-size: 16px; + line-height: 2.5; + color:#b9cbc6; +} +.ffs>ul>li>a{ + text-decoration: none; + color:#b9cbc6; +} +.fs{ + width:50%; + display: flex; +} +.fsf{ + width: 40%; + /* border: 1px solid white; */ + margin-top: 26px; +} +.fss{ + width: 50%; + margin-top: 26px; + margin-left: 50px; + /* border: 1px solid white; */ +} +.fsf,.fss>ul{ + font-size: 22px; + color:white; + font-family: sans-serif; +} +.fsf>ul>li{ + list-style: none; + font-size: 16px; + line-height: 2.5; + color:#b9cbc6; +} +.fss>ul>li{ + list-style: none; + font-size: 16px; + line-height: 2.5; + color:#b9cbc6; +} +.fsf>ul>li>a{ + text-decoration: none; + color:#b9cbc6; +} +.fss>ul>li>a{ + text-decoration: none; + color:#b9cbc6; +} +.fss>ul>li>a>i{ + color:#b9cbc6; +} + +.second{ + width: 95%; + margin: auto; + /* border: 1px solid white; */ +} +.second > h1{ + color: white; +} +.second > p{ + color:#b9cbc6; + line-height:1.5; + text-align: justify; + margin-top: 20px; +} +.third{ + width: 95%; + margin: auto; +} +.third > p{ + color: #b9cbc6; + text-align: center; + margin-top:30px; + font-size: 16px; +} +.fss > h4{ + color: White; + margin-left: 40px; + margin-top: 30px; +} +.fss > h4 + div{ + width: 100%; + text-align: end; +} +.fss > h4 + div > :first-child{ + width: 39%; +} +.fss > h4 + div > :last-child{ + width: 48%; +} diff --git a/otp.html b/otp.html index e69de29..1cc587a 100644 --- a/otp.html +++ b/otp.html @@ -0,0 +1,211 @@ + + + + + + + + + + + + OTP + + + +
+
+
+ logo +
+ +

Location

+
+ + +
+
+ +

Cart

+ + +

Credits

+ + +

+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + + + + +
+ +
+
+
+

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Bill Details
Total Items Price
Product Discount₹ 0
Cart Totalok
Other Charges₹ 0
+
+ + + + + + + + +
Total to PayYou saved ₹ 0
+ +
+
+

Total

+

ok

+
+

Submit

+
+ +
+
+ + +
+ Footer Image +
+ + +
+
+
+
+
+ footer logo +

+ Order online vegetables & fruits + directly from the farm. Fraazo is + online platform that allows customer + to get farm fresh produce directly + from farmers. +

+
+
+ +
+
+
+
+ +
+
+ +

Download The App

+
+ play store + apple store +
+
+
+
+
+

Fresh Fruits & Vegetables Grocery Shopping Online

+

The quality of fruits & vegetables is synonymous with its freshness, while getting fresh fruits and vegetables is a tedious task at times but with Fraazo you can get it delivered at your doorstep. Fraazo brings a wide range of farm fresh fruits, vegetables and dairy products to you, all in just a click. We currently serve about more than 3lacs+ happy customers in Mumbai, Navi Mumbai, Thane, Kalyan-Dombivli and Virar. Fraazo has made online shopping of fresh produce much easier with its hassle-free home delivery options. You can choose the delivery slot as per your choice and schedule your order accordingly. Or you can simply opt for the option of 90 mins Express Delivery and get your order delivered in not more than 90 mins. The farm fresh fruits and vegetables on Fraazo are available at best prices compared to other vendors & supermarkets. Plus with so many exciting offers, one can save up to 20% on their Monthly grocery budgets. No need to wait in long queues in crowded supermarkets or local mandis for getting the best prices on veggies. Kick the stress out & just Fraazo your dose of freshness with savings at the comfort of your home. Fraazo directly sources fresh fruits and veggies from an extensive network of farmers across Maharashtra, hence bringing you fresh produce straight from farm to table in less than 18 hours. With our Safe & Hygienic packaging and minimal multiple handling, we ensure you get the best quality fresh produce.

+

The fruits and vegetables are 100% hand-picked fresh from farm, while some products are hydroponically-grown. The wide range of fruits and veggies on Fraazo include more than 100+ farm fresh vegetables and fruits, starting from regular veggies like dudhi, cauliflower, beetroot, cabbage, etc. to exotic veggies like broccoli, lettuce etc. We also provide the essential vegetable combos like Onion, Potato, Tomato Combo, Salad Combo, Fresh Cut-Veg Combos or Fruit Combos like Banana, Apple Combo, & more. There are a lot of exciting deals on vegetables & fruits, every day of the week, the major highlights being Monday Mandi, Veggie Wednesday, Freelivery Thursday & Fruit Friday.For payments, you can choose from the multiple payment options as Fraazo accepts Debit card, Credit card, UPI options like iMobile, Google Pay, 8+ e-Wallet options like Phonepe, JioPay, MobiKwik, Sodexo, NetBanking and Cash on Delivery (COD). If you ever have an issue with missing items or any quality issue, you can raise your concern with us in 48 hrs & we shall refund/ replace your product with “no-questions-asked-policy”. You can simply connect with our Customer Support team via Chat Support or Call on 9152291522.

+
+
+
+

© Copyrights 2021 - 2022. Fraazo. All Rights Reserved.

+
+
+
+ + + + \ No newline at end of file diff --git a/otp.js b/otp.js index e69de29..36bcbad 100644 --- a/otp.js +++ b/otp.js @@ -0,0 +1,118 @@ +var cartProduct = JSON.parse(localStorage.getItem("cart")) || []; + +var cart = document.getElementById('cart'); +if(cartProduct.length == 0){ + displayEmptyProduct(); +} +else{ + // displayProduct(); + cartValue(); +} +// Header Section +var loggedInUser = JSON.parse(localStorage.getItem("userName")) || []; +console.log(loggedInUser); + +document.getElementById("user").innerText =loggedInUser[0].name; + +// document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length; +document.getElementById('items').innerText =cartProduct.length+" items"; +document.getElementById('items').style.fontSize="12px"; + +function cartValue(){ + // var total = cartProduct.reduce(function(accumulator, element) { + // return accumulator+Number(element.price); + // },0); + + var total = localStorage.getItem("total"); + // console.log(total); + + document.getElementById("total").innerText ="₹ "+total; + document.getElementById("totals").innerText ="₹ "+total; + document.getElementById("pay").innerText ="₹ "+total; + document.getElementById("check").innerText ="₹ "+total; +} + +function displayEmptyProduct(){ + document.getElementById('cart').style.display = 'none'; + document.getElementById('cartValue').style.display = 'none'; + var h1 = document.createElement('h1'); + h1.innerText = "My Cart (0 Items)"; + + // var imgDiv = document.createElement('div'); + // imgDiv.setAttribute("class", "img"); + + var image = document.createElement('img'); + image.setAttribute("src","/system-zombies/images/empty.png"); + + // imgDiv.append(image); + + var h2 = document.createElement('h2'); + h2.innerText = "Whoops... Cart is empty"; + + var p = document.createElement('p'); + p.setAttribute("class", "underline"); + p.innerText = "Add some fruits, veggies and dairy products to your cart."; + + // var div = document.createElement('div'); + // div.setAttribute("id", "button"); + + var a = document.createElement('a'); + a.setAttribute("href", "homepage.html"); + + var btn = document.createElement('button'); + btn.innerText = "Let's Shop!"; + + a.append(btn); + // div.append(a); + + document.getElementById("empty").append(h1,image,h2,p,a); + +} +function displayProduct(){ + document.getElementById("empty").style.display = "none"; + // document.getElementById("cart").innerHTML=""; + cartProduct.map(function(element, index){ + var div = document.createElement("div"); + + var image = document.createElement("img"); + image.setAttribute("src", element.image_url); + + var mainDiv = document.createElement("div"); + mainDiv.setAttribute("class","nameAndQuantityPrice"); + + var div1 = document.createElement("div"); + + var p = document.createElement("p"); + p.innerText = element.name; + + var quantity = document.createElement("p"); + quantity.innerText = element.quantity; + + var price = document.createElement("h4"); + price.innerText = "₹ "+ element.price; + + div1.append(p,quantity,price); + + var btn = document.createElement("button"); + btn.innerText = "Remove"; + btn.addEventListener("click", function(){ + remove(index); + refreshPage(); // this is for refreshing the page because when we remove last one page should refresh and then show empty cart. + }); + + mainDiv.append(div1,btn); + + div.append(image,mainDiv); + document.getElementById("cart").append(div); + }); +} + +function remove(index){ + cartProduct.splice(index,1); + displayProduct(); + localStorage.setItem("cart",JSON.stringify(cartProduct)); +} + +function refreshPage(){ + window.location.reload(); +} \ No newline at end of file diff --git a/payment.css b/payment.css index f0b9509..c98b855 100644 --- a/payment.css +++ b/payment.css @@ -76,20 +76,20 @@ header{ /* border:1px solid red; */ width: 27%; } -#container > :last-child > i,a{ +#container > :last-child > a{ font-size:15px; color:grey; margin-top: 15px; } -#container > :last-child > i{ +/* #container > :last-child > i{ margin-top: 17px; -} +} */ #container > :last-child > p{ font-size:15px; color:grey; margin-top: 15px; font-family: sans-serif; - margin-left: -25px; + margin-left: -40px; } a>i{ color:grey; @@ -104,7 +104,7 @@ a>i:hover{ #container > :last-child > p > a:hover{ color: black; } -#container > :last-child > button{ +/* #container > :last-child > button{ border: 1px solid #ccc; border-radius:10px; height:40px; @@ -112,7 +112,7 @@ a>i:hover{ margin-top:3.5px; background-color:#5DC6AD; color:white; -} +} */ #container > :last-child > i:hover{ color:black; } diff --git a/payment.html b/payment.html index e6a1321..39628bd 100644 --- a/payment.html +++ b/payment.html @@ -16,7 +16,7 @@
- logo + logo

Location

@@ -27,10 +27,15 @@

Cart

- -

Credits

- - + + +

Credits

+ + +

+ +
@@ -123,13 +128,13 @@

- +

Total

ok

-

Place Order

+

Pay
diff --git a/payment.js b/payment.js index f227dc7..36bcbad 100644 --- a/payment.js +++ b/payment.js @@ -8,15 +8,23 @@ else{ // displayProduct(); cartValue(); } +// Header Section +var loggedInUser = JSON.parse(localStorage.getItem("userName")) || []; +console.log(loggedInUser); + +document.getElementById("user").innerText =loggedInUser[0].name; // document.querySelector('#cart > h1').innerText = "Cart items:" + cartProduct.length; document.getElementById('items').innerText =cartProduct.length+" items"; document.getElementById('items').style.fontSize="12px"; function cartValue(){ - var total = cartProduct.reduce(function(accumulator, element) { - return accumulator+Number(element.price); - },0); + // var total = cartProduct.reduce(function(accumulator, element) { + // return accumulator+Number(element.price); + // },0); + + var total = localStorage.getItem("total"); + // console.log(total); document.getElementById("total").innerText ="₹ "+total; document.getElementById("totals").innerText ="₹ "+total; @@ -49,7 +57,7 @@ function displayEmptyProduct(){ // div.setAttribute("id", "button"); var a = document.createElement('a'); - a.setAttribute("href", "index.html"); + a.setAttribute("href", "homepage.html"); var btn = document.createElement('button'); btn.innerText = "Let's Shop!"; diff --git a/signup.css b/signup.css index abe33c3..eddb093 100644 --- a/signup.css +++ b/signup.css @@ -1,6 +1,5 @@ -body{ - background-color: white; - font-family: Rockwell,"Times New Roman",serif; + body{ + font-family:Verdana, Geneva, Tahoma, sans-serif; } * { margin: 0; @@ -13,18 +12,17 @@ body{ position: absolute; } - .form-box { + .form{ width: 40%; height: 100%; - background: - white; + background:white; position: relative; padding: 20px 50px; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; } - .input-gr { + .input { margin: 30px auto; position: relative; margin-left: px; @@ -45,9 +43,10 @@ body{ h1{ font-size: 30px; font-weight: 300; - font-family: Rockwell,"Times New Roman",serif; - margin-top: 20px; - margin-left: 17px; + /* font-family: Rockwell,"Times New Roman",serif; */ + /* font-family:Verdana, Geneva, Tahoma, sans-serif; */ + margin-top: 20px; + margin-left: 17px; } .Image{ @@ -100,5 +99,4 @@ body{ font-weight: 700; color: #5dc6ad; font-size: 20px; - } \ No newline at end of file diff --git a/signup.html b/signup.html index 8792cc3..befe7b4 100644 --- a/signup.html +++ b/signup.html @@ -9,50 +9,26 @@
-
- fraazo -

Create Account

-
-
+
+ fraazo +

Create an Account

+ +
- +
-
+
- +
-
+
- +
-
+
- +
diff --git a/signup.js b/signup.js index 1167c0f..e0025bb 100644 --- a/signup.js +++ b/signup.js @@ -1,15 +1,18 @@ -var arr = []; -function signup(event) { +var user = JSON.parse(localStorage.getItem("user")) || []; + +document.querySelector("form").addEventListener("submit", getData); + +function getData() { event.preventDefault(); var data = { name: document.getElementById("name").value, - email: document.getElementById("mail").value, - password: document.getElementById("password").value, mobile : document.getElementById("mobile").value, + email: document.getElementById("email").value, + password: document.getElementById("pass").value, }; - arr.push(data); - - localStorage.setItem("signup", JSON.stringify(arr)); - alert("SignUp Succesfully") + user.push(data); + // console.log(user); + localStorage.setItem("user", JSON.stringify(user)); + alert("SignUp Succesfully!"); window.location.href = "./login.html"; } \ No newline at end of file