106 lines
4.1 KiB
HTML
106 lines
4.1 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>
|
|
|
|
<!-- Welcome modal -->
|
|
<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">مساعدك التقني لاستخلاص متطلبات النظام وتوليد وثيقة هندسية احترافية.</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>
|
|
</div>
|
|
|
|
<!-- Main app -->
|
|
<div id="app" class="app-shell hidden">
|
|
<!-- Right Sidebar: Roadmap -->
|
|
<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">نقاط الوظائف</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-card">
|
|
<div class="stat-label">حالات الاستخدام</div>
|
|
<div class="stat-value" id="uc-count">0</div>
|
|
</div>
|
|
|
|
<div class="tree-section">
|
|
<div class="section-title">شجرة النظام</div>
|
|
<div id="tree" class="tree">
|
|
<div class="tree-empty">ستظهر الـ Actors والوظائف هنا تلقائياً.</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>
|
|
|
|
<!-- Center: Chat stage -->
|
|
<main class="stage">
|
|
<div class="stage-header">
|
|
<div class="stage-title">جلسة تحليل المتطلبات</div>
|
|
<div class="stage-pill" id="stage-pill">تمهيد</div>
|
|
</div>
|
|
|
|
<div id="messages" class="messages"></div>
|
|
|
|
<div class="composer glass">
|
|
<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>
|
|
</main>
|
|
|
|
<!-- Left: Live preview -->
|
|
<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">سيتشكّل النص الهندسي للتقرير هنا أثناء الحوار.</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html> |