Hugging Face's logo

Spaces:
gidr
/
flask_inference_api_g
Running

App Files Community
DmitrMakeev commited on
Commit
810b74a
·
verified ·
1 Parent(s): c906390

Update nutri_call.html

Browse files
Files changed (1) hide show
  1. nutri_call.html +398 -10
nutri_call.html CHANGED
@@ -4,6 +4,396 @@
4
  <meta charset="UTF-8">
5
  <title>Калькулятор удобрений</title>
6
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  /* Общие стили для всех рамок */
8
  fieldset, .calculation-box {
9
  border: 2px solid #2e8b57;
@@ -23,7 +413,7 @@ h1 {
23
  padding: 1em;
24
  border-radius: 10px;
25
  margin: 0 auto 20px;
26
- width: 1200px;
27
  box-sizing: border-box;
28
  }
29
 
@@ -36,21 +426,20 @@ legend {
36
  /* Стили для основного контейнера профиля */
37
  .main-container {
38
  display: grid;
39
- grid-template-columns: 110px repeat(8, 110px);
40
- gap: 20px; /* Увеличено с 15px до 30px */
41
  padding: 10px;
42
  }
43
 
 
 
 
 
44
  .profile-element {
45
  display: flex;
46
  flex-direction: column;
47
  align-items: center;
48
- gap: 10px; /* Небольшое увеличение для вертикального разделения */
49
- }
50
-
51
- .profile-element input {
52
- width: 100%; /* Можно задать, например, 90px, если слишком плотно */
53
- max-width: 100px; /* Ограничение ширины для контроля */
54
  }
55
 
56
  .profile-label {
@@ -412,7 +801,6 @@ body {
412
  </fieldset>
413
 
414
 
415
-
416
  <script>
417
  let call_data;
418
 
 
4
  <meta charset="UTF-8">
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
+ .calculation-box {
19
+ width: 1000px; /* Такая же ширина как у верхних блоков */
20
+ }
21
+ /* Контейнер для элементов управления */
22
+ .main-controls {
23
+ display: flex;
24
+ flex-direction: column;
25
+ gap: 15px;
26
+ min-width: 200px;
27
+ }
28
+ /* Стили для группы усиления */
29
+ .enhancement-block {
30
+ display: flex;
31
+ flex-direction: column;
32
+ gap: 10px;
33
+ }
34
+ /* Стили для строк ввода */
35
+ .enhancement-input {
36
+ display: flex;
37
+ align-items: center;
38
+ gap: 25px; /* Увеличил отступ между надписью и полем ввода */
39
+ margin-bottom: 8px;
40
+ }
41
+ .enhancement-input label {
42
+ min-width: 120px; /* Фиксированная ширина для всех надписей */
43
+ text-align: right;
44
+ padding-right: 10px;
45
+ }
46
+ .enhancement-input input[type="number"] {
47
+ width: 80px;
48
+ flex-shrink: 0; /* Запрещаем уменьшение ширины поля ввода */
49
+ }
50
+ /* Остальные стили остаются без изменений */
51
+ body {
52
+ margin: 0 auto;
53
+ width: 1000px;
54
+ padding: 1em;
55
+ background-color: #f0f0f0;
56
+ font-family: Arial, sans-serif;
57
+ }
58
+ h1 {
59
+ background-color: #2e8b57;
60
+ color: white;
61
+ text-align: center;
62
+ padding: 1em;
63
+ border-radius: 10px;
64
+ margin-bottom: 20px;
65
+ width: 1000px; /* Фиксированная ширина как у рамок */
66
+ box-sizing: border-box;
67
+ }
68
+ legend {
69
+ font-weight: bold;
70
+ color: #2e8b57;
71
+ padding: 0 10px;
72
+ }
73
+ .main-container {
74
+ display: grid;
75
+ grid-template-columns: 120px repeat(8, 90px);
76
+ gap: 10px;
77
+ padding: 10px;
78
+ }
79
+ .profile-container {
80
+ display: contents;
81
+ }
82
+ .profile-element {
83
+ display: flex;
84
+ flex-direction: column;
85
+ align-items: center;
86
+ }
87
+ .profile-label {
88
+ font-weight: bold;
89
+ margin-bottom: 5px;
90
+ }
91
+ .nitrogen-container {
92
+ grid-column: 1 / -1;
93
+ display: flex;
94
+ gap: 20px;
95
+ padding-left: 120px;
96
+ margin-top: 10px;
97
+ }
98
+ .nitrogen-group {
99
+ display: flex;
100
+ align-items: center;
101
+ gap: 5px;
102
+ }
103
+ .fertilisers-container {
104
+ display: flex;
105
+ flex-direction: column;
106
+ }
107
+ .fert-row {
108
+ display: flex;
109
+ align-items: center;
110
+ margin-bottom: 10px;
111
+ }
112
+ .fert-header {
113
+ font-weight: bold;
114
+ text-align: center;
115
+ min-width: 90px;
116
+ padding: 5px;
117
+ }
118
+ .fert-name {
119
+ font-weight: bold;
120
+ min-width: 120px;
121
+ text-align: left;
122
+ padding-right: 10px;
123
+ }
124
+ .fert-cell {
125
+ text-align: center;
126
+ min-width: 90px;
127
+ padding: 5px;
128
+ }
129
+ .fert-input {
130
+ width: 80px;
131
+ margin: 0 5px;
132
+ }
133
+ .calculation-container {
134
+ display: flex;
135
+ gap: 30px;
136
+ align-items: flex-start;
137
+ }
138
+ .enhancement-title {
139
+ font-weight: bold;
140
+ color: #2e8b57;
141
+ margin-bottom: 5px;
142
+ }
143
+ .enhancement-controls {
144
+ display: flex;
145
+ flex-direction: column;
146
+ gap: 8px;
147
+ }
148
+ #calculate-btn {
149
+ background-color: #2e8b57;
150
+ color: white;
151
+ border: none;
152
+ padding: 8px 16px;
153
+ font-size: 16px;
154
+ border-radius: 5px;
155
+ cursor: pointer;
156
+ transition: background-color 0.3s;
157
+ margin-bottom: 5px;
158
+ }
159
+ #calculate-btn:hover {
160
+ background-color: #3cb371;
161
+ }
162
+ .compensation-section {
163
+ display: flex;
164
+ flex-direction: column;
165
+ gap: 10px;
166
+ }
167
+ .compensation-weights {
168
+ display: flex;
169
+ flex-direction: column;
170
+ gap: 8px;
171
+ }
172
+ .weight-input-group {
173
+ display: flex;
174
+ align-items: center;
175
+ gap: 10px;
176
+ }
177
+ .weight-input-group label {
178
+ min-width: 80px;
179
+ text-align: right;
180
+ }
181
+ .weight-input-group input {
182
+ width: 80px;
183
+ padding: 5px;
184
+ border: 1px solid #ccc;
185
+ border-radius: 4px;
186
+ }
187
+ .input-column {
188
+ display: flex;
189
+ flex-direction: column;
190
+ gap: 10px;
191
+ }
192
+ .input-group {
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 10px;
196
+ }
197
+ .input-group label {
198
+ min-width: 80px;
199
+ text-align: right;
200
+ }
201
+ .input-group input {
202
+ width: 80px;
203
+ padding: 5px;
204
+ border: 1px solid #ccc;
205
+ border-radius: 4px;
206
+ }
207
+ </style>
208
+ </head>
209
+
210
+ <body>
211
+
212
+ <h1>Калькулятор удобрений</h1>
213
+
214
+
215
+ <fieldset>
216
+ <legend>Макропрофиль в мг/л (ppm)</legend>
217
+ <div class="main-container">
218
+ <!-- Основные элементы -->
219
+ <div class="profile-container">
220
+ <div class="profile-element" style="grid-column: 2">
221
+ <span class="profile-label">N</span>
222
+ <input id="profile_n" type="number" value="125.000" step="0.001"/>
223
+ </div>
224
+ <div class="profile-element" style="grid-column: 3">
225
+ <span class="profile-label">P</span>
226
+ <input id="profile_p" type="number" value="31.000" step="0.001"/>
227
+ </div>
228
+ <div class="profile-element" style="grid-column: 4">
229
+ <span class="profile-label">K</span>
230
+ <input id="profile_k" type="number" value="210.000" step="0.001"/>
231
+ </div>
232
+ <div class="profile-element" style="grid-column: 5">
233
+ <span class="profile-label">Ca</span>
234
+ <input id="profile_ca" type="number" value="84.000" step="0.001"/>
235
+ </div>
236
+ <div class="profile-element" style="grid-column: 6">
237
+ <span class="profile-label">Mg</span>
238
+ <input id="profile_mg" type="number" value="24.000" step="0.001"/>
239
+ </div>
240
+ <div class="profile-element" style="grid-column: 7">
241
+ <span class="profile-label">S</span>
242
+ <input id="profile_s" type="number" value="56.439" step="0.001"/>
243
+ </div>
244
+ <div class="profile-element" style="grid-column: 8">
245
+ <span class="profile-label">EC</span>
246
+ <input id="profile_ec" type="number" value="0.0" step="0.001"/>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Азотные элементы -->
251
+ <div class="nitrogen-container">
252
+ <div class="nitrogen-group">
253
+ <label for="profile_nh4">NH4:</label>
254
+ <input id="profile_nh4" type="number" value="1.0" step="1.0" readonly style="background-color: #f0f0f0; border: 1px solid #ccc; color: #666;">
255
+ </div>
256
+ <div class="nitrogen-group">
257
+ <label for="profile_no3">NO3:</label>
258
+ <input id="profile_no3" type="number" value="10.0" step="0.01" min="5" max="10.001"/>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </fieldset>
263
+
264
+ <fieldset>
265
+ <legend>Составы солей</legend>
266
+ <div class="fertilisers-container">
267
+ <!-- Заголовки -->
268
+ <div class="fert-row">
269
+ <span class="fert-name">Удобрение</span>
270
+ <span class="fert-header">NH4</span>
271
+ <span class="fert-header">NO3</span>
272
+ <span class="fert-header">P</span>
273
+ <span class="fert-header">K</span>
274
+ <span class="fert-header">Ca</span>
275
+ <span class="fert-header">Mg</span>
276
+ <span class="fert-header">S</span>
277
+ <span class="fert-header">Грамм</span>
278
+ </div>
279
+
280
+ <!-- Строки с удобрениями -->
281
+ <div class="fert-row">
282
+ <span class="fert-name">CaN2O6</span>
283
+ <span class="fert-cell">-</span>
284
+ <input class="fert-input" type="number" value="11.863" step="0.001" id="fert_ca_no3"/>
285
+ <span class="fert-cell">-</span>
286
+ <span class="fert-cell">-</span>
287
+ <input class="fert-input" type="number" value="16.972" step="0.001" id="fert_ca_ca"/>
288
+ <span class="fert-cell">-</span>
289
+ <span class="fert-cell">-</span>
290
+ <input class="fert-input" type="number" step="0.001" id="calcium_nitrate"/>
291
+ </div>
292
+
293
+ <div class="fert-row">
294
+ <span class="fert-name">KNO3</span>
295
+ <span class="fert-cell">-</span>
296
+ <input class="fert-input" type="number" value="13.854" step="0.001" id="fert_kno3_no3"/>
297
+ <span class="fert-cell">-</span>
298
+ <input class="fert-input" type="number" value="36.672" step="0.001" id="fert_kno3_k"/>
299
+ <span class="fert-cell">-</span>
300
+ <span class="fert-cell">-</span>
301
+ <span class="fert-cell">-</span>
302
+ <input class="fert-input" type="number" step="0.001" id="potassium_nitrate"/>
303
+ </div>
304
+
305
+ <div class="fert-row">
306
+ <span class="fert-name">NH4NO3</span>
307
+ <input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_nh4"/>
308
+ <input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_no3"/>
309
+ <span class="fert-cell">-</span>
310
+ <span class="fert-cell">-</span>
311
+ <span class="fert-cell">-</span>
312
+ <span class="fert-cell">-</span>
313
+ <span class="fert-cell">-</span>
314
+ <input class="fert-input" type="number" step="0.001" id="ammonium_nitrate"/>
315
+ </div>
316
+
317
+ <div class="fert-row">
318
+ <span class="fert-name">MgSO4</span>
319
+ <span class="fert-cell">-</span>
320
+ <span class="fert-cell">-</span>
321
+ <span class="fert-cell">-</span>
322
+ <span class="fert-cell">-</span>
323
+ <span class="fert-cell">-</span>
324
+ <input class="fert-input" type="number" value="10.22" step="0.001" id="fert_mgso4_mg"/>
325
+ <input class="fert-input" type="number" value="13.483" step="0.001" id="fert_mgso4_s"/>
326
+ <input class="fert-input" type="number" step="0.001" id="magnesium_sulfate"/>
327
+ </div>
328
+
329
+ <div class="fert-row">
330
+ <span class="fert-name">KH2PO4</span>
331
+ <span class="fert-cell">-</span>
332
+ <span class="fert-cell">-</span>
333
+ <input class="fert-input" type="number" value="22.761" step="0.001" id="fert_kh2po4_p"/>
334
+ <input class="fert-input" type="number" value="28.731" step="0.001" id="fert_kh2po4_k"/>
335
+ <span class="fert-cell">-</span>
336
+ <span class="fert-cell">-</span>
337
+ <span class="fert-cell">-</span>
338
+ <input class="fert-input" type="number" step="0.001" id="monopotassium_phosphate"/>
339
+ </div>
340
+
341
+ <div class="fert-row">
342
+ <span class="fert-name">K2SO4</span>
343
+ <span class="fert-cell">-</span>
344
+ <span class="fert-cell">-</span>
345
+ <span class="fert-cell">-</span>
346
+ <input class="fert-input" type="number" value="44.874" step="0.001" id="fert_k2so4_k"/>
347
+ <span class="fert-cell">-</span>
348
+ <span class="fert-cell">-</span>
349
+ <input class="fert-input" type="number" value="18.401" step="0.001" id="fert_k2so4_s"/>
350
+ <input class="fert-input" type="number"" value="0.0000000" step="0.001" id="potassium_sulfate"/>
351
+ </div>
352
+ </div>
353
+ </fieldset>
354
+
355
+
356
+ <fieldset class="calculation-box">
357
+ <legend>Расчёт удобрений</legend>
358
+ <div class="calculation-container">
359
+ <!-- Блок с заголовком "Усиление" -->
360
+ <div class="compensation-section">
361
+ <div class="enhancement-title">Усиление:</div>
362
+
363
+ <!-- Веса компенсации -->
364
+ <div class="compensation-weights">
365
+ <div class="weight-input-group">
366
+ <label for="weight-k2so4">K₂SO₄:</label>
367
+ <input type="number" id="weight-k2so4" value="0.23" step="0.01" min="-1" max="1">
368
+ </div>
369
+ <div class="weight-input-group">
370
+ <label for="weight-mgso4">MgSO₄:</label>
371
+ <input type="number" id="weight-mgso4" value="-0.10" step="0.01" min="-1" max="1">
372
+ </div>
373
+ <div class="weight-input-group">
374
+ <label for="weight-kh2po4">KH₂PO₄:</label>
375
+ <input type="number" id="weight-kh2po4" value="0.14" step="0.01" min="-1" max="1">
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="input-column">
381
+ <button id="calculate-btn">Рассчитать</button>
382
+ <div class="input-group">
383
+ <label for="liters-input">Литры:</label>
384
+ <input type="number" id="liters-input" value="100" min="1" step="1">
385
+ </div>
386
+ <div class="input-group">
387
+ <label for="rounding-precision">Точность:</label>
388
+ <input type="number" id="rounding-precision" value="3" min="0" max="3" step="1">
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </fieldset>заголовок так и остался по ширине меньше блоков это первое Второе в верхнем блоке Где водится профиль поля ввода слиплись и между ними нет отступов Нижний блок нормальный стал переделаете замечания и пришли заново код от начала до конца
393
+ Вот исправленный код с учетом всех замечаний:
394
+
395
+ html
396
+ <style>
397
  /* Общие стили для всех рамок */
398
  fieldset, .calculation-box {
399
  border: 2px solid #2e8b57;
 
413
  padding: 1em;
414
  border-radius: 10px;
415
  margin: 0 auto 20px;
416
+ width: 1000px;
417
  box-sizing: border-box;
418
  }
419
 
 
426
  /* Стили для основного контейнера профиля */
427
  .main-container {
428
  display: grid;
429
+ grid-template-columns: 120px repeat(8, 110px);
430
+ gap: 15px;
431
  padding: 10px;
432
  }
433
 
434
+ .profile-container {
435
+ display: contents;
436
+ }
437
+
438
  .profile-element {
439
  display: flex;
440
  flex-direction: column;
441
  align-items: center;
442
+ gap: 8px;
 
 
 
 
 
443
  }
444
 
445
  .profile-label {
 
801
  </fieldset>
802
 
803
 
 
804
  <script>
805
  let call_data;
806