Spaces:
Running
Running
Update okod.html
Browse files
okod.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>منشئ العقود الذكي</title>
|
| 7 |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
|
| 8 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
| 9 |
<style>
|
|
@@ -70,6 +70,7 @@
|
|
| 70 |
line-height: 1.8;
|
| 71 |
font-size: 1.1rem;
|
| 72 |
border: 1px solid #f3f4f6;
|
|
|
|
| 73 |
}
|
| 74 |
|
| 75 |
.btn {
|
|
@@ -131,21 +132,6 @@
|
|
| 131 |
to { transform: translateX(0); opacity: 1; }
|
| 132 |
}
|
| 133 |
|
| 134 |
-
.loading {
|
| 135 |
-
position: relative;
|
| 136 |
-
}
|
| 137 |
-
|
| 138 |
-
.loading::after {
|
| 139 |
-
content: '';
|
| 140 |
-
position: absolute;
|
| 141 |
-
top: 0;
|
| 142 |
-
left: 0;
|
| 143 |
-
width: 100%;
|
| 144 |
-
height: 100%;
|
| 145 |
-
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
| 146 |
-
animation: loading 1.5s infinite;
|
| 147 |
-
}
|
| 148 |
-
|
| 149 |
.section-title {
|
| 150 |
font-size: 1.25rem;
|
| 151 |
color: #1f2937;
|
|
@@ -155,31 +141,6 @@
|
|
| 155 |
font-weight: 600;
|
| 156 |
}
|
| 157 |
|
| 158 |
-
.contract-type-selector {
|
| 159 |
-
display: flex;
|
| 160 |
-
gap: 1rem;
|
| 161 |
-
margin-bottom: 2rem;
|
| 162 |
-
}
|
| 163 |
-
|
| 164 |
-
.type-option {
|
| 165 |
-
flex: 1;
|
| 166 |
-
padding: 1.5rem;
|
| 167 |
-
border: 2px solid #e5e7eb;
|
| 168 |
-
border-radius: 1rem;
|
| 169 |
-
cursor: pointer;
|
| 170 |
-
transition: all 0.3s ease;
|
| 171 |
-
text-align: center;
|
| 172 |
-
}
|
| 173 |
-
|
| 174 |
-
.type-option.active {
|
| 175 |
-
border-color: #2563eb;
|
| 176 |
-
background: rgba(37, 99, 235, 0.05);
|
| 177 |
-
}
|
| 178 |
-
|
| 179 |
-
.type-option:hover {
|
| 180 |
-
transform: translateY(-2px);
|
| 181 |
-
}
|
| 182 |
-
|
| 183 |
@media (max-width: 768px) {
|
| 184 |
.split-screen {
|
| 185 |
grid-template-columns: 1fr;
|
|
@@ -196,78 +157,85 @@
|
|
| 196 |
<body>
|
| 197 |
<div class="split-screen">
|
| 198 |
<div class="card animate__animated animate__fadeInRight">
|
| 199 |
-
<h1 class="text-4xl font-bold mb-8 text-center text-gray-800">منشئ العقود الذكي</h1>
|
| 200 |
-
|
| 201 |
-
<div class="contract-type-selector">
|
| 202 |
-
<div class="type-option active" data-type="rental">
|
| 203 |
-
<h3 class="font-bold mb-2">عقد إيجار</h3>
|
| 204 |
-
<p class="text-sm text-gray-600">عقود الإيجار السكنية والتجارية</p>
|
| 205 |
-
</div>
|
| 206 |
-
<div class="type-option" data-type="custom">
|
| 207 |
-
<h3 class="font-bold mb-2">عقد مخصص</h3>
|
| 208 |
-
<p class="text-sm text-gray-600">صياغة عقد حسب احتياجاتك</p>
|
| 209 |
-
</div>
|
| 210 |
-
</div>
|
| 211 |
|
| 212 |
-
<div id="
|
| 213 |
<h2 class="section-title">معلومات العقد الأساسية</h2>
|
| 214 |
|
| 215 |
<div class="input-group">
|
| 216 |
-
<label class="block text-gray-700 font-bold mb-2"
|
| 217 |
-
<input type="text" id="
|
| 218 |
</div>
|
| 219 |
-
|
| 220 |
<div class="input-group">
|
| 221 |
-
<label class="block text-gray-700 font-bold mb-2"
|
| 222 |
-
<input type="
|
| 223 |
</div>
|
| 224 |
-
|
| 225 |
-
<h2 class="section-title"
|
| 226 |
|
| 227 |
<div class="input-group">
|
| 228 |
-
<label class="block text-gray-700 font-bold mb-2"
|
| 229 |
-
<input type="text" id="
|
| 230 |
</div>
|
| 231 |
-
|
| 232 |
-
<div class="
|
| 233 |
-
<
|
| 234 |
-
|
| 235 |
-
<input type="text" id="rentalPeriod" placeholder="مثال: سنة واحدة">
|
| 236 |
-
</div>
|
| 237 |
-
|
| 238 |
-
<div class="input-group">
|
| 239 |
-
<label class="block text-gray-700 font-bold mb-2">قيمة الإيجار:</label>
|
| 240 |
-
<input type="text" id="rentalAmount" placeholder="القيمة بالجنيه المصري">
|
| 241 |
-
</div>
|
| 242 |
</div>
|
| 243 |
-
|
| 244 |
<div class="input-group">
|
| 245 |
-
<label class="block text-gray-700 font-bold mb-2"
|
| 246 |
-
<
|
| 247 |
</div>
|
| 248 |
-
|
| 249 |
-
|
| 250 |
-
<div id="customTemplate" class="contract-template hidden space-y-6">
|
| 251 |
-
<h2 class="section-title">معلومات العقد المخصص</h2>
|
| 252 |
-
|
| 253 |
<div class="input-group">
|
| 254 |
-
<label class="block text-gray-700 font-bold mb-2"
|
| 255 |
-
<input type="text" id="
|
| 256 |
</div>
|
| 257 |
-
|
| 258 |
<div class="input-group">
|
| 259 |
-
<label class="block text-gray-700 font-bold mb-2"
|
| 260 |
-
<input type="text" id="
|
| 261 |
</div>
|
|
|
|
|
|
|
| 262 |
|
| 263 |
<div class="input-group">
|
| 264 |
-
<label class="block text-gray-700 font-bold mb-2"
|
| 265 |
-
<input type="text" id="
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 266 |
</div>
|
| 267 |
|
| 268 |
<div class="input-group">
|
| 269 |
-
<label class="block text-gray-700 font-bold mb-2"
|
| 270 |
-
<textarea id="
|
| 271 |
</div>
|
| 272 |
</div>
|
| 273 |
|
|
@@ -293,10 +261,10 @@
|
|
| 293 |
</div>
|
| 294 |
|
| 295 |
<script>
|
| 296 |
-
|
| 297 |
-
|
| 298 |
|
| 299 |
-
//
|
| 300 |
document.querySelectorAll('input, textarea').forEach(element => {
|
| 301 |
element.addEventListener('focus', function() {
|
| 302 |
this.closest('.input-group').classList.add('focused');
|
|
@@ -307,224 +275,183 @@
|
|
| 307 |
this.closest('.input-group').classList.remove('focused');
|
| 308 |
this.style.transform = 'translateY(0)';
|
| 309 |
});
|
| 310 |
-
|
| 311 |
-
// إضافة تأثير ripple عند النقر
|
| 312 |
-
element.addEventListener('click', function(e) {
|
| 313 |
-
const ripple = document.createElement('div');
|
| 314 |
-
ripple.classList.add('ripple');
|
| 315 |
-
this.appendChild(ripple);
|
| 316 |
-
setTimeout(() => ripple.remove(), 1000);
|
| 317 |
-
});
|
| 318 |
});
|
| 319 |
|
| 320 |
-
//
|
| 321 |
-
document.querySelectorAll('.type-option').forEach(option => {
|
| 322 |
-
option.addEventListener('click', function() {
|
| 323 |
-
// إزالة الفئة النشطة من جميع الخيارات
|
| 324 |
-
document.querySelectorAll('.type-option').forEach(opt => {
|
| 325 |
-
opt.classList.remove('active');
|
| 326 |
-
});
|
| 327 |
-
|
| 328 |
-
// إضافة الفئة النشطة للخيار المحدد
|
| 329 |
-
this.classList.add('active');
|
| 330 |
-
|
| 331 |
-
// إخفاء جميع النماذج
|
| 332 |
-
document.querySelectorAll('.contract-template').forEach(template => {
|
| 333 |
-
template.classList.add('hidden');
|
| 334 |
-
});
|
| 335 |
-
|
| 336 |
-
// إظهار النموذج المحدد
|
| 337 |
-
const templateId = this.dataset.type === 'rental' ? 'rentalTemplate' : 'customTemplate';
|
| 338 |
-
|
| 339 |
-
// إظهار النموذج المحدد مع تأثير حركي
|
| 340 |
-
const selectedTemplate = document.getElementById(templateId);
|
| 341 |
-
selectedTemplate.classList.remove('hidden');
|
| 342 |
-
selectedTemplate.classList.add('animate__animated', 'animate__fadeIn');
|
| 343 |
-
});
|
| 344 |
-
});
|
| 345 |
-
|
| 346 |
-
// نسخ العقد إلى الحافظة
|
| 347 |
document.getElementById('copyButton').addEventListener('click', async function() {
|
| 348 |
const contractText = document.getElementById('contractOutput').innerText;
|
| 349 |
-
|
| 350 |
try {
|
| 351 |
await navigator.clipboard.writeText(contractText);
|
| 352 |
-
|
| 353 |
-
// إظهار رسالة نجاح
|
| 354 |
-
const successMessage = document.createElement('div');
|
| 355 |
-
successMessage.className = 'success-message animate__animated animate__fadeIn';
|
| 356 |
-
successMessage.textContent = 'تم نسخ العقد بنجاح!';
|
| 357 |
-
document.body.appendChild(successMessage);
|
| 358 |
-
|
| 359 |
-
// إزالة رسالة النجاح بعد ثانيتين
|
| 360 |
-
setTimeout(() => {
|
| 361 |
-
successMessage.classList.add('animate__fadeOut');
|
| 362 |
-
setTimeout(() => successMessage.remove(), 300);
|
| 363 |
-
}, 2000);
|
| 364 |
-
|
| 365 |
} catch (err) {
|
| 366 |
console.error('فشل نسخ النص: ', err);
|
| 367 |
}
|
| 368 |
});
|
| 369 |
|
| 370 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 371 |
document.getElementById('generateButton').addEventListener('click', async function() {
|
| 372 |
const button = this;
|
| 373 |
const outputDiv = document.getElementById('contractOutput');
|
| 374 |
-
const contractType = document.querySelector('.type-option.active').dataset.type;
|
| 375 |
-
let prompt = '';
|
| 376 |
-
|
| 377 |
-
// تجميع البيانات حسب نوع العقد
|
| 378 |
-
if (contractType === 'rental') {
|
| 379 |
-
const formData = {
|
| 380 |
-
landlord: document.getElementById('landlord').value,
|
| 381 |
-
tenant: document.getElementById('tenant').value,
|
| 382 |
-
propertyAddress: document.getElementById('propertyAddress').value,
|
| 383 |
-
rentalPeriod: document.getElementById('rentalPeriod').value,
|
| 384 |
-
rentalAmount: document.getElementById('rentalAmount').value,
|
| 385 |
-
additionalTerms: document.getElementById('additionalTerms').value
|
| 386 |
-
};
|
| 387 |
-
|
| 388 |
-
// التحقق من البيانات المطلوبة
|
| 389 |
-
const requiredFields = ['landlord', 'tenant', 'propertyAddress', 'rentalPeriod', 'rentalAmount'];
|
| 390 |
-
const missingFields = requiredFields.filter(field => !formData[field]);
|
| 391 |
-
|
| 392 |
-
if (missingFields.length > 0) {
|
| 393 |
-
outputDiv.innerHTML = `
|
| 394 |
-
<div class="text-red-500 font-bold mb-4">يرجى ملء الحقول التالية:</div>
|
| 395 |
-
<ul class="list-disc list-inside text-red-500">
|
| 396 |
-
${missingFields.map(field => `<li>${getFieldLabel(field)}</li>`).join('')}
|
| 397 |
-
</ul>
|
| 398 |
-
`;
|
| 399 |
-
return;
|
| 400 |
-
}
|
| 401 |
|
| 402 |
-
|
| 403 |
-
|
| 404 |
-
|
| 405 |
-
|
| 406 |
-
|
| 407 |
-
|
| 408 |
-
|
| 409 |
-
|
| 410 |
-
|
| 411 |
-
|
| 412 |
-
|
| 413 |
-
|
| 414 |
-
|
| 415 |
-
|
| 416 |
-
|
| 417 |
-
|
| 418 |
-
|
| 419 |
-
// التحقق من البيانات المطلوبة
|
| 420 |
-
const requiredFields = ['title', 'firstParty', 'secondParty', 'details'];
|
| 421 |
-
const missingFields = requiredFields.filter(field => !formData[field]);
|
| 422 |
-
|
| 423 |
-
if (missingFields.length > 0) {
|
| 424 |
-
outputDiv.innerHTML = `
|
| 425 |
-
<div class="text-red-500 font-bold mb-4">يرجى ملء الحقول التالية:</div>
|
| 426 |
-
<ul class="list-disc list-inside text-red-500">
|
| 427 |
-
${missingFields.map(field => `<li>${getFieldLabel(field)}</li>`).join('')}
|
| 428 |
-
</ul>
|
| 429 |
-
`;
|
| 430 |
-
return;
|
| 431 |
-
}
|
| 432 |
-
|
| 433 |
-
prompt = `أنشئ عقداً ��خصصاً باللغة العربية يتضمن البيانات التالية:
|
| 434 |
-
عنوان العقد: ${formData.title}
|
| 435 |
-
الطرف الأول: ${formData.firstParty}
|
| 436 |
-
الطرف الثاني: ${formData.secondParty}
|
| 437 |
-
تفاصيل العقد: ${formData.details}
|
| 438 |
-
|
| 439 |
-
يجب أن يكون العقد رسمياً وقانونياً ومنظماً بشكل احترافي.`;
|
| 440 |
-
}
|
| 441 |
|
| 442 |
-
|
| 443 |
-
|
| 444 |
-
|
| 445 |
-
|
| 446 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 447 |
return;
|
| 448 |
}
|
| 449 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 450 |
try {
|
| 451 |
-
//
|
| 452 |
-
|
| 453 |
-
|
| 454 |
-
|
| 455 |
-
|
| 456 |
-
|
| 457 |
-
|
| 458 |
-
|
| 459 |
-
|
| 460 |
-
|
| 461 |
-
currentController = new AbortController();
|
| 462 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 463 |
const response = await fetch(API_URL, {
|
| 464 |
method: 'POST',
|
| 465 |
-
headers: {
|
|
|
|
|
|
|
| 466 |
body: JSON.stringify({
|
| 467 |
message: prompt,
|
| 468 |
history: []
|
| 469 |
-
})
|
| 470 |
-
signal: currentController.signal
|
| 471 |
});
|
| 472 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 473 |
const data = await response.json();
|
| 474 |
-
outputDiv.innerHTML = data.response
|
| 475 |
-
outputDiv.classList.add('animate__animated', 'animate__fadeIn');
|
| 476 |
|
| 477 |
} catch (error) {
|
| 478 |
-
|
| 479 |
-
|
| 480 |
-
|
| 481 |
-
|
| 482 |
-
|
| 483 |
-
|
| 484 |
-
|
| 485 |
-
|
| 486 |
-
<div class="text-red-600 font-bold">
|
| 487 |
-
عذراً، حدث خطأ في إنشاء العقد. يرجى المحاولة مرة أخرى.
|
| 488 |
-
</div>
|
| 489 |
-
`;
|
| 490 |
-
}
|
| 491 |
} finally {
|
| 492 |
-
currentController = null;
|
| 493 |
button.textContent = 'إنشاء العقد';
|
| 494 |
-
button.
|
| 495 |
}
|
| 496 |
});
|
| 497 |
-
|
| 498 |
-
// دالة مساعدة للحصول على تسميات الحقول بالعربية
|
| 499 |
-
function getFieldLabel(field) {
|
| 500 |
-
const labels = {
|
| 501 |
-
landlord: 'المؤجر',
|
| 502 |
-
tenant: 'المستأجر',
|
| 503 |
-
propertyAddress: 'عنوان العقار',
|
| 504 |
-
rentalPeriod: 'مدة الإيجار',
|
| 505 |
-
rentalAmount: 'قيمة الإيجار',
|
| 506 |
-
title: 'عنوان العقد',
|
| 507 |
-
firstParty: 'الطرف الأول',
|
| 508 |
-
secondParty: 'الطرف الثاني',
|
| 509 |
-
details: 'تفاصيل العقد'
|
| 510 |
-
};
|
| 511 |
-
return labels[field] || field;
|
| 512 |
-
}
|
| 513 |
-
|
| 514 |
-
// إضافة تأثيرات حركية عند التمرير
|
| 515 |
-
const cards = document.querySelectorAll('.card');
|
| 516 |
-
window.addEventListener('scroll', () => {
|
| 517 |
-
cards.forEach(card => {
|
| 518 |
-
const rect = card.getBoundingClientRect();
|
| 519 |
-
const isVisible = rect.top < window.innerHeight && rect.bottom >= 0;
|
| 520 |
-
|
| 521 |
-
if (isVisible) {
|
| 522 |
-
card.style.transform = 'translateY(-4px)';
|
| 523 |
-
} else {
|
| 524 |
-
card.style.transform = 'translateY(0)';
|
| 525 |
-
}
|
| 526 |
-
});
|
| 527 |
-
});
|
| 528 |
</script>
|
| 529 |
</body>
|
| 530 |
</html>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>منشئ العقود المصري الذكي</title>
|
| 7 |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
|
| 8 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
| 9 |
<style>
|
|
|
|
| 70 |
line-height: 1.8;
|
| 71 |
font-size: 1.1rem;
|
| 72 |
border: 1px solid #f3f4f6;
|
| 73 |
+
white-space: pre-wrap;
|
| 74 |
}
|
| 75 |
|
| 76 |
.btn {
|
|
|
|
| 132 |
to { transform: translateX(0); opacity: 1; }
|
| 133 |
}
|
| 134 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 135 |
.section-title {
|
| 136 |
font-size: 1.25rem;
|
| 137 |
color: #1f2937;
|
|
|
|
| 141 |
font-weight: 600;
|
| 142 |
}
|
| 143 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 144 |
@media (max-width: 768px) {
|
| 145 |
.split-screen {
|
| 146 |
grid-template-columns: 1fr;
|
|
|
|
| 157 |
<body>
|
| 158 |
<div class="split-screen">
|
| 159 |
<div class="card animate__animated animate__fadeInRight">
|
| 160 |
+
<h1 class="text-4xl font-bold mb-8 text-center text-gray-800">منشئ العقود المصري الذكي</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 161 |
|
| 162 |
+
<div id="customTemplate" class="contract-template space-y-6">
|
| 163 |
<h2 class="section-title">معلومات العقد الأساسية</h2>
|
| 164 |
|
| 165 |
<div class="input-group">
|
| 166 |
+
<label class="block text-gray-700 font-bold mb-2">عنوان العقد:</label>
|
| 167 |
+
<input type="text" id="contractTitle" placeholder="عنوان العقد" class="focus:ring-2 focus:ring-blue-500">
|
| 168 |
</div>
|
| 169 |
+
|
| 170 |
<div class="input-group">
|
| 171 |
+
<label class="block text-gray-700 font-bold mb-2">تاريخ تحرير العقد:</label>
|
| 172 |
+
<input type="date" id="contractDate" class="focus:ring-2 focus:ring-blue-500">
|
| 173 |
</div>
|
| 174 |
+
|
| 175 |
+
<h2 class="section-title">بيانات الطرف الأول</h2>
|
| 176 |
|
| 177 |
<div class="input-group">
|
| 178 |
+
<label class="block text-gray-700 font-bold mb-2">اسم الطرف الأول:</label>
|
| 179 |
+
<input type="text" id="firstPartyName" placeholder="الاسم الكامل">
|
| 180 |
</div>
|
| 181 |
+
|
| 182 |
+
<div class="input-group">
|
| 183 |
+
<label class="block text-gray-700 font-bold mb-2">الرقم القومي:</label>
|
| 184 |
+
<input type="text" id="firstPartyID" placeholder="الرقم القومي المكون من 14 رقم" maxlength="14">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 185 |
</div>
|
| 186 |
+
|
| 187 |
<div class="input-group">
|
| 188 |
+
<label class="block text-gray-700 font-bold mb-2">الصفة:</label>
|
| 189 |
+
<input type="text" id="firstPartyTitle" placeholder="الصفة (مثال: مالك، مدير شركة)">
|
| 190 |
</div>
|
| 191 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
| 192 |
<div class="input-group">
|
| 193 |
+
<label class="block text-gray-700 font-bold mb-2">الجنسية:</label>
|
| 194 |
+
<input type="text" id="firstPartyNationality" placeholder="الجنسية" value="مصري">
|
| 195 |
</div>
|
| 196 |
+
|
| 197 |
<div class="input-group">
|
| 198 |
+
<label class="block text-gray-700 font-bold mb-2">محل الإقامة:</label>
|
| 199 |
+
<input type="text" id="firstPartyAddress" placeholder="العنوان التفصيلي">
|
| 200 |
</div>
|
| 201 |
+
|
| 202 |
+
<h2 class="section-title">بيانات الطرف الثاني</h2>
|
| 203 |
|
| 204 |
<div class="input-group">
|
| 205 |
+
<label class="block text-gray-700 font-bold mb-2">اسم الطرف الثاني:</label>
|
| 206 |
+
<input type="text" id="secondPartyName" placeholder="الاسم الكامل">
|
| 207 |
+
</div>
|
| 208 |
+
|
| 209 |
+
<div class="input-group">
|
| 210 |
+
<label class="block text-gray-700 font-bold mb-2">الرقم القومي:</label>
|
| 211 |
+
<input type="text" id="secondPartyID" placeholder="الرقم القومي المكون من 14 رقم" maxlength="14">
|
| 212 |
+
</div>
|
| 213 |
+
|
| 214 |
+
<div class="input-group">
|
| 215 |
+
<label class="block text-gray-700 font-bold mb-2">الصفة:</label>
|
| 216 |
+
<input type="text" id="secondPartyTitle" placeholder="الصفة (مثال: مستأجر، مشتري)">
|
| 217 |
+
</div>
|
| 218 |
+
|
| 219 |
+
<div class="input-group">
|
| 220 |
+
<label class="block text-gray-700 font-bold mb-2">الجنسية:</label>
|
| 221 |
+
<input type="text" id="secondPartyNationality" placeholder="الجنسية" value="مصري">
|
| 222 |
+
</div>
|
| 223 |
+
|
| 224 |
+
<div class="input-group">
|
| 225 |
+
<label class="block text-gray-700 font-bold mb-2">محل الإقامة:</label>
|
| 226 |
+
<input type="text" id="secondPartyAddress" placeholder="العنوان التفصيلي">
|
| 227 |
+
</div>
|
| 228 |
+
|
| 229 |
+
<h2 class="section-title">تفاصيل العقد</h2>
|
| 230 |
+
|
| 231 |
+
<div class="input-group">
|
| 232 |
+
<label class="block text-gray-700 font-bold mb-2">البند التمهيدي (مضمون العقد):</label>
|
| 233 |
+
<textarea id="contractPreamble" class="h-32" placeholder="اكتب مضمون العقد والغرض منه"></textarea>
|
| 234 |
</div>
|
| 235 |
|
| 236 |
<div class="input-group">
|
| 237 |
+
<label class="block text-gray-700 font-bold mb-2">بنود العقد:</label>
|
| 238 |
+
<textarea id="contractTerms" class="h-64" placeholder="اكتب بنود العقد الأساسية"></textarea>
|
| 239 |
</div>
|
| 240 |
</div>
|
| 241 |
|
|
|
|
| 261 |
</div>
|
| 262 |
|
| 263 |
<script>
|
| 264 |
+
// تعريف رابط API الخاص بنا
|
| 265 |
+
const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat';
|
| 266 |
|
| 267 |
+
// إضافة مستمعي الأحداث لحقول النموذج
|
| 268 |
document.querySelectorAll('input, textarea').forEach(element => {
|
| 269 |
element.addEventListener('focus', function() {
|
| 270 |
this.closest('.input-group').classList.add('focused');
|
|
|
|
| 275 |
this.closest('.input-group').classList.remove('focused');
|
| 276 |
this.style.transform = 'translateY(0)';
|
| 277 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 278 |
});
|
| 279 |
|
| 280 |
+
// وظيفة زر النسخ
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 281 |
document.getElementById('copyButton').addEventListener('click', async function() {
|
| 282 |
const contractText = document.getElementById('contractOutput').innerText;
|
|
|
|
| 283 |
try {
|
| 284 |
await navigator.clipboard.writeText(contractText);
|
| 285 |
+
showSuccessMessage('تم نسخ العقد بنجاح!');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 286 |
} catch (err) {
|
| 287 |
console.error('فشل نسخ النص: ', err);
|
| 288 |
}
|
| 289 |
});
|
| 290 |
|
| 291 |
+
// وظيفة إظهار رسالة النجاح
|
| 292 |
+
function showSuccessMessage(message) {
|
| 293 |
+
const successMessage = document.createElement('div');
|
| 294 |
+
successMessage.className = 'success-message animate__animated animate__fadeIn';
|
| 295 |
+
successMessage.textContent = message;
|
| 296 |
+
document.body.appendChild(successMessage);
|
| 297 |
+
setTimeout(() => {
|
| 298 |
+
successMessage.classList.add('animate__fadeOut');
|
| 299 |
+
setTimeout(() => successMessage.remove(), 300);
|
| 300 |
+
}, 2000);
|
| 301 |
+
}
|
| 302 |
+
|
| 303 |
+
// التحقق من صحة الرقم القومي
|
| 304 |
+
document.querySelectorAll('#firstPartyID, #secondPartyID').forEach(input => {
|
| 305 |
+
input.addEventListener('input', function() {
|
| 306 |
+
this.value = this.value.replace(/[^0-9]/g, '');
|
| 307 |
+
if (this.value.length > 14) {
|
| 308 |
+
this.value = this.value.slice(0, 14);
|
| 309 |
+
}
|
| 310 |
+
});
|
| 311 |
+
});
|
| 312 |
+
|
| 313 |
+
// وظيفة الحصول على تسمية الحقل
|
| 314 |
+
function getFieldLabel(field) {
|
| 315 |
+
const labels = {
|
| 316 |
+
title: 'عنوان العقد',
|
| 317 |
+
date: 'تاريخ العقد',
|
| 318 |
+
firstPartyName: 'اسم الطرف الأول',
|
| 319 |
+
firstPartyID: 'الرقم القومي للطرف الأول',
|
| 320 |
+
firstPartyTitle: 'صفة الطرف الأول',
|
| 321 |
+
firstPartyNationality: 'جنسية الطرف الأول',
|
| 322 |
+
firstPartyAddress: 'عنوان الطرف الأول',
|
| 323 |
+
secondPartyName: 'اسم الطرف الثاني',
|
| 324 |
+
secondPartyID: 'الرقم القومي للطرف الثاني',
|
| 325 |
+
secondPartyTitle: 'صفة الطرف الثاني',
|
| 326 |
+
secondPartyNationality: 'جنسية الطرف الثاني',
|
| 327 |
+
secondPartyAddress: 'عنوان الطرف الثاني',
|
| 328 |
+
preamble: 'البند التمهيدي',
|
| 329 |
+
terms: 'بنود العقد'
|
| 330 |
+
};
|
| 331 |
+
return labels[field] || field;
|
| 332 |
+
}
|
| 333 |
+
|
| 334 |
+
// وظيفة زر إنشاء العقد
|
| 335 |
document.getElementById('generateButton').addEventListener('click', async function() {
|
| 336 |
const button = this;
|
| 337 |
const outputDiv = document.getElementById('contractOutput');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 338 |
|
| 339 |
+
// جمع بيانات النموذج
|
| 340 |
+
const formData = {
|
| 341 |
+
title: document.getElementById('contractTitle').value,
|
| 342 |
+
date: document.getElementById('contractDate').value,
|
| 343 |
+
firstPartyName: document.getElementById('firstPartyName').value,
|
| 344 |
+
firstPartyID: document.getElementById('firstPartyID').value,
|
| 345 |
+
firstPartyTitle: document.getElementById('firstPartyTitle').value,
|
| 346 |
+
firstPartyNationality: document.getElementById('firstPartyNationality').value,
|
| 347 |
+
firstPartyAddress: document.getElementById('firstPartyAddress').value,
|
| 348 |
+
secondPartyName: document.getElementById('secondPartyName').value,
|
| 349 |
+
secondPartyID: document.getElementById('secondPartyID').value,
|
| 350 |
+
secondPartyTitle: document.getElementById('secondPartyTitle').value,
|
| 351 |
+
secondPartyNationality: document.getElementById('secondPartyNationality').value,
|
| 352 |
+
secondPartyAddress: document.getElementById('secondPartyAddress').value,
|
| 353 |
+
preamble: document.getElementById('contractPreamble').value,
|
| 354 |
+
terms: document.getElementById('contractTerms').value
|
| 355 |
+
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 356 |
|
| 357 |
+
// التحقق من البيانات المطلوبة
|
| 358 |
+
const requiredFields = Object.keys(formData);
|
| 359 |
+
const missingFields = requiredFields.filter(field => !formData[field]);
|
| 360 |
+
|
| 361 |
+
if (missingFields.length > 0) {
|
| 362 |
+
outputDiv.innerHTML = `
|
| 363 |
+
<div class="text-red-500 font-bold mb-4">يرجى ملء جميع الحقول المطلوبة</div>
|
| 364 |
+
<ul class="list-disc list-inside text-red-500">
|
| 365 |
+
${missingFields.map(field => `<li>${getFieldLabel(field)}</li>`).join('')}
|
| 366 |
+
</ul>
|
| 367 |
+
`;
|
| 368 |
return;
|
| 369 |
}
|
| 370 |
|
| 371 |
+
// تحديث واجهة المستخدم لحالة التحميل
|
| 372 |
+
button.textContent = 'جاري إنشاء العقد...';
|
| 373 |
+
button.disabled = true;
|
| 374 |
+
outputDiv.innerHTML = `
|
| 375 |
+
<div class="flex items-center justify-center space-x-4 text-gray-600">
|
| 376 |
+
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
| 377 |
+
<span>جاري إنشاء العقد باستخدام الذكاء الاصطناعي...</span>
|
| 378 |
+
</div>
|
| 379 |
+
`;
|
| 380 |
+
|
| 381 |
try {
|
| 382 |
+
// تحويل التاريخ إلى التنسيق العربي
|
| 383 |
+
const dateObj = new Date(formData.date);
|
| 384 |
+
const arabicDate = new Intl.DateTimeFormat('ar-EG', {
|
| 385 |
+
year: 'numeric',
|
| 386 |
+
month: 'long',
|
| 387 |
+
day: 'numeric'
|
| 388 |
+
}).format(dateObj);
|
| 389 |
+
|
| 390 |
+
// إنشاء نص الطلب
|
| 391 |
+
const prompt = `قم بإنشاء عقد قانوني مصري رسمي باللغة العربية يتضمن البيانات التالية:
|
|
|
|
| 392 |
|
| 393 |
+
عنوان العقد: ${formData.title}
|
| 394 |
+
تاريخ العقد: ${arabicDate}
|
| 395 |
+
|
| 396 |
+
الطرف الأول:
|
| 397 |
+
- الاسم: ${formData.firstPartyName}
|
| 398 |
+
- الرقم القومي: ${formData.firstPartyID}
|
| 399 |
+
- الصفة: ${formData.firstPartyTitle}
|
| 400 |
+
- الجنسية: ${formData.firstPartyNationality}
|
| 401 |
+
- العنوان: ${formData.firstPartyAddress}
|
| 402 |
+
|
| 403 |
+
الطرف الثاني:
|
| 404 |
+
- الاسم: ${formData.secondPartyName}
|
| 405 |
+
- الرقم القومي: ${formData.secondPartyID}
|
| 406 |
+
- الصفة: ${formData.secondPartyTitle}
|
| 407 |
+
- الجنسية: ${formData.secondPartyNationality}
|
| 408 |
+
- العنوان: ${formData.secondPartyAddress}
|
| 409 |
+
|
| 410 |
+
التمهيد:
|
| 411 |
+
${formData.preamble}
|
| 412 |
+
|
| 413 |
+
بنود العقد:
|
| 414 |
+
${formData.terms}
|
| 415 |
+
|
| 416 |
+
يجب أن يتضمن العقد:
|
| 417 |
+
1. النص القانوني: "وبعد أن أقر طرفي هذا العقد بكامل أهليتهما المعتبرة قانوناً وشرعاً وبخلو إرادتهما من أي عيب من عيوب الإرادة وبأنهما غير ممنوعين من التصرف وغير محجور عليهما لأي سبب من الأسباب وعدم خضوعهم لقانون الحراسات أو الكسب غير المشروع وبخلوهما من كافة الموانع القانونية والشرعية اللازمة للتعاقد اتفقوا على الآتي"
|
| 418 |
+
2. بند حكم التمهيد يوضح أن التمهيد جزء لا يتجزأ من العقد
|
| 419 |
+
3. تنسيق قانوني رسمي
|
| 420 |
+
4. مكان للتوقيع في النهاية مع كتابة "طرف أول" و "طرف ثاني"`;
|
| 421 |
+
|
| 422 |
+
// إرسال الطلب إلى API
|
| 423 |
const response = await fetch(API_URL, {
|
| 424 |
method: 'POST',
|
| 425 |
+
headers: {
|
| 426 |
+
'Content-Type': 'application/json'
|
| 427 |
+
},
|
| 428 |
body: JSON.stringify({
|
| 429 |
message: prompt,
|
| 430 |
history: []
|
| 431 |
+
})
|
|
|
|
| 432 |
});
|
| 433 |
|
| 434 |
+
if (!response.ok) {
|
| 435 |
+
throw new Error(`HTTP error! status: ${response.status}`);
|
| 436 |
+
}
|
| 437 |
+
|
| 438 |
const data = await response.json();
|
| 439 |
+
outputDiv.innerHTML = `<div dir="rtl" style="white-space: pre-wrap;">${data.response}</div>`;
|
|
|
|
| 440 |
|
| 441 |
} catch (error) {
|
| 442 |
+
outputDiv.innerHTML = `
|
| 443 |
+
<div class="text-red-600 font-bold">
|
| 444 |
+
عذراً، حدث خطأ في إنشاء العقد. يرجى المحاولة مرة أخرى.
|
| 445 |
+
<br>
|
| 446 |
+
تفاصيل الخطأ: ${error.message}
|
| 447 |
+
</div>
|
| 448 |
+
`;
|
| 449 |
+
console.error('Error:', error);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 450 |
} finally {
|
|
|
|
| 451 |
button.textContent = 'إنشاء العقد';
|
| 452 |
+
button.disabled = false;
|
| 453 |
}
|
| 454 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 455 |
</script>
|
| 456 |
</body>
|
| 457 |
</html>
|