Hugging Face's logo

Spaces:
joermd
/
speedy_urltest
Running

App Files Community
joermd commited on
Commit
bbbb886
·
verified ·
1 Parent(s): ea8fe1c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +219 -265
index.html CHANGED
@@ -1,342 +1,296 @@
1
  <!DOCTYPE html>
2
- <html dir="rtl" lang="ar">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>سبيدي | فاحص المواقع السريع</title>
 
7
  <style>
8
- @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
9
 
 
 
 
 
 
 
 
10
  :root {
11
- --speedy-primary: #8B4513;
12
- --speedy-dark: #5C2C0B;
13
- --speedy-light: #F5E6DB;
14
- --speedy-accent: #D2691E;
15
- --speedy-bg: #FDF9F6;
16
- --speedy-text: #3E2723;
17
- --speedy-border: #DEB887;
18
- --speedy-gradient: linear-gradient(135deg, #8B4513 0%, #5C2C0B 100%);
19
- --speedy-shadow: 0 4px 6px rgba(139, 69, 19, 0.2);
20
  }
21
 
22
  body {
23
- font-family: 'Cairo', sans-serif;
24
- margin: 0;
25
- padding: 20px;
26
- background: var(--speedy-bg);
27
- color: var(--speedy-text);
28
  line-height: 1.6;
29
  }
30
 
31
- .container {
32
- max-width: 900px;
33
- margin: 20px auto;
34
- background: white;
35
- padding: 30px;
36
- border-radius: 20px;
37
- box-shadow: var(--speedy-shadow);
38
- border: 1px solid var(--speedy-border);
39
- }
40
-
41
- .brand {
42
- text-align: center;
43
- margin-bottom: 10px;
44
  }
45
 
46
- .logo {
47
- font-size: 3em;
48
- font-weight: 700;
49
- color: var(--speedy-primary);
50
- text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.2);
51
- margin: 0;
 
 
52
  }
53
 
54
- .tagline {
55
- color: var(--speedy-accent);
56
- font-size: 1.2em;
57
- margin-top: 5px;
58
  }
59
 
60
- h1 {
61
- text-align: center;
62
- color: var(--speedy-dark);
63
- font-size: 2em;
64
- margin: 20px 0;
65
- font-weight: 700;
66
  }
67
 
68
- .input-group {
69
- display: flex;
70
- gap: 15px;
71
- margin: 30px auto;
72
- max-width: 700px;
73
- padding: 20px;
74
- background: var(--speedy-light);
75
- border-radius: 16px;
76
- box-shadow: inset 0 2px 4px rgba(92, 44, 11, 0.1);
77
  }
78
 
79
- input {
80
- flex: 1;
81
- padding: 15px 20px;
82
- border: 2px solid var(--speedy-border);
83
- border-radius: 12px;
84
- font-size: 16px;
85
- transition: all 0.3s ease;
86
- font-family: 'Cairo', sans-serif;
87
- background: white;
88
- color: var(--speedy-text);
89
  }
90
 
91
- input:focus {
92
- outline: none;
93
- border-color: var(--speedy-primary);
94
- box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.2);
95
  }
96
 
97
- input::placeholder {
98
- color: var(--speedy-border);
 
 
 
99
  }
100
 
101
- button {
102
- padding: 15px 30px;
103
- background: var(--speedy-gradient);
104
- color: white;
105
- border: none;
106
- border-radius: 12px;
 
107
  cursor: pointer;
108
- font-size: 16px;
109
- font-weight: 600;
110
- transition: all 0.3s ease;
111
- font-family: 'Cairo', sans-serif;
112
  }
113
 
114
- button:hover {
115
- transform: translateY(-2px);
116
- box-shadow: 0 6px 12px rgba(92, 44, 11, 0.3);
 
 
 
 
 
 
 
 
117
  }
118
 
119
- button:active {
120
- transform: translateY(0);
121
- background: var(--speedy-dark);
122
  }
123
 
124
- button:disabled {
125
- background: var(--speedy-border);
126
- transform: none;
127
- box-shadow: none;
128
  }
129
 
130
- .loading {
131
- text-align: center;
132
- display: none;
133
- margin: 20px 0;
134
- color: var(--speedy-primary);
135
- font-weight: 600;
136
  }
137
 
138
- .loading::after {
139
- content: '🚀';
140
- display: inline-block;
141
- margin-right: 10px;
142
- animation: rocket 1s infinite;
 
143
  }
144
 
145
- @keyframes rocket {
146
- 0% { transform: translateY(0) rotate(45deg); }
147
- 50% { transform: translateY(-10px) rotate(45deg); }
148
- 100% { transform: translateY(0) rotate(45deg); }
149
  }
150
 
151
- .results {
152
- margin-top: 30px;
153
- display: none;
154
- animation: fadeIn 0.5s ease;
155
  }
156
 
157
- @keyframes fadeIn {
158
- from { opacity: 0; transform: translateY(20px); }
159
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
160
  }
161
 
162
- .results-section {
163
- background: white;
164
- border-radius: 16px;
165
- padding: 25px;
166
- margin-bottom: 20px;
167
- border: 1px solid var(--speedy-border);
168
- transition: all 0.3s ease;
169
  }
170
 
171
- .results-section:hover {
172
- transform: translateY(-3px);
173
- box-shadow: var(--speedy-shadow);
174
- border-color: var(--speedy-primary);
 
 
 
 
 
 
 
 
 
175
  }
176
 
177
- .results h2 {
178
- color: var(--speedy-dark);
179
- border-bottom: 2px solid var(--speedy-primary);
180
- padding-bottom: 10px;
181
- margin-bottom: 20px;
182
  }
183
 
184
- .info-item {
 
 
 
 
 
 
 
185
  display: flex;
186
- justify-content: space-between;
187
- padding: 12px;
188
- border-bottom: 1px solid var(--speedy-light);
189
- transition: background-color 0.2s ease;
190
- }
191
-
192
- .info-item:hover {
193
- background-color: var(--speedy-bg);
194
- border-radius: 8px;
195
- }
196
-
197
- .info-item:last-child {
198
- border-bottom: none;
199
- }
200
-
201
- .info-label {
202
- font-weight: 600;
203
- color: var(--speedy-text);
204
  }
205
 
206
- .info-value {
207
- color: var(--speedy-primary);
208
  }
209
 
210
- .error {
211
- color: #D35400;
212
- background: rgba(211, 84, 0, 0.1);
213
- padding: 15px;
214
- border-radius: 12px;
215
- text-align: center;
216
- margin: 20px 0;
217
- display: none;
218
- border: 1px solid rgba(211, 84, 0, 0.3);
219
  }
220
 
221
- /* للشاشات الصغيرة */
222
- @media (max-width: 768px) {
223
- .input-group {
224
- flex-direction: column;
225
- }
226
-
227
- button {
228
- width: 100%;
229
  }
230
 
231
- .container {
232
- padding: 20px;
233
  }
234
 
235
- .logo {
236
- font-size: 2.5em;
237
  }
238
  }
239
  </style>
240
  </head>
241
  <body>
242
- <div class="container">
243
- <div class="brand">
244
- <h1 class="logo">سبيدي</h1>
245
- <div class="tagline">فاحص المواقع السريع والذكي</div>
246
- </div>
247
-
248
- <div class="input-group">
249
- <input type="url" id="urlInput" placeholder="https://example.com" dir="ltr">
250
- <button onclick="checkUrl()">فحص سريع</button>
251
- </div>
252
-
253
- <div class="loading" id="loading">
254
- جاري التحليل السريع للموقع...
255
- </div>
 
 
 
 
 
 
 
256
 
257
- <div class="error" id="error"></div>
258
-
259
- <div class="results" id="results">
260
- <div class="results-section">
261
- <h2>معلومات الموقع</h2>
262
- <div id="info"></div>
263
- </div>
264
-
265
- <div class="results-section">
266
- <h2>نصائح تحسين الموقع</h2>
267
- <div id="tips"></div>
268
- </div>
269
-
270
- <div class="results-section">
271
- <h2>تحليل الزيارات</h2>
272
- <div id="traffic"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
273
  </div>
274
  </div>
275
  </div>
276
 
277
- <script>
278
- async function checkUrl() {
279
- const urlInput = document.getElementById('urlInput');
280
- const loading = document.getElementById('loading');
281
- const results = document.getElementById('results');
282
- const error = document.getElementById('error');
283
- const button = document.querySelector('button');
284
-
285
- if (!urlInput.value) {
286
- error.textContent = 'الرجاء إدخال رابط صالح للفحص';
287
- error.style.display = 'block';
288
- return;
289
- }
290
-
291
- error.style.display = 'none';
292
- results.style.display = 'none';
293
- loading.style.display = 'block';
294
- button.disabled = true;
295
-
296
- try {
297
- const response = await fetch('/check-url', {
298
- method: 'POST',
299
- headers: {
300
- 'Content-Type': 'application/json',
301
- },
302
- body: JSON.stringify({ url: urlInput.value })
303
- });
304
-
305
- const data = await response.json();
306
-
307
- if (data.error) {
308
- error.textContent = data.error;
309
- error.style.display = 'block';
310
- } else {
311
- document.getElementById('info').innerHTML = formatInfo(data.info);
312
- document.getElementById('tips').innerHTML = formatList(data.tips);
313
- document.getElementById('traffic').innerHTML = formatList(data.traffic_estimate);
314
- results.style.display = 'block';
315
- }
316
- } catch (err) {
317
- error.textContent = 'عذراً، حدث خطأ أثناء الاتصال بالخادم';
318
- error.style.display = 'block';
319
- } finally {
320
- loading.style.display = 'none';
321
- button.disabled = false;
322
- }
323
- }
324
-
325
- function formatInfo(info) {
326
- return Object.entries(info)
327
- .map(([key, value]) => `
328
- <div class="info-item">
329
- <span class="info-label">${key}</span>
330
- <span class="info-value">${value}</span>
331
- </div>
332
- `).join('');
333
- }
334
-
335
- function formatList(items) {
336
- return items
337
- .map(item => `<div class="info-item">${item}</div>`)
338
- .join('');
339
- }
340
- </script>
341
  </body>
342
  </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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
8
  <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');
10
 
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ font-family: 'Cairo', sans-serif;
16
+ }
17
+
18
  :root {
19
+ --primary: #2C3E50;
20
+ --secondary: #E74C3C;
21
+ --accent: #F1C40F;
22
+ --dark: #1a1a1a;
23
+ --light: #ffffff;
24
+ --gradient: linear-gradient(135deg, #E74C3C, #F1C40F);
 
 
 
25
  }
26
 
27
  body {
28
+ background-color: var(--dark);
29
+ color: var(--light);
 
 
 
30
  line-height: 1.6;
31
  }
32
 
33
+ .hero {
34
+ min-height: 100vh;
35
+ background: radial-gradient(circle at center, #2c3e50 0%, #1a1a1a 100%);
36
+ position: relative;
37
+ overflow: hidden;
 
 
 
 
 
 
 
 
38
  }
39
 
40
+ .hero::before {
41
+ content: '';
42
+ position: absolute;
43
+ width: 200%;
44
+ height: 200%;
45
+ background: url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="%23E74C3C" stroke-width="0.5" fill="none"/></svg>');
46
+ animation: rotate 60s linear infinite;
47
+ opacity: 0.1;
48
  }
49
 
50
+ @keyframes rotate {
51
+ 0% { transform: rotate(0deg); }
52
+ 100% { transform: rotate(360deg); }
 
53
  }
54
 
55
+ .container {
56
+ max-width: 1400px;
57
+ margin: 0 auto;
58
+ padding: 2rem;
59
+ position: relative;
 
60
  }
61
 
62
+ .hero-content {
63
+ display: grid;
64
+ grid-template-columns: 1fr 1fr;
65
+ gap: 4rem;
66
+ align-items: center;
67
+ min-height: 90vh;
 
 
 
68
  }
69
 
70
+ .hero-text h1 {
71
+ font-size: 4.5rem;
72
+ font-weight: 900;
73
+ margin-bottom: 2rem;
74
+ line-height: 1.2;
75
+ background: var(--gradient);
76
+ -webkit-background-clip: text;
77
+ -webkit-text-fill-color: transparent;
 
 
78
  }
79
 
80
+ .hero-text p {
81
+ font-size: 1.5rem;
82
+ margin-bottom: 3rem;
83
+ color: #ecf0f1;
84
  }
85
 
86
+ .services {
87
+ display: grid;
88
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
89
+ gap: 2rem;
90
+ margin-top: 4rem;
91
  }
92
 
93
+ .service-card {
94
+ background: rgba(255, 255, 255, 0.05);
95
+ border-radius: 20px;
96
+ padding: 2rem;
97
+ transition: all 0.4s ease;
98
+ backdrop-filter: blur(10px);
99
+ border: 1px solid rgba(255, 255, 255, 0.1);
100
  cursor: pointer;
101
+ position: relative;
102
+ overflow: hidden;
 
 
103
  }
104
 
105
+ .service-card::before {
106
+ content: '';
107
+ position: absolute;
108
+ top: 0;
109
+ left: 0;
110
+ width: 100%;
111
+ height: 100%;
112
+ background: var(--gradient);
113
+ opacity: 0;
114
+ transition: 0.4s;
115
+ z-index: 1;
116
  }
117
 
118
+ .service-card:hover::before {
119
+ opacity: 0.1;
 
120
  }
121
 
122
+ .service-card:hover {
123
+ transform: translateY(-10px);
124
+ border-color: var(--secondary);
 
125
  }
126
 
127
+ .service-icon {
128
+ font-size: 3rem;
129
+ color: var(--secondary);
130
+ margin-bottom: 1.5rem;
131
+ position: relative;
132
+ z-index: 2;
133
  }
134
 
135
+ .service-title {
136
+ font-size: 1.8rem;
137
+ margin-bottom: 1rem;
138
+ color: var(--light);
139
+ position: relative;
140
+ z-index: 2;
141
  }
142
 
143
+ .service-description {
144
+ color: #ecf0f1;
145
+ position: relative;
146
+ z-index: 2;
147
  }
148
 
149
+ .features {
150
+ display: flex;
151
+ gap: 2rem;
152
+ margin-bottom: 3rem;
153
  }
154
 
155
+ .feature {
156
+ background: rgba(231, 76, 60, 0.1);
157
+ padding: 1rem 2rem;
158
+ border-radius: 15px;
159
+ display: flex;
160
+ align-items: center;
161
+ gap: 1rem;
162
  }
163
 
164
+ .feature i {
165
+ color: var(--secondary);
166
+ font-size: 1.5rem;
 
 
 
 
167
  }
168
 
169
+ .cta-button {
170
+ display: inline-block;
171
+ padding: 1.5rem 3rem;
172
+ background: var(--gradient);
173
+ color: var(--light);
174
+ text-decoration: none;
175
+ border-radius: 50px;
176
+ font-size: 1.2rem;
177
+ font-weight: bold;
178
+ transition: 0.3s;
179
+ border: none;
180
+ cursor: pointer;
181
+ box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
182
  }
183
 
184
+ .cta-button:hover {
185
+ transform: translateY(-3px);
186
+ box-shadow: 0 15px 30px rgba(231, 76, 60, 0.4);
 
 
187
  }
188
 
189
+ .floating-chat {
190
+ position: fixed;
191
+ bottom: 2rem;
192
+ right: 2rem;
193
+ background: var(--gradient);
194
+ width: 60px;
195
+ height: 60px;
196
+ border-radius: 50%;
197
  display: flex;
198
+ align-items: center;
199
+ justify-content: center;
200
+ cursor: pointer;
201
+ transition: 0.3s;
202
+ box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
 
 
 
 
 
 
 
 
 
 
 
 
 
203
  }
204
 
205
+ .floating-chat:hover {
206
+ transform: scale(1.1);
207
  }
208
 
209
+ .floating-chat i {
210
+ font-size: 1.5rem;
211
+ color: var(--light);
 
 
 
 
 
 
212
  }
213
 
214
+ @media (max-width: 968px) {
215
+ .hero-content {
216
+ grid-template-columns: 1fr;
217
+ text-align: center;
 
 
 
 
218
  }
219
 
220
+ .hero-text h1 {
221
+ font-size: 3rem;
222
  }
223
 
224
+ .features {
225
+ flex-direction: column;
226
  }
227
  }
228
  </style>
229
  </head>
230
  <body>
231
+ <div class="hero">
232
+ <div class="container">
233
+ <div class="hero-content">
234
+ <div class="hero-text">
235
+ <h1>سبيدي - أول نموذج ذكاء اصطناعي مصري</h1>
236
+ <p>نقدم لك تجربة فريدة مع أحدث تقنيات الذكاء الاصطناعي بلمسة مصرية</p>
237
+
238
+ <div class="features">
239
+ <div class="feature">
240
+ <i class="fas fa-brain"></i>
241
+ <span>ذكاء متطور</span>
242
+ </div>
243
+ <div class="feature">
244
+ <i class="fas fa-language"></i>
245
+ <span>فهم اللهجة المصرية</span>
246
+ </div>
247
+ <div class="feature">
248
+ <i class="fas fa-bolt"></i>
249
+ <span>سرعة فائقة</span>
250
+ </div>
251
+ </div>
252
 
253
+ <button class="cta-button">جرب سبيدي الآن</button>
254
+ </div>
255
+
256
+ <div class="services">
257
+ <div class="service-card">
258
+ <i class="fas fa-comments service-icon"></i>
259
+ <h3 class="service-title">دردشة ذكية</h3>
260
+ <p class="service-description">تحدث مع سبيدي باللهجة المصرية وسيفهمك على طول</p>
261
+ </div>
262
+ <div class="service-card">
263
+ <i class="fas fa-file-alt service-icon"></i>
264
+ <h3 class="service-title">تلخيص النصوص</h3>
265
+ <p class="service-description">لخص أي محتوى عربي ف�� ثواني معدودة</p>
266
+ </div>
267
+ <div class="service-card">
268
+ <i class="fas fa-image service-icon"></i>
269
+ <h3 class="service-title">قسم الميديا</h3>
270
+ <p class="service-description">خدمات الميديا كلها بالذكاء الاصطناعي</p>
271
+ </div>
272
+ <div class="service-card">
273
+ <i class="fas fa-stethoscope service-icon"></i>
274
+ <h3 class="service-title">تحليل طبي</h3>
275
+ <p class="service-description">تحليل النتائج الطبية وتقديم توصيات دقيقة</p>
276
+ </div>
277
+ <div class="service-card">
278
+ <i class="fas fa-tshirt service-icon"></i>
279
+ <h3 class="service-title">مستشار الأزياء</h3>
280
+ <p class="service-description">اقتراحات ذكية للملابس حسب ذوقك</p>
281
+ </div>
282
+ <div class="service-card">
283
+ <i class="fas fa-chart-line service-icon"></i>
284
+ <h3 class="service-title">تحليل مالي</h3>
285
+ <p class="service-description">تحليل السوق وتقديم نصائح استثمارية</p>
286
+ </div>
287
+ </div>
288
  </div>
289
  </div>
290
  </div>
291
 
292
+ <div class="floating-chat">
293
+ <i class="fas fa-robot"></i>
294
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
295
  </body>
296
  </html>