Hugging Face's logo

Spaces:
joermd
/
speedy-home
Running

App Files Community
joermd commited on
Commit
a412db4
·
verified ·
1 Parent(s): db2444c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +296 -19
index.html CHANGED
@@ -1,19 +1,296 @@
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 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>