Update nutri_call.html

nutri_call.html

@@ -4,50 +4,7 @@
 <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: 25px;
-    min-width: 120px;
-}
-/* Стили для группы усиления */
-.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;
@@ -55,39 +12,69 @@ body {
     background-color: #f0f0f0;
     font-family: Arial, sans-serif;
 }
-h1 {
+
+/* Стили для заголовка */
+.header-box {
+    border: 2px solid #2e8b57;
     background-color: #2e8b57;
     color: white;
     text-align: center;
     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;
     box-sizing: border-box;
 }
+
 legend {
     font-weight: bold;
     color: #2e8b57;
     padding: 0 10px;
 }
+
+/* Стили для блока профиля */
 .main-container {
     display: grid;
-    grid-template-columns: 120px repeat(8, 90px);
-    gap: 20px;
+    grid-template-columns: 120px repeat(7, 110px);
+    gap: 10px;
     padding: 10px;
 }
+
 .profile-container {
     display: contents;
 }
+
 .profile-element {
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 5px;
 }
+
 .profile-label {
     font-weight: bold;
-    margin-bottom: 5px;
+    font-size: 0.9em;
 }
+
+.profile-element input {
+    width: 80px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    text-align: center;
+}
+
 .nitrogen-container {
     grid-column: 1 / -1;
     display: flex;
@@ -95,301 +82,343 @@ legend {
     padding-left: 120px;
     margin-top: 10px;
 }
+
 .nitrogen-group {
     display: flex;
     align-items: center;
     gap: 5px;
 }
+
+.nitrogen-group label {
+    font-weight: bold;
+    font-size: 0.9em;
+}
+
+.nitrogen-group input {
+    width: 60px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+/* Стили для таблицы удобрений */
 .fertilisers-container {
     display: flex;
     flex-direction: column;
 }
+
 .fert-row {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
 }
+
 .fert-header {
     font-weight: bold;
     text-align: center;
-    min-width: 90px;
+    width: 80px;
     padding: 5px;
+    font-size: 0.9em;
 }
+
 .fert-name {
     font-weight: bold;
-    min-width: 120px;
+    width: 120px;
     text-align: left;
-    padding-right: 10px;
+    font-size: 0.9em;
 }
+
 .fert-cell {
     text-align: center;
-    min-width: 90px;
+    width: 80px;
     padding: 5px;
+    font-size: 0.9em;
 }
+
 .fert-input {
-    width: 80px;
+    width: 70px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    text-align: center;
     margin: 0 5px;
+    font-size: 0.9em;
 }
+
+/* Стили для блока расчета */
 .calculation-container {
     display: flex;
-    gap: 30px;
+    gap: 40px;
     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;
-    border: none;
-    padding: 8px 16px;
-    font-size: 16px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    margin-bottom: 5px;
-}
-#calculate-btn:hover {
-    background-color: #3cb371;
-}
+
 .compensation-section {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }
+
+.enhancement-title {
+    font-weight: bold;
+    color: #2e8b57;
+    margin-bottom: 5px;
+}
+
 .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;
+    width: 80px;
     text-align: right;
+    font-weight: bold;
+    font-size: 0.9em;
 }
+
 .weight-input-group input {
-    width: 80px;
+    width: 70px;
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
+
 .input-column {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }
+
+#calculate-btn {
+    background-color: #2e8b57;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+#calculate-btn:hover {
+    background-color: #3cb371;
+}
+
 .input-group {
     display: flex;
     align-items: center;
     gap: 10px;
 }
+
 .input-group label {
-    min-width: 80px;
+    width: 80px;
     text-align: right;
+    font-weight: bold;
+    font-size: 0.9em;
 }
+
 .input-group input {
-    width: 80px;
+    width: 70px;
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
 </style>
-</head>
 
 <body>
+    <div class="header-box">
+        <h1>Калькулятор удобрений</h1>
+    </div>
 
-    <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_n" type="number" value="125.000" step="0.001"/>
+    <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>
             </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 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="10.0" step="0.01" min="5" max="10.001"/>
+                </div>
             </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>
+    </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="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 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="calcium_nitrate"/>
             </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 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="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 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="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 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>
-        
-        <!-- Азотные элементы -->
-        <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 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="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 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>
-    </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="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>
 
-  
-<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">
+    <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 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="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="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 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>
-        
-        <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>
+    </fieldset>
+</body>
+  
+
 
 
 <script>