|
|
<!DOCTYPE html> |
|
|
<html dir="rtl" lang="ar"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Speedy Sons - قدرات النموذج</title> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap'); |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Tajawal', sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: #f0f2f5; |
|
|
color: #2c3e50; |
|
|
} |
|
|
|
|
|
.logo-container { |
|
|
text-align: center; |
|
|
padding: 2rem; |
|
|
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); |
|
|
} |
|
|
|
|
|
.logo { |
|
|
width: 120px; |
|
|
height: 120px; |
|
|
position: relative; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.wave { |
|
|
stroke: #2c3e50; |
|
|
stroke-width: 3; |
|
|
fill: none; |
|
|
animation: waveMove 2s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.dot { |
|
|
fill: #2c3e50; |
|
|
animation: dotPulse 2s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes waveMove { |
|
|
0% { transform: translateX(-5px); } |
|
|
50% { transform: translateX(5px); } |
|
|
100% { transform: translateX(-5px); } |
|
|
} |
|
|
|
|
|
@keyframes dotPulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.2); } |
|
|
} |
|
|
|
|
|
.capabilities { |
|
|
max-width: 1200px; |
|
|
margin: 2rem auto; |
|
|
padding: 0 1rem; |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 2rem; |
|
|
} |
|
|
|
|
|
.capability-card { |
|
|
background: white; |
|
|
border-radius: 15px; |
|
|
padding: 2rem; |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.capability-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.capability-icon { |
|
|
font-size: 2rem; |
|
|
margin-bottom: 1rem; |
|
|
color: #3498db; |
|
|
} |
|
|
|
|
|
h2 { |
|
|
color: #2c3e50; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
h3 { |
|
|
color: #3498db; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
position: fixed; |
|
|
bottom: 2rem; |
|
|
left: 2rem; |
|
|
background: white; |
|
|
padding: 1rem; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="logo-container"> |
|
|
<svg class="logo" viewBox="0 0 100 100"> |
|
|
<circle class="dot" cx="10" cy="50" r="5"/> |
|
|
<path class="wave" d="M 20 50 Q 35 30, 50 50 T 80 50"/> |
|
|
<circle class="dot" cx="90" cy="50" r="5"/> |
|
|
</svg> |
|
|
<h1>Speedy Sons AI</h1> |
|
|
</div> |
|
|
|
|
|
<div class="capabilities"> |
|
|
<div class="capability-card"> |
|
|
<div class="capability-icon">💬</div> |
|
|
<h3>المحادثة والأسئلة</h3> |
|
|
<p>الرد على الأسئلة بدقة عالية مع فهم عميق للسياق العربي</p> |
|
|
</div> |
|
|
|
|
|
<div class="capability-card"> |
|
|
<div class="capability-icon">🔍</div> |
|
|
<h3>البحث على الإنترنت</h3> |
|
|
<p>القدرة على البحث وتحليل المعلومات من مصادر موثوقة</p> |
|
|
</div> |
|
|
|
|
|
<div class="capability-card"> |
|
|
<div class="capability-icon">📝</div> |
|
|
<h3>كتابة المقالات</h3> |
|
|
<p>إنشاء محتوى احترافي مع مراعاة أسس الكتابة الصحفية</p> |
|
|
</div> |
|
|
|
|
|
<div class="capability-card"> |
|
|
<div class="capability-icon">📚</div> |
|
|
<h3>القصص والروايات</h3> |
|
|
<p>كتابة قصص إبداعية وروايات متكاملة بأسلوب أدبي رفيع</p> |
|
|
</div> |
|
|
|
|
|
<div class="capability-card"> |
|
|
<div class="capability-icon">🗣️</div> |
|
|
<h3>التحدث الصوتي</h3> |
|
|
<p>نطق عربي فصيح مع تنغيم طبيعي ومخارج صحيحة للحروف</p> |
|
|
</div> |
|
|
|
|
|
<div class="capability-card"> |
|
|
<div class="capability-icon">⚙️</div> |
|
|
<h3>التحكم في القدرات</h3> |
|
|
<p>إمكانية تخصيص وضبط مستويات أداء النموذج حسب الحاجة</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="controls"> |
|
|
<h3>التحكم في القدرات</h3> |
|
|
<input type="range" min="1" max="100" value="50"> |
|
|
<button>تطبيق</button> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
