Hugging Face's logo

Spaces:
Alexhuang1010
/
Forex_Ea_Pro
Running

App Files Community
Alexhuang1010 commited on
Commit
0694738
·
verified ·
1 Parent(s): 435bd2c

update

Browse files
Files changed (1) hide show
  1. index.html +659 -19
index.html CHANGED
@@ -1,19 +1,659 @@
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>Forex EA Pro - Automated Trading Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
12
+ }
13
+ .product-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .payment-method:hover {
18
+ border-color: #3b82f6;
19
+ }
20
+ #checkoutModal {
21
+ transition: all 0.3s ease;
22
+ }
23
+ .trading-chart {
24
+ height: 400px;
25
+ background-color: #1e293b;
26
+ border-radius: 0.5rem;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50 font-sans">
31
+ <!-- Navigation -->
32
+ <nav class="gradient-bg text-white shadow-lg">
33
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
34
+ <div class="flex items-center space-x-2">
35
+ <i class="fas fa-chart-line text-2xl"></i>
36
+ <span class="text-xl font-bold">Forex EA Pro</span>
37
+ </div>
38
+ <div class="hidden md:flex space-x-8">
39
+ <a href="#home" class="hover:text-blue-200 transition">Home</a>
40
+ <a href="#products" class="hover:text-blue-200 transition">Products</a>
41
+ <a href="#features" class="hover:text-blue-200 transition">Features</a>
42
+ <a href="#testimonials" class="hover:text-blue-200 transition">Testimonials</a>
43
+ <a href="#faq" class="hover:text-blue-200 transition">FAQ</a>
44
+ </div>
45
+ <button class="md:hidden text-white focus:outline-none">
46
+ <i class="fas fa-bars text-2xl"></i>
47
+ </button>
48
+ </div>
49
+ </nav>
50
+
51
+ <!-- Hero Section -->
52
+ <section id="home" class="gradient-bg text-white py-20">
53
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
54
+ <div class="md:w-1/2 mb-10 md:mb-0">
55
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Revolutionize Your Forex Trading</h1>
56
+ <p class="text-xl mb-8 text-blue-100">Our expert advisors automate your trading strategy with precision, maximizing profits while minimizing risks.</p>
57
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
58
+ <a href="#products" class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-semibold text-center transition">Explore EAs</a>
59
+ <a href="#features" class="border border-white text-white hover:bg-blue-700 px-6 py-3 rounded-lg font-semibold text-center transition">Learn More</a>
60
+ </div>
61
+ </div>
62
+ <div class="md:w-1/2 flex justify-center">
63
+ <div class="trading-chart w-full max-w-lg relative">
64
+ <div class="absolute inset-0 flex items-center justify-center">
65
+ <div class="text-center p-6">
66
+ <i class="fas fa-chart-pie text-6xl text-blue-300 mb-4"></i>
67
+ <p class="text-blue-200">Live Trading Performance</p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </section>
74
+
75
+ <!-- Stats Section -->
76
+ <section class="bg-white py-12">
77
+ <div class="container mx-auto px-4">
78
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
79
+ <div class="p-6 rounded-lg border border-gray-200">
80
+ <div class="text-4xl font-bold text-blue-600 mb-2">95%</div>
81
+ <div class="text-gray-600">Win Rate</div>
82
+ </div>
83
+ <div class="p-6 rounded-lg border border-gray-200">
84
+ <div class="text-4xl font-bold text-blue-600 mb-2">24/7</div>
85
+ <div class="text-gray-600">Trading</div>
86
+ </div>
87
+ <div class="p-6 rounded-lg border border-gray-200">
88
+ <div class="text-4xl font-bold text-blue-600 mb-2">10,000+</div>
89
+ <div class="text-gray-600">Satisfied Traders</div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </section>
94
+
95
+ <!-- Products Section -->
96
+ <section id="products" class="py-16 bg-gray-50">
97
+ <div class="container mx-auto px-4">
98
+ <h2 class="text-3xl font-bold text-center mb-4">Our Expert Advisors</h2>
99
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Choose from our selection of high-performance trading robots designed for different market conditions.</p>
100
+
101
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
102
+ <!-- Product 1 -->
103
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
104
+ <div class="p-6">
105
+ <div class="flex justify-between items-start mb-4">
106
+ <div>
107
+ <h3 class="text-xl font-bold">Scalper Pro</h3>
108
+ <span class="text-sm text-gray-500">Best for short-term trades</span>
109
+ </div>
110
+ <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">BESTSELLER</span>
111
+ </div>
112
+ <p class="text-gray-600 mb-6">Designed to capture small price movements with high frequency and precision.</p>
113
+ <ul class="space-y-2 mb-6">
114
+ <li class="flex items-center">
115
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
116
+ <span>5-10 trades per day</span>
117
+ </li>
118
+ <li class="flex items-center">
119
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
120
+ <span>1:2 risk/reward ratio</span>
121
+ </li>
122
+ <li class="flex items-center">
123
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
124
+ <span>Works on EUR/USD, GBP/USD</span>
125
+ </li>
126
+ </ul>
127
+ <div class="mb-6">
128
+ <span class="text-3xl font-bold">$299</span>
129
+ <span class="text-gray-500 line-through ml-2">$399</span>
130
+ </div>
131
+ <button onclick="openCheckoutModal('Scalper Pro', 299)" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition">
132
+ Buy Now
133
+ </button>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Product 2 -->
138
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
139
+ <div class="p-6">
140
+ <div class="flex justify-between items-start mb-4">
141
+ <div>
142
+ <h3 class="text-xl font-bold">Trend Master</h3>
143
+ <span class="text-sm text-gray-500">Best for trending markets</span>
144
+ </div>
145
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">NEW</span>
146
+ </div>
147
+ <p class="text-gray-600 mb-6">Identifies and rides strong market trends with optimized entry and exit points.</p>
148
+ <ul class="space-y-2 mb-6">
149
+ <li class="flex items-center">
150
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
151
+ <span>2-5 trades per week</span>
152
+ </li>
153
+ <li class="flex items-center">
154
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
155
+ <span>1:3 risk/reward ratio</span>
156
+ </li>
157
+ <li class="flex items-center">
158
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
159
+ <span>Works on all major pairs</span>
160
+ </li>
161
+ </ul>
162
+ <div class="mb-6">
163
+ <span class="text-3xl font-bold">$399</span>
164
+ <span class="text-gray-500 line-through ml-2">$499</span>
165
+ </div>
166
+ <button onclick="openCheckoutModal('Trend Master', 399)" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition">
167
+ Buy Now
168
+ </button>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Product 3 -->
173
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
174
+ <div class="p-6">
175
+ <div class="flex justify-between items-start mb-4">
176
+ <div>
177
+ <h3 class="text-xl font-bold">Gold Hunter</h3>
178
+ <span class="text-sm text-gray-500">Specialized for XAU/USD</span>
179
+ </div>
180
+ <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">LIMITED</span>
181
+ </div>
182
+ <p class="text-gray-600 mb-6">Optimized specifically for gold trading with volatility-based algorithms.</p>
183
+ <ul class="space-y-2 mb-6">
184
+ <li class="flex items-center">
185
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
186
+ <span>3-8 trades per week</span>
187
+ </li>
188
+ <li class="flex items-center">
189
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
190
+ <span>1:2.5 risk/reward ratio</span>
191
+ </li>
192
+ <li class="flex items-center">
193
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
194
+ <span>Exclusive to XAU/USD</span>
195
+ </li>
196
+ </ul>
197
+ <div class="mb-6">
198
+ <span class="text-3xl font-bold">$349</span>
199
+ <span class="text-gray-500 line-through ml-2">$449</span>
200
+ </div>
201
+ <button onclick="openCheckoutModal('Gold Hunter', 349)" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition">
202
+ Buy Now
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </section>
209
+
210
+ <!-- Features Section -->
211
+ <section id="features" class="py-16 bg-white">
212
+ <div class="container mx-auto px-4">
213
+ <h2 class="text-3xl font-bold text-center mb-4">Why Choose Our EAs</h2>
214
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Our expert advisors are built with cutting-edge technology and years of trading experience.</p>
215
+
216
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
217
+ <div class="flex items-start">
218
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
219
+ <i class="fas fa-robot text-blue-600 text-xl"></i>
220
+ </div>
221
+ <div>
222
+ <h3 class="text-xl font-semibold mb-2">Fully Automated</h3>
223
+ <p class="text-gray-600">Once installed, our EAs work 24/7 without your intervention, executing trades based on predefined algorithms.</p>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="flex items-start">
228
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
229
+ <i class="fas fa-shield-alt text-blue-600 text-xl"></i>
230
+ </div>
231
+ <div>
232
+ <h3 class="text-xl font-semibold mb-2">Risk Management</h3>
233
+ <p class="text-gray-600">Built-in stop loss, take profit, and money management systems protect your capital.</p>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="flex items-start">
238
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
239
+ <i class="fas fa-sync-alt text-blue-600 text-xl"></i>
240
+ </div>
241
+ <div>
242
+ <h3 class="text-xl font-semibold mb-2">Continuous Updates</h3>
243
+ <p class="text-gray-600">We regularly update our algorithms to adapt to changing market conditions.</p>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="flex items-start">
248
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
249
+ <i class="fas fa-headset text-blue-600 text-xl"></i>
250
+ </div>
251
+ <div>
252
+ <h3 class="text-xl font-semibold mb-2">Premium Support</h3>
253
+ <p class="text-gray-600">Our team is available to help with installation, configuration, and any questions.</p>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </section>
259
+
260
+ <!-- Testimonials Section -->
261
+ <section id="testimonials" class="py-16 bg-gray-50">
262
+ <div class="container mx-auto px-4">
263
+ <h2 class="text-3xl font-bold text-center mb-4">What Our Clients Say</h2>
264
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Don't just take our word for it - hear from traders who've used our EAs.</p>
265
+
266
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
267
+ <div class="bg-white p-6 rounded-lg shadow">
268
+ <div class="flex items-center mb-4">
269
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
270
+ <span class="text-blue-600 font-bold">JD</span>
271
+ </div>
272
+ <div>
273
+ <h4 class="font-semibold">John D.</h4>
274
+ <div class="flex text-yellow-400">
275
+ <i class="fas fa-star"></i>
276
+ <i class="fas fa-star"></i>
277
+ <i class="fas fa-star"></i>
278
+ <i class="fas fa-star"></i>
279
+ <i class="fas fa-star"></i>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ <p class="text-gray-600">"The Scalper Pro has transformed my trading. I went from inconsistent results to steady profits. The automated nature means I don't miss opportunities while I sleep!"</p>
284
+ </div>
285
+
286
+ <div class="bg-white p-6 rounded-lg shadow">
287
+ <div class="flex items-center mb-4">
288
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
289
+ <span class="text-blue-600 font-bold">SM</span>
290
+ </div>
291
+ <div>
292
+ <h4 class="font-semibold">Sarah M.</h4>
293
+ <div class="flex text-yellow-400">
294
+ <i class="fas fa-star"></i>
295
+ <i class="fas fa-star"></i>
296
+ <i class="fas fa-star"></i>
297
+ <i class="fas fa-star"></i>
298
+ <i class="fas fa-star"></i>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ <p class="text-gray-600">"As someone with a full-time job, I needed automation. The Trend Master EA has given me returns I never thought possible with my limited time."</p>
303
+ </div>
304
+
305
+ <div class="bg-white p-6 rounded-lg shadow">
306
+ <div class="flex items-center mb-4">
307
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
308
+ <span class="text-blue-600 font-bold">RK</span>
309
+ </div>
310
+ <div>
311
+ <h4 class="font-semibold">Robert K.</h4>
312
+ <div class="flex text-yellow-400">
313
+ <i class="fas fa-star"></i>
314
+ <i class="fas fa-star"></i>
315
+ <i class="fas fa-star"></i>
316
+ <i class="fas fa-star"></i>
317
+ <i class="fas fa-star-half-alt"></i>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ <p class="text-gray-600">"The Gold Hunter EA has been a game-changer for my portfolio. The specialized focus on gold means it understands the unique characteristics of this market."</p>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </section>
326
+
327
+ <!-- FAQ Section -->
328
+ <section id="faq" class="py-16 bg-white">
329
+ <div class="container mx-auto px-4">
330
+ <h2 class="text-3xl font-bold text-center mb-4">Frequently Asked Questions</h2>
331
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Find answers to common questions about our Expert Advisors.</p>
332
+
333
+ <div class="max-w-3xl mx-auto">
334
+ <div class="mb-6 border-b border-gray-200 pb-6">
335
+ <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg focus:outline-none">
336
+ <span>What is an Expert Advisor (EA)?</span>
337
+ <i class="fas fa-chevron-down transition-transform"></i>
338
+ </button>
339
+ <div class="faq-content mt-4 text-gray-600 hidden">
340
+ <p>An Expert Advisor is an automated trading system that executes trades on your behalf based on predefined algorithms. It connects to your trading platform (like MetaTrader 4 or 5) and can analyze the market and place trades without your direct involvement.</p>
341
+ </div>
342
+ </div>
343
+
344
+ <div class="mb-6 border-b border-gray-200 pb-6">
345
+ <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg focus:outline-none">
346
+ <span>How do I install the EA after purchase?</span>
347
+ <i class="fas fa-chevron-down transition-transform"></i>
348
+ </button>
349
+ <div class="faq-content mt-4 text-gray-600 hidden">
350
+ <p>After your purchase is complete, you'll receive an email with the EA file and detailed installation instructions. Generally, you'll need to copy the .ex4 or .ex5 file to your MetaTrader's Experts folder, then restart your platform. We also provide video tutorials for visual learners.</p>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="mb-6 border-b border-gray-200 pb-6">
355
+ <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg focus:outline-none">
356
+ <span>What broker do you recommend?</span>
357
+ <i class="fas fa-chevron-down transition-transform"></i>
358
+ </button>
359
+ <div class="faq-content mt-4 text-gray-600 hidden">
360
+ <p>Our EAs work with any broker that supports MetaTrader 4 or 5. However, we recommend brokers with tight spreads, fast execution, and no dealing desk intervention. Some of our clients have had good experiences with IC Markets, Pepperstone, and FXPro, but you're free to choose any reputable broker.</p>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="mb-6 border-b border-gray-200 pb-6">
365
+ <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg focus:outline-none">
366
+ <span>Can I test the EA before buying?</span>
367
+ <i class="fas fa-chevron-down transition-transform"></i>
368
+ </button>
369
+ <div class="faq-content mt-4 text-gray-600 hidden">
370
+ <p>We offer a 14-day money-back guarantee instead of a free trial. This allows you to properly test the EA on your live account with real market conditions. If you're not satisfied within 14 days, we'll refund your purchase no questions asked.</p>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="mb-6">
375
+ <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg focus:outline-none">
376
+ <span>What's included in the purchase?</span>
377
+ <i class="fas fa-chevron-down transition-transform"></i>
378
+ </button>
379
+ <div class="faq-content mt-4 text-gray-600 hidden">
380
+ <p>Your purchase includes the EA file, detailed installation guide, recommended settings for different account sizes, access to our private support channel, and free updates for one year. After one year, you can continue using the EA but will need to renew for updates (optional).</p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </section>
386
+
387
+ <!-- CTA Section -->
388
+ <section class="gradient-bg text-white py-16">
389
+ <div class="container mx-auto px-4 text-center">
390
+ <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Trading?</h2>
391
+ <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-8">Join thousands of traders who've automated their success with our Expert Advisors.</p>
392
+ <a href="#products" class="bg-white text-blue-600 hover:bg-blue-50 px-8 py-4 rounded-lg font-semibold text-lg inline-block transition">Browse EAs Now</a>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- Footer -->
397
+ <footer class="bg-gray-900 text-white py-12">
398
+ <div class="container mx-auto px-4">
399
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
400
+ <div>
401
+ <h3 class="text-xl font-bold mb-4 flex items-center">
402
+ <i class="fas fa-chart-line mr-2"></i>
403
+ Forex EA Pro
404
+ </h3>
405
+ <p class="text-gray-400">Automated trading solutions for forex traders of all levels.</p>
406
+ </div>
407
+
408
+ <div>
409
+ <h4 class="font-semibold mb-4">Products</h4>
410
+ <ul class="space-y-2">
411
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Scalper Pro</a></li>
412
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Trend Master</a></li>
413
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Gold Hunter</a></li>
414
+ <li><a href="#" class="text-gray-400 hover:text-white transition">All EAs</a></li>
415
+ </ul>
416
+ </div>
417
+
418
+ <div>
419
+ <h4 class="font-semibold mb-4">Resources</h4>
420
+ <ul class="space-y-2">
421
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
422
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
423
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
424
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li>
425
+ </ul>
426
+ </div>
427
+
428
+ <div>
429
+ <h4 class="font-semibold mb-4">Contact</h4>
430
+ <ul class="space-y-2">
431
+ <li class="flex items-center">
432
+ <i class="fas fa-envelope mr-2 text-gray-400"></i>
433
+ <span>[email protected]</span>
434
+ </li>
435
+ <li class="flex items-center">
436
+ <i class="fas fa-phone mr-2 text-gray-400"></i>
437
+ <span>+1 (555) 123-4567</span>
438
+ </li>
439
+ <li class="flex items-center">
440
+ <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
441
+ <span>123 Trading St, Market City</span>
442
+ </li>
443
+ </ul>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
448
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Forex EA Pro. All rights reserved.</p>
449
+ <div class="flex space-x-6">
450
+ <a href="#" class="text-gray-400 hover:text-white transition">
451
+ <i class="fab fa-facebook-f"></i>
452
+ </a>
453
+ <a href="#" class="text-gray-400 hover:text-white transition">
454
+ <i class="fab fa-twitter"></i>
455
+ </a>
456
+ <a href="#" class="text-gray-400 hover:text-white transition">
457
+ <i class="fab fa-instagram"></i>
458
+ </a>
459
+ <a href="#" class="text-gray-400 hover:text-white transition">
460
+ <i class="fab fa-youtube"></i>
461
+ </a>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </footer>
466
+
467
+ <!-- Checkout Modal -->
468
+ <div id="checkoutModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
469
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-screen overflow-y-auto">
470
+ <div class="p-6">
471
+ <div class="flex justify-between items-center mb-6">
472
+ <h3 class="text-2xl font-bold">Complete Your Purchase</h3>
473
+ <button onclick="closeCheckoutModal()" class="text-gray-500 hover:text-gray-700">
474
+ <i class="fas fa-times"></i>
475
+ </button>
476
+ </div>
477
+
478
+ <div class="mb-6">
479
+ <h4 class="font-semibold mb-2">Product:</h4>
480
+ <p id="modalProductName" class="text-gray-700"></p>
481
+ </div>
482
+
483
+ <div class="mb-6">
484
+ <h4 class="font-semibold mb-2">Price:</h4>
485
+ <p id="modalProductPrice" class="text-2xl font-bold text-blue-600"></p>
486
+ </div>
487
+
488
+ <form id="checkoutForm" class="space-y-4">
489
+ <div>
490
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address *</label>
491
+ <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
492
+ </div>
493
+
494
+ <div>
495
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
496
+ <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
497
+ </div>
498
+
499
+ <div>
500
+ <label for="mt4id" class="block text-sm font-medium text-gray-700 mb-1">MT4 Account ID (optional)</label>
501
+ <input type="text" id="mt4id" name="mt4id" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
502
+ <p class="text-xs text-gray-500 mt-1">Provide if you'd like personalized setup assistance</p>
503
+ </div>
504
+
505
+ <div class="pt-4">
506
+ <h4 class="font-semibold mb-3">Payment Method</h4>
507
+ <div class="grid grid-cols-2 gap-3">
508
+ <label class="payment-method border border-gray-300 rounded-md p-3 cursor-pointer has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
509
+ <input type="radio" name="payment" value="card" checked class="mr-2">
510
+ <i class="fab fa-cc-visa text-2xl text-blue-800 mr-2"></i>
511
+ <i class="fab fa-cc-mastercard text-2xl text-red-700"></i>
512
+ <p class="text-sm mt-1">Credit/Debit Card</p>
513
+ </label>
514
+
515
+ <label class="payment-method border border-gray-300 rounded-md p-3 cursor-pointer has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
516
+ <input type="radio" name="payment" value="paypal" class="mr-2">
517
+ <i class="fab fa-paypal text-2xl text-blue-700"></i>
518
+ <p class="text-sm mt-1">PayPal</p>
519
+ </label>
520
+
521
+ <label class="payment-method border border-gray-300 rounded-md p-3 cursor-pointer has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
522
+ <input type="radio" name="payment" value="crypto" class="mr-2">
523
+ <i class="fab fa-bitcoin text-2xl text-orange-500"></i>
524
+ <p class="text-sm mt-1">Cryptocurrency</p>
525
+ </label>
526
+
527
+ <label class="payment-method border border-gray-300 rounded-md p-3 cursor-pointer has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
528
+ <input type="radio" name="payment" value="bank" class="mr-2">
529
+ <i class="fas fa-university text-2xl text-green-600"></i>
530
+ <p class="text-sm mt-1">Bank Transfer</p>
531
+ </label>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="pt-4">
536
+ <div class="flex items-center mb-4">
537
+ <input id="terms" type="checkbox" required class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
538
+ <label for="terms" class="ml-2 text-sm text-gray-700">
539
+ I agree to the <a href="#" class="text-blue-600 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a>
540
+ </label>
541
+ </div>
542
+
543
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition flex items-center justify-center">
544
+ <span id="submitText">Complete Purchase</span>
545
+ <span id="spinner" class="ml-2 hidden">
546
+ <i class="fas fa-spinner fa-spin"></i>
547
+ </span>
548
+ </button>
549
+ </div>
550
+ </form>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Success Modal -->
556
+ <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
557
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6 text-center">
558
+ <div class="mb-6">
559
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
560
+ <i class="fas fa-check text-green-600 text-3xl"></i>
561
+ </div>
562
+ <h3 class="text-2xl font-bold mb-2">Purchase Complete!</h3>
563
+ <p class="text-gray-600">Thank you for your purchase. Your EA download link has been sent to your email.</p>
564
+ </div>
565
+
566
+ <div class="bg-blue-50 p-4 rounded-md mb-6 text-left">
567
+ <h4 class="font-semibold mb-2">Next Steps:</h4>
568
+ <ol class="list-decimal list-inside space-y-1 text-sm text-gray-700">
569
+ <li>Check your email (including spam folder) for download instructions</li>
570
+ <li>Follow the installation guide</li>
571
+ <li>Configure the EA with our recommended settings</li>
572
+ <li>Start trading automatically!</li>
573
+ </ol>
574
+ </div>
575
+
576
+ <button onclick="closeSuccessModal()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-semibold transition">
577
+ Close
578
+ </button>
579
+ </div>
580
+ </div>
581
+
582
+ <script>
583
+ // Current product being purchased
584
+ let currentProduct = null;
585
+ let currentPrice = null;
586
+
587
+ // Open checkout modal
588
+ function openCheckoutModal(product, price) {
589
+ currentProduct = product;
590
+ currentPrice = price;
591
+
592
+ document.getElementById('modalProductName').textContent = product;
593
+ document.getElementById('modalProductPrice').textContent = `$${price}`;
594
+ document.getElementById('checkoutModal').classList.remove('hidden');
595
+ document.body.classList.add('overflow-hidden');
596
+ }
597
+
598
+ // Close checkout modal
599
+ function closeCheckoutModal() {
600
+ document.getElementById('checkoutModal').classList.add('hidden');
601
+ document.body.classList.remove('overflow-hidden');
602
+ }
603
+
604
+ // Close success modal
605
+ function closeSuccessModal() {
606
+ document.getElementById('successModal').classList.add('hidden');
607
+ document.body.classList.remove('overflow-hidden');
608
+ }
609
+
610
+ // Handle form submission
611
+ document.getElementById('checkoutForm').addEventListener('submit', function(e) {
612
+ e.preventDefault();
613
+
614
+ // Show loading spinner
615
+ document.getElementById('spinner').classList.remove('hidden');
616
+ document.getElementById('submitText').textContent = 'Processing...';
617
+
618
+ // Simulate payment processing (in a real app, this would connect to a payment processor)
619
+ setTimeout(function() {
620
+ // Hide checkout modal
621
+ closeCheckoutModal();
622
+
623
+ // Show success modal
624
+ document.getElementById('successModal').classList.remove('hidden');
625
+
626
+ // In a real application, here you would:
627
+ // 1. Process the payment with Stripe/PayPal/etc.
628
+ // 2. On successful payment, send the EA download link via email
629
+ // 3. This would typically be handled by your backend server
630
+
631
+ // Reset form
632
+ document.getElementById('checkoutForm').reset();
633
+ document.getElementById('spinner').classList.add('hidden');
634
+ document.getElementById('submitText').textContent = 'Complete Purchase';
635
+
636
+ // Simulate sending email with download link
637
+ console.log(`EA download link for ${currentProduct} would be sent to ${document.getElementById('email').value}`);
638
+ }, 2000);
639
+ });
640
+
641
+ // FAQ toggle functionality
642
+ document.querySelectorAll('.faq-toggle').forEach(button => {
643
+ button.addEventListener('click', function() {
644
+ const content = this.nextElementSibling;
645
+ const icon = this.querySelector('i');
646
+
647
+ content.classList.toggle('hidden');
648
+ icon.classList.toggle('rotate-180');
649
+ });
650
+ });
651
+
652
+ // Mobile menu toggle (simplified)
653
+ document.querySelector('button.md\\:hidden').addEventListener('click', function() {
654
+ // In a real implementation, this would toggle a mobile menu
655
+ alert('Mobile menu would open here');
656
+ });
657
+ </script>
658
+ </body>
659
+ </html>