Update nutri_call.html

nutri_call.html

@@ -434,76 +434,63 @@ legend {
 }
 
 /* Стили для блока расчета */
+
 .calculation-container {
     display: flex;
-    gap: 40px;
+    gap: 40px; /* Расстояние между левым и правым блоками */
     align-items: flex-start;
 }
 
-.compensation-section {
+/* Левый блок */
+.left-section {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 20px; /* Расстояние между элементами */
+    width: 100%; /* Занимает всю ширину */
 }
 
-.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 {
-    width: 80px;
-    text-align: right;
+.left-section label {
     font-weight: bold;
     font-size: 0.9em;
 }
 
-.weight-input-group input {
-    width: 70px;
+.left-section select {
+    width: 100%; /* Выпадающий список занимает всю ширину */
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }
 
-.input-columns {
+.button-group {
     display: flex;
-    gap: 20px;
+    gap: 10px; /* Расстояние между кнопками */
 }
 
-.input-column {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-#calculate-btn {
-    background-color: #2e8b57;
-    color: white;
+.button-group button {
+    flex: 1; /* Кнопки занимают одинаковое пространство */
+    padding: 8px;
     border: none;
-    padding: 8px 16px;
-    font-size: 16px;
     border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.3s;
-    margin-bottom: 5px;
     font-weight: bold;
+    transition: background-color 0.3s;
 }
 
-#calculate-btn:hover {
-    background-color: #3cb371;
+#save-profile {
+    background-color: #28a745; /* Зелёная кнопка */
+    color: white;
+}
+
+#delete-profile {
+    background-color: #dc3545; /* Красная кнопка */
+    color: white;
+}
+
+/* Правый блок */
+.right-section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
 .input-group {
@@ -513,7 +500,7 @@ legend {
 }
 
 .input-group label {
-    width: 120px; /* Увеличил ширину для лучшего отображения текста */
+    width: 120px; /* Ширина меток */
     text-align: right;
     font-weight: bold;
     font-size: 0.9em;
@@ -526,7 +513,24 @@ legend {
     border-radius: 4px;
 }
 
+#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;
+}
 
+/* micro контейнер */
 .micro-container {
     padding: 10px;
 }
@@ -911,11 +915,24 @@ legend {
 
   
   
-    <fieldset class="calculation-box">
-        <legend>Расчёт удобрений</legend>
-        <div class="calculation-container">
-            <div class="compensation-section">
+<fieldset class="calculation-box">
+    <legend>Расчёт удобрений</legend>
+    <div class="calculation-container">
+        <!-- Левый блок -->
+        <div class="left-section">
+            <!-- Выпадающий список -->
+            <label for="profile-selector">Выберите профиль:</label>
+            <select id="profile-selector"></select>
+
+            <!-- Кнопки сохранения и удаления -->
+            <div class="button-group">
+                <button id="save-profile">Сохранить текущий профиль</button>
+                <button id="delete-profile">Удалить выбранный профиль</button>
+            </div>
+        </div>
 
+        <!-- Правый блок -->
+        <div class="right-section">
             <div class="input-column">
                 <div class="input-group">
                     <label for="liters-input">Литры:</label>
@@ -928,19 +945,8 @@ legend {
                 <button id="calculate-btn">Рассчитать</button>
             </div>
         </div>
-
-
-<!-- Выпадающий список -->
-<label for="profile-selector">Выберите профиль:</label>
-<select id="profile-selector">
-</select>
-
-<!-- Кнопка для сохранения нового профиля -->
-<!-- Кнопки -->
-<button id="save-profile">Сохранить текущий профиль</button>
-<button id="delete-profile">Удалить выбранный профиль</button>
-    </fieldset>
-
+    </div>
+</fieldset>