Spaces:
Sleeping
Sleeping
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Калькулятор удобрений</title> | |
| <style> | |
| body { | |
| margin: 0 auto; | |
| width: 1000px; | |
| padding: 1em; | |
| background-color: #f0f0f0; | |
| font-family: Arial, sans-serif; | |
| } | |
| fieldset { | |
| border: 2px solid #2e8b57; | |
| background-color: #eaffea; | |
| padding: 1em; | |
| margin-bottom: 20px; | |
| border-radius: 8px; | |
| } | |
| h1 { | |
| background-color: #2e8b57; | |
| color: white; | |
| text-align: center; | |
| padding: 1em; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| } | |
| legend { | |
| font-weight: bold; | |
| color: #2e8b57; | |
| padding: 0 10px; | |
| } | |
| input[type=number] { | |
| width: 80px; | |
| padding: 3px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| /* Общие стили для обоих блоков */ | |
| .main-container { | |
| display: grid; | |
| grid-template-columns: 120px repeat(8, 90px); | |
| gap: 10px; | |
| padding: 10px; | |
| } | |
| /* Верхний блок - макропрофиль */ | |
| .profile-container { | |
| display: contents; | |
| } | |
| .profile-element { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .profile-label { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| /* Азотные элементы */ | |
| .nitrogen-container { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| gap: 20px; | |
| padding-left: 120px; | |
| margin-top: 10px; | |
| } | |
| .nitrogen-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| /* Нижний блок - составы солей (переделан в горизонтальный) */ | |
| .fertilisers-container { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .fert-row { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .fert-header { | |
| font-weight: bold; | |
| text-align: center; | |
| min-width: 90px; | |
| padding: 5px; | |
| } | |
| .fert-name { | |
| font-weight: bold; | |
| min-width: 120px; | |
| text-align: left; | |
| padding-right: 10px; | |
| } | |
| .fert-cell { | |
| text-align: center; | |
| min-width: 90px; | |
| padding: 5px; | |
| } | |
| .fert-input { | |
| width: 80px; | |
| margin: 0 5px; | |
| } | |
| /* Стиль для новой рамки с кнопкой */ | |
| .calculation-box { | |
| border: 2px solid #2e8b57; | |
| background-color: #eaffea; | |
| padding: 1em; | |
| margin-bottom: 20px; | |
| border-radius: 8px; | |
| } | |
| .calculation-box legend { | |
| font-weight: bold; | |
| color: #2e8b57; | |
| padding: 0 10px; | |
| } | |
| #calculate-btn { | |
| background-color: #2e8b57; | |
| color: white; | |
| border: none; | |
| padding: 8px 16px; | |
| font-size: 16px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| margin-top: 10px; | |
| transition: background-color 0.3s; | |
| width: 120px; | |
| } | |
| #calculate-btn:hover { | |
| background-color: #3cb371; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Калькулятор удобрений</h1> | |
| <fieldset> | |
| <legend>Макропрофиль в мг/л (ppm)</legend> | |
| <div class="main-container"> | |
| <!-- Основные элементы --> | |
| <div class="profile-container"> | |
| <div class="profile-element" style="grid-column: 2"> | |
| <span class="profile-label">N</span> | |
| <input id="profile_p" type="number" value="125.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 3"> | |
| <span class="profile-label">P</span> | |
| <input id="profile_k" type="number" value="31.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 4"> | |
| <span class="profile-label">K</span> | |
| <input id="profile_ca" type="number" value="210.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 5"> | |
| <span class="profile-label">Ca</span> | |
| <input id="profile_mg" type="number" value="84.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 6"> | |
| <span class="profile-label">Mg</span> | |
| <input id="profile_s" type="number" value="24.000" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 7"> | |
| <span class="profile-label">S</span> | |
| <input id="profile_cl" type="number" value="56.439" step="0.001"/> | |
| </div> | |
| <div class="profile-element" style="grid-column: 8"> | |
| <span class="profile-label">EC</span> | |
| <input id="profile_ec" type="number" value="0.0" step="0.001"/> | |
| </div> | |
| </div> | |
| <!-- Азотные элементы --> | |
| <div class="nitrogen-container"> | |
| <div class="nitrogen-group"> | |
| <label for="profile_nh4">NH4:</label> | |
| <input id="profile_nh4" type="number" value="1.0" step="1.0" readonly style="background-color: #f0f0f0; border: 1px solid #ccc; color: #666;"> | |
| </div> | |
| <div class="nitrogen-group"> | |
| <label for="profile_no3">NO3:</label> | |
| <input id="profile_no3" type="number" value="10.0" step="0.01" min="5" max="10.001"/> | |
| </div> | |
| </div> | |
| </div> | |
| </fieldset> | |
| <fieldset> | |
| <legend>Составы солей</legend> | |
| <div class="fertilisers-container"> | |
| <!-- Заголовки --> | |
| <div class="fert-row"> | |
| <span class="fert-name">Удобрение</span> | |
| <span class="fert-header">NH4</span> | |
| <span class="fert-header">NO3</span> | |
| <span class="fert-header">P</span> | |
| <span class="fert-header">K</span> | |
| <span class="fert-header">Ca</span> | |
| <span class="fert-header">Mg</span> | |
| <span class="fert-header">S</span> | |
| <span class="fert-header">Грамм</span> | |
| </div> | |
| <!-- Строки с удобрениями --> | |
| <div class="fert-row"> | |
| <span class="fert-name">CaN2O6</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="11.863" step="0.001" id="fert_ca_no3"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="16.972" step="0.001" id="fert_ca_ca"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="fert_ca_gram"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">KNO3</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="13.854" step="0.001" id="fert_kno3_no3"/> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="36.672" step="0.001" id="fert_kno3_k"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="fert_kno3_gram"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">NH4NO3</span> | |
| <input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_nh4"/> | |
| <input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_no3"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="fert_nh4no3_gram"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">MgSO4</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="10.22" step="0.001" id="fert_mgso4_mg"/> | |
| <input class="fert-input" type="number" value="13.483" step="0.001" id="fert_mgso4_s"/> | |
| <input class="fert-input" type="number" step="0.001" id="fert_mgso4_gram"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">KH2PO4</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="22.761" step="0.001" id="fert_kh2po4_p"/> | |
| <input class="fert-input" type="number" value="28.731" step="0.001" id="fert_kh2po4_k"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" step="0.001" id="fert_kh2po4_gram"/> | |
| </div> | |
| <div class="fert-row"> | |
| <span class="fert-name">K2SO4</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="44.874" step="0.001" id="fert_k2so4_k"/> | |
| <span class="fert-cell">-</span> | |
| <span class="fert-cell">-</span> | |
| <input class="fert-input" type="number" value="18.401" step="0.001" id="fert_k2so4_s"/> | |
| <input class="fert-input" type="number" step="0.001" id="fert_k2so4_gram"/> | |
| </div> | |
| </div> | |
| </fieldset> | |
| <fieldset class="calculation-box"> | |
| <legend>Расчёт удобрений</legend> | |
| <button id="calculate-btn">Запуск</button> | |
| </fieldset> | |
| <script> | |
| // Константы содержания элементов в удобрениях (массовые доли) | |
| const NUTRIENT_CONTENT_IN_FERTILIZERS = { | |
| "CaN2O6": {"NO3": 0.11863, "Ca": 0.16972}, | |
| "KNO3": {"NO3": 0.136, "K": 0.382}, | |
| "K2SO4": {"K": 0.44874, "S": 0.18401}, | |
| "NH4NO3": {"NO3": 0.17499, "NH4": 0.17499}, | |
| "MgSO4": {"Mg": 0.09861, "S": 0.13010}, | |
| "KH2PO4": {"P": 0.218, "K": 0.275} | |
| }; | |
| // Функция для пересчета процентов в константы | |
| function calculateNutrientConstants() { | |
| // Получаем все элементы удобрений | |
| const fertilizers = { | |
| "CaN2O6": { | |
| NO3: parseFloat(document.getElementById('fert_ca_no3').value) || 0, | |
| Ca: parseFloat(document.getElementById('fert_ca_ca').value) || 0 | |
| }, | |
| "KNO3": { | |
| NO3: parseFloat(document.getElementById('fert_kno3_no3').value) || 0, | |
| K: parseFloat(document.getElementById('fert_kno3_k').value) || 0 | |
| }, | |
| "NH4NO3": { | |
| NH4: parseFloat(document.getElementById('fert_nh4no3_nh4').value) || 0, | |
| NO3: parseFloat(document.getElementById('fert_nh4no3_no3').value) || 0 | |
| }, | |
| "MgSO4": { | |
| Mg: parseFloat(document.getElementById('fert_mgso4_mg').value) || 0, | |
| S: parseFloat(document.getElementById('fert_mgso4_s').value) || 0 | |
| }, | |
| "KH2PO4": { | |
| P: parseFloat(document.getElementById('fert_kh2po4_p').value) || 0, | |
| K: parseFloat(document.getElementById('fert_kh2po4_k').value) || 0 | |
| }, | |
| "K2SO4": { | |
| K: parseFloat(document.getElementById('fert_k2so4_k').value) || 0, | |
| S: parseFloat(document.getElementById('fert_k2so4_s').value) || 0 | |
| } | |
| }; | |
| // Пересчитываем проценты в константы (делим на 100) | |
| const calculatedConstants = {}; | |
| for (const [fert, nutrients] of Object.entries(fertilizers)) { | |
| calculatedConstants[fert] = {}; | |
| for (const [nutrient, value] of Object.entries(nutrients)) { | |
| calculatedConstants[fert][nutrient] = value / 100; | |
| } | |
| } | |
| // Выводим результат в консоль | |
| console.log("Calculated Nutrient Constants:", calculatedConstants); | |
| // Можно также сравнить с эталонными значениями | |
| console.log("Reference Constants:", NUTRIENT_CONTENT_IN_FERTILIZERS); | |
| return calculatedConstants; | |
| } | |
| // Назначаем обработчик на кнопку "Запуск" | |
| document.getElementById('calculate-btn').addEventListener('click', function() { | |
| const result = calculateNutrientConstants(); | |
| // Здесь можно добавить отправку данных на сервер | |
| // fetch('/api/calculate', { method: 'POST', body: JSON.stringify(result) }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |