Hugging Face's logo

Spaces:
123qwersd
/
undefined
Running

App Files Community
123qwersd commited on
Commit
b1d90de
·
verified ·
1 Parent(s): ab9dee1

اريد برنامج وليس موقع

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. download.html +106 -0
  3. index.html +434 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: ⚡
4
- colorFrom: blue
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: pink
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
download.html ADDED
@@ -0,0 +1,106 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>تحميل المهندس الذكي - ESP32 Arab Wizard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
11
+ body {
12
+ font-family: 'Tajawal', sans-serif;
13
+ }
14
+ .en {
15
+ direction: ltr;
16
+ text-align: left;
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="bg-gray-50">
21
+ <header class="bg-white shadow-sm">
22
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
23
+ <div class="flex items-center space-x-2 space-x-reverse">
24
+ <i data-feather="cpu" class="text-blue-600 w-8 h-8"></i>
25
+ <h1 class="text-xl font-bold text-blue-600">ESP32 Arab Wizard</h1>
26
+ </div>
27
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">
28
+ <i data-feather="arrow-right"></i> العودة للرئيسية
29
+ </a>
30
+ </div>
31
+ </header>
32
+
33
+ <main class="container mx-auto px-4 py-12">
34
+ <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
35
+ <div class="p-8 text-center">
36
+ <div class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
37
+ <i data-feather="download" class="text-blue-600 w-12 h-12"></i>
38
+ </div>
39
+ <h2 class="text-3xl font-bold mb-4">حمل تطبيق ESP32 Arab Wizard الآن</h2>
40
+ <p class="text-gray-600 mb-8">اختر نظام التشغيل الخاص بك لبدء التحميل</p>
41
+
42
+ <div class="grid md:grid-cols-2 gap-6">
43
+ <div class="border rounded-lg p-6 hover:shadow-md transition cursor-pointer">
44
+ <div class="flex justify-center mb-4">
45
+ <i data-feather="smartphone" class="text-green-600 w-12 h-12"></i>
46
+ </div>
47
+ <h3 class="text-xl font-bold mb-2">نسخة أندرويد</h3>
48
+ <p class="text-gray-600 mb-4">متوافق مع أجهزة أندرويد 10+</p>
49
+ <button class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition w-full">
50
+ تحميل APK (32MB)
51
+ </button>
52
+ <p class="text-sm text-gray-500 mt-2">الإصدار 1.2.0 - تم التحديث: 2023-10-15</p>
53
+ </div>
54
+
55
+ <div class="border rounded-lg p-6 hover:shadow-md transition cursor-pointer">
56
+ <div class="flex justify-center mb-4">
57
+ <i data-feather="tablet" class="text-blue-600 w-12 h-12"></i>
58
+ </div>
59
+ <h3 class="text-xl font-bold mb-2">نسخة Windows</h3>
60
+ <p class="text-gray-600 mb-4">متوافق مع Windows 10/11</p>
61
+ <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition w-full">
62
+ تحميل EXE (58MB)
63
+ </button>
64
+ <p class="text-sm text-gray-500 mt-2">الإصدار 1.2.0 - تم التحديث: 2023-10-15</p>
65
+ </div>
66
+ </div>
67
+
68
+ <div class="mt-12 border-t pt-8">
69
+ <h3 class="text-xl font-bold mb-4">متطلبات النظام</h3>
70
+ <div class="grid md:grid-cols-2 gap-6 text-right">
71
+ <div>
72
+ <h4 class="font-bold mb-2">للأندرويد:</h4>
73
+ <ul class="text-gray-600 space-y-1">
74
+ <li>• أندرويد 10 أو أحدث</li>
75
+ <li>• ذاكرة RAM 4GB+</li>
76
+ <li>• دعم USB OTG</li>
77
+ <li>• مساحة تخزين 100MB</li>
78
+ </ul>
79
+ </div>
80
+ <div>
81
+ <h4 class="font-bold mb-2">لـ Windows:</h4>
82
+ <ul class="text-gray-600 space-y-1">
83
+ <li>• Windows 10/11 64-bit</li>
84
+ <li>• معالج Dual Core 2GHz+</li>
85
+ <li>• ذاكرة RAM 4GB+</li>
86
+ <li>• مساحة تخزين 200MB</li>
87
+ </ul>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </main>
94
+
95
+ <footer class="bg-gray-900 text-gray-300 py-8">
96
+ <div class="container mx-auto px-4 text-center">
97
+ <p>© 2023 ESP32 Arab Wizard. جميع الحقوق محفوظة.</p>
98
+ <p class="mt-2 text-sm">Made with <i data-feather="heart" class="w-4 h-4 inline text-red-500"></i> for Arab developers</p>
99
+ </div>
100
+ </footer>
101
+
102
+ <script>
103
+ feather.replace();
104
+ </script>
105
+ </body>
106
+ </html>
index.html CHANGED
@@ -1,19 +1,435 @@
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" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Al-Mohandis Al-Thaki - ESP32 Development Wizard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#3B82F6',
17
+ secondary: '#10B981',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
25
+ body {
26
+ font-family: 'Tajawal', sans-serif;
27
+ direction: rtl;
28
+ }
29
+ .en {
30
+ direction: ltr;
31
+ text-align: left;
32
+ }
33
+ .vanta-bg {
34
+ position: fixed;
35
+ top: 0;
36
+ left: 0;
37
+ width: 100%;
38
+ height: 100%;
39
+ z-index: -1;
40
+ opacity: 0.3;
41
+ }
42
+ .code-block {
43
+ font-family: 'Courier New', monospace;
44
+ }
45
+ .typing-effect {
46
+ border-right: 2px solid;
47
+ animation: blink 1s step-end infinite;
48
+ }
49
+ @keyframes blink {
50
+ from, to { border-color: transparent }
51
+ 50% { border-color: #3B82F6 }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-50 text-gray-800">
56
+ <div id="vanta-bg" class="vanta-bg"></div>
57
+
58
+ <header class="bg-white shadow-sm sticky top-0 z-10">
59
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
60
+ <div class="flex items-center space-x-2 space-x-reverse">
61
+ <i data-feather="cpu" class="text-primary w-8 h-8"></i>
62
+ <h1 class="text-xl font-bold text-primary">المهندس الذكي</h1>
63
+ </div>
64
+ <nav class="hidden md:flex space-x-6 space-x-reverse">
65
+ <a href="#features" class="hover:text-primary transition">المميزات</a>
66
+ <a href="#how-it-works" class="hover:text-primary transition">كيف يعمل</a>
67
+ <a href="#ai" class="hover:text-primary transition">الذكاء الاصطناعي</a>
68
+ <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition">حمل التطبيق</button>
69
+ </nav>
70
+ <button class="md:hidden" id="mobile-menu-button">
71
+ <i data-feather="menu"></i>
72
+ </button>
73
+ </div>
74
+ </header>
75
+
76
+ <main>
77
+ <!-- Hero Section -->
78
+ <section class="py-16 md:py-24">
79
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
80
+ <div class="md:w-1/2 mb-10 md:mb-0 text-right">
81
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">طور لوحات ESP32 من هاتفك!</h1>
82
+ <p class="text-lg mb-6 text-gray-600">المهندس الذكي يجعل برمجة لوحات ESP32-Dev أسهل من أي وقت مضى باستخدام هاتفك الأندرويد فقط</p>
83
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse">
84
+ <button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary-600 transition font-medium flex items-center justify-center">
85
+ <i data-feather="download" class="ml-2"></i>
86
+ حمل التطبيق
87
+ </button>
88
+ <button class="border border-primary text-primary px-6 py-3 rounded-lg hover:bg-primary-50 transition font-medium">
89
+ شاهد الفيديو التوضيحي
90
+ </button>
91
+ </div>
92
+ </div>
93
+ <div class="md:w-1/2 flex justify-center">
94
+ <div class="relative">
95
+ <img src="http://static.photos/technology/640x360/1" alt="ESP32 Development" class="rounded-xl shadow-xl w-full max-w-md">
96
+ <div class="absolute -bottom-5 -left-5 bg-white p-3 rounded-lg shadow-md">
97
+ <div class="flex items-center">
98
+ <div class="bg-green-100 p-2 rounded-full mr-2">
99
+ <i data-feather="usb" class="text-green-600 w-5 h-5"></i>
100
+ </div>
101
+ <span class="text-sm font-medium">اتصال USB Type-C مباشر</span>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- Features Section -->
110
+ <section id="features" class="py-16 bg-gray-100">
111
+ <div class="container mx-auto px-4">
112
+ <div class="text-center mb-16">
113
+ <h2 class="text-3xl font-bold mb-4">المميزات الرائعة</h2>
114
+ <p class="text-gray-600 max-w-2xl mx-auto">المهندس الذكي يوفر كل ما تحتاجه لبرمجة لوحات ESP32 بكفاءة عالية</p>
115
+ </div>
116
+
117
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
118
+ <!-- Feature 1 -->
119
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
120
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
121
+ <i data-feather="zap" class="text-blue-600 w-5 h-5"></i>
122
+ </div>
123
+ <h3 class="text-xl font-bold mb-2">برمجة مباشرة عبر USB-C</h3>
124
+ <p class="text-gray-600">قم ببرمجة لوحة ESP32-Dev مباشرة من هاتفك دون الحاجة إلى جهاز كمبيوتر</p>
125
+ </div>
126
+
127
+ <!-- Feature 2 -->
128
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
129
+ <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
130
+ <i data-feather="message-square" class="text-green-600 w-5 h-5"></i>
131
+ </div>
132
+ <h3 class="text-xl font-bold mb-2">واجهة ذكية ثنائية اللغة</h3>
133
+ <p class="text-gray-600">واجهة مستخدم كاملة باللغتين العربية والإنجليزية مع تفاعل يشبه ChatGPT</p>
134
+ </div>
135
+
136
+ <!-- Feature 3 -->
137
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
138
+ <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
139
+ <i data-feather="code" class="text-purple-600 w-5 h-5"></i>
140
+ </div>
141
+ <h3 class="text-xl font-bold mb-2">وصف الكود الذكي</h3>
142
+ <p class="text-gray-600">احصل على شرح مفصل للكود البرمجي باللغتين لتفهم كل سطر بسهولة</p>
143
+ </div>
144
+
145
+ <!-- Feature 4 -->
146
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
147
+ <div class="bg-yellow-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
148
+ <i data-feather="mic" class="text-yellow-600 w-5 h-5"></i>
149
+ </div>
150
+ <h3 class="text-xl font-bold mb-2">إدخال صوتي ونصي</h3>
151
+ <p class="text-gray-600">اكتب الكود باستخدام صوتك أو النص مع اقتراحات ذكية تلقائية</p>
152
+ </div>
153
+
154
+ <!-- Feature 5 -->
155
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
156
+ <div class="bg-red-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
157
+ <i data-feather="cpu" class="text-red-600 w-5 h-5"></i>
158
+ </div>
159
+ <h3 class="text-xl font-bold mb-2">مساعدة متعلقة بالعتاد</h3>
160
+ <p class="text-gray-600">احصل على معلومات مفصلة عن دبابيس ESP32 بناءً على الكود الذي تكتبه</p>
161
+ </div>
162
+
163
+ <!-- Feature 6 -->
164
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition">
165
+ <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
166
+ <i data-feather="cloud" class="text-indigo-600 w-5 h-5"></i>
167
+ </div>
168
+ <h3 class="text-xl font-bold mb-2">نسخ احتياطي ومزامنة</h3>
169
+ <p class="text-gray-600">احفظ مشاريعك على السحابة واسترجعها على أي جهاز آخر</p>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- How It Works -->
176
+ <section id="how-it-works" class="py-16">
177
+ <div class="container mx-auto px-4">
178
+ <div class="text-center mb-16">
179
+ <h2 class="text-3xl font-bold mb-4">كيف يعمل المهندس الذكي؟</h2>
180
+ <p class="text-gray-600 max-w-2xl mx-auto">ثلاث خطوات بسيطة لبدء برمجة لوحات ESP32 من هاتفك</p>
181
+ </div>
182
+
183
+ <div class="grid md:grid-cols-3 gap-8">
184
+ <div class="text-center">
185
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
186
+ <span class="text-blue-600 text-xl font-bold">1</span>
187
+ </div>
188
+ <h3 class="text-xl font-bold mb-2">قم بتوصيل ESP32</h3>
189
+ <p class="text-gray-600">استخدم كابل USB Type-C لتوصيل لوحة ESP32-Dev بهاتفك</p>
190
+ </div>
191
+
192
+ <div class="text-center">
193
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
194
+ <span class="text-green-600 text-xl font-bold">2</span>
195
+ </div>
196
+ <h3 class="text-xl font-bold mb-2">اكتب أو تحدث بالكود</h3>
197
+ <p class="text-gray-600">استخدم لوحة المفاتيح أو صوتك لكتابة الكود البرمجي</p>
198
+ </div>
199
+
200
+ <div class="text-center">
201
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
202
+ <span class="text-purple-600 text-xl font-bold">3</span>
203
+ </div>
204
+ <h3 class="text-xl font-bold mb-2">اضغط على زر البرمجة</h3>
205
+ <p class="text-gray-600">اضغط على زر "برمجة الحافظة" لتحميل الكود على اللوحة</p>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- AI Section -->
212
+ <section id="ai" class="py-16 bg-gray-100">
213
+ <div class="container mx-auto px-4">
214
+ <div class="flex flex-col md:flex-row items-center">
215
+ <div class="md:w-1/2 mb-10 md:mb-0">
216
+ <img src="http://static.photos/technology/640x360/2" alt="AI Code Assistance" class="rounded-xl shadow-xl w-full">
217
+ </div>
218
+ <div class="md:w-1/2 md:pr-10 text-right">
219
+ <h2 class="text-3xl font-bold mb-4">الذكاء الاصطناعي المتقدم</h2>
220
+ <p class="text-lg mb-6 text-gray-600">قم بتوصيل تطبيق المهندس الذكي بـ OpenAI API للحصول على ميزات متقدمة</p>
221
+
222
+ <div class="space-y-4">
223
+ <div class="flex items-start">
224
+ <div class="bg-primary-100 p-2 rounded-full mr-4 mt-1">
225
+ <i data-feather="key" class="text-primary w-5 h-5"></i>
226
+ </div>
227
+ <div>
228
+ <h4 class="font-bold mb-1">إدخال مفتاح API</h4>
229
+ <p class="text-gray-600">أدخل مفتاح OpenAI API الخاص بك للإطلاق الكامل لقدرات الذكاء الاصطناعي</p>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="flex items-start">
234
+ <div class="bg-green-100 p-2 rounded-full mr-4 mt-1">
235
+ <i data-feather="refresh-cw" class="text-green-600 w-5 h-5"></i>
236
+ </div>
237
+ <div>
238
+ <h4 class="font-bold mb-1">إعادة هيكلة الكود الذكية</h4>
239
+ <p class="text-gray-600">حسن كودك تلقائيًا ليكون أكثر كفاءة وقابلية للقراءة</p>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="flex items-start">
244
+ <div class="bg-purple-100 p-2 rounded-full mr-4 mt-1">
245
+ <i data-feather="share-2" class="text-purple-600 w-5 h-5"></i>
246
+ </div>
247
+ <div>
248
+ <h4 class="font-bold mb-1">ربط بالتطبيقات الأخرى</h4>
249
+ <p class="text-gray-600">قم بتوصيل المهندس الذكي بتطبيقات IoT أو إدارة المشاريع الأخرى</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Code Example -->
259
+ <section class="py-16">
260
+ <div class="container mx-auto px-4">
261
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
262
+ <div class="flex border-b">
263
+ <div class="px-4 py-3 bg-gray-100 font-medium">مثال على الكود</div>
264
+ <div class="px-4 py-3 font-medium">وصف الكود</div>
265
+ </div>
266
+ <div class="grid md:grid-cols-2">
267
+ <div class="p-6 bg-gray-50 code-block">
268
+ <pre class="text-sm"><code>#include &lt;WiFi.h&gt;
269
+
270
+ const char* ssid = "your_SSID";
271
+ const char* password = "your_PASSWORD";
272
+
273
+ void setup() {
274
+ Serial.begin(115200);
275
+ WiFi.begin(ssid, password);
276
+
277
+ while (WiFi.status() != WL_CONNECTED) {
278
+ delay(500);
279
+ Serial.print(".");
280
+ }
281
+
282
+ Serial.println("Connected!");
283
+ }
284
+
285
+ void loop() {
286
+ // Your code here
287
+ }</code></pre>
288
+ </div>
289
+ <div class="p-6">
290
+ <h3 class="font-bold mb-2">اتصال WiFi بلوحة ESP32</h3>
291
+ <p class="text-gray-600 mb-4">هذا الكود يقوم بتوصيل لوحة ESP32 بشبكة WiFi. يتم تعريف اسم الشبكة وكلمة المرور في البداية، ثم في الدالة setup() يبدأ الاتصال ويتم الانتظار حتى يتم الاتصال بنجاح.</p>
292
+ <div class="flex items-center text-sm text-gray-500">
293
+ <i data-feather="info" class="w-4 h-4 mr-1"></i>
294
+ <span>ملاحظة: استبدل your_SSID و your_PASSWORD بمعلومات شبكتك</span>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </section>
301
+
302
+ <!-- CTA Section -->
303
+ <section class="py-16 bg-primary text-white">
304
+ <div class="container mx-auto px-4 text-center">
305
+ <h2 class="text-3xl font-bold mb-4">جاهز لبدء البرمجة من هاتفك؟</h2>
306
+ <p class="text-lg mb-8 max-w-2xl mx-auto">حمل تطبيق المهندس الذكي الآن وابدأ في برمجة لوحات ESP32 بكل سهولة</p>
307
+ <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4 space-x-reverse">
308
+ <button class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-gray-100 transition font-medium flex items-center justify-center mx-auto">
309
+ <i data-feather="download" class="mr-2"></i>
310
+ حمل التطبيق الآن
311
+ </button>
312
+ <button class="border border-white text-white px-8 py-3 rounded-lg hover:bg-white hover:text-primary transition font-medium">
313
+ تعرف على المزيد
314
+ </button>
315
+ </div>
316
+ </div>
317
+ </section>
318
+ </main>
319
+
320
+ <footer class="bg-gray-900 text-gray-300 py-12">
321
+ <div class="container mx-auto px-4">
322
+ <div class="grid md:grid-cols-4 gap-8">
323
+ <div>
324
+ <div class="flex items-center mb-4">
325
+ <i data-feather="cpu" class="text-primary w-6 h-6 mr-2"></i>
326
+ <span class="text-xl font-bold text-white">المهندس الذكي</span>
327
+ </div>
328
+ <p class="mb-4">تطبيق قوي لبرمجة لوحات ESP32 مباشرة من هاتفك الأندرويد</p>
329
+ <div class="flex space-x-4 space-x-reverse">
330
+ <a href="#" class="hover:text-primary transition"><i data-feather="facebook"></i></a>
331
+ <a href="#" class="hover:text-primary transition"><i data-feather="twitter"></i></a>
332
+ <a href="#" class="hover:text-primary transition"><i data-feather="youtube"></i></a>
333
+ </div>
334
+ </div>
335
+
336
+ <div>
337
+ <h3 class="text-white font-bold mb-4">روابط سريعة</h3>
338
+ <ul class="space-y-2">
339
+ <li><a href="#" class="hover:text-primary transition">الرئيسية</a></li>
340
+ <li><a href="#features" class="hover:text-primary transition">المميزات</a></li>
341
+ <li><a href="#how-it-works" class="hover:text-primary transition">ك��ف يعمل</a></li>
342
+ <li><a href="#ai" class="hover:text-primary transition">الذكاء الاصطناعي</a></li>
343
+ </ul>
344
+ </div>
345
+
346
+ <div>
347
+ <h3 class="text-white font-bold mb-4">الدعم</h3>
348
+ <ul class="space-y-2">
349
+ <li><a href="download.html" class="hover:text-primary transition">تحميل التطبيق</a></li>
350
+ <li><a href="#" class="hover:text-primary transition">الأسئلة الشائعة</a></li>
351
+ <li><a href="#" class="hover:text-primary transition">الدليل التعليمي</a></li>
352
+ <li><a href="#" class="hover:text-primary transition">اتصل بنا</a></li>
353
+ </ul>
354
+ </div>
355
+
356
+ <div>
357
+ <h3 class="text-white font-bold mb-4">اشترك في النشرة البريدية</h3>
358
+ <p class="mb-4">ابق على اطلاع بآخر التحديثات والمميزات الجديدة</p>
359
+ <div class="flex">
360
+ <input type="email" placeholder="بريدك الإلكتروني" class="bg-gray-800 text-white px-4 py-2 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-primary w-full">
361
+ <button class="bg-primary text-white px-4 py-2 rounded-l-lg hover:bg-primary-600 transition">
362
+ <i data-feather="send"></i>
363
+ </button>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-sm">
369
+ <p>© 2023 المهندس الذكي. جميع الحقوق محفوظة.</p>
370
+ </div>
371
+ </div>
372
+ </footer>
373
+
374
+ <script>
375
+ // Initialize Vanta.js
376
+ VANTA.GLOBE({
377
+ el: "#vanta-bg",
378
+ mouseControls: true,
379
+ touchControls: true,
380
+ gyroControls: false,
381
+ minHeight: 200.00,
382
+ minWidth: 200.00,
383
+ scale: 1.00,
384
+ scaleMobile: 1.00,
385
+ color: '#3B82F6',
386
+ backgroundColor: '#f8fafc',
387
+ size: 0.8
388
+ });
389
+
390
+ // Initialize Feather Icons
391
+ feather.replace();
392
+
393
+ // Mobile menu toggle
394
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
395
+ const nav = document.querySelector('nav');
396
+ nav.classList.toggle('hidden');
397
+ nav.classList.toggle('flex');
398
+ nav.classList.toggle('flex-col');
399
+ nav.classList.toggle('absolute');
400
+ nav.classList.toggle('top-16');
401
+ nav.classList.toggle('right-4');
402
+ nav.classList.toggle('bg-white');
403
+ nav.classList.toggle('p-4');
404
+ nav.classList.toggle('rounded-lg');
405
+ nav.classList.toggle('shadow-md');
406
+ });
407
+
408
+ // Smooth scrolling for anchor links
409
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
410
+ anchor.addEventListener('click', function (e) {
411
+ e.preventDefault();
412
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
413
+ behavior: 'smooth'
414
+ });
415
+ });
416
+ });
417
+
418
+ // Typing effect for code blocks
419
+ const codeBlocks = document.querySelectorAll('.code-block pre code');
420
+ codeBlocks.forEach(block => {
421
+ const originalText = block.textContent;
422
+ block.textContent = '';
423
+ let i = 0;
424
+ const typing = setInterval(() => {
425
+ if (i < originalText.length) {
426
+ block.textContent += originalText.charAt(i);
427
+ i++;
428
+ } else {
429
+ clearInterval(typing);
430
+ }
431
+ }, 10);
432
+ });
433
+ </script>
434
+ </body>
435
  </html>