Hugging Face's logo

Spaces:
Zhasjsjsus
/
anycoder-071f6a35
Running

App Files Community
Zhasjsjsus commited on
Commit
a0d2c59
·
verified ·
1 Parent(s): 1387fc1

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +710 -19
index.html CHANGED
@@ -1,19 +1,710 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>موقعي البسيط</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --primary-color: #2c3e50;
17
+ --secondary-color: #3498db;
18
+ --accent-color: #e74c3c;
19
+ --light-color: #ecf0f1;
20
+ --dark-color: #2c3e50;
21
+ --text-color: #333;
22
+ --transition: all 0.3s ease;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
+ line-height: 1.6;
28
+ color: var(--text-color);
29
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
30
+ min-height: 100vh;
31
+ }
32
+
33
+ .container {
34
+ max-width: 1200px;
35
+ margin: 0 auto;
36
+ padding: 0 20px;
37
+ }
38
+
39
+ /* Header Styles */
40
+ header {
41
+ background: rgba(255, 255, 255, 0.95);
42
+ backdrop-filter: blur(10px);
43
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
44
+ position: fixed;
45
+ width: 100%;
46
+ top: 0;
47
+ z-index: 1000;
48
+ padding: 15px 0;
49
+ transition: var(--transition);
50
+ }
51
+
52
+ .header-content {
53
+ display: flex;
54
+ justify-content: space-between;
55
+ align-items: center;
56
+ }
57
+
58
+ .logo {
59
+ font-size: 1.5rem;
60
+ font-weight: bold;
61
+ color: var(--primary-color);
62
+ text-decoration: none;
63
+ }
64
+
65
+ .nav-links {
66
+ display: flex;
67
+ list-style: none;
68
+ gap: 25px;
69
+ }
70
+
71
+ .nav-links a {
72
+ text-decoration: none;
73
+ color: var(--text-color);
74
+ font-weight: 500;
75
+ transition: var(--transition);
76
+ position: relative;
77
+ }
78
+
79
+ .nav-links a:hover {
80
+ color: var(--secondary-color);
81
+ }
82
+
83
+ .nav-links a::after {
84
+ content: '';
85
+ position: absolute;
86
+ bottom: -5px;
87
+ left: 0;
88
+ width: 0;
89
+ height: 2px;
90
+ background: var(--secondary-color);
91
+ transition: var(--transition);
92
+ }
93
+
94
+ .nav-links a:hover::after {
95
+ width: 100%;
96
+ }
97
+
98
+ /* Hero Section */
99
+ .hero {
100
+ margin-top: 100px;
101
+ padding: 80px 0;
102
+ text-align: center;
103
+ color: white;
104
+ }
105
+
106
+ .hero h1 {
107
+ font-size: 3.5rem;
108
+ margin-bottom: 20px;
109
+ animation: fadeInUp 1s ease;
110
+ }
111
+
112
+ .hero p {
113
+ font-size: 1.3rem;
114
+ margin-bottom: 30px;
115
+ max-width: 700px;
116
+ margin-left: auto;
117
+ margin-right: auto;
118
+ animation: fadeInUp 1s ease 0.2s both;
119
+ }
120
+
121
+ .cta-button {
122
+ display: inline-block;
123
+ padding: 15px 35px;
124
+ background: var(--accent-color);
125
+ color: white;
126
+ text-decoration: none;
127
+ border-radius: 50px;
128
+ font-weight: bold;
129
+ transition: var(--transition);
130
+ box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
131
+ animation: fadeInUp 1s ease 0.4s both;
132
+ }
133
+
134
+ .cta-button:hover {
135
+ transform: translateY(-3px);
136
+ box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
137
+ }
138
+
139
+ /* About Section */
140
+ .about {
141
+ background: white;
142
+ padding: 80px 0;
143
+ }
144
+
145
+ .section-title {
146
+ text-align: center;
147
+ font-size: 2.5rem;
148
+ margin-bottom: 50px;
149
+ color: var(--primary-color);
150
+ position: relative;
151
+ }
152
+
153
+ .section-title::after {
154
+ content: '';
155
+ position: absolute;
156
+ bottom: -15px;
157
+ left: 50%;
158
+ transform: translateX(-50%);
159
+ width: 80px;
160
+ height: 4px;
161
+ background: var(--secondary-color);
162
+ }
163
+
164
+ .about-content {
165
+ display: grid;
166
+ grid-template-columns: 1fr 1fr;
167
+ gap: 50px;
168
+ align-items: center;
169
+ }
170
+
171
+ .about-text {
172
+ text-align: right;
173
+ }
174
+
175
+ .about-text h3 {
176
+ font-size: 1.8rem;
177
+ margin-bottom: 20px;
178
+ color: var(--primary-color);
179
+ }
180
+
181
+ .about-text p {
182
+ margin-bottom: 20px;
183
+ font-size: 1.1rem;
184
+ }
185
+
186
+ .features {
187
+ display: grid;
188
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
189
+ gap: 25px;
190
+ margin-top: 30px;
191
+ }
192
+
193
+ .feature {
194
+ background: var(--light-color);
195
+ padding: 25px;
196
+ border-radius: 10px;
197
+ transition: var(--transition);
198
+ }
199
+
200
+ .feature:hover {
201
+ transform: translateY(-5px);
202
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
203
+ }
204
+
205
+ .feature i {
206
+ font-size: 2.5rem;
207
+ color: var(--secondary-color);
208
+ margin-bottom: 15px;
209
+ }
210
+
211
+ .feature h4 {
212
+ margin-bottom: 10px;
213
+ color: var(--primary-color);
214
+ }
215
+
216
+ /* Services Section */
217
+ .services {
218
+ background: var(--light-color);
219
+ padding: 80px 0;
220
+ }
221
+
222
+ .service-cards {
223
+ display: grid;
224
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
225
+ gap: 30px;
226
+ }
227
+
228
+ .service-card {
229
+ background: white;
230
+ border-radius: 15px;
231
+ overflow: hidden;
232
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
233
+ transition: var(--transition);
234
+ }
235
+
236
+ .service-card:hover {
237
+ transform: translateY(-10px);
238
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
239
+ }
240
+
241
+ .service-card img {
242
+ width: 100%;
243
+ height: 200px;
244
+ object-fit: cover;
245
+ }
246
+
247
+ .service-info {
248
+ padding: 25px;
249
+ }
250
+
251
+ .service-info h3 {
252
+ font-size: 1.5rem;
253
+ margin-bottom: 15px;
254
+ color: var(--primary-color);
255
+ }
256
+
257
+ .service-info p {
258
+ margin-bottom: 20px;
259
+ }
260
+
261
+ .service-link {
262
+ display: inline-block;
263
+ color: var(--secondary-color);
264
+ text-decoration: none;
265
+ font-weight: bold;
266
+ transition: var(--transition);
267
+ }
268
+
269
+ .service-link:hover {
270
+ color: var(--accent-color);
271
+ }
272
+
273
+ /* Contact Section */
274
+ .contact {
275
+ background: white;
276
+ padding: 80px 0;
277
+ }
278
+
279
+ .contact-form {
280
+ max-width: 600px;
281
+ margin: 0 auto;
282
+ }
283
+
284
+ .form-group {
285
+ margin-bottom: 25px;
286
+ }
287
+
288
+ .form-group label {
289
+ display: block;
290
+ margin-bottom: 10px;
291
+ font-weight: bold;
292
+ color: var(--primary-color);
293
+ }
294
+
295
+ .form-group input,
296
+ .form-group textarea {
297
+ width: 100%;
298
+ padding: 15px;
299
+ border: 2px solid var(--light-color);
300
+ border-radius: 8px;
301
+ font-size: 1rem;
302
+ transition: var(--transition);
303
+ }
304
+
305
+ .form-group input:focus,
306
+ .form-group textarea:focus {
307
+ outline: none;
308
+ border-color: var(--secondary-color);
309
+ }
310
+
311
+ .submit-btn {
312
+ background: var(--secondary-color);
313
+ color: white;
314
+ border: none;
315
+ padding: 15px 40px;
316
+ border-radius: 50px;
317
+ font-size: 1.1rem;
318
+ font-weight: bold;
319
+ cursor: pointer;
320
+ transition: var(--transition);
321
+ }
322
+
323
+ .submit-btn:hover {
324
+ background: var(--primary-color);
325
+ transform: translateY(-3px);
326
+ }
327
+
328
+ /* Footer */
329
+ footer {
330
+ background: var(--dark-color);
331
+ color: white;
332
+ padding: 40px 0;
333
+ text-align: center;
334
+ }
335
+
336
+ .footer-content {
337
+ display: grid;
338
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
339
+ gap: 30px;
340
+ margin-bottom: 30px;
341
+ }
342
+
343
+ .footer-section h3 {
344
+ margin-bottom: 20px;
345
+ color: var(--secondary-color);
346
+ }
347
+
348
+ .footer-section p {
349
+ margin-bottom: 15px;
350
+ }
351
+
352
+ .social-links {
353
+ display: flex;
354
+ justify-content: center;
355
+ gap: 20px;
356
+ margin-top: 20px;
357
+ }
358
+
359
+ .social-links a {
360
+ color: white;
361
+ font-size: 1.5rem;
362
+ transition: var(--transition);
363
+ }
364
+
365
+ .social-links a:hover {
366
+ color: var(--secondary-color);
367
+ transform: translateY(-5px);
368
+ }
369
+
370
+ .copyright {
371
+ padding-top: 20px;
372
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
373
+ margin-top: 20px;
374
+ }
375
+
376
+ /* Animations */
377
+ @keyframes fadeInUp {
378
+ from {
379
+ opacity: 0;
380
+ transform: translateY(30px);
381
+ }
382
+ to {
383
+ opacity: 1;
384
+ transform: translateY(0);
385
+ }
386
+ }
387
+
388
+ /* Responsive Design */
389
+ @media (max-width: 768px) {
390
+ .hero h1 {
391
+ font-size: 2.5rem;
392
+ }
393
+
394
+ .hero p {
395
+ font-size: 1.1rem;
396
+ }
397
+
398
+ .about-content {
399
+ grid-template-columns: 1fr;
400
+ }
401
+
402
+ .nav-links {
403
+ display: none;
404
+ }
405
+
406
+ .mobile-menu {
407
+ display: block;
408
+ font-size: 1.5rem;
409
+ cursor: pointer;
410
+ }
411
+ }
412
+
413
+ @media (max-width: 480px) {
414
+ .hero h1 {
415
+ font-size: 2rem;
416
+ }
417
+
418
+ .service-cards {
419
+ grid-template-columns: 1fr;
420
+ }
421
+ }
422
+
423
+ /* Custom Scrollbar */
424
+ ::-webkit-scrollbar {
425
+ width: 10px;
426
+ }
427
+
428
+ ::-webkit-scrollbar-track {
429
+ background: rgba(255, 255, 255, 0.1);
430
+ }
431
+
432
+ ::-webkit-scrollbar-thumb {
433
+ background: var(--secondary-color);
434
+ border-radius: 5px;
435
+ }
436
+
437
+ ::-webkit-scrollbar-thumb:hover {
438
+ background: var(--primary-color);
439
+ }
440
+
441
+ /* Built with anycoder link */
442
+ .built-with {
443
+ position: fixed;
444
+ bottom: 20px;
445
+ right: 20px;
446
+ background: rgba(255, 255, 255, 0.9);
447
+ padding: 10px 20px;
448
+ border-radius: 30px;
449
+ font-weight: bold;
450
+ color: var(--primary-color);
451
+ text-decoration: none;
452
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
453
+ transition: var(--transition);
454
+ z-index: 1000;
455
+ }
456
+
457
+ .built-with:hover {
458
+ transform: translateY(-3px);
459
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
460
+ }
461
+ </style>
462
+ </head>
463
+ <body>
464
+ <header>
465
+ <div class="container header-content">
466
+ <a href="#" class="logo">موقعي</a>
467
+ <nav>
468
+ <ul class="nav-links">
469
+ <li><a href="#home">الرئيسية</a></li>
470
+ <li><a href="#about">عن الموقع</a></li>
471
+ <li><a href="#services">الخدمات</a></li>
472
+ <li><a href="#contact">تواصل معنا</a></li>
473
+ </ul>
474
+ </nav>
475
+ <div class="mobile-menu">
476
+ <i class="fas fa-bars"></i>
477
+ </div>
478
+ </div>
479
+ </header>
480
+
481
+ <section id="home" class="hero">
482
+ <div class="container">
483
+ <h1>مرحباً بك في موقعي البسيط</h1>
484
+ <p>هذا موقع جميل وسهل الاستخدام مصمم خصيصاً لك. استكشف الميزات الرائعة وابدأ رحلتك الرقمية.</p>
485
+ <a href="#about" class="cta-button">ابدأ الآن</a>
486
+ </div>
487
+ </section>
488
+
489
+ <section id="about" class="about">
490
+ <div class="container">
491
+ <h2 class="section-title">عن الموقع</h2>
492
+ <div class="about-content">
493
+ <div class="about-text">
494
+ <h3>لماذا هذا الموقع؟</h3>
495
+ <p>أنا سعيد بإنشاء هذا الموقع البسيط الذي يمكنك حفظه ونسخه بسهولة. تم تصميمه ليكون سهل الاستخدام ومتناسق على جميع الأجهزة.</p>
496
+ <p>يتميز الموقع بتصميم حديث ومتجاوب مع جميع أحجام الشاشات، مما يضمن تجربة رائعة للمستخدمين.</p>
497
+
498
+ <div class="features">
499
+ <div class="feature">
500
+ <i class="fas fa-mobile-alt"></i>
501
+ <h4>متجاوب</h4>
502
+ <p>يعمل بشكل مثالي على جميع الأجهزة</p>
503
+ </div>
504
+ <div class="feature">
505
+ <i class="fas fa-rocket"></i>
506
+ <h4>سريع</h4>
507
+ <p>تحميل سريع ومؤثرات بسيطة</p>
508
+ </div>
509
+ <div class="feature">
510
+ <i class="fas fa-palette"></i>
511
+ <h4>جذاب</h4>
512
+ <p>تصميم أنيق وجذاب</p>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ <div class="about-image">
517
+ <img src="https://picsum.photos/seed/website/500/400" alt="موقع ويب" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </section>
522
+
523
+ <section id="services" class="services">
524
+ <div class="container">
525
+ <h2 class="section-title">خدماتنا</h2>
526
+ <div class="service-cards">
527
+ <div class="service-card">
528
+ <img src="https://picsum.photos/seed/webdesign/400/200" alt="تصميم الويب">
529
+ <div class="service-info">
530
+ <h3>تصميم الويب</h3>
531
+ <p>نحن نقدم تصميمات حديثة وجذابة تتناسب مع احتياجاتك. كل موقع مصمم خصيصاً ليعكس هويتك.</p>
532
+ <a href="#" class="service-link">تعرف أكثر <i class="fas fa-arrow-right"></i></a>
533
+ </div>
534
+ </div>
535
+ <div class="service-card">
536
+ <img src="https://picsum.photos/seed/development/400/200" alt="التطوير">
537
+ <div class="service-info">
538
+ <h3>التطوير</h3>
539
+ <p>خبرتنا في تطوير المواقع تجعل من مشروعك ناجحاً. نستخدم أحدث التقنيات لضمان أداء عالي.</p>
540
+ <a href="#" class="service-link">تعرف أكثر <i class="fas fa-arrow-right"></i></a>
541
+ </div>
542
+ </div>
543
+ <div class="service-card">
544
+ <img src="https://picsum.photos/seed/consulting/400/200" alt="الاستشارات">
545
+ <div class="service-info">
546
+ <h3>الاستشارات</h3>
547
+ <p>نقدم استشارات متخصصة تساعدك على اتخاذ القرارات الصحيحة لنجاح مشروعك الرقمي.</p>
548
+ <a href="#" class="service-link">تعرف أكثر <i class="fas fa-arrow-right"></i></a>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </section>
554
+
555
+ <section id="contact" class="contact">
556
+ <div class="container">
557
+ <h2 class="section-title">تواصل معنا</h2>
558
+ <div class="contact-form">
559
+ <form id="contactForm">
560
+ <div class="form-group">
561
+ <label for="name">الاسم الكامل</label>
562
+ <input type="text" id="name" name="name" required>
563
+ </div>
564
+ <div class="form-group">
565
+ <label for="email">البريد الإلكتروني</label>
566
+ <input type="email" id="email" name="email" required>
567
+ </div>
568
+ <div class="form-group">
569
+ <label for="message">الرسالة</label>
570
+ <textarea id="message" name="message" rows="5" required></textarea>
571
+ </div>
572
+ <button type="submit" class="submit-btn">إرسال الرسالة</button>
573
+ </form>
574
+ </div>
575
+ </div>
576
+ </section>
577
+
578
+ <footer>
579
+ <div class="container">
580
+ <div class="footer-content">
581
+ <div class="footer-section">
582
+ <h3>عن الموقع</h3>
583
+ <p>موقع بسيط وجميل مصمم ليعرض خدماتك بطريقة احترافية.</p>
584
+ </div>
585
+ <div class="footer-section">
586
+ <h3>روابط سريعة</h3>
587
+ <p><a href="#home" style="color: white; text-decoration: none;">الرئيسية</a></p>
588
+ <p><a href="#about" style="color: white; text-decoration: none;">عن الموقع</a></p>
589
+ <p><a href="#services" style="color: white; text-decoration: none;">الخدمات</a></p>
590
+ </div>
591
+ <div class="footer-section">
592
+ <h3>تواصل</h3>
593
+ <p><i class="fas fa-envelope"></i> info@mysite.com</p>
594
+ <p><i class="fas fa-phone"></i> +962 79 123 4567</p>
595
+ </div>
596
+ </div>
597
+ <div class="social-links">
598
+ <a href="#"><i class="fab fa-facebook"></i></a>
599
+ <a href="#"><i class="fab fa-twitter"></i></a>
600
+ <a href="#"><i class="fab fa-instagram"></i></a>
601
+ <a href="#"><i class="fab fa-linkedin"></i></a>
602
+ </div>
603
+ <div class="copyright">
604
+ <p>&copy; 2023 موقعي. جميع الحقوق محفوظة.</p>
605
+ </div>
606
+ </div>
607
+ </footer>
608
+
609
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a>
610
+
611
+ <script>
612
+ // Smooth scrolling for navigation links
613
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
614
+ anchor.addEventListener('click', function (e) {
615
+ e.preventDefault();
616
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
617
+ behavior: 'smooth'
618
+ });
619
+ });
620
+ });
621
+
622
+ // Form submission handling
623
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
624
+ e.preventDefault();
625
+ const formData = new FormData(this);
626
+ const name = formData.get('name');
627
+
628
+ // Create success message
629
+ const successMessage = document.createElement('div');
630
+ successMessage.style.cssText = `
631
+ position: fixed;
632
+ top: 50%;
633
+ left: 50%;
634
+ transform: translate(-50%, -50%);
635
+ background: #27ae60;
636
+ color: white;
637
+ padding: 20px 40px;
638
+ border-radius: 10px;
639
+ font-size: 1.2rem;
640
+ z-index: 1000;
641
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
642
+ animation: fadeInUp 0.5s ease;
643
+ `;
644
+ successMessage.textContent = `شكراً لك ${name}، سنتواصل معك قريباً!`;
645
+
646
+ document.body.appendChild(successMessage);
647
+
648
+ // Reset form
649
+ this.reset();
650
+
651
+ // Remove message after 3 seconds
652
+ setTimeout(() => {
653
+ successMessage.style.animation = 'fadeInUp 0.5s ease reverse';
654
+ setTimeout(() => {
655
+ document.body.removeChild(successMessage);
656
+ }, 500);
657
+ }, 3000);
658
+ });
659
+
660
+ // Mobile menu toggle
661
+ const mobileMenu = document.querySelector('.mobile-menu');
662
+ const navLinks = document.querySelector('.nav-links');
663
+
664
+ mobileMenu.addEventListener('click', () => {
665
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
666
+ });
667
+
668
+ // Header scroll effect
669
+ window.addEventListener('scroll', () => {
670
+ const header = document.querySelector('header');
671
+ if (window.scrollY > 100) {
672
+ header.style.background = 'rgba(255, 255, 255, 0.98)';
673
+ header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.15)';
674
+ } else {
675
+ header.style.background = 'rgba(255, 255, 255, 0.95)';
676
+ header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
677
+ }
678
+ });
679
+
680
+ // Add animation on scroll
681
+ const observerOptions = {
682
+ threshold: 0.1,
683
+ rootMargin: '0px 0px -50px 0px'
684
+ };
685
+
686
+ const observer = new IntersectionObserver((entries) => {
687
+ entries.forEach(entry => {
688
+ if (entry.isIntersecting) {
689
+ entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
690
+ }
691
+ });
692
+ }, observerOptions);
693
+
694
+ // Observe all sections
695
+ document.querySelectorAll('section').forEach(section => {
696
+ observer.observe(section);
697
+ });
698
+
699
+ // Add hover effect to service cards
700
+ document.querySelectorAll('.service-card').forEach(card => {
701
+ card.addEventListener('mouseenter', () => {
702
+ card.style.transform = 'translateY(-10px)';
703
+ });
704
+ card.addEventListener('mouseleave', () => {
705
+ card.style.transform = 'translateY(0)';
706
+ });
707
+ });
708
+ </script>
709
+ </body>
710
+ </html>