mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2026-06-17 23:09:35 +00:00
260 lines
13 KiB
HTML
260 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Dealix — Customer Portal Preview</title>
|
|
<meta name="description" content="معاينة لوحة العميل: ما الذي يراه المشترك في Dealix يومياً." />
|
|
<meta name="theme-color" content="#0f172a" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<style>
|
|
:root{--brand:#0f172a;--brand-2:#1e293b;--accent:#22d3ee;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--muted:#64748b;--border:#e2e8f0;--surface:#fff;--bg:#f8fafc}
|
|
body{font-family:'IBM Plex Sans Arabic','Inter',sans-serif;background:var(--bg);margin:0}
|
|
|
|
.portal-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
|
|
@media(max-width:840px){.portal-shell{grid-template-columns:1fr}.sidebar{display:none}}
|
|
|
|
.sidebar{background:var(--brand);color:#fff;padding:24px 16px;position:sticky;top:0;height:100vh;overflow-y:auto}
|
|
.sidebar .brand{font-weight:700;font-size:20px;margin-bottom:32px;display:flex;align-items:center;gap:8px}
|
|
.sidebar .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
|
|
.sidebar nav a{display:flex;align-items:center;gap:10px;color:#cbd5e1;padding:10px 12px;text-decoration:none;border-radius:8px;font-size:14px;margin-bottom:4px}
|
|
.sidebar nav a.active,.sidebar nav a:hover{background:var(--brand-2);color:#fff}
|
|
.sidebar .badge-pilot{background:var(--accent);color:var(--brand);padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;margin-right:auto}
|
|
|
|
.main{padding:32px 32px}
|
|
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
|
|
.topbar h1{margin:0;font-size:24px;color:var(--brand)}
|
|
.topbar .meta{display:flex;gap:14px;font-size:13px;color:var(--muted);align-items:center;flex-wrap:wrap}
|
|
.pill{background:#fff;border:1px solid var(--border);padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
|
|
.pill.live{border-color:#86efac;background:#ecfdf5;color:#15803d}
|
|
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 2s ease-in-out infinite}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
|
|
|
|
.preview-banner{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #fbbf24;border-radius:12px;padding:14px 18px;font-size:14px;color:#713f12;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
|
|
.preview-banner strong{font-weight:700}
|
|
.preview-banner a{color:var(--brand);font-weight:600;text-decoration:none}
|
|
|
|
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:32px}
|
|
.kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}
|
|
.kpi .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
|
|
.kpi .value{font-size:28px;font-weight:700;color:var(--brand);margin-top:4px}
|
|
.kpi .delta{font-size:13px;margin-top:6px}
|
|
.kpi .delta.up{color:var(--success)}
|
|
.kpi .delta.down{color:var(--danger)}
|
|
|
|
.panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:24px}
|
|
.panel h2{margin:0 0 16px;font-size:18px;color:var(--brand)}
|
|
.panel .subtitle{font-size:13px;color:var(--muted);margin:-8px 0 16px}
|
|
|
|
.lead-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 100px 110px;gap:12px;padding:14px 0;border-bottom:1px dashed var(--border);align-items:center;font-size:14px}
|
|
.lead-row:last-child{border-bottom:0}
|
|
.lead-row .name{font-weight:600;color:var(--brand)}
|
|
.lead-row .meta{color:var(--muted);font-size:12px;margin-top:2px}
|
|
.lead-row .channel{font-size:13px;color:var(--muted)}
|
|
.lead-row .stage{display:inline-block;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;text-align:center}
|
|
.stage-qualified{background:#dbeafe;color:#1e40af}
|
|
.stage-meeting_booked{background:#dcfce7;color:#166534}
|
|
.stage-negotiating{background:#fef3c7;color:#92400e}
|
|
.stage-pilot_active{background:#ddd6fe;color:#5b21b6}
|
|
.stage-new_lead{background:#f1f5f9;color:#475569}
|
|
.priority{font-weight:700}
|
|
.priority-P0{color:#dc2626}
|
|
.priority-P1{color:#ea580c}
|
|
.priority-P2{color:#0891b2}
|
|
@media(max-width:840px){.lead-row{grid-template-columns:1fr;border-bottom:1px solid var(--border);padding:14px 0}}
|
|
|
|
.activity-item{padding:12px 0;border-bottom:1px dashed var(--border);font-size:14px}
|
|
.activity-item .time{color:var(--muted);font-size:12px}
|
|
.activity-item .desc{margin-top:2px}
|
|
|
|
.compliance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
|
|
.compliance-card{background:#ecfdf5;border:1px solid #86efac;border-radius:10px;padding:14px;font-size:13px}
|
|
.compliance-card .check{color:var(--success);font-weight:700;font-size:18px;margin-left:6px}
|
|
.compliance-card .label{font-weight:600;color:var(--brand)}
|
|
.compliance-card .desc{color:var(--muted);font-size:12px;margin-top:4px}
|
|
|
|
.upgrade-cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-radius:14px;padding:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
|
|
.upgrade-cta h3{margin:0 0 4px;font-size:18px}
|
|
.upgrade-cta p{margin:0;color:#cbd5e1;font-size:14px}
|
|
.upgrade-cta .btn{background:var(--accent);color:var(--brand);padding:11px 20px;border-radius:10px;text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}
|
|
|
|
.nav-back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;margin-bottom:12px}
|
|
.nav-back:hover{color:var(--brand)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="portal-shell">
|
|
|
|
<aside class="sidebar">
|
|
<div class="brand"><span class="dot"></span> Dealix</div>
|
|
<nav>
|
|
<a href="#" class="active">📊 لوحة اليوم</a>
|
|
<a href="#">📨 Inbox & Drafts</a>
|
|
<a href="#">📞 Calls Pipeline</a>
|
|
<a href="#">🤝 Partners</a>
|
|
<a href="#">💳 Subscription <span class="badge-pilot">Growth</span></a>
|
|
<a href="#">🔌 Integrations</a>
|
|
<a href="#">🛡️ Compliance</a>
|
|
<a href="#">⚙️ Settings</a>
|
|
<a href="#">📚 Knowledge Base</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<a href="/" class="nav-back">← العودة لـ Dealix</a>
|
|
|
|
<div class="topbar">
|
|
<h1>السلام عليكم، شركة الراجحي العقارية 👋</h1>
|
|
<div class="meta">
|
|
<span class="pill live"><span class="dot"></span> Dealix يعمل الآن</span>
|
|
<span class="pill">📅 الإثنين 28 إبريل 2026</span>
|
|
<span class="pill">🇸🇦 الرياض</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-banner">
|
|
<span>👁️ <strong>هذه معاينة فقط</strong> — هذا ما يراه المشترك يومياً. الأرقام تجريبية.</span>
|
|
<a href="/pricing.html">اشترك ابدأ الآن →</a>
|
|
</div>
|
|
|
|
<!-- KPIs Today -->
|
|
<div class="kpi-grid">
|
|
<div class="kpi">
|
|
<div class="label">leads استُلمت اليوم</div>
|
|
<div class="value">23</div>
|
|
<div class="delta up">↑ +35% من الأمس</div>
|
|
</div>
|
|
<div class="kpi">
|
|
<div class="label">رد بالعربي خلال 60 ثانية</div>
|
|
<div class="value">22 / 23</div>
|
|
<div class="delta up">96% — متفوق</div>
|
|
</div>
|
|
<div class="kpi">
|
|
<div class="label">demos محجوزة</div>
|
|
<div class="value">4</div>
|
|
<div class="delta up">↑ 2 أمس</div>
|
|
</div>
|
|
<div class="kpi">
|
|
<div class="label">pipeline value</div>
|
|
<div class="value">187K ريال</div>
|
|
<div class="delta">هذا الأسبوع</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Today's Hot Leads -->
|
|
<div class="panel">
|
|
<h2>🔥 leads اليوم — يحتاجون متابعتك</h2>
|
|
<p class="subtitle">Dealix رد على الجميع. أنت اعتمد الخطوة التالية لكل حالة.</p>
|
|
|
|
<div class="lead-row">
|
|
<div>
|
|
<div class="name">عبدالله الزهراني</div>
|
|
<div class="meta">+966 50 *** 4421 · شقة 3 غرف · حي الياسمين · ميزانية 1.2M</div>
|
|
</div>
|
|
<div class="channel">📱 WhatsApp · رد بـ Dealix قبل 12 دقيقة</div>
|
|
<div><span class="stage stage-meeting_booked">معاينة محجوزة</span></div>
|
|
<div class="priority priority-P0">P0</div>
|
|
<div><a href="#" style="color:var(--brand);font-weight:600;text-decoration:none;font-size:13px">اعتمد →</a></div>
|
|
</div>
|
|
|
|
<div class="lead-row">
|
|
<div>
|
|
<div class="name">شركة الإعمار للمشاريع</div>
|
|
<div class="meta">RFQ مجمع سكني 80 وحدة · إيميل + WhatsApp</div>
|
|
</div>
|
|
<div class="channel">📧 Email · رد بـ Dealix قبل 28 دقيقة</div>
|
|
<div><span class="stage stage-qualified">مؤهّل</span></div>
|
|
<div class="priority priority-P0">P0</div>
|
|
<div><a href="#" style="color:var(--brand);font-weight:600;text-decoration:none;font-size:13px">اعتمد →</a></div>
|
|
</div>
|
|
|
|
<div class="lead-row">
|
|
<div>
|
|
<div class="name">منى السبيعي</div>
|
|
<div class="meta">فيلا حي العقيق · ميزانية مفتوحة · جاهزة معاينة هذا الأسبوع</div>
|
|
</div>
|
|
<div class="channel">🌐 Website Form · رد قبل 4 دقائق</div>
|
|
<div><span class="stage stage-pilot_active">في المتابعة</span></div>
|
|
<div class="priority priority-P1">P1</div>
|
|
<div><a href="#" style="color:var(--brand);font-weight:600;text-decoration:none;font-size:13px">اعتمد →</a></div>
|
|
</div>
|
|
|
|
<div class="lead-row">
|
|
<div>
|
|
<div class="name">خالد العتيبي</div>
|
|
<div class="meta">يطلب عرض سعر · 3 وحدات · شركة استثمار</div>
|
|
</div>
|
|
<div class="channel">📱 WhatsApp · يفاوض بنشاط</div>
|
|
<div><span class="stage stage-negotiating">تفاوض</span></div>
|
|
<div class="priority priority-P0">P0</div>
|
|
<div><a href="#" style="color:var(--brand);font-weight:600;text-decoration:none;font-size:13px">اعتمد →</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Stream -->
|
|
<div class="panel">
|
|
<h2>⚡ نشاط Dealix اليوم</h2>
|
|
<div class="activity-item">
|
|
<div class="time">قبل 4 دقائق</div>
|
|
<div class="desc">📱 رد بالعربي على lead عبر WhatsApp · قطاع: real_estate · تم تأهيله بنجاح</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="time">قبل 12 دقيقة</div>
|
|
<div class="desc">📅 حجز معاينة في تقويم Calendly مع <strong>عبدالله الزهراني</strong> · الجمعة 10 ص</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="time">قبل 28 دقيقة</div>
|
|
<div class="desc">📧 صنّف رد إيميل من <strong>شركة الإعمار</strong> = ask_demo · أقترح Calendly link</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="time">قبل 47 دقيقة</div>
|
|
<div class="desc">🛡️ Dealix منع رد على رقم في suppression list (طلب إيقاف سابق) · تلقائياً</div>
|
|
</div>
|
|
<div class="activity-item">
|
|
<div class="time">قبل ساعتين</div>
|
|
<div class="desc">📊 تقرير يومي تم إنشاؤه + تصدير CSV · جاهز للإيميل</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compliance Status -->
|
|
<div class="panel">
|
|
<h2>🛡️ حالة Compliance — جاهز لـ PDPL + ZATCA</h2>
|
|
<div class="compliance-grid">
|
|
<div class="compliance-card">
|
|
<span class="check">✓</span><span class="label">PDPL aligned</span>
|
|
<div class="desc">opt_out + suppression محفوظة</div>
|
|
</div>
|
|
<div class="compliance-card">
|
|
<span class="check">✓</span><span class="label">RFC 8058 List-Unsubscribe</span>
|
|
<div class="desc">على كل إيميل خارج</div>
|
|
</div>
|
|
<div class="compliance-card">
|
|
<span class="check">✓</span><span class="label">Saudi data residency</span>
|
|
<div class="desc">PostgreSQL في الرياض</div>
|
|
</div>
|
|
<div class="compliance-card">
|
|
<span class="check">✓</span><span class="label">Audit log</span>
|
|
<div class="desc">كل send/draft/reply مسجّل</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subscription Upsell -->
|
|
<div class="upgrade-cta">
|
|
<div>
|
|
<h3>أنتم في خطة Growth — استخدمتم 1,247 من 2,500 lead هذا الشهر</h3>
|
|
<p>متبقي 12 يوم على نهاية الدورة. الترقية لـ Scale تفتح API + SLA + Account manager.</p>
|
|
</div>
|
|
<a class="btn" href="/pricing.html">قارن Scale 7,999/شهر →</a>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|