|
|
<!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> |
