Update nutri_call.html

nutri_call.html

@@ -109,6 +109,56 @@ legend {
     border-radius: 4px;
 }
 
+
+
+
+
+
+
+/* Стили для информационного блока */
+.info-block {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 0.9em;
+}
+
+.info-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.info-label {
+    font-weight: bold;
+    min-width: 150px;
+    text-align: right;
+}
+
+/* Стили для поля ввода температуры */
+.temperature-input {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.9em;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
 /* Стили для таблицы удобрений */
 .fertilisers-container {
     display: flex;
@@ -279,54 +329,100 @@ legend {
         <h1>Калькулятор удобрений</h1>
     </div>
 
-    <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_n" 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_p" 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_k" 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_ca" 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_mg" 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_s" 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>
+<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_n" type="number" value="125.000" step="0.001"/>
             </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; color: #666;">
-                </div>
-                <div class="nitrogen-group">
-                    <label for="profile_no3">NO3:</label>
-                    <input id="profile_no3" type="number" value="8.25" step="0.01" min="5" max="100.001"/>
-                </div>
+            <div class="profile-element" style="grid-column: 3">
+                <span class="profile-label">P</span>
+                <input id="profile_p" 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_k" 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_ca" 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_mg" 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_s" 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>
-    </fieldset>
+        
+        <!-- Азотные элементы -->
+        <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; color: #666;">
+            </div>
+            <div class="nitrogen-group">
+                <label for="profile_no3">NO3:</label>
+                <input id="profile_no3" type="number" value="8.25" step="0.01" min="5" max="100.001"/>
+            </div>
+        </div>
+
+        <!-- Новый блок: Рассчитанные значения NH4 и NO3 -->
+        <div class="calculated-nitrogen-container" style="margin-top: 20px;">
+            <div class="nitrogen-group">
+                <label for="calculated_nh4">Calculated NH4:</label>
+                <input id="calculated_nh4" type="number" value="0.000" step="0.001" readonly style="background-color: #f0f0f0; color: #666;">
+            </div>
+            <div class="nitrogen-group">
+                <label for="calculated_no3">Calculated NO3:</label>
+                <input id="calculated_no3" type="number" value="0.000" step="0.001" readonly style="background-color: #f0f0f0; color: #666;">
+            </div>
+        </div>
+
+        <!-- Информационный блок справа -->
+        <div class="info-block" style="grid-column: 9 / -1; margin-left: 20px;">
+            <div class="info-row">
+                <span class="info-label">Соотношение NPK:</span>
+                <span id="npk-ratio">0:0:0</span>
+            </div>
+            <div class="info-row">
+                <span class="info-label">K (%):</span>
+                <span id="k-percentage">0%</span>
+            </div>
+            <div class="info-row">
+                <span class="info-label">Mg (%):</span>
+                <span id="mg-percentage">0%</span>
+            </div>
+            <div class="info-row">
+                <span class="info-label">S (%):</span>
+                <span id="s-percentage">0%</span>
+            </div>
+            <div class="info-row">
+                <span class="info-label">PPM:</span>
+                <span id="total-ppm">0 ppm</span>
+            </div>
+            <div class="info-row">
+                <span class="info-label">Баланс катионов/анионов:</span>
+                <span id="ion-balance">0</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Поле для ввода температуры -->
+    <div class="temperature-input" style="margin-top: 20px;">
+        <label for="temperature">Температура раствора (°C):</label>
+        <input id="temperature" type="number" value="25" step="0.1" min="0" max="50" style="width: 80px; margin-left: 10px;"/>
+    </div>
+</fieldset>
 
 <fieldset>
     <legend>Составы солей</legend>