Hugging Face's logo

Spaces:
Imanali21
/
h2sim
Running

App Files Community
h2sim
File size: 42,380 Bytes
1712814
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H2Sim – Интерактивный симулятор водородной инфраструктуры на основе биогаза</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }
        .tab-content.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .bg-gradient-h2sim {
            background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
        }
        .btn-hover-effect {
            transition: all 0.3s ease;
            transform: translateY(0);
        }
        .btn-hover-effect:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2);
        }
        .input-field:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }
        .chart-container {
            transition: all 0.5s ease;
        }
        .chat-message {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.5s ease, opacity 0.5s ease;
        }
        .chat-message.active {
            max-height: 500px;
            opacity: 1;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- Header -->
    <header class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-atom text-3xl text-blue-500"></i>
                    <h1 class="text-2xl font-bold text-gray-800">H2Sim</h1>
                </div>
                <nav class="hidden md:flex space-x-6">
                    <button onclick="switchTab('home')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="home">Главная</button>
                    <button onclick="switchTab('calculation')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="calculation">Расчёт водорода</button>
                    <button onclick="switchTab('charts')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="charts">Графики</button>
                    <button onclick="switchTab('about')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="about">О проекте</button>
                    <button onclick="switchTab('contact')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="contact">Связаться с нами</button>
                </nav>
                <button class="md:hidden text-gray-600" id="mobile-menu-btn">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
            </div>
        </div>
        
        <!-- Mobile menu -->
        <div class="md:hidden hidden bg-white shadow-lg rounded-b-lg" id="mobile-menu">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <button onclick="switchTab('home')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="home">Главная</button>
                <button onclick="switchTab('calculation')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="calculation">Расчёт водорода</button>
                <button onclick="switchTab('charts')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="charts">Графики</button>
                <button onclick="switchTab('about')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="about">О проекте</button>
                <button onclick="switchTab('contact')" class="tab-btn px-3 py-2 rounded-lg font-medium hover:bg-gray-100 transition" data-tab="contact">Связаться с нами</button>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8">
        <!-- Home Tab -->
        <div id="home" class="tab-content active">
            <section class="max-w-4xl mx-auto text-center">
                <div class="bg-gradient-h2sim text-white rounded-2xl p-8 mb-8 shadow-xl">
                    <h2 class="text-4xl font-bold mb-4">H2Sim</h2>
                    <p class="text-xl mb-6">Интерактивный симулятор водородной инфраструктуры на основе биогаза</p>
                    <p class="text-lg mb-8">Исследуйте потенциал производства водорода из биологических отходов с помощью нашего симулятора. Оптимизируйте параметры процесса и визуализируйте результаты в реальном времени.</p>
                    <button onclick="switchTab('calculation')" class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full btn-hover-effect shadow-lg">
                        Перейти к расчётам <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </div>
                
                <div class="grid md:grid-cols-3 gap-6 mt-12">
                    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
                        <div class="text-blue-500 mb-4">
                            <i class="fas fa-calculator text-4xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Точные расчёты</h3>
                        <p class="text-gray-600">На основе научных моделей и эмпирических данных</p>
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
                        <div class="text-green-500 mb-4">
                            <i class="fas fa-chart-line text-4xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Визуализация</h3>
                        <p class="text-gray-600">Интерактивные графики для анализа результатов</p>
                    </div>
                    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
                        <div class="text-purple-500 mb-4">
                            <i class="fas fa-leaf text-4xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Экологичность</h3>
                        <p class="text-gray-600">Оценка потенциала зелёного водорода</p>
                    </div>
                </div>
            </section>
        </div>

        <!-- Calculation Tab -->
        <div id="calculation" class="tab-content">
            <section class="max-w-4xl mx-auto">
                <h2 class="text-3xl font-bold mb-6 text-center">Расчёт водорода из биогаза</h2>
                
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="grid md:grid-cols-2 gap-0">
                        <!-- Input Form -->
                        <div class="p-8">
                            <form id="calculation-form">
                                <div class="mb-6">
                                    <label for="waste-mass" class="block text-gray-700 font-medium mb-2">Масса отходов (кг/день)</label>
                                    <input type="number" id="waste-mass" class="w-full px-4 py-2 border rounded-lg input-field" placeholder="Введите массу" min="1" required>
                                </div>
                                
                                <div class="mb-6">
                                    <label for="substrate-type" class="block text-gray-700 font-medium mb-2">Тип субстрата</label>
                                    <select id="substrate-type" class="w-full px-4 py-2 border rounded-lg input-field" required>
                                        <option value="" disabled selected>Выберите тип</option>
                                        <option value="manure">Навоз</option>
                                        <option value="food-waste">Пищевые отходы</option>
                                        <option value="grass">Трава</option>
                                        <option value="corn">Кукуруза</option>
                                    </select>
                                </div>
                                
                                <div class="mb-6">
                                    <label for="temperature" class="block text-gray-700 font-medium mb-2">Температура (°C)</label>
                                    <input type="number" id="temperature" class="w-full px-4 py-2 border rounded-lg input-field" placeholder="Введите температуру" min="0" max="100" required>
                                </div>
                                
                                <div class="mb-6">
                                    <label for="humidity" class="block text-gray-700 font-medium mb-2">Влажность (%)</label>
                                    <input type="number" id="humidity" class="w-full px-4 py-2 border rounded-lg input-field" placeholder="Введите влажность" min="0" max="100" required>
                                </div>
                                
                                <div class="mb-8">
                                    <label for="reactor-type" class="block text-gray-700 font-medium mb-2">Тип реактора (опционально)</label>
                                    <select id="reactor-type" class="w-full px-4 py-2 border rounded-lg input-field">
                                        <option value="" selected>Не указано</option>
                                        <option value="cstr">CSTR (Continuous Stirred Tank Reactor)</option>
                                        <option value="uasb">UASB (Upflow Anaerobic Sludge Blanket)</option>
                                        <option value="fixed-bed">Fixed-bed</option>
                                    </select>
                                </div>
                                
                                <button type="button" onclick="calculateResults()" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg btn-hover-effect">
                                    Рассчитать <i class="fas fa-calculator ml-2"></i>
                                </button>
                            </form>
                        </div>
                        
                        <!-- Results -->
                        <div class="bg-gray-50 p-8">
                            <h3 class="text-xl font-bold mb-6 text-gray-700">Результаты расчётов</h3>
                            
                            <div id="results-container" class="space-y-6">
                                <div class="text-center py-12">
                                    <i class="fas fa-calculator text-4xl text-gray-300 mb-4"></i>
                                    <p class="text-gray-500">Введите параметры и нажмите "Рассчитать"</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- Charts Tab -->
        <div id="charts" class="tab-content">
            <section class="max-w-6xl mx-auto">
                <h2 class="text-3xl font-bold mb-6 text-center">Визуализация данных</h2>
                
                <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                    <div class="flex flex-wrap justify-between items-center mb-6">
                        <h3 class="text-xl font-bold text-gray-800">Биогаз vs Водород</h3>
                        <div class="flex space-x-4">
                            <select id="time-period" class="px-4 py-2 border rounded-lg input-field">
                                <option value="daily">Дневные данные</option>
                                <option value="weekly">Недельные данные</option>
                                <option value="monthly">Месячные данные</option>
                            </select>
                            <button onclick="updateChart()" class="bg-blue-600 text-white px-4 py-2 rounded-lg btn-hover-effect">
                                Обновить <i class="fas fa-sync-alt ml-1"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div id="chart-container" class="h-96 chart-container">
                        <!-- Chart will be rendered here -->
                    </div>
                </div>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-xl font-bold mb-4 text-gray-800">Метановая составляющая</h3>
                        <div id="methane-chart" class="h-64">
                            <!-- Methane chart will be rendered here -->
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-xl font-bold mb-4 text-gray-800">Эффективность процесса</h3>
                        <div id="efficiency-chart" class="h-64">
                            <!-- Efficiency chart will be rendered here -->
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- About Tab -->
        <div id="about" class="tab-content">
            <section class="max-w-4xl mx-auto">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="p-8">
                        <h2 class="text-3xl font-bold mb-6">О проекте H2Sim</h2>
                        
                        <div class="prose max-w-none">
                            <h3 class="text-xl font-bold mb-3 text-gray-800">Назначение симулятора</h3>
                            <p class="mb-6 text-gray-700">H2Sim разработан для моделирования процессов производства водорода из биологических отходов через стадию биогаза. Симулятор позволяет оценить потенциал различных типов сырья, оптимизировать параметры процесса и прогнозировать выход водорода.</p>
                            
                            <h3 class="text-xl font-bold mb-3 text-gray-800">Используемые методы</h3>
                            <ul class="mb-6 list-disc pl-5 space-y-2 text-gray-700">
                                <li>Моделирование анаэробного сбраживания на основе уравнений первого порядка</li>
                                <li>Расчёт выхода биогаза с учётом типа субстрата и условий процесса</li>
                                <li>Моделирование парового риформинга метана для получения водорода</li>
                                <li>Анализ чувствительности ключевых параметров процесса</li>
                            </ul>
                            
                            <h3 class="text-xl font-bold mb-3 text-gray-800">Целевая аудитория</h3>
                            <div class="grid md:grid-cols-3 gap-4 mb-8">
                                <div class="bg-blue-50 p-4 rounded-lg">
                                    <h4 class="font-bold mb-2 text-blue-800">Студенты</h4>
                                    <p class="text-sm text-blue-700">Изучение процессов биоэнергетики и водородной экономики</p>
                                </div>
                                <div class="bg-green-50 p-4 rounded-lg">
                                    <h4 class="font-bold mb-2 text-green-800">Стартапы</h4>
                                    <p class="text-sm text-green-700">Оценка технологической и экономической целесообразности проектов</p>
                                </div>
                                <div class="bg-purple-50 p-4 rounded-lg">
                                    <h4 class="font-bold mb-2 text-purple-800">Инвесторы</h4>
                                    <p class="text-sm text-purple-700">Анализ потенциала водородных проектов на основе биогаза</p>
                                </div>
                            </div>
                            
                            <h3 class="text-xl font-bold mb-3 text-gray-800">Технологический стек</h3>
                            <div class="flex flex-wrap gap-2 mb-6">
                                <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">Python</span>
                                <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">Streamlit</span>
                                <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">Pandas</span>
                                <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">Plotly</span>
                                <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">Tailwind CSS</span>
                                <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">JavaScript</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- Contact Tab -->
        <div id="contact" class="tab-content">
            <section class="max-w-4xl mx-auto">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="grid md:grid-cols-2 gap-0">
                        <!-- Contact Form -->
                        <div class="p-8">
                            <h2 class="text-3xl font-bold mb-6">Связаться с нами</h2>
                            
                            <form id="contact-form">
                                <div class="mb-6">
                                    <label for="contact-name" class="block text-gray-700 font-medium mb-2">Ваше имя</label>
                                    <input type="text" id="contact-name" class="w-full px-4 py-2 border rounded-lg input-field" placeholder="Введите ваше имя" required>
                                </div>
                                
                                <div class="mb-6">
                                    <label for="contact-email" class="block text-gray-700 font-medium mb-2">Email</label>
                                    <input type="email" id="contact-email" class="w-full px-4 py-2 border rounded-lg input-field" placeholder="Введите ваш email" required>
                                </div>
                                
                                <div class="mb-6">
                                    <label for="contact-message" class="block text-gray-700 font-medium mb-2">Сообщение</label>
                                    <textarea id="contact-message" rows="4" class="w-full px-4 py-2 border rounded-lg input-field" placeholder="Введите ваше сообщение" required></textarea>
                                </div>
                                
                                <button type="button" onclick="sendContactForm()" class="w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg btn-hover-effect">
                                    Отправить сообщение <i class="fas fa-paper-plane ml-2"></i>
                                </button>
                            </form>
                        </div>
                        
                        <!-- AI Chat -->
                        <div class="bg-gray-50 p-8">
                            <h3 class="text-xl font-bold mb-6 text-gray-700">AI-помощник</h3>
                            <p class="mb-6 text-gray-600">Задайте вопрос нашему ИИ-ассистенту о водородной энергетике, биогазе или работе симулятора.</p>
                            
                            <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                                <div class="flex items-start space-x-3">
                                    <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
                                        <i class="fas fa-robot text-blue-600"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-700">Привет! Я ваш виртуальный помощник. Чем могу помочь?</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="chat-messages" class="max-h-64 overflow-y-auto mb-4 space-y-3">
                                <!-- Chat messages will appear here -->
                            </div>
                            
                            <div class="flex space-x-2">
                                <input type="text" id="chat-input" class="flex-grow px-4 py-2 border rounded-lg input-field" placeholder="Введите ваш вопрос...">
                                <button onclick="sendChatMessage()" class="bg-green-600 text-white px-4 py-2 rounded-lg btn-hover-effect">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                            
                            <div class="mt-8 pt-6 border-t border-gray-200">
                                <h4 class="font-medium mb-2">Контакты</h4>
                                <p class="text-gray-600 mb-1"><i class="fas fa-envelope mr-2"></i> dualforce.project@gmail.com</p>
                                <p class="text-gray-600"><i class="fas fa-globe mr-2"></i> https://h2sim.example.com</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-atom text-2xl text-blue-400"></i>
                        <h2 class="text-xl font-bold">H2Sim</h2>
                    </div>
                    <p class="text-gray-400 mt-2">Интерактивный симулятор водородной инфраструктуры</p>
                </div>
                
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition">
                        <i class="fab fa-linkedin text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
                <p>© 2023 H2Sim Project. Все права защищены.</p>
            </div>
        </div>
    </footer>

    <script>
        // Tab switching functionality
        function switchTab(tabId) {
            // Hide all tab contents
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Show selected tab content
            document.getElementById(tabId).classList.add('active');
            
            // Update active tab button
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('bg-blue-100', 'text-blue-700');
                if (btn.dataset.tab === tabId) {
                    btn.classList.add('bg-blue-100', 'text-blue-700');
                }
            });
            
            // Close mobile menu if open
            document.getElementById('mobile-menu').classList.add('hidden');
            
            // If switching to charts tab, render charts
            if (tabId === 'charts') {
                renderCharts();
            }
        }
        
        // Mobile menu toggle
        document.getElementById('mobile-menu-btn').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            if (menu.classList.contains('hidden')) {
                menu.classList.remove('hidden');
            } else {
                menu.classList.add('hidden');
            }
        });
        
        // Calculation function
        function calculateResults() {
            // Get input values
            const wasteMass = parseFloat(document.getElementById('waste-mass').value);
            const substrateType = document.getElementById('substrate-type').value;
            const temperature = parseFloat(document.getElementById('temperature').value);
            const humidity = parseFloat(document.getElementById('humidity').value);
            const reactorType = document.getElementById('reactor-type').value;
            
            // Validate inputs
            if (isNaN(wasteMass) || isNaN(temperature) || isNaN(humidity) || !substrateType) {
                alert('Пожалуйста, заполните все обязательные поля корректными значениями.');
                return;
            }
            
            // Calculate results based on empirical formulas
            let biogasYield, methaneContent, hydrogenPotential;
            
            // Biogas yield depends on substrate type (m3/kg)
            const substrateFactors = {
                'manure': 0.25,
                'food-waste': 0.35,
                'grass': 0.30,
                'corn': 0.40
            };
            
            // Base biogas yield
            biogasYield = wasteMass * substrateFactors[substrateType];
            
            // Temperature adjustment (optimal around 35-40°C)
            const tempAdjustment = 1 + (0.02 * (Math.min(Math.max(temperature, 20), 40) - 30));
            biogasYield *= tempAdjustment;
            
            // Humidity adjustment (optimal around 70-80%)
            const humidityAdjustment = 1 + (0.015 * (Math.min(Math.max(humidity, 60), 80) - 70));
            biogasYield *= humidityAdjustment;
            
            // Methane content depends on substrate
            const methaneContents = {
                'manure': 55,
                'food-waste': 60,
                'grass': 52,
                'corn': 58
            };
            methaneContent = methaneContents[substrateType];
            
            // Reactor type adjustment
            if (reactorType === 'uasb') {
                methaneContent += 3;
            } else if (reactorType === 'fixed-bed') {
                methaneContent += 5;
            }
            
            // Hydrogen potential (assuming 1 m3 methane can produce 2.5 m3 H2 via reforming)
            hydrogenPotential = (biogasYield * methaneContent / 100) * 2.5;
            
            // Display results
            const resultsContainer = document.getElementById('results-container');
            resultsContainer.innerHTML = `
                <div class="bg-blue-50 p-4 rounded-lg">
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-medium text-blue-800">Выход биогаза</span>
                        <span class="font-bold text-blue-900">${biogasYield.toFixed(2)} м³/день</span>
                    </div>
                    <div class="w-full bg-blue-200 rounded-full h-2">
                        <div class="bg-blue-600 h-2 rounded-full" style="width: ${Math.min(biogasYield/10, 100)}%"></div>
                    </div>
                </div>
                
                <div class="bg-green-50 p-4 rounded-lg">
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-medium text-green-800">Содержание метана</span>
                        <span class="font-bold text-green-900">${methaneContent.toFixed(1)}%</span>
                    </div>
                    <div class="w-full bg-green-200 rounded-full h-2">
                        <div class="bg-green-600 h-2 rounded-full" style="width: ${methaneContent}%"></div>
                    </div>
                </div>
                
                <div class="bg-purple-50 p-4 rounded-lg">
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-medium text-purple-800">Потенциальный выход водорода</span>
                        <span class="font-bold text-purple-900">${hydrogenPotential.toFixed(2)} м³/день</span>
                    </div>
                    <div class="w-full bg-purple-200 rounded-full h-2">
                        <div class="bg-purple-600 h-2 rounded-full" style="width: ${Math.min(hydrogenPotential/5, 100)}%"></div>
                    </div>
                </div>
                
                <div class="text-sm text-gray-500 mt-4">
                    <p><i class="fas fa-info-circle mr-2"></i> Результаты приблизительные, основаны на эмпирических моделях.</p>
                </div>
            `;
            
            // Update charts with new data
            updateChartData(biogasYield, hydrogenPotential, methaneContent);
        }
        
        // Chart rendering
        function renderCharts() {
            // Main chart
            const chartData = {
                x: ['День 1', 'День 2', 'День 3', 'День 4', 'День 5'],
                biogas: [120, 145, 130, 160, 150],
                hydrogen: [75, 90, 82, 100, 94]
            };
            
            const mainChart = {
                x: chartData.x,
                y: chartData.biogas,
                name: 'Биогаз (м³)',
                type: 'bar',
                marker: {color: '#3b82f6'}
            };
            
            const hydrogenChart = {
                x: chartData.x,
                y: chartData.hydrogen,
                name: 'Водород (м³)',
                type: 'bar',
                marker: {color: '#10b981'}
            };
            
            Plotly.newPlot('chart-container', [mainChart, hydrogenChart], {
                title: 'Сравнение выхода биогаза и водорода',
                barmode: 'group',
                xaxis: {title: 'Дни'},
                yaxis: {title: 'Объём (м³)'},
                plot_bgcolor: 'rgba(0,0,0,0)',
                paper_bgcolor: 'rgba(0,0,0,0)',
                font: {family: 'sans-serif', color: '#4b5563'}
            });
            
            // Methane chart
            const methaneChart = {
                values: [55, 45],
                labels: ['Метан', 'Другие газы'],
                type: 'pie',
                marker: {colors: ['#6366f1', '#a5b4fc']},
                textinfo: 'percent',
                hoverinfo: 'label+percent'
            };
            
            Plotly.newPlot('methane-chart', [methaneChart], {
                title: 'Состав биогаза',
                plot_bgcolor: 'rgba(0,0,0,0)',
                paper_bgcolor: 'rgba(0,0,0,0)',
                font: {family: 'sans-serif', color: '#4b5563'},
                showlegend: true
            });
            
            // Efficiency chart
            const efficiencyChart = {
                x: ['Навоз', 'Пищевые отходы', 'Трава', 'Кукуруза'],
                y: [75, 85, 78, 88],
                type: 'bar',
                marker: {color: '#8b5cf6'}
            };
            
            Plotly.newPlot('efficiency-chart', [efficiencyChart], {
                title: 'Эффективность по типу субстрата',
                xaxis: {title: 'Тип субстрата'},
                yaxis: {title: 'Эффективность (%)'},
                plot_bgcolor: 'rgba(0,0,0,0)',
                paper_bgcolor: 'rgba(0,0,0,0)',
                font: {family: 'sans-serif', color: '#4b5563'}
            });
        }
        
        // Update chart data
        function updateChartData(biogasYield, hydrogenPotential, methaneContent) {
            // Generate some sample data based on the calculation results
            const days = ['День 1', 'День 2', 'День 3', 'День 4', 'День 5'];
            const biogasData = [];
            const hydrogenData = [];
            
            for (let i = 0; i < 5; i++) {
                biogasData.push(biogasYield * (0.9 + Math.random() * 0.2));
                hydrogenData.push(hydrogenPotential * (0.9 + Math.random() * 0.2));
            }
            
            // Update main chart
            Plotly.update('chart-container', {
                y: [biogasData, hydrogenData]
            }, {
                x: [days, days]
            });
            
            // Update methane chart
            Plotly.update('methane-chart', {
                values: [methaneContent, 100 - methaneContent]
            });
            
            // Update efficiency chart (just randomize a bit)
            const efficiencyData = [75, 85, 78, 88].map(val => val * (0.95 + Math.random() * 0.1));
            Plotly.update('efficiency-chart', {
                y: [efficiencyData]
            });
        }
        
        // Update chart based on time period
        function updateChart() {
            const timePeriod = document.getElementById('time-period').value;
            let xValues, title;
            
            switch (timePeriod) {
                case 'weekly':
                    xValues = ['Неделя 1', 'Неделя 2', 'Неделя 3', 'Неделя 4'];
                    title = 'Сравнение выхода биогаза и водорода (недельные данные)';
                    break;
                case 'monthly':
                    xValues = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн'];
                    title = 'Сравнение выхода биогаза и водорода (месячные данные)';
                    break;
                default:
                    xValues = ['День 1', 'День 2', 'День 3', 'День 4', 'День 5'];
                    title = 'Сравнение выхода биогаза и водорода (дневные данные)';
            }
            
            // Generate random data for the selected period
            const biogasData = xValues.map(() => 100 + Math.random() * 100);
            const hydrogenData = xValues.map(() => 50 + Math.random() * 60);
            
            Plotly.update('chart-container', {
                x: [xValues, xValues],
                y: [biogasData, hydrogenData]
            }, {
                title: title
            });
        }
        
        // Contact form submission
        function sendContactForm() {
            const name = document.getElementById('contact-name').value;
            const email = document.getElementById('contact-email').value;
            const message = document.getElementById('contact-message').value;
            
            if (!name || !email || !message) {
                alert('Пожалуйста, заполните все поля формы.');
                return;
            }
            
            // In a real app, you would send this data to a server
            alert(`Спасибо, ${name}! Ваше сообщение отправлено. Мы свяжемся с вами по адресу ${email} в ближайшее время.`);
            
            // Reset form
            document.getElementById('contact-form').reset();
        }
        
        // AI Chat functionality
        function sendChatMessage() {
            const input = document.getElementById('chat-input');
            const message = input.value.trim();
            
            if (!message) return;
            
            // Add user message to chat
            addChatMessage(message, 'user');
            
            // Clear input
            input.value = '';
            
            // Simulate AI response after a delay
            setTimeout(() => {
                const responses = [
                    "Производство водорода из биогаза включает два основных этапа: сначала анаэробное сбраживание органических отходов для получения биогаза, а затем паровой риформинг метана для получения водорода.",
                    "Оптимальная температура для анаэробного сбраживания обычно составляет 35-40°C. При этой температуре метаногенные бактерии наиболее активны.",
                    "Выход биогаза зависит от типа субстрата. Например, пищевые отходы могут давать до 0.35 м³ биогаза на кг отходов, тогда как навоз - около 0.25 м³/кг.",
                    "Содержание метана в биогазе варьируется от 50% до 70% в зависимости от сырья и условий процесса.",
                    "Из 1 м³ метана можно получить около 2.5 м³ водорода через процесс парового риформинга."
                ];
                
                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                addChatMessage(randomResponse, 'ai');
            }, 1000);
        }
        
        function addChatMessage(message, sender) {
            const chatMessages = document.getElementById('chat-messages');
            
            const messageDiv = document.createElement('div');
            messageDiv.className = `bg-${sender === 'user' ? 'blue' : 'gray'}-50 p-3 rounded-lg`;
            
            const messageContent = document.createElement('p');
            messageContent.className = 'text-sm text-gray-700';
            messageContent.textContent = message;
            
            messageDiv.appendChild(messageContent);
            chatMessages.appendChild(messageDiv);
            
            // Scroll to bottom
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        // Initialize the app
        document.addEventListener('DOMContentLoaded', function() {
            // Set home tab as active
            switchTab('home');
            
            // Set up event listeners
            document.getElementById('chat-input').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendChatMessage();
                }
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Imanali21/h2sim" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>