sikeaditya commited on
Commit
6c386e5
·
verified ·
1 Parent(s): e5afd23

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -640
index.html DELETED
@@ -1,640 +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>कृषी बाजार विश्लेषण | Crop Market Analysis</title>
7
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
9
- <style>
10
- :root {
11
- --primary-color: #4CAF50;
12
- --secondary-color: #45a049;
13
- --background-color: #f9f9f9;
14
- --text-color: #333;
15
- --card-shadow: 0 2px 4px rgba(0,0,0,0.1);
16
- --border-radius: 8px;
17
- }
18
-
19
- body {
20
- background-color: var(--background-color);
21
- color: var(--text-color);
22
- font-family: 'Arial', sans-serif;
23
- line-height: 1.6;
24
- }
25
-
26
- .container {
27
- max-width: 1200px;
28
- margin: 0 auto;
29
- padding: 20px;
30
- }
31
-
32
- .header {
33
- text-align: center;
34
- margin-bottom: 30px;
35
- padding: 20px 0;
36
- }
37
-
38
- .header h1 {
39
- color: var(--primary-color);
40
- font-weight: bold;
41
- margin: 0;
42
- font-size: 2.5rem;
43
- }
44
-
45
- .language-toggle {
46
- position: fixed;
47
- top: 20px;
48
- right: 20px;
49
- z-index: 1000;
50
- }
51
-
52
- .form-section {
53
- background: white;
54
- padding: 25px;
55
- border-radius: var(--border-radius);
56
- box-shadow: var(--card-shadow);
57
- margin-bottom: 30px;
58
- }
59
-
60
- .chart-container {
61
- background: white;
62
- padding: 25px;
63
- border-radius: var(--border-radius);
64
- box-shadow: var(--card-shadow);
65
- margin-bottom: 30px;
66
- }
67
-
68
- .insights-container {
69
- background: white;
70
- padding: 25px;
71
- border-radius: var(--border-radius);
72
- box-shadow: var(--card-shadow);
73
- margin-bottom: 30px;
74
- border-left: 5px solid var(--primary-color);
75
- }
76
-
77
- .insights-container h3 {
78
- color: var(--primary-color);
79
- margin-bottom: 20px;
80
- }
81
-
82
- .loading {
83
- display: none;
84
- text-align: center;
85
- padding: 20px;
86
- background: rgba(255, 255, 255, 0.9);
87
- position: fixed;
88
- top: 50%;
89
- left: 50%;
90
- transform: translate(-50%, -50%);
91
- border-radius: var(--border-radius);
92
- box-shadow: var(--card-shadow);
93
- z-index: 1000;
94
- }
95
-
96
- .btn-custom {
97
- background-color: var(--primary-color);
98
- color: white;
99
- border: none;
100
- padding: 8px 16px;
101
- border-radius: 4px;
102
- transition: background-color 0.3s ease;
103
- }
104
-
105
- .btn-custom:hover {
106
- background-color: var(--secondary-color);
107
- color: white;
108
- }
109
-
110
- .form-control {
111
- border-radius: 4px;
112
- border: 1px solid #ddd;
113
- padding: 8px 12px;
114
- height: auto;
115
- }
116
-
117
- .form-control:focus {
118
- border-color: var(--primary-color);
119
- box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
120
- }
121
-
122
- label {
123
- font-weight: 500;
124
- margin-bottom: 8px;
125
- color: var(--text-color);
126
- }
127
-
128
- #barChart, #lineChart, #boxChart {
129
- width: 100%;
130
- margin-bottom: 20px;
131
- }
132
-
133
- #aiInsights {
134
- line-height: 1.8;
135
- font-size: 1.1rem;
136
- }
137
-
138
- .alert {
139
- border-radius: var(--border-radius);
140
- padding: 15px 20px;
141
- margin-bottom: 20px;
142
- }
143
-
144
- .spinner-border {
145
- width: 3rem;
146
- height: 3rem;
147
- color: var(--primary-color);
148
- }
149
- #marketData {
150
- height: 100px; /* Set the height to a fixed value */
151
- overflow-y:scroll; /* Add vertical scrolling */
152
- }
153
- .insights-container {
154
- background: white;
155
- padding: 25px;
156
- border-radius: 8px;
157
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
158
- margin-bottom: 30px;
159
- }
160
-
161
- .insights-header {
162
- background: #4CAF50;
163
- color: white;
164
- padding: 15px 20px;
165
- border-radius: 8px 8px 0 0;
166
- margin: -25px -25px 20px -25px;
167
- }
168
-
169
- .insights-header h3 {
170
- margin: 0;
171
- color: white;
172
- }
173
-
174
- .insight-section {
175
- background: #f8f9fa;
176
- border-radius: 8px;
177
- padding: 20px;
178
- margin-bottom: 20px;
179
- border-left: 4px solid #4CAF50;
180
- }
181
-
182
- .insight-section h4 {
183
- color: #2E7D32;
184
- margin-bottom: 15px;
185
- font-size: 1.2rem;
186
- font-weight: bold;
187
- }
188
-
189
- .insight-card {
190
- background: white;
191
- border-radius: 6px;
192
- padding: 15px;
193
- margin-bottom: 15px;
194
- box-shadow: 0 1px 3px rgba(0,0,0,0.1);
195
- }
196
-
197
- .insight-card h5 {
198
- color: #1B5E20;
199
- margin-bottom: 10px;
200
- font-size: 1.1rem;
201
- }
202
-
203
- .insight-list {
204
- list-style: none;
205
- padding-left: 0;
206
- margin-bottom: 0;
207
- }
208
-
209
- .insight-list li {
210
- position: relative;
211
- padding-left: 20px;
212
- margin-bottom: 8px;
213
- line-height: 1.5;
214
- }
215
-
216
- .insight-list li:before {
217
- content: "•";
218
- color: #4CAF50;
219
- font-size: 1.2em;
220
- position: absolute;
221
- left: 0;
222
- top: -2px;
223
- }
224
-
225
- .price-highlight {
226
- color: #2E7D32;
227
- font-weight: bold;
228
- }
229
-
230
- .percentage-up {
231
- color: #2E7D32;
232
- font-weight: bold;
233
- }
234
-
235
- .percentage-down {
236
- color: #c62828;
237
- font-weight: bold;
238
- }
239
-
240
- .action-box {
241
- background: #E8F5E9;
242
- border-radius: 6px;
243
- padding: 15px;
244
- margin-top: 20px;
245
- border: 1px dashed #4CAF50;
246
- }
247
-
248
- .action-box h5 {
249
- color: #2E7D32;
250
- margin-bottom: 10px;
251
- font-size: 1.1rem;
252
- }
253
-
254
- .action-list {
255
- list-style: none;
256
- padding-left: 0;
257
- margin-bottom: 0;
258
- }
259
-
260
- .action-list li {
261
- position: relative;
262
- padding-left: 25px;
263
- margin-bottom: 8px;
264
- line-height: 1.5;
265
- }
266
-
267
- .action-list li:before {
268
- content: "✓";
269
- color: #4CAF50;
270
- position: absolute;
271
- left: 0;
272
- font-weight: bold;
273
- }
274
-
275
- /* Responsive adjustments */
276
- @media (max-width: 768px) {
277
- .insights-container {
278
- padding: 15px;
279
- }
280
-
281
- .insights-header {
282
- padding: 12px 15px;
283
- margin: -15px -15px 15px -15px;
284
- }
285
-
286
- .insight-section {
287
- padding: 15px;
288
- }
289
- }
290
- @media (max-width: 768px) {
291
- .container {
292
- padding: 10px;
293
- }
294
-
295
- .header h1 {
296
- font-size: 2rem;
297
- }
298
-
299
- .form-row {
300
- flex-direction: column;
301
- }
302
-
303
- .form-group {
304
- margin-bottom: 15px;
305
- }
306
-
307
- .language-toggle {
308
- position: static;
309
- text-align: center;
310
- margin-bottom: 20px;
311
- }
312
-
313
- .btn-custom {
314
- width: 100%;
315
- }
316
-
317
- .insights-container {
318
- padding: 15px;
319
- }
320
-
321
- #aiInsights {
322
- font-size: 1rem;
323
- }
324
- }
325
- select {
326
- max-height: 200px; /* Adjust height as needed */
327
- overflow-y: auto;
328
- }
329
-
330
- </style>
331
- </head>
332
- <body>
333
- <div class="language-toggle">
334
- <button class="btn btn-custom" onclick="toggleLanguage()" id="langToggle">
335
- भाषा बदला | Change Language
336
- </button>
337
- </div>
338
-
339
- <div class="container">
340
- <div class="header">
341
- <h1 class="en">Crop Market Analysis</h1>
342
- <h1 class="mr" style="display:none;">कृषी बाजार विश्लेषण</h1>
343
- </div>
344
-
345
- <div class="form-section">
346
- <form id="filterForm">
347
- <div class="form-row">
348
- <div class="form-group col-md-3">
349
- <label for="state" class="label-state">State</label>
350
- <select class="form-control" id="state" name="state">
351
- <option value="">Select State</option>
352
- {% for state in states %}
353
- <option value="{{ state }}">{{ state }}</option>
354
- {% endfor %}
355
- </select>
356
- </div>
357
- <div class="form-group col-md-3">
358
- <label for="district" class="label-district">District</label>
359
- <select class="form-control" id="district" name="district" disabled>
360
- <option value="">Select District</option>
361
- </select>
362
- </div>
363
- <div class="form-group col-md-3">
364
- <label for="market" class="label-market">Market</label>
365
- <select class="form-control" id="market" name="market" disabled>
366
- <option value="">Select Market</option>
367
- </select>
368
- </div>
369
- <div class="form-group col-md-3">
370
- <label for="commodity" class="label-commodity">Commodity</label>
371
- <select class="form-control" id="commodity" name="commodity" disabled>
372
- <option value="">Select Commodity</option>
373
- </select>
374
- </div>
375
- </div>
376
- </form>
377
- </div>
378
-
379
- <div class="loading" id="loadingIndicator">
380
- <div class="spinner-border" role="status">
381
- <span class="sr-only">Loading...</span>
382
- </div>
383
- </div>
384
-
385
- <div class="chart-container">
386
- <div id="barChart"></div>
387
- <div id="lineChart"></div>
388
- <div id="boxChart"></div>
389
- </div>
390
- <!-- Add this after the chart-container div -->
391
- <div class="market-data-container">
392
- <div class="row">
393
- <div class="col-md-12 mb-4">
394
- <div class="card">
395
- <div class="card-header">
396
- <h4 class="en">Market Statistics</h4>
397
- <h4 class="mr" style="display:none;">बाजार आकडेवारी</h4>
398
- </div>
399
- <div class="card-body">
400
- <div class="row">
401
- <div class="col-md-3">
402
- <div class="stat-item">
403
- <h6 class="en">Total Commodities</h6>
404
- <h6 class="mr" style="display:none;">एकूण पिके</h6>
405
- <span id="totalCommodities"></span>
406
- </div>
407
- </div>
408
- <div class="col-md-3">
409
- <div class="stat-item">
410
- <h6 class="en">Average Price</h6>
411
- <h6 class="mr" style="display:none;">सरासरी किंमत</h6>
412
- <span id="avgPrice"></span>
413
- </div>
414
- </div>
415
- <div class="col-md-3">
416
- <div class="stat-item">
417
- <h6 class="en">Price Range</h6>
418
- <h6 class="mr" style="display:none;">किंमत श्रेणी</h6>
419
- <span id="priceRange"></span>
420
- </div>
421
- </div>
422
- <div class="col-md-3">
423
- <div class="stat-item">
424
- <h6 class="en">Total Markets</h6>
425
- <h6 class="mr" style="display:none;">एकूण बाजार</h6>
426
- <span id="totalMarkets"></span>
427
- </div>
428
- </div>
429
- </div>
430
- </div>
431
- </div>
432
- </div>
433
- </div>
434
-
435
- <div class="row">
436
- <div class="col-md-6 mb-4">
437
- <div class="card">
438
- <div class="card-header">
439
- <h4 class="en">Top 5 Cheapest Crops</h4>
440
- <h4 class="mr" style="display:none;">सर्वात स्वस्त 5 पिके</h4>
441
- </div>
442
- <div class="card-body" id="cheapestCrops">
443
- </div>
444
- </div>
445
- </div>
446
- <div class="col-md-6 mb-4">
447
- <div class="card">
448
- <div class="card-header">
449
- <h4 class="en">Top 5 Costliest Crops</h4>
450
- <h4 class="mr" style="display:none;">सर्वात महाग 5 पिके</h4>
451
- </div>
452
- <div class="card-body" id="costliestCrops">
453
- </div>
454
- </div>
455
- </div>
456
- </div>
457
-
458
- <div class="card mb-4">
459
- <div class="card-header">
460
- <h4 class="en">Market Data</h4>
461
- <h4 class="mr" style="display:none;">बाजार माहिती</h4>
462
- </div>
463
- <div class="card-body" id="marketData">
464
- </div>
465
- </div>
466
- </div>
467
- <div class="insights-container">
468
- <div id="aiInsights"></div>
469
- </div>
470
- </div>
471
-
472
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
473
- <script>
474
- let currentLang = 'en';
475
-
476
- function updateLabels(translations) {
477
- if (currentLang === 'mr') {
478
- Object.keys(translations).forEach(key => {
479
- $(`.label-${key}`).text(translations[key]);
480
- });
481
- $('.en').hide();
482
- $('.mr').show();
483
- } else {
484
- $('.label-state').text('State');
485
- $('.label-district').text('District');
486
- $('.label-market').text('Market');
487
- $('.label-commodity').text('Commodity');
488
- $('.en').show();
489
- $('.mr').hide();
490
- }
491
- }
492
-
493
- function toggleLanguage() {
494
- currentLang = currentLang === 'en' ? 'mr' : 'en';
495
- $('#langToggle').text(currentLang === 'en' ? 'भाषा बदला | Change Language' : 'भाषा बदला | Change Language');
496
- updateContent();
497
- }
498
-
499
- function showLoading() {
500
- $('#loadingIndicator').show();
501
- }
502
-
503
- function hideLoading() {
504
- $('#loadingIndicator').hide();
505
- }
506
-
507
- function enableSelect(selectId) {
508
- $(`#${selectId}`).prop('disabled', false);
509
- }
510
-
511
- function disableSelect(selectId) {
512
- $(`#${selectId}`).prop('disabled', true);
513
- }
514
-
515
- function updateContent() {
516
- showLoading();
517
- const formData = new FormData($('#filterForm')[0]);
518
- formData.append('language', currentLang);
519
-
520
- $.ajax({
521
- url: '/filter_data',
522
- method: 'POST',
523
- data: formData,
524
- processData: false,
525
- contentType: false,
526
- success: function(response) {
527
- if (response.success) {
528
- // Update plots
529
- if (response.plots.bar) $('#barChart').html(response.plots.bar);
530
- if (response.plots.line) $('#lineChart').html(response.plots.line);
531
- if (response.plots.box) $('#boxChart').html(response.plots.box);
532
-
533
- // Update market statistics
534
- $('#totalCommodities').text(response.market_stats.total_commodities);
535
- $('#avgPrice').text(response.market_stats.avg_modal_price);
536
- $('#priceRange').text(response.market_stats.price_range);
537
- $('#totalMarkets').text(response.market_stats.total_markets);
538
-
539
- // Update tables
540
- $('#marketData').html(response.market_html);
541
- $('#cheapestCrops').html(response.cheapest_html);
542
- $('#costliestCrops').html(response.costliest_html);
543
-
544
- // Only show insights section if state and district are selected
545
- if (response.hasStateDistrict) {
546
- $('.insights-container').show();
547
- $('#aiInsights').html(response.insights);
548
- } else {
549
- $('.insights-container').hide();
550
- $('#aiInsights').html('');
551
- }
552
-
553
- // Update translations
554
- updateLabels(response.translations);
555
- console.log(response.translations);
556
- } else {
557
- const message = currentLang === 'en' ?
558
- 'Please select both state and district to view analysis' :
559
- 'कृपया विश्लेषण पाहण्यासाठी राज्य आणि जिल्हा निवडा';
560
- alert(message);
561
- }
562
- hideLoading();
563
- },
564
- error: function() {
565
- alert(currentLang === 'en' ? 'Error loading data' : 'माहिती लोड करताना त्रुटी');
566
- hideLoading();
567
- }
568
- });
569
- }
570
-
571
- // Cascade dropdowns
572
- $('#state').change(function() {
573
- const state = $(this).val();
574
- // Reset and disable dependent dropdowns
575
- $('#district, #market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
576
-
577
- if (state) {
578
- showLoading();
579
- $.post('/get_districts', { state: state }, function(districts) {
580
- $('#district').html('<option value="">Select District</option>');
581
- districts.forEach(district => {
582
- $('#district').append(`<option value="${district}">${district}</option>`);
583
- });
584
- enableSelect('district');
585
- hideLoading();
586
- });
587
- }
588
- updateContent();
589
- });
590
-
591
- $('#district').change(function() {
592
- const district = $(this).val();
593
- // Reset and disable dependent dropdowns
594
- $('#market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
595
-
596
- if (district) {
597
- showLoading();
598
- $.post('/get_markets', { district: district }, function(markets) {
599
- $('#market').html('<option value="">Select Market</option>');
600
- markets.forEach(market => {
601
- $('#market').append(`<option value="${market}">${market}</option>`);
602
- });
603
- enableSelect('market');
604
- hideLoading();
605
- });
606
- }
607
- updateContent();
608
- });
609
-
610
- $('#market').change(function() {
611
- const market = $(this).val();
612
- // Reset commodity dropdown
613
- $('#commodity').html('<option value="">Select</option>').prop('disabled', true);
614
-
615
- if (market) {
616
- showLoading();
617
- $.post('/get_commodities', { market: market }, function(commodities) {
618
- $('#commodity').html('<option value="">Select Commodity</option>');
619
- commodities.forEach(commodity => {
620
- $('#commodity').append(`<option value="${commodity}">${commodity}</option>`);
621
- });
622
- enableSelect('commodity');
623
- hideLoading();
624
- });
625
- }
626
- updateContent();
627
- });
628
-
629
- $('#commodity').change(function() {
630
- updateContent();
631
- });
632
-
633
- // Initial setup
634
- $(document).ready(function() {
635
- $('.insights-container').hide();
636
- updateContent();
637
- });
638
- </script>
639
- </body>
640
- </html>