Spaces:
Running
Running
| <html lang="en" dir="ltr" id="html"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard | Rasd</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'spa-green': '#006C35', | |
| 'spa-gold': '#C9A646', | |
| 'spa-dark': '#1A2E44', | |
| 'spa-light-gray': '#f8f9fa', | |
| }, | |
| fontFamily: { 'tajawal': ['Tajawal', 'sans-serif'] } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { font-family: 'tajawal', sans-serif; } | |
| .rtl { direction: rtl; } | |
| .ltr { direction: ltr; } | |
| .sidebar-link.active { background-color: #006C35; color: white; } | |
| .sidebar-link:not(.active):hover { background-color: #f0f0f0; } | |
| </style> | |
| </head> | |
| <body class="bg-spa-light-gray"> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <aside class="w-72 flex-shrink-0 bg-white border-r flex flex-col"> | |
| <div class="h-20 flex items-center justify-center border-b space-x-3"> | |
| <img src="spa-logo.png" alt="SPA Logo" class="h-10"> | |
| <span class="text-2xl font-bold text-spa-green" data-en="Rasd" data-ar="رصد">Rasd</span> | |
| </div> | |
| <nav class="flex-1 p-4 space-y-2"> | |
| <a href="#" class="sidebar-link active flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="overview"> | |
| <i class="fas fa-home w-8 text-center"></i><span data-en="Main Dashboard" data-ar="اللوحة الرئيسية">Main Dashboard</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="content"> | |
| <i class="fas fa-file-alt w-8 text-center"></i><span data-en="Content Analysis" data-ar="تحليل المحتوى">Content Analysis</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="platforms"> | |
| <i class="fas fa-chart-bar w-8 text-center"></i><span data-en="Platform Performance" data-ar="أداء المنصات">Platform Performance</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="agencies"> | |
| <i class="fas fa-building w-8 text-center"></i><span data-en="Agency Watchlist" data-ar="مراقبة الوكالات">Agency Watchlist</span> | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center p-3 rounded-lg transition-colors text-lg" data-dashboard="predictive"> | |
| <i class="fas fa-brain w-8 text-center"></i><span data-en="Predictive Insights" data-ar="الرؤى التنبؤية">Predictive Insights</span> | |
| </a> | |
| </nav> | |
| <div class="p-4 border-t"> | |
| <a href="index.html" class="flex items-center p-3 text-gray-600 hover:text-spa-dark transition-colors"> | |
| <i class="fas fa-arrow-left w-8 text-center"></i><span data-en="Back to Homepage" data-ar="العودة للرئيسية">Back to Homepage</span> | |
| </a> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-y-auto p-8"> | |
| <header class="flex justify-between items-center mb-8"> | |
| <h1 id="dashboard-title" class="text-3xl font-bold text-spa-dark">Main Dashboard</h1> | |
| <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> | |
| </header> | |
| <!-- Dashboard Content Area --> | |
| <div id="dashboard-content-area"> | |
| <!-- Overview Dashboard --> | |
| <div id="dashboard-overview" class="dashboard-panel"> | |
| <!-- ... content ... --> | |
| </div> | |
| <!-- Content Analysis Dashboard --> | |
| <div id="dashboard-content" class="dashboard-panel hidden"> | |
| <!-- ... content ... --> | |
| </div> | |
| <!-- Platform Performance Dashboard --> | |
| <div id="dashboard-platforms" class="dashboard-panel hidden"> | |
| <img src="dashboard-platform-comparison.gif" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <!-- Agency Watchlist Dashboard --> | |
| <div id="dashboard-agencies" class="dashboard-panel hidden"> | |
| <!-- ... content ... --> | |
| </div> | |
| <!-- Predictive Insights Dashboard --> | |
| <div id="dashboard-predictive" class="dashboard-panel hidden"> | |
| <!-- ... content ... --> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="translations.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |