Update nutri_call.html

nutri_call.html

@@ -150,7 +150,23 @@ legend {
     border: 1px solid #ccc;
     border-radius: 4px;
 }
+.square-button {
 
+                width: 50px;
+                height: 50px;
+                font-size: 28px; /* Увеличенный размер текста */
+                font-weight: bold; /* Жирный шрифт */
+                border: none; /* Убираем границы */
+                border-radius: 5px; /* Легкое скругление углов */
+                background-color: #28a745; /* Зеленый цвет фона */
+                color: white; /* Белый текст */
+                cursor: pointer; /* Курсор при наведении */
+                display: flex; /* Центрирование текста внутри кнопки */
+                align-items: center; /* Вертикальное центрирование */
+                justify-content: center; /* Горизонтальное центрирование */
+                margin-bottom: 10px; /* Отступ снизу */
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень для объема */
+}
 
 
 /* Стили для контейнера первого блока (NPK) */
@@ -585,64 +601,36 @@ legend {
 
 
 <!-- NH4 -- NO3 -->
-<div style="display: flex; align-items: flex-start; gap: 20px;">
-    <!-- Колонки азотных элементов -->
-    <div class="nitrogen-container" style="display: flex; gap: 20px;">
-        <!-- Колонка 1: NH4 -->
-        <div class="nitrogen-column">
-            <button style="
-                width: 20px;
-                height: 50px;
-                font-size: 28px; /* Увеличенный размер текста */
-                font-weight: bold; /* Жирный шрифт */
-                border: none; /* Убираем границы */
-                border-radius: 5px; /* Легкое скругление углов */
-                background-color: #28a745; /* Зеленый цвет фона */
-                color: white; /* Белый текст */
-                cursor: pointer; /* Курсор при наведении */
-                display: flex; /* Центрирование текста внутри кнопки */
-                align-items: center; /* Вертикальное центрирование */
-                justify-content: center; /* Горизонтальное центрирование */
-                margin-bottom: 10px; /* Отступ снизу */
-                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень для объема */
-            ">-</button>
-            <div class="column-header">NH4</div>
-            <div class="nitrogen-group">
-                <input id="profile_nh4" type="number" value="1.0" step="1.0" readonly style="background-color: #f0f0f0; color: #666;">
-            </div>
-            <div class="nitrogen-group">
-                <input id="calculated_nh4" type="number" value="0.000" step="0.001" readonly style="background-color: #f0f0f0; color: #666;">
-            </div>
-        </div>
 
-        <!-- Колонка 2: NO3 -->
-        <div class="nitrogen-column">
-            <button style="
-                width: 20px;
-                height: 50px;
-                font-size: 28px; /* Увеличенный размер текста */
-                font-weight: bold; /* Жирный шрифт */
-                border: none; /* Убираем границы */
-                border-radius: 5px; /* Легкое скругление углов */
-                background-color: #28a745; /* Зеленый цвет фона */
-                color: white; /* Белый текст */
-                cursor: pointer; /* Курсор при наведении */
-                display: flex; /* Центрирование текста внутри кнопки */
-                align-items: center; /* Вертикальное центрирование */
-                justify-content: center; /* Горизонтальное центрирование */
-                margin-bottom: 10px; /* Отступ снизу */
-                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тень для объема */
-            ">+</button>
-            <div class="column-header">NO3</div>
-            <div class="nitrogen-group">
-                <input id="profile_no3" type="number" value="8.25" step="0.01" min="0" max="100.001"/>
-            </div>
-            <div class="nitrogen-group">
-                <input id="calculated_no3" type="number" value="0.000" step="0.001" readonly style="background-color: #f0f0f0; color: #666;">
+
+        <!-- Азотные элементы и блок NPK -->
+        <div style="display: flex; align-items: flex-start; gap: 20px;">
+            <!-- Колонки азотных элементов -->
+            <div class="nitrogen-container" style="display: flex; gap: 20px;">
+                <!-- Колонка 1: NH4 -->
+                <div class="nitrogen-column">
+        <button class="square-button" id="minus-button" style="font-weight: bold;">-</button>
+                    <div class="column-header">NH4</div>
+                    <div class="nitrogen-group">
+                        <input id="profile_nh4" type="number" value="1.0" step="1.0" readonly style="background-color: #f0f0f0; color: #666;">
+                    </div>
+                    <div class="nitrogen-group">
+                        <input id="calculated_nh4" type="number" value="0.000" step="0.001" readonly style="background-color: #f0f0f0; color: #666;">
+                    </div>
+                </div>
+
+                <!-- Колонка 2: NO3 -->
+                <div class="nitrogen-column">
+        <button class="square-button" id="plus-button" style="font-weight: bold;">+</button>
+                    <div class="column-header">NO3</div>
+                    <div class="nitrogen-group">
+                        <input id="profile_no3" type="number" value="8.25" step="0.01" min="0" max="100.001"/>
+                    </div>
+                    <div class="nitrogen-group">
+                        <input id="calculated_no3" type="number" value="0.000" step="0.001" readonly style="background-color: #f0f0f0; color: #666;">
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
-</div>
 
 
 <!-- Первый блок NPK -->