Hugging Face's logo

Spaces:
joermd
/
home
Running

App Files Community
joermd commited on
Commit
3a7aaae
·
verified ·
1 Parent(s): 8c05c5a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +79 -154
index.html CHANGED
@@ -14,208 +14,133 @@
14
  font-family: 'Cairo', sans-serif;
15
  }
16
 
17
- body {
18
- background-color: #ffffff;
19
- }
20
-
21
- .hero {
22
  padding: 4rem 2rem;
23
- text-align: center;
24
  max-width: 1200px;
25
  margin: 0 auto;
26
  }
27
 
28
- .hero-content {
29
  display: flex;
30
  align-items: center;
31
- justify-content: space-between;
32
- gap: 2rem;
33
- margin-bottom: 4rem;
34
- }
35
-
36
- .hero-text {
37
- flex: 1;
38
- text-align: right;
39
- }
40
-
41
- .hero-image {
42
- flex: 1;
43
- position: relative;
44
- background-color: #ff7961;
45
- border-radius: 10px;
46
- padding: 2rem;
47
- }
48
-
49
- .logo {
50
- width: 300px;
51
- animation: pulse 2s infinite;
52
- }
53
-
54
- @keyframes pulse {
55
- 0% { transform: scale(1); }
56
- 50% { transform: scale(1.05); }
57
- 100% { transform: scale(1); }
58
  }
59
 
60
- h1 {
61
- font-size: 3rem;
62
- margin-bottom: 1rem;
63
- color: #333;
64
  }
65
 
66
- .subtitle {
67
- font-size: 1.2rem;
68
- color: #666;
69
- margin-bottom: 2rem;
70
- }
71
-
72
- .buttons {
73
- display: flex;
74
- gap: 1rem;
75
- margin-top: 2rem;
76
  }
77
 
78
- .button {
79
- padding: 0.8rem 1.5rem;
80
- border-radius: 5px;
81
- text-decoration: none;
82
- font-weight: bold;
83
- }
84
-
85
- .button-primary {
86
- background-color: #333;
87
- color: white;
88
  }
89
 
90
- .button-secondary {
91
- border: 2px solid #333;
92
- color: #333;
 
 
93
  }
94
 
95
- .capabilities {
96
- display: grid;
97
- grid-template-columns: repeat(4, 1fr);
98
- gap: 2rem;
99
- text-align: center;
100
- margin-top: 4rem;
101
  }
102
 
103
- .capability {
104
- display: flex;
105
- flex-direction: column;
106
- align-items: center;
107
- gap: 1rem;
108
  }
109
 
110
- .icon {
111
  font-size: 2rem;
112
- margin-bottom: 0.5rem;
113
- }
114
-
115
- h2 {
116
- font-size: 1.5rem;
117
  color: #333;
118
- margin-bottom: 0.5rem;
 
 
 
119
  }
120
 
121
- p {
 
122
  color: #666;
123
  line-height: 1.6;
 
 
 
124
  }
125
 
126
- .media-section {
127
- margin-top: 4rem;
128
- text-align: center;
129
- }
130
-
131
- .media-container {
132
- display: grid;
133
- grid-template-columns: repeat(2, 1fr);
134
- gap: 2rem;
135
- margin-top: 2rem;
136
- }
137
-
138
- .media-item {
139
- border-radius: 10px;
140
- overflow: hidden;
141
- background-color: #f5f5f5;
142
  }
143
 
144
- .media-item img,
145
- .media-item video {
146
- width: 100%;
147
- height: auto;
148
- display: block;
 
 
 
 
149
  }
150
 
151
  @media (max-width: 768px) {
152
- .hero-content {
153
  flex-direction: column;
154
  }
155
- .capabilities {
156
- grid-template-columns: repeat(2, 1fr);
157
- }
158
- .media-container {
159
- grid-template-columns: 1fr;
160
  }
161
  }
162
  </style>
163
  </head>
164
  <body>
165
- <main class="hero">
166
- <div class="hero-content">
167
- <div class="hero-text">
168
- <h1>تعرف على نموذج الذكاء المصري</h1>
169
- <p class="subtitle">أول نموذج ذكاء اصطناعي متكامل في مصر. مصمم للإبداع والابتكار وحل المشكلات المعقدة.</p>
170
- <div class="buttons">
171
- <a href="#" class="button button-primary">جرب النموذج</a>
172
- <a href="#" class="button button-secondary">واجهة API</a>
173
- </div>
174
  </div>
175
- <div class="hero-image">
176
- <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="شعار الذكاء الاصطناعي" class="logo">
177
  </div>
178
  </div>
179
 
180
- <section class="capabilities">
181
- <div class="capability">
182
- <div class="icon">🧠</div>
183
- <h2>تفكير متقدم</h2>
184
- <p>قدرات تحليلية وإدراكية متطورة</p>
185
- </div>
186
- <div class="capability">
187
- <div class="icon">👁️</div>
188
- <h2>تحليل الصور</h2>
189
- <p>فهم وتحليل المحتوى البصري</p>
190
- </div>
191
- <div class="capability">
192
- <div class="icon">💻</div>
193
- <h2>برمجة ذكية</h2>
194
- <p>إنشاء وتحليل التعليمات البرمجية</p>
195
  </div>
196
- <div class="capability">
197
- <div class="icon">🌐</div>
198
- <h2>دعم متعدد اللغات</h2>
199
- <p>معالجة وترجمة بين اللغات المختلفة</p>
200
  </div>
201
- </section>
202
 
203
- <section class="media-section">
204
- <h2>استكشف المزيد</h2>
205
- <div class="media-container">
206
- <div class="media-item">
207
- <!-- Replace with your image URL -->
208
- <img src="/api/placeholder/600/400" alt="صورة توضيحية">
209
- </div>
210
- <div class="media-item">
211
- <!-- Replace with your video URL -->
212
- <video controls>
213
- <source src="your-video-url.mp4" type="video/mp4">
214
- متصفحك لا يدعم تشغيل الفيديو.
215
- </video>
216
- </div>
217
  </div>
218
- </section>
219
- </main>
220
  </body>
221
  </html>
 
14
  font-family: 'Cairo', sans-serif;
15
  }
16
 
17
+ .features-section {
 
 
 
 
18
  padding: 4rem 2rem;
 
19
  max-width: 1200px;
20
  margin: 0 auto;
21
  }
22
 
23
+ .feature {
24
  display: flex;
25
  align-items: center;
26
+ margin-bottom: 3rem;
27
+ opacity: 0;
28
+ transform: translateY(20px);
29
+ animation: fadeInUp 0.6s forwards;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
 
32
+ .feature:nth-child(2) {
33
+ animation-delay: 0.2s;
 
 
34
  }
35
 
36
+ .feature:nth-child(3) {
37
+ animation-delay: 0.4s;
 
 
 
 
 
 
 
 
38
  }
39
 
40
+ .feature-image {
41
+ flex: 1;
42
+ border-radius: 10px;
43
+ overflow: hidden;
44
+ margin: 0 2rem;
 
 
 
 
 
45
  }
46
 
47
+ .feature-image img {
48
+ width: 100%;
49
+ height: 300px;
50
+ object-fit: cover;
51
+ transition: transform 0.3s ease;
52
  }
53
 
54
+ .feature:hover img {
55
+ transform: scale(1.05);
 
 
 
 
56
  }
57
 
58
+ .feature-text {
59
+ flex: 1;
60
+ text-align: right;
 
 
61
  }
62
 
63
+ .feature-title {
64
  font-size: 2rem;
 
 
 
 
 
65
  color: #333;
66
+ margin-bottom: 1rem;
67
+ opacity: 0;
68
+ animation: fadeInRight 0.6s forwards;
69
+ animation-delay: 0.3s;
70
  }
71
 
72
+ .feature-description {
73
+ font-size: 1.1rem;
74
  color: #666;
75
  line-height: 1.6;
76
+ opacity: 0;
77
+ animation: fadeInRight 0.6s forwards;
78
+ animation-delay: 0.5s;
79
  }
80
 
81
+ @keyframes fadeInUp {
82
+ from {
83
+ opacity: 0;
84
+ transform: translateY(20px);
85
+ }
86
+ to {
87
+ opacity: 1;
88
+ transform: translateY(0);
89
+ }
 
 
 
 
 
 
 
90
  }
91
 
92
+ @keyframes fadeInRight {
93
+ from {
94
+ opacity: 0;
95
+ transform: translateX(-20px);
96
+ }
97
+ to {
98
+ opacity: 1;
99
+ transform: translateX(0);
100
+ }
101
  }
102
 
103
  @media (max-width: 768px) {
104
+ .feature {
105
  flex-direction: column;
106
  }
107
+ .feature-image {
108
+ margin: 1rem 0;
 
 
 
109
  }
110
  }
111
  </style>
112
  </head>
113
  <body>
114
+ <section class="features-section">
115
+ <div class="feature">
116
+ <div class="feature-text">
117
+ <h2 class="feature-title">الذكاء الاصطناعي المتقدم</h2>
118
+ <p class="feature-description">نظام متطور يدمج أحدث تقنيات الذكاء الاصطناعي مع احتياجات السوق المصري</p>
 
 
 
 
119
  </div>
120
+ <div class="feature-image">
121
+ <img src="/api/placeholder/600/400" alt="الذكاء الاصطناعي المتقدم">
122
  </div>
123
  </div>
124
 
125
+ <div class="feature">
126
+ <div class="feature-text">
127
+ <h2 class="feature-title">حلول مبتكرة</h2>
128
+ <p class="feature-description">تطوير حلول ذكية تناسب مختلف القطاعات والمجالات في مصر</p>
 
 
 
 
 
 
 
 
 
 
 
129
  </div>
130
+ <div class="feature-image">
131
+ <img src="/api/placeholder/600/400" alt="حلول مبتكرة">
 
 
132
  </div>
133
+ </div>
134
 
135
+ <div class="feature">
136
+ <div class="feature-text">
137
+ <h2 class="feature-title">تقنيات المستقبل</h2>
138
+ <p class="feature-description">استخدام أحدث التقنيات العالمية مع التركيز على التطوير المستمر</p>
139
+ </div>
140
+ <div class="feature-image">
141
+ <img src="/api/placeholder/600/400" alt="تقنيات المستقبل">
 
 
 
 
 
 
 
142
  </div>
143
+ </div>
144
+ </section>
145
  </body>
146
  </html>