snehasis19 commited on
Commit
2fe58e9
·
verified ·
1 Parent(s): 117d13e

Delete templates

Browse files
templates/1.html DELETED
@@ -1,618 +0,0 @@
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>NitroSense AI - How It Works</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <style>
10
- body {
11
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
13
- url('/static/images/wheatleaf.jpg');
14
- background-size: cover;
15
- background-position: center;
16
- background-attachment: fixed;
17
- background-repeat: no-repeat;
18
- }
19
-
20
- .navbar {
21
- background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%) !important;
22
- }
23
-
24
- .nav-link {
25
- color: white !important;
26
- font-weight: 500;
27
- margin: 0 10px;
28
- padding: 8px 15px !important;
29
- border-radius: 25px;
30
- }
31
-
32
- .nav-link:hover {
33
- background: rgba(255, 255, 255, 0.2);
34
- }
35
-
36
- .content-card {
37
- border: none;
38
- border-radius: 20px;
39
- overflow: hidden;
40
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
41
- background: rgba(255, 255, 255, 0.95);
42
- margin: 30px 0;
43
- backdrop-filter: blur(10px);
44
- }
45
-
46
- .card-header {
47
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
48
- color: white;
49
- padding: 1.5rem;
50
- border: none;
51
- }
52
-
53
- /* Flowchart Styles */
54
- .flowchart-container {
55
- position: relative;
56
- padding: 20px 0;
57
- }
58
-
59
- .flow-row {
60
- display: flex;
61
- justify-content: center;
62
- align-items: center;
63
- margin-bottom: 30px;
64
- position: relative;
65
- width: 100%;
66
- }
67
-
68
- .flow-box {
69
- background: white;
70
- border-radius: 15px;
71
- padding: 25px;
72
- box-shadow: 0 10px 30px rgba(0,0,0,0.1);
73
- border: 2px solid #2e7d32;
74
- position: relative;
75
- width: 100%;
76
- transition: transform 0.3s;
77
- }
78
-
79
- .flow-box:hover {
80
- transform: translateY(-5px);
81
- box-shadow: 0 15px 40px rgba(46, 125, 50, 0.2);
82
- }
83
-
84
- .flow-box.step1::before {
85
- content: '1';
86
- position: absolute;
87
- top: -20px;
88
- left: 50%;
89
- transform: translateX(-50%);
90
- width: 40px;
91
- height: 40px;
92
- background: #2e7d32;
93
- border-radius: 50%;
94
- display: flex;
95
- align-items: center;
96
- justify-content: center;
97
- color: white;
98
- font-weight: bold;
99
- font-size: 1.2rem;
100
- border: 3px solid white;
101
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
102
- }
103
-
104
- .flow-box.step2::before {
105
- content: '2';
106
- position: absolute;
107
- top: -20px;
108
- left: 50%;
109
- transform: translateX(-50%);
110
- width: 40px;
111
- height: 40px;
112
- background: #2e7d32;
113
- border-radius: 50%;
114
- display: flex;
115
- align-items: center;
116
- justify-content: center;
117
- color: white;
118
- font-weight: bold;
119
- font-size: 1.2rem;
120
- border: 3px solid white;
121
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
122
- }
123
-
124
- .flow-box.step3::before {
125
- content: '3';
126
- position: absolute;
127
- top: -20px;
128
- left: 50%;
129
- transform: translateX(-50%);
130
- width: 40px;
131
- height: 40px;
132
- background: #2e7d32;
133
- border-radius: 50%;
134
- display: flex;
135
- align-items: center;
136
- justify-content: center;
137
- color: white;
138
- font-weight: bold;
139
- font-size: 1.2rem;
140
- border: 3px solid white;
141
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
142
- }
143
-
144
- .flow-box.step4::before {
145
- content: '4';
146
- position: absolute;
147
- top: -20px;
148
- left: 50%;
149
- transform: translateX(-50%);
150
- width: 40px;
151
- height: 40px;
152
- background: #2e7d32;
153
- border-radius: 50%;
154
- display: flex;
155
- align-items: center;
156
- justify-content: center;
157
- color: white;
158
- font-weight: bold;
159
- font-size: 1.2rem;
160
- border: 3px solid white;
161
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
162
- }
163
-
164
- .flow-box.step5::before {
165
- content: '5';
166
- position: absolute;
167
- top: -20px;
168
- left: 50%;
169
- transform: translateX(-50%);
170
- width: 40px;
171
- height: 40px;
172
- background: #2e7d32;
173
- border-radius: 50%;
174
- display: flex;
175
- align-items: center;
176
- justify-content: center;
177
- color: white;
178
- font-weight: bold;
179
- font-size: 1.2rem;
180
- border: 3px solid white;
181
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
182
- }
183
-
184
- .dual-branch-row {
185
- display: flex;
186
- gap: 30px;
187
- margin-bottom: 30px;
188
- width: 100%;
189
- }
190
-
191
- .branch-box {
192
- flex: 1;
193
- background: white;
194
- border-radius: 15px;
195
- padding: 25px;
196
- box-shadow: 0 10px 30px rgba(0,0,0,0.1);
197
- border: 2px solid #2e7d32;
198
- position: relative;
199
- transition: transform 0.3s;
200
- }
201
-
202
- .branch-box:hover {
203
- transform: translateY(-5px);
204
- box-shadow: 0 15px 40px rgba(46, 125, 50, 0.2);
205
- }
206
-
207
- .branch-box.step2::before {
208
- content: '2';
209
- position: absolute;
210
- top: -20px;
211
- left: 50%;
212
- transform: translateX(-50%);
213
- width: 40px;
214
- height: 40px;
215
- background: #2e7d32;
216
- border-radius: 50%;
217
- display: flex;
218
- align-items: center;
219
- justify-content: center;
220
- color: white;
221
- font-weight: bold;
222
- font-size: 1.2rem;
223
- border: 3px solid white;
224
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
225
- }
226
-
227
- .branch-box.step3::before {
228
- content: '3';
229
- position: absolute;
230
- top: -20px;
231
- left: 50%;
232
- transform: translateX(-50%);
233
- width: 40px;
234
- height: 40px;
235
- background: #2e7d32;
236
- border-radius: 50%;
237
- display: flex;
238
- align-items: center;
239
- justify-content: center;
240
- color: white;
241
- font-weight: bold;
242
- font-size: 1.2rem;
243
- border: 3px solid white;
244
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
245
- }
246
-
247
- .flow-arrow {
248
- position: relative;
249
- width: 100%;
250
- height: 40px;
251
- margin: 10px 0;
252
- }
253
-
254
- .flow-arrow::after {
255
- content: '↓';
256
- position: absolute;
257
- left: 50%;
258
- transform: translateX(-50%);
259
- font-size: 2rem;
260
- color: #2e7d32;
261
- animation: bounce 2s infinite;
262
- }
263
-
264
- @keyframes bounce {
265
- 0%, 100% { transform: translateX(-50%) translateY(0); }
266
- 50% { transform: translateX(-50%) translateY(10px); }
267
- }
268
-
269
- .branch-container {
270
- display: flex;
271
- gap: 20px;
272
- margin: 20px 0;
273
- }
274
-
275
- .branch {
276
- flex: 1;
277
- background: rgba(46, 125, 50, 0.05);
278
- border-radius: 15px;
279
- padding: 20px;
280
- border: 1px solid rgba(46, 125, 50, 0.3);
281
- }
282
-
283
- .branch h5 {
284
- color: #1a5f1a;
285
- font-weight: 600;
286
- border-bottom: 2px solid #2e7d32;
287
- padding-bottom: 10px;
288
- margin-bottom: 15px;
289
- }
290
-
291
- .feature-list {
292
- list-style: none;
293
- padding: 0;
294
- }
295
-
296
- .feature-list li {
297
- padding: 8px 0;
298
- padding-left: 25px;
299
- position: relative;
300
- }
301
-
302
- .feature-list li::before {
303
- content: '•';
304
- color: #2e7d32;
305
- font-weight: bold;
306
- font-size: 1.5rem;
307
- position: absolute;
308
- left: 0;
309
- top: -2px;
310
- }
311
-
312
- .fusion-box {
313
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
314
- color: white;
315
- border-radius: 15px;
316
- padding: 25px;
317
- margin: 20px 0;
318
- box-shadow: 0 10px 30px rgba(46, 125, 50, 0.3);
319
- }
320
-
321
- .architecture-card {
322
- background: white;
323
- border-radius: 15px;
324
- padding: 20px;
325
- margin: 15px 0;
326
- border: 2px solid rgba(46, 125, 50, 0.2);
327
- }
328
-
329
- .footer {
330
- text-align: center;
331
- padding: 20px;
332
- color: #1a5f1a;
333
- font-weight: 500;
334
- margin-top: 30px;
335
- background: rgba(255, 255, 255, 0.9);
336
- border-radius: 15px;
337
- }
338
- </style>
339
- </head>
340
- <body>
341
- <!-- Navigation Bar -->
342
-
343
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
344
- <div class="container-fluid px-4">
345
- <!-- Left side: ICAR logo - flush left -->
346
- <div class="d-flex align-items-center" style="margin-right: auto;">
347
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
348
- </div>
349
-
350
- <!-- Center: NitroSense AI - slightly left of center to avoid overlap with Home button -->
351
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
352
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
353
- <i class="bi bi-tree-fill"></i> NitroSense AI
354
- </a>
355
- </div>
356
-
357
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
358
- <span class="navbar-toggler-icon"></span>
359
- </button>
360
-
361
- <div class="collapse navbar-collapse" id="navbarNav">
362
- <!-- Navigation links - positioned on far right with reduced spacing -->
363
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
364
- <li class="nav-item">
365
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
366
- <i class="bi bi-house-door-fill"></i> Home
367
- </a>
368
- </li>
369
- <li class="nav-item">
370
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
371
- <i class="bi bi-calculator-fill"></i> Estimation
372
- </a>
373
- </li>
374
- <li class="nav-item">
375
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
376
- <i class="bi bi-info-circle-fill"></i> About
377
- </a>
378
- </li>
379
- <li class="nav-item">
380
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
381
- <i class="bi bi-people-fill"></i> Team
382
- </a>
383
- </li>
384
- <li class="nav-item">
385
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
386
- <i class="bi bi-gear-fill"></i> How It Works
387
- </a>
388
- </li>
389
- <li class="nav-item">
390
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
391
- <i class="bi bi-envelope-fill"></i> Contact
392
- </a>
393
- </li>
394
- </ul>
395
-
396
- <!-- Right side: IASRI logo - flush right with buttons to its left -->
397
- <div class="d-flex align-items-center">
398
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
399
- </div>
400
- </div>
401
- </div>
402
- </nav>
403
-
404
- <!-- Responsive CSS for mobile -->
405
- <style>
406
- @media (max-width: 1200px) {
407
- .position-absolute {
408
- left: 44% !important;
409
- }
410
- .navbar-brand {
411
- font-size: 1.8rem !important;
412
- }
413
- .navbar-nav {
414
- gap: 0px !important;
415
- }
416
- .nav-link {
417
- padding: 6px 5px !important;
418
- font-size: 0.85rem;
419
- }
420
- }
421
-
422
- @media (max-width: 991px) {
423
- .position-absolute {
424
- position: relative !important;
425
- left: auto !important;
426
- transform: none !important;
427
- margin: 10px 0;
428
- text-align: center;
429
- width: 100%;
430
- }
431
- .navbar .container-fluid {
432
- flex-wrap: wrap;
433
- }
434
- .navbar-nav {
435
- margin: 10px 0 !important;
436
- justify-content: center;
437
- width: 100%;
438
- gap: 2px !important;
439
- }
440
- .navbar-nav .nav-item {
441
- text-align: center;
442
- }
443
- .d-flex.align-items-center {
444
- margin: 5px auto !important;
445
- justify-content: center;
446
- width: 100%;
447
- }
448
- img[alt="ICAR"], img[alt="IASRI"] {
449
- height: 50px !important;
450
- }
451
- }
452
-
453
- @media (min-width: 992px) {
454
- .navbar-nav {
455
- margin-left: auto !important;
456
- margin-right: 20px !important;
457
- }
458
- .nav-link {
459
- padding: 8px 5px !important;
460
- font-size: 0.95rem;
461
- }
462
- }
463
- </style>
464
-
465
-
466
- <div class="container mt-5">
467
- <div class="row">
468
- <div class="col-lg-12">
469
- <div class="content-card">
470
- <div class="card-header">
471
- <h2><i class="bi bi-diagram-3"></i> How NitroSense AI Works</h2>
472
- <p class="mb-0 mt-2">Multimodal Intermediate Fusion Architecture Flow</p>
473
- </div>
474
- <div class="card-body p-5">
475
-
476
- <div class="flowchart-container">
477
-
478
- <!-- Step 1: Input Layer (Single row) -->
479
- <div class="flow-row">
480
- <div class="flow-box step1">
481
- <h4 class="text-success text-center mb-3">📥 Input Layer</h4>
482
- <div class="branch-container">
483
- <div class="branch">
484
- <h5><i class="bi bi-image"></i> Image Input</h5>
485
- <ul class="feature-list">
486
- <li>Wheat leaf image</li>
487
- <li>Processed through CNN Architecture</li>
488
- <li>Input size: 224x224x3 or 299x299x3</li>
489
- </ul>
490
- </div>
491
- <div class="branch">
492
- <h5><i class="bi bi-table"></i> Tabular Input</h5>
493
- <ul class="feature-list">
494
- <li>Nitrogen Fertilizer Level (kg/ha)</li>
495
- <li>Days After Sowing</li>
496
- </ul>
497
- </div>
498
- </div>
499
- </div>
500
- </div>
501
-
502
- <div class="flow-arrow"></div>
503
-
504
- <!-- Step 2 & 3: Image Processing and Tabular Processing Branches (Side by Side) -->
505
- <div class="dual-branch-row">
506
- <!-- Left: Image Processing Branch -->
507
- <div class="branch-box step2">
508
- <h4 class="text-success text-center mb-3">🖼️ Image Processing Branch</h4>
509
- <div class="row">
510
- <div class="col-md-12">
511
- <div class="branch">
512
- <h5>CNN Architecture</h5>
513
- <ul class="feature-list">
514
- <li>Pre-trained on ImageNet</li>
515
- <li>Transfer Learning</li>
516
- <li>Extracts hierarchical features</li>
517
- </ul>
518
- </div>
519
-
520
- </ul>
521
- </div>
522
- </div>
523
- </div>
524
- </div>
525
-
526
- <!-- Right: Tabular Processing Branch -->
527
- <div class="branch-box step3">
528
- <h4 class="text-success text-center mb-3">📊 Tabular Data Processing Branch</h4>
529
- <div class="row">
530
- <div class="col-md-12">
531
- <div class="branch">
532
- <h5>MLP Layer Processing</h5>
533
- <ul class="feature-list">
534
- <li>Extracts tabular features from agronomic data</li>
535
- <li>Processes Nitrogen Level and Days</li>
536
- <li>Feature encoding and normalization</li>
537
- </ul>
538
- </div>
539
- </div>
540
- </div>
541
- </div>
542
- </div>
543
-
544
- <div class="flow-arrow"></div>
545
-
546
- <!-- Step 4: Intermediate Fusion Layer -->
547
- <div class="flow-row">
548
- <div class="flow-box step4">
549
- <h4 class="text-success text-center mb-3">🔄 Intermediate Fusion Layer</h4>
550
- <div class="fusion-box text-center">
551
- <h5 class="text-white">Image Features + Tabular Features → Combined Vector</h5>
552
- <p class="mb-0 mt-3">✨ This fusion allows the model to learn cross-modal relationships</p>
553
- <p class="mb-0">🔄 The network correlates visual symptoms with agronomic conditions</p>
554
- </div>
555
- </div>
556
- </div>
557
-
558
- <div class="flow-arrow"></div>
559
-
560
- <!-- Step 5: Prediction Network -->
561
- <div class="flow-row">
562
- <div class="flow-box step5">
563
- <h4 class="text-success text-center mb-3">🎯 Prediction Network</h4>
564
- <div class="row">
565
- <div class="col-md-12">
566
- <div class="branch">
567
- <h5>Dense Layers Processing</h5>
568
- <ul class="feature-list">
569
- <li>Fused features processed through dense layers</li>
570
- <li>Final output layer with linear activation</li>
571
- <li><strong>Output:</strong> Normalized Nitrogen Content</li>
572
- </ul>
573
- </div>
574
- </div>
575
- </div>
576
- </div>
577
- </div>
578
- </div>
579
-
580
- <!-- Model Architecture Summary -->
581
- <div class="architecture-card mt-5">
582
- <h4 class="text-success"><i class="bi bi-cpu"></i> CNN Model Architecture Summary</h4>
583
- <div class="row mt-3">
584
- <div class="col-md-6">
585
- <p><strong>CNN Models:</strong> ResNet50, Xception, DenseNet121, MobileNetV3, EfficientNetV2</p>
586
- <p><strong>Loss Function:</strong> Mean Squared Error (MSE)</p>
587
- <p><strong>Evaluation Metrics:</strong> RMSE, MAE, R²</p>
588
- </div>
589
- <div class="col-md-6">
590
- <p><strong>Input Image Size:</strong> 224x224x3 or 299×299×3</p>
591
- <p><strong>Output:</strong> Normalized Nitrogen Content (2-5% range)</p>
592
- <p><strong>Trainable Parameters:</strong> Varies by model</p>
593
- </div>
594
- </div>
595
- </div>
596
-
597
- <!-- Why Multimodal Fusion -->
598
- <div class="alert alert-success mt-4">
599
- <i class="bi bi-lightbulb-fill fs-3 me-3"></i>
600
- <div>
601
- <strong>Why Multimodal Fusion?</strong><br>
602
- By combining visual symptoms with agronomic context, the model achieves higher accuracy than either modality alone. For example, yellowing leaves might indicate deficiency, but the model also considers growth stage and fertilizer applied to make a more informed prediction.
603
- </div>
604
- </div>
605
- </div>
606
- </div>
607
- </div>
608
- </div>
609
- </div>
610
-
611
- <!-- Footer -->
612
- <div class="container">
613
- <div class="footer">
614
- <i class="bi bi-flower1"></i> ICAR-Indian Institute of Wheat and Barley Research (IIWBR) <i class="bi bi-flower1"></i>
615
- </div>
616
- </div>
617
- </body>
618
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/about.html DELETED
@@ -1,480 +0,0 @@
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>NitroSense AI - About</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
- <style>
11
- body {
12
- font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
14
- url('/static/images/wheatleaf.jpg');
15
- background-size: cover;
16
- background-position: center;
17
- background-attachment: fixed;
18
- background-repeat: no-repeat;
19
- }
20
-
21
- .navbar {
22
- background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%) !important;
23
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
24
- }
25
-
26
- .navbar-brand {
27
- font-size: 1.6rem;
28
- font-weight: 600;
29
- }
30
-
31
- .nav-link {
32
- color: white !important;
33
- font-weight: 500;
34
- margin: 0 10px;
35
- padding: 8px 15px !important;
36
- border-radius: 25px;
37
- transition: all 0.3s;
38
- }
39
-
40
- .nav-link:hover {
41
- background: rgba(255, 255, 255, 0.2);
42
- }
43
-
44
- .nav-link i {
45
- margin-right: 5px;
46
- }
47
-
48
- .content-card {
49
- border: none;
50
- border-radius: 20px;
51
- overflow: hidden;
52
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
53
- background: rgba(255, 255, 255, 0.95);
54
- margin: 30px 0;
55
- backdrop-filter: blur(10px);
56
- border: 1px solid rgba(46, 125, 50, 0.2);
57
- }
58
-
59
- .card-header {
60
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
61
- color: white;
62
- padding: 1.5rem;
63
- border: none;
64
- }
65
-
66
- .card-header h2 {
67
- margin: 0;
68
- font-weight: 600;
69
- font-size: 2.2rem;
70
- }
71
-
72
- .footer {
73
- text-align: center;
74
- padding: 20px;
75
- color: #1a5f1a;
76
- font-weight: 500;
77
- margin-top: 30px;
78
- background: rgba(255, 255, 255, 0.9);
79
- border-radius: 15px;
80
- backdrop-filter: blur(5px);
81
- }
82
-
83
- .feature-icon {
84
- font-size: 2.5rem;
85
- color: #2e7d32;
86
- margin-bottom: 15px;
87
- }
88
-
89
- .feature-card {
90
- background: rgba(248, 249, 250, 0.9);
91
- border-radius: 15px;
92
- padding: 25px;
93
- margin: 10px 0;
94
- border-left: 4px solid #2e7d32;
95
- transition: transform 0.3s, box-shadow 0.3s;
96
- height: 100%;
97
- }
98
-
99
- .feature-card:hover {
100
- transform: translateY(-5px);
101
- box-shadow: 0 15px 30px rgba(46, 125, 50, 0.2);
102
- }
103
-
104
- .wheat-sample-gallery {
105
- display: flex;
106
- gap: 20px;
107
- justify-content: center;
108
- flex-wrap: wrap;
109
- margin: 30px 0;
110
- }
111
-
112
- .sample-item {
113
- text-align: center;
114
- width: 180px;
115
- }
116
-
117
- .sample-item img {
118
- width: 150px;
119
- height: 150px;
120
- border-radius: 50%;
121
- object-fit: cover;
122
- border: 4px solid #2e7d32;
123
- box-shadow: 0 10px 20px rgba(0,0,0,0.1);
124
- transition: transform 0.3s;
125
- }
126
-
127
- .sample-item img:hover {
128
- transform: scale(1.05);
129
- box-shadow: 0 15px 30px rgba(46, 125, 50, 0.3);
130
- }
131
-
132
- .sample-item .deficient-badge {
133
- background: #dc3545;
134
- color: white;
135
- padding: 5px 15px;
136
- border-radius: 25px;
137
- font-size: 0.9rem;
138
- margin-top: 10px;
139
- display: inline-block;
140
- }
141
-
142
- .sample-item .sufficient-badge {
143
- background: #28a745;
144
- color: white;
145
- padding: 5px 15px;
146
- border-radius: 25px;
147
- font-size: 0.9rem;
148
- margin-top: 10px;
149
- display: inline-block;
150
- }
151
-
152
- .mission-vision-card {
153
- background: linear-gradient(135deg, rgba(46, 125, 50, 0.05), rgba(26, 95, 26, 0.05));
154
- border-radius: 15px;
155
- padding: 25px;
156
- height: 100%;
157
- border: 1px dashed #2e7d32;
158
- transition: transform 0.3s;
159
- }
160
-
161
- .mission-vision-card:hover {
162
- transform: translateY(-5px);
163
- box-shadow: 0 10px 25px rgba(46, 125, 50, 0.15);
164
- }
165
-
166
- .mission-vision-card h4 {
167
- color: #1a5f1a;
168
- font-weight: 600;
169
- margin-bottom: 15px;
170
- border-bottom: 2px solid #2e7d32;
171
- padding-bottom: 10px;
172
- }
173
-
174
- .institute-card {
175
- background: white;
176
- border-radius: 15px;
177
- padding: 25px;
178
- height: 100%;
179
- border: 2px solid rgba(46, 125, 50, 0.2);
180
- transition: all 0.3s;
181
- }
182
-
183
- .institute-card:hover {
184
- border-color: #2e7d32;
185
- transform: translateY(-5px);
186
- box-shadow: 0 15px 30px rgba(46, 125, 50, 0.1);
187
- }
188
-
189
- .institute-card h5 {
190
- color: #1a5f1a;
191
- font-weight: 600;
192
- }
193
-
194
- .stats-container {
195
- background: rgba(46, 125, 50, 0.1);
196
- border-radius: 15px;
197
- padding: 30px;
198
- margin-top: 30px;
199
- }
200
-
201
- .stat-item {
202
- text-align: center;
203
- }
204
-
205
- .stat-item h3 {
206
- color: #1a5f1a;
207
- font-weight: 700;
208
- font-size: 2.2rem;
209
- margin-bottom: 5px;
210
- }
211
-
212
- .stat-item p {
213
- color: #2e7d32;
214
- font-weight: 500;
215
- margin-bottom: 0;
216
- }
217
- </style>
218
- </head>
219
- <body>
220
- <!-- Navigation Bar -->
221
-
222
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
223
- <div class="container-fluid px-4">
224
- <!-- Left side: ICAR logo - flush left -->
225
- <div class="d-flex align-items-center" style="margin-right: auto;">
226
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
227
- </div>
228
-
229
- <!-- Center: NitroSense AI - slightly left of center to avoid overlap with Home button -->
230
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
231
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
232
- <i class="bi bi-tree-fill"></i> NitroSense AI
233
- </a>
234
- </div>
235
-
236
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
237
- <span class="navbar-toggler-icon"></span>
238
- </button>
239
-
240
- <div class="collapse navbar-collapse" id="navbarNav">
241
- <!-- Navigation links - positioned on far right with reduced spacing -->
242
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
243
- <li class="nav-item">
244
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
245
- <i class="bi bi-house-door-fill"></i> Home
246
- </a>
247
- </li>
248
- <li class="nav-item">
249
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
250
- <i class="bi bi-calculator-fill"></i> Estimation
251
- </a>
252
- </li>
253
- <li class="nav-item">
254
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
255
- <i class="bi bi-info-circle-fill"></i> About
256
- </a>
257
- </li>
258
- <li class="nav-item">
259
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
260
- <i class="bi bi-people-fill"></i> Team
261
- </a>
262
- </li>
263
- <li class="nav-item">
264
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
265
- <i class="bi bi-gear-fill"></i> How It Works
266
- </a>
267
- </li>
268
- <li class="nav-item">
269
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
270
- <i class="bi bi-envelope-fill"></i> Contact
271
- </a>
272
- </li>
273
- </ul>
274
-
275
- <!-- Right side: IASRI logo - flush right with buttons to its left -->
276
- <div class="d-flex align-items-center">
277
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
278
- </div>
279
- </div>
280
- </div>
281
- </nav>
282
-
283
- <!-- Responsive CSS for mobile -->
284
- <style>
285
- @media (max-width: 1200px) {
286
- .position-absolute {
287
- left: 44% !important;
288
- }
289
- .navbar-brand {
290
- font-size: 1.8rem !important;
291
- }
292
- .navbar-nav {
293
- gap: 0px !important;
294
- }
295
- .nav-link {
296
- padding: 6px 5px !important;
297
- font-size: 0.85rem;
298
- }
299
- }
300
-
301
- @media (max-width: 991px) {
302
- .position-absolute {
303
- position: relative !important;
304
- left: auto !important;
305
- transform: none !important;
306
- margin: 10px 0;
307
- text-align: center;
308
- width: 100%;
309
- }
310
- .navbar .container-fluid {
311
- flex-wrap: wrap;
312
- }
313
- .navbar-nav {
314
- margin: 10px 0 !important;
315
- justify-content: center;
316
- width: 100%;
317
- gap: 2px !important;
318
- }
319
- .navbar-nav .nav-item {
320
- text-align: center;
321
- }
322
- .d-flex.align-items-center {
323
- margin: 5px auto !important;
324
- justify-content: center;
325
- width: 100%;
326
- }
327
- img[alt="ICAR"], img[alt="IASRI"] {
328
- height: 50px !important;
329
- }
330
- }
331
-
332
- @media (min-width: 992px) {
333
- .navbar-nav {
334
- margin-left: auto !important;
335
- margin-right: 20px !important;
336
- }
337
- .nav-link {
338
- padding: 8px 5px !important;
339
- font-size: 0.95rem;
340
- }
341
- }
342
- </style>
343
-
344
-
345
- <div class="container mt-5">
346
- <div class="row">
347
- <div class="col-lg-10 mx-auto">
348
- <div class="content-card">
349
- <div class="card-header">
350
- <h2><i class="bi bi-info-circle-fill"></i> About NitroSense AI</h2>
351
- </div>
352
- <div class="card-body p-5">
353
-
354
- <!-- Hero Section -->
355
- <div class="text-center mb-5">
356
- <i class="bi bi-tree-fill" style="font-size: 4rem; color: #2e7d32;"></i>
357
- <h3 class="text-success" style="font-size: 2.2rem; font-weight: 700; margin: 20px 0;">Revolutionizing Wheat Nitrogen Management</h3>
358
- <p class="lead" style="font-size: 1.2rem; max-width: 800px; margin: 0 auto;">An AI-powered solution for precision agriculture developed at ICAR-IASRI, New Delhi in collaboration with ICAR-IIWBR, Karnal, Haryana</p>
359
- </div>
360
-
361
- <!-- Wheat Sample Gallery -->
362
- <div class="wheat-sample-gallery">
363
- <div class="sample-item">
364
- <img src="/static/images/wheat-samples/deficient1.jpg" alt="Deficient Wheat Leaf">
365
- <div><span class="deficient-badge">⚠️ Deficient</span></div>
366
- </div>
367
- <div class="sample-item">
368
- <img src="/static/images/wheat-samples/deficient2.jpg" alt="Deficient Wheat Leaf">
369
- <div><span class="deficient-badge">⚠️ Deficient</span></div>
370
- </div>
371
- <div class="sample-item">
372
- <img src="/static/images/wheat-samples/sufficient1.jpg" alt="Sufficient Wheat Leaf">
373
- <div><span class="sufficient-badge">✅ Sufficient</span></div>
374
- </div>
375
- <div class="sample-item">
376
- <img src="/static/images/wheat-samples/sufficient2.jpg" alt="Sufficient Wheat Leaf">
377
- <div><span class="sufficient-badge">✅ Sufficient</span></div>
378
- </div>
379
- </div>
380
-
381
- <p class="text-center text-muted mb-5">Our AI model can distinguish between nitrogen-deficient and sufficient wheat leaves with high accuracy</p>
382
-
383
- <!-- Mission and Vision Section -->
384
- <div class="row mb-5">
385
- <div class="col-md-6 mb-4">
386
- <div class="mission-vision-card">
387
- <h4><i class="bi bi-bullseye text-success"></i> Our Mission</h4>
388
- <p style="font-size: 1.05rem; line-height: 1.7;">To provide farmers and researchers with an accurate, non-destructive method for estimating nitrogen content in wheat crops using advanced deep learning techniques.</p>
389
- </div>
390
- </div>
391
- <div class="col-md-6 mb-4">
392
- <div class="mission-vision-card">
393
- <h4><i class="bi bi-eye text-success"></i> Our Vision</h4>
394
- <p style="font-size: 1.05rem; line-height: 1.7;">Enable sustainable wheat farming through precision nitrogen management, reducing fertilizer waste while maximizing crop yield.</p>
395
- </div>
396
- </div>
397
- </div>
398
-
399
- <!-- Key Features Section -->
400
- <h4 class="mb-4 text-center"><i class="bi bi-diagram-3 text-success"></i> Key Features</h4>
401
- <div class="row mb-5">
402
- <div class="col-md-4 mb-3">
403
- <div class="feature-card">
404
- <i class="bi bi-camera-fill feature-icon"></i>
405
- <h5>Image-Based Analysis</h5>
406
- <p>Upload or capture wheat leaf images for instant analysis using advanced computer vision.</p>
407
- </div>
408
- </div>
409
- <div class="col-md-4 mb-3">
410
- <div class="feature-card">
411
- <i class="bi bi-droplet-fill feature-icon"></i>
412
- <h5>Multimodal Deep Learning</h5>
413
- <p>Combines image features with agronomic data for highly accurate nitrogen predictions.</p>
414
- </div>
415
- </div>
416
- <div class="col-md-4 mb-3">
417
- <div class="feature-card">
418
- <i class="bi bi-graph-up-arrow feature-icon"></i>
419
- <h5>Real-Time Results</h5>
420
- <p>Get instant nitrogen estimates with actionable recommendations for optimal fertilizer management.</p>
421
- </div>
422
- </div>
423
- </div>
424
-
425
- <!-- Collaborating Institutes -->
426
- <h4 class="mb-4 text-center"><i class="bi bi-building text-success"></i> Collaborating Institutes</h4>
427
- <div class="row">
428
- <div class="col-md-6 mb-4">
429
- <div class="institute-card">
430
- <h5><i class="bi bi-flower1 text-success"></i> ICAR-IIWBR</h5>
431
- <p class="mb-1"><strong>ICAR-Indian Institute of Wheat and Barley Research</strong></p>
432
- <p class="text-muted">Karnal, Haryana</p>
433
- <p class="small">Leading research institute for wheat and barley improvement in India</p>
434
- </div>
435
- </div>
436
- <div class="col-md-6 mb-4">
437
- <div class="institute-card">
438
- <h5><i class="bi bi-calculator-fill text-success"></i> ICAR-IASRI</h5>
439
- <p class="mb-1"><strong>ICAR-Indian Agricultural Statistics Research Institute</strong></p>
440
- <p class="text-muted">New Delhi</p>
441
- <p class="small">Pioneering research in agricultural statistics and computer applications</p>
442
- </div>
443
- </div>
444
- </div>
445
-
446
- <!-- Impact Stats -->
447
- <div class="stats-container">
448
- <div class="row">
449
- <div class="col-md-4 stat-item">
450
- <h3>2,308+</h3>
451
- <p>Wheat Leaf Samples</p>
452
- </div>
453
- <div class="col-md-4 stat-item">
454
- <h3>8</h3>
455
- <p>Nitrogen Treatments</p>
456
- </div>
457
- <div class="col-md-4 stat-item">
458
- <h3>3</h3>
459
- <p>Wheat Varieties</p>
460
- </div>
461
- </div>
462
- </div>
463
-
464
- </div>
465
- </div>
466
- </div>
467
- </div>
468
- </div>
469
-
470
- <!-- Footer -->
471
- <div class="container">
472
- <div class="footer">
473
- <i class="bi bi-flower1"></i> ICAR-Indian Agricultural Statistics Research Institute (IASRI), New Delhi
474
- <i class="bi bi-flower1"></i>
475
- <br>
476
- <small>In collaboration with ICAR-Indian Institute of Wheat and Barley Research (IIWBR), Karnal</small>
477
- </div>
478
- </div>
479
- </body>
480
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/capture.html DELETED
@@ -1,294 +0,0 @@
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>NitroSense AI - Capture Image</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <style>
10
- body {
11
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
13
- url('/static/images/wheatleaf.jpg');
14
- background-size: cover;
15
- background-position: center;
16
- background-attachment: fixed;
17
- }
18
-
19
- .navbar {
20
- background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%) !important;
21
- }
22
-
23
- .nav-link {
24
- color: white !important;
25
- font-weight: 500;
26
- }
27
-
28
- .camera-card {
29
- border: none;
30
- border-radius: 20px;
31
- overflow: hidden;
32
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
33
- background: rgba(255, 255, 255, 0.95);
34
- margin: 30px 0;
35
- backdrop-filter: blur(10px);
36
- }
37
-
38
- .camera-header {
39
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
40
- color: white;
41
- padding: 1.5rem;
42
- }
43
-
44
- #video, #canvas {
45
- width: 100%;
46
- max-width: 640px;
47
- border-radius: 15px;
48
- box-shadow: 0 8px 25px rgba(0,0,0,0.2);
49
- border: 3px solid #2e7d32;
50
- }
51
-
52
- .btn-circle {
53
- border-radius: 50%;
54
- width: 80px;
55
- height: 80px;
56
- font-size: 32px;
57
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
58
- border: none;
59
- box-shadow: 0 8px 20px rgba(46, 125, 50, 0.3);
60
- }
61
-
62
- .footer {
63
- text-align: center;
64
- padding: 20px;
65
- color: #1a5f1a;
66
- font-weight: 500;
67
- margin-top: 30px;
68
- background: rgba(255, 255, 255, 0.9);
69
- border-radius: 15px;
70
- }
71
- </style>
72
- </head>
73
- <body>
74
- <!-- Navigation Bar -->
75
-
76
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
77
- <div class="container-fluid px-4">
78
- <!-- Left side: ICAR logo - flush left -->
79
- <div class="d-flex align-items-center" style="margin-right: auto;">
80
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
81
- </div>
82
-
83
- <!-- Center: NitroSense AI - slightly left of center to avoid overlap with Home button -->
84
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
85
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
86
- <i class="bi bi-tree-fill"></i> NitroSense AI
87
- </a>
88
- </div>
89
-
90
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
91
- <span class="navbar-toggler-icon"></span>
92
- </button>
93
-
94
- <div class="collapse navbar-collapse" id="navbarNav">
95
- <!-- Navigation links - positioned on far right with reduced spacing -->
96
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
97
- <li class="nav-item">
98
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
99
- <i class="bi bi-house-door-fill"></i> Home
100
- </a>
101
- </li>
102
- <li class="nav-item">
103
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
104
- <i class="bi bi-calculator-fill"></i> Estimation
105
- </a>
106
- </li>
107
- <li class="nav-item">
108
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
109
- <i class="bi bi-info-circle-fill"></i> About
110
- </a>
111
- </li>
112
- <li class="nav-item">
113
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
114
- <i class="bi bi-people-fill"></i> Team
115
- </a>
116
- </li>
117
- <li class="nav-item">
118
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
119
- <i class="bi bi-gear-fill"></i> How It Works
120
- </a>
121
- </li>
122
- <li class="nav-item">
123
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
124
- <i class="bi bi-envelope-fill"></i> Contact
125
- </a>
126
- </li>
127
- </ul>
128
-
129
- <!-- Right side: IASRI logo - flush right with buttons to its left -->
130
- <div class="d-flex align-items-center">
131
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
132
- </div>
133
- </div>
134
- </div>
135
- </nav>
136
-
137
- <!-- Responsive CSS for mobile -->
138
- <style>
139
- @media (max-width: 1200px) {
140
- .position-absolute {
141
- left: 44% !important;
142
- }
143
- .navbar-brand {
144
- font-size: 1.8rem !important;
145
- }
146
- .navbar-nav {
147
- gap: 0px !important;
148
- }
149
- .nav-link {
150
- padding: 6px 5px !important;
151
- font-size: 0.85rem;
152
- }
153
- }
154
-
155
- @media (max-width: 991px) {
156
- .position-absolute {
157
- position: relative !important;
158
- left: auto !important;
159
- transform: none !important;
160
- margin: 10px 0;
161
- text-align: center;
162
- width: 100%;
163
- }
164
- .navbar .container-fluid {
165
- flex-wrap: wrap;
166
- }
167
- .navbar-nav {
168
- margin: 10px 0 !important;
169
- justify-content: center;
170
- width: 100%;
171
- gap: 2px !important;
172
- }
173
- .navbar-nav .nav-item {
174
- text-align: center;
175
- }
176
- .d-flex.align-items-center {
177
- margin: 5px auto !important;
178
- justify-content: center;
179
- width: 100%;
180
- }
181
- img[alt="ICAR"], img[alt="IASRI"] {
182
- height: 50px !important;
183
- }
184
- }
185
-
186
- @media (min-width: 992px) {
187
- .navbar-nav {
188
- margin-left: auto !important;
189
- margin-right: 20px !important;
190
- }
191
- .nav-link {
192
- padding: 8px 5px !important;
193
- font-size: 0.95rem;
194
- }
195
- }
196
- </style>
197
-
198
-
199
- <div class="container mt-4">
200
- <div class="row">
201
- <div class="col-md-8 mx-auto">
202
- <div class="camera-card">
203
- <div class="camera-header text-center">
204
- <h4><i class="bi bi-camera"></i> Capture Wheat Leaf Image</h4>
205
- </div>
206
- <div class="card-body text-center p-4">
207
- <div class="mb-3">
208
- <video id="video" width="640" height="480" autoplay></video>
209
- </div>
210
-
211
- <div id="preview" style="display: none;" class="mb-3">
212
- <h5 class="text-success">Preview:</h5>
213
- <canvas id="canvas" width="640" height="480"></canvas>
214
- </div>
215
-
216
- <div class="mb-4">
217
- <button id="captureBtn" class="btn btn-circle">📸</button>
218
- <button id="retakeBtn" class="btn btn-circle" style="display: none; background: #6c757d;">🔄</button>
219
- </div>
220
-
221
- <div class="d-grid gap-2 col-md-6 mx-auto">
222
- <button id="usePhotoBtn" class="btn btn-success btn-lg" style="display: none;">
223
- Use This Photo
224
- </button>
225
- <a href="/" class="btn btn-outline-secondary">Cancel</a>
226
- </div>
227
- </div>
228
- </div>
229
- </div>
230
- </div>
231
- </div>
232
-
233
- <div class="container">
234
- <div class="footer">
235
- ICAR-Indian Institute of Wheat and Barley Research (IIWBR), Karnal
236
- </div>
237
- </div>
238
-
239
- <script>
240
- const video = document.getElementById("video");
241
- const canvas = document.getElementById("canvas");
242
- const captureBtn = document.getElementById("captureBtn");
243
- const retakeBtn = document.getElementById("retakeBtn");
244
- const usePhotoBtn = document.getElementById("usePhotoBtn");
245
- const preview = document.getElementById("preview");
246
-
247
- async function startCamera() {
248
- try {
249
- const stream = await navigator.mediaDevices.getUserMedia({ video: true });
250
- video.srcObject = stream;
251
- } catch (err) {
252
- alert("Camera error: " + err.message);
253
- }
254
- }
255
-
256
- startCamera();
257
-
258
- captureBtn.addEventListener("click", function() {
259
- canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
260
- video.style.display = "none";
261
- preview.style.display = "block";
262
- captureBtn.style.display = "none";
263
- retakeBtn.style.display = "inline-block";
264
- usePhotoBtn.style.display = "block";
265
- });
266
-
267
- retakeBtn.addEventListener("click", function() {
268
- video.style.display = "block";
269
- preview.style.display = "none";
270
- captureBtn.style.display = "inline-block";
271
- retakeBtn.style.display = "none";
272
- usePhotoBtn.style.display = "none";
273
- });
274
-
275
- usePhotoBtn.addEventListener("click", function() {
276
- canvas.toBlob(async function(blob) {
277
- const formData = new FormData();
278
- formData.append("image", blob, "captured.jpg");
279
-
280
- const response = await fetch("/upload", {
281
- method: "POST",
282
- body: formData
283
- });
284
-
285
- const result = await response.json();
286
- if (result.success) {
287
- sessionStorage.setItem("capturedImage", result.filename);
288
- window.location.href = "/estimation";
289
- }
290
- }, "image/jpeg");
291
- });
292
- </script>
293
- </body>
294
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/contact.html DELETED
@@ -1,388 +0,0 @@
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>NitroSense AI - Contact</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
- <style>
11
- body {
12
- font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
14
- url('/static/images/wheatleaf.jpg');
15
- background-size: cover;
16
- background-position: center;
17
- background-attachment: fixed;
18
- }
19
-
20
- .navbar {
21
- background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%) !important;
22
- }
23
-
24
- .nav-link {
25
- color: white !important;
26
- font-weight: 500;
27
- margin: 0 10px;
28
- padding: 8px 15px !important;
29
- border-radius: 25px;
30
- }
31
-
32
- .nav-link:hover {
33
- background: rgba(255, 255, 255, 0.2);
34
- }
35
-
36
- .content-card {
37
- border: none;
38
- border-radius: 20px;
39
- overflow: hidden;
40
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
41
- background: rgba(255, 255, 255, 0.95);
42
- margin: 30px 0;
43
- backdrop-filter: blur(10px);
44
- }
45
-
46
- .card-header {
47
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
48
- color: white;
49
- padding: 1.5rem;
50
- border: none;
51
- }
52
-
53
- .contact-card {
54
- background: rgba(248, 249, 250, 0.9);
55
- border-radius: 15px;
56
- padding: 25px;
57
- margin: 15px 0;
58
- border-left: 4px solid #2e7d32;
59
- transition: transform 0.3s;
60
- height: 100%;
61
- }
62
-
63
- .contact-card:hover {
64
- transform: translateY(-5px);
65
- box-shadow: 0 10px 30px rgba(46, 125, 50, 0.2);
66
- }
67
-
68
- .contact-icon {
69
- font-size: 2.5rem;
70
- color: #2e7d32;
71
- margin-bottom: 15px;
72
- }
73
-
74
- .contact-card h4 {
75
- color: #1a5f1a;
76
- font-weight: 600;
77
- margin-bottom: 15px;
78
- }
79
-
80
- .contact-card p {
81
- color: #333;
82
- margin-bottom: 5px;
83
- font-size: 1.1rem;
84
- }
85
-
86
- .research-highlights {
87
- list-style: none;
88
- padding: 0;
89
- margin-top: 15px;
90
- }
91
-
92
- .research-highlights li {
93
- padding: 8px 0;
94
- padding-left: 25px;
95
- position: relative;
96
- font-size: 1rem;
97
- }
98
-
99
- .research-highlights li::before {
100
- content: "🌾";
101
- position: absolute;
102
- left: 0;
103
- color: #2e7d32;
104
- }
105
-
106
- .map-container {
107
- border-radius: 15px;
108
- overflow: hidden;
109
- margin-top: 30px;
110
- border: 3px solid #2e7d32;
111
- }
112
-
113
- .footer {
114
- text-align: center;
115
- padding: 20px;
116
- color: #1a5f1a;
117
- font-weight: 500;
118
- margin-top: 30px;
119
- background: rgba(255, 255, 255, 0.9);
120
- border-radius: 15px;
121
- }
122
-
123
- .institute-badge {
124
- background: #2e7d32;
125
- color: white;
126
- padding: 5px 15px;
127
- border-radius: 25px;
128
- display: inline-block;
129
- margin-bottom: 20px;
130
- }
131
-
132
- .social-links {
133
- display: flex;
134
- gap: 15px;
135
- justify-content: center;
136
- margin-top: 20px;
137
- }
138
-
139
- .social-links a {
140
- color: #2e7d32;
141
- font-size: 1.8rem;
142
- transition: transform 0.3s;
143
- }
144
-
145
- .social-links a:hover {
146
- transform: scale(1.2);
147
- color: #1a5f1a;
148
- }
149
- </style>
150
- </head>
151
- <body>
152
- <!-- Navigation Bar -->
153
-
154
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
155
- <div class="container-fluid px-4">
156
- <!-- Left side: ICAR logo - flush left -->
157
- <div class="d-flex align-items-center" style="margin-right: auto;">
158
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
159
- </div>
160
-
161
- <!-- Center: NitroSense AI - slightly left of center to avoid overlap with Home button -->
162
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
163
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
164
- <i class="bi bi-tree-fill"></i> NitroSense AI
165
- </a>
166
- </div>
167
-
168
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
169
- <span class="navbar-toggler-icon"></span>
170
- </button>
171
-
172
- <div class="collapse navbar-collapse" id="navbarNav">
173
- <!-- Navigation links - positioned on far right with reduced spacing -->
174
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
175
- <li class="nav-item">
176
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
177
- <i class="bi bi-house-door-fill"></i> Home
178
- </a>
179
- </li>
180
- <li class="nav-item">
181
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
182
- <i class="bi bi-calculator-fill"></i> Estimation
183
- </a>
184
- </li>
185
- <li class="nav-item">
186
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
187
- <i class="bi bi-info-circle-fill"></i> About
188
- </a>
189
- </li>
190
- <li class="nav-item">
191
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
192
- <i class="bi bi-people-fill"></i> Team
193
- </a>
194
- </li>
195
- <li class="nav-item">
196
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
197
- <i class="bi bi-gear-fill"></i> How It Works
198
- </a>
199
- </li>
200
- <li class="nav-item">
201
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
202
- <i class="bi bi-envelope-fill"></i> Contact
203
- </a>
204
- </li>
205
- </ul>
206
-
207
- <!-- Right side: IASRI logo - flush right with buttons to its left -->
208
- <div class="d-flex align-items-center">
209
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
210
- </div>
211
- </div>
212
- </div>
213
- </nav>
214
-
215
- <!-- Responsive CSS for mobile -->
216
- <style>
217
- @media (max-width: 1200px) {
218
- .position-absolute {
219
- left: 44% !important;
220
- }
221
- .navbar-brand {
222
- font-size: 1.8rem !important;
223
- }
224
- .navbar-nav {
225
- gap: 0px !important;
226
- }
227
- .nav-link {
228
- padding: 6px 5px !important;
229
- font-size: 0.85rem;
230
- }
231
- }
232
-
233
- @media (max-width: 991px) {
234
- .position-absolute {
235
- position: relative !important;
236
- left: auto !important;
237
- transform: none !important;
238
- margin: 10px 0;
239
- text-align: center;
240
- width: 100%;
241
- }
242
- .navbar .container-fluid {
243
- flex-wrap: wrap;
244
- }
245
- .navbar-nav {
246
- margin: 10px 0 !important;
247
- justify-content: center;
248
- width: 100%;
249
- gap: 2px !important;
250
- }
251
- .navbar-nav .nav-item {
252
- text-align: center;
253
- }
254
- .d-flex.align-items-center {
255
- margin: 5px auto !important;
256
- justify-content: center;
257
- width: 100%;
258
- }
259
- img[alt="ICAR"], img[alt="IASRI"] {
260
- height: 50px !important;
261
- }
262
- }
263
-
264
- @media (min-width: 992px) {
265
- .navbar-nav {
266
- margin-left: auto !important;
267
- margin-right: 20px !important;
268
- }
269
- .nav-link {
270
- padding: 8px 5px !important;
271
- font-size: 0.95rem;
272
- }
273
- }
274
- </style>
275
-
276
-
277
- <div class="container mt-5">
278
- <div class="row">
279
- <div class="col-lg-10 mx-auto">
280
- <div class="content-card">
281
- <div class="card-header">
282
- <h2><i class="bi bi-envelope-fill"></i> Contact Us</h2>
283
- <p class="mb-0 mt-2">Get in touch with our research team</p>
284
- </div>
285
- <div class="card-body p-5">
286
-
287
- <!-- Institute Badge -->
288
- <div class="text-center">
289
- <span class="institute-badge">
290
- <i class="bi bi-building"></i> ICAR-Indian Agricultural Statistics Research Institute (IASRI)
291
- </span>
292
- </div>
293
-
294
- <div class="row mt-4">
295
- <!-- Address Card -->
296
- <div class="col-md-6">
297
- <div class="contact-card">
298
- <i class="bi bi-geo-alt-fill contact-icon"></i>
299
- <h4>📍 Address</h4>
300
- <p><strong>ICAR-Indian Agricultural Statistics Research Institute</strong></p>
301
- <p>Pusa Campus, New Delhi</p>
302
- <p>Delhi - 110012</p>
303
- <p class="small-text mt-3"><i class="bi bi-building"></i> Library Avenue, Pusa</p>
304
- </div>
305
- </div>
306
-
307
- <!-- Email Card -->
308
- <div class="col-md-6">
309
- <div class="contact-card">
310
- <i class="bi bi-envelope-fill contact-icon"></i>
311
- <h4>📧 Email</h4>
312
- <p><strong>Primary Contact:</strong></p>
313
- <p><i class="bi bi-person-circle"></i> bharath@gmail.com</p>
314
- <p><i class="bi bi-person-circle"></i> chaturvedi12@gmail.com</p>
315
- </div>
316
- </div>
317
-
318
- <!-- Phone Card -->
319
- <div class="col-md-6">
320
- <div class="contact-card">
321
- <i class="bi bi-telephone-fill contact-icon"></i>
322
- <h4>📞 Phone</h4>
323
- <p><strong>Mr. Bharath Kumar N:</strong></p>
324
- <p><i class="bi bi-phone"></i> +91 6362123456</p>
325
- <p><strong>Dr. K K Chaturvedi:</strong></p>
326
- <p><i class="bi bi-phone"></i> +91 9480920495</p>
327
- </div>
328
- </div>
329
-
330
- <!-- Research Focus Card (Replaces Working Hours) -->
331
- <div class="col-md-6">
332
- <div class="contact-card">
333
- <i class="bi bi-flower1 contact-icon"></i>
334
- <h4>🌱 Research Focus</h4>
335
- <p><strong>Wheat Nitrogen Management</strong></p>
336
- <ul class="research-highlights">
337
- <li>Multimodal Deep Learning</li>
338
- <li>Precision Agriculture</li>
339
- <li>Non-destructive Analysis</li>
340
- <li>Real-time Nitrogen Estimation</li>
341
- <li>Sustainable Farming</li>
342
- </ul>
343
- </div>
344
- </div>
345
- </div>
346
-
347
- <!-- Map Location -->
348
- <div class="map-container mt-4">
349
- <iframe
350
- src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3501.456789!2d77.123456!3d28.639123!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d123456789%3A0x123456789!2sICAR-IASRI!5e0!3m2!1sen!2sin!4v1234567890"
351
- width="100%"
352
- height="300"
353
- style="border:0;"
354
- allowfullscreen=""
355
- loading="lazy">
356
- </iframe>
357
- </div>
358
-
359
- <!-- Social Media Links -->
360
- <div class="social-links">
361
- <a href="#"><i class="bi bi-twitter-x"></i></a>
362
- <a href="#"><i class="bi bi-linkedin"></i></a>
363
- <a href="#"><i class="bi bi-github"></i></a>
364
- <a href="#"><i class="bi bi-envelope-fill"></i></a>
365
- </div>
366
-
367
- <!-- Additional Contact Info -->
368
- <div class="alert alert-success mt-4">
369
- <i class="bi bi-info-circle-fill me-2"></i>
370
- For technical queries regarding the NitroSense AI application, please contact Mr. Bharath Kumar N or Dr. K K Chaturvedi via email or phone. We welcome collaboration opportunities in precision agriculture and deep learning research.
371
- </div>
372
- </div>
373
- </div>
374
- </div>
375
- </div>
376
- </div>
377
-
378
- <!-- Footer -->
379
- <div class="container">
380
- <div class="footer">
381
- <i class="bi bi-flower1"></i> ICAR-Indian Agricultural Statistics Research Institute (IASRI), Pusa, New Delhi
382
- <i class="bi bi-flower1"></i>
383
- <br>
384
- <small>© 2026 NitroSense AI - All Rights Reserved</small>
385
- </div>
386
- </div>
387
- </body>
388
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/estimation.html DELETED
@@ -1,805 +0,0 @@
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>NitroSense AI - Nitrogen Estimation</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <style>
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- }
15
-
16
- body {
17
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
19
- url('/static/images/wheatleaf.jpg');
20
- background-size: cover;
21
- background-position: center;
22
- background-attachment: fixed;
23
- background-repeat: no-repeat;
24
- min-height: 100vh;
25
- }
26
-
27
- .main-card {
28
- border: none;
29
- border-radius: 20px;
30
- overflow: hidden;
31
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
32
- backdrop-filter: blur(10px);
33
- background: rgba(255, 255, 255, 0.95);
34
- margin: 20px 0;
35
- border: 1px solid rgba(46, 125, 50, 0.2);
36
- }
37
-
38
- .card-header {
39
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
40
- color: white;
41
- padding: 1.8rem;
42
- border: none;
43
- position: relative;
44
- overflow: hidden;
45
- }
46
-
47
- .card-header::before {
48
- content: "";
49
- position: absolute;
50
- top: -50%;
51
- right: -50%;
52
- width: 200%;
53
- height: 200%;
54
- background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
55
- animation: rotate 20s linear infinite;
56
- }
57
-
58
- @keyframes rotate {
59
- from { transform: rotate(0deg); }
60
- to { transform: rotate(360deg); }
61
- }
62
-
63
- .card-header h4 {
64
- margin: 0;
65
- font-weight: 600;
66
- display: flex;
67
- align-items: center;
68
- gap: 10px;
69
- position: relative;
70
- z-index: 1;
71
- }
72
-
73
- .card-header i {
74
- font-size: 2rem;
75
- }
76
-
77
- .option-card {
78
- border: 2px solid rgba(46, 125, 50, 0.2);
79
- border-radius: 15px;
80
- padding: 25px;
81
- text-align: center;
82
- cursor: pointer;
83
- transition: all 0.3s;
84
- background: white;
85
- height: 100%;
86
- box-shadow: 0 5px 15px rgba(0,0,0,0.05);
87
- }
88
-
89
- .option-card:hover {
90
- border-color: #2e7d32;
91
- transform: translateY(-8px);
92
- box-shadow: 0 15px 30px rgba(46, 125, 50, 0.2);
93
- }
94
-
95
- .option-card i {
96
- font-size: 3.5rem;
97
- color: #2e7d32;
98
- margin-bottom: 15px;
99
- }
100
-
101
- .option-card h5 {
102
- color: #1a5f1a;
103
- font-weight: 600;
104
- margin-bottom: 10px;
105
- }
106
-
107
- .form-label {
108
- font-weight: 600;
109
- color: #1a5f1a;
110
- margin-bottom: 8px;
111
- font-size: 1.1rem;
112
- }
113
-
114
- /* Continuous Fertilizer Input Styles */
115
- .fertilizer-input-group {
116
- margin-top: 10px;
117
- margin-bottom: 15px;
118
- }
119
-
120
- .fertilizer-input-group input {
121
- width: 100%;
122
- padding: 12px 15px;
123
- border: 2px solid rgba(46, 125, 50, 0.2);
124
- border-radius: 12px;
125
- font-size: 1rem;
126
- transition: all 0.3s;
127
- background: white;
128
- }
129
-
130
- .fertilizer-input-group input:focus {
131
- border-color: #2e7d32;
132
- box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25);
133
- outline: none;
134
- }
135
-
136
- .fertilizer-input-group .input-unit {
137
- position: absolute;
138
- right: 15px;
139
- top: 50%;
140
- transform: translateY(-50%);
141
- color: #666;
142
- font-weight: 500;
143
- pointer-events: none;
144
- }
145
-
146
- /* Temperature Input Styles */
147
- .temperature-container {
148
- display: flex;
149
- gap: 20px;
150
- margin: 15px 0;
151
- }
152
-
153
- .temperature-field {
154
- flex: 1;
155
- }
156
-
157
- .temperature-field input {
158
- width: 100%;
159
- padding: 12px 15px;
160
- border: 2px solid rgba(46, 125, 50, 0.2);
161
- border-radius: 12px;
162
- font-size: 1rem;
163
- transition: all 0.3s;
164
- }
165
-
166
- .temperature-field input:focus {
167
- border-color: #2e7d32;
168
- box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25);
169
- outline: none;
170
- }
171
-
172
- .input-wrapper {
173
- position: relative;
174
- display: flex;
175
- align-items: center;
176
- }
177
-
178
- .input-unit {
179
- position: absolute;
180
- right: 15px;
181
- top: 50%;
182
- transform: translateY(-50%);
183
- color: #666;
184
- font-weight: 500;
185
- pointer-events: none;
186
- }
187
-
188
- /* Days Display Card */
189
- .days-display-card {
190
- background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(26, 95, 26, 0.1) 100%);
191
- border-radius: 15px;
192
- padding: 20px;
193
- margin: 20px 0;
194
- border: 2px dashed #2e7d32;
195
- text-align: center;
196
- }
197
-
198
- .days-number {
199
- font-size: 3rem;
200
- font-weight: 700;
201
- color: #1a5f1a;
202
- line-height: 1;
203
- }
204
-
205
- .days-label {
206
- font-size: 1.1rem;
207
- color: #2e7d32;
208
- font-weight: 500;
209
- }
210
-
211
- .days-range {
212
- font-size: 0.9rem;
213
- color: #666;
214
- margin-top: 5px;
215
- }
216
-
217
- /* Custom Alert */
218
- .custom-alert {
219
- position: fixed;
220
- top: 50%;
221
- left: 50%;
222
- transform: translate(-50%, -50%);
223
- background: white;
224
- border-radius: 20px;
225
- padding: 30px;
226
- box-shadow: 0 20px 60px rgba(0,0,0,0.3);
227
- z-index: 9999;
228
- max-width: 400px;
229
- width: 90%;
230
- border-left: 6px solid #dc3545;
231
- display: none;
232
- animation: slideIn 0.3s ease;
233
- }
234
-
235
- @keyframes slideIn {
236
- from {
237
- opacity: 0;
238
- transform: translate(-50%, -60%);
239
- }
240
- to {
241
- opacity: 1;
242
- transform: translate(-50%, -50%);
243
- }
244
- }
245
-
246
- .custom-alert .alert-icon {
247
- font-size: 3rem;
248
- color: #dc3545;
249
- margin-bottom: 15px;
250
- }
251
-
252
- .custom-alert h4 {
253
- color: #dc3545;
254
- font-weight: 600;
255
- margin-bottom: 10px;
256
- }
257
-
258
- .custom-alert p {
259
- color: #333;
260
- margin-bottom: 20px;
261
- }
262
-
263
- .custom-alert .btn-close-alert {
264
- background: #dc3545;
265
- color: white;
266
- border: none;
267
- padding: 10px 25px;
268
- border-radius: 25px;
269
- font-weight: 600;
270
- transition: all 0.3s;
271
- }
272
-
273
- .custom-alert .btn-close-alert:hover {
274
- background: #bb2d3b;
275
- transform: scale(1.05);
276
- }
277
-
278
- .overlay {
279
- position: fixed;
280
- top: 0;
281
- left: 0;
282
- right: 0;
283
- bottom: 0;
284
- background: rgba(0,0,0,0.5);
285
- z-index: 9998;
286
- display: none;
287
- backdrop-filter: blur(3px);
288
- }
289
-
290
- .btn-estimate {
291
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
292
- color: white;
293
- font-weight: 600;
294
- padding: 16px;
295
- border: none;
296
- border-radius: 12px;
297
- font-size: 1.3rem;
298
- transition: all 0.3s;
299
- text-transform: uppercase;
300
- letter-spacing: 1px;
301
- box-shadow: 0 8px 20px rgba(46, 125, 50, 0.3);
302
- }
303
-
304
- .btn-estimate:hover {
305
- transform: translateY(-3px);
306
- box-shadow: 0 12px 30px rgba(46, 125, 50, 0.4);
307
- color: white;
308
- }
309
-
310
- .btn-estimate:disabled {
311
- background: #cccccc;
312
- transform: none;
313
- box-shadow: none;
314
- }
315
-
316
- #uploadPreview {
317
- margin-top: 20px;
318
- border-radius: 15px;
319
- overflow: hidden;
320
- box-shadow: 0 8px 20px rgba(0,0,0,0.15);
321
- }
322
-
323
- #uploadPreview img {
324
- width: 100%;
325
- max-height: 300px;
326
- object-fit: cover;
327
- border: 3px solid #2e7d32;
328
- }
329
-
330
- .loading-spinner {
331
- color: #2e7d32;
332
- width: 4rem;
333
- height: 4rem;
334
- }
335
-
336
- .footer {
337
- text-align: center;
338
- padding: 25px;
339
- color: #1a5f1a;
340
- font-weight: 500;
341
- margin-top: 30px;
342
- background: rgba(255, 255, 255, 0.9);
343
- border-radius: 15px;
344
- backdrop-filter: blur(5px);
345
- border: 1px solid rgba(46, 125, 50, 0.2);
346
- box-shadow: 0 5px 15px rgba(0,0,0,0.1);
347
- }
348
-
349
- .wheat-decoration {
350
- position: fixed;
351
- bottom: 0;
352
- left: 0;
353
- right: 0;
354
- height: 5px;
355
- background: linear-gradient(90deg, #f5b041, #f1c40f, #f5b041);
356
- opacity: 0.6;
357
- box-shadow: 0 -2px 10px rgba(245, 176, 65, 0.3);
358
- }
359
-
360
- @media (max-width: 768px) {
361
- .temperature-container {
362
- flex-direction: column;
363
- gap: 15px;
364
- }
365
-
366
- .navbar-brand {
367
- font-size: 1.2rem;
368
- }
369
-
370
- .btn-estimate {
371
- font-size: 1.1rem;
372
- padding: 12px;
373
- }
374
- }
375
- </style>
376
- </head>
377
- <body>
378
- <!-- Custom Alert Popup -->
379
- <div class="overlay" id="overlay"></div>
380
- <div class="custom-alert" id="daysAlert">
381
- <div class="text-center">
382
- <div class="alert-icon">
383
- <i class="bi bi-exclamation-triangle-fill"></i>
384
- </div>
385
- <h4>⚠️ Invalid Days Range</h4>
386
- <p id="alertMessage">Please select dates that result in <strong>60 to 120 days</strong> after sowing for accurate nitrogen estimation.</p>
387
- <p id="selectedDays" style="font-size: 1.2rem; font-weight: 600; color: #dc3545;"></p>
388
- <button class="btn-close-alert" onclick="closeAlert()">OK, Got It</button>
389
- </div>
390
- </div>
391
-
392
- <!-- Navigation Bar -->
393
-
394
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
395
- <div class="container-fluid px-4">
396
- <!-- Left side: ICAR logo - flush left -->
397
- <div class="d-flex align-items-center" style="margin-right: auto;">
398
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
399
- </div>
400
-
401
- <!-- Center: NitroSense AI -->
402
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
403
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
404
- <i class="bi bi-tree-fill"></i> NitroSense AI
405
- </a>
406
- </div>
407
-
408
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
409
- <span class="navbar-toggler-icon"></span>
410
- </button>
411
-
412
- <div class="collapse navbar-collapse" id="navbarNav">
413
- <!-- Navigation links -->
414
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
415
- <li class="nav-item">
416
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
417
- <i class="bi bi-house-door-fill"></i> Home
418
- </a>
419
- </li>
420
- <li class="nav-item">
421
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
422
- <i class="bi bi-calculator-fill"></i> Estimation
423
- </a>
424
- </li>
425
- <li class="nav-item">
426
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
427
- <i class="bi bi-info-circle-fill"></i> About
428
- </a>
429
- </li>
430
- <li class="nav-item">
431
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
432
- <i class="bi bi-people-fill"></i> Team
433
- </a>
434
- </li>
435
- <li class="nav-item">
436
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
437
- <i class="bi bi-gear-fill"></i> How It Works
438
- </a>
439
- </li>
440
- <li class="nav-item">
441
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
442
- <i class="bi bi-envelope-fill"></i> Contact
443
- </a>
444
- </li>
445
- </ul>
446
-
447
- <!-- Right side: IASRI logo -->
448
- <div class="d-flex align-items-center">
449
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
450
- </div>
451
- </div>
452
- </div>
453
- </nav>
454
-
455
- <!-- Responsive CSS for mobile -->
456
- <style>
457
- @media (max-width: 1200px) {
458
- .position-absolute {
459
- left: 44% !important;
460
- }
461
- .navbar-brand {
462
- font-size: 1.8rem !important;
463
- }
464
- .navbar-nav {
465
- gap: 0px !important;
466
- }
467
- .nav-link {
468
- padding: 6px 5px !important;
469
- font-size: 0.85rem;
470
- }
471
- }
472
-
473
- @media (max-width: 991px) {
474
- .position-absolute {
475
- position: relative !important;
476
- left: auto !important;
477
- transform: none !important;
478
- margin: 10px 0;
479
- text-align: center;
480
- width: 100%;
481
- }
482
- .navbar .container-fluid {
483
- flex-wrap: wrap;
484
- }
485
- .navbar-nav {
486
- margin: 10px 0 !important;
487
- justify-content: center;
488
- width: 100%;
489
- gap: 2px !important;
490
- }
491
- .navbar-nav .nav-item {
492
- text-align: center;
493
- }
494
- .d-flex.align-items-center {
495
- margin: 5px auto !important;
496
- justify-content: center;
497
- width: 100%;
498
- }
499
- img[alt="ICAR"], img[alt="IASRI"] {
500
- height: 50px !important;
501
- }
502
- }
503
-
504
- @media (min-width: 992px) {
505
- .navbar-nav {
506
- margin-left: auto !important;
507
- margin-right: 20px !important;
508
- }
509
- .nav-link {
510
- padding: 8px 5px !important;
511
- font-size: 0.95rem;
512
- }
513
- }
514
- </style>
515
-
516
-
517
- <div class="container mt-4">
518
- <div class="row">
519
- <div class="col-lg-8 mx-auto">
520
- <div class="main-card">
521
- <div class="card-header">
522
- <h4>
523
- <i class="bi bi-cloud-sun-fill"></i>
524
- Wheat Nitrogen Content Estimation
525
- </h4>
526
- <p class="mb-0 mt-2 opacity-75">
527
- <i class="bi bi-info-circle-fill"></i>
528
- Upload wheat leaf image and provide crop details for accurate nitrogen analysis
529
- </p>
530
- </div>
531
- <div class="card-body p-4">
532
- <form id="predictionForm" action="/predict" method="POST" enctype="multipart/form-data">
533
- <!-- Image Upload Options -->
534
- <div class="mb-4">
535
- <label class="form-label">
536
- <i class="bi bi-images"></i> Select Image Source:
537
- </label>
538
- <div class="row g-3">
539
- <div class="col-md-6">
540
- <div class="option-card" onclick="document.getElementById('imageUpload').click()">
541
- <i class="bi bi-cloud-upload-fill"></i>
542
- <h5>Upload Image</h5>
543
- <p class="text-muted small">Select from your computer</p>
544
- <input type="file" class="d-none" id="imageUpload" name="image" accept="image/*" required>
545
- </div>
546
- </div>
547
- <div class="col-md-6">
548
- <div class="option-card" onclick="window.location.href='/capture'">
549
- <i class="bi bi-camera-fill"></i>
550
- <h5>Take Photo</h5>
551
- <p class="text-muted small">Use your camera</p>
552
- </div>
553
- </div>
554
- </div>
555
- <div id="uploadPreview" class="text-center"></div>
556
- <!-- Hidden field to store uploaded filename -->
557
- <input type="hidden" id="uploaded_filename" name="uploaded_filename" value="">
558
- </div>
559
-
560
- <!-- Fertilizer Selection - Continuous Input -->
561
- <div class="mb-4">
562
- <label class="form-label">
563
- <i class="bi bi-droplet-fill"></i> Nitrogen Fertilizer Applied (kg/ha):
564
- </label>
565
- <div class="fertilizer-input-group">
566
- <div class="input-wrapper">
567
- <input type="number"
568
- step="1"
569
- min="0"
570
- max="210"
571
- class="form-control form-control-lg"
572
- id="fertilizer"
573
- name="fertilizer"
574
- placeholder="Enter value between 0-210 kg/ha"
575
- required>
576
- <span class="input-unit">kg/ha</span>
577
- </div>
578
- </div>
579
- <small class="text-muted">Enter any nitrogen fertilizer application amount between 0 and 210 kg/ha (e.g., 45, 75, 135)</small>
580
- </div>
581
-
582
- <!-- Temperature Input Fields -->
583
- <div class="mb-4">
584
- <label class="form-label">
585
- <i class="bi bi-thermometer-half"></i> Air Temperature:
586
- </label>
587
- <div class="temperature-container">
588
- <div class="temperature-field">
589
- <div class="input-wrapper">
590
- <input type="number" step="0.1" min="-10" max="50" class="form-control" id="airTemp" name="airTemp" placeholder="e.g., 25.5" required>
591
- <span class="input-unit">°C</span>
592
- </div>
593
- </div>
594
- </div>
595
- <small class="text-muted">Enter current air temperature in degrees Celsius (soil temperature uses mean value from training data)</small>
596
- </div>
597
-
598
- <!-- Date Selection -->
599
- <div class="row mb-4">
600
- <div class="col-md-6">
601
- <label class="form-label">
602
- <i class="bi bi-calendar-plus-fill"></i> Date of Sowing:
603
- </label>
604
- <input type="date" class="form-control" id="sowingDate" name="sowingDate" required>
605
- </div>
606
- <div class="col-md-6">
607
- <label class="form-label">
608
- <i class="bi bi-calendar-check-fill"></i> Date of Image Capture:
609
- </label>
610
- <input type="date" class="form-control" id="captureDate" name="captureDate" required>
611
- </div>
612
- </div>
613
-
614
- <!-- Days Display -->
615
- <div class="days-display-card" id="daysDisplay" style="display: none;">
616
- <div class="days-number" id="daysCount">0</div>
617
- <div class="days-label">Days After Sowing</div>
618
- <div class="days-range">Valid range: 60 - 120 days</div>
619
- </div>
620
-
621
- <!-- Submit Button -->
622
- <div class="d-grid">
623
- <button type="button" class="btn-estimate" id="predictBtn" onclick="validateAndSubmit()">
624
- <i class="bi bi-graph-up-arrow"></i> Estimate Nitrogen Content
625
- </button>
626
- </div>
627
- </form>
628
-
629
- <!-- Loading Spinner -->
630
- <div id="loadingSpinner" class="text-center mt-4" style="display: none;">
631
- <div class="spinner-border loading-spinner" role="status">
632
- <span class="visually-hidden">Loading...</span>
633
- </div>
634
- <p class="mt-3">
635
- <strong>Processing your wheat image...</strong><br>
636
- <span class="text-muted small">This may take a few moments</span>
637
- </p>
638
- </div>
639
- </div>
640
- </div>
641
- </div>
642
- </div>
643
- </div>
644
-
645
- <!-- Footer -->
646
- <div class="container">
647
- <div class="footer">
648
- <i class="bi bi-flower1"></i>
649
- Developed at ICAR-Indian Agricultural Statistics Research Institute, New Delhi, in collaboration with ICAR-Indian Institute of Wheat and Barley Research (IIWBR), Karnal, Haryana
650
- <i class="bi bi-flower1"></i>
651
- <br>
652
- <small class="text-muted">© 2026 NitroSense AI - ICAR-IASRI | All Rights Reserved</small>
653
- </div>
654
- </div>
655
-
656
- <!-- Wheat Decoration -->
657
- <div class="wheat-decoration"></div>
658
-
659
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
660
- <script>
661
- // Store the uploaded filename when image is uploaded
662
- let uploadedFilename = '';
663
-
664
- // Handle file selection preview and upload
665
- document.getElementById("imageUpload").addEventListener("change", function(event) {
666
- var file = event.target.files[0];
667
- if (file) {
668
- var reader = new FileReader();
669
- reader.onload = function(loadEvent) {
670
- var preview = document.getElementById("uploadPreview");
671
- preview.innerHTML = '<img src="' + loadEvent.target.result + '" class="img-fluid rounded" alt="Preview">';
672
- };
673
- reader.readAsDataURL(file);
674
-
675
- // Upload the file immediately
676
- var formData = new FormData();
677
- formData.append("image", file);
678
-
679
- fetch("/upload", {
680
- method: "POST",
681
- body: formData
682
- })
683
- .then(response => response.json())
684
- .then(data => {
685
- if (data.success) {
686
- uploadedFilename = data.filename;
687
- document.getElementById("uploaded_filename").value = data.filename;
688
- console.log("✅ File uploaded:", data.filename);
689
- } else {
690
- alert("Error uploading image: " + data.error);
691
- }
692
- })
693
- .catch(error => {
694
- console.error("Upload error:", error);
695
- alert("Error uploading image");
696
- });
697
- }
698
- });
699
-
700
- // Get fertilizer value directly from input field
701
- var fertilizerInput = document.getElementById('fertilizer');
702
-
703
- // Set max date to today for capture date
704
- var today = new Date().toISOString().split("T")[0];
705
- document.getElementById("captureDate").setAttribute("max", today);
706
-
707
- // Set min date for sowing date
708
- var minSowingDate = new Date();
709
- minSowingDate.setDate(minSowingDate.getDate() - 180);
710
- document.getElementById("sowingDate").setAttribute("min", minSowingDate.toISOString().split("T")[0]);
711
- document.getElementById("sowingDate").setAttribute("max", today);
712
-
713
- // Calculate days function
714
- function calculateDays() {
715
- var sowingDate = document.getElementById('sowingDate').value;
716
- var captureDate = document.getElementById('captureDate').value;
717
-
718
- if (sowingDate && captureDate) {
719
- var sowing = new Date(sowingDate);
720
- var capture = new Date(captureDate);
721
- var diffTime = capture - sowing;
722
- var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
723
-
724
- if (diffDays >= 0) {
725
- document.getElementById('daysCount').textContent = diffDays;
726
- document.getElementById('daysDisplay').style.display = 'block';
727
-
728
- if (diffDays >= 60 && diffDays <= 120) {
729
- document.getElementById('daysDisplay').style.borderColor = '#2e7d32';
730
- document.getElementById('daysCount').style.color = '#1a5f1a';
731
- } else {
732
- document.getElementById('daysDisplay').style.borderColor = '#dc3545';
733
- document.getElementById('daysCount').style.color = '#dc3545';
734
- }
735
- }
736
- }
737
- }
738
-
739
- // Alert functions
740
- function showAlert(days) {
741
- document.getElementById('selectedDays').innerHTML = 'Selected: <strong>' + days + ' days</strong>';
742
- document.getElementById('overlay').style.display = 'block';
743
- document.getElementById('daysAlert').style.display = 'block';
744
- }
745
-
746
- function closeAlert() {
747
- document.getElementById('overlay').style.display = 'none';
748
- document.getElementById('daysAlert').style.display = 'none';
749
- }
750
-
751
- // Validate and submit form
752
- function validateAndSubmit() {
753
- var sowingDate = document.getElementById('sowingDate').value;
754
- var captureDate = document.getElementById('captureDate').value;
755
- var fertilizer = document.getElementById('fertilizer').value;
756
- var airTemp = document.getElementById('airTemp').value;
757
- var imageUpload = document.getElementById('imageUpload').files[0];
758
-
759
- if (!imageUpload && !uploadedFilename) {
760
- alert('Please select an image first');
761
- return;
762
- }
763
-
764
- if (!fertilizer) {
765
- alert('Please enter a fertilizer amount (0-210 kg/ha)');
766
- return;
767
- }
768
-
769
- // Validate fertilizer range
770
- var fertilizerNum = parseFloat(fertilizer);
771
- if (isNaN(fertilizerNum) || fertilizerNum < 0 || fertilizerNum > 210) {
772
- alert('Fertilizer amount must be between 0 and 210 kg/ha');
773
- return;
774
- }
775
-
776
- if (!airTemp) {
777
- alert('Please enter air temperature');
778
- return;
779
- }
780
-
781
- if (!sowingDate || !captureDate) {
782
- alert('Please select both sowing and capture dates');
783
- return;
784
- }
785
-
786
- var sowing = new Date(sowingDate);
787
- var capture = new Date(captureDate);
788
- var diffTime = capture - sowing;
789
- var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
790
-
791
- if (diffDays < 60 || diffDays > 120) {
792
- showAlert(diffDays);
793
- return;
794
- }
795
-
796
- document.getElementById("loadingSpinner").style.display = "block";
797
- document.getElementById("predictBtn").disabled = true;
798
- document.getElementById("predictionForm").submit();
799
- }
800
-
801
- document.getElementById('sowingDate').addEventListener('change', calculateDays);
802
- document.getElementById('captureDate').addEventListener('change', calculateDays);
803
- </script>
804
- </body>
805
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/estimation_backup.html DELETED
@@ -1,805 +0,0 @@
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>NitroSense AI - Nitrogen Estimation</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <style>
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- }
15
-
16
- body {
17
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
19
- url('/static/images/wheatleaf.jpg');
20
- background-size: cover;
21
- background-position: center;
22
- background-attachment: fixed;
23
- background-repeat: no-repeat;
24
- min-height: 100vh;
25
- }
26
-
27
- .main-card {
28
- border: none;
29
- border-radius: 20px;
30
- overflow: hidden;
31
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
32
- backdrop-filter: blur(10px);
33
- background: rgba(255, 255, 255, 0.95);
34
- margin: 20px 0;
35
- border: 1px solid rgba(46, 125, 50, 0.2);
36
- }
37
-
38
- .card-header {
39
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
40
- color: white;
41
- padding: 1.8rem;
42
- border: none;
43
- position: relative;
44
- overflow: hidden;
45
- }
46
-
47
- .card-header::before {
48
- content: "";
49
- position: absolute;
50
- top: -50%;
51
- right: -50%;
52
- width: 200%;
53
- height: 200%;
54
- background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
55
- animation: rotate 20s linear infinite;
56
- }
57
-
58
- @keyframes rotate {
59
- from { transform: rotate(0deg); }
60
- to { transform: rotate(360deg); }
61
- }
62
-
63
- .card-header h4 {
64
- margin: 0;
65
- font-weight: 600;
66
- display: flex;
67
- align-items: center;
68
- gap: 10px;
69
- position: relative;
70
- z-index: 1;
71
- }
72
-
73
- .card-header i {
74
- font-size: 2rem;
75
- }
76
-
77
- .option-card {
78
- border: 2px solid rgba(46, 125, 50, 0.2);
79
- border-radius: 15px;
80
- padding: 25px;
81
- text-align: center;
82
- cursor: pointer;
83
- transition: all 0.3s;
84
- background: white;
85
- height: 100%;
86
- box-shadow: 0 5px 15px rgba(0,0,0,0.05);
87
- }
88
-
89
- .option-card:hover {
90
- border-color: #2e7d32;
91
- transform: translateY(-8px);
92
- box-shadow: 0 15px 30px rgba(46, 125, 50, 0.2);
93
- }
94
-
95
- .option-card i {
96
- font-size: 3.5rem;
97
- color: #2e7d32;
98
- margin-bottom: 15px;
99
- }
100
-
101
- .option-card h5 {
102
- color: #1a5f1a;
103
- font-weight: 600;
104
- margin-bottom: 10px;
105
- }
106
-
107
- .form-label {
108
- font-weight: 600;
109
- color: #1a5f1a;
110
- margin-bottom: 8px;
111
- font-size: 1.1rem;
112
- }
113
-
114
- /* Continuous Fertilizer Input Styles */
115
- .fertilizer-input-group {
116
- margin-top: 10px;
117
- margin-bottom: 15px;
118
- }
119
-
120
- .fertilizer-input-group input {
121
- width: 100%;
122
- padding: 12px 15px;
123
- border: 2px solid rgba(46, 125, 50, 0.2);
124
- border-radius: 12px;
125
- font-size: 1rem;
126
- transition: all 0.3s;
127
- background: white;
128
- }
129
-
130
- .fertilizer-input-group input:focus {
131
- border-color: #2e7d32;
132
- box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25);
133
- outline: none;
134
- }
135
-
136
- .fertilizer-input-group .input-unit {
137
- position: absolute;
138
- right: 15px;
139
- top: 50%;
140
- transform: translateY(-50%);
141
- color: #666;
142
- font-weight: 500;
143
- pointer-events: none;
144
- }
145
-
146
- /* Temperature Input Styles */
147
- .temperature-container {
148
- display: flex;
149
- gap: 20px;
150
- margin: 15px 0;
151
- }
152
-
153
- .temperature-field {
154
- flex: 1;
155
- }
156
-
157
- .temperature-field input {
158
- width: 100%;
159
- padding: 12px 15px;
160
- border: 2px solid rgba(46, 125, 50, 0.2);
161
- border-radius: 12px;
162
- font-size: 1rem;
163
- transition: all 0.3s;
164
- }
165
-
166
- .temperature-field input:focus {
167
- border-color: #2e7d32;
168
- box-shadow: 0 0 0 0.25rem rgba(46, 125, 50, 0.25);
169
- outline: none;
170
- }
171
-
172
- .input-wrapper {
173
- position: relative;
174
- display: flex;
175
- align-items: center;
176
- }
177
-
178
- .input-unit {
179
- position: absolute;
180
- right: 15px;
181
- top: 50%;
182
- transform: translateY(-50%);
183
- color: #666;
184
- font-weight: 500;
185
- pointer-events: none;
186
- }
187
-
188
- /* Days Display Card */
189
- .days-display-card {
190
- background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(26, 95, 26, 0.1) 100%);
191
- border-radius: 15px;
192
- padding: 20px;
193
- margin: 20px 0;
194
- border: 2px dashed #2e7d32;
195
- text-align: center;
196
- }
197
-
198
- .days-number {
199
- font-size: 3rem;
200
- font-weight: 700;
201
- color: #1a5f1a;
202
- line-height: 1;
203
- }
204
-
205
- .days-label {
206
- font-size: 1.1rem;
207
- color: #2e7d32;
208
- font-weight: 500;
209
- }
210
-
211
- .days-range {
212
- font-size: 0.9rem;
213
- color: #666;
214
- margin-top: 5px;
215
- }
216
-
217
- /* Custom Alert */
218
- .custom-alert {
219
- position: fixed;
220
- top: 50%;
221
- left: 50%;
222
- transform: translate(-50%, -50%);
223
- background: white;
224
- border-radius: 20px;
225
- padding: 30px;
226
- box-shadow: 0 20px 60px rgba(0,0,0,0.3);
227
- z-index: 9999;
228
- max-width: 400px;
229
- width: 90%;
230
- border-left: 6px solid #dc3545;
231
- display: none;
232
- animation: slideIn 0.3s ease;
233
- }
234
-
235
- @keyframes slideIn {
236
- from {
237
- opacity: 0;
238
- transform: translate(-50%, -60%);
239
- }
240
- to {
241
- opacity: 1;
242
- transform: translate(-50%, -50%);
243
- }
244
- }
245
-
246
- .custom-alert .alert-icon {
247
- font-size: 3rem;
248
- color: #dc3545;
249
- margin-bottom: 15px;
250
- }
251
-
252
- .custom-alert h4 {
253
- color: #dc3545;
254
- font-weight: 600;
255
- margin-bottom: 10px;
256
- }
257
-
258
- .custom-alert p {
259
- color: #333;
260
- margin-bottom: 20px;
261
- }
262
-
263
- .custom-alert .btn-close-alert {
264
- background: #dc3545;
265
- color: white;
266
- border: none;
267
- padding: 10px 25px;
268
- border-radius: 25px;
269
- font-weight: 600;
270
- transition: all 0.3s;
271
- }
272
-
273
- .custom-alert .btn-close-alert:hover {
274
- background: #bb2d3b;
275
- transform: scale(1.05);
276
- }
277
-
278
- .overlay {
279
- position: fixed;
280
- top: 0;
281
- left: 0;
282
- right: 0;
283
- bottom: 0;
284
- background: rgba(0,0,0,0.5);
285
- z-index: 9998;
286
- display: none;
287
- backdrop-filter: blur(3px);
288
- }
289
-
290
- .btn-estimate {
291
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
292
- color: white;
293
- font-weight: 600;
294
- padding: 16px;
295
- border: none;
296
- border-radius: 12px;
297
- font-size: 1.3rem;
298
- transition: all 0.3s;
299
- text-transform: uppercase;
300
- letter-spacing: 1px;
301
- box-shadow: 0 8px 20px rgba(46, 125, 50, 0.3);
302
- }
303
-
304
- .btn-estimate:hover {
305
- transform: translateY(-3px);
306
- box-shadow: 0 12px 30px rgba(46, 125, 50, 0.4);
307
- color: white;
308
- }
309
-
310
- .btn-estimate:disabled {
311
- background: #cccccc;
312
- transform: none;
313
- box-shadow: none;
314
- }
315
-
316
- #uploadPreview {
317
- margin-top: 20px;
318
- border-radius: 15px;
319
- overflow: hidden;
320
- box-shadow: 0 8px 20px rgba(0,0,0,0.15);
321
- }
322
-
323
- #uploadPreview img {
324
- width: 100%;
325
- max-height: 300px;
326
- object-fit: cover;
327
- border: 3px solid #2e7d32;
328
- }
329
-
330
- .loading-spinner {
331
- color: #2e7d32;
332
- width: 4rem;
333
- height: 4rem;
334
- }
335
-
336
- .footer {
337
- text-align: center;
338
- padding: 25px;
339
- color: #1a5f1a;
340
- font-weight: 500;
341
- margin-top: 30px;
342
- background: rgba(255, 255, 255, 0.9);
343
- border-radius: 15px;
344
- backdrop-filter: blur(5px);
345
- border: 1px solid rgba(46, 125, 50, 0.2);
346
- box-shadow: 0 5px 15px rgba(0,0,0,0.1);
347
- }
348
-
349
- .wheat-decoration {
350
- position: fixed;
351
- bottom: 0;
352
- left: 0;
353
- right: 0;
354
- height: 5px;
355
- background: linear-gradient(90deg, #f5b041, #f1c40f, #f5b041);
356
- opacity: 0.6;
357
- box-shadow: 0 -2px 10px rgba(245, 176, 65, 0.3);
358
- }
359
-
360
- @media (max-width: 768px) {
361
- .temperature-container {
362
- flex-direction: column;
363
- gap: 15px;
364
- }
365
-
366
- .navbar-brand {
367
- font-size: 1.2rem;
368
- }
369
-
370
- .btn-estimate {
371
- font-size: 1.1rem;
372
- padding: 12px;
373
- }
374
- }
375
- </style>
376
- </head>
377
- <body>
378
- <!-- Custom Alert Popup -->
379
- <div class="overlay" id="overlay"></div>
380
- <div class="custom-alert" id="daysAlert">
381
- <div class="text-center">
382
- <div class="alert-icon">
383
- <i class="bi bi-exclamation-triangle-fill"></i>
384
- </div>
385
- <h4>⚠️ Invalid Days Range</h4>
386
- <p id="alertMessage">Please select dates that result in <strong>60 to 120 days</strong> after sowing for accurate nitrogen estimation.</p>
387
- <p id="selectedDays" style="font-size: 1.2rem; font-weight: 600; color: #dc3545;"></p>
388
- <button class="btn-close-alert" onclick="closeAlert()">OK, Got It</button>
389
- </div>
390
- </div>
391
-
392
- <!-- Navigation Bar -->
393
-
394
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
395
- <div class="container-fluid px-4">
396
- <!-- Left side: ICAR logo - flush left -->
397
- <div class="d-flex align-items-center" style="margin-right: auto;">
398
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
399
- </div>
400
-
401
- <!-- Center: NitroSense AI -->
402
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
403
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
404
- <i class="bi bi-tree-fill"></i> NitroSense AI
405
- </a>
406
- </div>
407
-
408
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
409
- <span class="navbar-toggler-icon"></span>
410
- </button>
411
-
412
- <div class="collapse navbar-collapse" id="navbarNav">
413
- <!-- Navigation links -->
414
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
415
- <li class="nav-item">
416
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
417
- <i class="bi bi-house-door-fill"></i> Home
418
- </a>
419
- </li>
420
- <li class="nav-item">
421
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
422
- <i class="bi bi-calculator-fill"></i> Estimation
423
- </a>
424
- </li>
425
- <li class="nav-item">
426
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
427
- <i class="bi bi-info-circle-fill"></i> About
428
- </a>
429
- </li>
430
- <li class="nav-item">
431
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
432
- <i class="bi bi-people-fill"></i> Team
433
- </a>
434
- </li>
435
- <li class="nav-item">
436
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
437
- <i class="bi bi-gear-fill"></i> How It Works
438
- </a>
439
- </li>
440
- <li class="nav-item">
441
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
442
- <i class="bi bi-envelope-fill"></i> Contact
443
- </a>
444
- </li>
445
- </ul>
446
-
447
- <!-- Right side: IASRI logo -->
448
- <div class="d-flex align-items-center">
449
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
450
- </div>
451
- </div>
452
- </div>
453
- </nav>
454
-
455
- <!-- Responsive CSS for mobile -->
456
- <style>
457
- @media (max-width: 1200px) {
458
- .position-absolute {
459
- left: 44% !important;
460
- }
461
- .navbar-brand {
462
- font-size: 1.8rem !important;
463
- }
464
- .navbar-nav {
465
- gap: 0px !important;
466
- }
467
- .nav-link {
468
- padding: 6px 5px !important;
469
- font-size: 0.85rem;
470
- }
471
- }
472
-
473
- @media (max-width: 991px) {
474
- .position-absolute {
475
- position: relative !important;
476
- left: auto !important;
477
- transform: none !important;
478
- margin: 10px 0;
479
- text-align: center;
480
- width: 100%;
481
- }
482
- .navbar .container-fluid {
483
- flex-wrap: wrap;
484
- }
485
- .navbar-nav {
486
- margin: 10px 0 !important;
487
- justify-content: center;
488
- width: 100%;
489
- gap: 2px !important;
490
- }
491
- .navbar-nav .nav-item {
492
- text-align: center;
493
- }
494
- .d-flex.align-items-center {
495
- margin: 5px auto !important;
496
- justify-content: center;
497
- width: 100%;
498
- }
499
- img[alt="ICAR"], img[alt="IASRI"] {
500
- height: 50px !important;
501
- }
502
- }
503
-
504
- @media (min-width: 992px) {
505
- .navbar-nav {
506
- margin-left: auto !important;
507
- margin-right: 20px !important;
508
- }
509
- .nav-link {
510
- padding: 8px 5px !important;
511
- font-size: 0.95rem;
512
- }
513
- }
514
- </style>
515
-
516
-
517
- <div class="container mt-4">
518
- <div class="row">
519
- <div class="col-lg-8 mx-auto">
520
- <div class="main-card">
521
- <div class="card-header">
522
- <h4>
523
- <i class="bi bi-cloud-sun-fill"></i>
524
- Wheat Nitrogen Content Estimation
525
- </h4>
526
- <p class="mb-0 mt-2 opacity-75">
527
- <i class="bi bi-info-circle-fill"></i>
528
- Upload wheat leaf image and provide crop details for accurate nitrogen analysis
529
- </p>
530
- </div>
531
- <div class="card-body p-4">
532
- <form id="predictionForm" action="/predict" method="POST" enctype="multipart/form-data">
533
- <!-- Image Upload Options -->
534
- <div class="mb-4">
535
- <label class="form-label">
536
- <i class="bi bi-images"></i> Select Image Source:
537
- </label>
538
- <div class="row g-3">
539
- <div class="col-md-6">
540
- <div class="option-card" onclick="document.getElementById('imageUpload').click()">
541
- <i class="bi bi-cloud-upload-fill"></i>
542
- <h5>Upload Image</h5>
543
- <p class="text-muted small">Select from your computer</p>
544
- <input type="file" class="d-none" id="imageUpload" name="image" accept="image/*" required>
545
- </div>
546
- </div>
547
- <div class="col-md-6">
548
- <div class="option-card" onclick="window.location.href='/capture'">
549
- <i class="bi bi-camera-fill"></i>
550
- <h5>Take Photo</h5>
551
- <p class="text-muted small">Use your camera</p>
552
- </div>
553
- </div>
554
- </div>
555
- <div id="uploadPreview" class="text-center"></div>
556
- <!-- Hidden field to store uploaded filename -->
557
- <input type="hidden" id="uploaded_filename" name="uploaded_filename" value="">
558
- </div>
559
-
560
- <!-- Fertilizer Selection - Continuous Input -->
561
- <div class="mb-4">
562
- <label class="form-label">
563
- <i class="bi bi-droplet-fill"></i> Nitrogen Fertilizer Applied (kg/ha):
564
- </label>
565
- <div class="fertilizer-input-group">
566
- <div class="input-wrapper">
567
- <input type="number"
568
- step="1"
569
- min="0"
570
- max="210"
571
- class="form-control form-control-lg"
572
- id="fertilizer"
573
- name="fertilizer"
574
- placeholder="Enter value between 0-210 kg/ha"
575
- required>
576
- <span class="input-unit">kg/ha</span>
577
- </div>
578
- </div>
579
- <small class="text-muted">Enter any nitrogen fertilizer application amount between 0 and 210 kg/ha (e.g., 45, 75, 135)</small>
580
- </div>
581
-
582
- <!-- Temperature Input Fields -->
583
- <div class="mb-4">
584
- <label class="form-label">
585
- <i class="bi bi-thermometer-half"></i> Air Temperature:
586
- </label>
587
- <div class="temperature-container">
588
- <div class="temperature-field">
589
- <div class="input-wrapper">
590
- <input type="number" step="0.1" min="-10" max="50" class="form-control" id="airTemp" name="airTemp" placeholder="e.g., 25.5" required>
591
- <span class="input-unit">°C</span>
592
- </div>
593
- </div>
594
- </div>
595
- <small class="text-muted">Enter current air temperature in degrees Celsius (soil temperature uses mean value from training data)</small>
596
- </div>
597
-
598
- <!-- Date Selection -->
599
- <div class="row mb-4">
600
- <div class="col-md-6">
601
- <label class="form-label">
602
- <i class="bi bi-calendar-plus-fill"></i> Date of Sowing:
603
- </label>
604
- <input type="date" class="form-control" id="sowingDate" name="sowingDate" required>
605
- </div>
606
- <div class="col-md-6">
607
- <label class="form-label">
608
- <i class="bi bi-calendar-check-fill"></i> Date of Image Capture:
609
- </label>
610
- <input type="date" class="form-control" id="captureDate" name="captureDate" required>
611
- </div>
612
- </div>
613
-
614
- <!-- Days Display -->
615
- <div class="days-display-card" id="daysDisplay" style="display: none;">
616
- <div class="days-number" id="daysCount">0</div>
617
- <div class="days-label">Days After Sowing</div>
618
- <div class="days-range">Valid range: 60 - 120 days</div>
619
- </div>
620
-
621
- <!-- Submit Button -->
622
- <div class="d-grid">
623
- <button type="button" class="btn-estimate" id="predictBtn" onclick="validateAndSubmit()">
624
- <i class="bi bi-graph-up-arrow"></i> Estimate Nitrogen Content
625
- </button>
626
- </div>
627
- </form>
628
-
629
- <!-- Loading Spinner -->
630
- <div id="loadingSpinner" class="text-center mt-4" style="display: none;">
631
- <div class="spinner-border loading-spinner" role="status">
632
- <span class="visually-hidden">Loading...</span>
633
- </div>
634
- <p class="mt-3">
635
- <strong>Processing your wheat image...</strong><br>
636
- <span class="text-muted small">This may take a few moments</span>
637
- </p>
638
- </div>
639
- </div>
640
- </div>
641
- </div>
642
- </div>
643
- </div>
644
-
645
- <!-- Footer -->
646
- <div class="container">
647
- <div class="footer">
648
- <i class="bi bi-flower1"></i>
649
- Developed at ICAR-Indian Agricultural Statistics Research Institute, New Delhi, in collaboration with ICAR-Indian Institute of Wheat and Barley Research (IIWBR), Karnal, Haryana
650
- <i class="bi bi-flower1"></i>
651
- <br>
652
- <small class="text-muted">© 2026 NitroSense AI - ICAR-IASRI | All Rights Reserved</small>
653
- </div>
654
- </div>
655
-
656
- <!-- Wheat Decoration -->
657
- <div class="wheat-decoration"></div>
658
-
659
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
660
- <script>
661
- // Store the uploaded filename when image is uploaded
662
- let uploadedFilename = '';
663
-
664
- // Handle file selection preview and upload
665
- document.getElementById("imageUpload").addEventListener("change", function(event) {
666
- var file = event.target.files[0];
667
- if (file) {
668
- var reader = new FileReader();
669
- reader.onload = function(loadEvent) {
670
- var preview = document.getElementById("uploadPreview");
671
- preview.innerHTML = '<img src="' + loadEvent.target.result + '" class="img-fluid rounded" alt="Preview">';
672
- };
673
- reader.readAsDataURL(file);
674
-
675
- // Upload the file immediately
676
- var formData = new FormData();
677
- formData.append("image", file);
678
-
679
- fetch("/upload", {
680
- method: "POST",
681
- body: formData
682
- })
683
- .then(response => response.json())
684
- .then(data => {
685
- if (data.success) {
686
- uploadedFilename = data.filename;
687
- document.getElementById("uploaded_filename").value = data.filename;
688
- console.log("✅ File uploaded:", data.filename);
689
- } else {
690
- alert("Error uploading image: " + data.error);
691
- }
692
- })
693
- .catch(error => {
694
- console.error("Upload error:", error);
695
- alert("Error uploading image");
696
- });
697
- }
698
- });
699
-
700
- // Get fertilizer value directly from input field
701
- var fertilizerInput = document.getElementById('fertilizer');
702
-
703
- // Set max date to today for capture date
704
- var today = new Date().toISOString().split("T")[0];
705
- document.getElementById("captureDate").setAttribute("max", today);
706
-
707
- // Set min date for sowing date
708
- var minSowingDate = new Date();
709
- minSowingDate.setDate(minSowingDate.getDate() - 180);
710
- document.getElementById("sowingDate").setAttribute("min", minSowingDate.toISOString().split("T")[0]);
711
- document.getElementById("sowingDate").setAttribute("max", today);
712
-
713
- // Calculate days function
714
- function calculateDays() {
715
- var sowingDate = document.getElementById('sowingDate').value;
716
- var captureDate = document.getElementById('captureDate').value;
717
-
718
- if (sowingDate && captureDate) {
719
- var sowing = new Date(sowingDate);
720
- var capture = new Date(captureDate);
721
- var diffTime = capture - sowing;
722
- var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
723
-
724
- if (diffDays >= 0) {
725
- document.getElementById('daysCount').textContent = diffDays;
726
- document.getElementById('daysDisplay').style.display = 'block';
727
-
728
- if (diffDays >= 60 && diffDays <= 120) {
729
- document.getElementById('daysDisplay').style.borderColor = '#2e7d32';
730
- document.getElementById('daysCount').style.color = '#1a5f1a';
731
- } else {
732
- document.getElementById('daysDisplay').style.borderColor = '#dc3545';
733
- document.getElementById('daysCount').style.color = '#dc3545';
734
- }
735
- }
736
- }
737
- }
738
-
739
- // Alert functions
740
- function showAlert(days) {
741
- document.getElementById('selectedDays').innerHTML = 'Selected: <strong>' + days + ' days</strong>';
742
- document.getElementById('overlay').style.display = 'block';
743
- document.getElementById('daysAlert').style.display = 'block';
744
- }
745
-
746
- function closeAlert() {
747
- document.getElementById('overlay').style.display = 'none';
748
- document.getElementById('daysAlert').style.display = 'none';
749
- }
750
-
751
- // Validate and submit form
752
- function validateAndSubmit() {
753
- var sowingDate = document.getElementById('sowingDate').value;
754
- var captureDate = document.getElementById('captureDate').value;
755
- var fertilizer = document.getElementById('fertilizer').value;
756
- var airTemp = document.getElementById('airTemp').value;
757
- var imageUpload = document.getElementById('imageUpload').files[0];
758
-
759
- if (!imageUpload && !uploadedFilename) {
760
- alert('Please select an image first');
761
- return;
762
- }
763
-
764
- if (!fertilizer) {
765
- alert('Please enter a fertilizer amount (0-210 kg/ha)');
766
- return;
767
- }
768
-
769
- // Validate fertilizer range
770
- var fertilizerNum = parseFloat(fertilizer);
771
- if (isNaN(fertilizerNum) || fertilizerNum < 0 || fertilizerNum > 210) {
772
- alert('Fertilizer amount must be between 0 and 210 kg/ha');
773
- return;
774
- }
775
-
776
- if (!airTemp) {
777
- alert('Please enter air temperature');
778
- return;
779
- }
780
-
781
- if (!sowingDate || !captureDate) {
782
- alert('Please select both sowing and capture dates');
783
- return;
784
- }
785
-
786
- var sowing = new Date(sowingDate);
787
- var capture = new Date(captureDate);
788
- var diffTime = capture - sowing;
789
- var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
790
-
791
- if (diffDays < 60 || diffDays > 120) {
792
- showAlert(diffDays);
793
- return;
794
- }
795
-
796
- document.getElementById("loadingSpinner").style.display = "block";
797
- document.getElementById("predictBtn").disabled = true;
798
- document.getElementById("predictionForm").submit();
799
- }
800
-
801
- document.getElementById('sowingDate').addEventListener('change', calculateDays);
802
- document.getElementById('captureDate').addEventListener('change', calculateDays);
803
- </script>
804
- </body>
805
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/how-it-works.html DELETED
@@ -1,535 +0,0 @@
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>NitroSense AI - How It Works</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
- <style>
11
- body {
12
- font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
14
- url('/static/images/wheatleaf.jpg');
15
- background-size: cover;
16
- background-position: center;
17
- background-attachment: fixed;
18
- background-repeat: no-repeat;
19
- }
20
-
21
- .navbar {
22
- background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%) !important;
23
- }
24
-
25
- .nav-link {
26
- color: white !important;
27
- font-weight: 500;
28
- margin: 0 10px;
29
- padding: 8px 15px !important;
30
- border-radius: 25px;
31
- }
32
-
33
- .nav-link:hover {
34
- background: rgba(255, 255, 255, 0.2);
35
- }
36
-
37
- .content-card {
38
- border: none;
39
- border-radius: 20px;
40
- overflow: hidden;
41
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
42
- background: rgba(255, 255, 255, 0.95);
43
- margin: 30px 0;
44
- backdrop-filter: blur(10px);
45
- }
46
-
47
- .card-header {
48
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
49
- color: white;
50
- padding: 1.5rem;
51
- border: none;
52
- }
53
-
54
- /* Flowchart Styles */
55
- .flowchart-container {
56
- position: relative;
57
- padding: 20px 0;
58
- }
59
-
60
- .flow-row {
61
- display: flex;
62
- justify-content: center;
63
- align-items: center;
64
- margin-bottom: 30px;
65
- position: relative;
66
- width: 100%;
67
- }
68
-
69
- .flow-box {
70
- background: white;
71
- border-radius: 15px;
72
- padding: 25px;
73
- box-shadow: 0 10px 30px rgba(0,0,0,0.1);
74
- border: 2px solid #2e7d32;
75
- position: relative;
76
- width: 100%;
77
- transition: transform 0.3s;
78
- }
79
-
80
- .flow-box:hover {
81
- transform: translateY(-5px);
82
- box-shadow: 0 15px 40px rgba(46, 125, 50, 0.2);
83
- }
84
-
85
- .flow-box::before {
86
- content: '';
87
- position: absolute;
88
- top: -20px;
89
- left: 50%;
90
- transform: translateX(-50%);
91
- width: 40px;
92
- height: 40px;
93
- background: #2e7d32;
94
- border-radius: 50%;
95
- display: flex;
96
- align-items: center;
97
- justify-content: center;
98
- color: white;
99
- font-weight: bold;
100
- font-size: 1.2rem;
101
- border: 3px solid white;
102
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
103
- }
104
-
105
- .flow-box.step1::before { content: '1'; }
106
- .flow-box.step2::before { content: '2'; }
107
- .flow-box.step3::before { content: '3'; }
108
- .flow-box.step4::before { content: '4'; }
109
- .flow-box.step5::before { content: '5'; }
110
-
111
- .flow-arrow {
112
- position: relative;
113
- width: 100%;
114
- height: 40px;
115
- margin: 10px 0;
116
- }
117
-
118
- .flow-arrow::after {
119
- content: '↓';
120
- position: absolute;
121
- left: 50%;
122
- transform: translateX(-50%);
123
- font-size: 2rem;
124
- color: #2e7d32;
125
- animation: bounce 2s infinite;
126
- }
127
-
128
- @keyframes bounce {
129
- 0%, 100% { transform: translateX(-50%) translateY(0); }
130
- 50% { transform: translateX(-50%) translateY(10px); }
131
- }
132
-
133
- .dual-branch-row {
134
- display: flex;
135
- gap: 30px;
136
- margin-bottom: 30px;
137
- width: 100%;
138
- }
139
-
140
- .branch-box {
141
- flex: 1;
142
- background: white;
143
- border-radius: 15px;
144
- padding: 25px;
145
- box-shadow: 0 10px 30px rgba(0,0,0,0.1);
146
- border: 2px solid #2e7d32;
147
- position: relative;
148
- transition: transform 0.3s;
149
- height: fit-content;
150
- min-height: 250px;
151
- }
152
-
153
- .branch-box:hover {
154
- transform: translateY(-5px);
155
- box-shadow: 0 15px 40px rgba(46, 125, 50, 0.2);
156
- }
157
-
158
- .branch-box.step2::before {
159
- content: '2';
160
- position: absolute;
161
- top: -20px;
162
- left: 50%;
163
- transform: translateX(-50%);
164
- width: 40px;
165
- height: 40px;
166
- background: #2e7d32;
167
- border-radius: 50%;
168
- display: flex;
169
- align-items: center;
170
- justify-content: center;
171
- color: white;
172
- font-weight: bold;
173
- font-size: 1.2rem;
174
- border: 3px solid white;
175
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
176
- }
177
-
178
- .branch-box.step3::before {
179
- content: '3';
180
- position: absolute;
181
- top: -20px;
182
- left: 50%;
183
- transform: translateX(-50%);
184
- width: 40px;
185
- height: 40px;
186
- background: #2e7d32;
187
- border-radius: 50%;
188
- display: flex;
189
- align-items: center;
190
- justify-content: center;
191
- color: white;
192
- font-weight: bold;
193
- font-size: 1.2rem;
194
- border: 3px solid white;
195
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
196
- }
197
-
198
- .branch-container {
199
- display: flex;
200
- gap: 20px;
201
- margin: 20px 0;
202
- }
203
-
204
- .branch {
205
- flex: 1;
206
- background: rgba(46, 125, 50, 0.05);
207
- border-radius: 15px;
208
- padding: 20px;
209
- border: 1px solid rgba(46, 125, 50, 0.3);
210
- height: 100%;
211
- }
212
-
213
- .branch h5 {
214
- color: #1a5f1a;
215
- font-weight: 600;
216
- border-bottom: 2px solid #2e7d32;
217
- padding-bottom: 10px;
218
- margin-bottom: 15px;
219
- }
220
-
221
- .feature-list {
222
- list-style: none;
223
- padding: 0;
224
- margin-bottom: 0;
225
- }
226
-
227
- .feature-list li {
228
- padding: 6px 0;
229
- padding-left: 25px;
230
- position: relative;
231
- }
232
-
233
- .feature-list li::before {
234
- content: '•';
235
- color: #2e7d32;
236
- font-weight: bold;
237
- font-size: 1.5rem;
238
- position: absolute;
239
- left: 0;
240
- top: -2px;
241
- }
242
-
243
- .fusion-box {
244
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
245
- color: white;
246
- border-radius: 15px;
247
- padding: 25px;
248
- margin: 20px 0;
249
- box-shadow: 0 10px 30px rgba(46, 125, 50, 0.3);
250
- }
251
-
252
- .architecture-card {
253
- background: white;
254
- border-radius: 15px;
255
- padding: 20px;
256
- margin: 15px 0;
257
- border: 2px solid rgba(46, 125, 50, 0.2);
258
- }
259
-
260
- .footer {
261
- text-align: center;
262
- padding: 20px;
263
- color: #1a5f1a;
264
- font-weight: 500;
265
- margin-top: 30px;
266
- background: rgba(255, 255, 255, 0.9);
267
- border-radius: 15px;
268
- }
269
- </style>
270
- </head>
271
- <body>
272
- <!-- Navigation Bar -->
273
-
274
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
275
- <div class="container-fluid px-4">
276
- <!-- Left side: ICAR logo - flush left -->
277
- <div class="d-flex align-items-center" style="margin-right: auto;">
278
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
279
- </div>
280
-
281
- <!-- Center: NitroSense AI - slightly left of center to avoid overlap with Home button -->
282
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
283
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
284
- <i class="bi bi-tree-fill"></i> NitroSense AI
285
- </a>
286
- </div>
287
-
288
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
289
- <span class="navbar-toggler-icon"></span>
290
- </button>
291
-
292
- <div class="collapse navbar-collapse" id="navbarNav">
293
- <!-- Navigation links - positioned on far right with reduced spacing -->
294
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
295
- <li class="nav-item">
296
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
297
- <i class="bi bi-house-door-fill"></i> Home
298
- </a>
299
- </li>
300
- <li class="nav-item">
301
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
302
- <i class="bi bi-calculator-fill"></i> Estimation
303
- </a>
304
- </li>
305
- <li class="nav-item">
306
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
307
- <i class="bi bi-info-circle-fill"></i> About
308
- </a>
309
- </li>
310
- <li class="nav-item">
311
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
312
- <i class="bi bi-people-fill"></i> Team
313
- </a>
314
- </li>
315
- <li class="nav-item">
316
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
317
- <i class="bi bi-gear-fill"></i> How It Works
318
- </a>
319
- </li>
320
- <li class="nav-item">
321
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
322
- <i class="bi bi-envelope-fill"></i> Contact
323
- </a>
324
- </li>
325
- </ul>
326
-
327
- <!-- Right side: IASRI logo - flush right with buttons to its left -->
328
- <div class="d-flex align-items-center">
329
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
330
- </div>
331
- </div>
332
- </div>
333
- </nav>
334
-
335
- <!-- Responsive CSS for mobile -->
336
- <style>
337
- @media (max-width: 1200px) {
338
- .position-absolute {
339
- left: 44% !important;
340
- }
341
- .navbar-brand {
342
- font-size: 1.8rem !important;
343
- }
344
- .navbar-nav {
345
- gap: 0px !important;
346
- }
347
- .nav-link {
348
- padding: 6px 5px !important;
349
- font-size: 0.85rem;
350
- }
351
- }
352
-
353
- @media (max-width: 991px) {
354
- .position-absolute {
355
- position: relative !important;
356
- left: auto !important;
357
- transform: none !important;
358
- margin: 10px 0;
359
- text-align: center;
360
- width: 100%;
361
- }
362
- .navbar .container-fluid {
363
- flex-wrap: wrap;
364
- }
365
- .navbar-nav {
366
- margin: 10px 0 !important;
367
- justify-content: center;
368
- width: 100%;
369
- gap: 2px !important;
370
- }
371
- .navbar-nav .nav-item {
372
- text-align: center;
373
- }
374
- .d-flex.align-items-center {
375
- margin: 5px auto !important;
376
- justify-content: center;
377
- width: 100%;
378
- }
379
- img[alt="ICAR"], img[alt="IASRI"] {
380
- height: 50px !important;
381
- }
382
- }
383
-
384
- @media (min-width: 992px) {
385
- .navbar-nav {
386
- margin-left: auto !important;
387
- margin-right: 20px !important;
388
- }
389
- .nav-link {
390
- padding: 8px 5px !important;
391
- font-size: 0.95rem;
392
- }
393
- }
394
- </style>
395
-
396
-
397
- <div class="container mt-5">
398
- <div class="row">
399
- <div class="col-lg-12">
400
- <div class="content-card">
401
- <div class="card-header">
402
- <h2><i class="bi bi-diagram-3"></i> How NitroSense AI Works</h2>
403
- <p class="mb-0 mt-2">Multimodal Intermediate Fusion Architecture Flow</p>
404
- </div>
405
- <div class="card-body p-5">
406
-
407
- <div class="flowchart-container">
408
-
409
- <!-- Step 1: Input Layer -->
410
- <div class="flow-row">
411
- <div class="flow-box step1">
412
- <h4 class="text-success text-center mb-3">📥 Input Layer</h4>
413
- <div class="branch-container">
414
- <div class="branch">
415
- <h5><i class="bi bi-image"></i> Image Input</h5>
416
- <ul class="feature-list">
417
- <li>Wheat leaf image</li>
418
- <li>Processed through CNN Architecture</li>
419
- <li>Input size: 224x224x3 or 299x299x3</li>
420
- </ul>
421
- </div>
422
- <div class="branch">
423
- <h5><i class="bi bi-table"></i> Tabular Input</h5>
424
- <ul class="feature-list">
425
- <li>Nitrogen Fertilizer Level (kg/ha)</li>
426
- <li>Days After Sowing</li>
427
- <li>Current Air Temperature in Degrees Celsius</li>
428
- </ul>
429
- </div>
430
- </div>
431
- </div>
432
- </div>
433
-
434
- <div class="flow-arrow"></div>
435
-
436
- <!-- Step 2 & 3: Image and Tabular Processing -->
437
- <div class="dual-branch-row">
438
- <!-- Left: Image Processing Branch -->
439
- <div class="branch-box step2">
440
- <h4 class="text-success text-center mb-3">🖼️ Image Processing Branch</h4>
441
- <div class="branch">
442
- <h5>CNN Architecture</h5>
443
- <ul class="feature-list">
444
- <li>Pre-trained on ImageNet</li>
445
- <li>Transfer Learning</li>
446
- <li>Extracts hierarchical features</li>
447
- </ul>
448
- </div>
449
- </div>
450
-
451
- <!-- Right: Tabular Processing Branch -->
452
- <div class="branch-box step3">
453
- <h4 class="text-success text-center mb-3">📊 Tabular Data Processing Branch</h4>
454
- <div class="branch">
455
- <h5>MLP Layer Processing</h5>
456
- <ul class="feature-list">
457
- <li>Extracts tabular features from agronomic data</li>
458
- <li>Processes Nitrogen Level and Days</li>
459
- <li>Feature encoding and normalization</li>
460
- </ul>
461
- </div>
462
- </div>
463
- </div>
464
-
465
- <div class="flow-arrow"></div>
466
-
467
- <!-- Step 4: Fusion Layer -->
468
- <div class="flow-row">
469
- <div class="flow-box step4">
470
- <h4 class="text-success text-center mb-3">🔄 Intermediate Fusion Layer</h4>
471
- <div class="fusion-box text-center">
472
- <h5 class="text-white">Image Features + Tabular Features → Combined Vector</h5>
473
- <p class="mb-0 mt-3">✨ This fusion allows the model to learn cross-modal relationships</p>
474
- <p class="mb-0">🔄 The network correlates visual symptoms with agronomic conditions</p>
475
- </div>
476
- </div>
477
- </div>
478
-
479
- <div class="flow-arrow"></div>
480
-
481
- <!-- Step 5: Prediction Network -->
482
- <div class="flow-row">
483
- <div class="flow-box step5">
484
- <h4 class="text-success text-center mb-3">🎯 Prediction Network</h4>
485
- <div class="branch">
486
- <h5>Dense Layers Processing</h5>
487
- <ul class="feature-list">
488
- <li>Fused features processed through dense layers</li>
489
- <li>Final output layer with linear activation</li>
490
- <li><strong>Output:</strong> De-Normalized Nitrogen Content</li>
491
- </ul>
492
- </div>
493
- </div>
494
- </div>
495
- </div>
496
-
497
- <!-- Model Architecture Summary -->
498
- <div class="architecture-card mt-5">
499
- <h4 class="text-success"><i class="bi bi-cpu"></i> CNN Model Architecture Summary</h4>
500
- <div class="row mt-3">
501
- <div class="col-md-6">
502
- <p><strong>CNN Models:</strong> ResNet50, Xception, DenseNet121, MobileNetV3, EfficientNetV2</p>
503
- <p><strong>Loss Function:</strong> Mean Squared Error (MSE)</p>
504
- <p><strong>Evaluation Metrics:</strong> RMSE, MAE, R²</p>
505
- </div>
506
- <div class="col-md-6">
507
- <p><strong>Input Image Size:</strong> 224x224x3 or 299×299×3</p>
508
- <p><strong>Output:</strong> Nitrogen Content</p>
509
- <p><strong>Trainable Parameters:</strong> Differ from CNN Model to Model</p>
510
- </div>
511
- </div>
512
- </div>
513
-
514
- <!-- Why Multimodal Fusion -->
515
- <div class="alert alert-success mt-4">
516
- <i class="bi bi-lightbulb-fill fs-3 me-3"></i>
517
- <div>
518
- <strong>Why Multimodal Fusion?</strong><br>
519
- By combining visual symptoms with agronomic context, the model achieves higher accuracy than either modality alone. For example, yellowing leaves might indicate deficiency, but the model also considers growth stage and fertilizer applied to make a more informed prediction.
520
- </div>
521
- </div>
522
- </div>
523
- </div>
524
- </div>
525
- </div>
526
- </div>
527
-
528
- <!-- Footer -->
529
- <div class="container">
530
- <div class="footer">
531
- <i class="bi bi-flower1"></i> ICAR-Indian Institute of Wheat and Barley Research (IIWBR) <i class="bi bi-flower1"></i>
532
- </div>
533
- </div>
534
- </body>
535
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/index.html DELETED
@@ -1,464 +0,0 @@
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>NitroSense AI - Home</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
10
- <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
11
- <style>
12
- * {
13
- margin: 0;
14
- padding: 0;
15
- box-sizing: border-box;
16
- }
17
-
18
- body {
19
- font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
21
- url('/static/images/wheatleaf.jpg');
22
- background-size: cover;
23
- background-position: center;
24
- background-attachment: fixed;
25
- background-repeat: no-repeat;
26
- min-height: 100vh;
27
- }
28
-
29
- .navbar {
30
- background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%) !important;
31
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
32
- padding: 0.8rem 0;
33
- }
34
-
35
- .navbar-brand {
36
- font-size: 1.6rem;
37
- font-weight: 600;
38
- text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
39
- }
40
-
41
- .nav-link {
42
- color: white !important;
43
- font-weight: 500;
44
- margin: 0 10px;
45
- padding: 8px 15px !important;
46
- border-radius: 25px;
47
- transition: all 0.3s;
48
- }
49
-
50
- .nav-link:hover {
51
- background: rgba(255, 255, 255, 0.2);
52
- transform: translateY(-2px);
53
- }
54
-
55
- .nav-link i {
56
- margin-right: 5px;
57
- }
58
-
59
- .hero-section {
60
- background: rgba(255, 255, 255, 0.85);
61
- border-radius: 20px;
62
- padding: 30px;
63
- margin: 30px 0;
64
- box-shadow: 0 20px 50px rgba(0,0,0,0.15);
65
- backdrop-filter: blur(10px);
66
- border: 1px solid rgba(46, 125, 50, 0.3);
67
- }
68
-
69
- .hero-title {
70
- color: #1a5f1a;
71
- font-weight: 700;
72
- font-size: 2.5rem;
73
- margin-bottom: 20px;
74
- text-shadow: 2px 2px 4px rgba(0,0,0,0.05);
75
- }
76
-
77
- .hero-subtitle {
78
- color: #2e7d32;
79
- font-weight: 500;
80
- font-size: 1.3rem;
81
- margin-bottom: 30px;
82
- border-left: 4px solid #2e7d32;
83
- padding-left: 20px;
84
- }
85
-
86
- .research-card {
87
- background: white;
88
- border-radius: 20px;
89
- padding: 25px;
90
- height: 100%;
91
- box-shadow: 0 10px 30px rgba(0,0,0,0.1);
92
- transition: transform 0.3s;
93
- border: 1px solid rgba(46, 125, 50, 0.2);
94
- display: flex;
95
- flex-direction: column;
96
- }
97
-
98
- .research-card:hover {
99
- transform: translateY(-5px);
100
- box-shadow: 0 15px 40px rgba(46, 125, 50, 0.2);
101
- }
102
-
103
- .research-card h3 {
104
- color: #1a5f1a;
105
- font-weight: 600;
106
- margin-bottom: 20px;
107
- border-bottom: 2px solid #2e7d32;
108
- padding-bottom: 10px;
109
- }
110
-
111
- .research-card p {
112
- color: #333;
113
- line-height: 1.8;
114
- text-align: justify;
115
- margin-bottom: 15px;
116
- }
117
-
118
- .methodology-box {
119
- background: rgba(46, 125, 50, 0.03);
120
- border-radius: 15px;
121
- padding: 20px;
122
- height: 100%;
123
- border-left: 4px solid #2e7d32;
124
- }
125
-
126
- .methodology-box h5 {
127
- color: #1a5f1a;
128
- font-weight: 600;
129
- margin-bottom: 15px;
130
- display: flex;
131
- align-items: center;
132
- gap: 8px;
133
- }
134
-
135
- .methodology-box p {
136
- margin-bottom: 0;
137
- color: #444;
138
- line-height: 1.7;
139
- }
140
-
141
- .fusion-box {
142
- background: linear-gradient(135deg, rgba(46, 125, 50, 0.05), rgba(26, 95, 26, 0.05));
143
- border-radius: 15px;
144
- padding: 20px;
145
- margin-top: 20px;
146
- border: 1px dashed #2e7d32;
147
- }
148
-
149
- .fusion-box h5 {
150
- color: #1a5f1a;
151
- font-weight: 600;
152
- margin-bottom: 10px;
153
- }
154
-
155
- .fusion-box p {
156
- margin-bottom: 0;
157
- color: #444;
158
- }
159
-
160
- .flowchart-container {
161
- background: white;
162
- border-radius: 20px;
163
- padding: 15px;
164
- box-shadow: 0 10px 30px rgba(0,0,0,0.1);
165
- border: 2px solid #2e7d32;
166
- height: 100%;
167
- display: flex;
168
- flex-direction: column;
169
- }
170
-
171
- .flowchart-container img {
172
- width: 100%;
173
- border-radius: 15px;
174
- flex: 1;
175
- object-fit: contain;
176
- max-height: 350px;
177
- }
178
-
179
- .btn-estimate-home {
180
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
181
- color: white;
182
- font-weight: 600;
183
- padding: 15px 30px;
184
- border: none;
185
- border-radius: 50px;
186
- font-size: 1.2rem;
187
- transition: all 0.3s;
188
- text-decoration: none;
189
- display: inline-block;
190
- box-shadow: 0 8px 20px rgba(46, 125, 50, 0.3);
191
- }
192
-
193
- .btn-estimate-home:hover {
194
- transform: translateY(-3px);
195
- box-shadow: 0 12px 30px rgba(46, 125, 50, 0.4);
196
- color: white;
197
- }
198
-
199
- .footer {
200
- text-align: center;
201
- padding: 25px;
202
- color: #1a5f1a;
203
- font-weight: 500;
204
- margin-top: 30px;
205
- background: rgba(255, 255, 255, 0.9);
206
- border-radius: 15px;
207
- backdrop-filter: blur(5px);
208
- border: 1px solid rgba(46, 125, 50, 0.2);
209
- box-shadow: 0 5px 15px rgba(0,0,0,0.1);
210
- }
211
-
212
- .wheat-decoration {
213
- position: fixed;
214
- bottom: 0;
215
- left: 0;
216
- right: 0;
217
- height: 5px;
218
- background: linear-gradient(90deg, #f5b041, #f1c40f, #f5b041);
219
- opacity: 0.6;
220
- box-shadow: 0 -2px 10px rgba(245, 176, 65, 0.3);
221
- }
222
-
223
- @media (max-width: 768px) {
224
- .hero-title {
225
- font-size: 1.8rem;
226
- }
227
-
228
- .hero-subtitle {
229
- font-size: 1.1rem;
230
- }
231
-
232
- .navbar-brand {
233
- font-size: 1.2rem;
234
- }
235
-
236
- .methodology-box {
237
- margin-bottom: 15px;
238
- }
239
- }
240
- </style>
241
- </head>
242
- <body>
243
- <!-- Navigation Bar -->
244
-
245
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
246
- <div class="container-fluid px-4">
247
- <!-- Left side: ICAR logo - flush left -->
248
- <div class="d-flex align-items-center" style="margin-right: auto;">
249
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
250
- </div>
251
-
252
- <!-- Center: NitroSense AI - slightly left of center to avoid overlap with Home button -->
253
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
254
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
255
- <i class="bi bi-tree-fill"></i> NitroSense AI
256
- </a>
257
- </div>
258
-
259
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
260
- <span class="navbar-toggler-icon"></span>
261
- </button>
262
-
263
- <div class="collapse navbar-collapse" id="navbarNav">
264
- <!-- Navigation links - positioned on far right with reduced spacing -->
265
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
266
- <li class="nav-item">
267
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
268
- <i class="bi bi-house-door-fill"></i> Home
269
- </a>
270
- </li>
271
- <li class="nav-item">
272
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
273
- <i class="bi bi-calculator-fill"></i> Estimation
274
- </a>
275
- </li>
276
- <li class="nav-item">
277
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
278
- <i class="bi bi-info-circle-fill"></i> About
279
- </a>
280
- </li>
281
- <li class="nav-item">
282
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
283
- <i class="bi bi-people-fill"></i> Team
284
- </a>
285
- </li>
286
- <li class="nav-item">
287
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
288
- <i class="bi bi-gear-fill"></i> How It Works
289
- </a>
290
- </li>
291
- <li class="nav-item">
292
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
293
- <i class="bi bi-envelope-fill"></i> Contact
294
- </a>
295
- </li>
296
- </ul>
297
-
298
- <!-- Right side: IASRI logo - flush right with buttons to its left -->
299
- <div class="d-flex align-items-center">
300
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
301
- </div>
302
- </div>
303
- </div>
304
- </nav>
305
-
306
- <!-- Responsive CSS for mobile -->
307
- <style>
308
- @media (max-width: 1200px) {
309
- .position-absolute {
310
- left: 44% !important;
311
- }
312
- .navbar-brand {
313
- font-size: 1.8rem !important;
314
- }
315
- .navbar-nav {
316
- gap: 0px !important;
317
- }
318
- .nav-link {
319
- padding: 6px 5px !important;
320
- font-size: 0.85rem;
321
- }
322
- }
323
-
324
- @media (max-width: 991px) {
325
- .position-absolute {
326
- position: relative !important;
327
- left: auto !important;
328
- transform: none !important;
329
- margin: 10px 0;
330
- text-align: center;
331
- width: 100%;
332
- }
333
- .navbar .container-fluid {
334
- flex-wrap: wrap;
335
- }
336
- .navbar-nav {
337
- margin: 10px 0 !important;
338
- justify-content: center;
339
- width: 100%;
340
- gap: 2px !important;
341
- }
342
- .navbar-nav .nav-item {
343
- text-align: center;
344
- }
345
- .d-flex.align-items-center {
346
- margin: 5px auto !important;
347
- justify-content: center;
348
- width: 100%;
349
- }
350
- img[alt="ICAR"], img[alt="IASRI"] {
351
- height: 50px !important;
352
- }
353
- }
354
-
355
- @media (min-width: 992px) {
356
- .navbar-nav {
357
- margin-left: auto !important;
358
- margin-right: 20px !important;
359
- }
360
- .nav-link {
361
- padding: 8px 5px !important;
362
- font-size: 0.95rem;
363
- }
364
- }
365
- </style>
366
-
367
-
368
- <!-- Hero Section -->
369
- <div class="container">
370
- <div class="hero-section">
371
- <div class="row align-items-center">
372
- <div class="col-lg-12 text-center">
373
- <h1 class="hero-title">🌾 NitroSense AI: Smart Nitrogen Management for Wheat</h1>
374
- <p class="hero-subtitle">Revolutionizing Precision Agriculture Through Multimodal Deep Learning</p>
375
- </div>
376
- </div>
377
- </div>
378
- </div>
379
-
380
- <!-- Main Content: Flowchart + Research Text -->
381
- <div class="container">
382
- <div class="row">
383
- <!-- Left Column: Flowchart -->
384
- <div class="col-lg-6 mb-4">
385
- <div class="flowchart-container">
386
- <h3 class="text-success text-center mb-3" style="font-size: 2.0rem; font-weight: 600; font-family: 'Playfair Display', 'Georgia', serif; letter-spacing: 0.3px;">
387
- <i class="bi bi-diagram-3" style="margin-right: 8px;"></i> Research Methodology Flowchart
388
- </h3>
389
- <div style="flex: 1; display: flex; align-items: center; justify-content: center; min-height: 320px;">
390
- <img src="/static/images/research-flowchart.png" alt="Research Methodology Flowchart" class="img-fluid" style="max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;">
391
- </div>
392
- </div>
393
- </div>
394
-
395
- <!-- Right Column: Research Text -->
396
- <div class="col-lg-6 mb-4">
397
- <div class="research-card" style="padding: 25px;">
398
- <h3 style="margin-bottom: 15px; font-size: 1.8rem; color: #1a5f1a;"><i class="bi bi-flower1"></i> Wheat: A Global Staple Crop</h3>
399
- <p style="margin-bottom: 15px; line-height: 1.6; font-size: 1.1rem; text-align: justify;">Wheat is one of the world's oldest and most widely cultivated cereal crops and plays a central role in global food security. Alongside rice and maize, wheat provides nearly half of the world's caloric intake and approximately two-fifths of global protein consumption. Wheat-based products serve as a primary nutritional source for more than 2.5 billion people worldwide.</p>
400
-
401
- <h3 style="margin: 20px 0 12px 0; font-size: 1.7rem; color: #1a5f1a;"><i class="bi bi-droplet"></i> The Critical Role of Nitrogen</h3>
402
- <p style="margin-bottom: 12px; line-height: 1.6; font-size: 1.1rem; text-align: justify;">Among essential macronutrients required for wheat growth, nitrogen is the most influential in determining crop development, yield, and grain protein quality. Nitrogen constitutes approximately 1–5% of plant dry matter and plays a vital role in chlorophyll formation, photosynthesis, and metabolic activity.</p>
403
-
404
- <p style="margin-bottom: 0; line-height: 1.6; font-size: 1.1rem; text-align: justify;">Adequate nitrogen availability enhances plant morphology, biomass accumulation, and grain protein content, while deficiency restricts photosynthetic efficiency and reduces yield potential. The nitrogen fertilizer plays important role in nitrogen content in wheat leaves but excessive nitrogen application leads to environmental degradation.</p>
405
- </div>
406
- </div>
407
- </div>
408
- </div>
409
-
410
- <!-- Methodology Section with Enhanced Layout -->
411
- <div class="container mt-4">
412
- <div class="research-card">
413
- <h3><i class="bi bi-geo-alt-fill"></i> Study Area and Data Collection</h3>
414
- <p>Field experiments were conducted at the ICAR–Indian Institute of Wheat and Barley Research (ICAR-IIWBR), Karnal, Haryana, India. Three wheat varieties (DBW-187, PBW-826, and HD-3086) were cultivated under eight nitrogen fertilizer treatments ranging from 0 to 210 kg ha⁻¹ at 30 kg increments. The experimental layout consisted of 72 plots, with 24 plots allocated per variety, systematically arranged to ensure uniform agronomic management and reliable nitrogen variability. Environmental parameters, including air temperature and soil temperature, were recorded throughout the growing season using a weather station installed at ICAR–Central Soil Salinity Research Institute (ICAR-CSSRI), Karnal.</p>
415
-
416
- <!-- Two separate boxes for Traditional vs AI -->
417
- <div class="row mt-4">
418
- <div class="col-md-6">
419
- <div class="methodology-box">
420
- <h5><i class="bi bi-check-circle-fill text-success"></i> Traditional Approach</h5>
421
- <p><strong>Traditional Methods:</strong> Kjeldahl analysis, SPAD meters, and NDVI are labor-intensive, time-consuming, and limited in scalability for real-time field monitoring.</p>
422
- </div>
423
- </div>
424
- <div class="col-md-6">
425
- <div class="methodology-box">
426
- <h5><i class="bi bi-check-circle-fill text-success"></i> Artificial Intelligence (AI) Approach</h5>
427
- <p><strong>AI Approach:</strong> Deep learning offers automated, non-destructive, and real-time nitrogen estimation through advanced computer vision techniques, enabling rapid field-scale analysis without specialized equipment.</p>
428
- </div>
429
- </div>
430
- </div>
431
-
432
- <!-- Separate Fusion Benefits Box -->
433
- <div class="fusion-box mt-4">
434
- <h5><i class="bi bi-stars text-success"></i> Why Multimodal Fusion?</h5>
435
- <p><strong>Image-Only Models:</strong> Limited by visual symptoms that may appear only after significant nitrogen stress has already occurred.</p>
436
- <p class="mt-2"><strong>Multimodal Advantage:</strong> By combining RGB imagery with agronomic data (fertilizer levels, days after sowing, temperature), our model learns cross-modal relationships, correlating early visual symptoms with agronomic context for superior accuracy.</p>
437
- </div>
438
-
439
- <div class="text-center mt-4">
440
- <a href="/estimation" class="btn-estimate-home">
441
- <i class="bi bi-graph-up-arrow"></i> Try Nitrogen Estimation Now
442
- </a>
443
- <p class="mt-2 text-muted">Upload wheat leaf image and get instant nitrogen analysis</p>
444
- </div>
445
- </div>
446
- </div>
447
-
448
- <!-- Footer -->
449
- <div class="container">
450
- <div class="footer">
451
- <i class="bi bi-flower1"></i>
452
- Developed at ICAR-Indian Agricultural Statistics Research Institute, New Delhi, in collaboration with ICAR-Indian Institute of Wheat and Barley Research (IIWBR), Karnal, Haryana
453
- <i class="bi bi-flower1"></i>
454
- <br>
455
- <small class="text-muted">© 2026 NitroSense AI - ICAR-IASRI | All Rights Reserved</small>
456
- </div>
457
- </div>
458
-
459
- <!-- Wheat Decoration -->
460
- <div class="wheat-decoration"></div>
461
-
462
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
463
- </body>
464
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/result.html DELETED
@@ -1,271 +0,0 @@
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>NitroSense AI - Results</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <style>
10
- body {
11
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
12
- url('/static/images/wheatleaf.jpg');
13
- background-size: cover;
14
- background-attachment: fixed;
15
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
- }
17
-
18
- .navbar {
19
- background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%) !important;
20
- }
21
-
22
- .nav-link {
23
- color: white !important;
24
- }
25
-
26
- .result-card {
27
- background: rgba(255, 255, 255, 0.95);
28
- border-radius: 20px;
29
- padding: 30px;
30
- margin: 30px 0;
31
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
32
- backdrop-filter: blur(10px);
33
- }
34
-
35
- .result-number {
36
- font-size: 5rem;
37
- font-weight: 800;
38
- color: #1a5f1a;
39
- text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
40
- line-height: 1.2;
41
- }
42
-
43
- .result-unit {
44
- font-size: 1.5rem;
45
- color: #2e7d32;
46
- margin-left: 10px;
47
- }
48
-
49
- .info-card {
50
- background: rgba(248, 249, 250, 0.9);
51
- border-radius: 15px;
52
- padding: 20px;
53
- margin: 10px 0;
54
- border-left: 4px solid #2e7d32;
55
- }
56
-
57
- .badge-custom {
58
- font-size: 1.2rem;
59
- padding: 10px 20px;
60
- border-radius: 50px;
61
- }
62
-
63
- .badge-warning { background: #ffc107; color: #000; }
64
- .badge-success { background: #28a745; color: #fff; }
65
- .badge-danger { background: #dc3545; color: #fff; }
66
-
67
- .footer {
68
- text-align: center;
69
- padding: 20px;
70
- color: #1a5f1a;
71
- background: rgba(255, 255, 255, 0.9);
72
- border-radius: 15px;
73
- margin-top: 30px;
74
- }
75
- </style>
76
- </head>
77
- <body>
78
- <!-- Navigation Bar -->
79
-
80
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
81
- <div class="container-fluid px-4">
82
- <!-- Left side: ICAR logo - flush left -->
83
- <div class="d-flex align-items-center" style="margin-right: auto;">
84
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
85
- </div>
86
-
87
- <!-- Center: NitroSense AI - slightly left of center to avoid overlap with Home button -->
88
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
89
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
90
- <i class="bi bi-tree-fill"></i> NitroSense AI
91
- </a>
92
- </div>
93
-
94
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
95
- <span class="navbar-toggler-icon"></span>
96
- </button>
97
-
98
- <div class="collapse navbar-collapse" id="navbarNav">
99
- <!-- Navigation links - positioned on far right with reduced spacing -->
100
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
101
- <li class="nav-item">
102
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
103
- <i class="bi bi-house-door-fill"></i> Home
104
- </a>
105
- </li>
106
- <li class="nav-item">
107
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
108
- <i class="bi bi-calculator-fill"></i> Estimation
109
- </a>
110
- </li>
111
- <li class="nav-item">
112
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
113
- <i class="bi bi-info-circle-fill"></i> About
114
- </a>
115
- </li>
116
- <li class="nav-item">
117
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
118
- <i class="bi bi-people-fill"></i> Team
119
- </a>
120
- </li>
121
- <li class="nav-item">
122
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
123
- <i class="bi bi-gear-fill"></i> How It Works
124
- </a>
125
- </li>
126
- <li class="nav-item">
127
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
128
- <i class="bi bi-envelope-fill"></i> Contact
129
- </a>
130
- </li>
131
- </ul>
132
-
133
- <!-- Right side: IASRI logo - flush right with buttons to its left -->
134
- <div class="d-flex align-items-center">
135
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
136
- </div>
137
- </div>
138
- </div>
139
- </nav>
140
-
141
- <!-- Responsive CSS for mobile -->
142
- <style>
143
- @media (max-width: 1200px) {
144
- .position-absolute {
145
- left: 44% !important;
146
- }
147
- .navbar-brand {
148
- font-size: 1.8rem !important;
149
- }
150
- .navbar-nav {
151
- gap: 0px !important;
152
- }
153
- .nav-link {
154
- padding: 6px 5px !important;
155
- font-size: 0.85rem;
156
- }
157
- }
158
-
159
- @media (max-width: 991px) {
160
- .position-absolute {
161
- position: relative !important;
162
- left: auto !important;
163
- transform: none !important;
164
- margin: 10px 0;
165
- text-align: center;
166
- width: 100%;
167
- }
168
- .navbar .container-fluid {
169
- flex-wrap: wrap;
170
- }
171
- .navbar-nav {
172
- margin: 10px 0 !important;
173
- justify-content: center;
174
- width: 100%;
175
- gap: 2px !important;
176
- }
177
- .navbar-nav .nav-item {
178
- text-align: center;
179
- }
180
- .d-flex.align-items-center {
181
- margin: 5px auto !important;
182
- justify-content: center;
183
- width: 100%;
184
- }
185
- img[alt="ICAR"], img[alt="IASRI"] {
186
- height: 50px !important;
187
- }
188
- }
189
-
190
- @media (min-width: 992px) {
191
- .navbar-nav {
192
- margin-left: auto !important;
193
- margin-right: 20px !important;
194
- }
195
- .nav-link {
196
- padding: 8px 5px !important;
197
- font-size: 0.95rem;
198
- }
199
- }
200
- </style>
201
-
202
-
203
- <div class="container mt-5">
204
- <div class="row">
205
- <div class="col-lg-8 mx-auto">
206
- <div class="result-card">
207
- {% if result %}
208
- <div class="text-center mb-4">
209
- <h2 class="text-success">Estimated Nitrogen Content</h2>
210
- <div class="d-flex justify-content-center align-items-baseline">
211
- <span class="result-number">{{ result.nitrogen_content }}</span>
212
- <span class="result-unit">%</span>
213
- </div>
214
-
215
- {% if result.classification %}
216
- <div class="mt-3">
217
- <span class="badge-custom badge-{{ result.classification.color }}">
218
- {{ result.classification.message }}
219
- </span>
220
- </div>
221
- <p class="mt-3"><strong>Recommendation:</strong> {{ result.classification.action }}</p>
222
- {% endif %}
223
-
224
- <hr class="my-4">
225
-
226
- <div class="row">
227
- <div class="col-md-6">
228
- <div class="info-card">
229
- <i class="bi bi-droplet-half text-success fs-3"></i>
230
- <h5>Fertilizer Applied</h5>
231
- <p class="h4">{{ result.fertilizer_applied }} kg/ha</p>
232
- </div>
233
- </div>
234
- <div class="col-md-6">
235
- <div class="info-card">
236
- <i class="bi bi-calendar-check text-success fs-3"></i>
237
- <h5>Days After Sowing</h5>
238
- <p class="h4">{{ result.days }} days</p>
239
- </div>
240
- </div>
241
- </div>
242
- </div>
243
-
244
- {% else %}
245
- <div class="text-center">
246
- <i class="bi bi-exclamation-triangle-fill text-warning" style="font-size: 4rem;"></i>
247
- <h3 class="mt-3">No Result Found</h3>
248
- <p>Please complete the estimation process first.</p>
249
- </div>
250
- {% endif %}
251
-
252
- <div class="text-center mt-4">
253
- <a href="/estimation" class="btn btn-success btn-lg">
254
- <i class="bi bi-arrow-repeat"></i> Analyze Another Sample
255
- </a>
256
- </div>
257
- </div>
258
- </div>
259
- </div>
260
- </div>
261
-
262
- <!-- Footer -->
263
- <div class="container">
264
- <div class="footer">
265
- <i class="bi bi-flower1"></i> ICAR-Indian Agricultural Statistics Research Institute (IASRI) <i class="bi bi-flower1"></i>
266
- </div>
267
- </div>
268
-
269
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
270
- </body>
271
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/team.html DELETED
@@ -1,393 +0,0 @@
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>NitroSense AI - Our Team</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
9
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
- <style>
11
- body {
12
- font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
- background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
14
- url('/static/images/wheatleaf.jpg');
15
- background-size: cover;
16
- background-position: center;
17
- background-attachment: fixed;
18
- }
19
-
20
- .navbar {
21
- background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%) !important;
22
- }
23
-
24
- .nav-link {
25
- color: white !important;
26
- font-weight: 500;
27
- margin: 0 10px;
28
- padding: 8px 15px !important;
29
- border-radius: 25px;
30
- }
31
-
32
- .nav-link:hover {
33
- background: rgba(255, 255, 255, 0.2);
34
- }
35
-
36
- .content-card {
37
- border: none;
38
- border-radius: 20px;
39
- overflow: hidden;
40
- box-shadow: 0 20px 50px rgba(0,0,0,0.2);
41
- background: rgba(255, 255, 255, 0.95);
42
- margin: 30px 0;
43
- backdrop-filter: blur(10px);
44
- }
45
-
46
- .card-header {
47
- background: linear-gradient(135deg, #2e7d32 0%, #1a5f1a 100%);
48
- color: white;
49
- padding: 1.5rem;
50
- border: none;
51
- }
52
-
53
- .team-member {
54
- text-align: center;
55
- padding: 25px;
56
- background: rgba(248, 249, 250, 0.9);
57
- border-radius: 15px;
58
- margin: 15px 0;
59
- transition: transform 0.3s;
60
- border: 1px solid rgba(46, 125, 50, 0.2);
61
- height: 100%;
62
- }
63
-
64
- .team-member:hover {
65
- transform: translateY(-10px);
66
- box-shadow: 0 10px 30px rgba(46, 125, 50, 0.2);
67
- }
68
-
69
- .team-member img {
70
- width: 150px;
71
- height: 150px;
72
- border-radius: 50%;
73
- object-fit: cover;
74
- border: 4px solid #2e7d32;
75
- margin-bottom: 15px;
76
- box-shadow: 0 5px 15px rgba(0,0,0,0.2);
77
- }
78
-
79
- .team-member h4 {
80
- color: #1a5f1a;
81
- font-weight: 600;
82
- margin-bottom: 5px;
83
- }
84
-
85
- .team-member .designation {
86
- color: #2e7d32;
87
- font-weight: 500;
88
- font-size: 0.95rem;
89
- margin-bottom: 5px;
90
- }
91
-
92
- .team-member .institute {
93
- color: #666;
94
- font-size: 0.9rem;
95
- margin-bottom: 10px;
96
- }
97
-
98
- .team-member .email {
99
- color: #2e7d32;
100
- font-size: 0.9rem;
101
- margin-bottom: 10px;
102
- font-family: monospace;
103
- background: rgba(46, 125, 50, 0.1);
104
- padding: 5px 10px;
105
- border-radius: 20px;
106
- display: inline-block;
107
- }
108
-
109
- .contributors-badge {
110
- text-align: center;
111
- margin: 30px 0 20px;
112
- padding: 20px;
113
- background: linear-gradient(135deg, rgba(46, 125, 50, 0.1) 0%, rgba(26, 95, 26, 0.1) 100%);
114
- border-radius: 50px;
115
- border: 2px dashed #2e7d32;
116
- }
117
-
118
- .contributors-badge h3 {
119
- color: #1a5f1a;
120
- font-weight: 700;
121
- font-size: 2rem;
122
- margin-bottom: 10px;
123
- }
124
-
125
- .contributors-badge p {
126
- color: #2e7d32;
127
- font-size: 1.2rem;
128
- font-style: italic;
129
- }
130
-
131
- .footer {
132
- text-align: center;
133
- padding: 20px;
134
- color: #1a5f1a;
135
- font-weight: 500;
136
- margin-top: 30px;
137
- background: rgba(255, 255, 255, 0.9);
138
- border-radius: 15px;
139
- }
140
- </style>
141
- </head>
142
- <body>
143
- <!-- Navigation Bar -->
144
-
145
- <nav class="navbar navbar-dark navbar-expand-lg" style="padding: 10px 0; background: linear-gradient(135deg, #1a5f1a 0%, #2e7d32 100%);">
146
- <div class="container-fluid px-4">
147
- <!-- Left side: ICAR logo - flush left -->
148
- <div class="d-flex align-items-center" style="margin-right: auto;">
149
- <img src="/static/images/icar.png" alt="ICAR" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
150
- </div>
151
-
152
- <!-- Center: NitroSense AI - slightly left of center to avoid overlap with Home button -->
153
- <div class="position-absolute" style="left: 45%; transform: translateX(-50%);">
154
- <a class="navbar-brand" href="/" style="font-size: 2.2rem; font-weight: 700; white-space: nowrap; color: white; text-decoration: none;">
155
- <i class="bi bi-tree-fill"></i> NitroSense AI
156
- </a>
157
- </div>
158
-
159
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" style="border: none;">
160
- <span class="navbar-toggler-icon"></span>
161
- </button>
162
-
163
- <div class="collapse navbar-collapse" id="navbarNav">
164
- <!-- Navigation links - positioned on far right with reduced spacing -->
165
- <ul class="navbar-nav ms-auto" style="gap: 0px; margin-right: 20px;">
166
- <li class="nav-item">
167
- <a class="nav-link" href="/" style="color: white; font-weight: 500; padding: 8px 8px;">
168
- <i class="bi bi-house-door-fill"></i> Home
169
- </a>
170
- </li>
171
- <li class="nav-item">
172
- <a class="nav-link" href="/estimation" style="color: white; font-weight: 500; padding: 8px 8px;">
173
- <i class="bi bi-calculator-fill"></i> Estimation
174
- </a>
175
- </li>
176
- <li class="nav-item">
177
- <a class="nav-link" href="/about" style="color: white; font-weight: 500; padding: 8px 8px;">
178
- <i class="bi bi-info-circle-fill"></i> About
179
- </a>
180
- </li>
181
- <li class="nav-item">
182
- <a class="nav-link" href="/team" style="color: white; font-weight: 500; padding: 8px 8px;">
183
- <i class="bi bi-people-fill"></i> Team
184
- </a>
185
- </li>
186
- <li class="nav-item">
187
- <a class="nav-link" href="/how-it-works" style="color: white; font-weight: 500; padding: 8px 8px;">
188
- <i class="bi bi-gear-fill"></i> How It Works
189
- </a>
190
- </li>
191
- <li class="nav-item">
192
- <a class="nav-link" href="/contact" style="color: white; font-weight: 500; padding: 8px 8px;">
193
- <i class="bi bi-envelope-fill"></i> Contact
194
- </a>
195
- </li>
196
- </ul>
197
-
198
- <!-- Right side: IASRI logo - flush right with buttons to its left -->
199
- <div class="d-flex align-items-center">
200
- <img src="/static/images/iasri.jfif" alt="IASRI" style="height: 70px; width: auto; max-width: 140px; object-fit: contain;">
201
- </div>
202
- </div>
203
- </div>
204
- </nav>
205
-
206
- <!-- Responsive CSS for mobile -->
207
- <style>
208
- @media (max-width: 1200px) {
209
- .position-absolute {
210
- left: 44% !important;
211
- }
212
- .navbar-brand {
213
- font-size: 1.8rem !important;
214
- }
215
- .navbar-nav {
216
- gap: 0px !important;
217
- }
218
- .nav-link {
219
- padding: 6px 5px !important;
220
- font-size: 0.85rem;
221
- }
222
- }
223
-
224
- @media (max-width: 991px) {
225
- .position-absolute {
226
- position: relative !important;
227
- left: auto !important;
228
- transform: none !important;
229
- margin: 10px 0;
230
- text-align: center;
231
- width: 100%;
232
- }
233
- .navbar .container-fluid {
234
- flex-wrap: wrap;
235
- }
236
- .navbar-nav {
237
- margin: 10px 0 !important;
238
- justify-content: center;
239
- width: 100%;
240
- gap: 2px !important;
241
- }
242
- .navbar-nav .nav-item {
243
- text-align: center;
244
- }
245
- .d-flex.align-items-center {
246
- margin: 5px auto !important;
247
- justify-content: center;
248
- width: 100%;
249
- }
250
- img[alt="ICAR"], img[alt="IASRI"] {
251
- height: 50px !important;
252
- }
253
- }
254
-
255
- @media (min-width: 992px) {
256
- .navbar-nav {
257
- margin-left: auto !important;
258
- margin-right: 20px !important;
259
- }
260
- .nav-link {
261
- padding: 8px 5px !important;
262
- font-size: 0.95rem;
263
- }
264
- }
265
- </style>
266
-
267
-
268
- <div class="container mt-5">
269
- <div class="row">
270
- <div class="col-lg-12">
271
- <div class="content-card">
272
- <div class="card-header">
273
- <h2><i class="bi bi-people-fill"></i> Our Research Team</h2>
274
- <p class="mb-0 mt-2">Meet the dedicated researchers behind NitroSense AI</p>
275
- </div>
276
- <div class="card-body p-5">
277
-
278
- <!-- Contributors Badge -->
279
- <div class="contributors-badge">
280
- <h3><i class="bi bi-award-fill text-success"></i> All Contributors</h3>
281
- <p>A dedicated team of researchers, scientists, and scholars working together to revolutionize wheat nitrogen management through AI</p>
282
- </div>
283
-
284
- <!-- Team Members Grid -->
285
- <div class="row">
286
- <!-- 1. Bharath Kumar N -->
287
- <div class="col-md-4">
288
- <div class="team-member">
289
- <img src="/static/images/team/bharath.jpg" alt="Mr. Bharath Kumar N">
290
- <h4>Mr. Bharath Kumar N</h4>
291
- <div class="designation">Ph.D Scholar</div>
292
- <div class="institute">Division of Computer Application, ICAR-IASRI, New Delhi</div>
293
- <div class="email"><i class="bi bi-envelope-fill"></i> bharath@gmail.com</div>
294
- </div>
295
- </div>
296
-
297
- <!-- 2. Dr. K K Chaturvedi -->
298
- <div class="col-md-4">
299
- <div class="team-member">
300
- <img src="/static/images/team/chaturvedi.jfif" alt="Dr. K K Chaturvedi">
301
- <h4>Dr. K K Chaturvedi</h4>
302
- <div class="designation">Principal Scientist</div>
303
- <div class="institute">Division of Computer Application, ICAR-IASRI, New Delhi</div>
304
- <div class="email"><i class="bi bi-envelope-fill"></i> chaturvedi12@gmail.com</div>
305
- </div>
306
- </div>
307
-
308
- <!-- 3. Dr. Anu Sharma -->
309
- <div class="col-md-4">
310
- <div class="team-member">
311
- <img src="/static/images/team/anu.jfif" alt="Dr. Anu Sharma">
312
- <h4>Dr. Anu Sharma</h4>
313
- <div class="designation">Senior Scientist</div>
314
- <div class="institute">Division of Computer Application, ICAR-IASRI, New Delhi</div>
315
- <div class="email"><i class="bi bi-envelope-fill"></i> sharma23@gmail.com</div>
316
- </div>
317
- </div>
318
-
319
- <!-- 4. Dr. Samir Farooqi -->
320
- <div class="col-md-4">
321
- <div class="team-member">
322
- <img src="/static/images/team/farooqi.jfif" alt="Dr. Samir Farooqi">
323
- <h4>Dr. Samir Farooqi</h4>
324
- <div class="designation">Principal Scientist</div>
325
- <div class="institute">Division of Computer Application, ICAR-IASRI, New Delhi</div>
326
- <div class="email"><i class="bi bi-envelope-fill"></i> farooqi34@gmail.com</div>
327
- </div>
328
- </div>
329
-
330
- <!-- 5. Dr. S B Lal -->
331
- <div class="col-md-4">
332
- <div class="team-member">
333
- <img src="/static/images/team/lal.jfif" alt="Dr. S B Lal">
334
- <h4>Dr. S B Lal</h4>
335
- <div class="designation">Principal Scientist</div>
336
- <div class="institute">Division of Computer Application, ICAR-IASRI, New Delhi</div>
337
- <div class="email"><i class="bi bi-envelope-fill"></i> lal56@gmail.com</div>
338
- </div>
339
- </div>
340
-
341
- <!-- 6. Dr. Rajeev Ranjan -->
342
- <div class="col-md-4">
343
- <div class="team-member">
344
- <img src="/static/images/team/rajeev.jfif" alt="Dr. Rajeev Ranjan">
345
- <h4>Dr. Rajeev Ranjan</h4>
346
- <div class="designation">Scientist</div>
347
- <div class="institute">Division of Computer Application, ICAR-IASRI, New Delhi</div>
348
- <div class="email"><i class="bi bi-envelope-fill"></i> rajeev67@gmail.com</div>
349
- </div>
350
- </div>
351
-
352
- <!-- 7. Dr. Sanjeev Kumar -->
353
- <div class="col-md-4">
354
- <div class="team-member">
355
- <img src="/static/images/team/sanjeev.jfif" alt="Dr. Sanjeev Kumar">
356
- <h4>Dr. Sanjeev Kumar</h4>
357
- <div class="designation">Senior Scientist</div>
358
- <div class="institute">Department of Agricultural Bioinformatics, ICAR-IASRI, New Delhi</div>
359
- <div class="email"><i class="bi bi-envelope-fill"></i> sanjeev90@gmail.com</div>
360
- </div>
361
- </div>
362
-
363
- <!-- 8. Dr. Rajeev Ranjan Kumar -->
364
- <div class="col-md-4">
365
- <div class="team-member">
366
- <img src="/static/images/team/rajeevphysics.jfif" alt="Dr. Rajeev Ranjan Kumar">
367
- <h4>Dr. Rajeev Ranjan Kumar</h4>
368
- <div class="designation">Senior Scientist</div>
369
- <div class="institute">Department of Agricultural Physics, ICAR-IARI, New Delhi</div>
370
- <div class="email"><i class="bi bi-envelope-fill"></i> ranjan56@gmail.com</div>
371
- </div>
372
- </div>
373
- </div>
374
-
375
- <!-- Collaboration Note -->
376
- <div class="alert alert-success mt-5 text-center">
377
- <i class="bi bi-award-fill"></i>
378
- <strong>In collaboration with:</strong> ICAR-Indian Institute of Wheat and Barley Research (IIWBR), Karnal
379
- </div>
380
- </div>
381
- </div>
382
- </div>
383
- </div>
384
- </div>
385
-
386
- <!-- Footer -->
387
- <div class="container">
388
- <div class="footer">
389
- <i class="bi bi-flower1"></i> ICAR-Indian Agricultural Statistics Research Institute (IASRI) <i class="bi bi-flower1"></i>
390
- </div>
391
- </div>
392
- </body>
393
- </html>