Master merge request

public/stylesheets/post.css

+
+ * {
+    box-sizing: border-box;
+}
+body {
+    font-family: 'Lato', 'sans-serif';
+    font-weight: 400;
+}
+a {
+    text-decoration: none;
+}
+.info-text {
+    text-align: left;
+    width: 100%;
+}
+header, form {
+    padding: 4em 10%;
+}
+.form-group {
+    margin-bottom: 20px;
+}
+h2.heading {
+    font-size: 18px;
+    text-transform: uppercase;
+    font-weight: 300;
+    text-align: left;
+    color: #506982;
+    border-bottom: 1px solid #506982;
+    padding-bottom: 3px;
+    margin-bottom: 20px;
+}
+.controls {
+    text-align: left;
+    position: relative;
+}
+.controls input[type="text"], .controls input[type="email"], .controls input[type="number"], .controls input[type="date"], .controls input[type="tel"], .controls textarea, .controls button, .controls select {
+    padding: 12px;
+    font-size: 14px;
+    border: 1px solid #c6c6c6;
+    width: 100%;
+    margin-bottom: 18px;
+    color: #888;
+    font-family: 'Lato', 'sans-serif';
+    font-size: 16px;
+    font-weight: 300;
+    border-radius: 2px;
+    transition: all 0.3s;
+}
+.controls input[type="text"]:focus, .controls input[type="email"]:focus, .controls input[type="number"]:focus, .controls input[type="date"]:focus, .controls input[type="tel"]:focus, .controls textarea:focus, .controls button:focus, .controls select:focus, .controls input[type="text"]:hover, .controls input[type="email"]:hover, .controls input[type="number"]:hover, .controls input[type="date"]:hover, .controls input[type="tel"]:hover, .controls textarea:hover, .controls button:hover, .controls select:hover {
+    outline: none;
+    border-color: #9fb1c1;
+}
+.controls input[type="text"]:focus + label, .controls input[type="email"]:focus + label, .controls input[type="number"]:focus + label, .controls input[type="date"]:focus + label, .controls input[type="tel"]:focus + label, .controls textarea:focus + label, .controls button:focus + label, .controls select:focus + label, .controls input[type="text"]:hover + label, .controls input[type="email"]:hover + label, .controls input[type="number"]:hover + label, .controls input[type="date"]:hover + label, .controls input[type="tel"]:hover + label, .controls textarea:hover + label, .controls button:hover + label, .controls select:hover + label {
+    color: #bdcc00;
+    cursor: text;
+}
+.controls .fa-sort {
+    position: absolute;
+    right: 10px;
+    top: 17px;
+    color: #999;
+}
+.controls select {
+    appearance: none;
+    cursor: pointer;
+}
+.controls label {
+    position: absolute;
+    left: 8px;
+    top: 12px;
+    width: 60%;
+    color: #999;
+    font-size: 16px;
+    display: inline-block;
+    padding: 4px 10px;
+    font-weight: 400;
+    background-color: rgba(255, 255, 255, 0);
+    transition: color 0.3s, top 0.3s, background-color 0.8s;
+    background-color: rgba(255, 255, 255, 1);
+}
+.controls label.active {
+    top: -11px;
+    color: #555;
+    background-color: rgba(255, 255, 255, 1);
+    width: auto;
+}
+.controls textarea {
+    resize: none;
+    height: 200px;
+}
+button {
+    cursor: pointer;
+    background-color: #1b3d4d;
+    border: none;
+    color: #fff;
+    padding: 12px 0;
+    float: right;
+}
+button:hover {
+    background-color: #224c60;
+}
+.clear:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+.grid {
+    background: white;
+}
+.grid:after {
+   /* Or @extend clearfix */
+    content: "";
+    display: table;
+    clear: both;
+}
+[class*='col-'] {
+    float: left;
+    padding-right: 10px;
+}
+.grid [class*='col-']:last-of-type {
+    padding-right: 0;
+}
+.col-2-3 {
+    width: 66.66%;
+}
+.col-1-3 {
+    width: 33.33%;
+}
+.col-1-2 {
+    width: 50%;
+}
+.col-1-4 {
+    width: 25%;
+}
+@media (max-width: 760px) {
+    .col-1-4-sm, .col-1-3, .col-2-3 {
+        width: 100%;
+   }
+    [class*='col-'] {
+        padding-right: 0px;
+   }
+}
+.col-1-8 {
+    width: 12.5%;
+}

routes/index.js

@@ -20,6 +20,9 @@ router.get('/farmer_registration_form', function (req, res, next) {
 router.get('/product', function (req, res, next) {
     res.render("product");
 });
+router.get('/createtrade', function (req, res, next) {
+    res.render("post");
+});
 router.get('/customer_login', function (req, res, next) {
     res.render("customer_login");
 });

views/about.ejs

@@ -326,6 +326,7 @@
           <li class="li">
             <a href="/product" class="noactive">Crop products</a>
           </li>
+          <li class="li"><a href="/createtrade" class="noactive">Create Trade</a></li>
         </ul>
         <ul class="ul" style="float: right" id="ul2">
           <li class="dropdown li">

views/homepage.ejs

@@ -355,6 +355,9 @@
         <li class="li">
           <a href="/product" class="noactive">Crop products</a>
         </li>
+        <li class="li">
+          <a href="/createtrade" class="noactive">Create Trade</a>
+        </li>
       </ul>
       <ul class="ul" style="float: right" id="ul2">
         <li class="dropdown li">

views/post.ejs

+<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 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" />
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+  <link rel="stylesheet" type="text/css" href="../stylesheets/post.css" />
+  <style>
+    * {
+      padding: 0px;
+      margin: 0px;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      text-decoration: none;
+    }
+
+    html {
+      font-size: 120%;
+    }
+
+    * body {
+      height: 100%;
+      z-index: 0px;
+      font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
+      list-style: none;
+      font-size: 20px;
+    }
+
+    nav {
+      width: 100%;
+      height: 50px;
+      background-color: black;
+      display: inline-block;
+      border-bottom: 1px solid #eaeaeb;
+    }
+
+    #nav_title {
+      color: white;
+      -ms-flex-item-align: center;
+      -ms-grid-row-align: center;
+      align-self: center;
+      font-size: 20px;
+      line-height: 50px;
+    }
+
+    li.dropdown {
+      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: 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;
+      text-decoration: none;
+      display: block;
+      text-align: center;
+    }
+
+    .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;
+    }
+
+    #menu_label {
+      display: none;
+      font-size: 15px;
+      float: right;
+      line-height: 50px;
+    }
+
+    @media (max-width: 700px) {
+      #menu_label {
+        font-size: 1.4em;
+        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;
+      }
+
+      .dropdown-content {
+        display: block;
+        position: relative;
+      }
+
+      #menu:checked~ul ul.ul {
+        position: relative;
+        margin: 0;
+        display: block;
+        z-index: 9;
+        right: 0;
+        top: 0;
+      }
+
+      #menu:checked~ul ul#ul2 {
+        position: relative;
+        margin: 0;
+        display: block;
+        z-index: 9;
+        right: -3%;
+        top: 0;
+      }
+
+      .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;
+      }
+    }
+
+    @media (max-width: 917px) {
+      html {
+        font-size: 2vw;
+      }
+    }
+
+    @media (max-width: 610px) {
+      html {
+        font-size: 4vw;
+      }
+
+      .box {
+        width: 47%;
+      }
+
+      #nav_title {
+        font-size: 3vw;
+      }
+    }
+
+    .ul {
+      font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
+      color: #2f00ff;
+      margin-right: 10px;
+      line-height: 50px;
+      list-style: none;
+    }
+
+    .li {
+      display: inline-block;
+      border-radius: 3px;
+      margin-right: 10px;
+    }
+
+    /* Add a gray background color and some padding to the footer */
+    footer {
+      background-color: #f2f2f2;
+      padding: 25px;
+    }
+
+    .mySlides {
+      display: none;
+    }
+
+    .mySlides img {
+      height: 300px;
+    }
+
+    img {
+      vertical-align: middle;
+    }
+
+    /* Slideshow container */
+    .slideshow-container {
+      display: none;
+    }
+
+    @media only screen and (min-width: 910px) {
+      .slideshow-container {
+        display: block;
+        position: relative;
+        margin: 20px 15px;
+      }
+    }
+
+    /* Caption text */
+    .text {
+      color: #f2f2f2;
+      font-size: 15px;
+      padding: 8px 12px;
+      position: absolute;
+      bottom: 8px;
+      width: 100%;
+      text-align: center;
+    }
+
+    /* Number text (1/3 etc) */
+    .numbertext {
+      color: #f2f2f2;
+      font-size: 12px;
+      padding: 8px 12px;
+      position: absolute;
+      top: 0;
+    }
+
+    .intro {
+      float: left;
+      margin: 5px 15px;
+      color: white;
+    }
+
+    /* The dots/bullets/indicators */
+    .dot {
+      height: 15px;
+      width: 15px;
+      margin: 0 2px;
+      background-color: #bbb;
+      border-radius: 50%;
+      display: inline-block;
+      transition: background-color 0.6s ease;
+    }
+
+    /* Fading animation */
+    .fade {
+      -webkit-animation-name: fade;
+      -webkit-animation-duration: 4s;
+      animation-name: fade;
+      animation-duration: 4s;
+    }
+
+    @-webkit-keyframes fade {
+      from {
+        opacity: .2
+      }
+
+      to {
+        opacity: 1
+      }
+    }
+
+    @keyframes fade {
+      from {
+        opacity: .2
+      }
+
+      to {
+        opacity: 1
+      }
+    }
+
+    /* On smaller screens, decrease text size */
+    @media only screen and (max-width: 300px) {
+      .text {
+        font-size: 11px
+      }
+    }
+  </style>
+</head>
+
+<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="active">Home</a></li>
+        <li class="li"><a href="/about" class="noactive">About us</a></li>
+        <li class="li">
+          <a href="/product" class="noactive">Crop products</a>
+        </li>
+        <li class="li"><a href="/createtrade" class="active">Create Trade</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>
+        </li>
+      </ul>
+    </ul>
+  </nav>
+  <form action="">
+    <!--  General -->
+    <div class="form-group">
+      <h2 class="heading">Booking & contact</h2>
+      <div class="controls">
+        <input type="text" id="name" class="floatLabel" name="name">
+        <label for="name">Name</label>
+      </div>
+      <div class="controls">
+        <input type="text" id="email" class="floatLabel" name="email">
+        <label for="email">Email</label>
+      </div>
+      <div class="controls">
+        <input type="tel" id="phone" class="floatLabel" name="phone">
+        <label for="phone">Phone</label>
+      </div>
+      <div class="grid">
+        <div class="col-2-3">
+          <div class="controls">
+            <input type="text" id="street" class="floatLabel" name="street">
+            <label for="street">Street</label>
+          </div>
+        </div>
+        <div class="col-1-3">
+          <div class="controls">
+            <input type="number" id="street-number" class="floatLabel" name="street-number">
+            <label for="street-number">Number</label>
+          </div>
+        </div>
+      </div>
+      <div class="grid">
+        <div class="col-2-3">
+          <div class="controls">
+            <input type="text" id="city" class="floatLabel" name="city">
+            <label for="city">City</label>
+          </div>
+        </div>
+        <div class="col-1-3">
+          <div class="controls">
+            <input type="text" id="post-code" class="floatLabel" name="post-code">
+            <label for="post-code">Post Code</label>
+          </div>
+        </div>
+      </div>
+      <div class="controls">
+        <input type="text" id="country" class="floatLabel" name="country">
+        <label for="country">Country</label>