Spaces:
Running
Running
Create dashboard.html
Browse files- dashboard.html +102 -0
dashboard.html
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en" dir="ltr" id="html">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Dashboard | Rasd</title>
|
| 7 |
+
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
|
| 8 |
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
| 9 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 10 |
+
<script>
|
| 11 |
+
tailwind.config = {
|
| 12 |
+
theme: {
|
| 13 |
+
extend: {
|
| 14 |
+
colors: {
|
| 15 |
+
'spa-green': '#006C35',
|
| 16 |
+
'spa-gold': '#C9A646',
|
| 17 |
+
'spa-dark': '#1A2E44',
|
| 18 |
+
'spa-light-gray': '#f8f9fa',
|
| 19 |
+
},
|
| 20 |
+
fontFamily: { 'tajawal': ['Tajawal', 'sans-serif'] }
|
| 21 |
+
}
|
| 22 |
+
}
|
| 23 |
+
}
|
| 24 |
+
</script>
|
| 25 |
+
<style>
|
| 26 |
+
body { font-family: 'tajawal', sans-serif; }
|
| 27 |
+
.rtl { direction: rtl; }
|
| 28 |
+
.ltr { direction: ltr; }
|
| 29 |
+
.sidebar-link.active { background-color: #006C35; color: white; }
|
| 30 |
+
.sidebar-link:not(.active):hover { background-color: #f0f0f0; }
|
| 31 |
+
</style>
|
| 32 |
+
</head>
|
| 33 |
+
<body class="bg-spa-light-gray">
|
| 34 |
+
|
| 35 |
+
<div class="flex h-screen">
|
| 36 |
+
<!-- Sidebar -->
|
| 37 |
+
<aside class="w-72 flex-shrink-0 bg-white border-r flex flex-col">
|
| 38 |
+
<div class="h-20 flex items-center justify-center border-b space-x-3">
|
| 39 |
+
<img src="spa-logo.png" alt="SPA Logo" class="h-10">
|
| 40 |
+
<span class="text-2xl font-bold text-spa-green" data-en="Rasd" data-ar="رصد">Rasd</span>
|
| 41 |
+
</div>
|
| 42 |
+
<nav class="flex-1 p-4 space-y-2">
|
| 43 |
+
<a href="#" class="sidebar-link active flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="overview">
|
| 44 |
+
<i class="fas fa-home w-8 text-center"></i><span data-en="Main Dashboard" data-ar="اللوحة الرئيسية">Main Dashboard</span>
|
| 45 |
+
</a>
|
| 46 |
+
<a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="content">
|
| 47 |
+
<i class="fas fa-file-alt w-8 text-center"></i><span data-en="Content Analysis" data-ar="تحليل المحتوى">Content Analysis</span>
|
| 48 |
+
</a>
|
| 49 |
+
<a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="platforms">
|
| 50 |
+
<i class="fas fa-chart-bar w-8 text-center"></i><span data-en="Platform Performance" data-ar="أداء المنصات">Platform Performance</span>
|
| 51 |
+
</a>
|
| 52 |
+
<a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="agencies">
|
| 53 |
+
<i class="fas fa-building w-8 text-center"></i><span data-en="Agency Watchlist" data-ar="مراقبة الوكالات">Agency Watchlist</span>
|
| 54 |
+
</a>
|
| 55 |
+
<a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="predictive">
|
| 56 |
+
<i class="fas fa-brain w-8 text-center"></i><span data-en="Predictive Insights" data-ar="الرؤى التنبؤية">Predictive Insights</span>
|
| 57 |
+
</a>
|
| 58 |
+
</nav>
|
| 59 |
+
<div class="p-4 border-t">
|
| 60 |
+
<a href="index.html" class="flex items-center p-3 text-gray-600 hover:text-spa-dark transition-colors">
|
| 61 |
+
<i class="fas fa-arrow-left w-8 text-center"></i><span data-en="Back to Homepage" data-ar="العودة للرئيسية">Back to Homepage</span>
|
| 62 |
+
</a>
|
| 63 |
+
</div>
|
| 64 |
+
</aside>
|
| 65 |
+
|
| 66 |
+
<!-- Main Content -->
|
| 67 |
+
<main class="flex-1 overflow-y-auto p-8">
|
| 68 |
+
<header class="flex justify-between items-center mb-8">
|
| 69 |
+
<h1 id="dashboard-title" class="text-3xl font-bold text-spa-dark">Main Dashboard</h1>
|
| 70 |
+
<button onclick="toggleLanguage()" id="lang-toggle-btn" class="w-10 h-10 border-2 border-spa-green rounded-full text-spa-green font-bold hover:bg-spa-green hover:text-white transition-colors">ع</button>
|
| 71 |
+
</header>
|
| 72 |
+
|
| 73 |
+
<!-- Dashboard Content Area -->
|
| 74 |
+
<div id="dashboard-content-area">
|
| 75 |
+
<!-- Overview Dashboard -->
|
| 76 |
+
<div id="dashboard-overview" class="dashboard-panel">
|
| 77 |
+
<!-- ... content ... -->
|
| 78 |
+
</div>
|
| 79 |
+
<!-- Content Analysis Dashboard -->
|
| 80 |
+
<div id="dashboard-content" class="dashboard-panel hidden">
|
| 81 |
+
<!-- ... content ... -->
|
| 82 |
+
</div>
|
| 83 |
+
<!-- Platform Performance Dashboard -->
|
| 84 |
+
<div id="dashboard-platforms" class="dashboard-panel hidden">
|
| 85 |
+
<img src="dashboard-platform-comparison.gif" class="w-full rounded-lg shadow-md">
|
| 86 |
+
</div>
|
| 87 |
+
<!-- Agency Watchlist Dashboard -->
|
| 88 |
+
<div id="dashboard-agencies" class="dashboard-panel hidden">
|
| 89 |
+
<!-- ... content ... -->
|
| 90 |
+
</div>
|
| 91 |
+
<!-- Predictive Insights Dashboard -->
|
| 92 |
+
<div id="dashboard-predictive" class="dashboard-panel hidden">
|
| 93 |
+
<!-- ... content ... -->
|
| 94 |
+
</div>
|
| 95 |
+
</div>
|
| 96 |
+
</main>
|
| 97 |
+
</div>
|
| 98 |
+
|
| 99 |
+
<script src="translations.js"></script>
|
| 100 |
+
<script src="script.js"></script>
|
| 101 |
+
</body>
|
| 102 |
+
</html>
|