Spaces:

joermd
/

mostasharak

Running

File size: 20,029 Bytes

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>منشئ العقود المصري الذكي</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'IBM Plex Sans Arabic', sans-serif;
            background: #ffffff;
            min-height: 100vh;
        }
        
        .split-screen {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 2rem;
            min-height: calc(100vh - 4rem);
        }
        
        .input-group {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .input-group input, .input-group textarea, .input-group select {
            width: 100%;
            padding: 1rem 1.25rem;
            border: 2px solid #e5e7eb;
            border-radius: 1rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: #ffffff;
            font-size: 1rem;
        }
        
        .input-group input:focus, .input-group textarea:focus, .input-group select:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
            outline: none;
            transform: translateY(-2px);
        }
        
        .card {
            background: white;
            border-radius: 1.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            padding: 2.5rem;
            height: fit-content;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid #f3f4f6;
        }
        
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        }
        
        .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;
        }
        
        .btn {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 1rem;
            font-weight: 600;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
            position: relative;
            overflow: hidden;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .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) {
            .split-screen {
                grid-template-columns: 1fr;
                padding: 1rem;
            }
            
            .card {
                margin-bottom: 1rem;
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="split-screen">
        <div class="card animate__animated animate__fadeInRight">
            <h1 class="text-4xl font-bold mb-8 text-center text-gray-800">منشئ العقود المصري الذكي</h1>
            
            <div id="customTemplate" class="contract-template space-y-6">
                <h2 class="section-title">معلومات العقد الأساسية</h2>
                
                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">عنوان العقد:</label>
                    <input type="text" id="contractTitle" placeholder="عنوان العقد" class="focus:ring-2 focus:ring-blue-500">
                </div>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">تاريخ تحرير العقد:</label>
                    <input type="date" id="contractDate" class="focus:ring-2 focus:ring-blue-500">
                </div>

                <h2 class="section-title">بيانات الطرف الأول</h2>
                
                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">اسم الطرف الأول:</label>
                    <input type="text" id="firstPartyName" placeholder="الاسم الكامل">
                </div>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">الرقم القومي:</label>
                    <input type="text" id="firstPartyID" placeholder="الرقم القومي المكون من 14 رقم" maxlength="14">
                </div>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">الصفة:</label>
                    <input type="text" id="firstPartyTitle" placeholder="الصفة (مثال: مالك، مدير شركة)">
                </div>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">الجنسية:</label>
                    <input type="text" id="firstPartyNationality" placeholder="الجنسية" value="مصري">
                </div>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">محل الإقامة:</label>
                    <input type="text" id="firstPartyAddress" placeholder="العنوان التفصيلي">
                </div>

                <h2 class="section-title">بيانات الطرف الثاني</h2>
                
                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">اسم الطرف الثاني:</label>
                    <input type="text" id="secondPartyName" placeholder="الاسم الكامل">
                </div>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">الرقم القومي:</label>
                    <input type="text" id="secondPartyID" placeholder="الرقم القومي المكون من 14 رقم" maxlength="14">
                </div>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">الصفة:</label>
                    <input type="text" id="secondPartyTitle" placeholder="الصفة (مثال: مستأجر، مشتري)">
                </div>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">الجنسية:</label>
                    <input type="text" id="secondPartyNationality" placeholder="الجنسية" value="مصري">
                </div>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">محل الإقامة:</label>
                    <input type="text" id="secondPartyAddress" placeholder="العنوان التفصيلي">
                </div>

                <h2 class="section-title">تفاصيل العقد</h2>

                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">البند التمهيدي (مضمون العقد):</label>
                    <textarea id="contractPreamble" class="h-32" placeholder="اكتب مضمون العقد والغرض منه"></textarea>
                </div>
                
                <div class="input-group">
                    <label class="block text-gray-700 font-bold mb-2">بنود العقد:</label>
                    <textarea id="contractTerms" class="h-64" placeholder="اكتب بنود العقد الأساسية"></textarea>
                </div>
            </div>
            
            <div class="mt-8 flex justify-center">
                <button id="generateButton" class="btn">
                    إنشاء العقد
                </button>
            </div>
        </div>
        
        <div class="card animate__animated animate__fadeInLeft">
            <h2 class="text-2xl font-bold mb-6 text-gray-800">العقد المنشأ</h2>
            <div class="relative">
                <button class="copy-btn" id="copyButton">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                    </svg>
                    نسخ العقد
                </button>
                <div id="contractOutput" class="contract-output prose"></div>
            </div>
        </div>
    </div>

    <script>
        // تعريف رابط API الخاص بنا
        const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat';

        // إضافة مستمعي الأحداث لحقول النموذج
        document.querySelectorAll('input, textarea').forEach(element => {
            element.addEventListener('focus', function() {
                this.closest('.input-group').classList.add('focused');
                this.style.transform = 'translateY(-2px)';
            });
            
            element.addEventListener('blur', function() {
                this.closest('.input-group').classList.remove('focused');
                this.style.transform = 'translateY(0)';
            });
        });

        // وظيفة زر النسخ
        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 animate__animated animate__fadeIn';
            successMessage.textContent = message;
            document.body.appendChild(successMessage);
            setTimeout(() => {
                successMessage.classList.add('animate__fadeOut');
                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);
                }
            });
        });

        // وظيفة الحصول على تسمية الحقل
        function getFieldLabel(field) {
            const labels = {
                title: 'عنوان العقد',
                date: 'تاريخ العقد',
                firstPartyName: 'اسم الطرف الأول',
                firstPartyID: 'الرقم القومي للطرف الأول',
                firstPartyTitle: 'صفة الطرف الأول',
                firstPartyNationality: 'جنسية الطرف الأول',
                firstPartyAddress: 'عنوان الطرف الأول',
                secondPartyName: 'اسم الطرف الثاني',
                secondPartyID: 'الرقم القومي للطرف الثاني',
                secondPartyTitle: 'صفة الطرف الثاني',
                secondPartyNationality: 'جنسية الطرف الثاني',
                secondPartyAddress: 'عنوان الطرف الثاني',
                preamble: 'البند التمهيدي',
                terms: 'بنود العقد'
            };
            return labels[field] || field;
        }

        // وظيفة زر إنشاء العقد
        document.getElementById('generateButton').addEventListener('click', async function() {
            const button = this;
            const outputDiv = document.getElementById('contractOutput');

            // جمع بيانات النموذج
            const formData = {
                title: document.getElementById('contractTitle').value,
                date: document.getElementById('contractDate').value,
                firstPartyName: document.getElementById('firstPartyName').value,
                firstPartyID: document.getElementById('firstPartyID').value,
                firstPartyTitle: document.getElementById('firstPartyTitle').value,
                firstPartyNationality: document.getElementById('firstPartyNationality').value,
                firstPartyAddress: document.getElementById('firstPartyAddress').value,
                secondPartyName: document.getElementById('secondPartyName').value,
                secondPartyID: document.getElementById('secondPartyID').value,
                secondPartyTitle: document.getElementById('secondPartyTitle').value,
                secondPartyNationality: document.getElementById('secondPartyNationality').value,
                secondPartyAddress: document.getElementById('secondPartyAddress').value,
                preamble: document.getElementById('contractPreamble').value,
                terms: document.getElementById('contractTerms').value
            };

            // التحقق من البيانات المطلوبة
            const requiredFields = Object.keys(formData);
            const missingFields = requiredFields.filter(field => !formData[field]);
            
            if (missingFields.length > 0) {
                outputDiv.innerHTML = `
                    <div class="text-red-500 font-bold mb-4">يرجى ملء جميع الحقول المطلوبة</div>
                    <ul class="list-disc list-inside text-red-500">
                        ${missingFields.map(field => `<li>${getFieldLabel(field)}</li>`).join('')}
                    </ul>
                `;
                return;
            }

            // تحديث واجهة المستخدم لحالة التحميل
            button.textContent = 'جاري إنشاء العقد...';
            button.disabled = true;
            outputDiv.innerHTML = `
                <div class="flex items-center justify-center space-x-4 text-gray-600">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                    <span>جاري إنشاء العقد باستخدام الذكاء الاصطناعي...</span>
                </div>
            `;

            try {
                // تحويل التاريخ إلى التنسيق العربي
                const dateObj = new Date(formData.date);
                const arabicDate = new Intl.DateTimeFormat('ar-EG', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                }).format(dateObj);

                // إنشاء نص الطلب
                const prompt = `قم بإنشاء عقد قانوني مصري رسمي باللغة العربية يتضمن البيانات التالية:

عنوان العقد: ${formData.title}
تاريخ العقد: ${arabicDate}

الطرف الأول:
- الاسم: ${formData.firstPartyName}
- الرقم القومي: ${formData.firstPartyID}
- الصفة: ${formData.firstPartyTitle}
- الجنسية: ${formData.firstPartyNationality}
- العنوان: ${formData.firstPartyAddress}

الطرف الثاني:
- الاسم: ${formData.secondPartyName}
- الرقم القومي: ${formData.secondPartyID}
- الصفة: ${formData.secondPartyTitle}
- الجنسية: ${formData.secondPartyNationality}
- العنوان: ${formData.secondPartyAddress}

التمهيد:
${formData.preamble}

بنود العقد:
${formData.terms}

يجب أن يتضمن العقد:
1. النص القانوني: "وبعد أن أقر طرفي هذا العقد بكامل أهليتهما المعتبرة قانوناً وشرعاً وبخلو إرادتهما من أي عيب من عيوب الإرادة وبأنهما غير ممنوعين من التصرف وغير محجور عليهما لأي سبب من الأسباب وعدم خضوعهم لقانون الحراسات أو الكسب غير المشروع وبخلوهما من كافة الموانع القانونية والشرعية اللازمة للتعاقد اتفقوا على الآتي"
2. بند حكم التمهيد يوضح أن التمهيد جزء لا يتجزأ من العقد
3. تنسيق قانوني رسمي
4. مكان للتوقيع في النهاية مع كتابة "طرف أول" و "طرف ثاني"`;

                // إرسال الطلب إلى API
                const response = await fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        message: prompt,
                        history: []
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                outputDiv.innerHTML = `<div dir="rtl" style="white-space: pre-wrap;">${data.response}</div>`;

            } catch (error) {
                outputDiv.innerHTML = `
                    <div class="text-red-600 font-bold">
                        عذراً، حدث خطأ في إنشاء العقد. يرجى المحاولة مرة أخرى.
                        <br>
                        تفاصيل الخطأ: ${error.message}
                    </div>
                `;
                console.error('Error:', error);
            } finally {
                button.textContent = 'إنشاء العقد';
                button.disabled = false;
            }
        });
    </script>
</body>
</html>