Hugging Face's logo

Spaces:
joermd
/
home
Running

App Files Community
joermd commited on
Commit
bbdaadb
·
verified ·
1 Parent(s): 8b6a151

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +61 -182
index.html CHANGED
@@ -3,202 +3,81 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Speedy Sons - النموذج العربي الأول</title>
 
7
  <style>
8
- @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
9
-
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- font-family: 'Tajawal', sans-serif;
15
  }
16
-
17
- body {
18
- background: #ffffff;
19
- color: #333;
20
- }
21
-
22
- .nav {
23
- background: white;
24
- padding: 1rem 2rem;
25
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
26
- position: fixed;
27
- width: 100%;
28
- top: 0;
29
- z-index: 1000;
30
- }
31
-
32
- .logo-img {
33
- height: 40px;
34
- background: #e6fffa;
35
- padding: 5px;
36
- border-radius: 8px;
37
- }
38
-
39
- .hero {
40
- padding-top: 100px;
41
- background: linear-gradient(135deg, #e6fffa 0%, #f0f7ff 100%);
42
- min-height: 80vh;
43
- display: grid;
44
- grid-template-columns: 1fr 1fr;
45
- gap: 2rem;
46
- padding: 8rem 4rem 4rem;
47
- }
48
-
49
- .hero-text {
50
- display: flex;
51
- flex-direction: column;
52
- justify-content: center;
53
- }
54
-
55
- .hero-image {
56
- display: grid;
57
- grid-template-columns: repeat(2, 1fr);
58
- gap: 1rem;
59
- }
60
-
61
- .usage-card {
62
- background: white;
63
- border-radius: 15px;
64
- padding: 1rem;
65
- box-shadow: 0 4px 15px rgba(0,0,0,0.1);
66
- transition: transform 0.3s;
67
- aspect-ratio: 1;
68
- display: flex;
69
- flex-direction: column;
70
- justify-content: center;
71
- align-items: center;
72
- text-align: center;
73
- }
74
-
75
- .usage-card:hover {
76
- transform: translateY(-5px);
77
  }
78
-
79
- .features {
80
- padding: 4rem;
81
- display: grid;
82
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
83
- gap: 2rem;
84
- }
85
-
86
- .feature-card {
87
- background: white;
88
- border-radius: 20px;
89
- padding: 2rem;
90
- box-shadow: 0 4px 15px rgba(0,0,0,0.1);
91
- transition: all 0.3s;
92
- border: 2px solid transparent;
93
- }
94
-
95
  .feature-card:hover {
96
- border-color: #00b4d8;
97
- transform: translateY(-5px);
98
  }
99
-
100
- .feature-icon {
101
- font-size: 2rem;
102
- margin-bottom: 1rem;
103
- color: #00b4d8;
104
- }
105
-
106
- h1 {
107
- font-size: 3.5rem;
108
- margin-bottom: 1.5rem;
109
- background: linear-gradient(45deg, #00b4d8, #0077b6);
110
- -webkit-background-clip: text;
111
- -webkit-text-fill-color: transparent;
112
- }
113
-
114
- .image-placeholder {
115
- background: #f8f9fa;
116
- border-radius: 10px;
117
- padding: 1rem;
118
- text-align: center;
119
- color: #666;
120
- }
121
-
122
- .btn {
123
- background: #00b4d8;
124
- color: white;
125
- padding: 1rem 2rem;
126
- border: none;
127
- border-radius: 50px;
128
- font-size: 1.1rem;
129
- cursor: pointer;
130
- transition: transform 0.3s;
131
- margin-top: 2rem;
132
- display: inline-block;
133
- }
134
-
135
- .btn:hover {
136
- transform: scale(1.05);
137
  }
138
  </style>
139
  </head>
140
- <body>
141
- <nav class="nav">
142
- <img src="[رابط_اللوجو]" alt="Speedy Sons" class="logo-img">
 
 
 
 
 
143
  </nav>
144
 
145
- <section class="hero">
146
- <div class="hero-text">
147
- <h1>سبيدي سونز</h1>
148
- <p>أول نموذج ذكاء اصطناعي عربي متكامل</p>
149
- <button class="btn">ابدأ الآن</button>
150
- </div>
151
- <div class="hero-image">
152
- <div class="usage-card">
153
- <div class="image-placeholder">[صورة_1]</div>
154
- <p>كتابة المحتوى الإبداعي</p>
 
 
155
  </div>
156
- <div class="usage-card">
157
- <div class="image-placeholder">[صورة_2]</div>
158
- <p>تحليل البيانات</p>
159
  </div>
160
- <div class="usage-card">
161
- <div class="image-placeholder">[صورة_3]</div>
162
- <p>الترجمة الذكية</p>
163
  </div>
164
- <div class="usage-card">
165
- <div class="image-placeholder">[صورة_4]</div>
166
- <p>المساعدة التعليمية</p>
167
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </div>
169
- </section>
170
-
171
- <section class="features">
172
- <div class="feature-card">
173
- <div class="feature-icon">🎯</div>
174
- <h3>دقة عالية</h3>
175
- <p>نتائج دقيقة وموثوقة في جميع المهام</p>
176
- </div>
177
- <div class="feature-card">
178
- <div class="feature-icon">🔐</div>
179
- <h3>خصوصية تامة</h3>
180
- <p>حماية كاملة لبياناتك ومحادثاتك</p>
181
- </div>
182
- <div class="feature-card">
183
- <div class="feature-icon">⚡</div>
184
- <h3>سرعة فائقة</h3>
185
- <p>استجابة فورية لجميع الطلبات</p>
186
- </div>
187
- <div class="feature-card">
188
- <div class="feature-icon">🔄</div>
189
- <h3>تحديثات مستمرة</h3>
190
- <p>تحسينات وميزات جديدة بشكل دوري</p>
191
- </div>
192
- <div class="feature-card">
193
- <div class="feature-icon">💡</div>
194
- <h3>ذكاء متقدم</h3>
195
- <p>فهم عميق للسياق والمحتوى العربي</p>
196
- </div>
197
- <div class="feature-card">
198
- <div class="feature-icon">🎓</div>
199
- <h3>تعلم مستمر</h3>
200
- <p>تحسين مستمر للأداء والقدرات</p>
201
- </div>
202
- </section>
203
  </body>
204
  </html>
 
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/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
8
  <style>
9
+ @keyframes rotate {
10
+ from { transform: rotate(0deg); }
11
+ to { transform: rotate(360deg); }
 
 
 
 
12
  }
13
+ .rotate-animation {
14
+ animation: rotate 10s linear infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  .feature-card:hover {
17
+ transform: translateY(-10px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
19
  }
20
+ .gradient-bg {
21
+ background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
  </style>
24
  </head>
25
+ <body class="gradient-bg min-h-screen text-white">
26
+ <nav class="bg-gray-900/50 backdrop-blur-lg">
27
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
28
+ <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="Logo" class="w-12 h-12 rotate-animation">
29
+ <button class="bg-orange-500 hover:bg-orange-600 px-6 py-2 rounded-full transition-colors">
30
+ ابدأ الآن
31
+ </button>
32
+ </div>
33
  </nav>
34
 
35
+ <main class="container mx-auto px-6 py-16">
36
+ <section class="text-center mb-20">
37
+ <h1 class="text-5xl font-bold mb-6">أول نموذج ذكاء اصطناعي مصري</h1>
38
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">
39
+ تجربة فريدة في عالم الذكاء الاصطناعي مع قدرات متقدمة وفهم عميق للغة العربية
40
+ </p>
41
+ </section>
42
+
43
+ <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
44
+ <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-8 transition-all duration-300">
45
+ <h3 class="text-xl font-bold mb-4">المحادثة الذكية</h3>
46
+ <p class="text-gray-300">القدرة على فهم وتحليل والرد على جميع الاستفسارات بدقة عالية</p>
47
  </div>
48
+ <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-8 transition-all duration-300">
49
+ <h3 class="text-xl font-bold mb-4">كتابة المحتوى</h3>
50
+ <p class="text-gray-300">إنشاء مقالات وقصص وروايات باللغة العربية الفصحى</p>
51
  </div>
52
+ <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-8 transition-all duration-300">
53
+ <h3 class="text-xl font-bold mb-4">التحدث الصوتي</h3>
54
+ <p class="text-gray-300">دعم كامل للتحدث باللغة العربية الفصحى بطلاقة</p>
55
  </div>
56
+ <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-8 transition-all duration-300">
57
+ <h3 class="text-xl font-bold mb-4">البحث المتقدم</h3>
58
+ <p class="text-gray-300">إمكانية البحث في الإنترنت وتقديم معلومات دقيقة</p>
59
  </div>
60
+ <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-8 transition-all duration-300">
61
+ <h3 class="text-xl font-bold mb-4">تحليل البيانات</h3>
62
+ <p class="text-gray-300">قدرات متقدمة في تحليل ومعالجة البيانات</p>
63
+ </div>
64
+ <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-8 transition-all duration-300">
65
+ <h3 class="text-xl font-bold mb-4">الترجمة</h3>
66
+ <p class="text-gray-300">ترجمة دقيقة بين العربية واللغات الأخرى</p>
67
+ </div>
68
+ </section>
69
+
70
+ <section class="text-center mt-20">
71
+ <button class="bg-orange-500 hover:bg-orange-600 px-12 py-4 rounded-full text-lg font-bold transition-colors">
72
+ جرب النموذج مجاناً
73
+ </button>
74
+ </section>
75
+ </main>
76
+
77
+ <footer class="bg-gray-900/50 backdrop-blur-lg mt-20 py-8">
78
+ <div class="container mx-auto px-6 text-center text-gray-400">
79
+ جميع الحقوق محفوظة © 2025
80
  </div>
81
+ </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  </body>
83
  </html>