Hugging Face's logo

Spaces:
joermd
/
home
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +154 -61
index.html CHANGED
@@ -3,81 +3,174 @@
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>
 
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;700&display=swap');
9
+
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
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 (max-width: 768px) {
127
+ .hero-content {
128
+ flex-direction: column;
129
+ }
130
+ .capabilities {
131
+ grid-template-columns: repeat(2, 1fr);
132
+ }
133
  }
134
  </style>
135
  </head>
136
+ <body>
137
+ <main class="hero">
138
+ <div class="hero-content">
139
+ <div class="hero-text">
140
+ <h1>تعرف على نموذج الذكاء المصري</h1>
141
+ <p class="subtitle">أول نموذج ذكاء اصطناعي متكامل في مصر. مصمم للإبداع والابتكار وحل المشكلات المعقدة.</p>
142
+ <div class="buttons">
143
+ <a href="#" class="button button-primary">جرب النموذج</a>
144
+ <a href="#" class="button button-secondary">واجهة API</a>
145
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
146
  </div>
147
+ <div class="hero-image">
148
+ <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="شعار الذكاء الاصطناعي" class="logo">
 
149
  </div>
150
+ </div>
151
+
152
+ <section class="capabilities">
153
+ <div class="capability">
154
+ <div class="icon">🧠</div>
155
+ <h2>تفكير متقدم</h2>
156
+ <p>قدرات تحليلية وإدراكية متطورة</p>
157
  </div>
158
+ <div class="capability">
159
+ <div class="icon">👁️</div>
160
+ <h2>تحليل الصور</h2>
161
+ <p>فهم وتحليل المحتوى البصري</p>
162
  </div>
163
+ <div class="capability">
164
+ <div class="icon">💻</div>
165
+ <h2>برمجة ذكية</h2>
166
+ <p>إنشاء وتحليل التعليمات البرمجية</p>
167
  </div>
168
+ <div class="capability">
169
+ <div class="icon">🌐</div>
170
+ <h2>دعم متعدد اللغات</h2>
171
+ <p>معالجة وترجمة بين اللغات المختلفة</p>
172
  </div>
173
  </section>
 
 
 
 
 
 
174
  </main>
 
 
 
 
 
 
175
  </body>
176
  </html>