Hugging Face's logo

Spaces:
joermd
/
home
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +83 -103
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,166 +15,146 @@
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>
179
  </body>
180
  </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;700&display=swap');
9
 
 
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>