Hugging Face's logo

Spaces:
PRC142004
/
Irrigation_Trial
Sleeping

App Files Community
krushimitravit commited on
Commit
7ab4e86
·
verified ·
1 Parent(s): f574f17

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +328 -328
templates/index.html CHANGED
@@ -1,329 +1,329 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Smart Irrigation Predictor</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
9
- <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
- <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
- <style>
13
- /* === COLOR SYSTEM === */
14
- :root {
15
- --deep-green: #1a5d3a;
16
- --accent-green: #198754;
17
- --darker-accent: #143d2e;
18
- --background: #f8f9fa;
19
- --surface: #ffffff;
20
- --text-dark: #212529;
21
- --text-muted: #6c757d;
22
- --border: #dee2e6;
23
- }
24
-
25
- /* === GLOBAL STYLES === */
26
- * {
27
- margin: 0;
28
- padding: 0;
29
- box-sizing: border-box;
30
- }
31
-
32
- body {
33
- background-color: #dbfee5;
34
- font-family: 'Outfit', sans-serif;
35
- font-weight: 400;
36
- color: var(--text-dark);
37
- }
38
-
39
- /* === CURVED HERO HEADER === */
40
- .hero-header {
41
- background-color: var(--deep-green);
42
- color: white;
43
- padding: 2rem 0 2rem 0;
44
- text-align: center;
45
-
46
- margin-bottom: 2rem;
47
- }
48
-
49
- .hero-header h1 {
50
- font-size: 2.5rem;
51
- font-weight: 700;
52
- margin-bottom: 0.5rem;
53
- }
54
-
55
- .hero-header p {
56
- font-size: 1.1rem;
57
- font-weight: 300;
58
- opacity: 0.9;
59
- }
60
-
61
- /* === CONTAINER === */
62
- .main-container {
63
- max-width: 1200px;
64
- margin: 0 auto;
65
- padding: 0 0.1rem;
66
- position: relative;
67
- z-index: 10;
68
- }
69
-
70
- /* === CARD STYLES === */
71
- .card {
72
- background: var(--surface);
73
- border: none;
74
- border-radius: 20px;
75
- border: 3px dashed var(--accent-green);
76
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
77
- padding: 2rem;
78
- margin-top: 2rem;
79
- }
80
-
81
- /* === FORM STYLES === */
82
- .form-label {
83
- font-weight: 500;
84
- color: var(--text-dark);
85
- margin-bottom: 0.5rem;
86
- }
87
-
88
- .form-control, .form-select {
89
- background-color: var(--background);
90
- border: 1px solid var(--border);
91
- border-radius: 8px;
92
- padding: 0.75rem 1rem;
93
- font-size: 1rem;
94
- border-color: var(--accent-green);
95
- font-weight: 400;
96
- transition: all 0.3s ease;
97
- }
98
-
99
- .form-control:focus, .form-select:focus {
100
- background-color: #259855;
101
- border-color: var(--accent-green);
102
- box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1);
103
- outline: none;
104
- }
105
-
106
- /* === BUTTON STYLES === */
107
- .btn-primary-action {
108
- background-color: var(--deep-green);
109
- color: white;
110
- border: none;
111
- border-radius: 8px;
112
- padding: 0.75rem 1.5rem;
113
- font-weight: 500;
114
- font-size: 1rem;
115
- transition: all 0.3s ease;
116
- display: inline-flex;
117
- align-items: center;
118
- gap: 0.5rem;
119
- width: 100%;
120
- justify-content: center;
121
- }
122
-
123
- .btn-primary-action:hover {
124
- background-color: #259855;
125
- color: rgb(255, 255, 255);
126
- transform: translateY(-2px);
127
- box-shadow: 0 4px 12px rgba(26, 93, 58, 0.3);
128
- }
129
-
130
- .btn-secondary-pill {
131
- background-color: #259855;
132
- color: white;
133
- border: 1px solid var(--accent-green);
134
- border-radius: 50px;
135
- padding: 0.75rem 1.5rem;
136
- font-weight: 500;
137
- font-size: 1rem;
138
- transition: all 0.3s ease;
139
- display: inline-flex;
140
- align-items: center;
141
- gap: 0.5rem;
142
- width: 100%;
143
- justify-content: center;
144
- }
145
-
146
- .btn-secondary-pill:hover {
147
- background-color: var(--accent-green);
148
- color: white;
149
- }
150
-
151
- /* === WEATHER INFO BOX === */
152
- #weather_info {
153
- background-color: #f0fff4;
154
- border: 2px solid var(--accent-green);
155
- padding: 1.5rem;
156
- border-radius: 12px;
157
- min-height: 120px;
158
- display: flex;
159
- justify-content: center;
160
- align-items: center;
161
- }
162
-
163
- #weather_data {
164
- width: 100%;
165
- }
166
-
167
- /* === HERO IMAGE === */
168
- .hero-image {
169
- width: 100%;
170
- height: 100%;
171
- object-fit: cover;
172
- border-radius: 20px;
173
- max-height: 450px;
174
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
175
- }
176
-
177
- /* === PAGE LOADER === */
178
- #page-loader {
179
- position: fixed;
180
- top: 0;
181
- left: 0;
182
- width: 100%;
183
- height: 100%;
184
- background-color: rgba(26, 93, 58, 0.9);
185
- z-index: 9999;
186
- display: none;
187
- justify-content: center;
188
- align-items: center;
189
- flex-direction: column;
190
- }
191
-
192
- .loader-spinner {
193
- width: 4rem;
194
- height: 4rem;
195
- border-width: 0.4em;
196
- border-color: white;
197
- border-right-color: transparent;
198
- }
199
-
200
- .loader-text {
201
- color: white;
202
- font-size: 1.2rem;
203
- font-weight: 500;
204
- margin-top: 1rem;
205
- }
206
-
207
- /* === RESPONSIVE === */
208
- @media (max-width: 768px) {
209
- .hero-header h1 {
210
- font-size: 2rem;
211
- }
212
-
213
- .card {
214
- padding: 2rem 1.5rem;
215
- }
216
- }
217
- </style>
218
- </head>
219
- <body>
220
-
221
- <div id="page-loader">
222
- <div class="spinner-border text-light loader-spinner" role="status">
223
- <span class="visually-hidden">Loading...</span>
224
- </div>
225
- <div class="loader-text">Processing your request...</div>
226
- </div>
227
-
228
- <!-- Curved Hero Header -->
229
- <div class="hero-header">
230
- <h1><i class="bi bi-droplet-fill"></i> Smart Irrigation Predictor</h1>
231
- <p>AI-powered water requirement prediction for sustainable farming</p>
232
- </div>
233
-
234
- <!-- Main Container -->
235
- <div class="main-container">
236
- <div class="card">
237
- <form action="/predict" method="POST" id="prediction-form">
238
- <div class="row align-items-center">
239
- <div class="col-lg-6 order-2 order-lg-1">
240
- <div class="mb-3">
241
- <label for="crop_type" class="form-label"><i class="bi bi-flower2"></i> Crop Type</label>
242
- <select class="form-select" id="crop_type" name="crop_type" required>
243
- <option value="BANANA">Banana</option>
244
- <option value="BEAN">Bean</option>
245
- <option value="CABBAGE">Cabbage</option>
246
- <option value="CITRUS">Citrus</option>
247
- <option value="COTTON">Cotton</option>
248
- <option value="MAIZE">Maize</option>
249
- <option value="MELON">Melon</option>
250
- <option value="MUSTARD">Mustard</option>
251
- <option value="ONION">Onion</option>
252
- <option value="OTHER">Other</option>
253
- <option value="POTATO">Potato</option>
254
- <option value="RICE">Rice</option>
255
- <option value="SOYABEAN">Soyabean</option>
256
- <option value="SUGARCANE">Sugarcane</option>
257
- <option value="TOMATO">Tomato</option>
258
- <option value="WHEAT">Wheat</option>
259
- </select>
260
- </div>
261
-
262
- <div class="mb-3">
263
- <label for="soil_type" class="form-label"><i class="bi bi-globe2"></i> Soil Type</label>
264
- <select class="form-select" id="soil_type" name="soil_type" required>
265
- <option value="DRY">Dry</option>
266
- <option value="HUMID">Humid</option>
267
- <option value="WET">Wet</option>
268
- </select>
269
- </div>
270
-
271
- <div class="mb-3">
272
- <label for="city" class="form-label"><i class="bi bi-geo-alt"></i> City / Location</label>
273
- <input type="text" class="form-control" id="city" name="city" placeholder="Enter city for weather data" required>
274
- </div>
275
-
276
- <button type="button" class="btn-secondary-pill mb-3" id="fetch-weather-btn" onclick="fetchWeather()">
277
- <i class="bi bi-cloud-sun"></i> Fetch Weather Data
278
- </button>
279
-
280
- <div id="weather_info" class="mb-3" style="display: none;">
281
- <div id="weather_data"></div>
282
- </div>
283
-
284
- <div class="mb-3">
285
- <label for="motor_capacity" class="form-label"><i class="bi bi-gear"></i> Motor Capacity (liters/sec)</label>
286
- <input type="text" class="form-control" id="motor_capacity" name="motor_capacity" required>
287
- </div>
288
-
289
- <button type="submit" class="btn-primary-action" id="predict-btn">
290
- <i class="bi bi-calculator"></i> Predict Water Requirement
291
- </button>
292
- </div>
293
-
294
- <div class="col-lg-6 order-1 order-lg-2 mb-4 mb-lg-0">
295
- <img src="/static/images/img.png" alt="Smart Irrigation" class="hero-image">
296
- </div>
297
- </div>
298
- </form>
299
- </div>
300
- </div>
301
-
302
- <script>
303
- function fetchWeather() {
304
- const city = document.getElementById('city').value;
305
- if (!city) { alert('Please enter a city name first.'); return; }
306
- const weatherDiv = document.getElementById('weather_data');
307
- const weatherInfoBox = document.getElementById('weather_info');
308
- const fetchBtn = document.getElementById('fetch-weather-btn');
309
- weatherInfoBox.style.display = 'flex';
310
- weatherDiv.innerHTML = `<div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div>`;
311
- fetchBtn.disabled = true;
312
- fetch(`/fetch_weather?city=${city}`)
313
- .then(response => { if (!response.ok) throw new Error('City not found or server error.'); return response.json(); })
314
- .then(data => {
315
- if (data) { weatherDiv.innerHTML = `<div style="text-align: left; width: 100%;"><strong>Weather:</strong> ${data.description}<br><strong>Temperature:</strong> ${data.temperature}°C<br><strong>Humidity:</strong> ${data.humidity}%<br><strong>Pressure:</strong> ${data.pressure} hPa</div>`; }
316
- else { weatherDiv.innerHTML = 'Could not retrieve weather data.'; }
317
- })
318
- .catch(error => { console.error('Error fetching weather:', error); weatherDiv.innerHTML = 'An error occurred. Please check the city name.'; })
319
- .finally(() => { fetchBtn.disabled = false; });
320
- }
321
- document.getElementById('prediction-form').addEventListener('submit', function(event) {
322
- if (!this.checkValidity()) { return; }
323
- document.getElementById('page-loader').style.display = 'flex';
324
- document.getElementById('predict-btn').disabled = true;
325
- });
326
- </script>
327
-
328
- </body>
329
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Smart Irrigation Predictor</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ /* === COLOR SYSTEM === */
14
+ :root {
15
+ --deep-green: #1a5d3a;
16
+ --accent-green: #198754;
17
+ --darker-accent: #143d2e;
18
+ --background: #f8f9fa;
19
+ --surface: #ffffff;
20
+ --text-dark: #212529;
21
+ --text-muted: #6c757d;
22
+ --border: #dee2e6;
23
+ }
24
+
25
+ /* === GLOBAL STYLES === */
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ body {
33
+ background-color: #ffffff;
34
+ font-family: 'Outfit', sans-serif;
35
+ font-weight: 400;
36
+ color: var(--text-dark);
37
+ }
38
+
39
+ /* === CURVED HERO HEADER === */
40
+ .hero-header {
41
+ background-color: var(--deep-green);
42
+ color: white;
43
+ padding: 2rem 0 2rem 0;
44
+ text-align: center;
45
+
46
+ margin-bottom: 2rem;
47
+ }
48
+
49
+ .hero-header h1 {
50
+ font-size: 2.5rem;
51
+ font-weight: 700;
52
+ margin-bottom: 0.5rem;
53
+ }
54
+
55
+ .hero-header p {
56
+ font-size: 1.1rem;
57
+ font-weight: 300;
58
+ opacity: 0.9;
59
+ }
60
+
61
+ /* === CONTAINER === */
62
+ .main-container {
63
+ max-width: 1200px;
64
+ margin: 0 auto;
65
+ padding: 0 0.1rem;
66
+ position: relative;
67
+ z-index: 10;
68
+ }
69
+
70
+ /* === CARD STYLES === */
71
+ .card {
72
+ background: var(--surface);
73
+ border: none;
74
+ border-radius: 20px;
75
+ border: 3px dashed var(--accent-green);
76
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
77
+ padding: 2rem;
78
+ margin-top: 2rem;
79
+ }
80
+
81
+ /* === FORM STYLES === */
82
+ .form-label {
83
+ font-weight: 500;
84
+ color: var(--text-dark);
85
+ margin-bottom: 0.5rem;
86
+ }
87
+
88
+ .form-control, .form-select {
89
+ background-color: var(--background);
90
+ border: 1px solid var(--border);
91
+ border-radius: 8px;
92
+ padding: 0.75rem 1rem;
93
+ font-size: 1rem;
94
+ border-color: var(--accent-green);
95
+ font-weight: 400;
96
+ transition: all 0.3s ease;
97
+ }
98
+
99
+ .form-control:focus, .form-select:focus {
100
+ background-color: #259855;
101
+ border-color: var(--accent-green);
102
+ box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1);
103
+ outline: none;
104
+ }
105
+
106
+ /* === BUTTON STYLES === */
107
+ .btn-primary-action {
108
+ background-color: var(--deep-green);
109
+ color: white;
110
+ border: none;
111
+ border-radius: 8px;
112
+ padding: 0.75rem 1.5rem;
113
+ font-weight: 500;
114
+ font-size: 1rem;
115
+ transition: all 0.3s ease;
116
+ display: inline-flex;
117
+ align-items: center;
118
+ gap: 0.5rem;
119
+ width: 100%;
120
+ justify-content: center;
121
+ }
122
+
123
+ .btn-primary-action:hover {
124
+ background-color: #259855;
125
+ color: rgb(255, 255, 255);
126
+ transform: translateY(-2px);
127
+ box-shadow: 0 4px 12px rgba(26, 93, 58, 0.3);
128
+ }
129
+
130
+ .btn-secondary-pill {
131
+ background-color: #259855;
132
+ color: white;
133
+ border: 1px solid var(--accent-green);
134
+ border-radius: 50px;
135
+ padding: 0.75rem 1.5rem;
136
+ font-weight: 500;
137
+ font-size: 1rem;
138
+ transition: all 0.3s ease;
139
+ display: inline-flex;
140
+ align-items: center;
141
+ gap: 0.5rem;
142
+ width: 100%;
143
+ justify-content: center;
144
+ }
145
+
146
+ .btn-secondary-pill:hover {
147
+ background-color: var(--accent-green);
148
+ color: white;
149
+ }
150
+
151
+ /* === WEATHER INFO BOX === */
152
+ #weather_info {
153
+ background-color: #f0fff4;
154
+ border: 2px solid var(--accent-green);
155
+ padding: 1.5rem;
156
+ border-radius: 12px;
157
+ min-height: 120px;
158
+ display: flex;
159
+ justify-content: center;
160
+ align-items: center;
161
+ }
162
+
163
+ #weather_data {
164
+ width: 100%;
165
+ }
166
+
167
+ /* === HERO IMAGE === */
168
+ .hero-image {
169
+ width: 100%;
170
+ height: 100%;
171
+ object-fit: cover;
172
+ border-radius: 20px;
173
+ max-height: 450px;
174
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
175
+ }
176
+
177
+ /* === PAGE LOADER === */
178
+ #page-loader {
179
+ position: fixed;
180
+ top: 0;
181
+ left: 0;
182
+ width: 100%;
183
+ height: 100%;
184
+ background-color: rgba(26, 93, 58, 0.9);
185
+ z-index: 9999;
186
+ display: none;
187
+ justify-content: center;
188
+ align-items: center;
189
+ flex-direction: column;
190
+ }
191
+
192
+ .loader-spinner {
193
+ width: 4rem;
194
+ height: 4rem;
195
+ border-width: 0.4em;
196
+ border-color: white;
197
+ border-right-color: transparent;
198
+ }
199
+
200
+ .loader-text {
201
+ color: white;
202
+ font-size: 1.2rem;
203
+ font-weight: 500;
204
+ margin-top: 1rem;
205
+ }
206
+
207
+ /* === RESPONSIVE === */
208
+ @media (max-width: 768px) {
209
+ .hero-header h1 {
210
+ font-size: 2rem;
211
+ }
212
+
213
+ .card {
214
+ padding: 2rem 1.5rem;
215
+ }
216
+ }
217
+ </style>
218
+ </head>
219
+ <body>
220
+
221
+ <div id="page-loader">
222
+ <div class="spinner-border text-light loader-spinner" role="status">
223
+ <span class="visually-hidden">Loading...</span>
224
+ </div>
225
+ <div class="loader-text">Processing your request...</div>
226
+ </div>
227
+
228
+ <!-- Curved Hero Header -->
229
+ <div class="hero-header">
230
+ <h1><i class="bi bi-droplet-fill"></i> Smart Irrigation Predictor</h1>
231
+ <p>AI-powered water requirement prediction for sustainable farming</p>
232
+ </div>
233
+
234
+ <!-- Main Container -->
235
+ <div class="main-container">
236
+ <div class="card">
237
+ <form action="/predict" method="POST" id="prediction-form">
238
+ <div class="row align-items-center">
239
+ <div class="col-lg-6 order-2 order-lg-1">
240
+ <div class="mb-3">
241
+ <label for="crop_type" class="form-label"><i class="bi bi-flower2"></i> Crop Type</label>
242
+ <select class="form-select" id="crop_type" name="crop_type" required>
243
+ <option value="BANANA">Banana</option>
244
+ <option value="BEAN">Bean</option>
245
+ <option value="CABBAGE">Cabbage</option>
246
+ <option value="CITRUS">Citrus</option>
247
+ <option value="COTTON">Cotton</option>
248
+ <option value="MAIZE">Maize</option>
249
+ <option value="MELON">Melon</option>
250
+ <option value="MUSTARD">Mustard</option>
251
+ <option value="ONION">Onion</option>
252
+ <option value="OTHER">Other</option>
253
+ <option value="POTATO">Potato</option>
254
+ <option value="RICE">Rice</option>
255
+ <option value="SOYABEAN">Soyabean</option>
256
+ <option value="SUGARCANE">Sugarcane</option>
257
+ <option value="TOMATO">Tomato</option>
258
+ <option value="WHEAT">Wheat</option>
259
+ </select>
260
+ </div>
261
+
262
+ <div class="mb-3">
263
+ <label for="soil_type" class="form-label"><i class="bi bi-globe2"></i> Soil Type</label>
264
+ <select class="form-select" id="soil_type" name="soil_type" required>
265
+ <option value="DRY">Dry</option>
266
+ <option value="HUMID">Humid</option>
267
+ <option value="WET">Wet</option>
268
+ </select>
269
+ </div>
270
+
271
+ <div class="mb-3">
272
+ <label for="city" class="form-label"><i class="bi bi-geo-alt"></i> City / Location</label>
273
+ <input type="text" class="form-control" id="city" name="city" placeholder="Enter city for weather data" required>
274
+ </div>
275
+
276
+ <button type="button" class="btn-secondary-pill mb-3" id="fetch-weather-btn" onclick="fetchWeather()">
277
+ <i class="bi bi-cloud-sun"></i> Fetch Weather Data
278
+ </button>
279
+
280
+ <div id="weather_info" class="mb-3" style="display: none;">
281
+ <div id="weather_data"></div>
282
+ </div>
283
+
284
+ <div class="mb-3">
285
+ <label for="motor_capacity" class="form-label"><i class="bi bi-gear"></i> Motor Capacity (liters/sec)</label>
286
+ <input type="text" class="form-control" id="motor_capacity" name="motor_capacity" required>
287
+ </div>
288
+
289
+ <button type="submit" class="btn-primary-action" id="predict-btn">
290
+ <i class="bi bi-calculator"></i> Predict Water Requirement
291
+ </button>
292
+ </div>
293
+
294
+ <div class="col-lg-6 order-1 order-lg-2 mb-4 mb-lg-0">
295
+ <img src="/static/images/img.png" alt="Smart Irrigation" class="hero-image">
296
+ </div>
297
+ </div>
298
+ </form>
299
+ </div>
300
+ </div>
301
+
302
+ <script>
303
+ function fetchWeather() {
304
+ const city = document.getElementById('city').value;
305
+ if (!city) { alert('Please enter a city name first.'); return; }
306
+ const weatherDiv = document.getElementById('weather_data');
307
+ const weatherInfoBox = document.getElementById('weather_info');
308
+ const fetchBtn = document.getElementById('fetch-weather-btn');
309
+ weatherInfoBox.style.display = 'flex';
310
+ weatherDiv.innerHTML = `<div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div>`;
311
+ fetchBtn.disabled = true;
312
+ fetch(`/fetch_weather?city=${city}`)
313
+ .then(response => { if (!response.ok) throw new Error('City not found or server error.'); return response.json(); })
314
+ .then(data => {
315
+ if (data) { weatherDiv.innerHTML = `<div style="text-align: left; width: 100%;"><strong>Weather:</strong> ${data.description}<br><strong>Temperature:</strong> ${data.temperature}°C<br><strong>Humidity:</strong> ${data.humidity}%<br><strong>Pressure:</strong> ${data.pressure} hPa</div>`; }
316
+ else { weatherDiv.innerHTML = 'Could not retrieve weather data.'; }
317
+ })
318
+ .catch(error => { console.error('Error fetching weather:', error); weatherDiv.innerHTML = 'An error occurred. Please check the city name.'; })
319
+ .finally(() => { fetchBtn.disabled = false; });
320
+ }
321
+ document.getElementById('prediction-form').addEventListener('submit', function(event) {
322
+ if (!this.checkValidity()) { return; }
323
+ document.getElementById('page-loader').style.display = 'flex';
324
+ document.getElementById('predict-btn').disabled = true;
325
+ });
326
+ </script>
327
+
328
+ </body>
329
  </html>