Hugging Face's logo

Spaces:
mjolnir1122
/
HydroGen-AI1
Build error

App Files Community
mjolnir1122 commited on
Commit
60ad620
·
verified ·
1 Parent(s): fff828b

Upload ecolytics-landing-page.html

Browse files
Files changed (1) hide show
  1. ecolytics-landing-page.html +786 -0
ecolytics-landing-page.html ADDED
@@ -0,0 +1,786 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>EcoLytics: Intelligent Hydrogen Economics Platform</title>
7
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
11
+ <style>
12
+ :root {
13
+ --primary: #0F9D58;
14
+ --secondary: #1E88E5;
15
+ --dark: #121212;
16
+ --light: #f5f5f7;
17
+ --gradient: linear-gradient(135deg, #0F9D58 0%, #1E88E5 100%);
18
+ }
19
+
20
+ * {
21
+ margin: 0;
22
+ padding: 0;
23
+ box-sizing: border-box;
24
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25
+ }
26
+
27
+ body {
28
+ background-color: var(--light);
29
+ color: var(--dark);
30
+ overflow-x: hidden;
31
+ }
32
+
33
+ section {
34
+ padding: 80px 0;
35
+ position: relative;
36
+ }
37
+
38
+ .container {
39
+ max-width: 1200px;
40
+ margin: 0 auto;
41
+ padding: 0 20px;
42
+ }
43
+
44
+ /* Hero Section */
45
+ .hero {
46
+ min-height: 100vh;
47
+ display: flex;
48
+ align-items: center;
49
+ position: relative;
50
+ overflow: hidden;
51
+ background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/api/placeholder/1920/1080') center/cover;
52
+ }
53
+
54
+ #particles-js {
55
+ position: absolute;
56
+ width: 100%;
57
+ height: 100%;
58
+ top: 0;
59
+ left: 0;
60
+ }
61
+
62
+ .hero-content {
63
+ position: relative;
64
+ z-index: 2;
65
+ color: white;
66
+ max-width: 650px;
67
+ }
68
+
69
+ h1 {
70
+ font-size: 4rem;
71
+ margin-bottom: 20px;
72
+ line-height: 1.1;
73
+ background: var(--gradient);
74
+ -webkit-background-clip: text;
75
+ -webkit-text-fill-color: transparent;
76
+ }
77
+
78
+ .subtitle {
79
+ font-size: 1.5rem;
80
+ margin-bottom: 30px;
81
+ font-weight: 300;
82
+ line-height: 1.5;
83
+ }
84
+
85
+ .cta-button {
86
+ display: inline-block;
87
+ background: var(--gradient);
88
+ color: white;
89
+ padding: 15px 40px;
90
+ border-radius: 50px;
91
+ font-size: 1.2rem;
92
+ font-weight: 500;
93
+ text-decoration: none;
94
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
95
+ transition: transform 0.3s, box-shadow 0.3s;
96
+ }
97
+
98
+ .cta-button:hover {
99
+ transform: translateY(-3px);
100
+ box-shadow: 0 15px 30px rgba(0,0,0,0.2);
101
+ }
102
+
103
+ /* Features Section */
104
+ .features {
105
+ background-color: white;
106
+ }
107
+
108
+ .section-title {
109
+ text-align: center;
110
+ margin-bottom: 60px;
111
+ }
112
+
113
+ .section-title h2 {
114
+ font-size: 2.5rem;
115
+ margin-bottom: 15px;
116
+ color: var(--primary);
117
+ }
118
+
119
+ .feature-grid {
120
+ display: grid;
121
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
122
+ gap: 40px;
123
+ }
124
+
125
+ .feature-card {
126
+ background: white;
127
+ border-radius: 15px;
128
+ padding: 30px;
129
+ box-shadow: 0 10px 30px rgba(0,0,0,0.05);
130
+ transition: transform 0.3s;
131
+ }
132
+
133
+ .feature-card:hover {
134
+ transform: translateY(-10px);
135
+ }
136
+
137
+ .feature-icon {
138
+ width: 70px;
139
+ height: 70px;
140
+ background: var(--gradient);
141
+ border-radius: 50%;
142
+ display: flex;
143
+ align-items: center;
144
+ justify-content: center;
145
+ margin-bottom: 25px;
146
+ }
147
+
148
+ .feature-icon svg {
149
+ width: 35px;
150
+ height: 35px;
151
+ fill: white;
152
+ }
153
+
154
+ .feature-card h3 {
155
+ font-size: 1.5rem;
156
+ margin-bottom: 15px;
157
+ color: var(--dark);
158
+ }
159
+
160
+ /* Process Section */
161
+ .process {
162
+ background-color: #f9f9f9;
163
+ overflow: hidden;
164
+ }
165
+
166
+ .process-container {
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: space-between;
170
+ }
171
+
172
+ .process-content {
173
+ flex: 1;
174
+ padding-right: 50px;
175
+ }
176
+
177
+ .process-visual {
178
+ flex: 1;
179
+ position: relative;
180
+ height: 500px;
181
+ }
182
+
183
+ #electrolyzer-canvas {
184
+ width: 100%;
185
+ height: 100%;
186
+ }
187
+
188
+ .process-steps {
189
+ margin-top: 40px;
190
+ }
191
+
192
+ .process-step {
193
+ display: flex;
194
+ margin-bottom: 30px;
195
+ opacity: 0.5;
196
+ transition: opacity 0.3s;
197
+ }
198
+
199
+ .process-step.active {
200
+ opacity: 1;
201
+ }
202
+
203
+ .step-number {
204
+ width: 40px;
205
+ height: 40px;
206
+ background: var(--gradient);
207
+ border-radius: 50%;
208
+ display: flex;
209
+ align-items: center;
210
+ justify-content: center;
211
+ color: white;
212
+ font-weight: bold;
213
+ margin-right: 20px;
214
+ flex-shrink: 0;
215
+ }
216
+
217
+ .step-content h4 {
218
+ font-size: 1.3rem;
219
+ margin-bottom: 10px;
220
+ color: var(--primary);
221
+ }
222
+
223
+ /* Dashboard Preview */
224
+ .dashboard-preview {
225
+ text-align: center;
226
+ background: linear-gradient(135deg, #f9f9f9 0%, #e6e6e6 100%);
227
+ padding: 100px 0;
228
+ }
229
+
230
+ .dashboard-image {
231
+ max-width: 90%;
232
+ margin: 0 auto;
233
+ border-radius: 10px;
234
+ box-shadow: 0 20px 40px rgba(0,0,0,0.15);
235
+ transition: transform 0.3s;
236
+ }
237
+
238
+ .dashboard-image:hover {
239
+ transform: scale(1.02);
240
+ }
241
+
242
+ /* CTA Section */
243
+ .cta-section {
244
+ background: var(--gradient);
245
+ color: white;
246
+ text-align: center;
247
+ padding: 100px 0;
248
+ }
249
+
250
+ .cta-section h2 {
251
+ font-size: 3rem;
252
+ margin-bottom: 20px;
253
+ }
254
+
255
+ .cta-section p {
256
+ font-size: 1.3rem;
257
+ max-width: 700px;
258
+ margin: 0 auto 40px;
259
+ opacity: 0.9;
260
+ }
261
+
262
+ .cta-buttons {
263
+ display: flex;
264
+ justify-content: center;
265
+ gap: 20px;
266
+ }
267
+
268
+ .secondary-cta {
269
+ background: transparent;
270
+ border: 2px solid white;
271
+ }
272
+
273
+ /* Footer */
274
+ footer {
275
+ background: var(--dark);
276
+ color: white;
277
+ padding: 60px 0 30px;
278
+ }
279
+
280
+ .footer-content {
281
+ display: grid;
282
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
283
+ gap: 40px;
284
+ margin-bottom: 60px;
285
+ }
286
+
287
+ .footer-column h4 {
288
+ font-size: 1.2rem;
289
+ margin-bottom: 20px;
290
+ color: var(--primary);
291
+ }
292
+
293
+ .footer-links a {
294
+ display: block;
295
+ color: rgba(255,255,255,0.7);
296
+ margin-bottom: 10px;
297
+ text-decoration: none;
298
+ transition: color 0.3s;
299
+ }
300
+
301
+ .footer-links a:hover {
302
+ color: white;
303
+ }
304
+
305
+ .copyright {
306
+ text-align: center;
307
+ padding-top: 30px;
308
+ border-top: 1px solid rgba(255,255,255,0.1);
309
+ color: rgba(255,255,255,0.5);
310
+ font-size: 0.9rem;
311
+ }
312
+
313
+ /* Animation Classes */
314
+ .fade-in {
315
+ opacity: 0;
316
+ transform: translateY(30px);
317
+ transition: opacity 0.6s, transform 0.6s;
318
+ }
319
+
320
+ .fade-in.active {
321
+ opacity: 1;
322
+ transform: translateY(0);
323
+ }
324
+
325
+ /* Responsive Styles */
326
+ @media (max-width: 768px) {
327
+ h1 {
328
+ font-size: 3rem;
329
+ }
330
+
331
+ .process-container {
332
+ flex-direction: column;
333
+ }
334
+
335
+ .process-content {
336
+ padding-right: 0;
337
+ margin-bottom: 50px;
338
+ text-align: center;
339
+ }
340
+
341
+ .process-visual {
342
+ height: 400px;
343
+ width: 100%;
344
+ }
345
+
346
+ .cta-buttons {
347
+ flex-direction: column;
348
+ align-items: center;
349
+ }
350
+ }
351
+ </style>
352
+ </head>
353
+ <body>
354
+ <!-- Hero Section -->
355
+ <section class="hero">
356
+ <div id="particles-js"></div>
357
+ <div class="container">
358
+ <div class="hero-content">
359
+ <h1>EcoLytics</h1>
360
+ <p class="subtitle">Intelligent Hydrogen Economics Platform powered by AI to revolutionize techno-economic analysis for green hydrogen projects.</p>
361
+ <a href="#features" class="cta-button">Explore Features</a>
362
+ </div>
363
+ </div>
364
+ </section>
365
+
366
+ <!-- Features Section -->
367
+ <section id="features" class="features">
368
+ <div class="container">
369
+ <div class="section-title fade-in">
370
+ <h2>Intelligent Analysis Features</h2>
371
+ <p>Reimagining green hydrogen project planning with advanced AI capabilities</p>
372
+ </div>
373
+
374
+ <div class="feature-grid">
375
+ <div class="feature-card fade-in">
376
+ <div class="feature-icon">
377
+ <svg viewBox="0 0 24 24">
378
+ <path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"></path>
379
+ </svg>
380
+ </div>
381
+ <h3>Predictive Cost Modeling</h3>
382
+ <p>ML algorithms forecast CAPEX/OPEX with 94% accuracy, accounting for technology evolution curves and market dynamics.</p>
383
+ </div>
384
+
385
+ <div class="feature-card fade-in">
386
+ <div class="feature-icon">
387
+ <svg viewBox="0 0 24 24">
388
+ <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"></path>
389
+ </svg>
390
+ </div>
391
+ <h3>Configuration Optimizer</h3>
392
+ <p>Suggests optimal electrolyzer setup based on location, scale, and grid characteristics with dynamic sensitivity analysis.</p>
393
+ </div>
394
+
395
+ <div class="feature-card fade-in">
396
+ <div class="feature-icon">
397
+ <svg viewBox="0 0 24 24">
398
+ <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
399
+ </svg>
400
+ </div>
401
+ <h3>Interactive Visualization</h3>
402
+ <p>Dynamic dashboards for real-time ROI scenario planning and cost breakdown across the entire hydrogen value chain.</p>
403
+ </div>
404
+
405
+ <div class="feature-card fade-in">
406
+ <div class="feature-icon">
407
+ <svg viewBox="0 0 24 24">
408
+ <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z"></path>
409
+ </svg>
410
+ </div>
411
+ <h3>Policy Impact Simulator</h3>
412
+ <p>Evaluates how incentives and regulations affect project economics with regional comparison tool for global investment decisions.</p>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </section>
417
+
418
+ <!-- Process Section -->
419
+ <section class="process">
420
+ <div class="container process-container">
421
+ <div class="process-content fade-in">
422
+ <h2>Electrolysis Optimization Process</h2>
423
+ <p>Our AI-powered platform analyzes every aspect of the green hydrogen production process to maximize efficiency and minimize costs.</p>
424
+
425
+ <div class="process-steps">
426
+ <div class="process-step active" data-step="1">
427
+ <div class="step-number">1</div>
428
+ <div class="step-content">
429
+ <h4>Input Configuration</h4>
430
+ <p>Define project parameters including location, capacity, electrolyzer type, and renewable energy sources.</p>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="process-step" data-step="2">
435
+ <div class="step-number">2</div>
436
+ <div class="step-content">
437
+ <h4>AI Analysis</h4>
438
+ <p>Our machine learning models analyze your configuration against hundreds of market variables and historical data.</p>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="process-step" data-step="3">
443
+ <div class="step-number">3</div>
444
+ <div class="step-content">
445
+ <h4>Optimization Recommendations</h4>
446
+ <p>Receive detailed recommendations for optimizing electrolyzer efficiency, energy usage, and overall economics.</p>
447
+ </div>
448
+ </div>
449
+
450
+ <div class="process-step" data-step="4">
451
+ <div class="step-number">4</div>
452
+ <div class="step-content">
453
+ <h4>Scenario Planning</h4>
454
+ <p>Explore multiple scenarios to understand sensitivities and identify the most robust configuration for your project.</p>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="process-visual fade-in">
461
+ <canvas id="electrolyzer-canvas"></canvas>
462
+ </div>
463
+ </div>
464
+ </section>
465
+
466
+ <!-- Dashboard Preview -->
467
+ <section class="dashboard-preview">
468
+ <div class="container">
469
+ <div class="section-title fade-in">
470
+ <h2>Intelligent Dashboard</h2>
471
+ <p>Visualize complex hydrogen economics with our intuitive dashboard</p>
472
+ </div>
473
+
474
+ <img src="/api/placeholder/1200/800" alt="EcoLytics Dashboard" class="dashboard-image fade-in">
475
+ </div>
476
+ </section>
477
+
478
+ <!-- CTA Section -->
479
+ <section class="cta-section">
480
+ <div class="container">
481
+ <h2 class="fade-in">Ready to Transform Your Hydrogen Projects?</h2>
482
+ <p class="fade-in">Join the hydrogen revolution with AI-powered techno-economic analysis that gives you the competitive edge.</p>
483
+
484
+ <div class="cta-buttons fade-in">
485
+ <a href="#" class="cta-button">Request a Demo</a>
486
+ <a href="#" class="cta-button secondary-cta">Learn More</a>
487
+ </div>
488
+ </div>
489
+ </section>
490
+
491
+ <!-- Footer -->
492
+ <footer>
493
+ <div class="container">
494
+ <div class="footer-content">
495
+ <div class="footer-column">
496
+ <h4>EcoLytics</h4>
497
+ <div class="footer-links">
498
+ <a href="#">About Us</a>
499
+ <a href="#">Our Team</a>
500
+ <a href="#">Careers</a>
501
+ <a href="#">Contact</a>
502
+ </div>
503
+ </div>
504
+
505
+ <div class="footer-column">
506
+ <h4>Product</h4>
507
+ <div class="footer-links">
508
+ <a href="#">Features</a>
509
+ <a href="#">Pricing</a>
510
+ <a href="#">Case Studies</a>
511
+ <a href="#">API Documentation</a>
512
+ </div>
513
+ </div>
514
+
515
+ <div class="footer-column">
516
+ <h4>Resources</h4>
517
+ <div class="footer-links">
518
+ <a href="#">Blog</a>
519
+ <a href="#">Whitepapers</a>
520
+ <a href="#">Webinars</a>
521
+ <a href="#">Knowledge Base</a>
522
+ </div>
523
+ </div>
524
+
525
+ <div class="footer-column">
526
+ <h4>Legal</h4>
527
+ <div class="footer-links">
528
+ <a href="#">Privacy Policy</a>
529
+ <a href="#">Terms of Service</a>
530
+ <a href="#">Cookie Policy</a>
531
+ <a href="#">GDPR Compliance</a>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="copyright">
537
+ &copy; 2025 EcoLytics. All rights reserved.
538
+ </div>
539
+ </div>
540
+ </footer>
541
+
542
+ <script>
543
+ // Initialization
544
+ document.addEventListener('DOMContentLoaded', () => {
545
+ // Initialize GSAP ScrollTrigger
546
+ gsap.registerPlugin(ScrollTrigger);
547
+
548
+ // Fade In Animations
549
+ const fadeElements = document.querySelectorAll('.fade-in');
550
+ fadeElements.forEach(element => {
551
+ ScrollTrigger.create({
552
+ trigger: element,
553
+ start: "top 80%",
554
+ onEnter: () => element.classList.add('active'),
555
+ once: true
556
+ });
557
+ });
558
+
559
+ // Process Steps Animation
560
+ const processSteps = document.querySelectorAll('.process-step');
561
+ let currentStep = 0;
562
+
563
+ function highlightStep() {
564
+ processSteps.forEach(step => step.classList.remove('active'));
565
+ processSteps[currentStep].classList.add('active');
566
+ currentStep = (currentStep + 1) % processSteps.length;
567
+ }
568
+
569
+ // Change step every 3 seconds
570
+ setInterval(highlightStep, 3000);
571
+
572
+ // Initialize Particles.js
573
+ particlesJS('particles-js', {
574
+ particles: {
575
+ number: {
576
+ value: 80,
577
+ density: {
578
+ enable: true,
579
+ value_area: 800
580
+ }
581
+ },
582
+ color: {
583
+ value: "#1E88E5"
584
+ },
585
+ shape: {
586
+ type: "circle",
587
+ },
588
+ opacity: {
589
+ value: 0.5,
590
+ random: true,
591
+ },
592
+ size: {
593
+ value: 3,
594
+ random: true,
595
+ },
596
+ line_linked: {
597
+ enable: true,
598
+ distance: 150,
599
+ color: "#0F9D58",
600
+ opacity: 0.4,
601
+ width: 1
602
+ },
603
+ move: {
604
+ enable: true,
605
+ speed: 2,
606
+ direction: "none",
607
+ random: true,
608
+ straight: false,
609
+ out_mode: "out",
610
+ bounce: false,
611
+ }
612
+ },
613
+ interactivity: {
614
+ detect_on: "canvas",
615
+ events: {
616
+ onhover: {
617
+ enable: true,
618
+ mode: "grab"
619
+ },
620
+ onclick: {
621
+ enable: true,
622
+ mode: "push"
623
+ },
624
+ resize: true
625
+ },
626
+ modes: {
627
+ grab: {
628
+ distance: 140,
629
+ line_linked: {
630
+ opacity: 1
631
+ }
632
+ },
633
+ push: {
634
+ particles_nb: 4
635
+ }
636
+ }
637
+ },
638
+ retina_detect: true
639
+ });
640
+
641
+ // Initialize Three.js Electrolyzer Visualization
642
+ initElectrolyzerAnimation();
643
+ });
644
+
645
+ // Three.js Electrolyzer Animation
646
+ function initElectrolyzerAnimation() {
647
+ const canvas = document.getElementById('electrolyzer-canvas');
648
+
649
+ // Scene, camera, renderer
650
+ const scene = new THREE.Scene();
651
+ scene.background = new THREE.Color(0xf9f9f9);
652
+
653
+ const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
654
+ camera.position.z = 5;
655
+
656
+ const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
657
+ renderer.setSize(canvas.clientWidth, canvas.clientHeight);
658
+
659
+ // Electrolyzer components
660
+ const electrolyzerGroup = new THREE.Group();
661
+
662
+ // Main cylinder
663
+ const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 3, 32);
664
+ const cylinderMaterial = new THREE.MeshPhongMaterial({
665
+ color: 0x888888,
666
+ transparent: true,
667
+ opacity: 0.8,
668
+ specular: 0x111111,
669
+ shininess: 100
670
+ });
671
+ const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
672
+ electrolyzerGroup.add(cylinder);
673
+
674
+ // Electrodes
675
+ const electrodeGeometry = new THREE.BoxGeometry(0.1, 2.5, 0.5);
676
+ const anodeMaterial = new THREE.MeshPhongMaterial({ color: 0x1E88E5 });
677
+ const cathodeMaterial = new THREE.MeshPhongMaterial({ color: 0x0F9D58 });
678
+
679
+ const anode = new THREE.Mesh(electrodeGeometry, anodeMaterial);
680
+ anode.position.x = -0.4;
681
+ electrolyzerGroup.add(anode);
682
+
683
+ const cathode = new THREE.Mesh(electrodeGeometry, cathodeMaterial);
684
+ cathode.position.x = 0.4;
685
+ electrolyzerGroup.add(cathode);
686
+
687
+ // Water particles
688
+ const particles = new THREE.Group();
689
+ const particleGeometry = new THREE.SphereGeometry(0.03, 8, 8);
690
+ const particleMaterial = new THREE.MeshBasicMaterial({ color: 0x00bfff });
691
+
692
+ for (let i = 0; i < 50; i++) {
693
+ const particle = new THREE.Mesh(particleGeometry, particleMaterial);
694
+ particle.position.x = (Math.random() - 0.5) * 1.5;
695
+ particle.position.y = (Math.random() - 0.5) * 2.5;
696
+ particle.position.z = (Math.random() - 0.5) * 1.5;
697
+ particle.userData = {
698
+ speed: Math.random() * 0.01 + 0.005,
699
+ direction: Math.random() > 0.5 ? 1 : -1
700
+ };
701
+ particles.add(particle);
702
+ }
703
+ electrolyzerGroup.add(particles);
704
+
705
+ // Hydrogen and Oxygen bubbles
706
+ const bubbles = new THREE.Group();
707
+ const hydrogenMaterial = new THREE.MeshBasicMaterial({ color: 0x88ff88 });
708
+ const oxygenMaterial = new THREE.MeshBasicMaterial({ color: 0xff8888 });
709
+
710
+ for (let i = 0; i < 30; i++) {
711
+ const bubbleMaterial = i % 2 === 0 ? hydrogenMaterial : oxygenMaterial;
712
+ const size = i % 2 === 0 ? 0.04 : 0.02; // hydrogen is bigger
713
+ const bubbleGeometry = new THREE.SphereGeometry(size, 8, 8);
714
+ const bubble = new THREE.Mesh(bubbleGeometry, bubbleMaterial);
715
+
716
+ // Position to either side
717
+ const side = i % 2 === 0 ? 0.4 : -0.4;
718
+ bubble.position.x = side + (Math.random() - 0.5) * 0.3;
719
+ bubble.position.y = (Math.random() - 0.5) * 2.5;
720
+ bubble.position.z = (Math.random() - 0.5) * 0.5;
721
+
722
+ bubble.userData = {
723
+ speed: Math.random() * 0.015 + 0.005,
724
+ wiggle: Math.random() * 0.01,
725
+ phaseOffset: Math.random() * Math.PI * 2
726
+ };
727
+ bubbles.add(bubble);
728
+ }
729
+ electrolyzerGroup.add(bubbles);
730
+
731
+ // Add to scene
732
+ scene.add(electrolyzerGroup);
733
+
734
+ // Lighting
735
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
736
+ scene.add(ambientLight);
737
+
738
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
739
+ directionalLight.position.set(5, 5, 5);
740
+ scene.add(directionalLight);
741
+
742
+ const backLight = new THREE.DirectionalLight(0xffffff, 0.3);
743
+ backLight.position.set(-5, 5, -5);
744
+ scene.add(backLight);
745
+
746
+ // Animation
747
+ function animate() {
748
+ requestAnimationFrame(animate);
749
+
750
+ // Rotate electrolyzer
751
+ electrolyzerGroup.rotation.y += 0.005;
752
+
753
+ // Animate water particles
754
+ particles.children.forEach(particle => {
755
+ particle.position.y += particle.userData.speed * particle.userData.direction;
756
+ if (particle.position.y > 1.5 || particle.position.y < -1.5) {
757
+ particle.userData.direction *= -1;
758
+ }
759
+ });
760
+
761
+ // Animate bubbles
762
+ bubbles.children.forEach(bubble => {
763
+ bubble.position.y += bubble.userData.speed;
764
+ bubble.position.x += Math.sin(Date.now() * 0.001 + bubble.userData.phaseOffset) * bubble.userData.wiggle;
765
+
766
+ if (bubble.position.y > 1.5) {
767
+ bubble.position.y = -1.5;
768
+ bubble.position.x = (bubble.position.x > 0 ? 0.4 : -0.4) + (Math.random() - 0.5) * 0.3;
769
+ }
770
+ });
771
+
772
+ renderer.render(scene, camera);
773
+ }
774
+
775
+ // Handle resize
776
+ window.addEventListener('resize', () => {
777
+ camera.aspect = canvas.clientWidth / canvas.clientHeight;
778
+ camera.updateProjectionMatrix();
779
+ renderer.setSize(canvas.clientWidth, canvas.clientHeight);
780
+ });
781
+
782
+ animate();
783
+ }
784
+ </script>
785
+ </body>
786
+ </html>