Hugging Face's logo

Spaces:
joermd
/
home
Running

App Files Community
joermd commited on
Commit
b1aace0
·
verified ·
1 Parent(s): 5f97ed6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +107 -127
index.html CHANGED
@@ -3,7 +3,7 @@
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
 
@@ -15,184 +15,164 @@
15
  }
16
 
17
  body {
18
- background: linear-gradient(135deg, #1a1a2e, #16213e);
19
  color: white;
 
 
 
 
20
  }
21
 
22
- .header {
23
- padding: 2rem;
24
- text-align: center;
25
  position: relative;
26
- overflow: hidden;
 
27
  }
28
 
29
- .animated-bg {
30
- position: absolute;
31
- top: 0;
32
- left: 0;
33
  width: 100%;
34
  height: 100%;
35
- z-index: 1;
36
  }
37
 
38
- .circle {
39
- position: absolute;
40
- border-radius: 50%;
41
- animation: float 6s infinite ease-in-out;
42
  }
43
 
44
- .circle-1 {
45
- width: 300px;
46
- height: 300px;
47
- background: rgba(100, 100, 255, 0.1);
48
- top: -50px;
49
- left: 10%;
50
  }
51
 
52
- .circle-2 {
53
- width: 200px;
54
- height: 200px;
55
- background: rgba(255, 100, 255, 0.1);
56
- top: 30%;
57
- right: 15%;
58
- animation-delay: 1s;
59
  }
60
 
61
- .content {
62
- position: relative;
63
- z-index: 2;
 
64
  }
65
 
66
- h1 {
67
- font-size: 3.5rem;
68
- margin-bottom: 1rem;
69
- background: linear-gradient(45deg, #4facfe, #00f2fe);
70
- -webkit-background-clip: text;
71
- -webkit-text-fill-color: transparent;
72
  }
73
 
74
- .services {
75
- display: flex;
76
- justify-content: center;
77
- gap: 2rem;
78
- flex-wrap: wrap;
79
- padding: 2rem;
80
  }
81
 
82
- .service-card {
83
- background: rgba(255, 255, 255, 0.1);
84
- backdrop-filter: blur(10px);
85
- border-radius: 20px;
86
  padding: 2rem;
87
- width: 300px;
88
- text-align: center;
 
89
  transition: transform 0.3s;
 
 
90
  }
91
 
92
- .service-card:hover {
93
- transform: translateY(-10px);
94
- }
95
-
96
- .testimonials {
97
- padding: 4rem 2rem;
98
  }
99
 
100
- .testimonials h2 {
101
- text-align: center;
102
- margin-bottom: 3rem;
 
 
103
  }
104
 
105
- .testimonial-grid {
106
- display: grid;
107
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
108
- gap: 2rem;
109
- max-width: 1200px;
110
- margin: 0 auto;
111
  }
112
 
113
- .testimonial-card {
114
- background: rgba(255, 255, 255, 0.1);
115
- border-radius: 15px;
116
- padding: 1.5rem;
117
- text-align: center;
118
  }
119
 
120
- .testimonial-img {
121
- width: 100px;
122
- height: 100px;
123
- border-radius: 50%;
124
- margin: 0 auto 1rem;
125
- object-fit: cover;
126
  }
127
 
128
  @keyframes float {
129
  0%, 100% { transform: translateY(0); }
130
- 50% { transform: translateY(-20px); }
131
  }
132
 
133
- button {
134
- background: linear-gradient(45deg, #4facfe, #00f2fe);
135
- border: none;
136
- padding: 1rem 2rem;
137
- border-radius: 50px;
138
- color: white;
139
- font-size: 1.2rem;
140
- cursor: pointer;
141
- transition: transform 0.3s;
142
  }
143
 
144
- button:hover {
145
- transform: scale(1.05);
 
 
 
 
 
 
 
 
146
  }
147
  </style>
148
  </head>
149
  <body>
150
- <div class="header">
151
- <div class="animated-bg">
152
- <div class="circle circle-1"></div>
153
- <div class="circle circle-2"></div>
154
- </div>
155
- <div class="content">
156
- <h1>Speedy Sons</h1>
157
- <p>أول نموذج ذكاء اصطناعي باللغة العربية</p>
158
- </div>
159
  </div>
160
 
161
- <div class="services">
162
- <div class="service-card">
163
- <h3>توليد النصوص</h3>
164
- <p>إنشاء محتوى عربي أصيل باستخدام الذكاء الاصطناعي</p>
165
- <button>جرب الآن</button>
166
- </div>
167
- <div class="service-card">
168
- <h3>تحليل المشاعر</h3>
169
- <p>تحليل المشاعر في النصوص العربية بدقة عالية</p>
170
- <button>جرب الآن</button>
171
- </div>
172
- <div class="service-card">
173
- <h3>الترجمة الذكية</h3>
174
- <p>ترجمة احترافية مع الحفاظ على السياق</p>
175
- <button>جرب الآن</button>
176
- </div>
177
  </div>
178
 
179
- <div class="testimonials">
180
- <h2>تجارب المستخدمين</h2>
181
- <div class="testimonial-grid">
182
- <div class="testimonial-card">
183
- <img src="/api/placeholder/100/100" alt="مستخدم 1" class="testimonial-img">
184
- <h3>أحمد محمد</h3>
185
- <p>"ساعدني النموذج في كتابة محتوى احترافي لموقعي بوقت قياسي"</p>
186
  </div>
187
- <div class="testimonial-card">
188
- <img src="/api/placeholder/100/100" alt="مستخدم 2" class="testimonial-img">
189
- <h3>سارة أحمد</h3>
190
- <p>"دقة الترجمة مذهلة وتوفر علي الكثير من الوقت"</p>
 
 
 
 
 
 
191
  </div>
192
- <div class="testimonial-card">
193
- <img src="/api/placeholder/100/100" alt="مستخدم 3" class="testimonial-img">
194
- <h3>محمد خالد</h3>
195
- <p>"أفضل نموذج عربي جربته حتى الآن"</p>
196
  </div>
197
  </div>
198
  </div>
 
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
 
 
15
  }
16
 
17
  body {
18
+ background: #1a1c2e;
19
  color: white;
20
+ min-height: 100vh;
21
+ display: flex;
22
+ flex-direction: column;
23
+ align-items: center;
24
  }
25
 
26
+ .logo-container {
27
+ margin: 2rem 0;
 
28
  position: relative;
29
+ width: 100px;
30
+ height: 100px;
31
  }
32
 
33
+ .logo {
 
 
 
34
  width: 100%;
35
  height: 100%;
36
+ position: relative;
37
  }
38
 
39
+ .logo svg {
40
+ width: 100%;
41
+ height: 100%;
 
42
  }
43
 
44
+ .wave {
45
+ stroke: #4facfe;
46
+ stroke-width: 3;
47
+ fill: none;
48
+ animation: wave 2s infinite;
 
49
  }
50
 
51
+ .dot {
52
+ fill: #4facfe;
53
+ animation: pulse 2s infinite;
 
 
 
 
54
  }
55
 
56
+ @keyframes wave {
57
+ 0% { transform: translateX(-5px); }
58
+ 50% { transform: translateX(5px); }
59
+ 100% { transform: translateX(-5px); }
60
  }
61
 
62
+ @keyframes pulse {
63
+ 0%, 100% { transform: scale(1); opacity: 1; }
64
+ 50% { transform: scale(1.2); opacity: 0.8; }
 
 
 
65
  }
66
 
67
+ .feedback-container {
68
+ max-width: 1200px;
69
+ width: 90%;
70
+ margin: 2rem auto;
 
 
71
  }
72
 
73
+ .feedback-card {
74
+ background: linear-gradient(45deg, rgba(79, 172, 254, 0.1), rgba(0, 242, 254, 0.1));
75
+ border-radius: 15px;
 
76
  padding: 2rem;
77
+ margin-bottom: 2rem;
78
+ display: flex;
79
+ gap: 2rem;
80
  transition: transform 0.3s;
81
+ backdrop-filter: blur(10px);
82
+ border: 1px solid rgba(255, 255, 255, 0.1);
83
  }
84
 
85
+ .feedback-card:hover {
86
+ transform: translateY(-5px);
 
 
 
 
87
  }
88
 
89
+ .user-section {
90
+ flex: 1;
91
+ padding: 1rem;
92
+ background: rgba(255, 255, 255, 0.05);
93
+ border-radius: 10px;
94
  }
95
 
96
+ .model-section {
97
+ flex: 2;
98
+ padding: 1rem;
99
+ background: rgba(0, 242, 254, 0.05);
100
+ border-radius: 10px;
 
101
  }
102
 
103
+ h2 {
104
+ margin-bottom: 1rem;
105
+ color: #4facfe;
 
 
106
  }
107
 
108
+ .floating {
109
+ animation: float 6s infinite ease-in-out;
 
 
 
 
110
  }
111
 
112
  @keyframes float {
113
  0%, 100% { transform: translateY(0); }
114
+ 50% { transform: translateY(-10px); }
115
  }
116
 
117
+ .bubbles {
118
+ position: fixed;
119
+ width: 100%;
120
+ height: 100%;
121
+ z-index: -1;
122
+ overflow: hidden;
 
 
 
123
  }
124
 
125
+ .bubble {
126
+ position: absolute;
127
+ border-radius: 50%;
128
+ background: rgba(79, 172, 254, 0.1);
129
+ animation: rise 15s infinite ease-in;
130
+ }
131
+
132
+ @keyframes rise {
133
+ 0% { transform: translateY(100vh) scale(0); }
134
+ 100% { transform: translateY(-100vh) scale(2); }
135
  }
136
  </style>
137
  </head>
138
  <body>
139
+ <!-- Animated Background -->
140
+ <div class="bubbles">
141
+ <div class="bubble" style="left: 10%; width: 30px; height: 30px; animation-delay: 0s;"></div>
142
+ <div class="bubble" style="left: 35%; width: 50px; height: 50px; animation-delay: 2s;"></div>
143
+ <div class="bubble" style="left: 65%; width: 20px; height: 20px; animation-delay: 4s;"></div>
144
+ <div class="bubble" style="left: 85%; width: 40px; height: 40px; animation-delay: 6s;"></div>
 
 
 
145
  </div>
146
 
147
+ <!-- Animated Logo -->
148
+ <div class="logo-container floating">
149
+ <svg viewBox="0 0 100 100">
150
+ <circle class="dot" cx="10" cy="50" r="5"/>
151
+ <path class="wave" d="M 20 50 Q 35 30, 50 50 T 80 50"/>
152
+ <circle class="dot" cx="90" cy="50" r="5"/>
153
+ </svg>
 
 
 
 
 
 
 
 
 
154
  </div>
155
 
156
+ <div class="feedback-container">
157
+ <div class="feedback-card">
158
+ <div class="user-section">
159
+ <h2>سؤال المستخدم</h2>
160
+ <p>كيف يمكنني كتابة مقال عن التكنولوجيا الحديثة؟</p>
 
 
161
  </div>
162
+ <div class="model-section">
163
+ <h2>رد النموذج</h2>
164
+ <p>سأساعدك في كتابة مقال متكامل عن التكنولوجيا الحديثة. يمكننا البدء بمقدمة عن أهمية التكنولوجيا في حياتنا اليومية...</p>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="feedback-card">
169
+ <div class="user-section">
170
+ <h2>سؤال المستخدم</h2>
171
+ <p>هل يمكنك مساعدتي في كتابة رسالة رسمية؟</p>
172
  </div>
173
+ <div class="model-section">
174
+ <h2>رد النموذج</h2>
175
+ <p>بالتأكيد! سأساعدك في صياغة رسالة رسمية احترافية تتناسب مع احتياجاتك...</p>
 
176
  </div>
177
  </div>
178
  </div>