File size: 4,318 Bytes
86d6b33 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!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">
<!-- Sidebar -->
<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>
<!-- Main Content -->
<div class="flex-1 p-8">
<h1 class="text-3xl font-extrabold text-green-900 mb-6">نظرة عامة على التأثير الإعلامي</h1>
<!-- Key Metrics -->
<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>
<!-- Charts Grid -->
<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> |