1021 lines
44 KiB
HTML
1021 lines
44 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>خطة عمل وتطوير تطبيق نبيه | Nabeh Roadmap</title>
|
|
<!-- Google Fonts: Cairo & Inter -->
|
|
<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=Cairo:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--bg-main: #060913;
|
|
--bg-grid: #0b1120;
|
|
--bg-card: rgba(15, 23, 42, 0.65);
|
|
--bg-card-hover: rgba(30, 41, 59, 0.8);
|
|
--border-color: rgba(255, 255, 255, 0.08);
|
|
--border-hover: rgba(0, 242, 254, 0.35);
|
|
|
|
--primary: #00f2fe;
|
|
--primary-rgb: 0, 242, 254;
|
|
--secondary: #4facfe;
|
|
--accent: #6366f1;
|
|
--accent-rgb: 99, 102, 241;
|
|
|
|
--text-main: #f8fafc;
|
|
--text-muted: #94a3b8;
|
|
--text-dark: #64748b;
|
|
|
|
--success: #10b981;
|
|
--success-rgb: 16, 185, 129;
|
|
--warning: #f59e0b;
|
|
--danger: #ef4444;
|
|
|
|
--font-ar: 'Cairo', sans-serif;
|
|
--font-en: 'Inter', sans-serif;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-main);
|
|
background-image:
|
|
radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
|
|
radial-gradient(circle at 90% 80%, rgba(0, 242, 254, 0.08) 0%, transparent 40%),
|
|
linear-gradient(rgba(11, 17, 32, 0.5) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(11, 17, 32, 0.5) 1px, transparent 1px);
|
|
background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
|
|
color: var(--text-main);
|
|
font-family: var(--font-ar);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
padding-bottom: 80px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* English elements fallback font */
|
|
.en-font, code, pre {
|
|
font-family: var(--font-en);
|
|
direction: ltr;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Container & Grid layout */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
/* Header design */
|
|
header {
|
|
padding: 60px 0 40px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.logo-container {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
|
|
animation: pulse-glow 3s infinite alternate;
|
|
}
|
|
|
|
.logo-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
fill: white;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.8rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(to left, var(--text-main), var(--primary));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
letter-spacing: -0.5px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Main Project Goal Card */
|
|
.goal-section {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.glass-card {
|
|
background: var(--bg-card);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 20px;
|
|
padding: 32px;
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
|
|
transition: all 0.4s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.glass-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(to right, var(--primary), var(--accent));
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.glass-card:hover {
|
|
border-color: var(--border-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 40px 0 rgba(0, 242, 254, 0.1);
|
|
}
|
|
|
|
.goal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.goal-badge {
|
|
background: rgba(0, 242, 254, 0.1);
|
|
color: var(--primary);
|
|
padding: 6px 12px;
|
|
border-radius: 30px;
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
border: 1px solid rgba(0, 242, 254, 0.2);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.goal-title {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.goal-description {
|
|
color: var(--text-muted);
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Highlights Grid */
|
|
.highlights-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.highlight-item {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
display: flex;
|
|
gap: 16px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.highlight-item:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-color: rgba(99, 102, 241, 0.3);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.highlight-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
background: rgba(99, 102, 241, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
color: var(--accent);
|
|
border: 1px solid rgba(99, 102, 241, 0.2);
|
|
}
|
|
|
|
.highlight-icon svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.highlight-text h4 {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
margin-bottom: 6px;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.highlight-text p {
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Tabs Filter Styles */
|
|
.tabs-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-bottom: 35px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab-btn {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-muted);
|
|
padding: 10px 20px;
|
|
border-radius: 30px;
|
|
cursor: pointer;
|
|
font-family: var(--font-ar);
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.tab-btn.active {
|
|
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
|
color: var(--bg-main);
|
|
border-color: transparent;
|
|
font-weight: 700;
|
|
box-shadow: 0 4px 20px rgba(0, 242, 254, 0.25);
|
|
}
|
|
|
|
/* Roadmap Timeline */
|
|
.roadmap-timeline {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.roadmap-timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 30px;
|
|
width: 2px;
|
|
background: linear-gradient(to bottom, var(--primary), var(--accent), var(--border-color));
|
|
z-index: 1;
|
|
}
|
|
|
|
.roadmap-stage {
|
|
position: relative;
|
|
padding-right: 70px;
|
|
z-index: 2;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.stage-badge-node {
|
|
position: absolute;
|
|
right: 17px;
|
|
top: 25px;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: var(--bg-main);
|
|
border: 3px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 3;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.roadmap-stage.completed .stage-badge-node {
|
|
border-color: var(--success);
|
|
background: var(--success);
|
|
box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.roadmap-stage.completed .stage-badge-node::after {
|
|
content: '✓';
|
|
color: white;
|
|
font-weight: 800;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.roadmap-stage.current .stage-badge-node {
|
|
border-color: var(--primary);
|
|
background: var(--bg-main);
|
|
box-shadow: 0 0 15px rgba(0, 242, 254, 0.8);
|
|
animation: pulse-node 2s infinite;
|
|
}
|
|
|
|
.roadmap-stage.current .stage-badge-node::after {
|
|
content: '';
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
}
|
|
|
|
.roadmap-stage.pending .stage-badge-node::after {
|
|
content: '';
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--text-dark);
|
|
}
|
|
|
|
/* Stage Card */
|
|
.stage-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 16px;
|
|
padding: 24px 30px;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.roadmap-stage:hover .stage-card {
|
|
border-color: var(--border-hover);
|
|
background: var(--bg-card-hover);
|
|
transform: scale(1.005) translateY(-2px);
|
|
box-shadow: 0 8px 30px rgba(0, 242, 254, 0.05);
|
|
}
|
|
|
|
.stage-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.stage-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.stage-number {
|
|
font-weight: 800;
|
|
color: var(--primary);
|
|
font-size: 1.1rem;
|
|
background: rgba(0, 242, 254, 0.08);
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(0, 242, 254, 0.15);
|
|
}
|
|
|
|
.stage-title {
|
|
font-size: 1.35rem;
|
|
font-weight: 700;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.status-pill {
|
|
padding: 5px 12px;
|
|
border-radius: 30px;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.status-pill.completed {
|
|
background: rgba(16, 185, 129, 0.12);
|
|
color: var(--success);
|
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
.status-pill.current {
|
|
background: rgba(0, 242, 254, 0.12);
|
|
color: var(--primary);
|
|
border: 1px solid rgba(0, 242, 254, 0.2);
|
|
}
|
|
|
|
.status-pill.pending {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stage-body {
|
|
color: var(--text-muted);
|
|
font-size: 0.95rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.task-list {
|
|
list-style: none;
|
|
margin-top: 15px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 10px 20px;
|
|
}
|
|
|
|
.task-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.015);
|
|
border: 1px solid rgba(255, 255, 255, 0.02);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.roadmap-stage.completed .task-item {
|
|
border-color: rgba(16, 185, 129, 0.08);
|
|
background: rgba(16, 185, 129, 0.01);
|
|
}
|
|
|
|
.task-item:hover {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-color: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.task-checkbox {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
border: 2px solid var(--text-dark);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.task-item.done .task-checkbox {
|
|
border-color: var(--success);
|
|
background: var(--success);
|
|
}
|
|
|
|
.task-item.done .task-checkbox::after {
|
|
content: '✓';
|
|
color: white;
|
|
font-size: 0.7rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.task-item.doing .task-checkbox {
|
|
border-color: var(--primary);
|
|
animation: pulse-border 1.5s infinite;
|
|
}
|
|
|
|
.task-item.doing .task-checkbox::after {
|
|
content: '';
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
}
|
|
|
|
.task-desc {
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.task-item.done .task-desc {
|
|
text-decoration: line-through;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.task-item.doing .task-desc {
|
|
color: var(--text-main);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Tech Badges */
|
|
.tech-tags {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tech-tag {
|
|
font-size: 0.75rem;
|
|
font-family: var(--font-en);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-muted);
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse-glow {
|
|
0% {
|
|
box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 30px rgba(0, 242, 254, 0.6);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-node {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.6);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 10px rgba(0, 242, 254, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(0, 242, 254, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-border {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.4);
|
|
border-color: var(--primary);
|
|
}
|
|
50% {
|
|
border-color: var(--secondary);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 6px rgba(0, 242, 254, 0);
|
|
border-color: var(--primary);
|
|
}
|
|
}
|
|
|
|
/* Footer styling */
|
|
footer {
|
|
margin-top: 60px;
|
|
text-align: center;
|
|
color: var(--text-dark);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
footer p {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* Responsive adaptation */
|
|
@media (max-width: 768px) {
|
|
h1 {
|
|
font-size: 2.1rem;
|
|
}
|
|
.roadmap-timeline::before {
|
|
right: 20px;
|
|
}
|
|
.roadmap-stage {
|
|
padding-right: 50px;
|
|
}
|
|
.stage-badge-node {
|
|
right: 7px;
|
|
}
|
|
.task-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="logo-container">
|
|
<div class="logo-icon">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12c0 1.54.36 3.04 1.04 4.39L1.02 22.81c-.18.53.28 1.05.81.87l6.57-2.18c1.19.46 2.47.66 3.6.5 5.52-.77 9.5-5.69 9-11.23C20.5 5.23 16.77 2.25 12 2zm1 14h-2v-2h2v2zm0-4h-2V7h2v5z"/>
|
|
</svg>
|
|
</div>
|
|
<span style="font-size: 1.8rem; font-weight: 800; color: var(--text-main);">نبيه</span>
|
|
</div>
|
|
<h1>خطة عمل وتطوير تطبيق نبيه (Nabeh)</h1>
|
|
<p class="subtitle">الملخص الهيكلي ومراحل التطوير للوصول إلى نظام تشغيل متكامل لخدمة المتاجر.</p>
|
|
</header>
|
|
|
|
<!-- Project Goal Section -->
|
|
<div class="goal-section">
|
|
<div class="glass-card">
|
|
<div class="goal-header">
|
|
<span class="goal-badge">الهدف الرئيسي للمشروع</span>
|
|
<h2 class="goal-title">حل مشاكل التواصل والتسويق للمتاجر الإلكترونية</h2>
|
|
</div>
|
|
<p class="goal-description">
|
|
يهدف تطبيق <strong>نبيه (Nabeh)</strong> إلى بناء نظام خلفي متكامل، آمن، ومتعدد المستأجرين (<span class="en-font">Multi-Tenant SaaS</span>)، يندمج بسلاسة مع بوابة <span class="en-font">WhatsApp</span> المبنية على مكتبة <span class="en-font">Baileys (Node.js)</span>. يُمكن المشروع أصحاب المتاجر الإلكترونية والشركات من إرسال حملات إعلانية وتوعوية جماعية، إدارة قائمة عملائهم وسجلات محادثاتهم، وتهيئة ردود تلقائية ذكية عبر الذكاء الاصطناعي (<span class="en-font">Gemini AI</span>) أو الكلمات المفتاحية، مع توفير أقصى درجات الحماية وتشفير البيانات وعزل بيانات كل شركة عن الأخرى بشكل قطعي.
|
|
</p>
|
|
|
|
<!-- High-level architectural points discussed -->
|
|
<h3 style="font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; color: var(--primary);">الركائز الأمنية والهيكلية التي تم تأسيسها وبحثها:</h3>
|
|
<div class="highlights-grid">
|
|
|
|
<div class="highlight-item">
|
|
<div class="highlight-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
|
|
</div>
|
|
<div class="highlight-text">
|
|
<h4>تشفير البيانات الحساسة</h4>
|
|
<p>تشفير الهواتف والبريد الإلكتروني والرسائل بـ <span class="en-font">AES-256-GCM</span> لضمان سريتها التامة في قاعدة البيانات.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-item">
|
|
<div class="highlight-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
|
</div>
|
|
<div class="highlight-text">
|
|
<h4>الفهرسة العمياء (Blind Index)</h4>
|
|
<p>توليد قيم هاش غير قابلة للعكس بـ <span class="en-font">HMAC-SHA256</span> للبحث السريع في البيانات المشفرة دون الحاجة لفك التشفير.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-item">
|
|
<div class="highlight-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
|
|
</div>
|
|
<div class="highlight-text">
|
|
<h4>أمان المدخلات والمخرجات</h4>
|
|
<p>تنظيف المدخلات ديناميكياً وعزل أخطاء الخادم لتجنب ثغرات <span class="en-font">SQL Injection</span> و <span class="en-font">Info Disclosure</span>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-item">
|
|
<div class="highlight-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z"/></svg>
|
|
</div>
|
|
<div class="highlight-text">
|
|
<h4>تعدد المستأجرين المعزول</h4>
|
|
<p>ربط قطعي لكافة الموارد بمعرّف الشركة <span class="en-font">company_id</span> مع التحقق في الـ <span class="en-font">Middleware</span> لمنع تسريب الموارد (<span class="en-font">IDOR</span>).</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stages Filter Tabs -->
|
|
<div class="tabs-container">
|
|
<button class="tab-btn active" onclick="filterStages('all')">جميع المراحل</button>
|
|
<button class="tab-btn" onclick="filterStages('completed')">المكتملة</button>
|
|
<button class="tab-btn" onclick="filterStages('current')">قيد العمل (الحالية)</button>
|
|
<button class="tab-btn" onclick="filterStages('pending')">المستقبلية</button>
|
|
</div>
|
|
|
|
<!-- Roadmap Timeline -->
|
|
<div class="roadmap-timeline">
|
|
|
|
<!-- Stage 1 -->
|
|
<div class="roadmap-stage completed" data-status="completed">
|
|
<div class="stage-badge-node"></div>
|
|
<div class="stage-card">
|
|
<div class="stage-header">
|
|
<div class="stage-meta">
|
|
<span class="stage-number">المرحلة 1</span>
|
|
<h3 class="stage-title">تأسيس النواة البرمجية والهيكل MVC</h3>
|
|
</div>
|
|
<span class="status-pill completed">مكتملة ✓</span>
|
|
</div>
|
|
<div class="stage-body">
|
|
<p>بناء الهيكل البرمجي الأساسي للتطبيق وعزل مجلدات الكود الحساسة وتفعيل موجه المسارات والتحميل التلقائي.</p>
|
|
<ul class="task-list">
|
|
<li class="task-item done">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">هيكلة مجلدات المشروع وعزل الملفات العامة في <span class="en-font">public/</span></span>
|
|
</li>
|
|
<li class="task-item done">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">بناء موجه طلبات خفيف ومرن <span class="en-font">Router</span> متوافق مع خادم <span class="en-font">Nginx</span></span>
|
|
</li>
|
|
<li class="task-item done">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">إعداد قارئ ملفات البيئة <span class="en-font">.env</span> الآمن وتفعيل التحميل التلقائي <span class="en-font">PSR-4</span></span>
|
|
</li>
|
|
<li class="task-item done">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">إنشاء الموديل الرئيسي <span class="en-font">BaseModel</span> والمتحكم العام <span class="en-font">BaseController</span></span>
|
|
</li>
|
|
</ul>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">Pure PHP OOP</span>
|
|
<span class="tech-tag">PSR-4 Autoload</span>
|
|
<span class="tech-tag">PDO / MySQL</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 2 -->
|
|
<div class="roadmap-stage completed" data-status="completed">
|
|
<div class="stage-badge-node"></div>
|
|
<div class="stage-card">
|
|
<div class="stage-header">
|
|
<div class="stage-meta">
|
|
<span class="stage-number">المرحلة 2</span>
|
|
<h3 class="stage-title">المصادقة الأمنية وتدقيق الحماية والتعديلات</h3>
|
|
</div>
|
|
<span class="status-pill completed">مكتملة ✓</span>
|
|
</div>
|
|
<div class="stage-body">
|
|
<p>تفعيل بروتوكول الحماية الصارم على مدخلات ومخرجات الخلفية، بناء نظام التوثيق بالـ JWT، وتطبيق حلول معالجة الثغرات والـ Rate Limiter.</p>
|
|
<ul class="task-list">
|
|
<li class="task-item done">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">تشفير وحماية البيانات الحساسة عبر دوال التشفير الثنائي والـ <span class="en-font">Blind Index</span></span>
|
|
</li>
|
|
<li class="task-item done">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">برمجة وسيط الحماية للحد من الطلبات العشوائية <span class="en-font">RateLimitMiddleware</span> لعمليات الدخول</span>
|
|
</li>
|
|
<li class="task-item done">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">تطبيق التحقق من الهوية <span class="en-font">JWT Authentication</span> وسحب بيانات الجلسة الحالية</span>
|
|
</li>
|
|
<li class="task-item done">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">معالجة ثغرات حماية المجلدات والـ <span class="en-font">CORS Origin</span> والأخطاء البرمجية الهيكلية</span>
|
|
</li>
|
|
</ul>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">JWT Token</span>
|
|
<span class="tech-tag">AES-256-GCM</span>
|
|
<span class="tech-tag">HMAC-SHA256</span>
|
|
<span class="tech-tag">Rate Limiting</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 3 -->
|
|
<div class="roadmap-stage current" data-status="current">
|
|
<div class="stage-badge-node"></div>
|
|
<div class="stage-card">
|
|
<div class="stage-header">
|
|
<div class="stage-meta">
|
|
<span class="stage-number">المرحلة 3</span>
|
|
<h3 class="stage-title">بوابة واتساب والربط بخدمة Baileys</h3>
|
|
</div>
|
|
<span class="status-pill current">قيد العمل الحالية ⚡</span>
|
|
</div>
|
|
<div class="stage-body">
|
|
<p>الربط البرمجي بخدمة بوابة الواتساب الجارية على البورت <span class="en-font">3722</span>. إرسال واستقبال الطلبات لجلب رموز الـ QR والتحقق من حالة الاتصال وتخزين الجلسات.</p>
|
|
<ul class="task-list">
|
|
<li class="task-item doing">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">برمجة <span class="en-font">WhatsAppController</span> للتحكم بالجلسات عبر بوابة <span class="en-font">Baileys API</span></span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">بناء مسارات جلب رمز الاستجابة السريع <span class="en-font">GET /api/whatsapp/qr</span> وتحديث الجلسات</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">برمجة آلية استهلاك خطافات الويب <span class="en-font">Webhooks</span> لمزامنة حالة الاتصال الفوري والرسائل الواردة</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">التحقق الهيكلي من تداخل الجلسات وعزلها التام لكل شركة برمجياً</span>
|
|
</li>
|
|
</ul>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">Baileys Gateway</span>
|
|
<span class="tech-tag">Curl Handler</span>
|
|
<span class="tech-tag">Webhooks Listener</span>
|
|
<span class="tech-tag">Port 3722</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 4 -->
|
|
<div class="roadmap-stage pending" data-status="pending">
|
|
<div class="stage-badge-node"></div>
|
|
<div class="stage-card">
|
|
<div class="stage-header">
|
|
<div class="stage-meta">
|
|
<span class="stage-number">المرحلة 4</span>
|
|
<h3 class="stage-title">إدارة جهات الاتصال والمجموعات (Multi-Tenant Contacts)</h3>
|
|
</div>
|
|
<span class="status-pill pending">مخطط لها ⏱</span>
|
|
</div>
|
|
<div class="stage-body">
|
|
<p>تطوير نظام شامل لإدارة جهات اتصال المتاجر وتصنيفهم ضمن مجموعات وقوائم إرسال محددة مع تشفير الهواتف بالكامل وحظر تسريبها.</p>
|
|
<ul class="task-list">
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">برمجة مسارات الإضافة والتعديل والبحث لجهات الاتصال المشفرة</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">بناء نظام المجموعات وتصنيف جهات الاتصال ديناميكياً</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">تنفيذ فلتر فريد يمنع تكرار الهواتف للعملاء على مستوى الشركة الواحدة فقط</span>
|
|
</li>
|
|
</ul>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">CRM CRUD</span>
|
|
<span class="tech-tag">Pivot Relations</span>
|
|
<span class="tech-tag">Database Isolation</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 5 -->
|
|
<div class="roadmap-stage pending" data-status="pending">
|
|
<div class="stage-badge-node"></div>
|
|
<div class="stage-card">
|
|
<div class="stage-header">
|
|
<div class="stage-meta">
|
|
<span class="stage-number">المرحلة 5</span>
|
|
<h3 class="stage-title">نظام المراسلة والقوالب الجاهزة (Campaigns & Templates)</h3>
|
|
</div>
|
|
<span class="status-pill pending">مخطط لها ⏱</span>
|
|
</div>
|
|
<div class="stage-body">
|
|
<p>بناء نظام إعداد قوالب الرسائل الجاهزة (نصوص وصور ومستندات) وإطلاق الحملات الجماعية المجدولة للعملاء.</p>
|
|
<ul class="task-list">
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">تطوير مستودع القوالب الجاهزة ودعم المتغيرات مثل <span class="en-font">{{name}}</span></span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">بناء طابور معالجة الحملات وتوليد عمليات الإرسال الآمنة بفوارق زمنية لتجنب الحظر</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">تسجيل وتأكيد حالات الرسائل (مرسلة، مستلمة، مقروءة) في جدول <span class="en-font">messages_log</span></span>
|
|
</li>
|
|
</ul>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">Campaign Dispatcher</span>
|
|
<span class="tech-tag">Anti-Ban Intervals</span>
|
|
<span class="tech-tag">Variables Replace</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 6 -->
|
|
<div class="roadmap-stage pending" data-status="pending">
|
|
<div class="stage-badge-node"></div>
|
|
<div class="stage-card">
|
|
<div class="stage-header">
|
|
<div class="stage-meta">
|
|
<span class="stage-number">المرحلة 6</span>
|
|
<h3 class="stage-title">روبوت الرد التلقائي والمساعد الذكي (AI Auto-Responder)</h3>
|
|
</div>
|
|
<span class="status-pill pending">مخطط لها ⏱</span>
|
|
</div>
|
|
<div class="stage-body">
|
|
<p>بناء عقل روبوت الرد التلقائي للتفاعل الفوري مع رسائل العملاء بناء على الكلمات الدلالية أو التوليد الذكي عبر الذكاء الاصطناعي.</p>
|
|
<ul class="task-list">
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">تهيئة جداول قواعد الردود بالكلمات المفتاحية والدقيقة</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">الدمج البرمجي مع مكتبة <span class="en-font">Gemini AI API</span> لصياغة ردود ذكية مخصصة لبيانات المتجر</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">توفير خاصية تعطيل وتفعيل البوت التلقائي فوراً لكل جلسة واتساب</span>
|
|
</li>
|
|
</ul>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">Gemini API</span>
|
|
<span class="tech-tag">LLM Prompting</span>
|
|
<span class="tech-tag">Pattern Matcher</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage 7 -->
|
|
<div class="roadmap-stage pending" data-status="pending">
|
|
<div class="stage-badge-node"></div>
|
|
<div class="stage-card">
|
|
<div class="stage-header">
|
|
<div class="stage-meta">
|
|
<span class="stage-number">المرحلة 7</span>
|
|
<h3 class="stage-title">الربط الخارجي ومزامنة المتاجر (Integrations & Sync)</h3>
|
|
</div>
|
|
<span class="status-pill pending">مخطط لها ⏱</span>
|
|
</div>
|
|
<div class="stage-body">
|
|
<p>فتح المنصة لاستقبال البيانات التلقائية للمشترين من المنصات الخارجية مثل سلة، شوبيفاي، ووكمرس وإرسال تنبيهات السلات المتروكة.</p>
|
|
<ul class="task-list">
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">توليد مفاتيح ربط المطورين وتوثيق المتاجر بالـ <span class="en-font">API Key</span> الخاص بكل مستأجر</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">بناء مسار استقبال الفواتير والطلبات الجارية لمزامنة العملاء تلقائياً</span>
|
|
</li>
|
|
<li class="task-item">
|
|
<div class="task-checkbox"></div>
|
|
<span class="task-desc">برمجة حملات السلات المتروكة الآلية وتنبيهات حالات الشحن والتوصيل</span>
|
|
</li>
|
|
</ul>
|
|
<div class="tech-tags">
|
|
<span class="tech-tag">Merchant API Keys</span>
|
|
<span class="tech-tag">Webhook Handlers</span>
|
|
<span class="tech-tag">Salla/Shopify Sync</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<p>تطبيق نبيه - جميع الحقوق محفوظة لشركة انطلق © 2026</p>
|
|
<p style="font-size: 0.8rem; color: var(--text-dark);">تم تصميم وتوثيق الخطة البرمجية بواسطة مطور الذكاء الاصطناعي Antigravity</p>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<!-- Interactive script to filter phases -->
|
|
<script>
|
|
function filterStages(status) {
|
|
// Update active class on tab buttons
|
|
const buttons = document.querySelectorAll('.tab-btn');
|
|
buttons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
// Add active class to clicked button
|
|
const activeBtn = Array.from(buttons).find(btn => {
|
|
if (status === 'all') return btn.innerText.includes('جميع');
|
|
if (status === 'completed') return btn.innerText.includes('المكتملة');
|
|
if (status === 'current') return btn.innerText.includes('قيد');
|
|
if (status === 'pending') return btn.innerText.includes('المستقبلية');
|
|
return false;
|
|
});
|
|
if (activeBtn) activeBtn.classList.add('active');
|
|
|
|
// Filter the stages
|
|
const stages = document.querySelectorAll('.roadmap-stage');
|
|
stages.forEach(stage => {
|
|
const stageStatus = stage.getAttribute('data-status');
|
|
if (status === 'all') {
|
|
stage.style.display = 'block';
|
|
} else if (stageStatus === status) {
|
|
stage.style.display = 'block';
|
|
} else {
|
|
stage.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Adjust vertical timeline line gradient dynamically if some items are hidden
|
|
const timeline = document.querySelector('.roadmap-timeline');
|
|
const visibleStages = Array.from(stages).filter(s => s.style.display !== 'none');
|
|
|
|
if (visibleStages.length === 1) {
|
|
// If only one stage is visible, hide the line background to keep it clean
|
|
timeline.style.setProperty('--timeline-line-display', 'none');
|
|
} else {
|
|
timeline.style.setProperty('--timeline-line-display', 'block');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|