joermd commited on
Commit
e42e61f
·
verified ·
1 Parent(s): 510db31

Update reg.html

Browse files
Files changed (1) hide show
  1. reg.html +173 -142
reg.html CHANGED
@@ -4,10 +4,10 @@
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>المنصة القانونية الذكية - وإنشاء العقود</title>
7
- <!-- تحميل Tailwind CSS وFont Awesome -->
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
9
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
10
- <!-- تحميل مكتبة jsPDF -->
11
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
12
  <style>
13
  @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap");
@@ -18,12 +18,14 @@
18
  --background-light: #f8fafc;
19
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
20
  }
 
21
  body {
22
  font-family: "Tajawal", sans-serif;
23
  background: var(--background-light);
24
  margin: 0;
25
  padding-bottom: 60px; /* مساحة للتذييل */
26
  }
 
27
  /* الشريط الجانبي */
28
  .sidebar {
29
  background: white;
@@ -71,7 +73,7 @@
71
  }
72
  .feature-card:hover {
73
  transform: translateY(-4px);
74
- box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
75
  }
76
  .action-button {
77
  background: var(--primary-color);
@@ -117,7 +119,7 @@
117
  max-height: 400px;
118
  overflow-y: auto;
119
  }
120
- /* تنسيق نتائج خريطة التفكير */
121
  .mind-map-output {
122
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
123
  padding: 1rem;
@@ -125,7 +127,7 @@
125
  border-radius: 1rem;
126
  font-size: 1.1rem;
127
  }
128
- /* تخطيط قسم إنشاء العقود */
129
  .split-screen {
130
  display: grid;
131
  grid-template-columns: 1fr 1fr;
@@ -189,7 +191,7 @@
189
  border-bottom: 2px solid #e5e7eb;
190
  font-weight: 600;
191
  }
192
- /* تحسين العرض على الأجهزة المحمولة */
193
  @media (max-width: 768px) {
194
  .sidebar { transform: translateX(100%); }
195
  .sidebar.open { transform: translateX(0); }
@@ -199,7 +201,7 @@
199
  </style>
200
  </head>
201
  <body>
202
- <!-- زر القائمة (على الهاتف) -->
203
  <button id="sidebarToggle" class="fixed top-4 right-4 z-50 p-2 rounded-lg bg-white shadow-lg md:hidden">
204
  <i class="fas fa-bars text-xl"></i>
205
  </button>
@@ -208,6 +210,7 @@
208
  <aside class="sidebar">
209
  <div class="p-6">
210
  <div class="flex items-center gap-4 mb-8">
 
211
  <img src="https://ufastpro.com/wp-content/uploads/2025/02/تصميم-بدون-عنوان.png" alt="شعار المنصة" class="w-12 h-12 rounded-full" />
212
  <div>
213
  <h1 class="text-xl font-bold text-gray-800">المنصة القانونية</h1>
@@ -215,7 +218,6 @@
215
  </div>
216
  </div>
217
  <nav class="space-y-1">
218
- <!-- استخدام div مع data-section؛ ستعمل الدالة المضافة -->
219
  <div class="nav-link active" data-section="home">
220
  <i class="fas fa-home ml-3"></i>
221
  <span>الرئيسية</span>
@@ -246,11 +248,7 @@
246
  </div>
247
  <div class="nav-link" data-section="precedents">
248
  <i class="fas fa-gavel ml-3"></i>
249
- <span>الأحكام والقوانين</span>
250
- </div>
251
- <div class="nav-link" data-section="latestUpdates">
252
- <i class="fas fa-newspaper ml-3"></i>
253
- <span>آخر التحديثات</span>
254
  </div>
255
  </nav>
256
  </div>
@@ -260,73 +258,73 @@
260
  <main class="main-content">
261
  <!-- بحث عالمي -->
262
  <div class="search-container mb-6 relative">
263
- <input type="text" id="globalSearch" class="search-input w-full p-3 rounded border" placeholder="ابحث في المنصة..." />
264
  <i class="fas fa-search absolute top-1/2 right-4 transform -translate-y-1/2 text-gray-400"></i>
265
  </div>
266
 
267
  <!-- قسم الرئيسية -->
268
  <section id="home" class="section">
269
  <h2 class="text-3xl font-bold text-gray-800 mb-8">الخدمات القانونية</h2>
270
- <!-- مجموعة الخدمات الأساسية -->
271
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
272
- <!-- التحليل القانوني -->
273
  <div class="feature-card p-6">
274
  <div class="text-center">
275
  <i class="fas fa-balance-scale text-3xl mb-4 text-blue-600"></i>
276
  <h3 class="text-xl font-bold text-gray-800 mb-3">التحليل القانوني</h3>
277
- <p class="text-gray-600 mb-4">تحليل متكامل للقضايا والمستندات باستخدام الذكاء الاصطناعي.</p>
 
 
278
  <button class="action-button" onclick="showSection('analysis')">ابدأ التحليل</button>
279
  </div>
280
  </div>
281
- <!-- خريطة التفكير -->
282
  <div class="feature-card p-6">
283
  <div class="text-center">
284
  <i class="fas fa-project-diagram text-3xl mb-4 text-blue-600"></i>
285
  <h3 class="text-xl font-bold text-gray-800 mb-3">خريطة التفكير</h3>
286
- <p class="text-gray-600 mb-4">نظم قضية بشكل إبداعي باستخدام خطوات منهجية قوية.</p>
 
 
287
  <button class="action-button" onclick="showSection('mindMap')">إنشاء خريطة التفكير</button>
288
  </div>
289
  </div>
290
- <!-- البحث القانوني -->
291
  <div class="feature-card p-6">
292
  <div class="text-center">
293
  <i class="fas fa-search text-3xl mb-4 text-blue-600"></i>
294
  <h3 class="text-xl font-bold text-gray-800 mb-3">البحث القانوني</h3>
295
- <p class="text-gray-600 mb-4">ابحث عن معلومات قانونية باستخدام برومبت ثابت يشمل منصات: منصة1، منصة2، منصة3.</p>
 
 
296
  <button class="action-button" onclick="showSection('search')">ابدأ البحث</button>
297
  </div>
298
  </div>
299
- </div>
300
- <!-- مجموعة الخدمات الإضافية -->
301
- <div class="mt-8">
302
- <h2 class="text-2xl font-bold text-gray-800 mb-4">خدمات إضافية</h2>
303
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
304
- <!-- الأعمال الإدارية -->
305
- <div class="feature-card p-6">
306
- <div class="text-center">
307
- <i class="fas fa-cogs text-3xl mb-4 text-blue-600"></i>
308
- <h3 class="text-xl font-bold text-gray-800 mb-3">الأعمال الإدارية</h3>
309
- <p class="text-gray-600 mb-4">الوصول إلى أدوات الإدارة المتقدمة.</p>
310
- <button class="action-button" onclick="window.location.href='admin.html'">الأعمال الإدارية</button>
311
- </div>
312
  </div>
313
- <!-- مقارنة النصوص القانونية -->
314
- <div class="feature-card p-6">
315
- <div class="text-center">
316
- <i class="fas fa-exchange-alt text-3xl mb-4 text-blue-600"></i>
317
- <h3 class="text-xl font-bold text-gray-800 mb-3">مقارنة النصوص القانونية</h3>
318
- <p class="text-gray-600 mb-4">قارن بين نصين قانونيين بسهولة.</p>
319
- <button class="action-button" onclick="showSection('precedents')">مقارنة النصوص</button>
320
- </div>
 
321
  </div>
322
- <!-- آخر التحديثات القانونية -->
323
- <div class="feature-card p-6">
324
- <div class="text-center">
325
- <i class="fas fa-newspaper text-3xl mb-4 text-blue-600"></i>
326
- <h3 class="text-xl font-bold text-gray-800 mb-3">آخر التحديثات القانونية</h3>
327
- <p class="text-gray-600 mb-4">تابع أحدث الأخبار القانونية في مصر.</p>
328
- <button class="action-button" onclick="showSection('latestUpdates')">آخر التحديثات</button>
329
- </div>
 
330
  </div>
331
  </div>
332
  </div>
@@ -363,7 +361,7 @@
363
  <section id="mindMap" class="section hidden">
364
  <h2 class="text-3xl font-bold text-gray-800 mb-4">خريطة التفكير القانونية</h2>
365
  <p class="mb-4 text-gray-700">
366
- أدخل الأفكار والخيوط المتعددة لتنظيم القضية بطريقة إبداعية باستخدام منهجيات مثل تحليل SWOT و5 خطوات لتحليل الأسباب الجذرية. ساعد نفسك على التفكير بعمق مع النموذج.
367
  </p>
368
  <div id="mindMapFields">
369
  <div class="mb-4">
@@ -384,25 +382,58 @@
384
  <div id="mindMapResult" class="mt-4 response-container mind-map-output"></div>
385
  </section>
386
 
387
- <!-- قسم مقارنة النصوص القانونية -->
388
- <section id="precedents" class="section hidden">
389
- <h2 class="text-3xl font-bold text-gray-800 mb-8">مقارنة النصوص القانونية</h2>
390
  <div class="input-group bg-white rounded p-6 shadow">
391
- <textarea class="w-full p-3 border rounded mb-4" placeholder="أدخل النص القانوني الأول للمقارنة..."></textarea>
392
- <textarea class="w-full p-3 border rounded mb-4" placeholder="أدخل النص القانوني الثاني للمقارنة..."></textarea>
393
- <button class="action-button" onclick="handleSubmit('precedents')">مقارنة النصوص القانونية</button>
394
- <div id="precedentsResult" class="mt-4 response-container"></div>
395
  </div>
396
  </section>
397
 
398
- <!-- قسم آخر التحديثات القانونية -->
399
- <section id="latestUpdates" class="section hidden">
400
- <h2 class="text-3xl font-bold text-gray-800 mb-8">آخر التحديثات القانونية في مصر</h2>
401
  <div class="input-group bg-white rounded p-6 shadow">
402
- <button class="action-button" onclick="fetchLatestUpdates()">عرض آخر التحديثات</button>
403
- <div id="latestUpdatesResult" class="mt-4 response-container">
404
- <!-- سيتم تعبئتها بأحدث الأخبار -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
405
  </div>
 
 
 
 
 
 
 
 
 
 
 
406
  </div>
407
  </section>
408
 
@@ -490,16 +521,16 @@
490
  </main>
491
 
492
  <!-- تذييل الصفحة -->
493
- <footer class="fixed bottom-0 left-0 w-full bg-white border-t text-center py-4 text-gray-600">
494
  © Copyright 2025・<span class="font-bold">FASTPRO</span>・All rights reserved.
495
  </footer>
496
 
497
  <!-- سكربتات الموقع -->
498
  <script>
499
- // تأكد من أن عنوان API صالح؛ إذا لم يكن متاحاً ستظهر أخطاء في وحدة التحكم.
500
  const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat';
501
 
502
- // دالة للحصول على البرومبت بناءً على القسم
503
  function getPromptPrefix(section) {
504
  switch(section) {
505
  case 'analysis':
@@ -514,22 +545,19 @@
514
  return 'قم بترجمة هذا النص القانوني: ';
515
  case 'consultation':
516
  return 'أحتاج استشارة قانونية في الموضوع التالي: ';
517
- case 'precedents':
518
- // في حالة المقارنة سيتم تجميع النصين من textarea
519
- return '';
520
  default:
521
  return '';
522
  }
523
  }
524
 
525
- // تفعيل النقر على عناصر القائمة (nav-link)
526
  document.querySelectorAll(".nav-link").forEach(link => {
527
  link.addEventListener("click", (e) => {
528
  e.preventDefault();
529
  const section = e.currentTarget.getAttribute("data-section");
530
  if(section) {
531
  showSection(section);
532
- // إخفاء القائمة على الأجهزة المحمولة
533
  if(window.innerWidth < 768) {
534
  document.querySelector(".sidebar").classList.remove("open");
535
  }
@@ -544,7 +572,7 @@
544
  document.getElementById(sectionId).classList.remove("hidden");
545
  document.querySelectorAll(".nav-link").forEach(link => {
546
  link.classList.remove("active");
547
- if(link.getAttribute("data-section") === sectionId) {
548
  link.classList.add("active");
549
  }
550
  });
@@ -555,47 +583,35 @@
555
  document.querySelector(".sidebar").classList.toggle("open");
556
  });
557
 
558
- // تأثير التركيز على حقول الإدخال
559
- document.querySelectorAll("input, textarea").forEach(el => {
560
- el.addEventListener("focus", function() {
561
  const group = this.closest(".input-group");
562
  if(group) group.classList.add("focused");
563
  this.style.transform = 'translateY(-2px)';
564
  });
565
- el.addEventListener("blur", function() {
 
566
  const group = this.closest(".input-group");
567
  if(group) group.classList.remove("focused");
568
  this.style.transform = 'translateY(0)';
569
  });
570
  });
571
 
572
- // دالة إرسال الطلبات (وتتعامل مع حالة المقارنة في قسم "precedents")
573
  async function handleSubmit(section) {
574
  const container = document.getElementById(section);
575
- let payload = { message: "", history: [] };
576
- let resultDiv = container.querySelector(".response-container");
577
- if(section === "precedents") {
578
- const textareas = container.querySelectorAll("textarea");
579
- if(textareas.length < 2) {
580
- alert("الرجاء إدخال كلا النصين للمقارنة");
581
- return;
582
- }
583
- const text1 = textareas[0].value.trim();
584
- const text2 = textareas[1].value.trim();
585
- if(!text1 || !text2) {
586
- alert("الرجاء إدخال كلا النصين للمقارنة");
587
- return;
588
- }
589
- payload.message = "قم بمقارنة النصين القانونيين التاليين:\nالنص الأول: " + text1 + "\nالنص الثاني: " + text2;
590
- } else {
591
- const textarea = container.querySelector("textarea");
592
- const text = textarea.value.trim();
593
- if(!text) {
594
- alert("الرجاء إدخال نص");
595
- return;
596
- }
597
- payload.message = getPromptPrefix(section) + text;
598
  }
 
 
 
 
599
  try {
600
  resultDiv.innerHTML = '<div class="loading-spinner"></div>';
601
  const response = await fetch(API_URL, {
@@ -603,29 +619,29 @@
603
  headers: { "Content-Type": "application/json" },
604
  body: JSON.stringify(payload)
605
  });
606
- if(!response.ok) {
607
  throw new Error("Network response was not ok");
608
  }
609
  const data = await response.json();
610
  resultDiv.innerHTML = data.response || "";
611
- } catch(error) {
612
  console.error("Error:", error);
613
  resultDiv.innerHTML = '<div class="text-red-500">حدث خطأ. يرجى المحاولة مرة أخرى.</div>';
614
  }
615
  }
616
 
617
- // زر النسخ في قسم العقود
618
  document.getElementById("copyButton").addEventListener("click", async function() {
619
  const contractText = document.getElementById("contractOutput").innerText;
620
  try {
621
  await navigator.clipboard.writeText(contractText);
622
  showSuccessMessage("تم نسخ العقد بنجاح!");
623
- } catch(err) {
624
  console.error("فشل نسخ النص:", err);
625
  }
626
  });
627
 
628
- // إظهار رسالة نجاح النسخ
629
  function showSuccessMessage(message) {
630
  const successMessage = document.createElement("div");
631
  successMessage.className = "success-message";
@@ -637,17 +653,17 @@
637
  }, 2000);
638
  }
639
 
640
- // التحقق من الرقم القومي
641
  document.querySelectorAll("#firstPartyID, #secondPartyID").forEach(input => {
642
  input.addEventListener("input", function() {
643
  this.value = this.value.replace(/[^0-9]/g, '');
644
- if(this.value.length > 14) {
645
  this.value = this.value.slice(0, 14);
646
  }
647
  });
648
  });
649
 
650
- // دالة الحصول على تسمية الحقل (لعرض رسائل الخطأ)
651
  function getFieldLabel(field) {
652
  const labels = {
653
  contractTitle: 'عنوان العقد',
@@ -668,10 +684,12 @@
668
  return labels[field] || field;
669
  }
670
 
671
- // دالة إنشاء العقد
672
  document.getElementById("generateButton").addEventListener("click", async function() {
673
  const button = this;
674
  const outputDiv = document.getElementById("contractOutput");
 
 
675
  const formData = {
676
  contractTitle: document.getElementById("contractTitle").value.trim(),
677
  contractDate: document.getElementById("contractDate").value,
@@ -688,9 +706,12 @@
688
  contractPreamble: document.getElementById("contractPreamble").value.trim(),
689
  contractTerms: document.getElementById("contractTerms").value.trim()
690
  };
 
 
691
  const requiredFields = Object.keys(formData);
692
  const missingFields = requiredFields.filter(field => !formData[field]);
693
- if(missingFields.length > 0) {
 
694
  outputDiv.innerHTML = `
695
  <div class="text-red-500 font-bold mb-4">يرجى ملء جميع الحقول المطلوبة</div>
696
  <ul class="list-disc list-inside text-red-500">
@@ -699,6 +720,8 @@
699
  `;
700
  return;
701
  }
 
 
702
  button.textContent = 'جاري إن��اء العقد...';
703
  button.disabled = true;
704
  outputDiv.innerHTML = `
@@ -707,9 +730,17 @@
707
  <span>جاري إنشاء العقد باستخدام الذكاء الاصطناعي...</span>
708
  </div>
709
  `;
 
710
  try {
 
711
  const dateObj = new Date(formData.contractDate);
712
- const arabicDate = new Intl.DateTimeFormat('ar-EG', { year: 'numeric', month: 'long', day: 'numeric' }).format(dateObj);
 
 
 
 
 
 
713
  const prompt = `قم بإنشاء عقد قانوني مصري رسمي باللغة العربية يتضمن البيانات التالية:
714
 
715
  عنوان العقد: ${formData.contractTitle}
@@ -740,20 +771,31 @@ ${formData.contractTerms}
740
  2. بند حكم التمهيد يوضح أن التمهيد جزء لا يتجزأ من العقد
741
  3. تنسيق قانوني رسمي
742
  4. مكان للتوقيع في النهاية مع كتابة "طرف أول" و "طرف ثاني"`;
 
 
743
  const response = await fetch(API_URL, {
744
  method: 'POST',
745
- headers: { 'Content-Type': 'application/json' },
746
- body: JSON.stringify({ message: prompt, history: [] })
 
 
 
 
 
747
  });
748
- if(!response.ok) {
 
749
  throw new Error(`HTTP error! status: ${response.status}`);
750
  }
 
751
  const data = await response.json();
752
  outputDiv.innerHTML = `<div dir="rtl" style="white-space: pre-wrap;">${data.response}</div>`;
753
- } catch(error) {
 
754
  outputDiv.innerHTML = `
755
  <div class="text-red-600 font-bold">
756
- عذراً، حدث خطأ في إنشاء العقد. يرجى المحاولة مرة أخرى.<br>
 
757
  تفاصيل الخطأ: ${error.message}
758
  </div>
759
  `;
@@ -762,14 +804,14 @@ ${formData.contractTerms}
762
  button.textContent = 'إنشاء العقد';
763
  button.disabled = false;
764
  }
765
- }
766
 
767
- // تنزيل الترجمة كملف PDF
768
  document.getElementById("downloadPDFButton").addEventListener("click", function() {
769
  const { jsPDF } = window.jspdf;
770
  const doc = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" });
771
  const content = document.getElementById("translationResult").innerText;
772
- if(!content.trim()){
773
  alert("لا يوجد نص للترجمة لتنزيله");
774
  return;
775
  }
@@ -778,12 +820,12 @@ ${formData.contractTerms}
778
  doc.save("translation.pdf");
779
  });
780
 
781
- // تنزيل التحليل كملف PDF
782
  document.getElementById("downloadAnalysisPDFButton").addEventListener("click", function() {
783
  const { jsPDF } = window.jspdf;
784
  const doc = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" });
785
  const content = document.getElementById("analysisResult").innerText;
786
- if(!content.trim()){
787
  alert("لا يوجد نص للتحليل لتنزيله");
788
  return;
789
  }
@@ -792,7 +834,7 @@ ${formData.contractTerms}
792
  doc.save("analysis.pdf");
793
  });
794
 
795
- // إضافة حقل جديد في قسم خريطة التفكير
796
  document.getElementById("addMindMapField").addEventListener("click", function() {
797
  const container = document.getElementById("mindMapFields");
798
  const newFieldDiv = document.createElement("div");
@@ -802,23 +844,23 @@ ${formData.contractTerms}
802
  container.appendChild(newFieldDiv);
803
  });
804
 
805
- // إنشاء خريطة التفكير باستخدام الحقول المتعددة
806
  function handleMindMap() {
807
  const inputs = document.querySelectorAll("#mindMapFields input");
808
  let collectedText = "";
809
  inputs.forEach((input, index) => {
810
  const value = input.value.trim();
811
- if(value){
812
- collectedText += `الخيط ${index+1}: ${value}\n`;
813
  }
814
  });
815
- if(!collectedText.trim()){
816
  alert("الرجاء إدخال بعض الأفكار لإنشاء خريطة التفكير");
817
  return;
818
  }
819
  const resultDiv = document.getElementById("mindMapResult");
820
  const prompt = getPromptPrefix("mindMap") + "\n" + collectedText +
821
- "\nاستخدم منهجيات مثل تحليل SWOT و5 خطوات لتحليل الأسباب الجذرية مع النظر في البدائل القانونية لتنظيم القضية بشكل احترافي.";
822
  resultDiv.innerHTML = '<div class="loading-spinner"></div>';
823
  fetch(API_URL, {
824
  method: "POST",
@@ -826,26 +868,15 @@ ${formData.contractTerms}
826
  body: JSON.stringify({ message: prompt, history: [] })
827
  })
828
  .then(response => response.json())
829
- .then(data => { resultDiv.innerHTML = data.response || ""; })
 
 
830
  .catch(error => {
831
  console.error("Error:", error);
832
  resultDiv.innerHTML = '<div class="text-red-500">حدث خطأ. يرجى المحاولة مرة أخرى.</div>';
833
  });
834
  }
835
 
836
- // محاكاة جلب آخر التحديثات القانونية
837
- function fetchLatestUpdates() {
838
- const resultDiv = document.getElementById("latestUpdatesResult");
839
- resultDiv.innerHTML = '<div class="loading-spinner"></div>';
840
- setTimeout(() => {
841
- resultDiv.innerHTML = `<p>آخر التحديثات القانونية في مصر:<br>
842
- - تحديث 1: نص الخبر الأول.<br>
843
- - تحديث 2: نص الخبر الثاني.<br>
844
- - تحديث 3: نص الخبر الثالث.
845
- </p>`;
846
- }, 1000);
847
- }
848
-
849
  // تهيئة الصفحة بالعرض الافتراضي للقسم "home"
850
  document.addEventListener("DOMContentLoaded", () => {
851
  showSection("home");
 
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>المنصة القانونية الذكية - وإنشاء العقود</title>
7
+ <!-- ربط مكتبات Tailwind وFont Awesome -->
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
9
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
10
+ <!-- ربط مكتبة jsPDF لتحويل النص إلى PDF -->
11
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
12
  <style>
13
  @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap");
 
18
  --background-light: #f8fafc;
19
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
20
  }
21
+
22
  body {
23
  font-family: "Tajawal", sans-serif;
24
  background: var(--background-light);
25
  margin: 0;
26
  padding-bottom: 60px; /* مساحة للتذييل */
27
  }
28
+
29
  /* الشريط الجانبي */
30
  .sidebar {
31
  background: white;
 
73
  }
74
  .feature-card:hover {
75
  transform: translateY(-4px);
76
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
77
  }
78
  .action-button {
79
  background: var(--primary-color);
 
119
  max-height: 400px;
120
  overflow-y: auto;
121
  }
122
+ /* تنسيق مميز لنتائج خريطة التفكير */
123
  .mind-map-output {
124
  background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
125
  padding: 1rem;
 
127
  border-radius: 1rem;
128
  font-size: 1.1rem;
129
  }
130
+ /* تنسيق قسم إنشاء العقود */
131
  .split-screen {
132
  display: grid;
133
  grid-template-columns: 1fr 1fr;
 
191
  border-bottom: 2px solid #e5e7eb;
192
  font-weight: 600;
193
  }
194
+ /* تحسين التنسيق على الأجهزة المحمولة */
195
  @media (max-width: 768px) {
196
  .sidebar { transform: translateX(100%); }
197
  .sidebar.open { transform: translateX(0); }
 
201
  </style>
202
  </head>
203
  <body>
204
+ <!-- زر إظهار/إخفاء الشريط الجانبي -->
205
  <button id="sidebarToggle" class="fixed top-4 right-4 z-50 p-2 rounded-lg bg-white shadow-lg md:hidden">
206
  <i class="fas fa-bars text-xl"></i>
207
  </button>
 
210
  <aside class="sidebar">
211
  <div class="p-6">
212
  <div class="flex items-center gap-4 mb-8">
213
+ <!-- استخدام الصورة المطلوبة كشعار -->
214
  <img src="https://ufastpro.com/wp-content/uploads/2025/02/تصميم-بدون-عنوان.png" alt="شعار المنصة" class="w-12 h-12 rounded-full" />
215
  <div>
216
  <h1 class="text-xl font-bold text-gray-800">المنصة القانونية</h1>
 
218
  </div>
219
  </div>
220
  <nav class="space-y-1">
 
221
  <div class="nav-link active" data-section="home">
222
  <i class="fas fa-home ml-3"></i>
223
  <span>الرئيسية</span>
 
248
  </div>
249
  <div class="nav-link" data-section="precedents">
250
  <i class="fas fa-gavel ml-3"></i>
251
+ <span>الأحكام والسوابق</span>
 
 
 
 
252
  </div>
253
  </nav>
254
  </div>
 
258
  <main class="main-content">
259
  <!-- بحث عالمي -->
260
  <div class="search-container mb-6 relative">
261
+ <input type="text" class="search-input w-full p-3 rounded border" placeholder="ابحث في المنصة..." id="globalSearch" />
262
  <i class="fas fa-search absolute top-1/2 right-4 transform -translate-y-1/2 text-gray-400"></i>
263
  </div>
264
 
265
  <!-- قسم الرئيسية -->
266
  <section id="home" class="section">
267
  <h2 class="text-3xl font-bold text-gray-800 mb-8">الخدمات القانونية</h2>
 
268
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
269
+ <!-- بطاقات الخدمة -->
270
  <div class="feature-card p-6">
271
  <div class="text-center">
272
  <i class="fas fa-balance-scale text-3xl mb-4 text-blue-600"></i>
273
  <h3 class="text-xl font-bold text-gray-800 mb-3">التحليل القانوني</h3>
274
+ <p class="text-gray-600 mb-4">
275
+ تحليل متكامل للقضايا والمستندات القانونية باستخدام الذكاء الاصطناعي
276
+ </p>
277
  <button class="action-button" onclick="showSection('analysis')">ابدأ التحليل</button>
278
  </div>
279
  </div>
 
280
  <div class="feature-card p-6">
281
  <div class="text-center">
282
  <i class="fas fa-project-diagram text-3xl mb-4 text-blue-600"></i>
283
  <h3 class="text-xl font-bold text-gray-800 mb-3">خريطة التفكير</h3>
284
+ <p class="text-gray-600 mb-4">
285
+ نظم قضية بشكل احترافي باستخدام خطوات منهجية قوية تساعدك على التفكير مع النموذج
286
+ </p>
287
  <button class="action-button" onclick="showSection('mindMap')">إنشاء خريطة التفكير</button>
288
  </div>
289
  </div>
 
290
  <div class="feature-card p-6">
291
  <div class="text-center">
292
  <i class="fas fa-search text-3xl mb-4 text-blue-600"></i>
293
  <h3 class="text-xl font-bold text-gray-800 mb-3">البحث القانوني</h3>
294
+ <p class="text-gray-600 mb-4">
295
+ ابحث عن معلومات قانونية مع برومبت ثابت يشمل منصات: منصة1، منصة2، منصة3
296
+ </p>
297
  <button class="action-button" onclick="showSection('search')">ابدأ البحث</button>
298
  </div>
299
  </div>
300
+ <div class="feature-card p-6">
301
+ <div class="text-center">
302
+ <i class="fas fa-file-alt text-3xl mb-4 text-blue-600"></i>
303
+ <h3 class="text-xl font-bold text-gray-800 mb-3">المستندات</h3>
304
+ <p class="text-gray-600 mb-4">
305
+ إنشاء وتحرير المستندات القانونية بمساعدة الذكاء الاصطناعي
306
+ </p>
307
+ <button class="action-button" onclick="showSection('documents')">إنشاء مستند</button>
 
 
 
 
 
308
  </div>
309
+ </div>
310
+ <div class="feature-card p-6">
311
+ <div class="text-center">
312
+ <i class="fas fa-language text-3xl mb-4 text-blue-600"></i>
313
+ <h3 class="text-xl font-bold text-gray-800 mb-3">الترجمة القانونية</h3>
314
+ <p class="text-gray-600 mb-4">
315
+ ترجمة احترافية للوثائق القانونية مع إمكانية تنزيلها كملف PDF
316
+ </p>
317
+ <button class="action-button" onclick="showSection('translation')">ترجمة</button>
318
  </div>
319
+ </div>
320
+ <div class="feature-card p-6">
321
+ <div class="text-center">
322
+ <i class="fas fa-comments text-3xl mb-4 text-blue-600"></i>
323
+ <h3 class="text-xl font-bold text-gray-800 mb-3">استشارة قانونية</h3>
324
+ <p class="text-gray-600 mb-4">
325
+ احصل على استشارة قانونية فورية من خبرائنا
326
+ </p>
327
+ <button class="action-button" onclick="showSection('consultation')">استشر الآن</button>
328
  </div>
329
  </div>
330
  </div>
 
361
  <section id="mindMap" class="section hidden">
362
  <h2 class="text-3xl font-bold text-gray-800 mb-4">خريطة التفكير القانونية</h2>
363
  <p class="mb-4 text-gray-700">
364
+ أدخل الأفكار والخيوط المتعددة لتنظيم القضية بطريقة إبداعية باستخدام منهجيات قوية مثل تحليل SWOT و5 خطوات لتحليل الأسباب الجذرية. ساعد نفسك في التفكير مع النموذج.
365
  </p>
366
  <div id="mindMapFields">
367
  <div class="mb-4">
 
382
  <div id="mindMapResult" class="mt-4 response-container mind-map-output"></div>
383
  </section>
384
 
385
+ <!-- قسم البحث القانوني -->
386
+ <section id="search" class="section hidden">
387
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">البحث القانوني</h2>
388
  <div class="input-group bg-white rounded p-6 shadow">
389
+ <textarea class="w-full p-3 border rounded" placeholder="اكتب استعلام البحث القانوني..." ></textarea>
390
+ <button class="action-button mt-4" onclick="handleSubmit('search')">بحث</button>
391
+ <div id="searchResult" class="mt-4 response-container"></div>
 
392
  </div>
393
  </section>
394
 
395
+ <!-- قسم الترجمة القانونية -->
396
+ <section id="translation" class="section hidden">
397
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">الترجمة القانونية</h2>
398
  <div class="input-group bg-white rounded p-6 shadow">
399
+ <textarea class="w-full p-3 border rounded" placeholder="اكتب النص المراد ترجمته..."></textarea>
400
+ <label class="block text-gray-700 mb-2 mt-4">أو قم بإرفاق ملف PDF:</label>
401
+ <input type="file" accept=".pdf" class="w-full p-3 border rounded" id="translationPDF" />
402
+ <div class="flex gap-4 my-4">
403
+ <select class="p-3 rounded border w-full" id="fromLang">
404
+ <option value="ar">العربية</option>
405
+ <option value="en">الإنجليزية</option>
406
+ <option value="de">الألمانية</option>
407
+ <option value="zh">الصينية</option>
408
+ <option value="fr">الفرنسية</option>
409
+ <option value="it">الإيطالية</option>
410
+ <option value="es">الإسبانية</option>
411
+ </select>
412
+ <select class="p-3 rounded border w-full" id="toLang">
413
+ <option value="en">الإنجليزية</option>
414
+ <option value="ar">العربية</option>
415
+ <option value="de">الألمانية</option>
416
+ <option value="zh">الصينية</option>
417
+ <option value="fr">الفرنسية</option>
418
+ <option value="it">الإيطالية</option>
419
+ <option value="es">الإسبانية</option>
420
+ </select>
421
+ </div>
422
+ <div class="flex gap-4">
423
+ <button class="action-button" onclick="handleSubmit('translation')">ترجمة</button>
424
+ <button id="downloadPDFButton" class="action-button">تنزيل الترجمة كملف PDF</button>
425
  </div>
426
+ <div id="translationResult" class="mt-4 response-container"></div>
427
+ </div>
428
+ </section>
429
+
430
+ <!-- قسم الاستشارة القانونية -->
431
+ <section id="consultation" class="section hidden">
432
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">استشارة قانونية</h2>
433
+ <div class="input-group bg-white rounded p-6 shadow">
434
+ <textarea class="w-full p-3 border rounded" placeholder="اكتب سؤالك القانوني هنا..."></textarea>
435
+ <button class="action-button mt-4" onclick="handleSubmit('consultation')">احصل على استشارة</button>
436
+ <div id="consultationResult" class="mt-4 response-container"></div>
437
  </div>
438
  </section>
439
 
 
521
  </main>
522
 
523
  <!-- تذييل الصفحة -->
524
+ <footer class="text-center py-4 text-gray-600 fixed bottom-0 left-0 w-full bg-white border-t">
525
  © Copyright 2025・<span class="font-bold">FASTPRO</span>・All rights reserved.
526
  </footer>
527
 
528
  <!-- سكربتات الموقع -->
529
  <script>
530
+ // استخدام API كما كان سابقاً
531
  const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat';
532
 
533
+ // دالة الحصول على البادئة (prompt prefix) بناءً على القسم مع برومبت ثابت للبحث
534
  function getPromptPrefix(section) {
535
  switch(section) {
536
  case 'analysis':
 
545
  return 'قم بترجمة هذا النص القانوني: ';
546
  case 'consultation':
547
  return 'أحتاج استشارة قانونية في الموضوع التالي: ';
 
 
 
548
  default:
549
  return '';
550
  }
551
  }
552
 
553
+ // تفعيل التنقل بين الأقسام
554
  document.querySelectorAll(".nav-link").forEach(link => {
555
  link.addEventListener("click", (e) => {
556
  e.preventDefault();
557
  const section = e.currentTarget.getAttribute("data-section");
558
  if(section) {
559
  showSection(section);
560
+ // إخفاء الشريط الجانبي على الأجهزة المحمولة بعد النقر
561
  if(window.innerWidth < 768) {
562
  document.querySelector(".sidebar").classList.remove("open");
563
  }
 
572
  document.getElementById(sectionId).classList.remove("hidden");
573
  document.querySelectorAll(".nav-link").forEach(link => {
574
  link.classList.remove("active");
575
+ if (link.getAttribute("data-section") === sectionId) {
576
  link.classList.add("active");
577
  }
578
  });
 
583
  document.querySelector(".sidebar").classList.toggle("open");
584
  });
585
 
586
+ // تحسين تأثير التركيز على حقول الإدخال
587
+ document.querySelectorAll("input, textarea").forEach(element => {
588
+ element.addEventListener("focus", function() {
589
  const group = this.closest(".input-group");
590
  if(group) group.classList.add("focused");
591
  this.style.transform = 'translateY(-2px)';
592
  });
593
+
594
+ element.addEventListener("blur", function() {
595
  const group = this.closest(".input-group");
596
  if(group) group.classList.remove("focused");
597
  this.style.transform = 'translateY(0)';
598
  });
599
  });
600
 
601
+ // دالة إرسال الطلبات العامة لجميع الأقسام باستخدام API الموحد
602
  async function handleSubmit(section) {
603
  const container = document.getElementById(section);
604
+ const textarea = container.querySelector("textarea");
605
+ const resultDiv = container.querySelector(".response-container");
606
+ const text = textarea.value.trim();
607
+ if (!text) {
608
+ alert("الرجاء إدخال نص");
609
+ return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
610
  }
611
+ const payload = {
612
+ message: getPromptPrefix(section) + text,
613
+ history: []
614
+ };
615
  try {
616
  resultDiv.innerHTML = '<div class="loading-spinner"></div>';
617
  const response = await fetch(API_URL, {
 
619
  headers: { "Content-Type": "application/json" },
620
  body: JSON.stringify(payload)
621
  });
622
+ if (!response.ok) {
623
  throw new Error("Network response was not ok");
624
  }
625
  const data = await response.json();
626
  resultDiv.innerHTML = data.response || "";
627
+ } catch (error) {
628
  console.error("Error:", error);
629
  resultDiv.innerHTML = '<div class="text-red-500">حدث خطأ. يرجى المحاولة مرة أخرى.</div>';
630
  }
631
  }
632
 
633
+ // وظيفة زر النسخ في قسم إنشاء العقود
634
  document.getElementById("copyButton").addEventListener("click", async function() {
635
  const contractText = document.getElementById("contractOutput").innerText;
636
  try {
637
  await navigator.clipboard.writeText(contractText);
638
  showSuccessMessage("تم نسخ العقد بنجاح!");
639
+ } catch (err) {
640
  console.error("فشل نسخ النص:", err);
641
  }
642
  });
643
 
644
+ // وظيفة إظهار رسالة النجاح عند النسخ
645
  function showSuccessMessage(message) {
646
  const successMessage = document.createElement("div");
647
  successMessage.className = "success-message";
 
653
  }, 2000);
654
  }
655
 
656
+ // التحقق من صحة الرقم القومي للطرف الأول والثاني
657
  document.querySelectorAll("#firstPartyID, #secondPartyID").forEach(input => {
658
  input.addEventListener("input", function() {
659
  this.value = this.value.replace(/[^0-9]/g, '');
660
+ if (this.value.length > 14) {
661
  this.value = this.value.slice(0, 14);
662
  }
663
  });
664
  });
665
 
666
+ // دالة الحصول على تسمية الحقل لعرضها في رسائل الخطأ
667
  function getFieldLabel(field) {
668
  const labels = {
669
  contractTitle: 'عنوان العقد',
 
684
  return labels[field] || field;
685
  }
686
 
687
+ // وظيفة زر إنشاء العقد
688
  document.getElementById("generateButton").addEventListener("click", async function() {
689
  const button = this;
690
  const outputDiv = document.getElementById("contractOutput");
691
+
692
+ // جمع بيانات النموذج
693
  const formData = {
694
  contractTitle: document.getElementById("contractTitle").value.trim(),
695
  contractDate: document.getElementById("contractDate").value,
 
706
  contractPreamble: document.getElementById("contractPreamble").value.trim(),
707
  contractTerms: document.getElementById("contractTerms").value.trim()
708
  };
709
+
710
+ // التحقق من البيانات المطلوبة
711
  const requiredFields = Object.keys(formData);
712
  const missingFields = requiredFields.filter(field => !formData[field]);
713
+
714
+ if (missingFields.length > 0) {
715
  outputDiv.innerHTML = `
716
  <div class="text-red-500 font-bold mb-4">يرجى ملء جميع الحقول المطلوبة</div>
717
  <ul class="list-disc list-inside text-red-500">
 
720
  `;
721
  return;
722
  }
723
+
724
+ // تحديث واجهة المستخدم لحالة التحميل
725
  button.textContent = 'جاري إن��اء العقد...';
726
  button.disabled = true;
727
  outputDiv.innerHTML = `
 
730
  <span>جاري إنشاء العقد باستخدام الذكاء الاصطناعي...</span>
731
  </div>
732
  `;
733
+
734
  try {
735
+ // تحويل التاريخ إلى التنسيق العربي
736
  const dateObj = new Date(formData.contractDate);
737
+ const arabicDate = new Intl.DateTimeFormat('ar-EG', {
738
+ year: 'numeric',
739
+ month: 'long',
740
+ day: 'numeric'
741
+ }).format(dateObj);
742
+
743
+ // إنشاء نص الطلب
744
  const prompt = `قم بإنشاء عقد قانوني مصري رسمي باللغة العربية يتضمن البيانات التالية:
745
 
746
  عنوان العقد: ${formData.contractTitle}
 
771
  2. بند حكم التمهيد يوضح أن التمهيد جزء لا يتجزأ من العقد
772
  3. تنسيق قانوني رسمي
773
  4. مكان للتوقيع في النهاية مع كتابة "طرف أول" و "طرف ثاني"`;
774
+
775
+ // إرسال الطلب إلى API الخاص بالعقود
776
  const response = await fetch(API_URL, {
777
  method: 'POST',
778
+ headers: {
779
+ 'Content-Type': 'application/json'
780
+ },
781
+ body: JSON.stringify({
782
+ message: prompt,
783
+ history: []
784
+ })
785
  });
786
+
787
+ if (!response.ok) {
788
  throw new Error(`HTTP error! status: ${response.status}`);
789
  }
790
+
791
  const data = await response.json();
792
  outputDiv.innerHTML = `<div dir="rtl" style="white-space: pre-wrap;">${data.response}</div>`;
793
+
794
+ } catch (error) {
795
  outputDiv.innerHTML = `
796
  <div class="text-red-600 font-bold">
797
+ عذراً، حدث خطأ في إنشاء العقد. يرجى المحاولة مرة أخرى.
798
+ <br>
799
  تفاصيل الخطأ: ${error.message}
800
  </div>
801
  `;
 
804
  button.textContent = 'إنشاء العقد';
805
  button.disabled = false;
806
  }
807
+ });
808
 
809
+ // وظيفة تنزيل الترجمة كملف PDF (باستخدام مكتبة jsPDF)
810
  document.getElementById("downloadPDFButton").addEventListener("click", function() {
811
  const { jsPDF } = window.jspdf;
812
  const doc = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" });
813
  const content = document.getElementById("translationResult").innerText;
814
+ if (!content.trim()) {
815
  alert("لا يوجد نص للترجمة لتنزيله");
816
  return;
817
  }
 
820
  doc.save("translation.pdf");
821
  });
822
 
823
+ // وظيفة تنزيل التحليل كملف PDF (باستخدام مكتبة jsPDF)
824
  document.getElementById("downloadAnalysisPDFButton").addEventListener("click", function() {
825
  const { jsPDF } = window.jspdf;
826
  const doc = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" });
827
  const content = document.getElementById("analysisResult").innerText;
828
+ if (!content.trim()) {
829
  alert("لا يوجد نص للتحليل لتنزيله");
830
  return;
831
  }
 
834
  doc.save("analysis.pdf");
835
  });
836
 
837
+ // وظيفة إضافة حقل جديد في قسم خريطة التفكير
838
  document.getElementById("addMindMapField").addEventListener("click", function() {
839
  const container = document.getElementById("mindMapFields");
840
  const newFieldDiv = document.createElement("div");
 
844
  container.appendChild(newFieldDiv);
845
  });
846
 
847
+ // وظيفة إنشاء خريطة التفكير باستخدام الحقول المتعددة
848
  function handleMindMap() {
849
  const inputs = document.querySelectorAll("#mindMapFields input");
850
  let collectedText = "";
851
  inputs.forEach((input, index) => {
852
  const value = input.value.trim();
853
+ if(value) {
854
+ collectedText += `الخيط ${index + 1}: ${value}\n`;
855
  }
856
  });
857
+ if (!collectedText.trim()) {
858
  alert("الرجاء إدخال بعض الأفكار لإنشاء خريطة التفكير");
859
  return;
860
  }
861
  const resultDiv = document.getElementById("mindMapResult");
862
  const prompt = getPromptPrefix("mindMap") + "\n" + collectedText +
863
+ "\nاستخدم منهجيات قوية مثل تحليل SWOT و5 خطوات لتحليل الأسباب الجذرية مع النظر في البدائل القانونية لتنظيم القضية بشكل احترافي.";
864
  resultDiv.innerHTML = '<div class="loading-spinner"></div>';
865
  fetch(API_URL, {
866
  method: "POST",
 
868
  body: JSON.stringify({ message: prompt, history: [] })
869
  })
870
  .then(response => response.json())
871
+ .then(data => {
872
+ resultDiv.innerHTML = data.response || "";
873
+ })
874
  .catch(error => {
875
  console.error("Error:", error);
876
  resultDiv.innerHTML = '<div class="text-red-500">حدث خطأ. يرجى المحاولة مرة أخرى.</div>';
877
  });
878
  }
879
 
 
 
 
 
 
 
 
 
 
 
 
 
 
880
  // تهيئة الصفحة بالعرض الافتراضي للقسم "home"
881
  document.addEventListener("DOMContentLoaded", () => {
882
  showSection("home");