index.html, index.js

• form should not submit without input, give proper warning

• design input button

• inside event listener for form submit, store image in a variable.

• pass that img variable to update_result function, add relevant parameter in function definiton

• inside update_result, add code that will update the image in result_container

Delete the lib folder (present inside src folder)

• Create a new folder in root directory named designs
• Move Web Designs and logo-design to designs
• in logo-designs create a folder submitted-logos
• move all logos(except gssoc) into submitted-logos
• Now copy logo logodesign-2.png to logo-designs and rename logo cropAi-logo.png
• Update logo source in README.md

folder structure should look like this:

design
      Web Designs     _(contents remain same)_
      logo-designs
            submitted-logos
                  --logodesign-1.png
                  --logodesign-2.png
            --corpAi-logo.png      (copy of logodesign-2)
            --gssoc-logo.png

Refer the landing page of design-1 in Web Designs

Create almost the same background as you see in the picture, find the resources in design-1 folder itself. (do not create any button, links, text),i.e only the leaves, glass and bg color to be updated.

Make sure your it occupies whole screen, and no scrolling should be there.
Do not touch the 3 internal divs leave them as it is work on outer div with id=background

index.html
On clicking about show brief of project/application on right side (or wherever you like, but be sane :p), it should look good and the user must get a good experience,
Do not remove the button while showing this, size or position may be changed (but avoid change of position/size)

You may show this "CorpAi is a crop advisory app for farmers and gardeners. It can diagnose pest damage, plant disease and nutrient deficiencies that are affecting crops and can offer corresponding treatment measures."

Any modification should be done inside div with id=landing_container

Index.html index.js

In result container before appending the result, clear the previous content.
Test your functionality by submitting input multiple times (use analyze other crop button below the results and submit the form again)

Understand current functionality before starting!

If there is any doubt, Kindly ask.
Code neatly, Comment nicely!!

refer landing page of design-2 in Web Designs

Create almost the same background as you see in the picture, find the resources in design-2 folder itself. (do not create any button, links, text)

add latest Bootstrap CDN to
src/index.html
src/landing pages/landing-pages-2/landing2.html
src/landing pages/landing-pages-3/landing3.html

I will add github actions to the project. GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD.

Should i work with this as this will be very good for the project.

@rajats98 should i proceed with it.

About me:-
GSSoC Aspirant.

landing2.html
Navbar links

remove Blog And Contact Us from navBar
rename Product to Analyze Crop, link it to index.html?q=analysis (relative address to index.html)
link Team to contributors.html (src/contributors page/contributor.html)

Also Link the Analyze button to index.html?q=analysis

Add heading and button in landing-page2
(/src/landing pages/landing-page-2/landing2.html)
Remember, do not alter the background and button should be dummy.
Make sure the page remains not scrollable.

--refer landing page in Web Designs/design-2/

index.html

Add a form with single input(file input) inside div with id=input_container

NOTE: while working add hidden class to div with id=landing_container and result_container

while submitting add hidden class to input_container and result container

If there is any confusion, kindly ask : ).

refer landing page of design-3 in Web Designs

Create almost the same background as you see in the picture, find the resources in design-3 folder itself. (do not create any button, links, text)

landing3.html

rename Product to Analyze Crop, link it to index.html?q=analysis (relative address to index.html)
rename contact us to Team, link it to contributors.html (src/contributors page/contributor.html), use relative address

Also Link the Start analysing button to index.html?q=analyze

../src/index.html

create a divs as described

div1 id:"background"
      div2 id: landing_container
      div3 id: input_container
      div4 id: result_container

i.e. one div enclosing 3 divs

Update Frontend/README.md

Under heading IMPORTANT LINKS, add details about data-modeling repo in brief (tech-stack, techniques, dataset etc.), give it a heading (eg. Data-Modeling)
the link to repo should be there

The PR template helps the reviewer to go through the changes made by the contributor rather than going through lines of codes to find it. I can design a PR template according to the structure of CropAi project. It can have Easy/ Medium as the Labels.

Is your feature request related to a problem? Please describe.
This is feature which help new contributor to understand how they can contribute project and how we can help this project more effect and do understand what this project really is and how we can get started. Let's get started with making this project more better 👍

Describe the solution you'd like
Build a Document CONTRIBUTE.md that help everyone to understand what this project is and how the collaborator get started with this and understand what the current project status and Where they need to take.

inside input_container
show input image on the form( at place of dummy image icon)

At one time only one of the div will be shown (landing_container/ input_container/ result_container).

On submitting form
create a new js function() with following functionality

   stop default action of form.
   store input_image in a variable

   
   create a js variable as 
   analysis_report_json = {
   Disease: "Pepper Bell Healthy",
   Symptoms: {
      "1":
        "Initial symptoms of infection are the formation of small, circular, water-soaked spots on leaves, stems, petioles and/or peduncles",
      "2":
        "Infected Pepper Bell have Circular lesions on fruit which contain tan to orange to black concentric rings in the center.",
      "3":
        "It can have lesions may also occur on leaves and stems and appear as irregularly shaped gray spots with dark margins",
      "4":
        "Seeds did not germinate; seedlings collapsing and dying; dark stems which are shriveled near the soil line",
      "5": " Water-soaked lesions on the stem and discolored roots.",
      "6":
        "High numbers of lesions may form on leaves causing them to turn yellow and drop from the plant."
    },
    Treatment: {
      "1":
        "Plant only diseasefree, certified seed",
      "2":
        "Always plant disease-free seeds and transplants.",
      "3":
        "Seeds can be freed from infection by treating with hot water.",
      "4":
        "Use disease free planting material; remove and destroy all crop debris after harvest, or plow material deeply under soil",
      "5":"Magnesium deficiency can be prevented by applying dolomite lime to the soil, if an increase in soil pH is required, or through applications of a fertilizer containing magnesium."
    },
    Recommended_Product: {
      "1": "Chlorothalonil-720-SFT : https://www.amazon.com/Chlorothalonil-Generic-Daconil-weatherstik-quali-1060/dp/B004GTOKSO",
      "2": " Tafgor-Dimethoate : https://www.amazon.in/Tata-TATA-Tafgor-Dimethoate-Insecticide/dp/B074CCXPKF",
      "3": "Ethion Insecticide : https://www.indiamart.com/proddetail/ethion-insecticide-12777127212.html",
      "4":"Vector Super : https://www.amazon.in/Vector-100ML-IMIDACLOPRID-Systemic-Insecticide/dp/B07D7YTYTB"
    }
   }

   update the data in result_container using js, while writing code keep in mind the analysis_report_json will be differnt for differnt input( no. of points under any inner-obect may change), you may change html as required(like you may add id to suitable elements)

   call show_result_container() 

delete dummy data from result_container (keep the required structure)

Create a docs folder and move all .md files inside it

and update the files as follows
PR_template.md
rename to pull_request_template.md
add a comment in Fixes issue, "Use one of fixes or addresses and remove the other one"

README.md
Remove How to start contributing section

Inside Important Notice add this line and add relative links to both files
Before contributing to this project do check CONTRIBUTING.md file and CODE_OF_CONDUCT.md file.

UPDATE ANY RELATIVE LINK(image,file) THAT GETS AFFECTED BY MOVING FILES TO NEW DIRECTORY

In case of any doubt,ask!

Update src/index.html
refer designs/Web Designs/design-1/landing-page

Add both the buttons and heading, the buttons should be dummy.
Add these content inside div#landing_container

We do not need any navbar or any link (as in design).

you might need to change the code written before, change it but make sure it almost looks same as design.

src/landing pages/landing-page-2/landing2.html

Update bootstrap to latest version (4.4.1)
Try to use bootstrap extensively to design, position(spacing and size etc.) elements,
make the page responsive
some alteration in the design are allowed but it should look good
remove/update the redundant CSS on the go.

If there is any doubt, Kindly ask.
Code neatly, Comment nicely!!

Create a folder contributors page (exactly same) inside src
Create a js script named script_for_fetching_userdata.js (or similar name)

Add GitHub username of contributors to an array ( say, contributor_usernames)
get contributors from each of the 4 repository present in github.com/CropAi

get details for all users from https://api.github.com/users/{username}, and store only following keys

login
avatar
html_url
name
bio

for each user in contributor_usernames array.

If there is any doubt, Kindly ask.
Code neatly, Comment nicely!!

There is two semicolons at the last column and there should be one.

Can i resolve it?

Design the webpage using any designing software
It should have two parts

1. Admin and Mentors
2. Participants

Add shape(maybe rectangle) containing an image(profile), Name, and role(Admin, mentor or participant)

It will be assigned to 5 participants, each participant must only submit one design, if you have more than one ideas, design and submit the best one.

Deadline 7th April

EDIT:

1. make folder named designs/Web Designs/contributors
2. Submit your design inside contributors, name your folders contributors-x (x=1,2...)
3. Add proper resources(any graphics used, that you think will be required while translating the design to code) with your design
4. Add dummy data, some images should be left blank and there should be proper design for empty image!
5. Add suitable number of cards/user-data that fully define your design

Suggest a new logo for our Crop-Ai organization

This is an open Issue - This issue will not be assigned, anyone can work on this

Guidelines

1. Profile picture should be a PNG, JPG, or GIF file under 1 MB in size. For the best quality rendering, we recommend keeping the image at 500 by 500 pixels.
2. Explain your design.
3. Mention How is it better than the earlier one(if any selected)
4. Background should be transparent (as we need to place it over colored graphics in website)

Any PR not satisfying guidelines will be ignored
Add your logo to /design/logo-designs/submitted-logos

Suggestion

1. Magnifying glass(for detection), plant can add more relevance to logo
2. One can use logo makers, eg. https://brandmark.io/ (we just have to give keywords and AI will be used to generate logo for us)

ISSUE TO CLOSE ON 05/04/2020

Add a brief introduction and working of application. Write basic working, it will be properly updated later on with screenshots.

Add links to backend and data-modeling repos (give overview of each repo, if possible).

Also mention about Gssoc in the intro or separately.

Refer to #4 to get some idea.

index.html

dummy image on form instead of empty image
download empty image icon/pic
show it input container's form

• Create a folder named src
• Inside src create index.html, style.css, script.js
• Put basic html template in index.html, and link style and script to it.

Create a folder contributors page inside src (name the form exactly same)
create a file contributors.html
Check designs/contributors/contributors-4, we need a similar page with few changes in it

1. Navbar will have only 2 links on right( HOME, ANALYZE CROP NOW)
2. Add two buttons/tabs (Participant, Mentor and admins) below the CONTRIBUTORS heading (towards left)
3. Only Add Github(out of 3 in design) icons in card(you may use icon libraries like font Awesome for icons)
4. Page should be responsive
5. Use dummy data for now

Use the latest bootstrap(4.4.1) to design the page

In case of any doubt, Kindly ask
Code neatly, Comment nicely!!

Edit: Upgraded tag to hard (creating a responsive page from scratch)

src/contributors page
contributor.html

navbar --> link ANALYZE CROP NOW to index.html?q=analysis (relative address to index.html)

move contributor.css to assets and update the same in contributor.html

1. Create folders as per this folder structure

../src
    ../assets
    ../img
    ../lib	
    ../landing pages
           ../landing page 2
           ../landing page 3

2. Rename style.css and script.js to index.js and index.css and move both files to assets.
   And update index.html accordingly.

Index.html
NOTE: hidden class is already present in assests/index.css

1. Add 'hidden' class to div#input_container, div#result_container

2. make 3 functions in assets/index.js
   show_landing_container() show_input_container() show_result_container()
   each function should add hidden class to other two div, and remove from the div to be shown, eg ,if show_input_container() is called remove the hidden class from #input_container and add it to landing_container and result_container
   (you can use jQuery, or plain js, it is not necessary to use hidden class method, you may use jQuery/js functions)

3. On click Analyze call show_input_container()

In case of any doubts ask : ).

create a new function which will called on clicking Analyze
function should do the following

append '?q=analyze' to url (do not redirect, use windows.pushState(), or any other method)
call show_input_container()

index.html , index.js
routing structure (consider base_url = "...../index.html" or "www.domain.com"

1. when url is hit 
base_url
	?q=analyze --> show input container
	otherwise  --> show landing container
			
2. Our routing Structure (no refresh should take place,route should be changed, you may use function like window.history.pushstate())

	analyze btn clicked ->  ?q=analyze
	form submitted      ->  ?q=result 

current bugs 
	1. When base_url?q=analyze is refreshed, a glimpse of landing is seen (you may hide all 3 divs initially and show according to route)
	2. click analyze btn, ?q=analyze will open, but on pressing back(browser's back) only url changes (on back, you may reload the page after changing url)

You have to do the routing and fix the bugs.
Before commenting make sure you have a well executable plan, and you have explored how to do each step clearly
Participants with excellent js skill should ask for this assignment
In case of doubts asked.

download latest stable version jQuery (min, not slim) and save it to ../src/lib and add it to ../src/index.html
Or
Add using jquery CDN

• Move vision, from CONTRIBUTE.md to README (below INTRO)

• Update Project Admin and Mentors, Slack Channel from CONTRIBUTE.md (i.e. name with github link)

• Remove owners, mentors, slack channel from CONTRIBUTE.md

• Move Our Pledge, Our Standards, Our Responsibilities, Scope, Enforcement, Attribution from CONTRIBUTE.md to CODE_OF_CONDUCT.md (create new file).

Please don't comment if you are working on any issue(except #1, #57)

on the load of the page check url
www.domainname.com?q="section"
(eg. www.corp-ai.com?q=analyze)

if section == analyze
	call show_input_container();
if section == result
	redirect to '/' 

Index.js
Add a button in result_container, with text like Analyze other crop or something like
Design and position it properly.
Onclick call function analyze_click()
You may use Bootstrap (CDN added already)

The issue template helps the contributor to briefly mention the issue and the change required to fix it. I can design a issue template according to the structure of CropAi project. It can have Easy/ Medium as the Labels.

index.html
You need to show the following data inside the div(id=result_container), Don't make table with 3 columns as made in any of the designs.
Show some creativity
ONLY MAKE CHANGES IN div#result_container
NOTE: while working add hidden class to div with id=landing_container and input_container
while submitting add hidden class to input_container and result container
If there is any confusion, kindly ask : ).

For now hard code this data

Disease Name: Pepper__bell___Bacterial_spot
Symptoms :
1 : Leaf spots that appear on the lower surface of older leaves as small, pimples and on the upper leaf surface as small water-soaked spots are a symptom of bacterial spot.
2 : Eventually, the spots develop gray to tan centers with darker borders. Lesions enlarge during warm, humid weather. Leaves may then turn yellow, then brown and drop. Lesions may also develop on stems.
3: Lesions may also develop on stems. Fruits develop small, raised rough spots that do not affect eating quality. Severely infected leaves will drop resulting in

Treatment :
1 : Treat seeds by soaking them for 2 minutes in a 10% chlorine bleach solution (1 part bleach; 9 parts water). Thoroughly rinse seeds and dry them before planting.
2 : Mulch plants deeply with a thick organic material like newspaper covered with straw or grass clippings.
3 : Spray every 10-14 days with fixed copper (organic fungicide) to slow down the spread of infection.
4: Rotate peppers to a different location if infections are severe and cover the soil with black plastic mulch or black landscape fabric prior to planting.

Recommended products :
1 : Neem Oil : https://www.planetnatural.com/product/organic-neem-oil/
2 : Garden Dust : https://www.planetnatural.com/product/garden-dust/

index.html
Update bootstrap to the latest version (4.4.1)
update bootstrap to latest version and update pages according to that, no scrolling on any page (expect result page, when content is large, only vertical scroll), no horizontal scroll in any case

Use bootstrap extensively to design, position(spacing and size, etc.) elements

colors/design may be changed, it must look aesthetic.
remove/update the redundant CSS on the go.
Make the design responsive

Before starting with it, understand what each and every element does.
Understand the flow of the whole code and website.
No functionality should be changed, no functionality should be broken.

If there is any doubt, Kindly ask.
Code neatly, Comment nicely!!

This issue will be assigned to @abhu-A-J, considering the previous contributions and understanding of the code.

on clicking logo, go to "/"

There is no navbar in he index file.

Change the href to # for Corp Ai anchor tag in navbar.
Find and Change the tree in the bg to a similar tree(of bigger size), so that it looks clear.

Web Design

Create UI design in any designing software (no restrictions on software, can be online/offline)

We need 1-3 pages i.e.

• Landing/Cover Page
  Depends on your creativity, you can add a description, animation, or anything you feel
  relevant

• Input form
  This form contains only one required input field, that takes an image of leaf as input.

• Result
  Here the result presented under 3 categories, namely, Symptoms, Treatment, and
  Recommended products.

1. One can work on one or more than one the these.
2. Cover page is optional.
3. Whole thing/flow can be shown on one or more pages.

Add all the pictures/animations/icons or their link with your PR.
Submit in a proper format, so that UI developers can use it without having the designing tool.

This task is open to the creativity of the contributor.

Refer these:
https://medium.theuxblog.com/11-best-prototyping-tools-for-ui-ux-designers-how-to-choose-the-right-one-c5dc69720c47
https://www.creativebloq.com/how-to/20-best-ui-design-tools

add a class name hidden in ../src/assets/index.css
it, when added to any div, should hide that div ( it must hide the div, as it is removed, after hiding it should not take space)

src/landing pages/ landing-2 and landing-3
Add jQuery in both html files above the bootstrap script tag.