GNAUNIVERSITY · manan1051 · Dec 4, 2022
diff --git a/CardSearching.html b/CardSearching.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <title>Card Searching in Bootstrap & JS</title>
+
+</head>
+<style>
+    .body {
+        background-color: rgb(28, 180, 17);
+    }
+
+    .card {
+        transition: all 0.5s ease-in-out;
+        cursor: pointer;
+        box-shadow: 0px 0px 6px -4px rgba(0, 0, 0, 0.75);
+        border-radius: 10px;
+    }
+
+    .card:hover {
+        box-shadow: 0px 0px 51px -36px rgba(0, 0, 0, 1);
+    }
+
+    .navbar ul {
+        list-style: none;
+        padding-top: 6px;
+    }
+
+    .navbar ul li {
+        background: none;
+        border: 2px solid rgba(59, 233, 10, 0.258);
+        width: 120px;
+        height: 40px;
+        text-align: center;
+        float: right;
+        position: relative;
+        line-height: 35px;
+        border-radius: 10px;
+        padding-top: 0px;
+    }
+
+    .navbar ul li a {
+        text-decoration: none;
+        color: rgb(3, 2, 2);
+        font-size: 13px;
+        display: block;
+        border-radius: 10px;
+    }
+
+    .navbar ul li a:hover {
+        background-color: none;
+        color: rgb(26, 255, 0);
+        border-radius: 10px;
+    }
+
+    .navbar ul ul {
+        display: none;
+        font-size: 18px;
+        position: absolute;
+    }
+</style>
+
+<body>
+    <div class="navbar">
+        <ul>
+            <li>
+                <a href="bot.html"> AI Assistant</a>
+            </li>
+            <li>
+                <a href="map.html">Map</a>
+            </li>
+
+            <li>
+                <a href="index.html">Detection </a>
+            </li>
+            <li>
+                <a href="Consumer.html">Consumer</a>
+            </li>
+            <li>
+                <a href="CardSearching.html">Farmer</a>
+            </li>
+
+            <div id="google_translate_element"></div>
+            <script src="https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbkVDRHcwaWxRYXV3cGtiZ2tSOGl6UU1RT0xqZ3xBQ3Jtc0tsZGxRcEc5WURVQ243VXhIRC1fV0NDSExieEpITmlFaFRlay02X0ZJejZpRXkzS0V6djRKX1NyaVFNOXk2Tll3TEdtV3ZncGtNamJlSkdxQlNfdmpQdFRMTHdpV3l3UjlJaUN4eWFvcVdLQlhaem5ONA&q=https%3A%2F%2Ftranslate.google.com%2Ftranslate_a%2Felement.js%3Fcb%3DgoogleTranslateElementInit&v=vXZvAdS5tSM"></script>
+            <script>
+                function googleTranslateElementInit() {
+                    new google.translate.TranslateElement({
+                            pageLanguage: 'en'
+                        },
+                        'google_translate_element'
+                    );
+                }
+            </script>
+
+
+
+
+
+            <h2 class="text-center mt-2">Product Searching </h2>
+
+            <input type="text" class="form-control mt-3 mx-auto" id="myinput" placeholder="Live searching...." style="width:30%;">
+
+
+            <div class="container mb-5">
+                <h3 class="text-danger mt-5 text-center" id="para" style="display: none;">Not Found </h3>
+
+                <div class="row mt-3" id="card">
+
+                </div>
+
+            </div>
+
+
+            <script src="script2.js"></script>
+            <script src="suggestion.js"></script>
+
+</body>
+
+</html>
diff --git a/Consumer.css b/Consumer.css
@@ -0,0 +1,38 @@
+.navbar ul {
+    list-style: none;
+    padding-top: 6px;
+    padding-left: 50%;
+}
+
+.navbar ul li {
+    background: none;
+    border: 2px solid rgba(59, 233, 10, 0.258);
+    width: 120px;
+    height: 40px;
+    text-align: center;
+    float: right;
+    position: relative;
+    line-height: 35px;
+    border-radius: 10px;
+    padding-top: 0px;
+}
+
+.navbar ul li a {
+    text-decoration: none;
+    color: rgb(3, 2, 2);
+    font-size: 13px;
+    display: block;
+    border-radius: 10px;
+}
+
+.navbar ul li a:hover {
+    background-color: none;
+    color: rgb(26, 255, 0);
+    border-radius: 10px;
+}
+
+.navbar ul ul {
+    display: none;
+    font-size: 18px;
+    position: absolute;
+}
diff --git a/Consumer.html b/Consumer.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 
+    <title>Card Searching in Bootstrap & JS</title>
+    <link rel="stylesheet" href="Consumer.css">
+
+
+</head>
+<style>
+    .card{
+        transition: all 0.5s ease-in-out;
+        cursor: pointer;
+        box-shadow: 0px 0px 6px -4px rgba(0,0,0,0.75);
+        border-radius: 10px;
+    }
+.card:hover{
+    box-shadow: 0px 0px 51px -36px rgba(0,0,0,1);
+}
+
+</style>
+
+<body>
+
+
+</div>
+<div class="navbar">
+    <ul>
+        <li>
+            <a href="bot.html"> AI Assistant</a>
+        </li>
+        <li>
+            <a href="map.html">Map</a>
+        </li>
+
+        <li>
+            <a href="index.html">Detection </a>
+        </li>
+        <li>
+            <a href="Consumer.html">Consumer</a>
+        </li>
+        <li>
+            <a href="CardSearching.html">Farmer</a>
+        </li>
+</ul>
+</div>
+<h2 class="text-center mt-2">Product Searching    </h2>
+
+
+    <input type="text" class="form-control mt-3 mx-auto" id="myinput" placeholder="Live searching...." style="width:30%;">
+
+
+<div class="container mb-5">
+    <h3 class="text-danger mt-5 text-center" id="para" style="display: none;">Not Found </h3>
+
+    <div class="row mt-3" id="card">
+
+    </div>
+
+
+<script src="Consumer.js"></script>
+
+</body>
+</html>
diff --git a/Consumer.js b/Consumer.js
@@ -0,0 +1,100 @@
+// filter array 
+let filterarray =[];
+
+// gallery card array
+
+let galleryarray = [
+    {
+        id:1,
+        name : "organic",
+        src: "organic.jpeg",
+        desc : "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, delectus."
+    },
+    {
+        id:2,
+        name : "common",
+        src: "common.jpeg",
+        desc : "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, delectus."
+    },
+    {
+        id:3,
+        name : "meat processing",
+        src: "meat.jpeg",
+        desc : "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, delectus."
+    },
+    {
+        id:4,
+        name : "rice",
+        src: "rice.jpeg",
+        desc : "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, delectus."
+    },
+    {
+        id:5,
+        name : "onion",
+        src: "onion.jpeg",
+        desc : "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, delectus."
+    },
+    {
+        id:6,
+        name : "wheat",
+        src: "wheat.jpeg",
+        desc : "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, delectus."
+    }
+   ];
+
+
+
+showgallery(galleryarray);
+
+
+// create function to show card
+
+
+function showgallery(curarra){
+   document.getElementById("card").innerText = "";
+   for(var i=0;i<curarra.length;i++){
+       document.getElementById("card").innerHTML += `
+        <div class="col-md-4 mt-3" >
+           <div class="card p-3 ps-5 pe-5">
+               <h4 class="text-capitalize text-center">${curarra[i].name}</h4>
+
+          <img src="${curarra[i].src}" width="100%" height="320px"/>
+          <p class="mt-2">${curarra[i].desc}</p>
+          <button class="btn btn-primary w-100 mx-auto">More</button>
+
+          </div>
+          </div>
+       `
+   }
+
+}
+
+// For Live Searching Product
+
+document.getElementById("myinput").addEventListener("keyup",function(){
+    let text = document.getElementById("myinput").value;
+
+    filterarray= galleryarray.filter(function(a){
+        if(a.name.includes(text)){
+            return a.name;
+           }
+
+   });
+   if(this.value==""){
+       showgallery(galleryarray);
+   }
+   else{
+       if(filterarray == ""){
+           document.getElementById("para").style.display = 'block'
+           document.getElementById("card").innerHTML = ""; 
+       }
+       else{
+
+           showgallery(filterarray);
+           document.getElementById("para").style.display = 'none'
+       }
+   }
+
+});
+
+
diff --git a/README.md b/README.md
@@ -1 +1,16 @@
-# Hackathon1.0
+# PLANT-DISEASE-CLASSIFIER-WEB-APP-TENSORFLOWJS
+
+Tools and Technologies used 😇:-
+
+1. Tensorflow (for training the model in Google colab)
+2. Tensorflow.js (Embedding the model for client-side/browser inference)
+3. Javascript
+4. Python
+5. HTML and CSS
+
+Video Demonstration 😇 :- 
+
+<img src="demo.gif" width="768" height="500" />
+
+<p>You can access the project online <a href="https://rexsimiloluwah.github.io/PLANT-DISEASE-CLASSIFIER-WEB-APP-TENSORFLOWJS/">HERE</a> </p>
+