-
Notifications
You must be signed in to change notification settings - Fork 1
/
report.html
138 lines (118 loc) · 6.06 KB
/
report.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<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">
<script src="https://cdn.tailwindcss.com"></script>
<title>Disease Report - PlantDoc</title>
<style>
body{
background-image: url("images/report_bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
top: 0 !important;
}
.shadow_light{
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.25);
}
/* Google Translate */
#google_translate_element > div > span{
display: none;
}
#google_translate_element > div{
color: white;
}
#google_translate_element select{
color: black;
}
iframe{
display: none !important;
}
</style>
</head>
<body>
<nav class="flex items-center py-8 px-10 gap-3 min-w-fit">
<img onclick="navigate_home()" class="print:hidden w-8 cursor-pointer" src="images/back_arrow.svg">
<h1 class="text-3xl min-w-fit">Disease Report</h1>
<button onclick="download_report()" class="print:hidden min-w-fit bg-[#91D74F] px-4 py-2 text-sm rounded-lg font-medium hover:ring-4 ring-[#b5f27c]">Download Report</button>
<div class="w-full"></div>
<img class="w-32" src="images/logo.svg">
</nav>
<!-- Body -->
<div class="flex justify-between px-14 flex-col md:flex-row">
<!-- Left Part -->
<div class="max-w-sm p-10 pl-0">
<img id="original_img" src="images/damaged_leaf.jpg">
<!-- Supplement Details -->
<div class="mt-5 shadow_light p-5 rounded-xl bg-white">
<h2 class="text-[#7B7B7B] font-medium">Suggested Supplement</h2>
<div class="p-10">
<img id="supplement_image" src="https://rukminim1.flixcart.com/image/416/416/kc6jyq80/soil-manure/6/y/v/500-tapti-booster-500-ml-green-yantra-original-imaftd6rrgfhvshc.jpeg?q=70"/>
</div>
<p id="supplement_name" class="my-3 font-medium" >Supplement aa</p>
<a id="supplement_url" href="https://agribegri.com/?flag=3" target="_blank">
<button class="print:hidden bg-[#91D74F] px-8 py-2 rounded-lg font-medium hover:ring-4 ring-[#b5f27c]">Buy Now</button>
</a>
</div>
</div>
<!-- Right Part -->
<div class="flex flex-col gap-3 md:w-3/6">
<!-- Detail Box -->
<div class="shadow_light p-5 rounded-xl bg-white">
<h2 class="text-[#7B7B7B] font-medium">Name of the disease</h2>
<p id="name" class="font-semibold mt-3">Leaf Blight Isariopsis Leaf Spot </p>
<br>
<a id="youtube_link" class="print:hidden text-blue-500" href="/" target="_blank">▶ Watch videos</a>
</div>
<div class="shadow_light p-5 rounded-xl bg-white">
<h2 class="text-[#7B7B7B] font-medium">Description of the disease</h2>
<p id="desc" class="mt-3">Leaf Blight Isariopsis Leaf Spot is a fungal disease that affects plants in the family Solanaceae, including tomatoes and peppers. The disease is caused by the fungus Isariopsis griseola and is characterized by the development of dark, water-soaked spots on the leaves, which can eventually turn brown and cause the leaves to wilt and die. The fungus can also infect the fruit, causing similar symptoms.</p>
</div>
<div class="shadow_light p-5 rounded-xl bg-white">
<h2 class="text-[#7B7B7B] font-medium">Prevention Techniques</h2>
<p id="prevention" class="mt-3"> There are several ways to prevent Leaf Blight Isariopsis Leaf Spot:
Crop rotation: Planting tomatoes and peppers in a different location each year can help to reduce the buildup of the fungus in the soil.
Sanitation: Remove and destroy any infected plant debris, as the fungus can overwinter on fallen leaves or other plant parts.
Resistant varieties: Some varieties of tomatoes and peppers have been developed that are resistant to Leaf Blight Isariopsis Leaf Spot.
Proper spacing: Provide enough space between plants to promote good air circulation, which can help to reduce humidity and prevent the spread of the fungus.</p>
</div>
<!-- Google translate button -->
<div class="print:hidden" id="google_translate_element"></div>
<!-- Google translate script -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
</div>
<script>
function navigate_home(){
window.location.replace('/')
}
// Feed data into the elements
var data = JSON.parse(window.localStorage.getItem('data'))
function set(id, text){
document.querySelector('#'+id).innerText = text
}
set('name', data['title'])
set('desc', data['desc'])
set('prevention', data['prevent'])
set('supplement_name', data['sname'])
//Set original image
document.querySelector('#original_img').src = data['original_image']
//Set supplement image
document.querySelector('#supplement_image').src = data['simage']
//Set supplement buy link
document.querySelector('#supplement_url').href = data['buy_link']
// Set youtube link
document.querySelector('#youtube_link').href = 'https://www.youtube.com/results?search_query='+data['title']
// Print page
function download_report(){
window.print()
}
</script>
</body>
</html>