231 lines
12 KiB
HTML
231 lines
12 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>المحلل الذكي — Smart System Analyst</title>
|
|
<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">
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="bg-gradient"></div>
|
|
<div class="bg-orbs">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
</div>
|
|
|
|
<div id="welcome" class="welcome-overlay">
|
|
<div class="welcome-card glass">
|
|
<div class="logo-mark">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M8 12h8M12 8v8"/></svg>
|
|
</div>
|
|
<h1>المحلل الذكي</h1>
|
|
<p class="tagline">حلّل المتطلبات، استخرج Actors / Use Cases / Inputs-Outputs، قارن FP مع UCP، ثم ابنِ خطة Sprint/WBS أولية قابلة للحفظ والاستئناف.</p>
|
|
|
|
<label class="field-label">عنوان المشروع</label>
|
|
<input id="project-title" type="text" placeholder="مثال: نظام إدارة صالونات التجميل" autocomplete="off"/>
|
|
<button id="start-btn" class="btn-primary">
|
|
<span>ابدأ جلسة جديدة</span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
|
|
</button>
|
|
|
|
<div class="drafts-panel">
|
|
<div class="drafts-head">
|
|
<span class="field-label">المسودات المحفوظة</span>
|
|
<span class="pill-note">Session Persistence</span>
|
|
</div>
|
|
<div id="welcome-drafts" class="draft-list compact">
|
|
<div class="draft-empty">لا توجد مسودات محفوظة بعد. ابدأ جلسة جديدة أو حمّل SRS مباشرة بعد البدء.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="app" class="app-shell hidden">
|
|
<aside class="sidebar glass">
|
|
<div class="sidebar-header">
|
|
<div class="brand-dot"></div>
|
|
<div>
|
|
<div class="brand-title">المحلل الذكي</div>
|
|
<div class="brand-sub" id="project-name">—</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-label">Function Points</div>
|
|
<div class="stat-value" id="fp-count">0</div>
|
|
<div class="stat-meta">
|
|
<span>إجمالي FP: <b id="fp-total">0</b></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-grid-2">
|
|
<div class="stat-card stat-mini">
|
|
<div class="stat-label">Use Cases</div>
|
|
<div class="stat-value mini" id="uc-count">0</div>
|
|
</div>
|
|
<div class="stat-card stat-mini">
|
|
<div class="stat-label">Inputs / Outputs</div>
|
|
<div class="stat-value mini" id="io-count">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card planner-card">
|
|
<div class="stat-label">إعدادات التخطيط</div>
|
|
<div class="inline-fields">
|
|
<label class="mini-field">
|
|
<span>المطورون</span>
|
|
<input id="team-size" type="number" min="1" max="20" value="3">
|
|
</label>
|
|
<label class="mini-field">
|
|
<span>السبرنت (أسابيع)</span>
|
|
<input id="sprint-weeks" type="number" min="1" max="6" value="2">
|
|
</label>
|
|
</div>
|
|
<button id="save-planning-btn" class="btn-secondary">تحديث الخطة</button>
|
|
<div id="planning-status" class="hint-line">سيُعاد حساب WBS والمدة المتوقعة فور التحديث.</div>
|
|
</div>
|
|
|
|
<div class="tree-section">
|
|
<div class="section-title">شجرة النظام</div>
|
|
<div id="tree" class="tree">
|
|
<div class="tree-empty">ستظهر الـ Actors والوظائف وهياكل الـ IO هنا تلقائياً.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="drafts-sidebar">
|
|
<div class="section-title">المسودات</div>
|
|
<div id="sidebar-drafts" class="draft-list">
|
|
<div class="draft-empty">لا توجد مسودات بعد.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="export-btn" class="btn-export hidden">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2"/></svg>
|
|
<span>توليد التقرير PDF</span>
|
|
</button>
|
|
</aside>
|
|
|
|
<main class="stage">
|
|
<div class="stage-header">
|
|
<div class="stage-heading">
|
|
<div class="stage-title">جلسة تحليل المتطلبات والتقدير</div>
|
|
<div class="stage-subtitle">الشات هو المساحة الأساسية، ولوحة العمل تظهر فقط عند الحاجة.</div>
|
|
</div>
|
|
<div class="stage-pill" id="stage-pill">تمهيد</div>
|
|
</div>
|
|
|
|
<div id="resume-banner" class="resume-banner glass hidden"></div>
|
|
|
|
<section id="workspace-panel" class="workspace-panel glass collapsed">
|
|
<div class="workspace-bar">
|
|
<div class="workspace-meta">
|
|
<div class="workspace-title-row">
|
|
<div class="workspace-title">لوحة العمل المدمجة</div>
|
|
<span id="workspace-state" class="workspace-state-badge">مطوية</span>
|
|
</div>
|
|
<div id="workspace-summary" class="workspace-summary">ارفع SRS أو راجع الاقتراح من هنا بدون أن تزاحم مساحة الشات.</div>
|
|
</div>
|
|
|
|
<div class="workspace-actions">
|
|
<div class="workspace-tabs" role="tablist" aria-label="لوحة العمل">
|
|
<button id="workspace-tab-srs" class="workspace-tab active" type="button" data-workspace-tab="srs" aria-selected="true">SRS</button>
|
|
<button id="workspace-tab-proposal" class="workspace-tab" type="button" data-workspace-tab="proposal" aria-selected="false">الاقتراح</button>
|
|
</div>
|
|
<button id="workspace-collapse" class="workspace-collapse-btn" type="button" aria-expanded="false" aria-controls="workspace-body">
|
|
<span id="workspace-collapse-text">فتح اللوحة</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="workspace-body" class="workspace-body hidden">
|
|
<div class="tool-panels">
|
|
<div class="tool-card workspace-card active" data-panel="srs" role="tabpanel" aria-labelledby="workspace-tab-srs">
|
|
<div class="tool-header">
|
|
<div>
|
|
<div class="tool-title">رفع ملف SRS أو نص متطلبات</div>
|
|
<div class="tool-subtitle">يدعم TXT / MD / CSV / JSON / SRS / REQ إضافةً إلى PDF النصي، مع إمكانية اللصق اليدوي.</div>
|
|
</div>
|
|
<span class="tool-badge">LLM + Heuristic</span>
|
|
</div>
|
|
|
|
<div class="tool-actions">
|
|
<label class="file-label" for="srs-file">اختر ملفاً</label>
|
|
<input id="srs-file" type="file" accept=".pdf,application/pdf,.txt,.md,.csv,.json,.srs,.req,.text">
|
|
<button id="analyze-srs-btn" class="btn-secondary">حلّل الملف/النص</button>
|
|
</div>
|
|
|
|
<div id="srs-file-name" class="hint-line">لم يتم اختيار ملف بعد.</div>
|
|
<div id="srs-source-note" class="hint-line">يدعم PDF النصي أيضاً. إذا كان الملف عبارة عن صور ممسوحة ضوئياً فستحتاج OCR أو لصق النص يدوياً.</div>
|
|
<textarea id="srs-text" class="tool-textarea" placeholder="أو الصق هنا مقتطفات SRS / المتطلبات الوظيفية والنطاق العام..." rows="4"></textarea>
|
|
</div>
|
|
|
|
<div class="tool-card workspace-card" data-panel="proposal" role="tabpanel" aria-labelledby="workspace-tab-proposal" hidden>
|
|
<div class="tool-header">
|
|
<div>
|
|
<div class="tool-title">الاقتراح الأولي القابل للتعديل</div>
|
|
<div class="tool-subtitle">عدّل القوائم ثم اضغط تأكيد لاعتماد الهيكل الأولي.</div>
|
|
</div>
|
|
<span id="proposal-status" class="tool-badge dim">بانتظار تحليل</span>
|
|
</div>
|
|
|
|
<div id="proposal-summary" class="hint-line">ستظهر هنا أعداد Actors وUse Cases وInputs/Outputs بعد تحليل المستند.</div>
|
|
|
|
<div class="proposal-grid">
|
|
<label class="editor-block">
|
|
<span>Actors — عنصر واحد في كل سطر</span>
|
|
<textarea id="actors-editor" class="editor-textarea" placeholder="المستخدم المدير نظام خارجي"></textarea>
|
|
</label>
|
|
<label class="editor-block">
|
|
<span>Use Cases — الصيغة: العنوان | الفاعل</span>
|
|
<textarea id="usecases-editor" class="editor-textarea" placeholder="تسجيل طلب جديد | العميل اعتماد الطلب | المدير"></textarea>
|
|
</label>
|
|
<label class="editor-block wide">
|
|
<span>Inputs / Outputs — الصيغة: Input أو Output | الاسم | المصدر | الوجهة | الوصف</span>
|
|
<textarea id="io-editor" class="editor-textarea io" placeholder="Input | بيانات الطلب | العميل | النظام | بيانات الطلب الأساسية Output | تقرير شهري | النظام | المدير | تقرير أداء المبيعات"></textarea>
|
|
</label>
|
|
<label class="editor-block wide">
|
|
<span>ملخص النطاق</span>
|
|
<textarea id="scope-editor" class="editor-textarea" placeholder="ملخص نطاق النظام المتوقع..."></textarea>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="tool-actions compact-actions">
|
|
<button id="confirm-srs-btn" class="btn-secondary gold">تأكيد واعتماد الاقتراح</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="chat-shell glass">
|
|
<div id="messages" class="messages"></div>
|
|
|
|
<div class="composer">
|
|
<textarea id="input" placeholder="اكتب ردك هنا... أو اطلب تعديل المقترحات أو سؤالاً جديداً" rows="1"></textarea>
|
|
<button id="send-btn" class="send-btn" title="إرسال">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l14-7-7 14-2-5-5-2z"/></svg>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<aside class="preview glass">
|
|
<div class="preview-header">
|
|
<div class="section-title">لوحة التحليل الحية</div>
|
|
<div class="live-dot"><span></span> مباشر</div>
|
|
</div>
|
|
<div id="preview-content" class="preview-content">
|
|
<div class="preview-empty">سيتشكل هنا ملخص النطاق، Catalog الـ IO، تحليل الفجوة بين FP/UCP، وخطة التنفيذ الأولية.</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script src="/vendor/pdfjs/pdf.min.js"></script>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|