Update nutri_call.html

nutri_call.html

@@ -4,117 +4,116 @@
   <meta charset="UTF-8">
   <title>Калькулятор удобрений</title>
 <style>
-    body {
-        margin: 0 auto;
-        width: 1000px;
-        padding: 1em;
-        background-color: #f0f0f0;
-        font-family: Arial, sans-serif;
-    }
+/* Основной контейнер */
+body {
+    margin: 0 auto;
+    width: 1000px;
+    padding: 1em;
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
 
-    fieldset {
-        border: 2px solid #2e8b57;
-        background-color: #eaffea;
-        padding: 1em;
-        margin-bottom: 20px;
-        border-radius: 8px;
-    }
-    h1 {
-        background-color: #2e8b57;
-        color: white;
-        text-align: center;
-        padding: 1em;
-        border-radius: 10px;
-        margin-bottom: 20px;
-    }
-    legend {
-        font-weight: bold;
-        color: #2e8b57;
-        padding: 0 10px;
-    }
-    input[type=number] {
-        width: 80px;
-        padding: 3px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-    }
-    
-    /* Общие стили для обоих блоков */
-    .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;
-        gap: 20px;
-        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;
-    }
+fieldset {
+    border: 2px solid #2e8b57;
+    background-color: #eaffea;
+    padding: 1em;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    /* Установка фиксированной ширины для всех рамок */
+    width: 960px;
+    box-sizing: border-box;
+}
+
+h1 {
+    background-color: #2e8b57;
+    color: white;
+    text-align: center;
+    padding: 1em;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+
+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;
+    gap: 20px;
+    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-box {
@@ -123,8 +122,11 @@
     padding: 1em;
     margin-bottom: 20px;
     border-radius: 8px;
-    width: fit-content;
+    /* Установка фиксированной ширины для всех рамок */
+    width: 960px;
+    box-sizing: border-box;
 }
+
 .calculation-box legend {
     font-weight: bold;
     color: #2e8b57;
@@ -152,21 +154,25 @@
     flex-direction: column;
     gap: 5px;
 }
+
 .enhancement-title {
     font-weight: bold;
     color: #2e8b57;
     margin-bottom: 5px;
 }
+
 .enhancement-controls {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }
+
 .enhancement-input {
     display: flex;
     align-items: center;
     gap: 8px;
 }
+
 .enhancement-input label {
     min-width: 70px;
     text-align: right;
@@ -184,6 +190,7 @@
     transition: background-color 0.3s;
     margin-bottom: 5px;
 }
+
 #calculate-btn:hover {
     background-color: #3cb371;
 }
@@ -193,6 +200,7 @@
     align-items: center;
     gap: 8px;
 }
+
 .input-group label {
     min-width: 60px;
 }
@@ -202,6 +210,8 @@ input[type="number"] {
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 4px;
+    /* Отступ между текстом и полем ввода */
+    margin-left: 10px;
 }
 </style>
 </head>