Commit 14fd67b3 authored by SIMHADRI SURYA KIRAN's avatar SIMHADRI SURYA KIRAN
Browse files

Added products page

parent f50ee1c6
const contents = {
categories: [
"Paddy",
"Wheat",
"Cotton",
"Potato",
"Chilli",
"Onion",
"Milltes",
"Grains",
"SugarCane",
],
imagelinks: [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdA8020hI-yocEX6ELdLbFr2uSGqOn0dLNqV4g2SO6dS7Q0EArX8LbcWFXyUO7-39d6q0&usqp=CAU",
"https://images.firstpost.com/wp-content/uploads/2019/03/Sugarcane_BoiVoice.jpg",
"https://images.unsplash.com/photo-1551754655-cd27e38d2076?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y29ybnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80",
"https://www.orfonline.org/wp-content/uploads/2015/12/150905-Onion-prices-and-Indian-politics-1280x720.jpg",
"https://www.orfonline.org/wp-content/uploads/2015/12/150905-Onion-prices-and-Indian-politics-1280x720.jpg",
],
names: ["Rice", "SugarCane", "Corn", "Onion", "Onion2"],
dates: ["26/10/2020", "01/02/2021", "02/02/2021", "04/06/2021", "05/06/2021"],
rating: ["4.6", "4.5", "4.2", "4.4"],
price: [
"1700(per quintal)",
"200(per kg)",
"20(per piece)",
"50(per kg)",
"51(per kg",
],
Paddy: ["Basmathi", "Swarna", "Sona"],
Sugarcane: ["green", "red"],
Potato: ["Sweet", "Hard"],
};
contents.categories.forEach(function (mov, ind) {
let html = `
<li class="innerlistx">
`;
let inner = `<ul class="innerlist">`;
console.log(mov);
if (contents[`${mov}`]) {
contents[`${mov}`].forEach(function (mov1, ind1) {
let temp = `<li class="innerinnerlist"><input type="checkbox" id="ckbx"/><label for="ckbx">${mov1}</label></li>`;
inner = inner + temp;
});
inner =
inner +
`<li><button style="background-color:cyan; float:right;padding:1px;margin:10px">Save</button><li>` +
`</ul><div id="topnavcomptxt${ind}" class="topnavcomp" style="font-size:18px; font-weight:500">${mov}</div></li>`;
} else {
inner = `<div id="topnavcomptxt${ind}" class="topnavcomp" style="font-size:18px; font-weight:500">${mov}</div></li>`;
}
html = html + inner;
document.querySelector(".left_top").insertAdjacentHTML("beforeend", html);
});
contents.imagelinks.forEach(function (mov, ind) {
console.log("hai");
const html = `
<div class="box" id="right_img${ind}" >
<div class="image" style="background-image: url(${mov});
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width:95%;
margin:2.5%;
border-radius: 10px;
aspect-ratio: 1/1;">
</div>
<div style="display:flex; flex-direction:row; justify-content:space-around;height: 50px;">
<div style="display:flex; flex-direction:column; height:100%;justify-content:space-between">
<div style="font-size: 0.70rem ; font-weight: 600;">${contents.names[ind]}</div>
<div style="font-size: 0.55rem;">Updated On : ${contents.dates[ind]}</div>
<div style="font-size:0.6rem;">Price :${contents.price[ind]}</div></div>
<div style="display:flex; flex-direction:column; gap: 10%; justify-content:space-between;">
<button style="width:100%;font-size: 0.5rem; float: right; padding :1%;border-radius:8px; background: linear-gradient(
to top left,
rgb(155, 250, 176),
rgb(133, 245, 235)
);">Add to Cart🛒</button>
<button style="width:100%;font-size: 0.5rem; float: right;border-radius:8px; padding :0.2vw; background: linear-gradient(
to top left,
rgb(155, 250, 176),
rgb(133, 245, 235)
);">Buy</button>
</div>
</div>
</div>
`;
document.querySelector(".right").insertAdjacentHTML("beforeend", html);
});
This diff is collapsed.
<html>
<head>
<title>KISAN MARKET</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous"
/>
<head>
<title>KISAN MARKET</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css'
integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script><style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
* {
padding: 0px;
margin: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}
li {
float: left;
html {
font-size: 120%;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
* body {
height: 100%;
z-index: 0px;
font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
list-style: none;
font-size: 20px;
background-color: #ede0d4;
}
nav {
width: 100%;
height: 50px;
background-color: black;
display: inline-block;
border-bottom: 1px solid #eaeaeb;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #f2f2f2;
#nav_title {
color: white;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
font-size: 1vw;
line-height: 50px;
}
li.dropdown {
display: inline-block;
display: inline-block;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 60px;
-webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
a {
font-size: 15px;
color: white;
text-decoration: none;
}
a:hover {
color: black;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: black;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
.dropdown:hover .dropdown-content {
display: block;
}
.active {
color: white;
}
.noactive {
color: rgba(255, 255, 255, 0.6);
}
.noactive:hover {
color: white;
}
#logo {
background-image: url("https://1.bp.blogspot.com/-l8IAJUh3F-c/XP1Av6Jv0CI/AAAAAAAAXVI/DZMZyC_aR0EC0hqf9A2mgcHP2tQb4MkZQCLcBGAs/s320/farmer.png.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
float: left;
height: 90%;
aspect-ratio: 1/1;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin: 0px 10px;
}
#menu {
display: none;
}
.dropdown:hover .dropdown-content {
display: block;
#menu_label {
display: none;
font-size: 15px;
float: right;
line-height: 50px;
}
@media (max-width: 700px) {
#menu_label {
display: block;
}
.ul {
clear: right;
position: fixed;
z-index: -2;
display: none;
right: -100%;
background-color: #7a7af8;
margin-right: 0px;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
#ul2 {
clear: right;
position: fixed;
z-index: -2;
display: none;
right: -100%;
background-color: #7a7af8;
margin-right: 0px;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.li {
display: block;
width: 100vw;
margin-right: 0px;
text-align: center;
}
#menu:checked ~ ul ul.ul {
position: fixed;
z-index: -2;
display: block;
z-index: 9;
right: 0;
}
#menu:checked ~ ul ul#ul2 {
position: fixed;
z-index: -2;
display: block;
z-index: 9;
right: 0;
top: 190px;
}
.dropdown-content {
width: 100vw;
}
.left_top {
position: static;
z-index: 15;
width: 100%;
}
.left_bottom {
position: static;
z-index: 15;
width: 100%;
}
}
ul {
display: inline;
}
@media (max-width: 1118px) {
html {
font-size: 1.5vw;
}
.box {
width: 30%;
}
#nav_title {
font-size: 1.5vw;
}
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
@media (max-width: 917px) {
html {
font-size: 2vw;
}
}
* {
box-sizing: border-box;
@media (max-width: 610px) {
html {
font-size: 4vw;
}
.box {
width: 47%;
}
#nav_title {
font-size: 3vw;
}
}
body {
font-family: Verdana, sans-serif;
.ul {
font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
color: #2f00ff;
margin-right: 10px;
line-height: 50px;
list-style: none;
}
img {
vertical-align: middle;
.li {
display: inline-block;
border-radius: 3px;
margin-right: 10px;
}
.intro {
float: left;
margin: 5px 15px;
color: white;
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
img {
vertical-align: middle;
}
.active {
background-color: #717171;
.intro {
float: left;
margin: 5px 15px;
color: white;
}
@-webkit-keyframes fade {
from {
opacity: .2
}
from {
opacity: 0.2;
}
to {
opacity: 1
}
to {
opacity: 1;
}
}
@keyframes fade {
from {
opacity: .2
}
from {
opacity: 0.2;
}
to {
opacity: 1
}
to {
opacity: 1;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
.text {
font-size: 11px;
}
}
p {
text-align: center;
width: 90%;
margin-left: 50px;
margin-right: 50px;
padding: 10px;
text-align: justify;
word-break: keep-all;
text-align: center;
width: 90%;
margin-left: 50px;
margin-right: 50px;
padding: 10px;
text-align: justify;
word-break: keep-all;
}
ul {
margin-left: 50px;
margin-right: 50px;
.footer {
position: fixed;
height: 13%;
left: 0;
bottom: 0;
width: 100%;
background-color: lightgray;
color: black;
text-align: center;
padding: 10px;
}
</style>
</head>
.footer {
position: fixed;
height: 13%;
left: 0;
bottom: 0;
width: 100%;
background-color: lightgray;
color: black;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div class="intro">
<img
src="https://1.bp.blogspot.com/-l8IAJUh3F-c/XP1Av6Jv0CI/AAAAAAAAXVI/DZMZyC_aR0EC0hqf9A2mgcHP2tQb4MkZQCLcBGAs/s320/farmer.png.png"
alt="" width="40px">
Kisan Market
<body>
<nav>
<span id="logo" style="margin: 0px 15px 0px 50px"></span>
<span class="name" id="nav_title" style="margin-right: 30px"
>Kisan Market</span
>
<input type="checkbox" id="menu" />
<label for="menu" id="menu_label" style="color: white; margin-right: 10px"
>&#9776;</label
>
<ul>
<ul class="ul">
<li class="li"><a href="/" class="noactive">Home</a></li>
<li class="li"><a href="/about" class="active">About us</a></li>
<li class="li">
<a href="/product" class="noactive">Crop products</a>
</li>
</ul>
<ul class="ul" style="float: right" id="ul2">
<li class="dropdown li">
<a href="javascript:void(0)" class="dropbtn noactive">FARMER</a>
<div class="dropdown-content">
<center>
<a href="/FARMER_LOGIN">Login</a>
</center>
<center>
<a href="/farmer_registration_form">Registration</a>
</center>
</div>
</li>
<li class="dropdown li">
<a href="javascript:void(0)" class="dropbtn noactive">CUSTOMER</a>
<div class="dropdown-content">
<center>
<a href="/customer_login"><center>Login</center></a>
</center>
<center><a href="/customer_registration">Registration</a></center>
</div>
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li class="active"><a href="/about">About us</a></li>
<li><a href="/product">Crop products</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">FARMER</a>
<div class="dropdown-content">
<a href="/FARMER_LOGIN">Login</a>
<a href="/farmer_registration_form">Registration</a>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">CUSTOMER</a>
<div class="dropdown-content">
<a href="/customer_login">Login</a>
<a href="/customer_registration">Registration</a>
</ul>
</div>
</div>
</nav>
<center>
<h1>ABOUT US</h1><br>
</center>
<p>
We are providing a platform for the farmers to get profited .Previously farmers have been suffering from
huge loss undergoing all the intermediate processes where they have been facing loss.Our website is such a
platform, where the farmer directly interacts with the customer and sell his products at msp(minimum supporting
price).
</p>
<p>
In the absence of an organized marketing structure, private traders and middlemen dominate the marketing and
trading of agricultural products.
The remuneration of the services provided by the middlemen increases the load on the consumer, although the
producer does not derive similar benefit.Many market surveys have revealed that middlemen take away about 48 per
cent of the price of rice,52 per cent of the price of groundnuts and 60 per cent of the price of potatoes offered
by consumers.There is also no fixed price categories of the products. Like fixed price for vegetables, dairy,
fruits and so on.Farmers are forced to sell their agricultural products in a cheap and easy rates which are later
multipled by the middle agents,which are then sold to the markets in an excessive price ranges.They don't get good
return on sales.</p>
<ul>
<li>Retail – B2C just Like Dedicated Online Vegetable store in Main cities of India.</li><br>
<li>Online Farmers(wholesale) – B2B: Online Portal Where farmers can submit their Agri Produce for Sale.</li>
</ul>
<div class="footer">&copy;kisanmarket<br><br>
<i class='fab fa-facebook' style='font-size:24px;color:darkblue'></i>
<i class='fab fa-whatsapp-square' style='font-size:24px;color:green'></i>
<i class='fab fa-twitter-square' style='font-size:24px;color:blue'></i>
<br>
</div>
</body>
</html>
\ No newline at end of file
</li>
</ul>
</ul>
</nav>
<center>
<h1>ABOUT US</h1>
<br />
</center>
<p>
We are providing a platform for the farmers to get profited .Previously
farmers have been suffering from huge loss undergoing all the intermediate
processes where they have been facing loss.Our website is such a platform,
where the farmer directly interacts with the customer and sell his