Files
xSaherelmWorkspace/Documents/Resources/Tools/Document/xKanban_Case_Study.html
T
2026-09-12 23:04:57 +03:30

1525 lines
60 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xKanban | مستند جامع معرفی محصول و معماری فنی</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
:root {
--primary: #1a365d;
--primary-light: #2c5282;
--accent: #c9a961;
--accent-dark: #a8893f;
--bg: #faf9f6;
--card-bg: #ffffff;
--text: #1a202c;
--text-muted: #4a5568;
--border: #e2e8f0;
--success: #38a169;
--danger: #e53e3e;
--warning: #dd6b20;
--shadow: 0 4px 6px rgba(0,0,0,0.05), 0 10px 30px rgba(26,54,93,0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Vazirmatn', Tahoma, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.9;
font-size: 15px;
padding: 30px 15px;
}
.document-container {
max-width: 950px;
margin: 0 auto;
background: var(--card-bg);
box-shadow: var(--shadow);
border-radius: 12px;
overflow: hidden;
}
.document-header {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: white;
padding: 50px 40px 40px;
position: relative;
border-bottom: 4px solid var(--accent);
}
.document-header::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(201,169,97,0.15) 0%, transparent 70%);
border-radius: 50%;
transform: translate(50%, -50%);
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
position: relative;
z-index: 1;
}
.company-badge {
display: flex;
align-items: center;
gap: 12px;
}
.company-logo {
width: 60px; height: 60px;
background: var(--accent);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.doc-meta {
text-align: left;
font-size: 12px;
opacity: 0.9;
}
.doc-meta div { margin-bottom: 3px; }
.document-title {
text-align: center;
position: relative;
z-index: 1;
padding: 20px 0;
}
.document-title .label {
display: inline-block;
background: rgba(201,169,97,0.2);
color: var(--accent);
padding: 4px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
border: 1px solid rgba(201,169,97,0.4);
}
.document-title h1 {
font-size: 28px;
font-weight: 800;
margin-bottom: 10px;
letter-spacing: -0.5px;
}
.document-title h2 {
font-size: 16px;
font-weight: 400;
opacity: 0.9;
}
.document-body {
padding: 40px;
}
.intro-text {
background: linear-gradient(to left, #f7fafc, #edf2f7);
border-right: 4px solid var(--accent);
padding: 20px 25px;
border-radius: 8px;
margin-bottom: 35px;
font-size: 14px;
color: var(--text-muted);
}
.section {
margin-bottom: 40px;
page-break-inside: avoid;
}
.section-header {
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border);
margin-bottom: 20px;
}
.section-number {
width: 50px; height: 50px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 20px;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(26,54,93,0.2);
}
.section-title { flex: 1; }
.section-title h3 {
font-size: 19px;
font-weight: 700;
color: var(--primary);
margin-bottom: 2px;
}
.section-title .subtitle {
font-size: 12px;
color: var(--text-muted);
}
.section-content {
padding-right: 10px;
}
.section-content p {
margin-bottom: 12px;
text-align: justify;
text-indent: 20px;
}
.section-content p.no-indent { text-indent: 0; }
.highlight-box {
background: linear-gradient(to left, #fffaf0, #fef5e7);
border: 1px solid #f6e05e;
border-right: 4px solid var(--accent);
padding: 18px 22px;
border-radius: 8px;
margin: 20px 0;
font-size: 14px;
}
.highlight-box strong { color: var(--accent-dark); }
.info-box {
background: linear-gradient(to left, #ebf8ff, #e6f6ff);
border: 1px solid #90cdf4;
border-right: 4px solid var(--primary-light);
padding: 18px 22px;
border-radius: 8px;
margin: 20px 0;
font-size: 14px;
}
.success-box {
background: linear-gradient(to left, #f0fff4, #e6fffa);
border: 1px solid #9ae6b4;
border-right: 4px solid var(--success);
padding: 18px 22px;
border-radius: 8px;
margin: 20px 0;
font-size: 14px;
}
.warning-box {
background: linear-gradient(to left, #fffaf0, #fef5e7);
border: 1px solid #fbd38d;
border-right: 4px solid var(--warning);
padding: 18px 22px;
border-radius: 8px;
margin: 20px 0;
font-size: 14px;
}
.code-box {
background: #1a202c;
color: #e2e8f0;
border-right: 4px solid var(--accent);
padding: 18px 22px;
border-radius: 8px;
margin: 20px 0;
font-size: 13px;
font-family: 'Consolas', 'Courier New', monospace;
direction: ltr;
text-align: left;
overflow-x: auto;
line-height: 1.7;
}
.code-box .key { color: #c9a961; }
.code-box .str { color: #68d391; }
.code-box .num { color: #63b3ed; }
.code-box .comment { color: #718096; font-style: italic; }
.code-box .fn { color: #f6ad55; }
.code-box .kw { color: #fc8181; }
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.styled-table thead {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
}
.styled-table th {
padding: 14px 16px;
text-align: right;
font-weight: 600;
font-size: 13px;
}
.styled-table td {
padding: 13px 16px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.styled-table tbody tr:last-child td { border-bottom: none; }
.styled-table tbody tr:nth-child(even) { background: #f8fafc; }
.styled-table .highlight-row {
background: #fffaf0 !important;
font-weight: 600;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 25px 0;
}
.comparison-card {
background: #f8fafc;
border: 2px solid var(--border);
border-radius: 10px;
padding: 20px;
position: relative;
}
.comparison-card.recommended {
border-color: var(--success);
background: linear-gradient(to left, #f0fff4, #e6fffa);
}
.comparison-card .card-badge {
position: absolute;
top: -10px;
right: 20px;
background: var(--success);
color: white;
padding: 3px 12px;
border-radius: 15px;
font-size: 11px;
font-weight: 600;
}
.comparison-card h4 {
font-size: 16px;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(--border);
}
.comparison-card.recommended h4 { border-bottom-color: var(--success); }
.comparison-card ul { list-style: none; padding: 0; }
.comparison-card ul li {
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
display: flex;
justify-content: space-between;
}
.comparison-card ul li:last-child { border-bottom: none; }
.comparison-card ul li .value { font-weight: 600; color: var(--primary); }
.quote-box {
background: linear-gradient(135deg, #f7fafc, #edf2f7);
border-right: 4px solid var(--accent);
padding: 20px 25px;
border-radius: 8px;
margin: 20px 0;
position: relative;
}
.quote-box::before {
content: '"';
position: absolute;
top: -10px;
right: 15px;
font-size: 60px;
color: var(--accent);
opacity: 0.3;
font-family: Georgia, serif;
}
.quote-box p {
font-style: italic;
color: var(--text-muted);
margin-bottom: 10px;
text-indent: 0 !important;
}
.quote-box .source {
font-size: 12px;
color: var(--text-muted);
text-align: left;
font-style: normal;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 25px 0;
}
.stat-card {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 12px rgba(26,54,93,0.2);
}
.stat-card .stat-value {
font-size: 24px;
font-weight: 800;
margin-bottom: 5px;
color: var(--accent);
line-height: 1.3;
}
.stat-card .stat-label { font-size: 12px; opacity: 0.9; }
.feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 25px 0;
}
.feature-card {
background: #f8fafc;
border: 1px solid var(--border);
border-right: 4px solid var(--primary-light);
padding: 18px;
border-radius: 8px;
}
.feature-card .feature-icon { font-size: 24px; margin-bottom: 10px; }
.feature-card h5 {
font-size: 15px;
font-weight: 700;
color: var(--primary);
margin-bottom: 8px;
}
.feature-card p {
font-size: 13px;
color: var(--text-muted);
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.architecture-diagram {
background: linear-gradient(to left, #f7fafc, #edf2f7);
border: 2px solid var(--border);
border-radius: 10px;
padding: 25px;
margin: 25px 0;
text-align: center;
}
.arch-layer {
background: white;
border: 2px solid var(--primary-light);
border-radius: 8px;
padding: 15px;
margin: 10px auto;
max-width: 750px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.arch-layer-title {
font-weight: 700;
color: var(--primary);
margin-bottom: 10px;
font-size: 14px;
border-bottom: 2px solid var(--accent);
padding-bottom: 5px;
display: inline-block;
}
.arch-components {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.arch-chip {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
padding: 6px 14px;
border-radius: 15px;
font-size: 12px;
font-weight: 500;
}
.arch-chip.gold {
background: linear-gradient(135deg, var(--accent-dark), var(--accent));
color: #1a202c;
}
.arch-arrow {
text-align: center;
font-size: 24px;
color: var(--accent);
margin: 5px 0;
}
.conclusion-box {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
padding: 30px;
border-radius: 12px;
margin: 30px 0;
text-align: center;
box-shadow: 0 8px 20px rgba(26,54,93,0.3);
}
.conclusion-box h3 {
font-size: 22px;
font-weight: 800;
margin-bottom: 15px;
color: var(--accent);
}
.conclusion-box p {
font-size: 14px;
line-height: 1.8;
text-indent: 0 !important;
margin-bottom: 15px;
}
.conclusion-box .highlight {
background: rgba(201,169,97,0.2);
padding: 15px 20px;
border-radius: 8px;
margin-top: 20px;
border: 1px solid rgba(201,169,97,0.4);
}
.document-footer {
background: var(--primary);
color: white;
padding: 25px 40px;
text-align: center;
font-size: 12px;
margin-top: 40px;
}
.document-footer .footer-brand {
font-weight: 700;
color: var(--accent);
margin-bottom: 5px;
font-size: 14px;
}
.footer-divider {
width: 60px;
height: 2px;
background: var(--accent);
margin: 10px auto;
}
.page-info {
text-align: center;
padding: 15px;
font-size: 11px;
color: var(--text-muted);
border-top: 1px solid var(--border);
margin-top: 30px;
}
.toc {
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 10px;
padding: 25px 30px;
margin-bottom: 35px;
}
.toc h4 {
font-size: 16px;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(--accent);
}
.toc ol {
padding-right: 20px;
}
.toc ol li {
padding: 6px 0;
font-size: 14px;
color: var(--text-muted);
}
.toc ol li strong { color: var(--primary); }
.value-card {
background: linear-gradient(135deg, #f0fff4, #e6fffa);
border: 1px solid #9ae6b4;
border-radius: 10px;
padding: 20px;
margin-bottom: 12px;
display: flex;
gap: 15px;
align-items: flex-start;
}
.value-card .value-icon {
font-size: 28px;
flex-shrink: 0;
margin-top: 3px;
}
.value-card .value-body h5 {
font-size: 15px;
font-weight: 700;
color: var(--primary);
margin-bottom: 6px;
}
.value-card .value-body p {
font-size: 13px;
color: var(--text-muted);
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.audience-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 25px 0;
}
.audience-card {
background: white;
border: 2px solid var(--border);
border-radius: 10px;
padding: 20px;
text-align: center;
transition: all 0.2s;
}
.audience-card:hover {
border-color: var(--accent);
box-shadow: 0 4px 12px rgba(201,169,97,0.15);
}
.audience-card .audience-icon { font-size: 36px; margin-bottom: 10px; }
.audience-card h5 {
font-size: 15px;
font-weight: 700;
color: var(--primary);
margin-bottom: 8px;
}
.audience-card p {
font-size: 12px;
color: var(--text-muted);
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.method-list {
list-style: none;
padding: 0;
margin: 15px 0;
}
.method-list li {
background: #f8fafc;
border-right: 3px solid var(--primary-light);
padding: 10px 16px;
margin-bottom: 6px;
border-radius: 6px;
font-size: 13px;
font-family: 'Consolas', 'Courier New', monospace;
direction: ltr;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.method-list li .method-name {
color: var(--primary);
font-weight: 600;
}
.method-list li .method-desc {
font-family: 'Vazirmatn', Tahoma, sans-serif;
direction: rtl;
text-align: right;
color: var(--text-muted);
font-size: 12px;
}
@media print {
body { background: white; padding: 0; }
.document-container { box-shadow: none; border-radius: 0; }
.section { page-break-inside: avoid; }
}
@media (max-width: 768px) {
.document-body { padding: 25px 20px; }
.document-header { padding: 30px 20px; }
.comparison-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr; }
.feature-grid { grid-template-columns: 1fr; }
.audience-grid { grid-template-columns: 1fr; }
.header-top { flex-direction: column; gap: 15px; }
.doc-meta { text-align: center; }
}
</style>
</head>
<body>
<div class="document-container">
<!-- ═══════════════ HEADER ═══════════════ -->
<header class="document-header">
<div class="header-top">
<div class="company-badge">
<div class="company-logo"></div>
</div>
<div class="doc-meta">
<div>شماره مستند: PROD-XKN-1405-002</div>
<div>نسخه: ۱.۰.۰</div>
<div>تاریخ تهیه: یکشنبه ۲۲ شهریور ۱۴۰۵ (۱۳ سپتامبر ۲۰۲۶)</div>
<div>ساعت: ۱۰:۳۰</div>
<div>طبقه‌بندی: عمومی - معرفی محصول</div>
</div>
</div>
<div class="document-title">
<span class="label">PRODUCT DOCUMENTATION</span>
<h1>xKanban | ابزار مدیریت بردهای کانبان</h1>
<h2>معرفی محصول، تحلیل ارزش سازمانی و معماری فنی</h2>
</div>
</header>
<!-- ═══════════════ BODY ═══════════════ -->
<div class="document-body">
<div class="intro-text">
<strong>مخاطبان مستند:</strong> مدیران فناوری اطلاعات، مدیران پروژه، سرپرستان تیم‌های توسعه، معماران نرم‌افزار و تصمیم‌گیرندگان سازمانی<br>
این مستند به معرفی جامع ابزار <strong>xKanban</strong> می‌پردازد؛ ابزاری که از دل نیازهای واقعی تیم‌های چابک متولد شده و با هدف حذف پیچیدگی‌های غیرضروری ابزارهای مدیریت پروژه طراحی شده است. در این مستند، از چرایی شکل‌گیری محصول تا معماری فنی و ارزش‌های سازمانی آن، همه‌چیز تشریح شده است.
</div>
<!-- فهرست مطالب -->
<div class="toc">
<h4>📑 فهرست مطالب</h4>
<ol>
<li><strong>شرح مسئله و چرایی خلق xKanban</strong></li>
<li><strong>مزایای کلیدی محصول</strong></li>
<li><strong>ارزش‌های سازمانی خلق‌شده</strong></li>
<li><strong>معماری فنی پروژه</strong></li>
<li><strong>مناسب برای چه سازمان‌ها و تیم‌هایی؟</strong></li>
<li><strong>جمع‌بندی و گام‌های بعدی</strong></li>
</ol>
</div>
<!-- ═══════════════ بخش ۱: شرح مسئله ═══════════════ -->
<div class="section">
<div class="section-header">
<div class="section-number">۱</div>
<div class="section-title">
<h3>شرح مسئله و چرایی خلق xKanban</h3>
<div class="subtitle">Problem Statement & Product Genesis</div>
</div>
</div>
<div class="section-content">
<p>در دنیای امروز، تقریباً هر تیمی — از توسعه نرم‌افزار گرفته تا بازاریابی، منابع انسانی و عملیات — با یک چالش مشترک دست‌وپنجه نرم می‌کند: <strong>چگونه کارها را به‌صورت شفاف، منظم و قابل ردیابی مدیریت کنیم؟</strong> متدولوژی کانبان به‌عنوان یکی از مؤثرترین رویکردهای مدیریت بصری کار، سال‌هاست که پاسخ این سؤال را ارائه داده است؛ اما ابزارهای موجود برای پیاده‌سازی این متدولوژی، خود به منبع جدیدی از پیچیدگی تبدیل شده‌اند.</p>
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">معضلات رایج در اکوسیستم ابزارهای فعلی:</h4>
<div class="warning-box">
<strong>⚠️ چالش‌هایی که تیم‌ها هر روز با آن‌ها مواجه‌اند:</strong>
<ul style="padding-right: 20px; margin-top: 10px;">
<li style="margin-bottom: 8px;"><strong>وابستگی به اینترنت و سرور:</strong> بسیاری از ابزارها نیازمند اتصال دائمی به اینترنت و سرورهای ابری هستند. در محیط‌هایی با محدودیت شبکه یا الزامات امنیتی بالا، این وابستگی یک مانع جدی است.</li>
<li style="margin-bottom: 8px;"><strong>هزینه‌های اشتراک ماهانه:</strong> ابزارهای تجاری برای هر کاربر هزینه اشتراک دریافت می‌کنند. برای تیم‌های بزرگ، این هزینه به‌سرعت به رقم قابل‌توجهی تبدیل می‌شود.</li>
<li style="margin-bottom: 8px;"><strong>پیچیدگی بیش‌ازحد:</strong> ابزارهایی مانند Jira یا Azure DevOps صدها قابلیت دارند که اکثر تیم‌ها از کمتر از ۲۰ درصد آن‌ها استفاده می‌کنند. این پیچیدگی، منحنی یادگیری را بالا برده و بهره‌وری را کاهش می‌دهد.</li>
<li style="margin-bottom: 8px;"><strong>فرآیند نصب و راه‌اندازی سنگین:</strong> برخی ابزارها نیازمند نصب سرور، پیکربندی دیتابیس و مدیریت زیرساخت هستند که زمان و تخصص قابل‌توجهی می‌طلبد.</li>
<li style="margin-bottom: 8px;"><strong>قفل‌شدگی داده‌ها (Vendor Lock-in):</strong> داده‌های پروژه در سرورهای ارائه‌دهنده سرویس ذخیره می‌شوند و خروج از آن اکوسیستم، پرهزینه و دشوار است.</li>
<li style="margin-bottom: 8px;"><strong>عدم قابلیت حمل:</strong> انتقال پروژه از یک محیط به محیط دیگر (مثلاً از لپ‌تاپ شخصی به سیستم شرکت) در بسیاری از ابزارها فرآیندی پیچیده است.</li>
</ul>
</div>
<p>این معضلات، یک شکاف آشکار در بازار ابزارهای مدیریت پروژه ایجاد کرده بود: <strong>جای خالی ابزاری ساده، مستقل، رایگان و در عین حال حرفه‌ای</strong> که بدون هیچ پیش‌نیازی قابل استفاده باشد و در عین حال، قابلیت‌های پیشرفته‌ای مانند فیلتر چندبعدی، تاریخچه تغییرات، وابستگی بین کارت‌ها و یکپارچگی با سیستم‌های خارجی را ارائه دهد.</p>
<div class="highlight-box">
<strong>🎯 نقطه عطف:</strong> xKanban دقیقاً از همین شکاف متولد شد. هدف، خلق ابزاری بود که «صفر تا صد» مدیریت کانبان را بدون هیچ وابستگی خارجی، در یک فایل واحد و قابل حمل ارائه دهد — ابزاری که در کمتر از ۳ ثانیه باز شود و از همان لحظه اول قابل استفاده باشد.
</div>
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">نیازمندی‌های کلیدی که xKanban برای پاسخ به آن‌ها طراحی شد:</h4>
<table class="styled-table">
<thead>
<tr>
<th>ردیف</th>
<th>نیازمندی</th>
<th>وضعیت در ابزارهای موجود</th>
<th>پاسخ xKanban</th>
</tr>
</thead>
<tbody>
<tr>
<td>۱</td>
<td>اجرای آفلاین و بدون سرور</td>
<td style="color: var(--danger);">اکثراً ناممکن</td>
<td style="color: var(--success); font-weight: 600;">✓ کاملاً آفلاین</td>
</tr>
<tr>
<td>۲</td>
<td>بدون هزینه اشتراک</td>
<td style="color: var(--danger);">اشتراک ماهانه/سالانه</td>
<td style="color: var(--success); font-weight: 600;">✓ کاملاً رایگان</td>
</tr>
<tr>
<td>۳</td>
<td>راه‌اندازی فوری</td>
<td style="color: var(--warning);">نیاز به نصب و پیکربندی</td>
<td style="color: var(--success); font-weight: 600;">✓ یک کلیک</td>
</tr>
<tr>
<td>۴</td>
<td>قابلیت حمل داده‌ها</td>
<td style="color: var(--warning);">محدود و پیچیده</td>
<td style="color: var(--success); font-weight: 600;">✓ فایل JSON</td>
</tr>
<tr>
<td>۵</td>
<td>سادگی همراه با قدرت</td>
<td style="color: var(--danger);">یا ساده یا پیچیده</td>
<td style="color: var(--success); font-weight: 600;">✓ تعادل بهینه</td>
</tr>
<tr>
<td>۶</td>
<td>مالکیت کامل داده‌ها</td>
<td style="color: var(--danger);">ذخیره در سرور ثالث</td>
<td style="color: var(--success); font-weight: 600;">✓ کاملاً محلی</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ═══════════════ بخش ۲: مزایای کلیدی ═══════════════ -->
<div class="section">
<div class="section-header">
<div class="section-number">۲</div>
<div class="section-title">
<h3>مزایای کلیدی محصول</h3>
<div class="subtitle">Key Product Advantages</div>
</div>
</div>
<div class="section-content">
<p>xKanban مجموعه‌ای از مزایای منحصربه‌فرد را ارائه می‌دهد که آن را از تمامی ابزارهای موجود در بازار متمایز می‌سازد. این مزایا نه صرفاً ویژگی‌های فنی، بلکه <strong>تصمیمات استراتژیک طراحی</strong> هستند که هر کدام پاسخی مستقیم به یکی از معضلات مطرح‌شده در بخش قبل می‌باشند.</p>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">۰ ثانیه<br>نصب</div>
<div class="stat-label">بدون نیاز به هیچ فرآیند نصب یا پیکربندی</div>
</div>
<div class="stat-card">
<div class="stat-value">۱۰۰٪<br>آفلاین</div>
<div class="stat-label">اجرای کامل بدون نیاز به اینترنت یا سرور</div>
</div>
<div class="stat-card">
<div class="stat-value">۱ فایل<br>واحد</div>
<div class="stat-label">تمام محصول در یک فایل HTML مستقل</div>
</div>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h5>راه‌اندازی آنی</h5>
<p>فایل HTML را در مرورگر باز کنید. تمام. هیچ سروری، هیچ دیتابیسی، هیچ اکانتی لازم نیست. در کمتر از ۳ ثانیه آماده استفاده هستید.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h5>حریم خصوصی مطلق</h5>
<p>تمام داده‌ها در مرورگر شما باقی می‌مانند. هیچ اطلاعاتی به هیچ سرور خارجی ارسال نمی‌شود. مالکیت داده‌ها ۱۰۰٪ در اختیار شماست.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📦</div>
<h5>قابلیت حمل بی‌نظیر</h5>
<p>پروژه خود را به‌صورت فایل JSON ذخیره کنید و روی فلش، ایمیل یا هر فضای ابری منتقل کنید. در هر سیستمی قابل بارگذاری است.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h5>رابط کاربری مدرن و حرفه‌ای</h5>
<p>طراحی بصری جذاب با پشتیبانی از حالت تاریک/روشن، رنگ‌بندی سفارشی برای بردها، ستون‌ها و کارت‌ها و انیمیشن‌های روان.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔍</div>
<h5>فیلتر چندبعدی پیشرفته</h5>
<p>فیلتر هم‌زمان بر اساس تگ، مسئول، وضعیت سررسید و جستجوی متنی. یافتن هر کارت در کمتر از یک ثانیه حتی در پروژه‌های بزرگ.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📡</div>
<h5>یکپارچگی با Webhook</h5>
<p>ارسال خودکار رویدادهای پروژه به Slack، Teams یا هر سیستم خارجی. ساختار JSON استاندارد با eventId و timestamp.</p>
</div>
<div class="feature-card">
<div class="feature-icon">⌨️</div>
<h5>میانبرهای کیبورد حرفه‌ای</h5>
<p>بیش از ۸ میانبر کیبورد برای کاربران حرفه‌ای. از Ctrl+S برای ذخیره تا Alt+Arrow برای جابجایی سریع کارت‌ها بین ستون‌ها.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h5>آمار بلادرنگ پروژه</h5>
<p>مشاهده آنی تعداد کارت‌ها، درصد پیشرفت، کارت‌های عقب‌افتاده و نزدیک به موعد در نوار وضعیت پایین صفحه.</p>
</div>
</div>
<div class="success-box">
<strong>💎 مزیت رقابتی اصلی:</strong> xKanban تنها ابزاری است که ترکیب «سادگی یک فایل HTML» و «قدرت یک سیستم مدیریت پروژه حرفه‌ای» را به‌صورت هم‌زمان ارائه می‌دهد. هیچ ابزار دیگری در بازار این تعادل را برقرار نکرده است.
</div>
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">مقایسه با ابزارهای رایج بازار:</h4>
<div class="comparison-grid">
<div class="comparison-card">
<h4>ابزارهای تجاری (Jira, Trello, Asana)</h4>
<ul>
<li><span>هزینه</span> <span class="value" style="color: var(--danger);">اشتراک ماهانه بالا</span></li>
<li><span>نیاز به اینترنت</span> <span class="value" style="color: var(--danger);">الزامی</span></li>
<li><span>نصب و راه‌اندازی</span> <span class="value" style="color: var(--warning);">ثبت‌نام + پیکربندی</span></li>
<li><span>مالکیت داده</span> <span class="value" style="color: var(--danger);">سرور ثالث</span></li>
<li><span>پیچیدگی</span> <span class="value" style="color: var(--danger);">بسیار بالا</span></li>
<li><span>آفلاین</span> <span class="value" style="color: var(--danger);">ناممکن</span></li>
</ul>
</div>
<div class="comparison-card recommended">
<span class="card-badge">xKanban ✓</span>
<h4>xKanban</h4>
<ul>
<li><span>هزینه</span> <span class="value" style="color: var(--success);">کاملاً رایگان</span></li>
<li><span>نیاز به اینترنت</span> <span class="value" style="color: var(--success);">خیر</span></li>
<li><span>نصب و راه‌اندازی</span> <span class="value" style="color: var(--success);">یک کلیک</span></li>
<li><span>مالکیت داده</span> <span class="value" style="color: var(--success);">۱۰۰٪ محلی</span></li>
<li><span>پیچیدگی</span> <span class="value" style="color: var(--success);">بهینه و متعادل</span></li>
<li><span>آفلاین</span> <span class="value" style="color: var(--success);">کاملاً پشتیبانی</span></li>
</ul>
</div>
</div>
</div>
</div>
<!-- ═══════════════ بخش ۳: ارزش‌های سازمانی ═══════════════ -->
<div class="section">
<div class="section-header">
<div class="section-number">۳</div>
<div class="section-title">
<h3>ارزش‌های سازمانی خلق‌شده</h3>
<div class="subtitle">Organizational Value Proposition</div>
</div>
</div>
<div class="section-content">
<p>استفاده از xKanban در یک سازمان، فراتر از صرفاً «مدیریت کارها» است. این ابزار، ارزش‌های استراتژیک و عملیاتی ملموسی را در سطوح مختلف سازمان خلق می‌کند که در ادامه به تفصیل تشریح شده‌اند:</p>
<div class="value-card">
<div class="value-icon">💰</div>
<div class="value-body">
<h5>حذف کامل هزینه‌های لایسنس و اشتراک</h5>
<p>سازمان‌هایی که از ابزارهایی مانند Jira یا Azure DevOps استفاده می‌کنند، سالانه مبالغ قابل‌توجهی بابت لایسنس هر کاربر پرداخت می‌کنند. xKanban این هزینه را به صفر می‌رساند و بودجه آزادشده را برای سرمایه‌گذاری در حوزه‌های ارزشمندتر آزاد می‌کند.</p>
</div>
</div>
<div class="value-card">
<div class="value-icon">🔐</div>
<div class="value-body">
<h5>تطبیق با الزامات امنیتی و حریم خصوصی</h5>
<p>در سازمان‌هایی با حساسیت امنیتی بالا (نظامی، بانکی، بهداشتی)، ارسال داده‌های پروژه به سرورهای ابری خارجی ممنوع یا محدود است. xKanban با ذخیره‌سازی ۱۰۰٪ محلی، این الزامات را به‌صورت ذاتی رعایت می‌کند.</p>
</div>
</div>
<div class="value-card">
<div class="value-icon">⚡</div>
<div class="value-body">
<h5>کاهش زمان Onboarding اعضای جدید</h5>
<p>برخلاف ابزارهای پیچیده که آموزش آن‌ها هفته‌ها زمان می‌برد، xKanban به‌قدری ساده و شهودی است که یک عضو جدید تیم در کمتر از ۱۰ دقیقه با آن آشنا شده و شروع به کار می‌کند.</p>
</div>
</div>
<div class="value-card">
<div class="value-icon">📈</div>
<div class="value-body">
<h5>افزایش شفافیت و پاسخگویی در تیم</h5>
<p>با نمایش بصری وضعیت تمام کارها، تاریخچه جابجایی کارت‌ها و آمار بلادرنگ پیشرفت، هر عضو تیم و هر مدیری در هر لحظه دید کاملی از وضعیت پروژه دارد. این شفافیت، فرهنگ پاسخگویی را تقویت می‌کند.</p>
</div>
</div>
<div class="value-card">
<div class="value-icon">🔄</div>
<div class="value-body">
<h5>استانداردسازی فرآیندهای مدیریت پروژه</h5>
<p>xKanban تیم‌ها را به استفاده از یک متدولوژی استاندارد (کانبان) هدایت می‌کند. ستون‌های مشخص، جریان کار تعریف‌شده و تاریخچه تغییرات، همگی به ایجاد یک فرآیند تکرارپذیر و قابل اندازه‌گیری کمک می‌کنند.</p>
</div>
</div>
<div class="value-card">
<div class="value-icon">🛡️</div>
<div class="value-body">
<h5>حذف ریسک Vendor Lock-in</h5>
<p>داده‌های پروژه در فرمت استاندارد JSON ذخیره می‌شوند. این یعنی سازمان هیچ‌گاه در اکوسیستم یک ارائه‌دهنده خاص قفل نمی‌شود و در هر زمان می‌تواند داده‌های خود را به هر سیستم دیگری منتقل کند.</p>
</div>
</div>
<div class="value-card">
<div class="value-icon">🌐</div>
<div class="value-body">
<h5>یکپارچگی با اکوسیستم موجود سازمان</h5>
<p>از طریق مکانیزم Webhook، xKanban می‌تواند رویدادهای پروژه را به Slack، Microsoft Teams، سیستم‌های CI/CD یا هر API سفارشی ارسال کند. این یعنی xKanban به‌جای جایگزینی ابزارهای موجود، آن‌ها را تکمیل می‌کند.</p>
</div>
</div>
<div class="value-card">
<div class="value-icon">📉</div>
<div class="value-body">
<h5>کاهش سربار مدیریت زیرساخت</h5>
<p>بدون نیاز به سرور، دیتابیس، به‌روزرسانی‌های امنیتی و مانیتورینگ، تیم IT سازمان از بار مدیریت یک ابزار اضافی رها می‌شود. این صرفه‌جویی در زمان و منابع انسانی، ارزش پنهان اما بسیار قابل‌توجهی است.</p>
</div>
</div>
<div class="highlight-box">
<strong>📊 خلاصه ارزش‌آفرینی:</strong> xKanban در چهار بُعد اصلی برای سازمان ارزش خلق می‌کند: <strong>کاهش هزینه‌ها</strong> (حذف لایسنس و زیرساخت)، <strong>افزایش بهره‌وری</strong> (Onboarding سریع و رابط شهودی)، <strong>کاهش ریسک</strong> (امنیت داده و عدم وابستگی) و <strong>بهبود کیفیت فرآیندها</strong> (استانداردسازی و شفافیت).
</div>
</div>
</div>
<!-- ═══════════════ بخش ۴: معماری فنی ═══════════════ -->
<div class="section">
<div class="section-header">
<div class="section-number">۴</div>
<div class="section-title">
<h3>معماری فنی پروژه</h3>
<div class="subtitle">Technical Architecture & Code Structure</div>
</div>
</div>
<div class="section-content">
<p>xKanban به‌عنوان یک <strong>Single-Page Application (SPA)</strong> تک‌فایلی طراحی شده است که تمامی لایه‌های نمایش، منطق و داده را در یک فایل HTML واحد encapsulate می‌کند. این تصمیم معماری، اگرچه در نگاه اول غیرمعمول به نظر می‌رسد، اما با توجه به اهداف محصول (آفلاین بودن، قابلیت حمل و عدم وابستگی) منطقی‌ترین انتخاب ممکن بوده است.</p>
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">الف) نمودار معماری لایه‌ای</h4>
<div class="architecture-diagram">
<div class="arch-layer">
<div class="arch-layer-title">🎨 Presentation Layer</div>
<div class="arch-components">
<span class="arch-chip">Toolbar UI</span>
<span class="arch-chip">Board Renderer</span>
<span class="arch-chip">Column Renderer</span>
<span class="arch-chip">Card Renderer</span>
<span class="arch-chip">Modal System</span>
<span class="arch-chip">Filter Panel</span>
<span class="arch-chip">Stats Bar</span>
<span class="arch-chip">Theme Engine</span>
</div>
</div>
<div class="arch-arrow">▼ Event Binding & State Observation ▼</div>
<div class="arch-layer">
<div class="arch-layer-title">⚙️ Application Logic Layer</div>
<div class="arch-components">
<span class="arch-chip gold">ProjectManager</span>
<span class="arch-chip gold">BoardManager</span>
<span class="arch-chip gold">ColumnManager</span>
<span class="arch-chip gold">CardManager</span>
<span class="arch-chip gold">TagManager</span>
<span class="arch-chip gold">FilterEngine</span>
<span class="arch-chip gold">WebhookService</span>
<span class="arch-chip gold">ShortcutHandler</span>
<span class="arch-chip gold">HistoryTracker</span>
</div>
</div>
<div class="arch-arrow">▼ Read / Write / Sync ▼</div>
<div class="arch-layer">
<div class="arch-layer-title">💾 Data & Persistence Layer</div>
<div class="arch-components">
<span class="arch-chip">AppState (In-Memory)</span>
<span class="arch-chip">LocalStorage Adapter</span>
<span class="arch-chip">AutoSave Engine</span>
<span class="arch-chip">JSON Serializer</span>
<span class="arch-chip">Export/Import Service</span>
<span class="arch-chip">Recovery Manager</span>
</div>
</div>
</div>
<h4 style="margin-top: 30px; color: var(--primary); font-size: 16px;">ب) مدل داده‌ای (Data Schema)</h4>
<p>ساختار داده‌ای پروژه از یک سلسله‌مراتب چهارسطحی پیروی می‌کند:</p>
<div class="code-box">
<span class="comment">// ساختار سلسله‌مراتبی داده‌ها</span><br>
<span class="key">Project</span><br>
&nbsp;&nbsp;├── <span class="key">id</span>: <span class="str">UUID</span><br>
&nbsp;&nbsp;├── <span class="key">title</span>: <span class="str">string</span><br>
&nbsp;&nbsp;├── <span class="key">description</span>: <span class="str">string</span><br>
&nbsp;&nbsp;├── <span class="key">createdAt</span>: <span class="str">ISO8601</span><br>
&nbsp;&nbsp;├── <span class="key">webhook</span>: { <span class="key">enabled</span>, <span class="key">url</span> }<br>
&nbsp;&nbsp;├── <span class="key">globalTags</span>: [<span class="key">Tag</span>]<br>
&nbsp;&nbsp;└── <span class="key">boards</span>: [<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="key">Board</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── <span class="key">id</span>, <span class="key">title</span>, <span class="key">backgroundColor</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── <span class="key">columns</span>: [<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="key">Column</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── <span class="key">id</span>, <span class="key">title</span>, <span class="key">order</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── <span class="key">cards</span>: [<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="key">Card</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── <span class="key">id</span>, <span class="key">title</span>, <span class="key">description</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── <span class="key">dueDate</span>, <span class="key">assignees</span>, <span class="key">tags</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── <span class="key">dependencies</span>, <span class="key">checklist</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── <span class="key">history</span>: [<span class="key">HistoryEntry</span>]<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<br>
</div>
<h4 style="margin-top: 30px; color: var(--primary); font-size: 16px;">ج) ماژول‌های اصلی و متدهای کلیدی</h4>
<p>در ادامه، مهم‌ترین ماژول‌های سیستم به همراه متدهای کلیدی هر کدام تشریح شده‌اند. برای حفظ خوانایی، بدنه متدها خلاصه شده و تنها امضای آن‌ها نمایش داده شده است:</p>
<h5 style="margin-top: 20px; color: var(--primary-light); font-size: 14px;">📁 ماژول ProjectManager</h5>
<ul class="method-list">
<li>
<span class="method-name">initProject()</span>
<span class="method-desc">مقداردهی اولیه پروژه</span>
</li>
<li>
<span class="method-name">loadProject(data)</span>
<span class="method-desc">بارگذاری پروژه از فایل JSON</span>
</li>
<li>
<span class="method-name">saveProject(filename)</span>
<span class="method-desc">ذخیره پروژه به‌صورت فایل JSON</span>
</li>
<li>
<span class="method-name">updateProjectSettings(title, desc, webhook)</span>
<span class="method-desc">به‌روزرسانی تنظیمات پروژه</span>
</li>
<li>
<span class="method-name">getProjectStats()</span>
<span class="method-desc">محاسبه آمار کلی پروژه</span>
</li>
</ul>
<h5 style="margin-top: 20px; color: var(--primary-light); font-size: 14px;">📊 ماژول BoardManager</h5>
<ul class="method-list">
<li>
<span class="method-name">createBoard(title, description, bgColor)</span>
<span class="method-desc">ایجاد برد جدید</span>
</li>
<li>
<span class="method-name">editBoard(boardId, data)</span>
<span class="method-desc">ویرایش برد موجود</span>
</li>
<li>
<span class="method-name">deleteBoard(boardId)</span>
<span class="method-desc">حذف برد با تأیید کاربر</span>
</li>
<li>
<span class="method-name">switchBoard(boardId)</span>
<span class="method-desc">تغییر برد فعال</span>
</li>
<li>
<span class="method-name">renderBoardList()</span>
<span class="method-desc">رندر لیست بردها در منو</span>
</li>
</ul>
<h5 style="margin-top: 20px; color: var(--primary-light); font-size: 14px;">📑 ماژول ColumnManager</h5>
<ul class="method-list">
<li>
<span class="method-name">addColumn(boardId, title, bgColor, textColor)</span>
<span class="method-desc">افزودن ستون جدید به برد</span>
</li>
<li>
<span class="method-name">editColumn(columnId, data)</span>
<span class="method-desc">ویرایش ویژگی‌های ستون</span>
</li>
<li>
<span class="method-name">deleteColumn(columnId)</span>
<span class="method-desc">حذف ستون و کارت‌های آن</span>
</li>
<li>
<span class="method-name">reorderColumns(draggedId, targetId)</span>
<span class="method-desc">تغییر ترتیب ستون‌ها با Drag & Drop</span>
</li>
<li>
<span class="method-name">renderColumns(boardId)</span>
<span class="method-desc">رندر ستون‌های برد فعال</span>
</li>
</ul>
<h5 style="margin-top: 20px; color: var(--primary-light); font-size: 14px;">📝 ماژول CardManager</h5>
<ul class="method-list">
<li>
<span class="method-name">createCard(columnId, cardData)</span>
<span class="method-desc">ایجاد کارت جدید در ستون</span>
</li>
<li>
<span class="method-name">updateCard(cardId, updates)</span>
<span class="method-desc">به‌روزرسانی اطلاعات کارت</span>
</li>
<li>
<span class="method-name">deleteCard(cardId)</span>
<span class="method-desc">حذف کارت از ستون</span>
</li>
<li>
<span class="method-name">moveCard(cardId, fromColumnId, toColumnId)</span>
<span class="method-desc">جابجایی کارت بین ستون‌ها</span>
</li>
<li>
<span class="method-name">addChecklistItem(cardId, text)</span>
<span class="method-desc">افزودن آیتم به چک‌لیست</span>
</li>
<li>
<span class="method-name">toggleChecklistItem(cardId, itemId)</span>
<span class="method-desc">تغییر وضعیت آیتم چک‌لیست</span>
</li>
<li>
<span class="method-name">addDependency(cardId, dependOnCardId)</span>
<span class="method-desc">ایجاد وابستگی بین کارت‌ها</span>
</li>
<li>
<span class="method-name">assignMember(cardId, memberName)</span>
<span class="method-desc">تخصیص مسئول به کارت</span>
</li>
<li>
<span class="method-name">getCardDueStatus(card)</span>
<span class="method-desc">تعیین وضعیت سررسید کارت</span>
</li>
<li>
<span class="method-name">openCardModal(cardId)</span>
<span class="method-desc">باز کردن پنجره ویرایش کارت</span>
</li>
</ul>
<h5 style="margin-top: 20px; color: var(--primary-light); font-size: 14px;">🏷️ ماژول TagManager</h5>
<ul class="method-list">
<li>
<span class="method-name">createTag(name, color)</span>
<span class="method-desc">ایجاد تگ عمومی جدید</span>
</li>
<li>
<span class="method-name">deleteTag(tagId)</span>
<span class="method-desc">حذف تگ و حذف از کارت‌ها</span>
</li>
<li>
<span class="method-name">assignTagToCard(cardId, tagId)</span>
<span class="method-desc">تخصیص تگ به کارت</span>
</li>
<li>
<span class="method-name">removeTagFromCard(cardId, tagId)</span>
<span class="method-desc">حذف تگ از کارت</span>
</li>
<li>
<span class="method-name">renderTagManager()</span>
<span class="method-desc">رندر پنل مدیریت تگ‌ها</span>
</li>
</ul>
<h5 style="margin-top: 20px; color: var(--primary-light); font-size: 14px;">🔍 ماژول FilterEngine</h5>
<ul class="method-list">
<li>
<span class="method-name">applyFilters(criteria)</span>
<span class="method-desc">اعمال فیلترهای چندبعدی</span>
</li>
<li>
<span class="method-name">filterByTags(selectedTags)</span>
<span class="method-desc">فیلتر بر اساس تگ‌ها</span>
</li>
<li>
<span class="method-name">filterByAssignees(selectedAssignees)</span>
<span class="method-desc">فیلتر بر اساس مسئولین</span>
</li>
<li>
<span class="method-name">filterByDueStatus(status)</span>
<span class="method-desc">فیلتر بر اساس وضعیت سررسید</span>
</li>
<li>
<span class="method-name">searchCards(query)</span>
<span class="method-desc">جستجوی متنی در کارت‌ها</span>
</li>
<li>
<span class="method-name">clearAllFilters()</span>
<span class="method-desc">پاک‌سازی تمام فیلترها</span>
</li>
</ul>
<h5 style="margin-top: 20px; color: var(--primary-light); font-size: 14px;">📡 ماژول WebhookService</h5>
<ul class="method-list">
<li>
<span class="method-name">sendEvent(eventType, payload)</span>
<span class="method-desc">ارسال رویداد به URL پیکربندی‌شده</span>
</li>
<li>
<span class="method-name">testWebhook(url)</span>
<span class="method-desc">تست اتصال Webhook</span>
</li>
<li>
<span class="method-name">buildEventPayload(eventType, data)</span>
<span class="method-desc">ساخت ساختار JSON استاندارد رویداد</span>
</li>
</ul>
<h5 style="margin-top: 20px; color: var(--primary-light); font-size: 14px;">💾 ماژول PersistenceEngine</h5>
<ul class="method-list">
<li>
<span class="method-name">autoSave()</span>
<span class="method-desc">ذخیره خودکار در LocalStorage</span>
</li>
<li>
<span class="method-name">loadAutoSave()</span>
<span class="method-desc">بارگذاری داده‌های ذخیره‌شده خودکار</span>
</li>
<li>
<span class="method-name">scheduleAutoSave()</span>
<span class="method-desc">زمان‌بندی ذخیره با Debounce</span>
</li>
<li>
<span class="method-name">exportToJSON()</span>
<span class="method-desc">خروجی فایل JSON</span>
</li>
<li>
<span class="method-name">importFromJSON(file)</span>
<span class="method-desc">بارگذاری از فایل JSON</span>
</li>
<li>
<span class="method-name">exportToMarkdown(boardId)</span>
<span class="method-desc">خروجی فرمت Markdown</span>
</li>
<li>
<span class="method-name">exportToCSV(boardId)</span>
<span class="method-desc">خروجی فرمت CSV</span>
</li>
<li>
<span class="method-name">checkRecovery()</span>
<span class="method-desc">بررسی وجود داده‌های بازیابی</span>
</li>
</ul>
<h5 style="margin-top: 20px; color: var(--primary-light); font-size: 14px;">⌨️ ماژول ShortcutHandler</h5>
<ul class="method-list">
<li>
<span class="method-name">registerShortcuts()</span>
<span class="method-desc">ثبت تمام میانبرهای کیبورد</span>
</li>
<li>
<span class="method-name">handleKeyDown(event)</span>
<span class="method-desc">پردازش رویدادهای کیبورد</span>
</li>
<li>
<span class="method-name">navigateCards(direction)</span>
<span class="method-desc">پیمایش بین کارت‌ها با Tab</span>
</li>
<li>
<span class="method-name">moveCardWithKeyboard(direction)</span>
<span class="method-desc">جابجایی کارت با Alt+Arrow</span>
</li>
</ul>
<h4 style="margin-top: 30px; color: var(--primary); font-size: 16px;">د) الگوهای طراحی به‌کاررفته</h4>
<table class="styled-table">
<thead>
<tr>
<th>الگو</th>
<th>محل استفاده</th>
<th>هدف</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>State-Driven Rendering</strong></td>
<td>کل رابط کاربری</td>
<td>رندر UI بر اساس وضعیت مرکزی AppState</td>
</tr>
<tr>
<td><strong>Observer / Pub-Sub</strong></td>
<td>ارتباط ماژول‌ها</td>
<td>اطلاع‌رسانی تغییرات وضعیت به ماژول‌های وابسته</td>
</tr>
<tr>
<td><strong>Debouncing</strong></td>
<td>AutoSave Engine</td>
<td>جلوگیری از نوشتن مکرر در LocalStorage</td>
</tr>
<tr>
<td><strong>Factory</strong></td>
<td>ایجاد موجودیت‌ها</td>
<td>تولید اشیاء Card، Column، Board با UUID</td>
</tr>
<tr>
<td><strong>Command</strong></td>
<td>Undo/Redo</td>
<td>ذخیره عملیات برای امکان بازگشت</td>
</tr>
<tr>
<td><strong>Singleton</strong></td>
<td>AppState</td>
<td>یک منبع واحد حقیقت برای کل برنامه</td>
</tr>
</tbody>
</table>
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ه) جریان داده (Data Flow)</h4>
<div class="info-box">
<strong>🔄 چرخه حیات یک عملیات کاربر:</strong><br><br>
<strong>۱. User Action:</strong> کاربر یک کارت را از ستون «در حال انجام» به ستون «تکمیل‌شده» می‌کشد.<br>
<strong>۲. Event Capture:</strong> رویداد Drag & Drop توسط <code>ColumnManager</code> دریافت می‌شود.<br>
<strong>۳. State Update:</strong> متد <code>moveCard()</code> از <code>CardManager</code> فراخوانی شده و AppState به‌روزرسانی می‌شود.<br>
<strong>۴. History Log:</strong> متد <code>HistoryTracker.log()</code> جابجایی را با timestamp ثبت می‌کند.<br>
<strong>۵. Re-Render:</strong> متد <code>renderColumns()</code> رابط کاربری را با وضعیت جدید به‌روزرسانی می‌کند.<br>
<strong>۶. AutoSave:</strong> متد <code>scheduleAutoSave()</code> با تأخیر ۱ ثانیه، وضعیت را در LocalStorage ذخیره می‌کند.<br>
<strong>۷. Webhook:</strong> در صورت فعال بودن، متد <code>sendEvent('card.moved', payload)</code> رویداد را ارسال می‌کند.<br>
<strong>۸. Stats Update:</strong> متد <code>getProjectStats()</code> آمار نوار وضعیت را به‌روزرسانی می‌کند.
</div>
</div>
</div>
<!-- ═══════════════ بخش ۵: مخاطبان هدف ═══════════════ -->
<div class="section">
<div class="section-header">
<div class="section-number">۵</div>
<div class="section-title">
<h3>مناسب برای چه سازمان‌ها و تیم‌هایی؟</h3>
<div class="subtitle">Target Audience & Ideal Use Cases</div>
</div>
</div>
<div class="section-content">
<p>xKanban به‌گونه‌ای طراحی شده که طیف وسیعی از سازمان‌ها و تیم‌ها بتوانند از آن بهره‌مند شوند. با این حال، برخی محیط‌ها بیشترین ارزش را از این ابزار دریافت خواهند کرد:</p>
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">الف) سازمان‌های هدف</h4>
<div class="audience-grid">
<div class="audience-card">
<div class="audience-icon">🏢</div>
<h5>استارتاپ‌ها و شرکت‌های کوچک</h5>
<p>تیم‌هایی که بودجه محدود دارند و به ابزاری رایگان، سریع و بدون سربار نیاز دارند. xKanban جایگزین ایده‌آل Trello و Asana برای این تیم‌هاست.</p>
</div>
<div class="audience-card">
<div class="audience-icon">🏛️</div>
<h5>سازمان‌های دولتی و نظامی</h5>
<p>محیط‌هایی با محدودیت‌های امنیتی شدید که استفاده از سرویس‌های ابری خارجی ممنوع است. xKanban با ذخیره‌سازی ۱۰۰٪ محلی، این الزامات را رعایت می‌کند.</p>
</div>
<div class="audience-card">
<div class="audience-icon">🏥</div>
<h5>مراکز بهداشتی و درمانی</h5>
<p>بیمارستان‌ها و مراکز تحقیقاتی که داده‌های حساس بیماران و پروژه‌ها نباید از شبکه داخلی خارج شود.</p>
</div>
<div class="audience-card">
<div class="audience-icon">🏦</div>
<h5>مؤسسات مالی و بانکی</h5>
<p>سازمان‌هایی که تحت مقررات سخت‌گیرانه حفاظت از داده (مانند PCI-DSS) فعالیت می‌کنند و نمی‌توانند اطلاعات پروژه‌ها را در سرورهای ثالث ذخیره کنند.</p>
</div>
<div class="audience-card">
<div class="audience-icon">🎓</div>
<h5>دانشگاه‌ها و مراکز آموزشی</h5>
<p>اساتید و دانشجویانی که برای مدیریت پروژه‌های تحقیقاتی، پایان‌نامه‌ها و کارهای گروهی به ابزاری ساده و رایگان نیاز دارند.</p>
</div>
<div class="audience-card">
<div class="audience-icon">🌍</div>
<h5>تیم‌های دورکار و فریلنسرها</h5>
<p>افرادی که در محیط‌های مختلف کار می‌کنند و نیاز دارند پروژه خود را روی فلش یا فضای ابری شخصی حمل کنند.</p>
</div>
</div>
<h4 style="margin-top: 30px; color: var(--primary); font-size: 16px;">ب) تیم‌های هدف</h4>
<table class="styled-table">
<thead>
<tr>
<th>نوع تیم</th>
<th>نحوه استفاده از xKanban</th>
<th>ارزش اصلی</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>تیم‌های توسعه نرم‌افزار</strong></td>
<td>مدیریت Sprint، باگ‌ها و Featureها</td>
<td>یکپارچگی با CI/CD از طریق Webhook</td>
</tr>
<tr>
<td><strong>تیم‌های DevOps</strong></td>
<td>ردیابی Incidentها و Change Requestها</td>
<td>اجرای آفلاین در محیط‌های ایزوله</td>
</tr>
<tr>
<td><strong>تیم‌های بازاریابی</strong></td>
<td>مدیریت کمپین‌ها و محتوای تولیدی</td>
<td>سادگی و سرعت راه‌اندازی</td>
</tr>
<tr>
<td><strong>تیم‌های منابع انسانی</strong></td>
<td>ردیابی فرآیند استخدام و Onboarding</td>
<td>حریم خصوصی داده‌های پرسنلی</td>
</tr>
<tr>
<td><strong>تیم‌های طراحی</strong></td>
<td>مدیریت پروژه‌های طراحی و بازخورد</td>
<td>رابط بصری جذاب و رنگ‌بندی سفارشی</td>
</tr>
<tr>
<td><strong>تیم‌های پشتیبانی</strong></td>
<td>مدیریت تیکت‌ها و درخواست‌های مشتریان</td>
<td>آمار بلادرنگ و فیلتر پیشرفته</td>
</tr>
<tr>
<td><strong>مدیران محصول</strong></td>
<td>نقشه راه محصول و اولویت‌بندی ویژگی‌ها</td>
<td>وابستگی بین کارت‌ها و چک‌لیست</td>
</tr>
</tbody>
</table>
<div class="highlight-box">
<strong>🎯 قانون کلی:</strong> هر تیمی که با سؤال «الان هر کس دارد روی چه چیزی کار می‌کند و وضعیتش چیست؟» مواجه است، یک کاندیدای ایده‌آل برای استفاده از xKanban محسوب می‌شود.
</div>
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">ج) چه زمانی xKanban بهترین انتخاب نیست؟</h4>
<div class="info-box">
<strong>💡 شفافیت کامل:</strong> xKanban برای سناریوهای زیر طراحی نشده و در این موارد، ابزارهای تخصصی‌تر توصیه می‌شوند:
<ul style="padding-right: 20px; margin-top: 10px;">
<li style="margin-bottom: 8px;">تیم‌های بسیار بزرگ (بیش از ۵۰ نفر) که نیاز به مدیریت دسترسی سطحی و نقش‌های پیچیده دارند</li>
<li style="margin-bottom: 8px;">سازمان‌هایی که نیاز به هم‌زمانی بلادرنگ (Real-time Collaboration) بین چندین کاربر دارند</li>
<li style="margin-bottom: 8px;">محیط‌هایی که نیاز به یکپارچگی عمیق با اکوسیستم‌های خاص (مانند SAP یا Salesforce) دارند</li>
</ul>
</div>
</div>
</div>
<!-- ═══════════════ بخش ۶: جمع‌بندی ═══════════════ -->
<div class="section">
<div class="section-header">
<div class="section-number">۶</div>
<div class="section-title">
<h3>جمع‌بندی و گام‌های بعدی</h3>
<div class="subtitle">Summary & Next Steps</div>
</div>
</div>
<div class="section-content">
<p>xKanban پاسخی عملی و مهندسی‌شده به یکی از رایج‌ترین چالش‌های تیم‌های مدرن است: مدیریت بصری کارها بدون پیچیدگی، بدون هزینه و بدون وابستگی. این ابزار از دل تجربه واقعی در مدیریت پروژه‌های نرم‌افزاری متولد شده و هر ویژگی آن، پاسخی مستقیم به یک نیاز واقعی است.</p>
<div class="conclusion-box">
<h3>🎯 چرا xKanban؟</h3>
<p>زیرا مدیریت پروژه نباید خودش یک پروژه باشد.</p>
<p>xKanban با ترکیب سادگی، قدرت و استقلال، ابزاری را ارائه می‌دهد که از لحظه اول قابل استفاده است، داده‌های شما را در اختیار خودتان نگه می‌دارد و هیچ هزینه‌ای بر دوش سازمان نمی‌گذارد.</p>
<div class="highlight">
<strong>💎 ارزش نهایی:</strong><br>
صفر هزینه + صفر وابستگی + صفر پیچیدگی = ۱۰۰٪ بهره‌وری
</div>
</div>
<h4 style="margin-top: 25px; color: var(--primary); font-size: 16px;">گام‌های پیشنهادی برای شروع:</h4>
<table class="styled-table">
<thead>
<tr>
<th>گام</th>
<th>اقدام</th>
<th>زمان تخمینی</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>۱</strong></td>
<td>فایل xKanban.html را در مرورگر باز کنید</td>
<td>۳ ثانیه</td>
</tr>
<tr>
<td><strong>۲</strong></td>
<td>یک پروژه و برد آزمایشی ایجاد کنید</td>
<td>۲ دقیقه</td>
</tr>
<tr>
<td><strong>۳</strong></td>
<td>ستون‌ها و کارت‌های واقعی تیم خود را وارد کنید</td>
<td>۱۰ دقیقه</td>
</tr>
<tr>
<td><strong>۴</strong></td>
<td>تگ‌ها و مسئولین را تعریف کنید</td>
<td>۵ دقیقه</td>
</tr>
<tr>
<td><strong>۵</strong></td>
<td>پروژه را به‌صورت فایل JSON ذخیره کنید</td>
<td>۱ دقیقه</td>
</tr>
<tr class="highlight-row">
<td><strong>۶</strong></td>
<td>از xKanban لذت ببرید! 🎉</td>
<td>همیشگی</td>
</tr>
</tbody>
</table>
<div class="info-box">
<strong>📞 تماس و پشتیبانی:</strong> برای دریافت مشاوره فنی، سفارشی‌سازی xKanban بر اساس نیازهای خاص سازمانی یا یکپارچگی با سیستم‌های موجود، آماده برگزاری جلسه فنی هستیم. طراحی، تحلیل و توسعه توسط <strong>هادی خزاعی اصل</strong>، معمار و توسعه‌دهنده ارشد نرم‌افزار.
</div>
</div>
</div>
<div class="page-info">
این مستند جهت معرفی محصول و تحلیل فنی تهیه شده است. هرگونه استفاده تجاری از محتوای این مستند بدون اجازه کتبی ممنوع است.
</div>
</div>
<!-- ═══════════════ FOOTER ═══════════════ -->
<footer class="document-footer">
<div class="footer-brand">طراحی، تحلیل و توسعه: هادی خزاعی اصل</div>
<div style="font-size: 11px; opacity: 0.8; margin-bottom: 5px;">معمار و توسعه‌دهنده ارشد نرم‌افزار | متخصص .NET و Angular</div>
<div class="footer-divider"></div>
<div>تاریخ تهیه: یکشنبه ۲۲ شهریور ۱۴۰۵ (۱۳ سپتامبر ۲۰۲۶) &nbsp;|&nbsp; ساعت: ۱۰:۳۰ &nbsp;|&nbsp; نسخه: ۱.۰.۰ &nbsp;|&nbsp; طبقه‌بندی: عمومی</div>
</footer>
</div>
</body>
</html>