Update nutri_call.html

nutri_call.html

@@ -14,12 +14,10 @@ fieldset, .calculation-box {
     border-radius: 8px;
     width: 1000px; /* Фиксированная ширина как у верхних блоков */
 }
-
 /* Стили для основной рамки с кнопкой */
 .calculation-box {
     width: 1000px; /* Такая же ширина как у верхних блоков */
 }
-
 /* Контейнер для элементов управления */
 .main-controls {
     display: flex;
@@ -27,14 +25,12 @@ fieldset, .calculation-box {
     gap: 15px;
     min-width: 200px;
 }
-
 /* Стили для группы усиления */
 .enhancement-block {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }
-
 /* Стили для строк ввода */
 .enhancement-input {
     display: flex;
@@ -42,18 +38,15 @@ fieldset, .calculation-box {
     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;
@@ -62,7 +55,6 @@ body {
     background-color: #f0f0f0;
     font-family: Arial, sans-serif;
 }
-
 h1 {
     background-color: #2e8b57;
     color: white;
@@ -70,36 +62,32 @@ h1 {
     padding: 1em;
     border-radius: 10px;
     margin-bottom: 20px;
+    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: 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;
@@ -107,67 +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;
@@ -179,22 +156,49 @@ 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: 8px;
+    gap: 10px;
 }
-
 .input-group label {
-    min-width: 60px;
+    min-width: 80px;
+    text-align: right;
 }
-
-input[type="number"] {
+.input-group input {
     width: 80px;
     padding: 5px;
     border: 1px solid #ccc;
@@ -352,16 +356,14 @@ input[type="number"] {
 <fieldset class="calculation-box">
     <legend>Расчёт удобрений</legend>
     <div class="calculation-container">
-
-        
         <!-- Блок с заголовком "Усиление" -->
         <div class="compensation-section">
-            <div class="compensation-title">Усиление:</div>
+            <div class="enhancement-title">Усиление:</div>
             
             <!-- Веса компенсации -->
             <div class="compensation-weights">
                 <div class="weight-input-group">
-                    <label for="weight-k2so4">K₂SO₄: </label>
+                    <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">
@@ -374,22 +376,23 @@ input[type="number"] {
                 </div>
             </div>
         </div>
-        <button id="calculate-btn">Рассчитать</button>
-        <div class="input-group">
-            <label class="calculation-label">Литры:</label>
-            <input type="number" id="liters-input" value="100" min="1" step="1">
-        </div>
         
-        <div class="input-group">
-            <label class="calculation-label">Точность:</label>
-            <input type="number" id="rounding-precision" value="3" min="0" max="3" step="1">
+        <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>
 
 
 
-
 <script>
 let call_data;