Update nutri_call.html

nutri_call.html

@@ -4,7 +4,50 @@
 <meta charset="UTF-8">
 <title>Калькулятор удобрений</title>
 <style>
-/* Общие стили */
+/* Основной контейнер */
+/* Общие стили для всех рамок */
+fieldset, .calculation-box {
+    border: 2px solid #2e8b57;
+    background-color: #eaffea;
+    padding: 1em;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    width: 1000px; /* Фиксированная ширина как у верхних блоков */
+}
+/* Стили для основной рамки с кнопкой */
+.calculation-box {
+    width: 1000px; /* Такая же ширина как у верхних блоков */
+}
+/* Контейнер для элементов управления */
+.main-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    min-width: 200px;
+}
+/* Стили для группы усиления */
+.enhancement-block {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+/* Стили для строк ввода */
+.enhancement-input {
+    display: flex;
+    align-items: center;
+    gap: 15px; /* Увеличил отступ между надписью и полем ввода */
+    margin-bottom: 8px;
+}
+.enhancement-input label {
+    min-width: 120px; /* Фиксированная ширина для всех надписей */
+    text-align: right;
+    padding-right: 10px;
+}
+.enhancement-input input[type="number"] {
+    width: 80px;
+    flex-shrink: 0; /* Запрещаем уменьшение ширины поля ввода */
+}
+/* Остальные стили остаются без изменений */
 body {
     margin: 0 auto;
     width: 1000px;
@@ -12,7 +55,6 @@ body {
     background-color: #f0f0f0;
     font-family: Arial, sans-serif;
 }
-
 h1 {
     background-color: #2e8b57;
     color: white;
@@ -20,49 +62,32 @@ h1 {
     padding: 1em;
     border-radius: 10px;
     margin-bottom: 20px;
-    width: 1000px;
+    width: 1000px; /* Фиксированная ширина как у рамок */
     box-sizing: border-box;
 }
-
-/* Основные блоки */
-fieldset, .calculation-box {
-    border: 2px solid #2e8b57;
-    background-color: #eaffea;
-    padding: 1em;
-    margin-bottom: 20px;
-    border-radius: 8px;
-    width: 1000px;
-}
-
 legend {
     font-weight: bold;
     color: #2e8b57;
     padding: 0 10px;
 }
-
 .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;
-    gap: 5px; /* Добавлен отступ между меткой и полем ввода */
-    margin-bottom: 10px; /* Добавлен вертикальный отступ между полями */
 }
-
 .profile-label {
     font-weight: bold;
+    margin-bottom: 5px;
 }
-
 .nitrogen-container {
     grid-column: 1 / -1;
     display: flex;
@@ -70,51 +95,56 @@ legend {
     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-container {
+    display: flex;
+    gap: 30px;
+    align-items: flex-start;
+}
+.enhancement-title {
+    font-weight: bold;
+    color: #2e8b57;
+    margin-bottom: 5px;
+}
+.enhancement-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
 #calculate-btn {
     background-color: #2e8b57;
     color: white;
@@ -126,20 +156,66 @@ legend {
     transition: background-color 0.3s;
     margin-bottom: 5px;
 }
-
 #calculate-btn:hover {
     background-color: #3cb371;
 }
+.compensation-section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.compensation-weights {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.weight-input-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.weight-input-group label {
+    min-width: 80px;
+    text-align: right;
+}
+.weight-input-group input {
+    width: 80px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+.input-column {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.input-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.input-group label {
+    min-width: 80px;
+    text-align: right;
+}
+.input-group input {
+    width: 80px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
 </style>
 </head>
 
 <body>
 
-<h1>Калькулятор удобрений</h1>
+    <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>
@@ -170,12 +246,12 @@ legend {
                 <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;">
+               <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>
@@ -188,6 +264,7 @@ legend {
 <fieldset>
     <legend>Составы солей</legend>
     <div class="fertilisers-container">
+        <!-- Заголовки -->
         <div class="fert-row">
             <span class="fert-name">Удобрение</span>
             <span class="fert-header">NH4</span>
@@ -199,7 +276,8 @@ legend {
             <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>
@@ -211,11 +289,107 @@ legend {
             <span class="fert-cell">-</span>
             <input class="fert-input" type="number" step="0.001" id="calcium_nitrate"/>
         </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="potassium_nitrate"/>
+        </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="ammonium_nitrate"/>
+        </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="magnesium_sulfate"/>
+        </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="monopotassium_phosphate"/>
+        </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"" value="0.0000000" step="0.001" id="potassium_sulfate"/>
+        </div>
     </div>
 </fieldset>
 
+  
+<fieldset class="calculation-box">
+    <legend>Расчёт удобрений</legend>
+    <div class="calculation-container">
+        <!-- Блок с заголовком "Усиление" -->
+        <div class="compensation-section">
+            <div class="enhancement-title">Усиление:</div>
+            
+            <!-- Веса компенсации -->
+            <div class="compensation-weights">
+                <div class="weight-input-group">
+                    <label for="weight-k2so4">K₂SO₄:</label>
+                    <input type="number" id="weight-k2so4" value="0.23" step="0.01" min="-1" max="1">
+                </div>
+                <div class="weight-input-group">
+                    <label for="weight-mgso4">MgSO₄:</label>
+                    <input type="number" id="weight-mgso4" value="-0.10" step="0.01" min="-1" max="1">
+                </div>
+                <div class="weight-input-group">
+                    <label for="weight-kh2po4">KH₂PO₄:</label>
+                    <input type="number" id="weight-kh2po4" value="0.14" step="0.01" min="-1" max="1">
+                </div>
+            </div>
+        </div>
+        
+        <div class="input-column">
+            <button id="calculate-btn">Рассчитать</button>
+            <div class="input-group">
+                <label for="liters-input">Литры:</label>
+                <input type="number" id="liters-input" value="100" min="1" step="1">
+            </div>
+            <div class="input-group">
+                <label for="rounding-precision">Точность:</label>
+                <input type="number" id="rounding-precision" value="3" min="0" max="3" step="1">
+            </div>
+        </div>
+    </div>
+</fieldset>заголовок так и остался по ширине меньше блоков это первое  Второе в верхнем блоке  Где водится профиль  поля ввода слиплись и между ними нет отступов  Нижний блок нормальный стал  переделаете замечания и пришли заново код от начала до конца