Spaces:
Sleeping
Sleeping
Update nutri_call.html
Browse files- nutri_call.html +50 -63
nutri_call.html
CHANGED
@@ -5,6 +5,56 @@
|
|
5 |
<title>Калькулятор удобрений</title>
|
6 |
<style>
|
7 |
/* Основной контейнер */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8 |
body {
|
9 |
margin: 0 auto;
|
10 |
width: 1000px;
|
@@ -13,17 +63,6 @@ body {
|
|
13 |
font-family: Arial, sans-serif;
|
14 |
}
|
15 |
|
16 |
-
fieldset {
|
17 |
-
border: 2px solid #2e8b57;
|
18 |
-
background-color: #eaffea;
|
19 |
-
padding: 1em;
|
20 |
-
margin-bottom: 20px;
|
21 |
-
border-radius: 8px;
|
22 |
-
/* Установка фиксированной ширины для всех рамок */
|
23 |
-
width: 960px;
|
24 |
-
box-sizing: border-box;
|
25 |
-
}
|
26 |
-
|
27 |
h1 {
|
28 |
background-color: #2e8b57;
|
29 |
color: white;
|
@@ -39,7 +78,6 @@ legend {
|
|
39 |
padding: 0 10px;
|
40 |
}
|
41 |
|
42 |
-
/* Общие стили для обоих блоков */
|
43 |
.main-container {
|
44 |
display: grid;
|
45 |
grid-template-columns: 120px repeat(8, 90px);
|
@@ -47,7 +85,6 @@ legend {
|
|
47 |
padding: 10px;
|
48 |
}
|
49 |
|
50 |
-
/* Верхний блок - макропрофиль */
|
51 |
.profile-container {
|
52 |
display: contents;
|
53 |
}
|
@@ -63,7 +100,6 @@ legend {
|
|
63 |
margin-bottom: 5px;
|
64 |
}
|
65 |
|
66 |
-
/* Азотные элементы */
|
67 |
.nitrogen-container {
|
68 |
grid-column: 1 / -1;
|
69 |
display: flex;
|
@@ -78,7 +114,6 @@ legend {
|
|
78 |
gap: 5px;
|
79 |
}
|
80 |
|
81 |
-
/* Нижний блок - составы солей (переделан в горизонтальный) */
|
82 |
.fertilisers-container {
|
83 |
display: flex;
|
84 |
flex-direction: column;
|
@@ -115,46 +150,12 @@ legend {
|
|
115 |
margin: 0 5px;
|
116 |
}
|
117 |
|
118 |
-
/* Стиль для новой рамки с кнопкой */
|
119 |
-
.calculation-box {
|
120 |
-
border: 2px solid #2e8b57;
|
121 |
-
background-color: #eaffea;
|
122 |
-
padding: 1em;
|
123 |
-
margin-bottom: 20px;
|
124 |
-
border-radius: 8px;
|
125 |
-
/* Установка фиксированной ширины для всех рамок */
|
126 |
-
width: 960px;
|
127 |
-
box-sizing: border-box;
|
128 |
-
}
|
129 |
-
|
130 |
-
.calculation-box legend {
|
131 |
-
font-weight: bold;
|
132 |
-
color: #2e8b57;
|
133 |
-
padding: 0 10px;
|
134 |
-
}
|
135 |
-
|
136 |
-
/* Основной контейнер */
|
137 |
.calculation-container {
|
138 |
display: flex;
|
139 |
gap: 30px;
|
140 |
align-items: flex-start;
|
141 |
}
|
142 |
|
143 |
-
/* Основные контролы (кнопка, литры, точность) */
|
144 |
-
.main-controls {
|
145 |
-
display: flex;
|
146 |
-
flex-direction: column;
|
147 |
-
gap: 10px;
|
148 |
-
min-width: 150px;
|
149 |
-
}
|
150 |
-
|
151 |
-
/* Блок усиления */
|
152 |
-
.enhancement-block {
|
153 |
-
display: flex;
|
154 |
-
flex-direction: column;
|
155 |
-
gap: 5px;
|
156 |
-
}
|
157 |
-
|
158 |
.enhancement-title {
|
159 |
font-weight: bold;
|
160 |
color: #2e8b57;
|
@@ -167,18 +168,6 @@ legend {
|
|
167 |
gap: 8px;
|
168 |
}
|
169 |
|
170 |
-
.enhancement-input {
|
171 |
-
display: flex;
|
172 |
-
align-items: center;
|
173 |
-
gap: 8px;
|
174 |
-
}
|
175 |
-
|
176 |
-
.enhancement-input label {
|
177 |
-
min-width: 70px;
|
178 |
-
text-align: right;
|
179 |
-
}
|
180 |
-
|
181 |
-
/* Общие стили для элементов */
|
182 |
#calculate-btn {
|
183 |
background-color: #2e8b57;
|
184 |
color: white;
|
@@ -210,8 +199,6 @@ input[type="number"] {
|
|
210 |
padding: 5px;
|
211 |
border: 1px solid #ccc;
|
212 |
border-radius: 4px;
|
213 |
-
/* Отступ между текстом и полем ввода */
|
214 |
-
margin-left: 10px;
|
215 |
}
|
216 |
</style>
|
217 |
</head>
|
|
|
5 |
<title>Калькулятор удобрений</title>
|
6 |
<style>
|
7 |
/* Основной контейнер */
|
8 |
+
/* Общие стили для всех рамок */
|
9 |
+
fieldset, .calculation-box {
|
10 |
+
border: 2px solid #2e8b57;
|
11 |
+
background-color: #eaffea;
|
12 |
+
padding: 1em;
|
13 |
+
margin-bottom: 20px;
|
14 |
+
border-radius: 8px;
|
15 |
+
width: 1000px; /* Фиксированная ширина как у верхних блоков */
|
16 |
+
}
|
17 |
+
|
18 |
+
/* Стили для основной рамки с кнопкой */
|
19 |
+
.calculation-box {
|
20 |
+
width: 1000px; /* Такая же ширина как у верхних блоков */
|
21 |
+
}
|
22 |
+
|
23 |
+
/* Контейнер для элементов управления */
|
24 |
+
.main-controls {
|
25 |
+
display: flex;
|
26 |
+
flex-direction: column;
|
27 |
+
gap: 15px;
|
28 |
+
min-width: 200px;
|
29 |
+
}
|
30 |
+
|
31 |
+
/* Стили для группы усиления */
|
32 |
+
.enhancement-block {
|
33 |
+
display: flex;
|
34 |
+
flex-direction: column;
|
35 |
+
gap: 10px;
|
36 |
+
}
|
37 |
+
|
38 |
+
/* Стили для строк ввода */
|
39 |
+
.enhancement-input {
|
40 |
+
display: flex;
|
41 |
+
align-items: center;
|
42 |
+
gap: 15px; /* Увеличил отступ между надписью и полем ввода */
|
43 |
+
margin-bottom: 8px;
|
44 |
+
}
|
45 |
+
|
46 |
+
.enhancement-input label {
|
47 |
+
min-width: 120px; /* Фиксированная ширина для всех надписей */
|
48 |
+
text-align: right;
|
49 |
+
padding-right: 10px;
|
50 |
+
}
|
51 |
+
|
52 |
+
.enhancement-input input[type="number"] {
|
53 |
+
width: 80px;
|
54 |
+
flex-shrink: 0; /* Запрещаем уменьшение ширины поля ввода */
|
55 |
+
}
|
56 |
+
|
57 |
+
/* Остальные стили остаются без изменений */
|
58 |
body {
|
59 |
margin: 0 auto;
|
60 |
width: 1000px;
|
|
|
63 |
font-family: Arial, sans-serif;
|
64 |
}
|
65 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
66 |
h1 {
|
67 |
background-color: #2e8b57;
|
68 |
color: white;
|
|
|
78 |
padding: 0 10px;
|
79 |
}
|
80 |
|
|
|
81 |
.main-container {
|
82 |
display: grid;
|
83 |
grid-template-columns: 120px repeat(8, 90px);
|
|
|
85 |
padding: 10px;
|
86 |
}
|
87 |
|
|
|
88 |
.profile-container {
|
89 |
display: contents;
|
90 |
}
|
|
|
100 |
margin-bottom: 5px;
|
101 |
}
|
102 |
|
|
|
103 |
.nitrogen-container {
|
104 |
grid-column: 1 / -1;
|
105 |
display: flex;
|
|
|
114 |
gap: 5px;
|
115 |
}
|
116 |
|
|
|
117 |
.fertilisers-container {
|
118 |
display: flex;
|
119 |
flex-direction: column;
|
|
|
150 |
margin: 0 5px;
|
151 |
}
|
152 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
153 |
.calculation-container {
|
154 |
display: flex;
|
155 |
gap: 30px;
|
156 |
align-items: flex-start;
|
157 |
}
|
158 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
159 |
.enhancement-title {
|
160 |
font-weight: bold;
|
161 |
color: #2e8b57;
|
|
|
168 |
gap: 8px;
|
169 |
}
|
170 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
171 |
#calculate-btn {
|
172 |
background-color: #2e8b57;
|
173 |
color: white;
|
|
|
199 |
padding: 5px;
|
200 |
border: 1px solid #ccc;
|
201 |
border-radius: 4px;
|
|
|
|
|
202 |
}
|
203 |
</style>
|
204 |
</head>
|