joermd commited on
Commit
8b6a151
·
verified ·
1 Parent(s): fc26fb4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +142 -98
index.html CHANGED
@@ -3,9 +3,9 @@
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;700&display=swap');
9
 
10
  * {
11
  margin: 0;
@@ -15,146 +15,190 @@
15
  }
16
 
17
  body {
18
- background: #f0f2f5;
19
- color: #2c3e50;
20
  }
21
 
22
- .logo-container {
23
- text-align: center;
24
- padding: 2rem;
25
- background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
 
 
 
 
26
  }
27
 
28
- .logo {
29
- width: 120px;
30
- height: 120px;
31
- position: relative;
32
- margin: 0 auto;
33
  }
34
 
35
- .wave {
36
- stroke: #2c3e50;
37
- stroke-width: 3;
38
- fill: none;
39
- animation: waveMove 2s infinite ease-in-out;
 
 
 
 
 
 
 
 
 
40
  }
41
 
42
- .dot {
43
- fill: #2c3e50;
44
- animation: dotPulse 2s infinite ease-in-out;
 
45
  }
46
 
47
- @keyframes waveMove {
48
- 0% { transform: translateX(-5px); }
49
- 50% { transform: translateX(5px); }
50
- 100% { transform: translateX(-5px); }
 
 
 
 
 
 
 
 
51
  }
52
 
53
- @keyframes dotPulse {
54
- 0%, 100% { transform: scale(1); }
55
- 50% { transform: scale(1.2); }
56
  }
57
 
58
- .capabilities {
59
- max-width: 1200px;
60
- margin: 2rem auto;
61
- padding: 0 1rem;
62
  display: grid;
63
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
64
  gap: 2rem;
65
  }
66
 
67
- .capability-card {
68
  background: white;
69
- border-radius: 15px;
70
  padding: 2rem;
71
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
72
- transition: transform 0.3s;
 
73
  }
74
 
75
- .capability-card:hover {
 
76
  transform: translateY(-5px);
77
  }
78
 
79
- .capability-icon {
80
  font-size: 2rem;
81
  margin-bottom: 1rem;
82
- color: #3498db;
83
  }
84
 
85
- h2 {
86
- color: #2c3e50;
87
- margin-bottom: 1rem;
 
 
 
88
  }
89
 
90
- h3 {
91
- color: #3498db;
92
- margin-bottom: 0.5rem;
 
 
 
93
  }
94
 
95
- .controls {
96
- position: fixed;
97
- bottom: 2rem;
98
- left: 2rem;
99
- background: white;
100
- padding: 1rem;
101
- border-radius: 10px;
102
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 
 
 
 
 
 
 
103
  }
104
  </style>
105
  </head>
106
  <body>
107
- <div class="logo-container">
108
- <svg class="logo" viewBox="0 0 100 100">
109
- <circle class="dot" cx="10" cy="50" r="5"/>
110
- <path class="wave" d="M 20 50 Q 35 30, 50 50 T 80 50"/>
111
- <circle class="dot" cx="90" cy="50" r="5"/>
112
- </svg>
113
- <h1>Speedy Sons AI</h1>
114
- </div>
115
-
116
- <div class="capabilities">
117
- <div class="capability-card">
118
- <div class="capability-icon">💬</div>
119
- <h3>المحادثة والأسئلة</h3>
120
- <p>الرد على الأسئلة بدقة عالية مع فهم عميق للسياق العربي</p>
121
  </div>
122
-
123
- <div class="capability-card">
124
- <div class="capability-icon">🔍</div>
125
- <h3>البحث على الإنترنت</h3>
126
- <p>القدرة على البحث وتحليل المعلومات من مصادر موثوقة</p>
 
 
 
 
 
 
 
 
 
 
 
 
127
  </div>
 
128
 
129
- <div class="capability-card">
130
- <div class="capability-icon">📝</div>
131
- <h3>كتابة المقالات</h3>
132
- <p>إنشاء محتوى احترافي مع مراعاة أسس الكتابة الصحفية</p>
 
133
  </div>
134
-
135
- <div class="capability-card">
136
- <div class="capability-icon">📚</div>
137
- <h3>القصص والروايات</h3>
138
- <p>كتابة قصص إبداعية وروايات متكاملة بأسلوب أدبي رفيع</p>
139
  </div>
140
-
141
- <div class="capability-card">
142
- <div class="capability-icon">🗣️</div>
143
- <h3>التحدث الصوتي</h3>
144
- <p>نطق عربي فصيح مع تنغيم طبيعي ومخارج صحيحة للحروف</p>
145
  </div>
146
-
147
- <div class="capability-card">
148
- <div class="capability-icon">⚙️</div>
149
- <h3>التحكم في القدرات</h3>
150
- <p>إمكانية تخصيص وضبط مستويات أداء النموذج حسب الحاجة</p>
151
  </div>
152
- </div>
153
-
154
- <div class="controls">
155
- <h3>التحكم في القدرات</h3>
156
- <input type="range" min="1" max="100" value="50">
157
- <button>تطبيق</button>
158
- </div>
 
 
 
 
159
  </body>
160
  </html>
 
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;
 
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>