Hugging Face's logo

Spaces:
pranit144
/
mixmixture
Running

App Files Community
pranit144 commited on
Commit
66a10a4
·
verified ·
1 Parent(s): a13d2ea

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1394 -18
index.html CHANGED
@@ -1,19 +1,1395 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>PrecisionMix - Automated Pesticide Mixer</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
8
+ <style>
9
+ /* Base Styles */
10
+ :root {
11
+ --primary-color: #2ecc71;
12
+ --secondary-color: #3498db;
13
+ --accent-color: #f39c12;
14
+ --dark-color: #2c3e50;
15
+ --light-color: #ecf0f1;
16
+ --transition-speed: 0.5s;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
+ }
25
+
26
+ body {
27
+ background-color: var(--light-color);
28
+ color: var(--dark-color);
29
+ overflow-x: hidden;
30
+ }
31
+
32
+ .container {
33
+ max-width: 1200px;
34
+ margin: 0 auto;
35
+ padding: 20px;
36
+ }
37
+
38
+ section {
39
+ min-height: 100vh;
40
+ display: flex;
41
+ flex-direction: column;
42
+ justify-content: center;
43
+ align-items: center;
44
+ padding: 50px 20px;
45
+ position: relative;
46
+ overflow: hidden;
47
+ }
48
+
49
+ h1, h2, h3 {
50
+ margin-bottom: 20px;
51
+ text-align: center;
52
+ }
53
+
54
+ p {
55
+ line-height: 1.6;
56
+ margin-bottom: 20px;
57
+ max-width: 800px;
58
+ text-align: center;
59
+ }
60
+
61
+ .btn {
62
+ padding: 12px 24px;
63
+ background-color: var(--primary-color);
64
+ color: white;
65
+ border: none;
66
+ border-radius: 50px;
67
+ cursor: pointer;
68
+ font-weight: bold;
69
+ transition: all 0.3s ease;
70
+ text-transform: uppercase;
71
+ letter-spacing: 1px;
72
+ margin: 20px 0;
73
+ }
74
+
75
+ .btn:hover {
76
+ background-color: var(--dark-color);
77
+ transform: translateY(-3px);
78
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
79
+ }
80
+
81
+ .section-title {
82
+ font-size: 2.5rem;
83
+ margin-bottom: 30px;
84
+ color: var(--dark-color);
85
+ position: relative;
86
+ padding-bottom: 15px;
87
+ }
88
+
89
+ .section-title::after {
90
+ content: '';
91
+ position: absolute;
92
+ bottom: 0;
93
+ left: 50%;
94
+ transform: translateX(-50%);
95
+ width: 80px;
96
+ height: 4px;
97
+ background-color: var(--primary-color);
98
+ border-radius: 10px;
99
+ }
100
+
101
+ /* Hero Animation Section */
102
+ #hero {
103
+ background-color: #000;
104
+ color: white;
105
+ position: relative;
106
+ overflow: hidden;
107
+ }
108
+
109
+ .sunrise-animation {
110
+ position: absolute;
111
+ top: 0;
112
+ left: 0;
113
+ width: 100%;
114
+ height: 100%;
115
+ background: linear-gradient(to bottom, #2c3e50, #3498db, #e67e22, #f1c40f);
116
+ opacity: 0;
117
+ animation: sunrise 10s forwards;
118
+ }
119
+
120
+ .field {
121
+ position: absolute;
122
+ bottom: 0;
123
+ left: 0;
124
+ width: 100%;
125
+ height: 40%;
126
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%232ecc71" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,224C384,224,480,256,576,261.3C672,267,768,245,864,224C960,203,1056,181,1152,186.7C1248,192,1344,224,1392,240L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
127
+ background-size: cover;
128
+ transform: translateY(100%);
129
+ animation: field-grow 4s 3s forwards;
130
+ }
131
+
132
+ .hero-content {
133
+ position: relative;
134
+ z-index: 2;
135
+ opacity: 0;
136
+ transform: translateY(50px);
137
+ animation: fade-in 2s 6s forwards;
138
+ }
139
+
140
+ .hero-title {
141
+ font-size: 4rem;
142
+ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
143
+ margin-bottom: 20px;
144
+ }
145
+
146
+ .hero-subtitle {
147
+ font-size: 1.5rem;
148
+ opacity: 0.9;
149
+ max-width: 700px;
150
+ margin: 0 auto 40px;
151
+ }
152
+
153
+ @keyframes sunrise {
154
+ 0% {
155
+ opacity: 0;
156
+ background-position: 0% 100%;
157
+ }
158
+ 30% {
159
+ opacity: 1;
160
+ }
161
+ 100% {
162
+ opacity: 1;
163
+ background-position: 0% 0%;
164
+ }
165
+ }
166
+
167
+ @keyframes field-grow {
168
+ 0% {
169
+ transform: translateY(100%);
170
+ }
171
+ 100% {
172
+ transform: translateY(0);
173
+ }
174
+ }
175
+
176
+ @keyframes fade-in {
177
+ 0% {
178
+ opacity: 0;
179
+ transform: translateY(50px);
180
+ }
181
+ 100% {
182
+ opacity: 1;
183
+ transform: translateY(0);
184
+ }
185
+ }
186
+
187
+ /* Pesticide Jars Section */
188
+ #pesticide-jars {
189
+ background-color: white;
190
+ }
191
+
192
+ .jars-container {
193
+ display: flex;
194
+ justify-content: center;
195
+ align-items: center;
196
+ gap: 80px;
197
+ margin: 50px 0;
198
+ flex-wrap: wrap;
199
+ }
200
+
201
+ .jar {
202
+ position: relative;
203
+ width: 200px;
204
+ height: 280px;
205
+ display: flex;
206
+ flex-direction: column;
207
+ align-items: center;
208
+ transform: translateY(50px);
209
+ opacity: 0;
210
+ transition: all 1s ease;
211
+ }
212
+
213
+ .jar.animate {
214
+ transform: translateY(0);
215
+ opacity: 1;
216
+ }
217
+
218
+ .jar-icon {
219
+ width: 150px;
220
+ height: 220px;
221
+ background-color: #f1f1f1;
222
+ border-radius: 20px 20px 70px 70px;
223
+ position: relative;
224
+ overflow: hidden;
225
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
226
+ border: 5px solid #e0e0e0;
227
+ }
228
+
229
+ .jar-liquid {
230
+ position: absolute;
231
+ bottom: 0;
232
+ left: 0;
233
+ width: 100%;
234
+ height: 75%;
235
+ border-radius: 0 0 65px 65px;
236
+ animation: liquid-wobble 3s ease-in-out infinite;
237
+ }
238
+
239
+ .jar:nth-child(1) .jar-liquid {
240
+ background-color: rgba(52, 152, 219, 0.8);
241
+ }
242
+
243
+ .jar:nth-child(2) .jar-liquid {
244
+ background-color: rgba(155, 89, 182, 0.8);
245
+ }
246
+
247
+ .jar-label {
248
+ position: absolute;
249
+ top: 50%;
250
+ left: 50%;
251
+ transform: translate(-50%, -50%);
252
+ background-color: white;
253
+ padding: 5px 10px;
254
+ border-radius: 5px;
255
+ font-weight: bold;
256
+ font-size: 12px;
257
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
258
+ z-index: 1;
259
+ }
260
+
261
+ .jar-name {
262
+ margin-top: 20px;
263
+ font-weight: bold;
264
+ font-size: 1.2rem;
265
+ }
266
+
267
+ .jar-description {
268
+ font-size: 0.9rem;
269
+ color: #777;
270
+ text-align: center;
271
+ max-width: 200px;
272
+ }
273
+
274
+ @keyframes liquid-wobble {
275
+ 0% {
276
+ height: 75%;
277
+ border-radius: 0 0 65px 65px;
278
+ }
279
+ 50% {
280
+ height: 76%;
281
+ border-radius: 0 0 60px 70px;
282
+ }
283
+ 100% {
284
+ height: 75%;
285
+ border-radius: 0 0 65px 65px;
286
+ }
287
+ }
288
+
289
+ /* Smartphone Interface Section */
290
+ #smartphone {
291
+ background-color: #f8f9fa;
292
+ }
293
+
294
+ .smartphone-container {
295
+ display: flex;
296
+ flex-direction: column;
297
+ align-items: center;
298
+ margin: 40px 0;
299
+ position: relative;
300
+ }
301
+
302
+ .phone-frame {
303
+ width: 300px;
304
+ height: 600px;
305
+ background-color: #333;
306
+ border-radius: 40px;
307
+ position: relative;
308
+ overflow: hidden;
309
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
310
+ border: 8px solid #222;
311
+ opacity: 0;
312
+ transform: translateY(50px);
313
+ transition: all 1s ease;
314
+ }
315
+
316
+ .phone-frame.animate {
317
+ opacity: 1;
318
+ transform: translateY(0);
319
+ }
320
+
321
+ .phone-screen {
322
+ position: absolute;
323
+ top: 0;
324
+ left: 0;
325
+ width: 100%;
326
+ height: 100%;
327
+ background-color: white;
328
+ display: flex;
329
+ flex-direction: column;
330
+ padding: 20px;
331
+ }
332
+
333
+ .phone-header {
334
+ display: flex;
335
+ justify-content: space-between;
336
+ align-items: center;
337
+ margin-bottom: 30px;
338
+ }
339
+
340
+ .app-title {
341
+ font-weight: bold;
342
+ color: var(--primary-color);
343
+ }
344
+
345
+ .phone-icons i {
346
+ margin-left: 10px;
347
+ font-size: 14px;
348
+ color: #777;
349
+ }
350
+
351
+ .mixing-controls {
352
+ flex: 1;
353
+ display: flex;
354
+ flex-direction: column;
355
+ justify-content: center;
356
+ align-items: center;
357
+ gap: 30px;
358
+ }
359
+
360
+ .mix-ratios {
361
+ width: 100%;
362
+ padding: 20px;
363
+ background-color: #f9f9f9;
364
+ border-radius: 15px;
365
+ }
366
+
367
+ .ratio-slider {
368
+ width: 100%;
369
+ margin: 15px 0;
370
+ }
371
+
372
+ .ratio-label {
373
+ display: flex;
374
+ justify-content: space-between;
375
+ font-size: 14px;
376
+ color: #555;
377
+ }
378
+
379
+ .mix-action-btn {
380
+ background-color: var(--primary-color);
381
+ color: white;
382
+ padding: 15px 25px;
383
+ border-radius: 50px;
384
+ font-weight: bold;
385
+ border: none;
386
+ box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
387
+ cursor: pointer;
388
+ transition: all 0.3s ease;
389
+ font-size: 16px;
390
+ display: flex;
391
+ align-items: center;
392
+ gap: 10px;
393
+ }
394
+
395
+ .mix-action-btn:hover {
396
+ transform: translateY(-3px);
397
+ box-shadow: 0 8px 20px rgba(46, 204, 113, 0.4);
398
+ }
399
+
400
+ .mix-action-btn:active {
401
+ transform: translateY(0);
402
+ }
403
+
404
+ .signal-waves {
405
+ position: absolute;
406
+ top: 50%;
407
+ right: -100px;
408
+ transform: translateY(-50%);
409
+ opacity: 0;
410
+ }
411
+
412
+ .signal-wave {
413
+ width: 80px;
414
+ height: 80px;
415
+ border: 4px solid var(--primary-color);
416
+ border-radius: 50%;
417
+ position: absolute;
418
+ top: 0;
419
+ left: 0;
420
+ opacity: 0;
421
+ }
422
+
423
+ /* NodeMCU Section */
424
+ #nodemcu {
425
+ background-color: #f0f8ff;
426
+ }
427
+
428
+ .nodemcu-container {
429
+ display: flex;
430
+ flex-direction: column;
431
+ align-items: center;
432
+ position: relative;
433
+ margin: 50px 0;
434
+ width: 100%;
435
+ }
436
+
437
+ .nodemcu-board {
438
+ width: 300px;
439
+ height: 150px;
440
+ background-color: #00aeff;
441
+ border-radius: 10px;
442
+ position: relative;
443
+ padding: 15px;
444
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
445
+ display: flex;
446
+ flex-direction: column;
447
+ gap: 10px;
448
+ opacity: 0;
449
+ transform: translateY(50px);
450
+ transition: all 1s ease;
451
+ }
452
+
453
+ .nodemcu-board.animate {
454
+ opacity: 1;
455
+ transform: translateY(0);
456
+ }
457
+
458
+ .board-components {
459
+ display: flex;
460
+ justify-content: space-around;
461
+ }
462
+
463
+ .chip {
464
+ width: 60px;
465
+ height: 60px;
466
+ background-color: #333;
467
+ border-radius: 5px;
468
+ display: flex;
469
+ justify-content: center;
470
+ align-items: center;
471
+ color: white;
472
+ font-size: 12px;
473
+ }
474
+
475
+ .led {
476
+ width: 10px;
477
+ height: 10px;
478
+ background-color: #ff0000;
479
+ border-radius: 50%;
480
+ margin: 5px;
481
+ }
482
+
483
+ .led.on {
484
+ box-shadow: 0 0 10px #ff0000;
485
+ animation: blink 1s infinite;
486
+ }
487
+
488
+ .pins {
489
+ display: flex;
490
+ justify-content: space-between;
491
+ }
492
+
493
+ .pin-group {
494
+ display: flex;
495
+ gap: 5px;
496
+ }
497
+
498
+ .pin {
499
+ width: 5px;
500
+ height: 15px;
501
+ background-color: #c0c0c0;
502
+ border-radius: 2px;
503
+ }
504
+
505
+ .valves-container {
506
+ display: flex;
507
+ justify-content: space-around;
508
+ width: 100%;
509
+ margin-top: 50px;
510
+ position: relative;
511
+ }
512
+
513
+ .valve {
514
+ width: 80px;
515
+ height: 120px;
516
+ background-color: #777;
517
+ border-radius: 10px;
518
+ position: relative;
519
+ display: flex;
520
+ flex-direction: column;
521
+ align-items: center;
522
+ justify-content: center;
523
+ opacity: 0;
524
+ transform: translateY(30px);
525
+ transition: all 0.5s ease;
526
+ }
527
+
528
+ .valve.animate {
529
+ opacity: 1;
530
+ transform: translateY(0);
531
+ }
532
+
533
+ .valve-knob {
534
+ width: 30px;
535
+ height: 30px;
536
+ background-color: #ddd;
537
+ border-radius: 50%;
538
+ position: relative;
539
+ transform: rotate(0deg);
540
+ transition: transform 1s ease;
541
+ }
542
+
543
+ .valve-knob::after {
544
+ content: '';
545
+ position: absolute;
546
+ top: 5px;
547
+ left: 14px;
548
+ width: 2px;
549
+ height: 20px;
550
+ background-color: #555;
551
+ }
552
+
553
+ .valve-knob.open {
554
+ transform: rotate(90deg);
555
+ }
556
+
557
+ .valve-pipe {
558
+ position: absolute;
559
+ bottom: -30px;
560
+ width: 20px;
561
+ height: 30px;
562
+ background-color: #999;
563
+ z-index: 1;
564
+ }
565
+
566
+ /* Final Jar (Mixing Target) */
567
+ .main-jar {
568
+ width: 200px;
569
+ height: 300px;
570
+ background-color: #f1f1f1;
571
+ border-radius: 20px 20px 70px 70px;
572
+ position: relative;
573
+ margin-top: 80px;
574
+ overflow: hidden;
575
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
576
+ border: 5px solid #e0e0e0;
577
+ opacity: 0;
578
+ transform: translateY(50px);
579
+ transition: all 1s ease;
580
+ }
581
+
582
+ .main-jar.animate {
583
+ opacity: 1;
584
+ transform: translateY(0);
585
+ }
586
+
587
+ .main-jar-liquid {
588
+ position: absolute;
589
+ bottom: 0;
590
+ left: 0;
591
+ width: 100%;
592
+ height: 0;
593
+ background-color: rgba(106, 90, 205, 0.8);
594
+ border-radius: 0 0 65px 65px;
595
+ transition: height 3s ease;
596
+ }
597
+
598
+ /* Pour Stream Animation (Liquid flowing from jars to final jar) */
599
+ .pour-stream {
600
+ position: absolute;
601
+ width: 20px;
602
+ height: 0;
603
+ background-color: rgba(52, 152, 219, 0.8);
604
+ bottom: 100%;
605
+ opacity: 0.9;
606
+ }
607
+
608
+ .pour-stream.pour-stream-A {
609
+ left: 20px;
610
+ }
611
+
612
+ .pour-stream.pour-stream-B {
613
+ right: 20px;
614
+ background-color: rgba(155, 89, 182, 0.8);
615
+ }
616
+
617
+ @keyframes pourAnimation {
618
+ 0% {
619
+ height: 0;
620
+ opacity: 0.9;
621
+ }
622
+ 50% {
623
+ height: 150px;
624
+ opacity: 1;
625
+ }
626
+ 100% {
627
+ height: 0;
628
+ opacity: 0;
629
+ }
630
+ }
631
+
632
+ @keyframes blink {
633
+ 0% {
634
+ opacity: 1;
635
+ }
636
+ 50% {
637
+ opacity: 0.5;
638
+ }
639
+ 100% {
640
+ opacity: 1;
641
+ }
642
+ }
643
+
644
+ /* Mixing Process Section */
645
+ #mixing {
646
+ background-color: white;
647
+ }
648
+
649
+ .mixing-container {
650
+ display: flex;
651
+ flex-direction: column;
652
+ align-items: center;
653
+ position: relative;
654
+ width: 100%;
655
+ }
656
+
657
+ .gauges-container {
658
+ display: flex;
659
+ justify-content: space-around;
660
+ width: 100%;
661
+ max-width: 800px;
662
+ margin: 40px 0;
663
+ flex-wrap: wrap;
664
+ gap: 30px;
665
+ }
666
+
667
+ .gauge {
668
+ width: 200px;
669
+ height: 200px;
670
+ position: relative;
671
+ opacity: 0;
672
+ transform: scale(0.8);
673
+ transition: all 1s ease;
674
+ }
675
+
676
+ .gauge.animate {
677
+ opacity: 1;
678
+ transform: scale(1);
679
+ }
680
+
681
+ .gauge-border {
682
+ width: 100%;
683
+ height: 100%;
684
+ border-radius: 50%;
685
+ border: 15px solid #f1f1f1;
686
+ border-bottom-color: var(--primary-color);
687
+ position: absolute;
688
+ top: 0;
689
+ left: 0;
690
+ transform: rotate(-45deg);
691
+ transition: all 2s ease;
692
+ }
693
+
694
+ .gauge-center {
695
+ position: absolute;
696
+ top: 50%;
697
+ left: 50%;
698
+ transform: translate(-50%, -50%);
699
+ width: 120px;
700
+ height: 120px;
701
+ background-color: white;
702
+ border-radius: 50%;
703
+ display: flex;
704
+ flex-direction: column;
705
+ justify-content: center;
706
+ align-items: center;
707
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
708
+ }
709
+
710
+ .gauge-value {
711
+ font-size: 2rem;
712
+ font-weight: bold;
713
+ color: var(--dark-color);
714
+ }
715
+
716
+ .gauge-label {
717
+ font-size: 0.8rem;
718
+ color: #777;
719
+ text-align: center;
720
+ max-width: 90px;
721
+ }
722
+
723
+ .mixer-motor {
724
+ width: 250px;
725
+ height: 250px;
726
+ position: relative;
727
+ margin: 50px 0;
728
+ opacity: 0;
729
+ transform: translateY(30px);
730
+ transition: all 1s ease;
731
+ }
732
+
733
+ .mixer-motor.animate {
734
+ opacity: 1;
735
+ transform: translateY(0);
736
+ }
737
+
738
+ .motor-body {
739
+ width: 140px;
740
+ height: 140px;
741
+ background-color: #555;
742
+ border-radius: 50%;
743
+ position: absolute;
744
+ top: 50%;
745
+ left: 50%;
746
+ transform: translate(-50%, -50%);
747
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
748
+ display: flex;
749
+ justify-content: center;
750
+ align-items: center;
751
+ }
752
+
753
+ .motor-center {
754
+ width: 30px;
755
+ height: 30px;
756
+ background-color: #ddd;
757
+ border-radius: 50%;
758
+ position: relative;
759
+ z-index: 2;
760
+ }
761
+
762
+ .motor-blade {
763
+ position: absolute;
764
+ top: 50%;
765
+ left: 50%;
766
+ transform-origin: center;
767
+ width: 100px;
768
+ height: 10px;
769
+ background-color: #999;
770
+ border-radius: 5px;
771
+ z-index: 1;
772
+ transform: translate(-50%, -50%) rotate(0deg);
773
+ }
774
+
775
+ .motor-blade:nth-child(2) {
776
+ transform: translate(-50%, -50%) rotate(60deg);
777
+ }
778
+
779
+ .motor-blade:nth-child(3) {
780
+ transform: translate(-50%, -50%) rotate(120deg);
781
+ }
782
+
783
+ .motor-spinning .motor-blade {
784
+ animation: spin 1s linear infinite;
785
+ }
786
+
787
+ @keyframes spin {
788
+ 0% {
789
+ transform: translate(-50%, -50%) rotate(0deg);
790
+ }
791
+ 100% {
792
+ transform: translate(-50%, -50%) rotate(360deg);
793
+ }
794
+ }
795
+
796
+ /* Final Dispersion Section */
797
+ #dispersion {
798
+ background-color: #f0fff0;
799
+ position: relative;
800
+ overflow: hidden;
801
+ }
802
+
803
+ .field-background {
804
+ position: absolute;
805
+ bottom: 0;
806
+ left: 0;
807
+ width: 100%;
808
+ height: 60%;
809
+ background-color: var(--primary-color);
810
+ opacity: 0.2;
811
+ z-index: 0;
812
+ }
813
+
814
+ .dispersion-container {
815
+ position: relative;
816
+ z-index: 1;
817
+ width: 100%;
818
+ display: flex;
819
+ flex-direction: column;
820
+ align-items: center;
821
+ }
822
+
823
+ .sprayer-drone {
824
+ width: 300px;
825
+ height: 300px;
826
+ position: relative;
827
+ margin: 50px 0;
828
+ opacity: 0;
829
+ transform: translateY(30px);
830
+ transition: all 1s ease;
831
+ }
832
+
833
+ .sprayer-drone.animate {
834
+ opacity: 1;
835
+ transform: translateY(0);
836
+ }
837
+
838
+ .drone-body {
839
+ width: 120px;
840
+ height: 30px;
841
+ background-color: #333;
842
+ border-radius: 10px;
843
+ position: absolute;
844
+ top: 50%;
845
+ left: 50%;
846
+ transform: translate(-50%, -50%);
847
+ display: flex;
848
+ justify-content: center;
849
+ align-items: center;
850
+ z-index: 2;
851
+ }
852
+
853
+ .drone-arm {
854
+ position: absolute;
855
+ width: 100px;
856
+ height: 10px;
857
+ background-color: #555;
858
+ border-radius: 5px;
859
+ z-index: 1;
860
+ }
861
+
862
+ .drone-arm:nth-child(1) {
863
+ top: 40%;
864
+ left: 30%;
865
+ transform: rotate(45deg);
866
+ }
867
+
868
+ .drone-arm:nth-child(2) {
869
+ top: 40%;
870
+ right: 30%;
871
+ transform: rotate(-45deg);
872
+ }
873
+
874
+ .drone-arm:nth-child(3) {
875
+ bottom: 40%;
876
+ left: 30%;
877
+ transform: rotate(-45deg);
878
+ }
879
+
880
+ .drone-arm:nth-child(4) {
881
+ bottom: 40%;
882
+ right: 30%;
883
+ transform: rotate(45deg);
884
+ }
885
+
886
+ .drone-propeller {
887
+ width: 40px;
888
+ height: 40px;
889
+ position: absolute;
890
+ border-radius: 50%;
891
+ }
892
+
893
+ .drone-propeller::before,
894
+ .drone-propeller::after {
895
+ content: '';
896
+ position: absolute;
897
+ top: 50%;
898
+ left: 50%;
899
+ width: 40px;
900
+ height: 5px;
901
+ background-color: #999;
902
+ border-radius: 3px;
903
+ transform-origin: center;
904
+ }
905
+
906
+ .drone-propeller::before {
907
+ transform: translate(-50%, -50%) rotate(0deg);
908
+ }
909
+
910
+ .drone-propeller::after {
911
+ transform: translate(-50%, -50%) rotate(90deg);
912
+ }
913
+
914
+ .drone-propeller:nth-child(5) {
915
+ top: 30%;
916
+ left: 25%;
917
+ }
918
+
919
+ .drone-propeller:nth-child(6) {
920
+ top: 30%;
921
+ right: 25%;
922
+ }
923
+
924
+ .drone-propeller:nth-child(7) {
925
+ bottom: 30%;
926
+ left: 25%;
927
+ }
928
+
929
+ .drone-propeller:nth-child(8) {
930
+ bottom: 30%;
931
+ right: 25%;
932
+ }
933
+
934
+ .drone-flying .drone-propeller::before,
935
+ .drone-flying .drone-propeller::after {
936
+ animation: spin 0.2s linear infinite;
937
+ }
938
+
939
+ .spray-particles {
940
+ position: absolute;
941
+ bottom: 0;
942
+ left: 0;
943
+ width: 100%;
944
+ height: 200px;
945
+ display: flex;
946
+ justify-content: space-around;
947
+ opacity: 0;
948
+ transition: opacity 2s ease;
949
+ }
950
+
951
+ .spray-particles.animate {
952
+ opacity: 1;
953
+ }
954
+
955
+ .particle {
956
+ width: 6px;
957
+ height: 6px;
958
+ background-color: rgba(106, 90, 205, 0.6);
959
+ border-radius: 50%;
960
+ animation: fall 2s infinite;
961
+ animation-delay: calc(var(--delay) * 0.1s);
962
+ }
963
+
964
+ @keyframes fall {
965
+ 0% {
966
+ transform: translateY(-100px) translateX(0px);
967
+ opacity: 0;
968
+ }
969
+ 10% {
970
+ opacity: 1;
971
+ }
972
+ 100% {
973
+ transform: translateY(200px) translateX(calc(var(--x-move) * 1px));
974
+ opacity: 0;
975
+ }
976
+ }
977
+
978
+ .crop-row {
979
+ position: absolute;
980
+ bottom: 0;
981
+ left: 0;
982
+ width: 100%;
983
+ display: flex;
984
+ justify-content: space-around;
985
+ z-index: 0;
986
+ }
987
+
988
+ .crop {
989
+ width: 20px;
990
+ height: 40px;
991
+ background-color: var(--primary-color);
992
+ border-radius: 50% 50% 0 0;
993
+ position: relative;
994
+ transform-origin: bottom center;
995
+ animation: sway 3s ease-in-out infinite;
996
+ animation-delay: calc(var(--delay) * 0.2s);
997
+ }
998
+
999
+ @keyframes sway {
1000
+ 0% {
1001
+ transform: rotate(0deg);
1002
+ }
1003
+ 50% {
1004
+ transform: rotate(5deg);
1005
+ }
1006
+ 100% {
1007
+ transform: rotate(0deg);
1008
+ }
1009
+ }
1010
+
1011
+ /* Footer */
1012
+ footer {
1013
+ background-color: var(--dark-color);
1014
+ color: white;
1015
+ text-align: center;
1016
+ padding: 20px;
1017
+ }
1018
+
1019
+ .footer-content {
1020
+ max-width: 800px;
1021
+ margin: 0 auto;
1022
+ }
1023
+
1024
+ .footer-logo {
1025
+ font-size: 1.5rem;
1026
+ font-weight: bold;
1027
+ margin-bottom: 10px;
1028
+ color: var(--primary-color);
1029
+ }
1030
+
1031
+ /* Responsive Styles */
1032
+ @media (max-width: 768px) {
1033
+ .section-title {
1034
+ font-size: 2rem;
1035
+ }
1036
+
1037
+ .hero-title {
1038
+ font-size: 2.5rem;
1039
+ }
1040
+
1041
+ .jars-container {
1042
+ gap: 40px;
1043
+ }
1044
+
1045
+ .gauges-container {
1046
+ flex-direction: column;
1047
+ align-items: center;
1048
+ }
1049
+
1050
+ .phone-frame {
1051
+ width: 250px;
1052
+ height: 500px;
1053
+ }
1054
+ }
1055
+ </style>
1056
+ </head>
1057
+ <body>
1058
+ <!-- Hero Animation Section -->
1059
+ <section id="hero">
1060
+ <div class="sunrise-animation"></div>
1061
+ <div class="field"></div>
1062
+ <div class="hero-content">
1063
+ <h1 class="hero-title">PrecisionMix</h1>
1064
+ <p class="hero-subtitle">The future of automated pesticide mixing for precision agriculture. Enhancing efficiency, accuracy, and crop yield through innovative technology.</p>
1065
+ <button class="btn">Discover Now</button>
1066
+ </div>
1067
+ </section>
1068
+
1069
+ <!-- Pesticide Jars Section -->
1070
+ <section id="pesticide-jars">
1071
+ <h2 class="section-title">Specialized Formulations</h2>
1072
+ <p>Our system utilizes advanced pesticide formulations designed for maximum effectiveness with minimal environmental impact.</p>
1073
+
1074
+ <div class="jars-container">
1075
+ <div class="jar">
1076
+ <div class="jar-icon">
1077
+ <div class="jar-liquid"></div>
1078
+ <div class="jar-label">Type A</div>
1079
+ </div>
1080
+ <h3 class="jar-name">BioShield Plus</h3>
1081
+ <p class="jar-description">Specialized formulation for pest control with organic compounds</p>
1082
+ </div>
1083
+ <div class="jar">
1084
+ <div class="jar-icon">
1085
+ <div class="jar-liquid"></div>
1086
+ <div class="jar-label">Type B</div>
1087
+ </div>
1088
+ <h3 class="jar-name">EcoGuard Pro</h3>
1089
+ <p class="jar-description">Advanced blend for comprehensive crop protection and enhanced resilience</p>
1090
+ </div>
1091
+ </div>
1092
+ </section>
1093
+
1094
+ <!-- Smartphone Interface Section -->
1095
+ <section id="smartphone">
1096
+ <h2 class="section-title">Smartphone Interface</h2>
1097
+ <p>Control the mixing process precisely through our modern mobile interface.</p>
1098
+
1099
+ <div class="smartphone-container">
1100
+ <div class="phone-frame" id="phoneFrame">
1101
+ <div class="phone-screen">
1102
+ <div class="phone-header">
1103
+ <div class="app-title">PrecisionMix App</div>
1104
+ <div class="phone-icons">
1105
+ <i class="fas fa-wifi"></i>
1106
+ <i class="fas fa-bluetooth"></i>
1107
+ </div>
1108
+ </div>
1109
+ <div class="mixing-controls">
1110
+ <div class="mix-ratios">
1111
+ <div class="ratio-label">
1112
+ <span>Pesticide A</span>
1113
+ <span id="ratioAValue">50%</span>
1114
+ </div>
1115
+ <input type="range" min="0" max="100" value="50" class="ratio-slider" id="ratioASlider">
1116
+ </div>
1117
+ <div class="mix-ratios">
1118
+ <div class="ratio-label">
1119
+ <span>Pesticide B</span>
1120
+ <span id="ratioBValue">50%</span>
1121
+ </div>
1122
+ <input type="range" min="0" max="100" value="50" class="ratio-slider" id="ratioBSlider">
1123
+ </div>
1124
+ <button class="mix-action-btn" id="mixActionBtn">
1125
+ <i class="fas fa-cogs"></i> Mix Now
1126
+ </button>
1127
+ </div>
1128
+ </div>
1129
+ </div>
1130
+ <div class="signal-waves" id="signalWaves">
1131
+ <div class="signal-wave"></div>
1132
+ <div class="signal-wave"></div>
1133
+ <div class="signal-wave"></div>
1134
+ </div>
1135
+ </div>
1136
+ </section>
1137
+
1138
+ <!-- NodeMCU Section with Final Jar for Mixing -->
1139
+ <section id="nodemcu">
1140
+ <h2 class="section-title">NodeMCU Activation</h2>
1141
+ <p>Activate the NodeMCU to control the valves for precise dispensing of the pesticide formulations.</p>
1142
+
1143
+ <div class="nodemcu-container">
1144
+ <div class="nodemcu-board" id="nodemcuBoard">
1145
+ <div class="board-components">
1146
+ <div class="chip">ESP8266</div>
1147
+ <div class="chip">WiFi</div>
1148
+ <div class="chip">I/O</div>
1149
+ </div>
1150
+ <div class="pins">
1151
+ <div class="pin-group">
1152
+ <div class="pin"></div>
1153
+ <div class="pin"></div>
1154
+ <div class="pin"></div>
1155
+ </div>
1156
+ <div class="pin-group">
1157
+ <div class="pin"></div>
1158
+ <div class="pin"></div>
1159
+ <div class="pin"></div>
1160
+ </div>
1161
+ </div>
1162
+ <div class="led" id="nodemcuLed"></div>
1163
+ </div>
1164
+ <div class="valves-container">
1165
+ <div class="valve" id="valveA">
1166
+ <div class="valve-knob"></div>
1167
+ <div class="valve-pipe"></div>
1168
+ </div>
1169
+ <div class="valve" id="valveB">
1170
+ <div class="valve-knob"></div>
1171
+ <div class="valve-pipe"></div>
1172
+ </div>
1173
+ </div>
1174
+ <!-- Final Jar that receives liquid from both jars -->
1175
+ <div class="main-jar" id="finalJar">
1176
+ <div class="main-jar-liquid"></div>
1177
+ <div class="pour-stream pour-stream-A"></div>
1178
+ <div class="pour-stream pour-stream-B"></div>
1179
+ </div>
1180
+ </div>
1181
+ </section>
1182
+
1183
+ <!-- Mixing Process Section -->
1184
+ <section id="mixing">
1185
+ <h2 class="section-title">Mixing Process</h2>
1186
+ <p>Watch the precision mixing process in action as our system blends the formulations to perfection.</p>
1187
+
1188
+ <div class="mixing-container">
1189
+ <div class="gauges-container">
1190
+ <div class="gauge" id="gaugeA">
1191
+ <div class="gauge-border"></div>
1192
+ <div class="gauge-center">
1193
+ <div class="gauge-value" id="gaugeAValue">0%</div>
1194
+ <div class="gauge-label">Pesticide A</div>
1195
+ </div>
1196
+ </div>
1197
+ <div class="gauge" id="gaugeB">
1198
+ <div class="gauge-border"></div>
1199
+ <div class="gauge-center">
1200
+ <div class="gauge-value" id="gaugeBValue">0%</div>
1201
+ <div class="gauge-label">Pesticide B</div>
1202
+ </div>
1203
+ </div>
1204
+ </div>
1205
+ <div class="mixer-motor" id="mixerMotor">
1206
+ <div class="motor-body">
1207
+ <div class="motor-center"></div>
1208
+ <div class="motor-blade"></div>
1209
+ <div class="motor-blade"></div>
1210
+ <div class="motor-blade"></div>
1211
+ </div>
1212
+ </div>
1213
+ </div>
1214
+ </section>
1215
+
1216
+ <!-- Final Dispersion Section -->
1217
+ <section id="dispersion">
1218
+ <h2 class="section-title">Final Dispersion</h2>
1219
+ <p>The final mixed solution is evenly dispersed over the field to ensure optimal crop protection.</p>
1220
+
1221
+ <div class="dispersion-container">
1222
+ <div class="sprayer-drone" id="sprayerDrone">
1223
+ <div class="drone-body">
1224
+ Drone
1225
+ </div>
1226
+ <div class="drone-arm"></div>
1227
+ <div class="drone-arm"></div>
1228
+ <div class="drone-arm"></div>
1229
+ <div class="drone-arm"></div>
1230
+ <div class="drone-propeller"></div>
1231
+ <div class="drone-propeller"></div>
1232
+ <div class="drone-propeller"></div>
1233
+ <div class="drone-propeller"></div>
1234
+ </div>
1235
+ <div class="spray-particles" id="sprayParticles">
1236
+ <div class="particle" style="--delay: 1; --x-move: 10;"></div>
1237
+ <div class="particle" style="--delay: 2; --x-move: -10;"></div>
1238
+ <div class="particle" style="--delay: 3; --x-move: 5;"></div>
1239
+ <div class="particle" style="--delay: 4; --x-move: -5;"></div>
1240
+ <div class="particle" style="--delay: 5; --x-move: 0;"></div>
1241
+ </div>
1242
+ <div class="crop-row">
1243
+ <div class="crop" style="--delay: 1;"></div>
1244
+ <div class="crop" style="--delay: 2;"></div>
1245
+ <div class="crop" style="--delay: 3;"></div>
1246
+ <div class="crop" style="--delay: 4;"></div>
1247
+ <div class="crop" style="--delay: 5;"></div>
1248
+ </div>
1249
+ </div>
1250
+ </section>
1251
+
1252
+ <!-- Footer -->
1253
+ <footer>
1254
+ <div class="footer-content">
1255
+ <div class="footer-logo">PrecisionMix</div>
1256
+ <p>&copy; 2025 PrecisionMix Technologies. All rights reserved.</p>
1257
+ </div>
1258
+ </footer>
1259
+
1260
+ <!-- JavaScript for interactions and animations -->
1261
+ <script>
1262
+ // Wait for the DOM to load
1263
+ document.addEventListener("DOMContentLoaded", function() {
1264
+ // Animate jars
1265
+ const jars = document.querySelectorAll(".jar");
1266
+ jars.forEach((jar, index) => {
1267
+ setTimeout(() => {
1268
+ jar.classList.add("animate");
1269
+ }, index * 300);
1270
+ });
1271
+
1272
+ // Animate smartphone frame
1273
+ const phoneFrame = document.getElementById("phoneFrame");
1274
+ setTimeout(() => {
1275
+ phoneFrame.classList.add("animate");
1276
+ }, 1000);
1277
+
1278
+ // Update mix ratio labels
1279
+ const ratioASlider = document.getElementById("ratioASlider");
1280
+ const ratioBSlider = document.getElementById("ratioBSlider");
1281
+ const ratioAValue = document.getElementById("ratioAValue");
1282
+ const ratioBValue = document.getElementById("ratioBValue");
1283
+
1284
+ ratioASlider.addEventListener("input", function() {
1285
+ ratioAValue.textContent = this.value + "%";
1286
+ ratioBSlider.value = 100 - this.value;
1287
+ ratioBValue.textContent = (100 - this.value) + "%";
1288
+ });
1289
+
1290
+ ratioBSlider.addEventListener("input", function() {
1291
+ ratioBValue.textContent = this.value + "%";
1292
+ ratioASlider.value = 100 - this.value;
1293
+ ratioAValue.textContent = (100 - this.value) + "%";
1294
+ });
1295
+
1296
+ // Mix action button
1297
+ const mixActionBtn = document.getElementById("mixActionBtn");
1298
+ mixActionBtn.addEventListener("click", function() {
1299
+ // Animate signal waves
1300
+ const signalWaves = document.getElementById("signalWaves");
1301
+ signalWaves.style.opacity = 1;
1302
+ setTimeout(() => {
1303
+ signalWaves.style.opacity = 0;
1304
+ }, 2000);
1305
+
1306
+ // Simulate NodeMCU activation
1307
+ const nodemcuBoard = document.getElementById("nodemcuBoard");
1308
+ nodemcuBoard.classList.add("animate");
1309
+ const nodemcuLed = document.getElementById("nodemcuLed");
1310
+ nodemcuLed.classList.add("on");
1311
+
1312
+ // Animate valves
1313
+ const valveA = document.getElementById("valveA");
1314
+ const valveB = document.getElementById("valveB");
1315
+ setTimeout(() => {
1316
+ valveA.classList.add("animate");
1317
+ valveB.classList.add("animate");
1318
+ }, 500);
1319
+
1320
+ // Update gauges during mixing
1321
+ const gaugeAValue = document.getElementById("gaugeAValue");
1322
+ const gaugeBValue = document.getElementById("gaugeBValue");
1323
+ let gaugeValue = 0;
1324
+ const gaugeInterval = setInterval(() => {
1325
+ if (gaugeValue >= parseInt(ratioASlider.value)) {
1326
+ clearInterval(gaugeInterval);
1327
+ } else {
1328
+ gaugeValue++;
1329
+ gaugeAValue.textContent = gaugeValue + "%";
1330
+ }
1331
+ }, 20);
1332
+
1333
+ let gaugeValueB = 0;
1334
+ const gaugeIntervalB = setInterval(() => {
1335
+ if (gaugeValueB >= parseInt(ratioBSlider.value)) {
1336
+ clearInterval(gaugeIntervalB);
1337
+ } else {
1338
+ gaugeValueB++;
1339
+ gaugeBValue.textContent = gaugeValueB + "%";
1340
+ }
1341
+ }, 20);
1342
+
1343
+ // Animate mixer motor
1344
+ const mixerMotor = document.getElementById("mixerMotor");
1345
+ setTimeout(() => {
1346
+ mixerMotor.classList.add("animate");
1347
+ mixerMotor.classList.add("motor-spinning");
1348
+ }, 1000);
1349
+
1350
+ // Animate pouring: Animate final jar filling and simulate streams from jars
1351
+ setTimeout(() => {
1352
+ const finalJar = document.getElementById("finalJar");
1353
+ finalJar.classList.add("animate");
1354
+ const mainJarLiquid = finalJar.querySelector(".main-jar-liquid");
1355
+ mainJarLiquid.style.height = "75%";
1356
+
1357
+ // Trigger pour stream animations from both sides
1358
+ const pourA = finalJar.querySelector(".pour-stream.pour-stream-A");
1359
+ const pourB = finalJar.querySelector(".pour-stream.pour-stream-B");
1360
+ pourA.style.animation = "pourAnimation 1s forwards";
1361
+ pourB.style.animation = "pourAnimation 1s forwards";
1362
+ }, 2000);
1363
+
1364
+ // Animate final dispersion (drone and spray)
1365
+ const sprayerDrone = document.getElementById("sprayerDrone");
1366
+ setTimeout(() => {
1367
+ sprayerDrone.classList.add("animate");
1368
+ sprayerDrone.classList.add("drone-flying");
1369
+ }, 2500);
1370
+ const sprayParticles = document.getElementById("sprayParticles");
1371
+ setTimeout(() => {
1372
+ sprayParticles.classList.add("animate");
1373
+ }, 3000);
1374
+
1375
+ // Reset animations after process complete
1376
+ setTimeout(() => {
1377
+ nodemcuLed.classList.remove("on");
1378
+ valveA.classList.remove("animate");
1379
+ valveB.classList.remove("animate");
1380
+ mixerMotor.classList.remove("motor-spinning");
1381
+ const mainJarLiquid = document.querySelector(".main-jar-liquid");
1382
+ mainJarLiquid.style.height = "0";
1383
+ sprayerDrone.classList.remove("drone-flying");
1384
+ setTimeout(() => {
1385
+ mixerMotor.classList.remove("animate");
1386
+ finalJar.classList.remove("animate");
1387
+ sprayerDrone.classList.remove("animate");
1388
+ sprayParticles.classList.remove("animate");
1389
+ }, 500);
1390
+ }, 8000);
1391
+ });
1392
+ });
1393
+ </script>
1394
+ </body>
1395
  </html>