|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DreamFlow - Legal Form Builder</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6F61EF', |
|
|
secondary: '#39D2C0', |
|
|
accent: '#EE8B60', |
|
|
surface: '#F7F7F7', |
|
|
darkSurface: '#1E1E1E', |
|
|
error: '#EF4444', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Almarai', sans-serif; |
|
|
direction: rtl; |
|
|
} |
|
|
|
|
|
.form-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.form-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.recent-card { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.recent-card:hover { |
|
|
background-color: #f0f0f0; |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(111, 97, 239, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(111, 97, 239, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(111, 97, 239, 0); } |
|
|
} |
|
|
|
|
|
.slide-in { |
|
|
animation: slideIn 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(20px); opacity: 0; } |
|
|
to { transform: translateX(0); opacity: 1; } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.8s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
.document-editor { |
|
|
min-height: 400px; |
|
|
} |
|
|
|
|
|
.sync-pulse { |
|
|
animation: syncPulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes syncPulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-white shadow-sm py-4"> |
|
|
<div class="container mx-auto px-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="bg-primary text-white p-2 rounded-lg"> |
|
|
<i class="fas fa-file-contract text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-xl md:text-2xl font-bold text-gray-800">صانع النماذج القانونية</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-moon text-gray-600"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button class="p-2 rounded-full hover:bg-gray-100"> |
|
|
<i class="fas fa-bell text-gray-600"></i> |
|
|
</button> |
|
|
<span class="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"></div> |
|
|
<span class="hidden md:inline text-gray-700">محمد أحمد</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-6"> |
|
|
|
|
|
<div class="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl p-6 mb-8 slide-in"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="flex-1 mb-4 md:mb-0"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-2">مرحباً بك في صانع النماذج القانونية</h2> |
|
|
<p class="text-gray-600">أنشئ نماذجك القانونية بسهولة وسرعة</p> |
|
|
</div> |
|
|
<div class="bg-primary/10 p-4 rounded-lg"> |
|
|
<i class="fas fa-file-contract text-primary text-4xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-8 slide-in"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-cloud text-green-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-800">متصل</h3> |
|
|
<p class="text-sm text-gray-600">آخر مزامنة: منذ 5 دقائق</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="text-center"> |
|
|
<div class="bg-gray-100 rounded-lg p-3 mb-1"> |
|
|
<span class="text-xl font-bold">0</span> |
|
|
</div> |
|
|
<span class="text-xs text-gray-600">في الانتظار</span> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-gray-100 rounded-lg p-3 mb-1"> |
|
|
<span class="text-xl font-bold">0</span> |
|
|
</div> |
|
|
<span class="text-xs text-gray-600">تعارضات</span> |
|
|
</div> |
|
|
<button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-2 sync-pulse"></i> |
|
|
مزامنة |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="mb-10"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6">الفئات</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="form-card bg-white rounded-xl shadow-sm overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-primary/10 p-3 rounded-lg mr-4"> |
|
|
<span class="text-2xl">👰</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-gray-800">الأحوال الشخصية</h3> |
|
|
<p class="text-gray-600 text-sm">Personal Status</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">12 نموذج</span> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-between"> |
|
|
<button class="text-primary hover:text-primary/80 flex items-center"> |
|
|
<i class="fas fa-upload mr-1"></i> |
|
|
استيراد نموذج |
|
|
</button> |
|
|
<button class="text-primary hover:text-primary/80 flex items-center"> |
|
|
<i class="fas fa-folder-open mr-1"></i> |
|
|
إدارة المستندات |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="form-card bg-white rounded-xl shadow-sm overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-secondary/10 p-3 rounded-lg mr-4"> |
|
|
<span class="text-2xl">⚖️</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-gray-800">المرافعات</h3> |
|
|
<p class="text-gray-600 text-sm">Pleadings</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="bg-secondary/10 text-secondary px-3 py-1 rounded-full text-sm font-medium">8 نموذج</span> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-between"> |
|
|
<button class="text-secondary hover:text-secondary/80 flex items-center"> |
|
|
<i class="fas fa-upload mr-1"></i> |
|
|
استيراد نموذج |
|
|
</button> |
|
|
<button class="text-secondary hover:text-secondary/80 flex items-center"> |
|
|
<i class="fas fa-folder-open mr-1"></i> |
|
|
إدارة المستندات |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="form-card bg-white rounded-xl shadow-sm overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-accent/10 p-3 rounded-lg mr-4"> |
|
|
<span class="text-2xl">🕵️</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg text-gray-800">التحقيقات</h3> |
|
|
<p class="text-gray-600 text-sm">Investigation</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="bg-accent/10 text-accent px-3 py-1 rounded-full text-sm font-medium">5 نموذج</span> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-between"> |
|
|
<button class="text-accent hover:text-accent/80 flex items-center"> |
|
|
<i class="fas fa-upload mr-1"></i> |
|
|
استيراد نموذج |
|
|
</button> |
|
|
<button class="text-accent hover:text-accent/80 flex items-center"> |
|
|
<i class="fas fa-folder-open mr-1"></i> |
|
|
إدارة المستندات |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">النماذج الأخيرة</h2> |
|
|
<button class="text-primary hover:text-primary/80 flex items-center"> |
|
|
<i class="fas fa-plus mr-1"></i> |
|
|
إنشاء نموذج جديد |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden"> |
|
|
|
|
|
<div class="recent-card border-b border-gray-100 last:border-0"> |
|
|
<div class="p-4 flex items-center"> |
|
|
<div class="bg-primary/10 p-3 rounded-lg mr-4"> |
|
|
<span class="text-lg">👰</span> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-bold text-gray-800">طلب طلاق</h3> |
|
|
<p class="text-gray-600 text-sm">محكمة الاستئناف - محمد أحمد ضد فاطمة محمد</p> |
|
|
<p class="text-gray-500 text-xs mt-1">2023/05/15</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 text-gray-500 hover:text-primary rounded-full hover:bg-primary/10"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-red-500 rounded-full hover:bg-red-50"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="recent-card border-b border-gray-100 last:border-0"> |
|
|
<div class="p-4 flex items-center"> |
|
|
<div class="bg-secondary/10 p-3 rounded-lg mr-4"> |
|
|
<span class="text-lg">⚖️</span> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-bold text-gray-800">طلب استرداد أموال</h3> |
|
|
<p class="text-gray-600 text-sm">محكمة التجارة - شركة الألفية ضد شركة النور</p> |
|
|
<p class="text-gray-500 text-xs mt-1">2023/05/10</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 text-gray-500 hover:text-primary rounded-full hover:bg-primary/10"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-red-500 rounded-full hover:bg-red-50"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="recent-card border-b border-gray-100 last:border-0"> |
|
|
<div class="p-4 flex items-center"> |
|
|
<div class="bg-accent/10 p-3 rounded-lg mr-4"> |
|
|
<span class="text-lg">🕵️</span> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-bold text-gray-800">تقرير تحقيقات</h3> |
|
|
<p class="text-gray-600 text-sm">إدارة التحقيقات - قضية سرقة مركبة</p> |
|
|
<p class="text-gray-500 text-xs mt-1">2023/05/05</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 text-gray-500 hover:text-primary rounded-full hover:bg-primary/10"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-red-500 rounded-full hover:bg-red-50"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-white border-t py-6"> |
|
|
<div class="container mx-auto px-4 text-center text-gray-600"> |
|
|
<p>© 2023 DreamFlow - صانع النماذج القانونية. جميع الحقوق محفوظة.</p> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="document-editor-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> |
|
|
<div class="bg-white rounded-xl w-full max-w-4xl max-h-[90vh] flex flex-col"> |
|
|
<div class="p-4 border-b flex justify-between items-center"> |
|
|
<h3 class="text-xl font-bold">تحرير المستند</h3> |
|
|
<button id="close-editor" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-b"> |
|
|
<input type="text" value="طلب طلاق" class="w-full p-3 border rounded-lg mb-2 text-right" placeholder="اسم المستند"> |
|
|
<div class="flex justify-between text-sm text-gray-600"> |
|
|
<span>الأحوال الشخصية</span> |
|
|
<span>آخر تعديل: الآن</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-b bg-gray-50"> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center"> |
|
|
<i class="fas fa-bold mr-1"></i> |
|
|
عريض |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center"> |
|
|
<i class="fas fa-italic mr-1"></i> |
|
|
مائل |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center"> |
|
|
<i class="fas fa-underline mr-1"></i> |
|
|
تحته خط |
|
|
</button> |
|
|
<div class="border-l h-6 my-auto mx-2"></div> |
|
|
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center"> |
|
|
<i class="fas fa-gavel mr-1"></i> |
|
|
اسم المحكمة |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center"> |
|
|
<i class="fas fa-user mr-1"></i> |
|
|
اسم المدعي |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center"> |
|
|
<i class="fas fa-user-friends mr-1"></i> |
|
|
اسم المدعى عليه |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-lg flex items-center"> |
|
|
<i class="fas fa-calendar mr-1"></i> |
|
|
التاريخ |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-grow p-4 overflow-auto"> |
|
|
<textarea class="document-editor w-full p-4 border rounded-lg text-right" placeholder="ابدأ بكتابة المحتوى هنا..."> |
|
|
محكمة الاستئناف |
|
|
التاريخ: 2023/05/15 |
|
|
|
|
|
المدعي: محمد أحمد |
|
|
المدعى عليه: فاطمة محمد |
|
|
|
|
|
الموضوع: طلب طلاق |
|
|
|
|
|
أنا الموقع أدناه، أطلب من هذه المحكمة الموقرة إصدار حكم بالطلاق بيني وبين زوجتي فاطمة محمد، وذلك للأسباب التالية: |
|
|
|
|
|
1. عدم التفاهم المستمر بين الطرفين. |
|
|
2. تكرار المشاكل العائلية التي تؤثر على حياة الأطفال. |
|
|
3. عدم القدرة على المصالحة رغم المحاولات. |
|
|
|
|
|
أطلب من المحكمة إصدار حكم بالطلاق وتحديد النفقة والحضانة حسب القانون. |
|
|
|
|
|
مع خالص التقدير، |
|
|
محمد أحمد |
|
|
</textarea> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t flex justify-between items-center"> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-edit text-orange-500 mr-1"></i> |
|
|
<span>تم التعديل</span> |
|
|
<span class="mx-2">|</span> |
|
|
<span>الكلمات: 128</span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100"> |
|
|
<i class="fas fa-sync-alt mr-1"></i> |
|
|
مزامنة |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 flex items-center"> |
|
|
<i class="fas fa-save mr-1"></i> |
|
|
حفظ المستند |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
const themeIcon = themeToggle.querySelector('i'); |
|
|
|
|
|
themeToggle.addEventListener('click', () => { |
|
|
document.body.classList.toggle('dark'); |
|
|
if (document.body.classList.contains('dark')) { |
|
|
themeIcon.classList.remove('fa-moon'); |
|
|
themeIcon.classList.add('fa-sun'); |
|
|
document.body.style.backgroundColor = '#1E1E1E'; |
|
|
document.body.style.color = '#FFFFFF'; |
|
|
} else { |
|
|
themeIcon.classList.remove('fa-sun'); |
|
|
themeIcon.classList.add('fa-moon'); |
|
|
document.body.style.backgroundColor = '#F7F7F7'; |
|
|
document.body.style.color = '#1E1E1E'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const editorModal = document.getElementById('document-editor-modal'); |
|
|
const closeEditor = document.getElementById('close-editor'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.recent-card').forEach(card => { |
|
|
card.addEventListener('click', () => { |
|
|
editorModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
closeEditor.addEventListener('click', () => { |
|
|
editorModal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', (e) => { |
|
|
if (e.target === editorModal) { |
|
|
editorModal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.form-card button').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
alert('وظيفة إنشاء نموذج جديدة سيتم تنفيذها هنا'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.recent-card .fa-trash').forEach(button => { |
|
|
button.closest('button').addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
if (confirm('هل أنت متأكد من حذف هذا النموذج؟')) { |
|
|
e.target.closest('.recent-card').remove(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=almatrx/https-huggingface-co-join-xet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
