Update nutri_call.html

nutri_call.html

@@ -117,7 +117,6 @@
 
 
 /* Стиль для новой рамки с кнопкой */
-/* Стиль для блока расчёта */
 .calculation-box {
     border: 2px solid #2e8b57;
     background-color: #eaffea;
@@ -125,31 +124,20 @@
     margin-bottom: 20px;
     border-radius: 8px;
 }
-
 .calculation-box legend {
     font-weight: bold;
     color: #2e8b57;
     padding: 0 10px;
 }
 
+/* Контейнер */
 .calculation-container {
     display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.calculation-label {
-    font-weight: bold;
-    margin-right: 5px;
-}
-
-#liters-input {
-    width: 80px;
-    padding: 3px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    flex-direction: column;
+    gap: 15px;
 }
 
+/* Кнопка */
 #calculate-btn {
     background-color: #2e8b57;
     color: white;
@@ -159,11 +147,60 @@
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s;
+    margin-bottom: 10px;
+    align-self: flex-start;
 }
-
 #calculate-btn:hover {
     background-color: #3cb371;
 }
+
+/* Секция "Усиление" */
+.compensation-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 10px;
+}
+.compensation-title {
+    font-weight: bold;
+    color: #2e8b57;
+    margin-bottom: 5px;
+}
+
+/* Группы полей ввода */
+.compensation-weights {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+}
+.weight-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.weight-input-group label {
+    min-width: 70px; /* Фиксированная ширина для выравнивания */
+    text-align: right;
+}
+
+/* Обычные поля ввода */
+.input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.input-group label {
+    min-width: 70px;
+    text-align: right;
+}
+
+/* Поля ввода */
+input[type="number"] {
+    width: 80px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
   
 </style>
 </head>
@@ -319,27 +356,36 @@
     <div class="calculation-container">
         <button id="calculate-btn">Рассчитать</button>
         
-        <!-- Веса компенсации -->
-        <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 class="compensation-section">
+            <div class="compensation-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="calculation-label">Литры:</div>
-        <input type="number" id="liters-input" value="100" min="1" step="1">
+        <div class="input-group">
+            <label class="calculation-label">Литры:</label>
+            <input type="number" id="liters-input" value="100" min="1" step="1">
+        </div>
         
-        <div class="calculation-label">Точность:</div>
-        <input type="number" id="rounding-precision" value="3" min="0" max="3" step="1">
+        <div class="input-group">
+            <label class="calculation-label">Точность:</label>
+            <input type="number" id="rounding-precision" value="3" min="0" max="3" step="1">
+        </div>
     </div>
 </fieldset>