| <!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 href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
| <style> |
| body { font-family: 'Tajawal', sans-serif; } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
|
|
| <div class="min-h-screen flex"> |
| |
| <div class="bg-green-800 text-white w-64 p-6 space-y-8 hidden md:block"> |
| <div class="text-2xl font-bold flex items-center gap-2"><i class="fas fa-chart-line"></i><span>لوحة التحكم</span></div> |
| <nav class="space-y-4"> |
| <a href="#" class="flex items-center gap-3 p-3 bg-green-700 rounded-lg"><i class="fas fa-tachometer-alt"></i><span>نظرة عامة</span></a> |
| <a href="#" class="flex items-center gap-3 p-3 hover:bg-green-700 rounded-lg"><i class="fas fa-globe"></i><span>التغطية العالمية</span></a> |
| <a href="#" class="flex items-center gap-3 p-3 hover:bg-green-700 rounded-lg"><i class="fas fa-smile-beam"></i><span>تحليل المشاعر</span></a> |
| <a href="#" class="flex items-center gap-3 p-3 hover:bg-green-700 rounded-lg"><i class="fas fa-camera"></i><span>تتبع الصور</span></a> |
| <a href="#" class="flex items-center gap-3 p-3 hover:bg-green-700 rounded-lg"><i class="fas fa-file-export"></i><span>تصدير التقارير</span></a> |
| </nav> |
| <div class="absolute bottom-4"> |
| <a href="index.html" class="flex items-center gap-3 p-3 hover:bg-green-700 rounded-lg"><i class="fas fa-arrow-left"></i><span>العودة للموقع الرئيسي</span></a> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 p-8"> |
| <h1 class="text-3xl font-extrabold text-green-900 mb-6">نظرة عامة على التأثير الإعلامي</h1> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| <div class="bg-white p-6 rounded-xl shadow-md"><h3 class="text-gray-500">إجمالي التغطيات</h3><div class="text-3xl font-bold text-green-700 mt-2">1,280</div></div> |
| <div class="bg-white p-6 rounded-xl shadow-md"><h3 class="text-gray-500">الوصول العالمي (تقديري)</h3><div class="text-3xl font-bold text-green-700 mt-2">15.2 مليون</div></div> |
| <div class="bg-white p-6 rounded-xl shadow-md"><h3 class="text-gray-500">متوسط المشاعر</h3><div class="text-3xl font-bold text-green-700 mt-2">+12% (إيجابي)</div></div> |
| <div class="bg-white p-6 rounded-xl shadow-md"><h3 class="text-gray-500">أبرز دولة (تغطية)</h3><div class="text-3xl font-bold text-green-700 mt-2">الولايات المتحدة</div></div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-md"> |
| <h3 class="font-bold mb-4">التغطية الإعلامية حسب الدولة</h3> |
| <img src="images/saudi-map.png" class="w-full h-auto object-contain" alt="Map"> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <h3 class="font-bold mb-4">توزيع مصادر التغطية</h3> |
| <img src="images/chart-placeholder-1.png" class="w-full h-auto object-contain" alt="Chart"> |
| </div> |
| <div class="lg:col-span-3 bg-white p-6 rounded-xl shadow-md"> |
| <h3 class="font-bold mb-4">تطور المشاعر بمرور الوقت</h3> |
| <img src="images/chart-placeholder-2.png" class="w-full h-auto object-contain" alt="Chart"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| </body> |
| </html> |
