تطبيق عملي: بناء لوحة تحكم إدارية باستخدام Tailwind CSS
متطلبات المشروع
بناء لوحة تحكم إدارية نظيفة تتضمن قائمة جانبية للتنقل، بطاقات إحصائيات في الأعلى، جداول بيانات، أقسام نماذج، وأماكن مخصصة للرسوم البيانية، مع دعم الوضع الداكن واستجابة لأجهزة سطح المكتب والجوال.
المتطلبات التقنية
- Tailwind CSS v4 CDN
- CSS Grid كحل أساسي للتخطيط
- الوضع الداكن (بادئة
dark:) - ألوان مخصصة وحالات تفاعلية
- قائمة جانبية قابلة للطي على الشاشات الصغيرة
التنفيذ خطوة بخطوة
مثال: الخطوة 1 - القائمة الجانبية للتنقل
قائمة جانبية ثابتة على اليسار تتضمن الشعار وعناصر القائمة وصورة المستخدم؛ قابلة للطي على الجوال.
HTML
<!DOCTYPE html>
<html lang="ar">
<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>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' }
}
}
}
}
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100">
<!-- شريط الجوال العلوي -->
<div class="lg:hidden fixed top-0 w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-40 px-4 py-3 flex items-center justify-between">
<button id="sidebarToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<span class="font-bold">لوحة الإدارة</span>
<div class="w-10"></div>
</div>
<!-- التراكب -->
<div id="overlay" class="hidden fixed inset-0 bg-black/50 z-40 lg:hidden"></div>
<!-- القائمة الجانبية -->
<aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transform -translate-x-full lg:translate-x-0 transition-transform">
<div class="flex flex-col h-full">
<!-- الشعار -->
<div class="h-16 flex items-center gap-3 px-6 border-b border-gray-200 dark:border-gray-800">
<div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">A</span>
</div>
<span class="text-lg font-bold">AdminKit</span>
</div>
<!-- القائمة -->
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
<a href="#" class="flex items-center gap-3 px-3 py-2.5 bg-primary-50 dark:bg-primary-700/20 text-primary-600 dark:text-primary-400 rounded-lg">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
<span>لوحة التحكم</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
<span>التحليلات</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
<span>المستخدمون</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
<span>المنتجات</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
<span>الطلبات</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<span>الإعدادات</span>
</a>
</nav>
<!-- صورة المستخدم -->
<div class="p-4 border-t border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-3 px-3 py-2">
<div class="w-9 h-9 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
<span class="text-primary-600 dark:text-primary-400 font-semibold text-sm">A</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium truncate">أليكس تشين</p>
<p class="text-xs text-gray-500 truncate">admin@example.com</p>
</div>
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
</button>
</div>
</div>
</div>
</aside>
<!--_placeholder للمحتوى الرئيسي -->
<main class="lg:ml-64 pt-16 lg:pt-0 min-h-screen p-6">
<p class="text-gray-500">منطقة المحتوى الرئيسي</p>
</main>
<script>
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('overlay');
const toggle = document.getElementById('sidebarToggle');
toggle?.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
overlay.classList.toggle('hidden');
});
overlay?.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
overlay.classList.add('hidden');
});
</script>
</body>
</html>
مثال: الخطوة 2 - بطاقات الإحصائيات
4 بطاقات إحصائيات في الأعلى تعرض المقاييس الرئيسية.
HTML
<!DOCTYPE html>
<html lang="ar">
<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>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- إجمالي المستخدمين -->
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500 dark:text-gray-400">إجمالي المستخدمين</span>
<div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">24,589</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400 flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
12.5%
</span>
<span class="text-gray-500">مقارنة بالشهر الماضي</span>
</div>
</div>
<!-- إجمالي الإيرادات -->
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500 dark:text-gray-400">إجمالي الإيرادات</span>
<div class="w-10 h-10 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">$892,400</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400 flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
8.2%
</span>
<span class="text-gray-500">مقارنة بالشهر الماضي</span>
</div>
</div>
<!-- الطلبات -->
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500 dark:text-gray-400">الطلبات</span>
<div class="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">3,847</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-red-600 dark:text-red-400 flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
3.1%
</span>
<span class="text-gray-500">مقارنة بالشهر الماضي</span>
</div>
</div>
<!-- معدل التحويل -->
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500 dark:text-gray-400">معدل التحويل</span>
<div class="w-10 h-10 bg-orange-50 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">5.6%</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400 flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
2.4%
</span>
<span class="text-gray-500">مقارنة بالشهر الماضي</span>
</div>
</div>
</div>
</body>
</html>
مثال: الخطوة 3 - جدول البيانات
جدول بيانات متجاوب قابل للتمرير مع تبديل الألوان وأزرار الإجراءات.
HTML
<!DOCTYPE html>
<html lang="ar">
<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>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
<!-- شريط أدوات رأس الجدول -->
<div class="p-4 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<h3 class="text-lg font-semibold">الطلبات الأخيرة</h3>
<div class="flex items-center gap-3 w-full sm:w-auto">
<div class="relative flex-1 sm:flex-none">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="text" placeholder="البحث في الطلبات..." class="w-full sm:w-64 pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
</div>
<button class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors flex-shrink-0">
تصدير
</button>
</div>
</div>
<!-- الجدول -->
<div class="overflow-x-auto">
<table class="w-full min-w-[640px]">
<thead>
<tr class="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الطلب</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">العميل</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">المنتج</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">المبلغ</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
<th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7891</td>
<td class="px-4 py-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center text-xs font-semibold text-blue-600">J</div>
<span class="text-sm">جون دو</span>
</div>
</td>
<td class="px-4 py-3 text-sm">Pro Annual</td>
<td class="px-4 py-3 text-sm font-medium">$1,188</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">مكتمل</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-15</td>
<td class="px-4 py-3 text-left">
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7892</td>
<td class="px-4 py-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center text-xs font-semibold text-green-600">L</div>
<span class="text-sm">ليزا وانغ</span>
</div>
</td>
<td class="px-4 py-3 text-sm">Enterprise Annual</td>
<td class="px-4 py-3 text-sm font-medium">$3,588</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">قيد المعالجة</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-14</td>
<td class="px-4 py-3 text-left">
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7893</td>
<td class="px-4 py-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center text-xs font-semibold text-purple-600">M</div>
<span class="text-sm">مايك تشانغ</span>
</div>
</td>
<td class="px-4 py-3 text-sm">Pro Monthly</td>
<td class="px-4 py-3 text-sm font-medium">$99</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">مكتمل</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-13</td>
<td class="px-4 py-3 text-left">
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
</button>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7894</td>
<td class="px-4 py-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center text-xs font-semibold text-orange-600">S</div>
<span class="text-sm">سارة تشاو</span>
</div>
</td>
<td class="px-4 py-3 text-sm">Free Upgrade</td>
<td class="px-4 py-3 text-sm font-medium">$0</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full">ملغي</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-12</td>
<td class="px-4 py-3 text-left">
<button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- التنقل بين الصفحات -->
<div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<p class="text-sm text-gray-500">عرض 1-4 من 256 نتيجة</p>
<div class="flex items-center gap-1">
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50" disabled>السابق</button>
<button class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg">1</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">2</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">3</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">التالي</button>
</div>
</div>
</div>
</body>
</html>
مثال: الخطوة 4 - قسم النماذج
نموذج يحتوي على حقول إدخال، قوائم منسدلة، مناطق نص، وأزرار.
HTML
<!DOCTYPE html>
<html lang="ar">
<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>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 max-w-2xl">
<h3 class="text-lg font-semibold mb-6">إضافة مستخدم جديد</h3>
<form class="space-y-5">
<!-- صف الاسم -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div>
<label class="block text-sm font-medium mb-1.5">الاسم الأول</label>
<input type="text" placeholder="أدخل الاسم الأول"
class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
</div>
<div>
<label class="block text-sm font-medium mb-1.5">اسم العائلة</label>
<input type="text" placeholder="أدخل اسم العائلة"
class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
</div>
</div>
<!-- البريد الإلكتروني -->
<div>
<label class="block text-sm font-medium mb-1.5">البريد الإلكتروني</label>
<input type="email" placeholder="user@example.com"
class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
</div>
<!-- الدور والحالة -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div>
<label class="block text-sm font-medium mb-1.5">الدور</label>
<select class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all appearance-none cursor-pointer">
<option value="">اختر دوراً</option>
<option value="admin">مدير</option>
<option value="editor">محرر</option>
<option value="viewer">مشاهد</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1.5">الحالة</label>
<select class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all appearance-none cursor-pointer">
<option value="active">نشط</option>
<option value="inactive">غير نشط</option>
</select>
</div>
</div>
<!-- ملاحظات -->
<div>
<label class="block text-sm font-medium mb-1.5">ملاحظات</label>
<textarea rows="3" placeholder="ملاحظات اختيارية..."
class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all resize-none"></textarea>
</div>
<!-- تبديل الإشعارات -->
<div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div>
<p class="text-sm font-medium">إرسال بريد ترحيبي</p>
<p class="text-xs text-gray-500">إرسال بيانات تسجيل الدخول تلقائياً عند إنشاء المستخدم</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full"></div>
</label>
</div>
<!-- الأزرار -->
<div class="flex items-center gap-3 pt-2">
<button type="submit" class="px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors">
إنشاء مستخدم
</button>
<button type="button" class="px-6 py-2.5 border border-gray-200 dark:border-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
إلغاء
</button>
</div>
</form>
</div>
</body>
</html>
مثال: الخطوة 5 - قسم أماكن مخصصة للرسوم البيانية
مناطق مخصصة محجوزة لمكتبة رسوم بيانية فعلية.
HTML
<!DOCTYPE html>
<html lang="ar">
<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>
<script>
tailwind.config = { darkMode: 'class' }
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- رسم بياني لاتجاه الإيرادات -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold">اتجاه الإيرادات</h3>
<select class="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-xs focus:outline-none">
<option>آخر 7 أيام</option>
<option>آخر 30 يوم</option>
<option>آخر 90 يوم</option>
</select>
</div>
<div class="h-64 flex items-end gap-2 px-2">
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-200 dark:bg-blue-900 rounded-t" style="height: 45%"></div>
<span class="text-xs text-gray-500">الإثنين</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height: 65%"></div>
<span class="text-xs text-gray-500">الثلاثاء</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height: 50%"></div>
<span class="text-xs text-gray-500">الأربعاء</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-500 dark:bg-blue-600 rounded-t" style="height: 80%"></div>
<span class="text-xs text-gray-500">الخميس</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-600 dark:bg-blue-500 rounded-t" style="height: 70%"></div>
<span class="text-xs text-gray-500">الجمعة</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height: 90%"></div>
<span class="text-xs text-gray-500">السبت</span>
</div>
<div class="flex-1 flex flex-col items-center gap-1">
<div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height: 60%"></div>
<span class="text-xs text-gray-500">الأحد</span>
</div>
</div>
</div>
<!-- رسم بياني🍩 لمصادر الزيارات -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-lg font-semibold mb-6">مصادر الزيارات</h3>
<div class="flex flex-col items-center justify-center">
<div class="relative w-48 h-48">
<!-- رسم بياني🍩 بسيط -->
<svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#e5e7eb" stroke-width="3" class="dark:stroke-gray-700"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="0"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="25 75" stroke-dashoffset="-40"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="-65"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="-85"/>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-2xl font-bold">100%</span>
<span class="text-xs text-gray-500">الإجمالي</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-x-8 gap-y-2">
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-blue-500 rounded-full"></div>
<span class="text-sm">البحث <span class="text-gray-500">40%</span></span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
<span class="text-sm">مباشر <span class="text-gray-500">25%</span></span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
<span class="text-sm">التواصل الاجتماعي <span class="text-gray-500">20%</span></span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
<span class="text-sm">أخرى <span class="text-gray-500">15%</span></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
مثال: لوحة التحكم الإدارية الكاملة
دمج جميع الأقسام في لوحة تحكم إدارية كاملة:
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdminKit - لوحة التحكم</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' }
}
}
}
}
</script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100">
<!-- شريط الجوال العلوي -->
<div class="lg:hidden fixed top-0 w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-40 px-4 py-3 flex items-center justify-between">
<button id="sidebarToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
<span class="font-bold">AdminKit</span>
<button id="themeToggleMobile" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<span class="dark:hidden">🌙</span>
<span class="hidden dark:inline">☀️</span>
</button>
</div>
<!-- التراكب -->
<div id="overlay" class="hidden fixed inset-0 bg-black/50 z-40 lg:hidden"></div>
<!-- القائمة الجانبية -->
<aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transform -translate-x-full lg:translate-x-0 transition-transform">
<div class="flex flex-col h-full">
<div class="h-16 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-sm">A</span>
</div>
<span class="text-lg font-bold">AdminKit</span>
</div>
<button id="sidebarClose" class="lg:hidden p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
<a href="#" class="flex items-center gap-3 px-3 py-2.5 bg-primary-50 dark:bg-primary-700/20 text-primary-600 dark:text-primary-400 rounded-lg">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
<span>لوحة التحكم</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
<span>المستخدمون</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
<span>المنتجات</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
<span>الطلبات</span>
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<span>الإعدادات</span>
</a>
</nav>
<div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
<span class="text-primary-600 dark:text-primary-400 font-semibold text-sm">A</span>
</div>
<div class="min-w-0">
<p class="text-sm font-medium truncate">أليكس تشين</p>
<p class="text-xs text-gray-500 truncate">admin@example.com</p>
</div>
</div>
<button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<span class="dark:hidden text-sm">🌙</span>
<span class="hidden dark:inline text-sm">☀️</span>
</button>
</div>
</div>
</aside>
<!-- المحتوى الرئيسي -->
<main class="lg:ml-64 pt-16 lg:pt-0 min-h-screen">
<div class="p-6 space-y-6">
<!-- عنوان الصفحة -->
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div>
<h1 class="text-2xl font-bold">لوحة التحكم</h1>
<p class="text-sm text-gray-500 mt-1">مرحباً بعودتك، أليكس تشين</p>
</div>
<div class="flex items-center gap-3">
<button class="px-4 py-2 border border-gray-200 dark:border-gray-700 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
تصدير التقرير
</button>
<button class="px-4 py-2 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 transition-colors">
+ جديد
</button>
</div>
</div>
<!-- بطاقات الإحصائيات -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500">إجمالي المستخدمين</span>
<div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">24,589</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400">+12.5%</span>
<span class="text-gray-500">مقارنة بالشهر الماضي</span>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500">إجمالي الإيرادات</span>
<div class="w-10 h-10 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">$892,400</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400">+8.2%</span>
<span class="text-gray-500">مقارنة بالشهر الماضي</span>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500">الطلبات</span>
<div class="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">3,847</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-red-600 dark:text-red-400">-3.1%</span>
<span class="text-gray-500">مقارنة بالشهر الماضي</span>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-4">
<span class="text-sm text-gray-500">معدل التحويل</span>
<div class="w-10 h-10 bg-orange-50 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
<svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
</div>
</div>
<p class="text-3xl font-bold mb-1">5.6%</p>
<div class="flex items-center gap-1 text-sm">
<span class="text-green-600 dark:text-green-400">+2.4%</span>
<span class="text-gray-500">مقارنة بالشهر الماضي</span>
</div>
</div>
</div>
<!-- قسم الرسم البياني -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold">اتجاه الإيرادات</h3>
<select class="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-xs focus:outline-none">
<option>آخر 7 أيام</option>
<option>آخر 30 يوم</option>
</select>
</div>
<div class="h-48 flex items-end gap-2 px-2">
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-200 dark:bg-blue-900 rounded-t" style="height:45%"></div><span class="text-xs text-gray-500">ن</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height:65%"></div><span class="text-xs text-gray-500">ث</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height:50%"></div><span class="text-xs text-gray-500">ر</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-500 dark:bg-blue-600 rounded-t" style="height:80%"></div><span class="text-xs text-gray-500">خ</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-600 dark:bg-blue-500 rounded-t" style="height:70%"></div><span class="text-xs text-gray-500">ج</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height:90%"></div><span class="text-xs text-gray-500">س</span></div>
<div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height:60%"></div><span class="text-xs text-gray-500">أ</span></div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-lg font-semibold mb-6">مصادر الزيارات</h3>
<div class="flex items-center justify-center">
<div class="relative w-40 h-40">
<svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#e5e7eb" stroke-width="3" class="dark:stroke-gray-700"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="0"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="25 75" stroke-dashoffset="-40"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="-65"/>
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="-85"/>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-xl font-bold">100%</span>
</div>
</div>
<div class="mr-8 space-y-2">
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-blue-500 rounded-full"></div><span class="text-sm">البحث 40%</span></div>
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-green-500 rounded-full"></div><span class="text-sm">مباشر 25%</span></div>
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><span class="text-sm">التواصل الاجتماعي 20%</span></div>
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><span class="text-sm">أخرى 15%</span></div>
</div>
</div>
</div>
</div>
<!-- جدول البيانات -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
<div class="p-4 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<h3 class="text-lg font-semibold">الطلبات الأخيرة</h3>
<input type="text" placeholder="البحث في الطلبات..." class="w-full sm:w-64 px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50">
</div>
<div class="overflow-x-auto">
<table class="w-full min-w-[640px]">
<thead>
<tr class="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase">رقم الطلب</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase">العميل</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase">المبلغ</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase">الحالة</th>
<th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase">التاريخ</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7891</td>
<td class="px-4 py-3 text-sm">جون دو</td>
<td class="px-4 py-3 text-sm font-medium">$1,188</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">مكتمل</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-15</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7892</td>
<td class="px-4 py-3 text-sm">ليزا وانغ</td>
<td class="px-4 py-3 text-sm font-medium">$3,588</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">قيد المعالجة</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-14</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7893</td>
<td class="px-4 py-3 text-sm">مايك تشانغ</td>
<td class="px-4 py-3 text-sm font-medium">$99</td>
<td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">مكتمل</span></td>
<td class="px-4 py-3 text-sm text-gray-500">2025-01-13</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<p class="text-sm text-gray-500">عرض 1-3 من 256 نتيجة</p>
<div class="flex items-center gap-1">
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg disabled:opacity-50" disabled>السابق</button>
<button class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg">1</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg">2</button>
<button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg">التالي</button>
</div>
</div>
</div>
<!-- قسم النماذج -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-lg font-semibold mb-6">إضافة مستخدم سريع</h3>
<form class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<input type="text" placeholder="الاسم الكامل" class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
<input type="email" placeholder="البريد الإلكتروني" class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
<select class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 appearance-none cursor-pointer">
<option>اختر الدور</option>
<option>مدير</option>
<option>محرر</option>
<option>مشاهد</option>
</select>
<button type="submit" class="px-4 py-2.5 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 active:bg-primary-800 transition-colors">
إضافة مستخدم
</button>
</form>
</div>
</div>
</main>
<script>
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('overlay');
document.getElementById('sidebarToggle')?.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
overlay.classList.toggle('hidden');
});
document.getElementById('sidebarClose')?.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
overlay.classList.add('hidden');
});
overlay?.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
overlay.classList.add('hidden');
});
const toggleTheme = () => document.documentElement.classList.toggle('dark');
document.getElementById('themeToggle')?.addEventListener('click', toggleTheme);
document.getElementById('themeToggleMobile')?.addEventListener('click', toggleTheme);
</script>
</body>
</html>
معايير القبول
- [ ] القائمة الجانبية ثابتة على سطح المكتب، مخفية على الجوال مع زر تبديل
- [ ] بطاقات الإحصائيات تعرض عموداً واحداً على الجوال، 2 على اللوحي، 4 على سطح المكتب
- [ ] جدول البيانات يتمتمرير أفقياً على الشاشات الصغيرة دون كسر التخطيط
- [ ] حقول النماذج تظهر حدوداً زرقاء وحلقة تأثير عند التركيز
- [ ] تتغير ألوان المكونات بشكل صحيح عند تبديل الوضع الداكن
- [ ] يُغلق قائمة الجوال عند النقر على التراكب
- [ ] جميع الأزرار والروابط تقدم تغذية راجعة للحالة التفاعلية (التحويم/النقر)
امتدادات
- دمج Chart.js أو ECharts للرسوم البيانية الفعلية
- إضافة ترتيب وتصفية الجدول وإجراءات مجمعة
- تنفيذ قوائم فرعية قابلة للطي في القائمة الجانبية
- إضافة تنقل فتات الخبز والتبديل بين علامات التبويب
- دمج مركز الإشعارات وقائمة الرسائل المنسدلة
- تنفيذ تبديل عرض البطاقات للجداول المتجاوبة (الجوال)