DmitrMakeev commited on
Commit
1278675
·
verified ·
1 Parent(s): c8dc4ed

Update nutri_call.html

Browse files
Files changed (1) hide show
  1. nutri_call.html +148 -180
nutri_call.html CHANGED
@@ -6,7 +6,7 @@
6
  <style>
7
  body {
8
  margin: 0 auto;
9
- width: 950px;
10
  padding: 1em;
11
  background-color: #f0f0f0;
12
  font-family: Arial, sans-serif;
@@ -38,85 +38,67 @@
38
  border-radius: 4px;
39
  }
40
 
41
- /* Основные элементы в одну строку сверху */
42
- .profile-grid-container {
43
- display: grid;
44
- grid-template-columns: repeat(7, 90px); /* Такая же ширина как в нижнем блоке */
45
- gap: 10px;
46
- padding: 10px;
47
- text-align: center;
48
- }
49
-
50
-
51
- /* Контейнер для азотных элементов */
52
- .nitrogen-container {
53
- display: flex;
54
- gap: 20px;
55
- padding: 10px 10px 10px 120px; /* Отступ слева как в нижнем блоке */
56
- margin-top: 10px;
57
- }
58
-
59
- /* Стиль для группы азотных элементов */
60
- .nitrogen-group {
61
- display: flex;
62
- align-items: center;
63
- gap: 5px;
64
- }
65
-
66
 
67
- /* Стиль для подписей */
68
- .element-label {
69
- font-weight: bold;
70
- margin-bottom: 5px;
71
- display: block;
72
- width: 90px; /* Такая же ширина как ячейки в нижнем блоке */
73
- text-align: center;
74
- }
75
- /* Стиль для полей ввода в верхнем блоке */
76
- .profile-grid-container input[type=number],
77
- .nitrogen-group input[type=number] {
78
- width: 80px; /* Такая же ширина как в нижнем блоке */
79
- margin: 0 auto;
80
- }
81
 
82
- /* Новая сетка для удобрений */
83
- .fertilisers-container {
84
  display: flex;
85
  flex-direction: column;
86
- padding: 10px;
87
  }
88
 
89
- /* Строка с заголовками */
90
- .fert-header {
91
- display: grid;
92
- grid-template-columns: 120px repeat(8, 90px);
93
- gap: 10px;
94
- margin-bottom: 10px;
95
  font-weight: bold;
 
96
  }
97
 
98
- /* Строка с удобрением */
99
- .fert-row {
100
- display: grid;
101
- grid-template-columns: 120px repeat(8, 90px);
102
- gap: 10px;
 
 
 
 
 
 
103
  align-items: center;
104
- margin-bottom: 5px;
105
  }
106
 
107
- /* Стиль для ячеек */
108
- .fert-cell {
 
 
 
 
 
109
  text-align: center;
110
- min-height: 25px;
111
  }
112
 
113
- /* Стиль для названий удобрений */
114
  .fert-name {
115
  text-align: left;
116
  font-weight: bold;
 
 
 
 
 
 
117
  }
118
 
119
- /* Стиль для полей ввода */
120
  .fert-input {
121
  width: 80px;
122
  margin: 0 auto;
@@ -129,140 +111,126 @@
129
 
130
  <fieldset>
131
  <legend>Макропрофиль в мг/л (ppm)</legend>
132
-
133
- <!-- Основные элементы в строку сверху -->
134
- <div class="profile-grid-container">
135
- <div>
136
- <span class="element-label">P</span>
137
- <input id="pP" type="number" value="0.0" step="1.0"/>
138
- </div>
139
- <div>
140
- <span class="element-label">K</span>
141
- <input id="pK" type="number" value="0.0" step="1.0"/>
142
- </div>
143
- <div>
144
- <span class="element-label">Ca</span>
145
- <input id="pCa" type="number" value="0.0" step="1.0"/>
146
- </div>
147
- <div>
148
- <span class="element-label">Mg</span>
149
- <input id="pMg" type="number" value="0.0" step="1.0"/>
150
- </div>
151
- <div>
152
- <span class="element-label">S</span>
153
- <input id="pS" type="number" value="0.0" step="1.0"/>
 
 
 
 
 
 
 
 
 
154
  </div>
155
- <div>
156
- <span class="element-label">Cl</span>
157
- <input id="pCl" type="number" value="0.0" step="1.0"/>
158
- </div>
159
- <div>
160
- <span class="element-label">EC</span>
161
- <input id="pEC" type="number" value="0.0" step="0.001"/>
162
- </div>
163
- </div>
164
-
165
- <!-- Азотные элементы слева под основными -->
166
- <div class="nitrogen-container">
167
- <div class="nitrogen-group">
168
- <label for="pNO3">NO3:</label>
169
- <input id="pNO3" type="number" value="0.0" step="1.0"/>
170
- </div>
171
- <div class="nitrogen-group">
172
- <label for="pNH4">NH4:</label>
173
- <input id="pNH4" type="number" value="0.0" step="1.0"/>
174
  </div>
175
  </div>
176
  </fieldset>
177
 
178
  <fieldset>
179
  <legend>Составы солей</legend>
180
- <div class="fertilisers-container">
181
- <!-- Заголовки столбцов -->
182
- <div class="fert-header">
183
- <span class="fert-name">Удобрение</span>
184
- <span class="fert-cell">NH4</span>
185
- <span class="fert-cell">NO3</span>
186
- <span class="fert-cell">P</span>
187
- <span class="fert-cell">K</span>
188
- <span class="fert-cell">Ca</span>
189
- <span class="fert-cell">Mg</span>
190
- <span class="fert-cell">S</span>
191
- <span class="fert-cell">грамм</span>
192
- </div>
193
 
194
  <!-- Строки с удобрениями -->
195
- <div class="fert-row">
196
- <span class="fert-name">CaN2O6</span>
197
- <span class="fert-cell" id="f11">-</span>
198
- <input class="fert-input" type="number" step="0.001" id="ca_no3"/>
199
- <span class="fert-cell" id="f13">-</span>
200
- <span class="fert-cell" id="f14">-</span>
201
- <input class="fert-input" type="number" step="0.001" id="ca_ca"/>
202
- <span class="fert-cell" id="f16">-</span>
203
- <span class="fert-cell" id="f17">-</span>
204
- <input class="fert-input" type="number" step="0.001" id="ca_gram"/>
205
- </div>
206
 
207
- <div class="fert-row">
208
- <span class="fert-name">KNO3</span>
209
- <span class="fert-cell" id="f21">-</span>
210
- <input class="fert-input" type="number" step="0.001" id="kno3_no3"/>
211
- <span class="fert-cell" id="f24">-</span>
212
- <input class="fert-input" type="number" step="0.001" id="kno3_k"/>
213
- <span class="fert-cell" id="f25">-</span>
214
- <span class="fert-cell" id="f26">-</span>
215
- <span class="fert-cell" id="f27">-</span>
216
- <input class="fert-input" type="number" step="0.001" id="kno3_gram"/>
217
- </div>
218
 
219
- <div class="fert-row">
220
- <span class="fert-name">NH4NO3</span>
221
- <input class="fert-input" type="number" step="0.001" id="nh4no3_nh4"/>
222
- <input class="fert-input" type="number" step="0.001" id="nh4no3_no3"/>
223
- <span class="fert-cell" id="f33">-</span>
224
- <span class="fert-cell" id="f34">-</span>
225
- <span class="fert-cell" id="f35">-</span>
226
- <span class="fert-cell" id="f36">-</span>
227
- <span class="fert-cell" id="f37">-</span>
228
- <input class="fert-input" type="number" step="0.001" id="nh4no3_gram"/>
229
- </div>
230
 
231
- <div class="fert-row">
232
- <span class="fert-name">MgSO4</span>
233
- <span class="fert-cell" id="f41">-</span>
234
- <span class="fert-cell" id="f43">-</span>
235
- <span class="fert-cell" id="f44">-</span>
236
- <span class="fert-cell" id="f45">-</span>
237
- <span class="fert-cell" id="f45">-</span>
238
- <input class="fert-input" type="number" step="0.001" id="mgso4_mg"/>
239
- <input class="fert-input" type="number" step="0.001" id="mgso4_s"/>
240
- <input class="fert-input" type="number" step="0.001" id="mgso4_gram"/>
241
- </div>
242
 
243
- <div class="fert-row">
244
- <span class="fert-name">KH2PO4</span>
245
- <span class="fert-cell" id="f51">-</span>
246
- <span class="fert-cell" id="f52">-</span>
247
- <input class="fert-input" type="number" step="0.001" id="kh2po4_p"/>
248
- <input class="fert-input" type="number" step="0.001" id="kh2po4_k"/>
249
- <span class="fert-cell" id="f55">-</span>
250
- <span class="fert-cell" id="f56">-</span>
251
- <span class="fert-cell" id="f57">-</span>
252
- <input class="fert-input" type="number" step="0.001" id="kh2po4_gram"/>
253
- </div>
254
 
255
- <div class="fert-row">
256
- <span class="fert-name">K2SO4</span>
257
- <span class="fert-cell" id="f61">-</span>
258
- <span class="fert-cell" id="f62">-</span>
259
- <span class="fert-cell" id="f65">-</span>
260
- <input class="fert-input" type="number" step="0.001" id="k2so4_k"/>
261
- <span class="fert-cell" id="f65">-</span>
262
- <span class="fert-cell" id="f66">-</span>
263
- <input class="fert-input" type="number" step="0.001" id="k2so4_s"/>
264
- <input class="fert-input" type="number" step="0.001" id="k2so4_gram"/>
265
- </div>
266
  </div>
267
  </fieldset>
268
  </body>
 
6
  <style>
7
  body {
8
  margin: 0 auto;
9
+ width: 1000px;
10
  padding: 1em;
11
  background-color: #f0f0f0;
12
  font-family: Arial, sans-serif;
 
38
  border-radius: 4px;
39
  }
40
 
41
+ /* Общие стили для обоих блоков */
42
+ .main-container {
43
+ display: grid;
44
+ grid-template-columns: 120px repeat(8, 90px);
45
+ gap: 10px;
46
+ padding: 10px;
47
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
 
49
+ /* Верхний блок - макропрофиль */
50
+ .profile-container {
51
+ display: contents;
52
+ }
 
 
 
 
 
 
 
 
 
 
53
 
54
+ .profile-element {
 
55
  display: flex;
56
  flex-direction: column;
57
+ align-items: center;
58
  }
59
 
60
+ .profile-label {
 
 
 
 
 
61
  font-weight: bold;
62
+ margin-bottom: 5px;
63
  }
64
 
65
+ /* Азотные элементы */
66
+ .nitrogen-container {
67
+ grid-column: 1 / -1;
68
+ display: flex;
69
+ gap: 20px;
70
+ padding-left: 120px;
71
+ margin-top: 10px;
72
+ }
73
+
74
+ .nitrogen-group {
75
+ display: flex;
76
  align-items: center;
77
+ gap: 5px;
78
  }
79
 
80
+ /* Нижний блок - составы солей */
81
+ .fertilisers-container {
82
+ display: contents;
83
+ }
84
+
85
+ .fert-header {
86
+ font-weight: bold;
87
  text-align: center;
88
+ padding: 5px 0;
89
  }
90
 
 
91
  .fert-name {
92
  text-align: left;
93
  font-weight: bold;
94
+ padding-right: 10px;
95
+ }
96
+
97
+ .fert-cell {
98
+ text-align: center;
99
+ padding: 5px 0;
100
  }
101
 
 
102
  .fert-input {
103
  width: 80px;
104
  margin: 0 auto;
 
111
 
112
  <fieldset>
113
  <legend>Макропрофиль в мг/л (ppm)</legend>
114
+ <div class="main-container">
115
+ <!-- Основные элементы -->
116
+ <div class="profile-container">
117
+ <div class="profile-element" style="grid-column: 2">
118
+ <span class="profile-label">P</span>
119
+ <input id="profile_p" type="number" value="0.0" step="1.0"/>
120
+ </div>
121
+ <div class="profile-element" style="grid-column: 3">
122
+ <span class="profile-label">K</span>
123
+ <input id="profile_k" type="number" value="0.0" step="1.0"/>
124
+ </div>
125
+ <div class="profile-element" style="grid-column: 4">
126
+ <span class="profile-label">Ca</span>
127
+ <input id="profile_ca" type="number" value="0.0" step="1.0"/>
128
+ </div>
129
+ <div class="profile-element" style="grid-column: 5">
130
+ <span class="profile-label">Mg</span>
131
+ <input id="profile_mg" type="number" value="0.0" step="1.0"/>
132
+ </div>
133
+ <div class="profile-element" style="grid-column: 6">
134
+ <span class="profile-label">S</span>
135
+ <input id="profile_s" type="number" value="0.0" step="1.0"/>
136
+ </div>
137
+ <div class="profile-element" style="grid-column: 7">
138
+ <span class="profile-label">Cl</span>
139
+ <input id="profile_cl" type="number" value="0.0" step="1.0"/>
140
+ </div>
141
+ <div class="profile-element" style="grid-column: 8">
142
+ <span class="profile-label">EC</span>
143
+ <input id="profile_ec" type="number" value="0.0" step="0.001"/>
144
+ </div>
145
  </div>
146
+
147
+ <!-- Азотные элементы -->
148
+ <div class="nitrogen-container">
149
+ <div class="nitrogen-group">
150
+ <label for="profile_no3">NO3:</label>
151
+ <input id="profile_no3" type="number" value="0.0" step="1.0"/>
152
+ </div>
153
+ <div class="nitrogen-group">
154
+ <label for="profile_nh4">NH4:</label>
155
+ <input id="profile_nh4" type="number" value="0.0" step="1.0"/>
156
+ </div>
 
 
 
 
 
 
 
 
157
  </div>
158
  </div>
159
  </fieldset>
160
 
161
  <fieldset>
162
  <legend>Составы солей</legend>
163
+ <div class="main-container">
164
+ <!-- Заголовки -->
165
+ <span class="fert-header fert-name">Удобрение</span>
166
+ <span class="fert-header">NH4</span>
167
+ <span class="fert-header">NO3</span>
168
+ <span class="fert-header">P</span>
169
+ <span class="fert-header">K</span>
170
+ <span class="fert-header">Ca</span>
171
+ <span class="fert-header">Mg</span>
172
+ <span class="fert-header">S</span>
173
+ <span class="fert-header">грамм</span>
 
 
174
 
175
  <!-- Строки с удобрениями -->
176
+ <span class="fert-name">CaN2O6</span>
177
+ <span class="fert-cell">-</span>
178
+ <input class="fert-input" type="number" step="0.001" id="fert_ca_no3"/>
179
+ <span class="fert-cell">-</span>
180
+ <span class="fert-cell">-</span>
181
+ <input class="fert-input" type="number" step="0.001" id="fert_ca_ca"/>
182
+ <span class="fert-cell">-</span>
183
+ <span class="fert-cell">-</span>
184
+ <input class="fert-input" type="number" step="0.001" id="fert_ca_gram"/>
 
 
185
 
186
+ <span class="fert-name">KNO3</span>
187
+ <span class="fert-cell">-</span>
188
+ <input class="fert-input" type="number" step="0.001" id="fert_kno3_no3"/>
189
+ <span class="fert-cell">-</span>
190
+ <input class="fert-input" type="number" step="0.001" id="fert_kno3_k"/>
191
+ <span class="fert-cell">-</span>
192
+ <span class="fert-cell">-</span>
193
+ <span class="fert-cell">-</span>
194
+ <input class="fert-input" type="number" step="0.001" id="fert_kno3_gram"/>
 
 
195
 
196
+ <span class="fert-name">NH4NO3</span>
197
+ <input class="fert-input" type="number" step="0.001" id="fert_nh4no3_nh4"/>
198
+ <input class="fert-input" type="number" step="0.001" id="fert_nh4no3_no3"/>
199
+ <span class="fert-cell">-</span>
200
+ <span class="fert-cell">-</span>
201
+ <span class="fert-cell">-</span>
202
+ <span class="fert-cell">-</span>
203
+ <span class="fert-cell">-</span>
204
+ <input class="fert-input" type="number" step="0.001" id="fert_nh4no3_gram"/>
 
 
205
 
206
+ <span class="fert-name">MgSO4</span>
207
+ <span class="fert-cell">-</span>
208
+ <span class="fert-cell">-</span>
209
+ <span class="fert-cell">-</span>
210
+ <span class="fert-cell">-</span>
211
+ <input class="fert-input" type="number" step="0.001" id="fert_mgso4_mg"/>
212
+ <input class="fert-input" type="number" step="0.001" id="fert_mgso4_s"/>
213
+ <input class="fert-input" type="number" step="0.001" id="fert_mgso4_gram"/>
 
 
 
214
 
215
+ <span class="fert-name">KH2PO4</span>
216
+ <span class="fert-cell">-</span>
217
+ <span class="fert-cell">-</span>
218
+ <input class="fert-input" type="number" step="0.001" id="fert_kh2po4_p"/>
219
+ <input class="fert-input" type="number" step="0.001" id="fert_kh2po4_k"/>
220
+ <span class="fert-cell">-</span>
221
+ <span class="fert-cell">-</span>
222
+ <span class="fert-cell">-</span>
223
+ <input class="fert-input" type="number" step="0.001" id="fert_kh2po4_gram"/>
 
 
224
 
225
+ <span class="fert-name">K2SO4</span>
226
+ <span class="fert-cell">-</span>
227
+ <span class="fert-cell">-</span>
228
+ <span class="fert-cell">-</span>
229
+ <input class="fert-input" type="number" step="0.001" id="fert_k2so4_k"/>
230
+ <span class="fert-cell">-</span>
231
+ <span class="fert-cell">-</span>
232
+ <input class="fert-input" type="number" step="0.001" id="fert_k2so4_s"/>
233
+ <input class="fert-input" type="number" step="0.001" id="fert_k2so4_gram"/>
 
 
234
  </div>
235
  </fieldset>
236
  </body>