Hugging Face's logo

Spaces:
hader1890
/
gh4
Running

App Files Community
hader1890 commited on
Commit
34f2c95
·
verified ·
1 Parent(s): e38575e

برنامج كشف رمز وايفاي ؤتصال بهاء مباشر - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +336 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gh4
3
- emoji: 🌖
4
- colorFrom: gray
5
  colorTo: pink
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: gh4
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,336 @@
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
+ <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
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
11
+ body {
12
+ font-family: 'Tajawal', sans-serif;
13
+ }
14
+ .signal-strength {
15
+ position: relative;
16
+ width: 24px;
17
+ height: 24px;
18
+ }
19
+ .signal-bar {
20
+ position: absolute;
21
+ bottom: 0;
22
+ background-color: #4ade80;
23
+ border-radius: 2px;
24
+ }
25
+ .signal-bar-1 { width: 4px; height: 6px; left: 0; }
26
+ .signal-bar-2 { width: 4px; height: 10px; left: 6px; }
27
+ .signal-bar-3 { width: 4px; height: 14px; left: 12px; }
28
+ .signal-bar-4 { width: 4px; height: 18px; left: 18px; }
29
+
30
+ .animate-pulse {
31
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
32
+ }
33
+ @keyframes pulse {
34
+ 0%, 100% { opacity: 1; }
35
+ 50% { opacity: 0.5; }
36
+ }
37
+
38
+ .network-card {
39
+ transition: all 0.3s ease;
40
+ }
41
+ .network-card:hover {
42
+ transform: translateY(-2px);
43
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-100 min-h-screen">
48
+ <div class="container mx-auto px-4 py-8">
49
+ <!-- Header -->
50
+ <header class="mb-8 text-center">
51
+ <h1 class="text-3xl font-bold text-indigo-800 mb-2">كاشف شبكات الواي فاي</h1>
52
+ <p class="text-gray-600">أداة لفحص الشبكات اللاسلكية القريبة وعرض معلومات الاتصال</p>
53
+ </header>
54
+
55
+ <!-- Main Card -->
56
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
57
+ <div class="flex flex-col md:flex-row items-center justify-between gap-4">
58
+ <div class="flex items-center gap-3">
59
+ <div class="p-3 bg-indigo-100 rounded-full">
60
+ <i class="fas fa-wifi text-indigo-600 text-xl"></i>
61
+ </div>
62
+ <div>
63
+ <h2 class="font-bold text-lg">فحص الشبكات المتاحة</h2>
64
+ <p class="text-gray-500 text-sm">سيتم عرض جميع الشبكات اللاسلكية القريبة</p>
65
+ </div>
66
+ </div>
67
+ <button id="scanBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 transition-colors">
68
+ <i class="fas fa-sync-alt"></i>
69
+ بدء الفحص
70
+ </button>
71
+ </div>
72
+
73
+ <div id="scanProgress" class="mt-6 hidden">
74
+ <div class="flex items-center gap-3 mb-3">
75
+ <div class="animate-pulse">
76
+ <i class="fas fa-circle-notch fa-spin text-indigo-600"></i>
77
+ </div>
78
+ <span class="text-gray-700">جاري البحث عن الشبكات المتاحة...</span>
79
+ </div>
80
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
81
+ <div id="progressBar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Networks List -->
87
+ <div id="networksContainer" class="hidden">
88
+ <div class="flex items-center justify-between mb-4">
89
+ <h3 class="font-bold text-lg">الشبكات المكتشفة</h3>
90
+ <div class="text-sm text-gray-500">
91
+ <span id="networksCount">0</span> شبكة
92
+ </div>
93
+ </div>
94
+
95
+ <div id="networksList" class="grid gap-4">
96
+ <!-- Networks will be added here by JavaScript -->
97
+ </div>
98
+ </div>
99
+
100
+ <!-- No Networks Message -->
101
+ <div id="noNetworks" class="hidden text-center py-12 bg-white rounded-xl shadow">
102
+ <i class="fas fa-wifi-slash text-4xl text-gray-300 mb-4"></i>
103
+ <h4 class="text-lg font-medium text-gray-700">لم يتم العثور على شبكات واي فاي</h4>
104
+ <p class="text-gray-500 mt-2">تأكد من تشغيل الواي فاي على جهازك</p>
105
+ </div>
106
+
107
+ <!-- Network Details Modal -->
108
+ <div id="networkModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
109
+ <div class="bg-white rounded-xl w-full max-w-md">
110
+ <div class="p-6">
111
+ <div class="flex justify-between items-center mb-4">
112
+ <h3 class="text-xl font-bold" id="modalNetworkName">اسم الشبكة</h3>
113
+ <button id="closeModal" class="text-gray-400 hover:text-gray-600">
114
+ <i class="fas fa-times"></i>
115
+ </button>
116
+ </div>
117
+
118
+ <div class="space-y-4">
119
+ <div class="flex items-center gap-3">
120
+ <div class="p-2 bg-indigo-100 rounded-lg">
121
+ <i class="fas fa-lock text-indigo-600"></i>
122
+ </div>
123
+ <div>
124
+ <p class="text-gray-500 text-sm">نوع الحماية</p>
125
+ <p class="font-medium" id="modalSecurity">WPA2</p>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="flex items-center gap-3">
130
+ <div class="p-2 bg-indigo-100 rounded-lg">
131
+ <i class="fas fa-signal text-indigo-600"></i>
132
+ </div>
133
+ <div>
134
+ <p class="text-gray-500 text-sm">قوة الإشارة</p>
135
+ <p class="font-medium" id="modalStrength">قوية</p>
136
+ </div>
137
+ </div>
138
+
139
+ <div class="flex items-center gap-3">
140
+ <div class="p-2 bg-indigo-100 rounded-lg">
141
+ <i class="fas fa-key text-indigo-600"></i>
142
+ </div>
143
+ <div>
144
+ <p class="text-gray-500 text-sm">كلمة المرور</p>
145
+ <div class="flex items-center gap-2">
146
+ <input type="password" id="passwordInput" class="border rounded px-3 py-1 w-full" value="********" readonly>
147
+ <button id="showPassword" class="text-indigo-600">
148
+ <i class="far fa-eye"></i>
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="pt-4">
155
+ <button id="connectBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg flex items-center justify-center gap-2">
156
+ <i class="fas fa-plug"></i>
157
+ الاتصال بالشبكة
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <script>
167
+ document.addEventListener('DOMContentLoaded', function() {
168
+ const scanBtn = document.getElementById('scanBtn');
169
+ const scanProgress = document.getElementById('scanProgress');
170
+ const progressBar = document.getElementById('progressBar');
171
+ const networksContainer = document.getElementById('networksContainer');
172
+ const networksList = document.getElementById('networksList');
173
+ const noNetworks = document.getElementById('noNetworks');
174
+ const networksCount = document.getElementById('networksCount');
175
+ const networkModal = document.getElementById('networkModal');
176
+ const closeModal = document.getElementById('closeModal');
177
+ const showPassword = document.getElementById('showPassword');
178
+ const passwordInput = document.getElementById('passwordInput');
179
+ const connectBtn = document.getElementById('connectBtn');
180
+
181
+ // Sample WiFi networks data (in a real app, this would come from an API)
182
+ const sampleNetworks = [
183
+ { name: 'STC_5G_Home', strength: 4, security: 'WPA2', password: 'stc123456', connected: false },
184
+ { name: 'Zain_WiFi', strength: 3, security: 'WPA2', password: 'zain2023', connected: false },
185
+ { name: 'Mobily_WiFi', strength: 2, security: 'WPA', password: 'mobily789', connected: false },
186
+ { name: 'CoffeeShop_Free', strength: 3, security: 'None', password: '', connected: true },
187
+ { name: 'Home_Network', strength: 4, security: 'WPA2', password: 'myhome123', connected: false },
188
+ { name: 'Neighbor_WiFi', strength: 1, security: 'WPA2', password: 'neighbor456', connected: false }
189
+ ];
190
+
191
+ // Scan button click handler
192
+ scanBtn.addEventListener('click', function() {
193
+ // Show loading state
194
+ scanBtn.disabled = true;
195
+ scanProgress.classList.remove('hidden');
196
+
197
+ // Simulate scanning progress
198
+ let progress = 0;
199
+ const interval = setInterval(() => {
200
+ progress += 5;
201
+ progressBar.style.width = `${progress}%`;
202
+
203
+ if (progress >= 100) {
204
+ clearInterval(interval);
205
+ setTimeout(showNetworks, 500);
206
+ }
207
+ }, 100);
208
+ });
209
+
210
+ // Display networks after scan
211
+ function showNetworks() {
212
+ scanProgress.classList.add('hidden');
213
+ scanBtn.disabled = false;
214
+
215
+ if (sampleNetworks.length > 0) {
216
+ networksContainer.classList.remove('hidden');
217
+ noNetworks.classList.add('hidden');
218
+
219
+ // Clear previous results
220
+ networksList.innerHTML = '';
221
+
222
+ // Add networks to the list
223
+ sampleNetworks.forEach((network, index) => {
224
+ const networkCard = document.createElement('div');
225
+ networkCard.className = 'network-card bg-white rounded-lg shadow p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50';
226
+ networkCard.innerHTML = `
227
+ <div class="flex items-center gap-3">
228
+ <div class="p-2 bg-indigo-100 rounded-lg">
229
+ <i class="fas fa-wifi text-indigo-600"></i>
230
+ </div>
231
+ <div>
232
+ <h4 class="font-medium">${network.name}</h4>
233
+ <div class="flex items-center gap-2 text-xs text-gray-500">
234
+ <span>${network.security}</span>
235
+ <span>•</span>
236
+ <div class="flex items-center gap-1">
237
+ ${renderSignalStrength(network.strength)}
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div class="flex items-center gap-2">
243
+ ${network.connected ? '<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">متصل</span>' : ''}
244
+ <i class="fas fa-chevron-left text-gray-400"></i>
245
+ </div>
246
+ `;
247
+
248
+ networkCard.addEventListener('click', () => openNetworkModal(network));
249
+ networksList.appendChild(networkCard);
250
+ });
251
+
252
+ networksCount.textContent = sampleNetworks.length;
253
+ } else {
254
+ networksContainer.classList.add('hidden');
255
+ noNetworks.classList.remove('hidden');
256
+ }
257
+ }
258
+
259
+ // Render signal strength indicator
260
+ function renderSignalStrength(strength) {
261
+ let bars = '';
262
+ for (let i = 1; i <= 4; i++) {
263
+ const active = i <= strength;
264
+ bars += `<div class="w-1 h-${i} rounded-sm ${active ? 'bg-green-500' : 'bg-gray-300'}"></div>`;
265
+ }
266
+ return bars;
267
+ }
268
+
269
+ // Open network details modal
270
+ function openNetworkModal(network) {
271
+ document.getElementById('modalNetworkName').textContent = network.name;
272
+ document.getElementById('modalSecurity').textContent = network.security || 'غير محمي';
273
+
274
+ let strengthText = '';
275
+ if (network.strength === 4) strengthText = 'قوية جداً';
276
+ else if (network.strength === 3) strengthText = 'قوية';
277
+ else if (network.strength === 2) strengthText = 'متوسطة';
278
+ else strengthText = 'ضعيفة';
279
+
280
+ document.getElementById('modalStrength').textContent = strengthText;
281
+ passwordInput.value = network.password ? '********' : 'غير محمية';
282
+ passwordInput.type = 'password';
283
+
284
+ if (network.connected) {
285
+ connectBtn.innerHTML = '<i class="fas fa-sign-out-alt"></i> قطع الاتصال';
286
+ connectBtn.className = connectBtn.className.replace('bg-indigo-600 hover:bg-indigo-700', 'bg-red-600 hover:bg-red-700');
287
+ } else {
288
+ connectBtn.innerHTML = '<i class="fas fa-plug"></i> الاتصال بالشبكة';
289
+ connectBtn.className = connectBtn.className.replace('bg-red-600 hover:bg-red-700', 'bg-indigo-600 hover:bg-indigo-700');
290
+ }
291
+
292
+ networkModal.classList.remove('hidden');
293
+ }
294
+
295
+ // Close modal
296
+ closeModal.addEventListener('click', () => {
297
+ networkModal.classList.add('hidden');
298
+ });
299
+
300
+ // Toggle password visibility
301
+ showPassword.addEventListener('click', function() {
302
+ const network = sampleNetworks.find(n => n.name === document.getElementById('modalNetworkName').textContent);
303
+ if (passwordInput.type === 'password') {
304
+ passwordInput.type = 'text';
305
+ passwordInput.value = network.password || 'غير محمية';
306
+ showPassword.innerHTML = '<i class="far fa-eye-slash"></i>';
307
+ } else {
308
+ passwordInput.type = 'password';
309
+ passwordInput.value = network.password ? '********' : 'غير محمية';
310
+ showPassword.innerHTML = '<i class="far fa-eye"></i>';
311
+ }
312
+ });
313
+
314
+ // Connect button handler
315
+ connectBtn.addEventListener('click', function() {
316
+ const networkName = document.getElementById('modalNetworkName').textContent;
317
+ const networkIndex = sampleNetworks.findIndex(n => n.name === networkName);
318
+
319
+ if (networkIndex !== -1) {
320
+ // Toggle connection status
321
+ sampleNetworks[networkIndex].connected = !sampleNetworks[networkIndex].connected;
322
+
323
+ // Show connection status
324
+ alert(sampleNetworks[networkIndex].connected ?
325
+ `تم الاتصال بنجاح بشبكة ${networkName}` :
326
+ `تم قطع الاتصال عن شبكة ${networkName}`);
327
+
328
+ // Close modal and refresh list
329
+ networkModal.classList.add('hidden');
330
+ showNetworks();
331
+ }
332
+ });
333
+ });
334
+ </script>
335
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hader1890/gh4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
336
+ </html>