349 lines
19 KiB
HTML
349 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SaaS Meta Ads - لوحة التحكم الاحترافية</title>
|
|
<link rel="stylesheet" href="src/style.css">
|
|
<!-- Google Fonts: Inter & Arabic font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Kufi+Arabic:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<!-- Flatpickr for better date picking -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
|
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>
|
|
<script type="module" src="src/auth.js"></script>
|
|
</head>
|
|
<body class="dark-theme">
|
|
<!-- Login Overlay | واجهة تسجيل الدخول -->
|
|
<div id="login-overlay" class="login-overlay">
|
|
<div class="login-card glass-card">
|
|
<div class="logo-section" style="margin-bottom: 2rem; justify-content: center;">
|
|
<div class="logo-icon">
|
|
<i data-lucide="shield-check"></i>
|
|
</div>
|
|
<span>تسجيل الدخول للنظام</span>
|
|
</div>
|
|
|
|
<p style="text-align: center; color: var(--text-secondary); margin-bottom: 2rem;">أدخل بريدك الإلكتروني للبدء في تحليل حملاتك</p>
|
|
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label>البريد الإلكتروني</label>
|
|
<input type="email" id="login-email" placeholder="example@mail.com" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; padding: 14px;">
|
|
دخول للمنصة
|
|
</button>
|
|
|
|
<div style="text-align: center; margin: 1rem 0; color: var(--text-secondary); font-size: 0.8rem;">أو</div>
|
|
|
|
<button type="button" id="btn-google-login" class="btn btn-secondary" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: white; color: #444; border: 1px solid #ddd; padding: 12px; font-weight: 600;">
|
|
<img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="18" height="18">
|
|
التسجيل عبر جوجل
|
|
</button>
|
|
</form>
|
|
|
|
<div id="login-error" class="error-text hidden" style="margin-top: 1rem; color: var(--danger); text-align: center;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app-container hidden" id="main-app">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="logo-section">
|
|
<div class="logo-icon">
|
|
<i data-lucide="layout-dashboard"></i>
|
|
</div>
|
|
<span>SaaS Meta Pro</span>
|
|
</div>
|
|
|
|
<nav class="side-nav">
|
|
<a href="#" class="nav-item active" data-page="dashboard">
|
|
<i data-lucide="line-chart"></i>
|
|
<span>الإحصائيات</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-page="connect">
|
|
<i data-lucide="link"></i>
|
|
<span>ربط الحسابات</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-page="ai-lab">
|
|
<i data-lucide="sparkles"></i>
|
|
<span>مختبر الذكاء الاصطناعي</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-page="automation">
|
|
<i data-lucide="settings-2"></i>
|
|
<span>الأتمتة</span>
|
|
</a>
|
|
<div class="sidebar-divider"></div>
|
|
<button class="btn btn-demo-sidebar btn-demo">
|
|
<i data-lucide="play-circle"></i>
|
|
<span>وضع التجربة (Demo)</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="user-selector-wrapper">
|
|
<label for="user-id-select">المستخدم الحالي:</label>
|
|
<select id="user-id-select" class="premium-select">
|
|
<option value="">جاري جلب المستخدمين...</option>
|
|
</select>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<header class="top-header">
|
|
<div class="header-info">
|
|
<h1 id="page-title">لوحة الإحصائيات</h1>
|
|
<div class="filters glass-card mini-filters">
|
|
<div class="filter-group">
|
|
<label>الحساب:</label>
|
|
<select id="ad-account-select" class="premium-select mini">
|
|
<option value="">الحساب الافتراضي</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>من:</label>
|
|
<input type="text" id="date-start" class="premium-input mini date-picker-trigger" placeholder="اختر تاريخ البداية">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>إلى:</label>
|
|
<input type="text" id="date-end" class="premium-input mini date-picker-trigger" placeholder="اختر تاريخ النهاية">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="btn btn-primary" id="refresh-data">
|
|
<i data-lucide="refresh-cw"></i>
|
|
تحديث البيانات
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section id="content-area">
|
|
<!-- Dashboard Page -->
|
|
<div id="dashboard-page" class="page-content">
|
|
<div class="platform-filters" id="platform-filter-bar">
|
|
<button class="platform-btn active" data-platform="all">الكل</button>
|
|
<button class="platform-btn" data-platform="meta">
|
|
<i data-lucide="facebook"></i> Facebook
|
|
</button>
|
|
<button class="platform-btn" data-platform="instagram">
|
|
<i data-lucide="instagram"></i> Instagram
|
|
</button>
|
|
<button class="platform-btn" data-platform="google">
|
|
<i data-lucide="search"></i> Google
|
|
</button>
|
|
<button class="platform-btn" data-platform="tiktok">
|
|
<i data-lucide="music-2"></i> تيك توك
|
|
</button>
|
|
</div>
|
|
|
|
<div class="stats-grid" id="kpi-cards">
|
|
<!-- KPI Cards populated by JS -->
|
|
</div>
|
|
|
|
<div class="chart-section glass-card">
|
|
<h3>أداء الحملات الإعلانية</h3>
|
|
<canvas id="campaign-chart"></canvas>
|
|
</div>
|
|
|
|
<div class="table-section glass-card">
|
|
<h3>تفاصيل الحملات والتوصيات</h3>
|
|
<div class="table-wrapper">
|
|
<table id="campaign-table">
|
|
<thead>
|
|
<tr>
|
|
<th>المنصة</th>
|
|
<th>اسم الحملة</th>
|
|
<th>الحالة</th>
|
|
<th>الظهور</th>
|
|
<th>النقرات</th>
|
|
<th>الإنفاق</th>
|
|
<th>توصية الذكاء الاصطناعي</th>
|
|
<th>إجراء</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Rows populated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connect Account Page -->
|
|
<div id="connect-page" class="page-content hidden">
|
|
<div class="form-container glass-card">
|
|
<h2>ربط حساب إعلاني جديد</h2>
|
|
<p class="subtitle">قم بربط حساب ميتـا الخاص بك لبدء التحليل والأتمتة.</p>
|
|
|
|
<div class="oauth-section" style="margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 1rem;">
|
|
<button class="btn btn-primary btn-large w-full" id="btn-oauth-meta" style="background: #1877F2; border: none;">
|
|
<i data-lucide="facebook"></i>
|
|
الربط التلقائي عبر ميتـا (Facebook & Instagram)
|
|
</button>
|
|
|
|
<button class="btn btn-primary btn-large w-full" id="btn-oauth-google" style="background: #4285F4; border: none;">
|
|
<i data-lucide="search"></i>
|
|
الربط التلقائي عبر جوجل (Google Ads)
|
|
</button>
|
|
|
|
<button class="btn btn-primary btn-large w-full" id="btn-oauth-tiktok" style="background: #000000; border: none;">
|
|
<i data-lucide="music-2"></i>
|
|
الربط التلقائي عبر تيك توك (TikTok Ads)
|
|
</button>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-bottom: 1.5rem;">
|
|
<span style="background: var(--bg-card); padding: 0 1rem; color: var(--text-dim); font-size: 0.9rem;">أو الربط اليدوي</span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>اسم الحساب</label>
|
|
<input type="text" id="acc-name" placeholder="مثلاً: متجري الإلكتروني">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Ad Account ID</label>
|
|
<input type="text" id="acc-id" placeholder="act_123456789">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Access Token</label>
|
|
<textarea id="acc-token" rows="4" placeholder="EAAY..."></textarea>
|
|
</div>
|
|
|
|
<button class="btn btn-success btn-large" id="btn-connect-meta" style="width: 100%;">
|
|
<i data-lucide="link-2"></i>
|
|
حفظ الربط اليدوي
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Lab Page -->
|
|
<div id="ai-lab-page" class="page-content hidden">
|
|
<button class="btn btn-secondary mb-3" id="btn-back-to-dashboard" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem;">
|
|
<i data-lucide="arrow-right" style="width: 20px; height: 20px;"></i>
|
|
<span style="font-weight: 600;">العودة للوحة الإحصائيات</span>
|
|
</button>
|
|
<div class="ai-grid">
|
|
<div class="ai-input-section glass-card">
|
|
<h2>تحليل التصميم بالذكاء الاصطناعي</h2>
|
|
<p>أدخل رابط صورة الإعلان وسيقوم Gemini بتحليله بصرياً.</p>
|
|
<div class="form-group">
|
|
<label>رابط الصورة</label>
|
|
<input type="text" id="ai-image-url" placeholder="https://example.com/ad-image.jpg">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>النص الإعلاني (اختياري)</label>
|
|
<textarea id="ai-copy" rows="3"></textarea>
|
|
</div>
|
|
<button class="btn btn-sparkle" id="btn-analyze-visual">
|
|
<i data-lucide="cpu"></i>
|
|
تحليل التصميم بالذكاء الاصطناعي
|
|
</button>
|
|
</div>
|
|
<div class="ai-output-section glass-card" id="ai-result-box">
|
|
<div class="placeholder-text">
|
|
<i data-lucide="brain-circuit"></i>
|
|
التقرير سيظهر هنا بعد التحليل
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Automation Page -->
|
|
<div id="automation-page" class="page-content hidden">
|
|
<div class="glass-card">
|
|
<h3>إنشاء قاعدة أتمتة جديدة</h3>
|
|
<p class="subtitle" style="margin-bottom: 2rem;">تحكم في حملاتك تلقائياً بناءً على الأداء.</p>
|
|
<div class="automation-grid" style="display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem;">
|
|
<div class="rule-builder-section">
|
|
<form id="rule-form">
|
|
<div class="form-group">
|
|
<label>اسم القاعدة</label>
|
|
<input type="text" id="rule-name" placeholder="مثلاً: إيقاف الإعلانات الضعيفة" required>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
|
<div class="form-group">
|
|
<label>المؤشر</label>
|
|
<select id="rule-metric" class="premium-select">
|
|
<option value="spend">الإنفاق</option>
|
|
<option value="ctr">نسبة النقر (CTR)</option>
|
|
<option value="cpc">تكلفة النقرة (CPC)</option>
|
|
<option value="roas">العائد (ROAS)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>الشرط</label>
|
|
<div style="display: flex; gap: 5px;">
|
|
<select id="rule-operator" class="premium-select" style="width: 70px;">
|
|
<option value=">">></option>
|
|
<option value="<"><</option>
|
|
<option value="=">=</option>
|
|
</select>
|
|
<input type="number" id="rule-value" step="0.1" placeholder="0.0" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>الإجراء (Action)</label>
|
|
<select id="rule-action" class="premium-select">
|
|
<option value="notify">تنبيه فقط (Notify)</option>
|
|
<option value="pause" disabled title="Pro Feature">إيقاف الحملة (Pause) - Pro</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-sparkle w-full">حفظ وتفعيل القاعدة</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="rules-list-section">
|
|
<div class="table-wrapper">
|
|
<table id="rules-table">
|
|
<thead>
|
|
<tr>
|
|
<th>القاعدة</th>
|
|
<th>الشرط</th>
|
|
<th>الإجراء</th>
|
|
<th>الحالة</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="rules-list-body">
|
|
<tr id="rules-empty-state">
|
|
<td colspan="5" style="text-align: center; color: var(--text-dim); padding: 2rem;">لا توجد قواعد نشطة حالياً.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="src/api.js" type="module"></script>
|
|
<script src="src/main.js" type="module"></script>
|
|
<script>
|
|
// Init icons after page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|