Spaces:
Running
Running
| <html dir="rtl" lang="ar"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>المنصة القانونية الذكية - وإنشاء العقود</title> | |
| <!-- ربط مكتبات Tailwind وFont Awesome --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" /> | |
| <!-- ربط مكتبة jsPDF لتحويل النص إلى PDF --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <style> | |
| @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap"); | |
| :root { | |
| --primary-color: #2563eb; | |
| --primary-hover: #1d4ed8; | |
| --background-light: #f8fafc; | |
| --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| body { | |
| font-family: "Tajawal", sans-serif; | |
| background: var(--background-light); | |
| } | |
| /* الشريط الجانبي */ | |
| .sidebar { | |
| background: white; | |
| width: 280px; | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| height: 100vh; | |
| z-index: 40; | |
| transition: transform 0.3s ease; | |
| box-shadow: var(--card-shadow); | |
| } | |
| .main-content { | |
| margin-right: 280px; | |
| transition: margin 0.3s ease; | |
| min-height: 100vh; | |
| padding: 2rem; | |
| background: var(--background-light); | |
| } | |
| .nav-link { | |
| display: flex; | |
| align-items: center; | |
| padding: 1rem 1.5rem; | |
| color: #374151; | |
| transition: all 0.3s ease; | |
| border-radius: 0.5rem; | |
| margin: 0.25rem 0.5rem; | |
| } | |
| .nav-link:hover { | |
| background: #f3f4f6; | |
| color: var(--primary-color); | |
| } | |
| .nav-link.active { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .feature-card { | |
| background: white; | |
| border-radius: 1rem; | |
| box-shadow: var(--card-shadow); | |
| transition: all 0.3s ease; | |
| overflow: hidden; | |
| height: 100%; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .action-button { | |
| background: var(--primary-color); | |
| color: white; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| transition: all 0.3s ease; | |
| border: none; | |
| font-weight: 500; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .action-button:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .input-group { | |
| position: relative; | |
| } | |
| .input-group.focused input, | |
| .input-group.focused textarea { | |
| border-color: var(--primary-color); | |
| transform: translateY(-2px); | |
| } | |
| .loading-spinner { | |
| border: 3px solid #f3f3f3; | |
| border-radius: 50%; | |
| border-top: 3px solid var(--primary-color); | |
| width: 24px; | |
| height: 24px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .response-container { | |
| white-space: pre-wrap; | |
| font-family: "Tajawal", sans-serif; | |
| line-height: 1.6; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| /* تنسيق قسم إنشاء العقود */ | |
| .split-screen { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| margin-top: 1rem; | |
| } | |
| .contract-card { | |
| background: white; | |
| border-radius: 1.5rem; | |
| box-shadow: var(--card-shadow); | |
| padding: 2rem; | |
| border: 1px solid #f3f4f6; | |
| } | |
| .contract-output { | |
| background: #fafafa; | |
| border-radius: 1rem; | |
| padding: 2rem; | |
| min-height: 300px; | |
| line-height: 1.8; | |
| font-size: 1.1rem; | |
| border: 1px solid #f3f4f6; | |
| white-space: pre-wrap; | |
| } | |
| .copy-btn { | |
| position: absolute; | |
| top: 1rem; | |
| left: 1rem; | |
| padding: 0.5rem 1rem; | |
| background: #f3f4f6; | |
| border-radius: 0.75rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.9rem; | |
| color: #4b5563; | |
| } | |
| .copy-btn:hover { | |
| background: #e5e7eb; | |
| } | |
| .success-message { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| background: #10b981; | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 1rem; | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| .section-title { | |
| font-size: 1.25rem; | |
| color: #1f2937; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 0.75rem; | |
| border-bottom: 2px solid #e5e7eb; | |
| font-weight: 600; | |
| } | |
| /* تحسين التنسيق على الأجهزة المحمولة */ | |
| @media (max-width: 768px) { | |
| .sidebar { transform: translateX(100%); } | |
| .sidebar.open { transform: translateX(0); } | |
| .main-content { margin-right: 0; } | |
| .split-screen { grid-template-columns: 1fr; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- زر إظهار/إخفاء الشريط الجانبي --> | |
| <button id="sidebarToggle" class="fixed top-4 right-4 z-50 p-2 rounded-lg bg-white shadow-lg md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <!-- الشريط الجانبي --> | |
| <aside class="sidebar"> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-4 mb-8"> | |
| <!-- استخدام الصورة المطلوبة كشعار --> | |
| <img src="https://ufastpro.com/wp-content/uploads/2025/02/تصميم-بدون-عنوان.png" alt="شعار المنصة" class="w-12 h-12 rounded-full" /> | |
| <div> | |
| <h1 class="text-xl font-bold text-gray-800">المنصة القانونية</h1> | |
| <p class="text-sm text-gray-500">خدمات قانونية ذكية</p> | |
| </div> | |
| </div> | |
| <nav class="space-y-1"> | |
| <a href="#" class="nav-link active" data-section="home"> | |
| <i class="fas fa-home ml-3"></i> | |
| <span>الرئيسية</span> | |
| </a> | |
| <a href="#" class="nav-link" data-section="analysis"> | |
| <i class="fas fa-balance-scale ml-3"></i> | |
| <span>التحليل القانوني</span> | |
| </a> | |
| <a href="#" class="nav-link" data-section="mindMap"> | |
| <i class="fas fa-project-diagram ml-3"></i> | |
| <span>خريطة التفكير</span> | |
| </a> | |
| <a href="#" class="nav-link" data-section="search"> | |
| <i class="fas fa-search ml-3"></i> | |
| <span>البحث القانوني</span> | |
| </a> | |
| <a href="#" class="nav-link" data-section="documents"> | |
| <i class="fas fa-file-alt ml-3"></i> | |
| <span>المستندات</span> | |
| </a> | |
| <a href="#" class="nav-link" data-section="translation"> | |
| <i class="fas fa-language ml-3"></i> | |
| <span>الترجمة القانونية</span> | |
| </a> | |
| <a href="#" class="nav-link" data-section="consultation"> | |
| <i class="fas fa-comments ml-3"></i> | |
| <span>استشارة قانونية</span> | |
| </a> | |
| <!-- رابط قسم إنشاء العقود --> | |
| <a href="#" class="nav-link" data-section="contracts"> | |
| <i class="fas fa-file-contract ml-3"></i> | |
| <span>العقود</span> | |
| </a> | |
| <a href="#" class="nav-link" data-section="precedents"> | |
| <i class="fas fa-gavel ml-3"></i> | |
| <span>الأحكام والسوابق</span> | |
| </a> | |
| </nav> | |
| </div> | |
| </aside> | |
| <!-- المحتوى الرئيسي --> | |
| <main class="main-content"> | |
| <!-- بحث عالمي --> | |
| <div class="search-container mb-6"> | |
| <input type="text" class="search-input w-full p-3 rounded border" placeholder="ابحث في المنصة..." id="globalSearch" /> | |
| <i class="fas fa-search absolute top-1/2 right-4 transform -translate-y-1/2 text-gray-400"></i> | |
| </div> | |
| <!-- قسم الرئيسية --> | |
| <section id="home" class="section"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">الخدمات القانونية</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- بطاقات الخدمة --> | |
| <div class="feature-card p-6"> | |
| <div class="text-center"> | |
| <i class="fas fa-balance-scale text-3xl mb-4 text-blue-600"></i> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">التحليل القانوني</h3> | |
| <p class="text-gray-600 mb-4"> | |
| تحليل متكامل للقضايا والمستندات القانونية باستخدام الذكاء الاصطناعي | |
| </p> | |
| <button class="action-button" onclick="showSection('analysis')">ابدأ التحليل</button> | |
| </div> | |
| </div> | |
| <div class="feature-card p-6"> | |
| <div class="text-center"> | |
| <i class="fas fa-project-diagram text-3xl mb-4 text-blue-600"></i> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">خريطة التفكير</h3> | |
| <p class="text-gray-600 mb-4"> | |
| إنشاء خرائط ذهنية للقضايا القانونية وتحليل العلاقات | |
| </p> | |
| <button class="action-button" onclick="showSection('mindMap')">إنشاء خريطة</button> | |
| </div> | |
| </div> | |
| <div class="feature-card p-6"> | |
| <div class="text-center"> | |
| <i class="fas fa-search text-3xl mb-4 text-blue-600"></i> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">البحث القانوني</h3> | |
| <p class="text-gray-600 mb-4"> | |
| بحث متقدم في السوابق والقضايا المشابهة | |
| </p> | |
| <button class="action-button" onclick="showSection('search')">ابدأ البحث</button> | |
| </div> | |
| </div> | |
| <div class="feature-card p-6"> | |
| <div class="text-center"> | |
| <i class="fas fa-file-alt text-3xl mb-4 text-blue-600"></i> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">المستندات</h3> | |
| <p class="text-gray-600 mb-4"> | |
| إنشاء وتحرير المستندات القانونية بمساعدة الذكاء الاصطناعي | |
| </p> | |
| <button class="action-button" onclick="showSection('documents')">إنشاء مستند</button> | |
| </div> | |
| </div> | |
| <div class="feature-card p-6"> | |
| <div class="text-center"> | |
| <i class="fas fa-language text-3xl mb-4 text-blue-600"></i> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">الترجمة القانونية</h3> | |
| <p class="text-gray-600 mb-4"> | |
| ترجمة احترافية للوثائق القانونية بدقة عالية مع إمكانية تنزيلها كملف PDF | |
| </p> | |
| <button class="action-button" onclick="showSection('translation')">ترجم الآن</button> | |
| </div> | |
| </div> | |
| <div class="feature-card p-6"> | |
| <div class="text-center"> | |
| <i class="fas fa-comments text-3xl mb-4 text-blue-600"></i> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">استشارة قانونية</h3> | |
| <p class="text-gray-600 mb-4"> | |
| احصل على استشارة قانونية فورية من خبرائنا | |
| </p> | |
| <button class="action-button" onclick="showSection('consultation')">استشر الآن</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- الأقسام الأخرى --> | |
| <!-- قسم التحليل القانوني --> | |
| <section id="analysis" class="section hidden"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">التحليل القانوني</h2> | |
| <div class="input-group bg-white rounded p-6 shadow"> | |
| <!-- حقل رفع ملف PDF (اختياري) --> | |
| <input type="file" id="analysisPDF" accept=".pdf" class="mb-4" /> | |
| <textarea class="w-full p-3 border rounded" placeholder="اكتب وصف القضية أو المستند الذي تريد تحليله..."></textarea> | |
| <button class="action-button mt-4" onclick="handleSubmit('analysis', 'قم بتحليل هذه القضية: ')">تحليل</button> | |
| <div id="analysisResult" class="mt-4 response-container"></div> | |
| </div> | |
| </section> | |
| <!-- قسم إنشاء المستندات القانونية --> | |
| <section id="documents" class="section hidden"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">إنشاء مستند قانوني</h2> | |
| <div class="input-group bg-white rounded p-6 shadow"> | |
| <textarea class="w-full p-3 border rounded" placeholder="اكتب وصف المستند المطلوب إنشاؤه..."></textarea> | |
| <button class="action-button mt-4" onclick="handleSubmit('documents', 'قم بإنشاء مستند قانوني بناءً على الوصف التالي: ')">إنشاء المستند</button> | |
| <div id="documentsResult" class="mt-4 response-container"></div> | |
| </div> | |
| </section> | |
| <!-- قسم خريطة التفكير القانونية --> | |
| <section id="mindMap" class="section hidden"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">خريطة التفكير القانونية</h2> | |
| <div class="input-group bg-white rounded p-6 shadow"> | |
| <textarea class="w-full p-3 border rounded" placeholder="اكتب وصف الموضوع الذي تريد إنشاء خريطة ذهنية له..."></textarea> | |
| <button class="action-button mt-4" onclick="handleSubmit('mindMap', 'قم بإنشاء خريطة ذهنية قانونية للموضوع التالي: ')">إنشاء خريطة التفكير</button> | |
| <div id="mindMapResult" class="mt-4 response-container"></div> | |
| </div> | |
| </section> | |
| <!-- قسم البحث القانوني --> | |
| <section id="search" class="section hidden"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">البحث القانوني</h2> | |
| <div class="input-group bg-white rounded p-6 shadow"> | |
| <textarea class="w-full p-3 border rounded" placeholder="اكتب استعلام البحث القانوني..."></textarea> | |
| <button class="action-button mt-4" onclick="handleSubmit('search', 'ابحث عن معلومات قانونية حول: ')">بحث</button> | |
| <div id="searchResult" class="mt-4 response-container"></div> | |
| </div> | |
| </section> | |
| <!-- قسم الترجمة القانونية --> | |
| <section id="translation" class="section hidden"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">الترجمة القانونية</h2> | |
| <div class="input-group bg-white rounded p-6 shadow"> | |
| <textarea class="w-full p-3 border rounded" placeholder="اكتب النص المراد ترجمته..."></textarea> | |
| <div class="flex gap-4 my-4"> | |
| <select class="p-3 rounded border w-full" id="fromLang"> | |
| <option value="ar">العربية</option> | |
| <option value="en">الإنجليزية</option> | |
| </select> | |
| <select class="p-3 rounded border w-full" id="toLang"> | |
| <option value="en">الإنجليزية</option> | |
| <option value="ar">العربية</option> | |
| </select> | |
| </div> | |
| <button class="action-button" onclick="handleSubmit('translation', 'قم بترجمة هذا النص القانوني: ')">ترجمة</button> | |
| <div id="translationResult" class="mt-4 response-container"></div> | |
| <button id="downloadPDFButton" class="action-button mt-4">تنزيل الترجمة كملف PDF</button> | |
| </div> | |
| </section> | |
| <!-- قسم الاستشارة القانونية --> | |
| <section id="consultation" class="section hidden"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">استشارة قانونية</h2> | |
| <div class="input-group bg-white rounded p-6 shadow"> | |
| <textarea class="w-full p-3 border rounded" placeholder="اكتب سؤالك القانوني هنا..."></textarea> | |
| <button class="action-button mt-4" onclick="handleSubmit('consultation', 'أحتاج استشارة قانونية في الموضوع التالي: ')">احصل على استشارة</button> | |
| <div id="consultationResult" class="mt-4 response-container"></div> | |
| </div> | |
| </section> | |
| <!-- قسم إنشاء العقود --> | |
| <section id="contracts" class="section hidden"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">منشئ العقود المصري الذكي</h2> | |
| <div class="split-screen"> | |
| <!-- نموذج بيانات العقد --> | |
| <div class="contract-card"> | |
| <div class="space-y-6"> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">عنوان العقد:</label> | |
| <input type="text" id="contractTitle" placeholder="عنوان العقد" class="w-full p-2 border rounded" /> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">تاريخ تحرير العقد:</label> | |
| <input type="date" id="contractDate" class="w-full p-2 border rounded" /> | |
| </div> | |
| <h3 class="section-title">بيانات الطرف الأول</h3> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">اسم الطرف الأول:</label> | |
| <input type="text" id="firstPartyName" placeholder="الاسم الكامل" class="w-full p-2 border rounded" /> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">الرقم القومي للطرف الأول:</label> | |
| <input type="text" id="firstPartyID" placeholder="14 رقم" maxlength="14" class="w-full p-2 border rounded" /> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">الصفة:</label> | |
| <input type="text" id="firstPartyTitle" placeholder="مثال: مالك، مدير شركة" class="w-full p-2 border rounded" /> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">جنسية الطرف الأول:</label> | |
| <input type="text" id="firstPartyNationality" placeholder="الجنسية" value="مصري" class="w-full p-2 border rounded" /> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">عنوان الطرف الأول:</label> | |
| <input type="text" id="firstPartyAddress" placeholder="العنوان التفصيلي" class="w-full p-2 border rounded" /> | |
| </div> | |
| <h3 class="section-title">بيانات الطرف الثاني</h3> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">اسم الطرف الثاني:</label> | |
| <input type="text" id="secondPartyName" placeholder="الاسم الكامل" class="w-full p-2 border rounded" /> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">الرقم القومي للطرف الثاني:</label> | |
| <input type="text" id="secondPartyID" placeholder="14 رقم" maxlength="14" class="w-full p-2 border rounded" /> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">الصفة:</label> | |
| <input type="text" id="secondPartyTitle" placeholder="مثال: مستأجر، مشتري" class="w-full p-2 border rounded" /> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">جنسية الطرف الثاني:</label> | |
| <input type="text" id="secondPartyNationality" placeholder="الجنسية" value="مصري" class="w-full p-2 border rounded" /> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">عنوان الطرف الثاني:</label> | |
| <input type="text" id="secondPartyAddress" placeholder="العنوان التفصيلي" class="w-full p-2 border rounded" /> | |
| </div> | |
| <h3 class="section-title">تفاصيل العقد</h3> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">البند التمهيدي:</label> | |
| <textarea id="contractPreamble" placeholder="اكتب مضمون العقد والغرض منه" class="w-full p-2 border rounded h-24"></textarea> | |
| </div> | |
| <div class="mb-4 input-group"> | |
| <label class="block text-gray-700 font-bold mb-2">بنود العقد:</label> | |
| <textarea id="contractTerms" placeholder="اكتب بنود العقد الأساسية" class="w-full p-2 border rounded h-48"></textarea> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <button id="generateButton" class="action-button">إنشاء العقد</button> | |
| </div> | |
| </div> | |
| <!-- عرض العقد المنشأ مع إمكانية النسخ --> | |
| <div class="contract-card relative"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">العقد المنشأ</h3> | |
| <button class="copy-btn" id="copyButton"> | |
| <i class="fas fa-copy"></i> نسخ العقد | |
| </button> | |
| <div id="contractOutput" class="contract-output"></div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- سكربتات الموقع --> | |
| <script> | |
| // تعريف API الأساسي (نقطة /chat) | |
| const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat'; | |
| const UPLOAD_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/upload'; | |
| // دالة الحصول على البادئة (prompt prefix) بناءً على القسم | |
| function getPromptPrefix(section) { | |
| switch(section) { | |
| case 'analysis': | |
| return 'قم بتحليل هذه القضية: '; | |
| case 'documents': | |
| return 'قم بإنشاء مستند قانوني بناءً على الوصف التالي: '; | |
| case 'mindMap': | |
| return 'قم بإنشاء خريطة ذهنية لحل القضية باستخدام تقنية تونى بوزان الشهيرة: '; | |
| case 'search': | |
| return 'ابحث عن معلومات قانونية حول: [منصات: منصة1، منصة2، منصة3] '; | |
| case 'translation': | |
| return 'قم بترجمة هذا النص القانوني: '; | |
| case 'consultation': | |
| return 'أحتاج استشارة قانونية في الموضوع التالي: '; | |
| default: | |
| return ''; | |
| } | |
| } | |
| // تفعيل التنقل بين الأقسام | |
| document.querySelectorAll(".nav-link").forEach(link => { | |
| link.addEventListener("click", (e) => { | |
| e.preventDefault(); | |
| const section = e.currentTarget.getAttribute("data-section"); | |
| if(section) { | |
| showSection(section); | |
| // إخفاء الشريط الجانبي على الأجهزة المحمولة بعد النقر | |
| if(window.innerWidth < 768) { | |
| document.querySelector(".sidebar").classList.remove("open"); | |
| } | |
| } | |
| }); | |
| }); | |
| function showSection(sectionId) { | |
| document.querySelectorAll(".section").forEach(section => { | |
| section.classList.add("hidden"); | |
| }); | |
| document.getElementById(sectionId).classList.remove("hidden"); | |
| document.querySelectorAll(".nav-link").forEach(link => { | |
| link.classList.remove("active"); | |
| if (link.getAttribute("data-section") === sectionId) { | |
| link.classList.add("active"); | |
| } | |
| }); | |
| } | |
| // زر القائمة على الهاتف | |
| document.getElementById("sidebarToggle").addEventListener("click", () => { | |
| document.querySelector(".sidebar").classList.toggle("open"); | |
| }); | |
| // تحسين تأثير التركيز على حقول الإدخال | |
| document.querySelectorAll("input, textarea").forEach(element => { | |
| element.addEventListener("focus", function() { | |
| const group = this.closest(".input-group"); | |
| if(group) group.classList.add("focused"); | |
| this.style.transform = 'translateY(-2px)'; | |
| }); | |
| element.addEventListener("blur", function() { | |
| const group = this.closest(".input-group"); | |
| if(group) group.classList.remove("focused"); | |
| this.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| // دالة إرسال الطلبات لكافة الأقسام؛ تأخذ معاملين: القسم و (اختياري) prompt مخصص | |
| async function handleSubmit(section, customPrompt) { | |
| const container = document.getElementById(section); | |
| const resultDiv = container.querySelector(".response-container"); | |
| // إذا كان القسم "analysis" نتعامل مع احتمال وجود ملف PDF ونص | |
| if (section === 'analysis') { | |
| const fileInput = container.querySelector("#analysisPDF"); | |
| const textArea = container.querySelector("textarea"); | |
| const text = textArea.value.trim(); | |
| resultDiv.innerHTML = ''; // مسح النتائج السابقة | |
| let filePromise = null, textPromise = null; | |
| // إذا تم إرفاق ملف PDF نقوم برفعه وتحليله | |
| if (fileInput && fileInput.files && fileInput.files.length > 0) { | |
| const file = fileInput.files[0]; | |
| let formData = new FormData(); | |
| // استخدام المفتاح "files" ليتوافق مع نقطة النهاية في FastAPI | |
| formData.append("files", file); | |
| resultDiv.innerHTML += '<div id="fileAnalysisSpinner" class="loading-spinner"></div>'; | |
| filePromise = fetch(UPLOAD_URL, { | |
| method: "POST", | |
| body: formData | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error("فشل رفع الملف"); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => data.response || "تم تحليل الملف بنجاح") | |
| .catch(error => { | |
| console.error("File analysis error:", error); | |
| return '<div class="text-red-500">حدث خطأ في رفع الملف. يرجى المحاولة مرة أخرى.</div>'; | |
| }); | |
| } | |
| // إذا وُجد نص للتحليل (سواءً مع الملف أو بدونه) | |
| if (text) { | |
| resultDiv.innerHTML += '<div id="textAnalysisSpinner" class="loading-spinner"></div>'; | |
| const payload = { | |
| message: (customPrompt || getPromptPrefix(section)) + text, | |
| history: [] | |
| }; | |
| textPromise = fetch(API_URL, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify(payload) | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error("فشل الاستجابة من الخادم"); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => data.response || "") | |
| .catch(error => { | |
| console.error("Text analysis error:", error); | |
| return '<div class="text-red-500">حدث خطأ في تحليل النص. يرجى المحاولة مرة أخرى.</div>'; | |
| }); | |
| } | |
| // انتظار انتهاء العمليتين (إن وُجدتا) | |
| const fileResult = filePromise ? await filePromise : null; | |
| const textResult = textPromise ? await textPromise : null; | |
| // عرض النتائج النهائية | |
| resultDiv.innerHTML = ''; | |
| if (fileResult) { | |
| resultDiv.innerHTML += `<div><strong>نتيجة تحليل الملف:</strong><br>${fileResult}</div><br>`; | |
| } | |
| if (textResult) { | |
| resultDiv.innerHTML += `<div><strong>نتيجة تحليل النص:</strong><br>${textResult}</div>`; | |
| } | |
| if (!fileResult && !textResult) { | |
| alert("الرجاء إدخال نص أو إرفاق ملف PDF"); | |
| return; | |
| } | |
| } else { | |
| // للأقسام الأخرى التي لا تتطلب رفع ملفات | |
| const textArea = container.querySelector("textarea"); | |
| const text = textArea.value.trim(); | |
| if (!text) { | |
| alert("الرجاء إدخال نص"); | |
| return; | |
| } | |
| const payload = { | |
| message: (customPrompt || getPromptPrefix(section)) + text, | |
| history: [] | |
| }; | |
| resultDiv.innerHTML = '<div class="loading-spinner"></div>'; | |
| try { | |
| const response = await fetch(API_URL, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify(payload) | |
| }); | |
| if (!response.ok) { | |
| throw new Error("فشل الاستجابة من الخادم"); | |
| } | |
| const data = await response.json(); | |
| resultDiv.innerHTML = data.response || ""; | |
| } catch (error) { | |
| console.error("Error:", error); | |
| resultDiv.innerHTML = '<div class="text-red-500">حدث خطأ. يرجى المحاولة مرة أخرى.</div>'; | |
| } | |
| } | |
| } | |
| // وظيفة زر النسخ في قسم إنشاء العقود | |
| document.getElementById("copyButton").addEventListener("click", async function() { | |
| const contractText = document.getElementById("contractOutput").innerText; | |
| try { | |
| await navigator.clipboard.writeText(contractText); | |
| showSuccessMessage("تم نسخ العقد بنجاح!"); | |
| } catch (err) { | |
| console.error("فشل نسخ النص:", err); | |
| } | |
| }); | |
| // وظيفة إظهار رسالة النجاح عند النسخ | |
| function showSuccessMessage(message) { | |
| const successMessage = document.createElement("div"); | |
| successMessage.className = "success-message"; | |
| successMessage.textContent = message; | |
| document.body.appendChild(successMessage); | |
| setTimeout(() => { | |
| successMessage.style.opacity = "0"; | |
| setTimeout(() => successMessage.remove(), 300); | |
| }, 2000); | |
| } | |
| // التحقق من صحة الرقم القومي للطرف الأول والثاني | |
| document.querySelectorAll("#firstPartyID, #secondPartyID").forEach(input => { | |
| input.addEventListener("input", function() { | |
| this.value = this.value.replace(/[^0-9]/g, ''); | |
| if (this.value.length > 14) { | |
| this.value = this.value.slice(0, 14); | |
| } | |
| }); | |
| }); | |
| // وظيفة تنزيل الترجمة كملف PDF باستخدام مكتبة jsPDF | |
| document.getElementById("downloadPDFButton").addEventListener("click", function() { | |
| const { jsPDF } = window.jspdf; | |
| const doc = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" }); | |
| const content = document.getElementById("translationResult").innerText; | |
| if (!content.trim()) { | |
| alert("لا يوجد نص للترجمة لتنزيله"); | |
| return; | |
| } | |
| doc.setFont("Tajawal", "normal"); | |
| doc.text(content, 40, 60, { maxWidth: 515 }); | |
| doc.save("translation.pdf"); | |
| }); | |
| // وظيفة إضافة حقل جديد في قسم خريطة التفكير | |
| document.getElementById("addMindMapField")?.addEventListener("click", function() { | |
| const container = document.getElementById("mindMapFields"); | |
| const newFieldDiv = document.createElement("div"); | |
| newFieldDiv.className = "mb-4"; | |
| newFieldDiv.innerHTML = `<label class="block text-gray-700 font-bold mb-2">خط جديد:</label> | |
| <input type="text" class="w-full p-3 border rounded" placeholder="اكتب فكرة جديدة" />`; | |
| container.appendChild(newFieldDiv); | |
| }); | |
| // دالة إنشاء خريطة التفكير باستخدام الحقول المتعددة | |
| function handleMindMap() { | |
| const inputs = document.querySelectorAll("#mindMapFields input"); | |
| let collectedText = ""; | |
| inputs.forEach((input, index) => { | |
| const value = input.value.trim(); | |
| if(value) { | |
| collectedText += `الخيط ${index + 1}: ${value}\n`; | |
| } | |
| }); | |
| if (!collectedText.trim()) { | |
| alert("الرجاء إدخال بعض الأفكار لإنشاء خريطة التفكير"); | |
| return; | |
| } | |
| const resultDiv = document.getElementById("mindMapResult"); | |
| const prompt = getPromptPrefix("mindMap") + "\n" + collectedText + | |
| "\nاستخدم منهجيات قوية مثل تحليل SWOT و5 خطوات لتحليل الأسباب الجذرية مع النظر في البدائل القانونية لتنظيم القضية بشكل احترافي."; | |
| resultDiv.innerHTML = '<div class="loading-spinner"></div>'; | |
| fetch(API_URL, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ message: prompt, history: [] }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| resultDiv.innerHTML = data.response || ""; | |
| }) | |
| .catch(error => { | |
| console.error("Error:", error); | |
| resultDiv.innerHTML = '<div class="text-red-500">حدث خطأ. يرجى المحاولة مرة أخرى.</div>'; | |
| }); | |
| } | |
| // تهيئة الصفحة بالقسم الافتراضي "home" | |
| document.addEventListener("DOMContentLoaded", () => { | |
| showSection("home"); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |