Hugging Face's logo

Spaces:
Imanali21
/
h2sim
Running

App Files Community
h2sim / index.html
Imanali21's picture
Imanali21
Add 2 files
1712814 verified
Raw
History Blame Contribute Delete
42.4 kB
<!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>