Hugging Face's logo

Spaces:
Sirsam
/
https-huggingface-co-spaces-enzostvs-deepsite
Running

App Files Community
https-huggingface-co-spaces-enzostvs-deepsite / index.html
Sirsam's picture
Sirsam
Add 2 files
f26def9 verified
raw
history blame contribute delete
40.2 kB
 <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>وكيل الذكاء الاصطناعي - مساعد إنشاء المحتوى</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
body {
font-family: 'Tajawal', sans-serif;
background-color: #f8fafc;
}
.gradient-bg {
background: linear-gradient(135deg, #6b46c1 0%, #4299e1 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.progress-bar {
transition: width 0.5s ease-in-out;
}
.agent-card {
transition: all 0.3s ease;
}
.agent-card:hover {
background-color: #f0f4ff;
}
.slide-in {
animation: slideIn 0.5s forwards;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="gradient-bg text-white shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-4">
<i class="fas fa-robot text-2xl"></i>
<span class="font-semibold text-xl">وكيل الذكاء الاصطناعي</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="hover:text-gray-200">الرئيسية</a>
<a href="#" class="hover:text-gray-200">وكلاء الذكاء</a>
<a href="#" class="hover:text-gray-200">المحتوى</a>
<a href="#" class="hover:text-gray-200">التحليلات</a>
<a href="#" class="hover:text-gray-200">الإعدادات</a>
</div>
<div class="md:hidden">
<button class="mobile-menu-button">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu hidden md:hidden bg-white shadow-lg">
<div class="px-2 pt-2 pb-4 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">الرئيسية</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">وكلاء الذكاء</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">المحتوى</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">التحليلات</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">الإعدادات</a>
</div>
</div>
<!-- Main Content -->
<div class="max-w-6xl mx-auto px-4 py-8">
<!-- Welcome Banner -->
<div class="gradient-bg rounded-xl p-6 text-white mb-8 shadow-lg">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="mb-4 md:mb-0">
<h1 class="text-2xl md:text-3xl font-bold mb-2">مرحباً بعودتك، أحمد!</h1>
<p class="opacity-90">وكلاء الذكاء الاصطناعي جاهزون لمساعدتك في إنشاء محتوى رائع.</p>
</div>
<button class="bg-white text-indigo-600 px-6 py-2 rounded-lg font-semibold hover:bg-gray-100 transition">
<i class="fas fa-plus mr-2"></i> مشروع جديد
</button>
</div>
</div>
<!-- Quick Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">المقالات المنشورة</p>
<h3 class="text-2xl font-bold">1,248</h3>
</div>
<div class="bg-blue-100 p-3 rounded-full">
<i class="fas fa-newspaper text-blue-600 text-xl"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center text-sm text-green-500">
<i class="fas fa-arrow-up mr-1"></i>
<span>12% من الأسبوع الماضي</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">الصور المولدة</p>
<h3 class="text-2xl font-bold">856</h3>
</div>
<div class="bg-purple-100 p-3 rounded-full">
<i class="fas fa-image text-purple-600 text-xl"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center text-sm text-green-500">
<i class="fas fa-arrow-up mr-1"></i>
<span>24% من الأسبوع الماضي</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">مؤشر تحسين محركات البحث</p>
<h3 class="text-2xl font-bold">89%</h3>
</div>
<div class="bg-green-100 p-3 rounded-full">
<i class="fas fa-chart-line text-green-600 text-xl"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center text-sm text-green-500">
<i class="fas fa-arrow-up mr-1"></i>
<span>5% من الأسبوع الماضي</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-500">المنشورات المجدولة</p>
<h3 class="text-2xl font-bold">42</h3>
</div>
<div class="bg-yellow-100 p-3 rounded-full">
<i class="fas fa-calendar-alt text-yellow-600 text-xl"></i>
</div>
</div>
<div class="mt-4">
<div class="flex items-center text-sm text-red-500">
<i class="fas fa-arrow-down mr-1"></i>
<span>3% من الأسبوع الماضي</span>
</div>
</div>
</div>
</div>
<!-- AI Agents Section -->
<div class="mb-8">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-800">وكلاء الذكاء الاصطناعي لديك</h2>
<button class="text-indigo-600 hover:text-indigo-800 font-medium">
<i class="fas fa-sliders-h mr-1"></i> تخصيص
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Writer Agent -->
<div class="agent-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer">
<div class="flex items-start mb-4">
<div class="bg-blue-100 p-3 rounded-lg mr-4">
<i class="fas fa-pen-fancy text-blue-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-lg">كاتب المحتوى</h3>
<p class="text-gray-500 text-sm">ينشئ مقالات ومنشورات احترافية</p>
</div>
</div>
<div class="flex items-center justify-between text-sm mb-3">
<span class="text-gray-500">الحالة:</span>
<span class="text-green-500 font-medium">نشط</span>
</div>
<div class="flex items-center justify-between text-sm mb-4">
<span class="text-gray-500">آخر استخدام:</span>
<span class="text-gray-700">منذ ساعتين</span>
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg font-medium transition">
<i class="fas fa-play mr-1"></i> تشغيل الوكيل
</button>
</div>
<!-- Image Generator -->
<div class="agent-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer">
<div class="flex items-start mb-4">
<div class="bg-purple-100 p-3 rounded-lg mr-4">
<i class="fas fa-image text-purple-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-lg">مولد الصور</h3>
<p class="text-gray-500 text-sm">ينشئ صوراً باستخدام الذكاء الاصطناعي</p>
</div>
</div>
<div class="flex items-center justify-between text-sm mb-3">
<span class="text-gray-500">الحالة:</span>
<span class="text-green-500 font-medium">نشط</span>
</div>
<div class="flex items-center justify-between text-sm mb-4">
<span class="text-gray-500">آخر استخدام:</span>
<span class="text-gray-700">منذ يوم</span>
</div>
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium transition">
<i class="fas fa-play mr-1"></i> تشغيل الوكيل
</button>
</div>
<!-- SEO Optimizer -->
<div class="agent-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer">
<div class="flex items-start mb-4">
<div class="bg-green-100 p-3 rounded-lg mr-4">
<i class="fas fa-search-dollar text-green-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-lg">محسن محركات البحث</h3>
<p class="text-gray-500 text-sm">يحسن محتواك لمحركات البحث</p>
</div>
</div>
<div class="flex items-center justify-between text-sm mb-3">
<span class="text-gray-500">الحالة:</span>
<span class="text-green-500 font-medium">نشط</span>
</div>
<div class="flex items-center justify-between text-sm mb-4">
<span class="text-gray-500">آخر استخدام:</span>
<span class="text-gray-700">منذ 3 ساعات</span>
</div>
<button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg font-medium transition">
<i class="fas fa-play mr-1"></i> تشغيل الوكيل
</button>
</div>
<!-- Video Creator -->
<div class="agent-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer">
<div class="flex items-start mb-4">
<div class="bg-red-100 p-3 rounded-lg mr-4">
<i class="fas fa-video text-red-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-lg">منشئ الفيديوهات</h3>
<p class="text-gray-500 text-sm">ينشئ مقاطع فيديو قصيرة لوسائل التواصل</p>
</div>
</div>
<div class="flex items-center justify-between text-sm mb-3">
<span class="text-gray-500">الحالة:</span>
<span class="text-yellow-500 font-medium">يتعلم</span>
</div>
<div class="flex items-center justify-between text-sm mb-4">
<span class="text-gray-500">آخر استخدام:</span>
<span class="text-gray-700">منذ 5 أيام</span>
</div>
<button class="w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded-lg font-medium transition">
<i class="fas fa-play mr-1"></i> تشغيل الوكيل
</button>
</div>
<!-- Scheduler -->
<div class="agent-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer">
<div class="flex items-start mb-4">
<div class="bg-yellow-100 p-3 rounded-lg mr-4">
<i class="fas fa-calendar-alt text-yellow-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-lg">مجدول المحتوى</h3>
<p class="text-gray-500 text-sm">يبرمج نشر المحتوى تلقائياً</p>
</div>
</div>
<div class="flex items-center justify-between text-sm mb-3">
<span class="text-gray-500">الحالة:</span>
<span class="text-green-500 font-medium">نشط</span>
</div>
<div class="flex items-center justify-between text-sm mb-4">
<span class="text-gray-500">آخر استخدام:</span>
<span class="text-gray-700">اليوم</span>
</div>
<button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 rounded-lg font-medium transition">
<i class="fas fa-play mr-1"></i> تشغيل الوكيل
</button>
</div>
<!-- Analytics -->
<div class="agent-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer">
<div class="flex items-start mb-4">
<div class="bg-indigo-100 p-3 rounded-lg mr-4">
<i class="fas fa-chart-bar text-indigo-600 text-xl"></i>
</div>
<div>
<h3 class="font-bold text-lg">محلل الأداء</h3>
<p class="text-gray-500 text-sm">يتتبع ويحلل أداء المحتوى</p>
</div>
</div>
<div class="flex items-center justify-between text-sm mb-3">
<span class="text-gray-500">الحالة:</span>
<span class="text-green-500 font-medium">نشط</span>
</div>
<div class="flex items-center justify-between text-sm mb-4">
<span class="text-gray-500">آخر استخدام:</span>
<span class="text-gray-700">اليوم</span>
</div>
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg font-medium transition">
<i class="fas fa-play mr-1"></i> تشغيل الوكيل
</button>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6">النشاطات الأخيرة</h2>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الوكيل</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراء</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الوقت</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التفاصيل</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-pen-fancy text-blue-600"></i>
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">كاتب المحتوى</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">إنشاء مقالة مدونة</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مكتمل</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">منذ ساعتين</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">عرض</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
<i class="fas fa-image text-purple-600"></i>
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">مولد الصور</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">توليد 3 صور</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مكتمل</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">منذ 4 ساعات</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">عرض</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
<i class="fas fa-search-dollar text-green-600"></i>
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">محسن محركات البحث</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">تحسين 5 منشورات</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مكتمل</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">منذ 6 ساعات</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">عرض</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center">
<i class="fas fa-calendar-alt text-yellow-600"></i>
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">مجدول المحتوى</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">جدولة 2 منشور</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مكتمل</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">بالأمس</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">عرض</a>
</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
<i class="fas fa-chart-bar text-indigo-600"></i>
</div>
<div class="mr-4">
<div class="text-sm font-medium text-gray-900">محلل الأداء</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">توليد تقرير أسبوعي</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مكتمل</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">بالأمس</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">عرض</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Content Pipeline -->
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6">سير عمل المحتوى</h2>
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex flex-col md:flex-row justify-between mb-6">
<div>
<h3 class="text-lg font-semibold">سير العمل الحالي</h3>
<p class="text-gray-500">عملية إنشاء المحتوى الآلية الخاصة بك</p>
</div>
<button class="mt-4 md:mt-0 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium transition">
<i class="fas fa-cog mr-1"></i> تكوين سير العمل
</button>
</div>
<div class="relative">
<!-- Workflow Steps -->
<div class="flex flex-col md:flex-row justify-between items-center mb-8">
<!-- Step 1 -->
<div class="flex flex-col items-center mb-6 md:mb-0">
<div class="bg-blue-100 p-4 rounded-full mb-2">
<i class="fas fa-pen-fancy text-blue-600 text-xl"></i>
</div>
<span class="text-sm font-medium">إنشاء المحتوى</span>
</div>
<!-- Arrow -->
<div class="hidden md:block w-16 h-1 bg-gray-200 mx-2"></div>
<!-- Step 2 -->
<div class="flex flex-col items-center mb-6 md:mb-0">
<div class="bg-purple-100 p-4 rounded-full mb-2">
<i class="fas fa-image text-purple-600 text-xl"></i>
</div>
<span class="text-sm font-medium">توليد الصور</span>
</div>
<!-- Arrow -->
<div class="hidden md:block w-16 h-1 bg-gray-200 mx-2"></div>
<!-- Step 3 -->
<div class="flex flex-col items-center mb-6 md:mb-0">
<div class="bg-green-100 p-4 rounded-full mb-2">
<i class="fas fa-search-dollar text-green-600 text-xl"></i>
</div>
<span class="text-sm font-medium">تحسين محركات البحث</span>
</div>
<!-- Arrow -->
<div class="hidden md:block w-16 h-1 bg-gray-200 mx-2"></div>
<!-- Step 4 -->
<div class="flex flex-col items-center mb-6 md:mb-0">
<div class="bg-yellow-100 p-4 rounded-full mb-2">
<i class="fas fa-calendar-alt text-yellow-600 text-xl"></i>
</div>
<span class="text-sm font-medium">الجدولة</span>
</div>
<!-- Arrow -->
<div class="hidden md:block w-16 h-1 bg-gray-200 mx-2"></div>
<!-- Step 5 -->
<div class="flex flex-col items-center">
<div class="bg-indigo-100 p-4 rounded-full mb-2">
<i class="fas fa-chart-bar text-indigo-600 text-xl"></i>
</div>
<span class="text-sm font-medium">تحليل الأداء</span>
</div>
</div>
<!-- Current Status -->
<div class="bg-gray-50 rounded-lg p-6">
<div class="flex items-center justify-between mb-4">
<h4 class="font-medium">حالة سير العمل الحالي</h4>
<span class="text-sm text-gray-500">تم التحديث منذ 15 دقيقة</span>
</div>
<div class="space-y-4">
<!-- Item 1 -->
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-pen-fancy text-blue-600 text-sm"></i>
</div>
<span class="text-sm">مقالة عن اتجاهات الذكاء الاصطناعي</span>
</div>
<div class="flex items-center">
<span class="text-sm text-gray-500 mr-3">الخطوة 3/5</span>
<span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">قيد التقدم</span>
</div>
</div>
<!-- Item 2 -->
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="bg-purple-100 p-2 rounded-full mr-3">
<i class="fas fa-image text-purple-600 text-sm"></i>
</div>
<span class="text-sm">صور عرض المنتج</span>
</div>
<div class="flex items-center">
<span class="text-sm text-gray-500 mr-3">الخطوة 2/5</span>
<span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">قيد الانتظار</span>
</div>
</div>
<!-- Item 3 -->
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="bg-green-100 p-2 rounded-full mr-3">
<i class="fas fa-search-dollar text-green-600 text-sm"></i>
</div>
<span class="text-sm">تحسين محتوى الموقع</span>
</div>
<div class="flex items-center">
<span class="text-sm text-gray-500 mr-3">الخطوة 4/5</span>
<span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">مكتمل</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- AI Assistant Floating Button -->
<div class="fixed bottom-8 left-8">
<button id="aiAssistantBtn" class="gradient-bg text-white p-4 rounded-full shadow-xl hover:shadow-2xl transition pulse">
<i class="fas fa-robot text-2xl"></i>
</button>
</div>
<!-- AI Assistant Chat Panel -->
<div id="aiAssistantPanel" class="hidden fixed bottom-24 left-8 w-80 bg-white rounded-xl shadow-2xl overflow-hidden">
<div class="gradient-bg text-white p-4">
<div class="flex justify-between items-center">
<h3 class="font-semibold">المساعد الذكي</h3>
<button id="closeAssistantBtn" class="text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="p-4 h-64 overflow-y-auto">
<div class="flex mb-4">
<div class="bg-gray-100 p-3 rounded-lg max-w-xs">
<p class="text-sm">مرحباً! أنا مساعدك الذكي. كيف يمكنني مساعدتك اليوم؟</p>
</div>
</div>
<div class="flex justify-end mb-4">
<div class="bg-blue-100 p-3 rounded-lg max-w-xs">
<p class="text-sm">هل يمكنك مساعدتي في إنشاء مقالة مدونة؟</p>
</div>
</div>
<div class="flex mb-4">
<div class="bg-gray-100 p-3 rounded-lg max-w-xs">
<p class="text-sm">بالطبع! هل تريد أن أقوم بإنشاء مسودة بناءً على موضوع تقدمه لي؟</p>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200">
<div class="flex">
<input type="text" placeholder="اكتب رسالتك..." class="flex-1 border border-gray-300 rounded-r-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-l-lg">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<script>
// Mobile menu toggle
document.querySelector('.mobile-menu-button').addEventListener('click', function() {
document.querySelector('.mobile-menu').classList.toggle('hidden');
});
// AI Assistant toggle
const aiAssistantBtn = document.getElementById('aiAssistantBtn');
const aiAssistantPanel = document.getElementById('aiAssistantPanel');
const closeAssistantBtn = document.getElementById('closeAssistantBtn');
aiAssistantBtn.addEventListener('click', function() {
aiAssistantPanel.classList.toggle('hidden');
aiAssistantPanel.classList.add('slide-in');
});
closeAssistantBtn.addEventListener('click', function() {
aiAssistantPanel.classList.add('hidden');
});
// Agent card hover effect
const agentCards = document.querySelectorAll('.agent-card');
agentCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.classList.add('shadow-lg');
this.classList.remove('shadow-md');
});
card.addEventListener('mouseleave', function() {
this.classList.remove('shadow-lg');
this.classList.add('shadow-md');
});
});
// Simulate progress bars
document.addEventListener('DOMContentLoaded', function() {
const progressBars = document.querySelectorAll('.progress-bar');
progressBars.forEach(bar => {
const targetWidth = bar.getAttribute('data-width');
bar.style.width = targetWidth;
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Sirsam/https-huggingface-co-spaces-enzostvs-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>