Hugging Face's logo

Spaces:
YousefKhamis
/
quotes-generator
Running

App Files Community
YousefKhamis commited on
Commit
06fac83
·
verified ·
1 Parent(s): d1c7d91

أريد إنشاء برنامج ويب بلغة HTML + CSS + JavaScript (بدون ملفات خارجية إضافية) يقوم بإنشاء عروض أسعار وفق الشروط التالية: 1. واجهة إدخال البيانات: جدول لإدخال البنود يحتوي على الأعمدة التالية: "م" (المسلسل) "رقم البند" "البيان" (يكون أكبر من باقي الخلايا) "الوحدة" (عدد، متر، مم… إلخ) "العدد" "الإجمالي" دالة حساب تلقائي للإجماليات: المجموع قبل الضريبة الضريبة (14%) المجموع بعد الضريبة مدخلات لإضافة: اسم الجهة + التاريخ. 2. توليد عرض الأسعار: إرسال البيانات إلى نموذج: agentica-org/deepcoder-14b-preview:free عبر API OpenRouter باستخدام المفتاح: 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. إخراج النتيجة في هيئة مستند HTML منسق بشكل رسمي وأنيق شبيه بتصميم Word، بدون ألوان صارخة أو فراغات غير ضرورية. 3. تنظيم الصفحات: الصفحة الواحدة تحتوي على 7 بنود كحد أقصى. إذا زاد عدد البنود عن 7 → الانتقال لصفحة جديدة. إذا كانت البنود أقل من 7 → عرض فقط البنود المدخلة. الإجمالي + الضريبة + الشروط + طريقة الدفع → في آخر صفحة فقط. 4. التصدير: إمكانية التصدير إلى: DOC, PDF, Excel. 5. بيانات الشركة: الشركة اسمها: "المصرية للمقاولات الكهروميكانيكية". رقم العرض في الـHeader بخط صغير. 6. صفحة الإعدادات: تعديل بيانات الشركة + إضافة شعار (اختياري) وحفظه في Local Storage. زر "تصدير قاعدة البيانات" → ملف JSON يحتوي على جميع بيانات وعروض البرنامج. زر "استيراد قاعدة البيانات" → قراءة ملف JSON مطبق على الإعدادات والبيانات. مرونة كاملة لتعديل أي عنصر في عرض الأسعار (الهيدر، التذييل، التنسيق… إلخ). 7. المتطلبات الفنية: كل الكود في ملف واحد HTML يتضمن CSS وJS داخليًا. تصميم متجاوب وديناميكي. الصفحة قابلة للتعديل من قبل المستخدم قبل التصدير. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +880 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Quotes Generator
3
- emoji: 📈
4
  colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: quotes-generator
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,880 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>نظام عروض الأسعار - المصرية للمقاولات الكهروميكانيكية</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ }
15
+
16
+ .page {
17
+ width: 21cm;
18
+ min-height: 29.7cm;
19
+ padding: 2cm;
20
+ margin: 1cm auto;
21
+ border: 1px solid #e5e7eb;
22
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
23
+ background: white;
24
+ position: relative;
25
+ }
26
+
27
+ @media print {
28
+ body, .page {
29
+ margin: 0;
30
+ box-shadow: none;
31
+ }
32
+
33
+ .no-print {
34
+ display: none !important;
35
+ }
36
+ }
37
+
38
+ .editable {
39
+ border-bottom: 1px dashed #999;
40
+ min-width: 50px;
41
+ display: inline-block;
42
+ }
43
+
44
+ .item-row:hover {
45
+ background-color: #f5f5f5;
46
+ }
47
+
48
+ .company-logo {
49
+ max-width: 150px;
50
+ max-height: 80px;
51
+ object-fit: contain;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-100">
56
+ <div class="container mx-auto px-4 py-8 no-print">
57
+ <h1 class="text-3xl font-bold text-center mb-8 text-blue-800">نظام عروض الأسعار</h1>
58
+
59
+ <div class="flex flex-wrap gap-4 mb-8">
60
+ <button id="newQuoteBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
61
+ <i class="fas fa-file-alt"></i> عرض سعر جديد
62
+ </button>
63
+ <button id="settingsBtn" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
64
+ <i class="fas fa-cog"></i> الإعدادات
65
+ </button>
66
+ <button id="exportBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
67
+ <i class="fas fa-file-export"></i> تصدير البيانات
68
+ </button>
69
+ <button id="importBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
70
+ <i class="fas fa-file-import"></i> استيراد البيانات
71
+ </button>
72
+ </div>
73
+
74
+ <!-- Main Input Section -->
75
+ <div id="inputSection" class="bg-white rounded-lg shadow-md p-6 mb-8">
76
+ <h2 class="text-xl font-semibold mb-4 text-blue-700 border-b pb-2">بيانات عرض السعر</h2>
77
+
78
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
79
+ <div>
80
+ <label class="block text-gray-700 mb-2">اسم الجهة</label>
81
+ <input type="text" id="clientName" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
82
+ </div>
83
+ <div>
84
+ <label class="block text-gray-700 mb-2">تاريخ العرض</label>
85
+ <input type="date" id="quoteDate" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
86
+ </div>
87
+ <div>
88
+ <label class="block text-gray-700 mb-2">رقم العرض</label>
89
+ <input type="text" id="quoteNumber" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
90
+ </div>
91
+ <div>
92
+ <label class="block text-gray-700 mb-2">صلاحية العرض (أيام)</label>
93
+ <input type="number" id="validityDays" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="30">
94
+ </div>
95
+ </div>
96
+
97
+ <h2 class="text-xl font-semibold mb-4 text-blue-700 border-b pb-2">بنود العرض</h2>
98
+
99
+ <div class="overflow-x-auto">
100
+ <table class="min-w-full bg-white border">
101
+ <thead>
102
+ <tr class="bg-gray-100">
103
+ <th class="py-2 px-4 border w-12">م</th>
104
+ <th class="py-2 px-4 border w-24">رقم البند</th>
105
+ <th class="py-2 px-4 border">البيان</th>
106
+ <th class="py-2 px-4 border w-24">الوحدة</th>
107
+ <th class="py-2 px-4 border w-24">الكمية</th>
108
+ <th class="py-2 px-4 border w-32">سعر الوحدة</th>
109
+ <th class="py-2 px-4 border w-32">الإجمالي</th>
110
+ <th class="py-2 px-4 border w-12"></th>
111
+ </tr>
112
+ </thead>
113
+ <tbody id="itemsTable">
114
+ <!-- Items will be added here -->
115
+ </tbody>
116
+ </table>
117
+ </div>
118
+
119
+ <button id="addItemBtn" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
120
+ <i class="fas fa-plus"></i> إضافة بند
121
+ </button>
122
+
123
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
124
+ <div class="bg-gray-50 p-4 rounded-lg">
125
+ <h3 class="font-semibold text-gray-700 mb-2">المجموع قبل الضريبة</h3>
126
+ <div id="subtotal" class="text-xl font-bold">0.00</div>
127
+ </div>
128
+ <div class="bg-gray-50 p-4 rounded-lg">
129
+ <h3 class="font-semibold text-gray-700 mb-2">الضريبة (14%)</h3>
130
+ <div id="taxAmount" class="text-xl font-bold">0.00</div>
131
+ </div>
132
+ <div class="bg-blue-50 p-4 rounded-lg">
133
+ <h3 class="font-semibold text-blue-700 mb-2">المجموع بعد الضريبة</h3>
134
+ <div id="totalAmount" class="text-2xl font-bold text-blue-800">0.00</div>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="mt-6">
139
+ <label class="block text-gray-700 mb-2">ملاحظات إضافية</label>
140
+ <textarea id="notes" rows="3" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
141
+ </div>
142
+
143
+ <div class="mt-6 flex flex-wrap gap-4">
144
+ <button id="generateQuoteBtn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg flex items-center gap-2">
145
+ <i class="fas fa-file-invoice"></i> توليد عرض الأسعار
146
+ </button>
147
+ <button id="previewBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white px-6 py-3 rounded-lg flex items-center gap-2">
148
+ <i class="fas fa-eye"></i> معاينة
149
+ </button>
150
+ <button id="saveDraftBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-lg flex items-center gap-2">
151
+ <i class="fas fa-save"></i> حفظ مسودة
152
+ </button>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Preview Section -->
157
+ <div id="previewSection" class="hidden bg-white rounded-lg shadow-md p-6 mb-8">
158
+ <div class="flex justify-between items-center mb-4">
159
+ <h2 class="text-xl font-semibold text-blue-700">معاينة عرض الأسعار</h2>
160
+ <button id="backToInputBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
161
+ <i class="fas fa-arrow-left"></i> العودة للإدخال
162
+ </button>
163
+ </div>
164
+
165
+ <div class="flex gap-4 mb-4">
166
+ <button id="exportPdfBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
167
+ <i class="fas fa-file-pdf"></i> تصدير PDF
168
+ </button>
169
+ <button id="exportWordBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
170
+ <i class="fas fa-file-word"></i> تصدير Word
171
+ </button>
172
+ <button id="exportExcelBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
173
+ <i class="fas fa-file-excel"></i> تصدير Excel
174
+ </button>
175
+ <button id="printBtn" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
176
+ <i class="fas fa-print"></i> طباعة
177
+ </button>
178
+ </div>
179
+
180
+ <div id="quotePreview" class="border border-gray-300 p-2 bg-white">
181
+ <!-- Quote will be rendered here -->
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Settings Modal -->
186
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
187
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
188
+ <div class="p-6">
189
+ <div class="flex justify-between items-center mb-4">
190
+ <h2 class="text-xl font-semibold text-gray-800">إعدادات النظام</h2>
191
+ <button id="closeSettingsBtn" class="text-gray-500 hover:text-gray-700">
192
+ <i class="fas fa-times"></i>
193
+ </button>
194
+ </div>
195
+
196
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
197
+ <div>
198
+ <h3 class="font-semibold text-lg mb-3 border-b pb-2">بيانات الشركة</h3>
199
+
200
+ <div class="mb-4">
201
+ <label class="block text-gray-700 mb-2">اسم الشركة</label>
202
+ <input type="text" id="companyName" class="w-full px-4 py-2 border rounded-lg" value="المصرية للمقاولات الكهروميكانيكية">
203
+ </div>
204
+
205
+ <div class="mb-4">
206
+ <label class="block text-gray-700 mb-2">العنوان</label>
207
+ <input type="text" id="companyAddress" class="w-full px-4 py-2 border rounded-lg">
208
+ </div>
209
+
210
+ <div class="mb-4">
211
+ <label class="block text-gray-700 mb-2">الهاتف</label>
212
+ <input type="text" id="companyPhone" class="w-full px-4 py-2 border rounded-lg">
213
+ </div>
214
+
215
+ <div class="mb-4">
216
+ <label class="block text-gray-700 mb-2">البريد الإلكتروني</label>
217
+ <input type="email" id="companyEmail" class="w-full px-4 py-2 border rounded-lg">
218
+ </div>
219
+
220
+ <div class="mb-4">
221
+ <label class="block text-gray-700 mb-2">السجل التجاري</label>
222
+ <input type="text" id="companyCommercialRegister" class="w-full px-4 py-2 border rounded-lg">
223
+ </div>
224
+
225
+ <div class="mb-4">
226
+ <label class="block text-gray-700 mb-2">الرقم الضريبي</label>
227
+ <input type="text" id="companyTaxId" class="w-full px-4 py-2 border rounded-lg">
228
+ </div>
229
+ </div>
230
+
231
+ <div>
232
+ <h3 class="font-semibold text-lg mb-3 border-b pb-2">الشعار والتصميم</h3>
233
+
234
+ <div class="mb-4">
235
+ <label class="block text-gray-700 mb-2">شعار الشركة</label>
236
+ <div class="flex items-center gap-4">
237
+ <img id="logoPreview" src="" alt="Company Logo" class="company-logo border rounded hidden">
238
+ <div>
239
+ <input type="file" id="logoUpload" accept="image/*" class="hidden">
240
+ <button id="uploadLogoBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
241
+ <i class="fas fa-upload mr-2"></i> رفع شعار
242
+ </button>
243
+ <button id="removeLogoBtn" class="text-red-500 hover:text-red-700 ml-2 hidden">
244
+ <i class="fas fa-trash"></i>
245
+ </button>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="mb-4">
251
+ <label class="block text-gray-700 mb-2">لون التصميم الأساسي</label>
252
+ <input type="color" id="primaryColor" value="#1e40af" class="w-16 h-10">
253
+ </div>
254
+
255
+ <h3 class="font-semibold text-lg mb-3 border-b pb-2 mt-6">الشروط والبيانات</h3>
256
+
257
+ <div class="mb-4">
258
+ <label class="block text-gray-700 mb-2">شروط الدفع</label>
259
+ <textarea id="paymentTerms" rows="3" class="w-full px-4 py-2 border rounded-lg"></textarea>
260
+ </div>
261
+
262
+ <div class="mb-4">
263
+ <label class="block text-gray-700 mb-2">شروط التسليم</label>
264
+ <textarea id="deliveryTerms" rows="3" class="w-full px-4 py-2 border rounded-lg"></textarea>
265
+ </div>
266
+
267
+ <div class="mb-4">
268
+ <label class="block text-gray-700 mb-2">ملاحظات عامة</label>
269
+ <textarea id="generalNotes" rows="3" class="w-full px-4 py-2 border rounded-lg"></textarea>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="mt-6 flex justify-end gap-4">
275
+ <button id="cancelSettingsBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg">
276
+ إلغاء
277
+ </button>
278
+ <button id="saveSettingsBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg">
279
+ حفظ الإعدادات
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Quote Template (hidden by default) -->
288
+ <div id="quoteTemplate" class="hidden">
289
+ <div class="page">
290
+ <div class="flex justify-between items-start mb-8">
291
+ <div>
292
+ <div class="flex items-center gap-4">
293
+ <img id="quoteLogo" src="" alt="Company Logo" class="company-logo">
294
+ <div>
295
+ <h1 id="quoteCompanyName" class="text-2xl font-bold text-blue-800">المصرية للمقاولات الكهروميكانيكية</h1>
296
+ <div id="quoteCompanyDetails" class="text-sm text-gray-600">
297
+ <!-- Company details will be filled here -->
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ <div class="text-left">
303
+ <h2 class="text-xl font-bold text-blue-800">عرض سعر</h2>
304
+ <div class="text-sm text-gray-600">
305
+ <div>رقم: <span id="quoteNumberDisplay" class="font-semibold"></span></div>
306
+ <div>التاريخ: <span id="quoteDateDisplay" class="font-semibold"></span></div>
307
+ <div>الصلاحية: <span id="quoteValidityDisplay" class="font-semibold"></span> يوم</div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <div class="mb-8">
313
+ <div class="bg-blue-50 p-3 rounded-t-lg">
314
+ <h3 class="font-semibold text-blue-800">السادة / <span id="quoteClientName" class="editable">اسم الجهة</span></h3>
315
+ </div>
316
+ <div class="border border-t-0 p-3 rounded-b-lg">
317
+ <p>تحية طيبة وبعد،،</p>
318
+ <p class="mt-2">نقدم لكم عرضنا الفني والمالي للبنود التالية:</p>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="mb-8 overflow-x-auto">
323
+ <table class="w-full border-collapse">
324
+ <thead>
325
+ <tr class="bg-gray-100">
326
+ <th class="py-2 px-4 border text-center w-12">م</th>
327
+ <th class="py-2 px-4 border text-center w-24">رقم البند</th>
328
+ <th class="py-2 px-4 border text-right">البيان</th>
329
+ <th class="py-2 px-4 border text-center w-24">الوحدة</th>
330
+ <th class="py-2 px-4 border text-center w-24">الكمية</th>
331
+ <th class="py-2 px-4 border text-center w-32">سعر الوحدة</th>
332
+ <th class="py-2 px-4 border text-center w-32">الإجمالي</th>
333
+ </tr>
334
+ </thead>
335
+ <tbody id="quoteItemsTable">
336
+ <!-- Quote items will be added here -->
337
+ </tbody>
338
+ </table>
339
+ </div>
340
+
341
+ <div id="quoteNotesSection" class="mb-8">
342
+ <h4 class="font-semibold mb-2 border-b pb-1">ملاحظات:</h4>
343
+ <div id="quoteNotesContent" class="text-sm">
344
+ <!-- Notes will be added here -->
345
+ </div>
346
+ </div>
347
+
348
+ <div id="quoteTotalsSection" class="mb-8">
349
+ <div class="flex justify-end">
350
+ <div class="w-64">
351
+ <div class="flex justify-between py-2 border-b">
352
+ <span>المجموع قبل الضريبة:</span>
353
+ <span id="quoteSubtotal" class="font-semibold">0.00</span>
354
+ </div>
355
+ <div class="flex justify-between py-2 border-b">
356
+ <span>الضريبة (14%):</span>
357
+ <span id="quoteTax" class="font-semibold">0.00</span>
358
+ </div>
359
+ <div class="flex justify-between py-2 text-lg font-bold bg-blue-50 px-2">
360
+ <span>المجموع النهائي:</span>
361
+ <span id="quoteTotal" class="text-blue-800">0.00</span>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <div id="quoteTermsSection" class="mb-8">
368
+ <h4 class="font-semibold mb-2 border-b pb-1">شروط الدفع:</h4>
369
+ <div id="quotePaymentTerms" class="text-sm">
370
+ <!-- Payment terms will be added here -->
371
+ </div>
372
+
373
+ <h4 class="font-semibold mb-2 border-b pb-1 mt-4">شروط التسليم:</h4>
374
+ <div id="quoteDeliveryTerms" class="text-sm">
375
+ <!-- Delivery terms will be added here -->
376
+ </div>
377
+ </div>
378
+
379
+ <div class="mt-12 flex justify-between items-center">
380
+ <div class="text-center">
381
+ <div class="mb-2">مقدم العرض</div>
382
+ <div class="border-t w-32 mx-auto pt-2">التوقيع</div>
383
+ </div>
384
+ <div class="text-center">
385
+ <div class="mb-2">المستفيد</div>
386
+ <div class="border-t w-32 mx-auto pt-2">التوقيع</div>
387
+ </div>
388
+ </div>
389
+
390
+ <div class="mt-8 text-center text-xs text-gray-500">
391
+ <p>شكراً لثقتكم في خدماتنا - نرجو التواصل معنا لأي استفسارات</p>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <script>
397
+ // Initialize variables
398
+ let items = [];
399
+ let currentItemId = 1;
400
+ let companySettings = {
401
+ name: "المصرية للمقاولات الكهروميكانيكية",
402
+ address: "",
403
+ phone: "",
404
+ email: "",
405
+ commercialRegister: "",
406
+ taxId: "",
407
+ logo: "",
408
+ primaryColor: "#1e40af",
409
+ paymentTerms: "",
410
+ deliveryTerms: "",
411
+ generalNotes: ""
412
+ };
413
+
414
+ // Load settings from localStorage if available
415
+ function loadSettings() {
416
+ const savedSettings = localStorage.getItem('companySettings');
417
+ if (savedSettings) {
418
+ companySettings = JSON.parse(savedSettings);
419
+ updateSettingsForm();
420
+ }
421
+
422
+ // Apply primary color
423
+ document.documentElement.style.setProperty('--tw-ring-color', companySettings.primaryColor);
424
+ document.documentElement.style.setProperty('--tw-bg-opacity', '1');
425
+ document.documentElement.style.setProperty('--tw-text-opacity', '1');
426
+ }
427
+
428
+ // Save settings to localStorage
429
+ function saveSettings() {
430
+ localStorage.setItem('companySettings', JSON.stringify(companySettings));
431
+ }
432
+
433
+ // Update settings form with current values
434
+ function updateSettingsForm() {
435
+ document.getElementById('companyName').value = companySettings.name;
436
+ document.getElementById('companyAddress').value = companySettings.address;
437
+ document.getElementById('companyPhone').value = companySettings.phone;
438
+ document.getElementById('companyEmail').value = companySettings.email;
439
+ document.getElementById('companyCommercialRegister').value = companySettings.commercialRegister;
440
+ document.getElementById('companyTaxId').value = companySettings.taxId;
441
+ document.getElementById('primaryColor').value = companySettings.primaryColor;
442
+ document.getElementById('paymentTerms').value = companySettings.paymentTerms;
443
+ document.getElementById('deliveryTerms').value = companySettings.deliveryTerms;
444
+ document.getElementById('generalNotes').value = companySettings.generalNotes;
445
+
446
+ if (companySettings.logo) {
447
+ document.getElementById('logoPreview').src = companySettings.logo;
448
+ document.getElementById('logoPreview').classList.remove('hidden');
449
+ document.getElementById('removeLogoBtn').classList.remove('hidden');
450
+ }
451
+ }
452
+
453
+ // Add a new item to the table
454
+ function addItem(item = null) {
455
+ const itemId = currentItemId++;
456
+ const newItem = item || {
457
+ id: itemId,
458
+ itemNumber: '',
459
+ description: '',
460
+ unit: '',
461
+ quantity: 1,
462
+ unitPrice: 0,
463
+ total: 0
464
+ };
465
+
466
+ items.push(newItem);
467
+
468
+ const row = document.createElement('tr');
469
+ row.className = 'item-row';
470
+ row.dataset.id = newItem.id;
471
+
472
+ row.innerHTML = `
473
+ <td class="py-2 px-4 border text-center">${items.length}</td>
474
+ <td class="py-2 px-4 border"><input type="text" class="item-number w-full px-2 py-1 border rounded" value="${newItem.itemNumber}"></td>
475
+ <td class="py-2 px-4 border"><input type="text" class="item-description w-full px-2 py-1 border rounded" value="${newItem.description}"></td>
476
+ <td class="py-2 px-4 border"><input type="text" class="item-unit w-full px-2 py-1 border rounded" value="${newItem.unit}"></td>
477
+ <td class="py-2 px-4 border"><input type="number" min="1" class="item-quantity w-full px-2 py-1 border rounded" value="${newItem.quantity}"></td>
478
+ <td class="py-2 px-4 border"><input type="number" min="0" step="0.01" class="item-unit-price w-full px-2 py-1 border rounded" value="${newItem.unitPrice}"></td>
479
+ <td class="py-2 px-4 border text-right"><span class="item-total">${newItem.total.toFixed(2)}</span></td>
480
+ <td class="py-2 px-4 border text-center"><button class="delete-item text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button></td>
481
+ `;
482
+
483
+ document.getElementById('itemsTable').appendChild(row);
484
+
485
+ // Add event listeners to the new inputs
486
+ const quantityInput = row.querySelector('.item-quantity');
487
+ const unitPriceInput = row.querySelector('.item-unit-price');
488
+
489
+ quantityInput.addEventListener('input', calculateItemTotal);
490
+ unitPriceInput.addEventListener('input', calculateItemTotal);
491
+
492
+ row.querySelector('.delete-item').addEventListener('click', function() {
493
+ deleteItem(newItem.id);
494
+ });
495
+
496
+ // Calculate total if this is a new item
497
+ if (!item) {
498
+ calculateItemTotal.call(quantityInput);
499
+ }
500
+
501
+ return newItem;
502
+ }
503
+
504
+ // Calculate item total
505
+ function calculateItemTotal() {
506
+ const row = this.closest('tr');
507
+ const quantity = parseFloat(row.querySelector('.item-quantity').value) || 0;
508
+ const unitPrice = parseFloat(row.querySelector('.item-unit-price').value) || 0;
509
+ const total = quantity * unitPrice;
510
+
511
+ row.querySelector('.item-total').textContent = total.toFixed(2);
512
+
513
+ // Update the item in the items array
514
+ const itemId = parseInt(row.dataset.id);
515
+ const item = items.find(item => item.id === itemId);
516
+ if (item) {
517
+ item.quantity = quantity;
518
+ item.unitPrice = unitPrice;
519
+ item.total = total;
520
+ item.itemNumber = row.querySelector('.item-number').value;
521
+ item.description = row.querySelector('.item-description').value;
522
+ item.unit = row.querySelector('.item-unit').value;
523
+ }
524
+
525
+ calculateTotals();
526
+ }
527
+
528
+ // Delete an item
529
+ function deleteItem(itemId) {
530
+ items = items.filter(item => item.id !== itemId);
531
+ document.querySelector(`tr[data-id="${itemId}"]`).remove();
532
+
533
+ // Update serial numbers
534
+ const rows = document.querySelectorAll('#itemsTable tr');
535
+ rows.forEach((row, index) => {
536
+ row.cells[0].textContent = index + 1;
537
+ });
538
+
539
+ calculateTotals();
540
+ }
541
+
542
+ // Calculate all totals
543
+ function calculateTotals() {
544
+ const subtotal = items.reduce((sum, item) => sum + item.total, 0);
545
+ const tax = subtotal * 0.14;
546
+ const total = subtotal + tax;
547
+
548
+ document.getElementById('subtotal').textContent = subtotal.toFixed(2);
549
+ document.getElementById('taxAmount').textContent = tax.toFixed(2);
550
+ document.getElementById('totalAmount').textContent = total.toFixed(2);
551
+ }
552
+
553
+ // Generate the quote
554
+ function generateQuote() {
555
+ const clientName = document.getElementById('clientName').value;
556
+ const quoteDate = document.getElementById('quoteDate').value;
557
+ const quoteNumber = document.getElementById('quoteNumber').value;
558
+ const validityDays = document.getElementById('validityDays').value || 30;
559
+ const notes = document.getElementById('notes').value;
560
+
561
+ if (!clientName || !quoteDate || !quoteNumber || items.length === 0) {
562
+ alert('الرجاء إدخال جميع البي��نات المطلوبة وإضافة بنود للعرض');
563
+ return;
564
+ }
565
+
566
+ // Format the date
567
+ const formattedDate = formatDate(quoteDate);
568
+
569
+ // Clear previous quote
570
+ const quotePreview = document.getElementById('quotePreview');
571
+ quotePreview.innerHTML = '';
572
+
573
+ // Split items into pages (7 items per page)
574
+ const itemsPerPage = 7;
575
+ const pageCount = Math.ceil(items.length / itemsPerPage);
576
+
577
+ for (let i = 0; i < pageCount; i++) {
578
+ const pageItems = items.slice(i * itemsPerPage, (i + 1) * itemsPerPage);
579
+
580
+ // Clone the quote template
581
+ const quotePage = document.getElementById('quoteTemplate').cloneNode(true);
582
+ quotePage.id = `quotePage${i + 1}`;
583
+ quotePage.classList.remove('hidden');
584
+
585
+ // Fill in the header info
586
+ quotePage.querySelector('#quoteClientName').textContent = clientName;
587
+ quotePage.querySelector('#quoteNumberDisplay').textContent = quoteNumber;
588
+ quotePage.querySelector('#quoteDateDisplay').textContent = formattedDate;
589
+ quotePage.querySelector('#quoteValidityDisplay').textContent = validityDays;
590
+
591
+ // Fill company info
592
+ quotePage.querySelector('#quoteCompanyName').textContent = companySettings.name;
593
+
594
+ let companyDetails = [];
595
+ if (companySettings.address) companyDetails.push(companySettings.address);
596
+ if (companySettings.phone) companyDetails.push(`ت: ${companySettings.phone}`);
597
+ if (companySettings.email) companyDetails.push(`بريد: ${companySettings.email}`);
598
+ if (companySettings.commercialRegister) companyDetails.push(`سجل تجاري: ${companySettings.commercialRegister}`);
599
+ if (companySettings.taxId) companyDetails.push(`رقم ضريبي: ${companySettings.taxId}`);
600
+
601
+ quotePage.querySelector('#quoteCompanyDetails').textContent = companyDetails.join(' - ');
602
+
603
+ // Set logo if available
604
+ if (companySettings.logo) {
605
+ quotePage.querySelector('#quoteLogo').src = companySettings.logo;
606
+ quotePage.querySelector('#quoteLogo').classList.remove('hidden');
607
+ }
608
+
609
+ // Add items to the table
610
+ const itemsTable = quotePage.querySelector('#quoteItemsTable');
611
+ itemsTable.innerHTML = '';
612
+
613
+ pageItems.forEach((item, index) => {
614
+ const row = document.createElement('tr');
615
+ row.innerHTML = `
616
+ <td class="py-2 px-4 border text-center">${(i * itemsPerPage) + index + 1}</td>
617
+ <td class="py-2 px-4 border text-center">${item.itemNumber}</td>
618
+ <td class="py-2 px-4 border text-right">${item.description}</td>
619
+ <td class="py-2 px-4 border text-center">${item.unit}</td>
620
+ <td class="py-2 px-4 border text-center">${item.quantity}</td>
621
+ <td class="py-2 px-4 border text-center">${item.unitPrice.toFixed(2)}</td>
622
+ <td class="py-2 px-4 border text-center">${item.total.toFixed(2)}</td>
623
+ `;
624
+ itemsTable.appendChild(row);
625
+ });
626
+
627
+ // Only show totals and terms on the last page
628
+ if (i < pageCount - 1) {
629
+ quotePage.querySelector('#quoteTotalsSection').classList.add('hidden');
630
+ quotePage.querySelector('#quoteTermsSection').classList.add('hidden');
631
+ quotePage.querySelector('#quoteNotesSection').classList.add('hidden');
632
+ } else {
633
+ // Calculate totals
634
+ const subtotal = items.reduce((sum, item) => sum + item.total, 0);
635
+ const tax = subtotal * 0.14;
636
+ const total = subtotal + tax;
637
+
638
+ quotePage.querySelector('#quoteSubtotal').textContent = subtotal.toFixed(2);
639
+ quotePage.querySelector('#quoteTax').textContent = tax.toFixed(2);
640
+ quotePage.querySelector('#quoteTotal').textContent = total.toFixed(2);
641
+
642
+ // Add notes if available
643
+ if (notes) {
644
+ quotePage.querySelector('#quoteNotesContent').innerHTML = notes.replace(/\n/g, '<br>');
645
+ } else {
646
+ quotePage.querySelector('#quoteNotesSection').classList.add('hidden');
647
+ }
648
+
649
+ // Add terms if available
650
+ if (companySettings.paymentTerms) {
651
+ quotePage.querySelector('#quotePaymentTerms').innerHTML = companySettings.paymentTerms.replace(/\n/g, '<br>');
652
+ } else {
653
+ quotePage.querySelector('#quotePaymentTerms').parentElement.classList.add('hidden');
654
+ }
655
+
656
+ if (companySettings.deliveryTerms) {
657
+ quotePage.querySelector('#quoteDeliveryTerms').innerHTML = companySettings.deliveryTerms.replace(/\n/g, '<br>');
658
+ } else {
659
+ quotePage.querySelector('#quoteDeliveryTerms').parentElement.classList.add('hidden');
660
+ }
661
+
662
+ if (!companySettings.paymentTerms && !companySettings.deliveryTerms) {
663
+ quotePage.querySelector('#quoteTermsSection').classList.add('hidden');
664
+ }
665
+ }
666
+
667
+ // Add the page to the preview
668
+ quotePreview.appendChild(quotePage);
669
+ }
670
+
671
+ // Show the preview section
672
+ document.getElementById('inputSection').classList.add('hidden');
673
+ document.getElementById('previewSection').classList.remove('hidden');
674
+ }
675
+
676
+ // Format date as DD/MM/YYYY
677
+ function formatDate(dateString) {
678
+ const date = new Date(dateString);
679
+ const day = date.getDate().toString().padStart(2, '0');
680
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
681
+ const year = date.getFullYear();
682
+ return `${day}/${month}/${year}`;
683
+ }
684
+
685
+ // Export to PDF
686
+ function exportToPdf() {
687
+ alert('تصدير إلى PDF سيتم تنفيذه باستخدام مكتبة jsPDF أو html2pdf.js في التنفيذ الفعلي');
688
+ // In a real implementation, you would use a library like jsPDF or html2pdf.js
689
+ }
690
+
691
+ // Export to Word
692
+ function exportToWord() {
693
+ alert('تصدير إلى Word سيتم تنفيذه باستخدام مكتبة docx.js في التنفيذ الفعلي');
694
+ // In a real implementation, you would use a library like docx.js
695
+ }
696
+
697
+ // Export to Excel
698
+ function exportToExcel() {
699
+ alert('تصدير إلى Excel سيتم تنفيذه باستخدام مكتبة sheetjs في التنفيذ الفعلي');
700
+ // In a real implementation, you would use a library like sheetjs
701
+ }
702
+
703
+ // Print the quote
704
+ function printQuote() {
705
+ window.print();
706
+ }
707
+
708
+ // Export database
709
+ function exportDatabase() {
710
+ const data = {
711
+ settings: companySettings,
712
+ quotes: [] // In a real app, you would store quotes here
713
+ };
714
+
715
+ const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
716
+ const url = URL.createObjectURL(blob);
717
+
718
+ const a = document.createElement('a');
719
+ a.href = url;
720
+ a.download = 'quotation_system_backup.json';
721
+ a.click();
722
+
723
+ URL.revokeObjectURL(url);
724
+ }
725
+
726
+ // Import database
727
+ function importDatabase() {
728
+ const input = document.createElement('input');
729
+ input.type = 'file';
730
+ input.accept = '.json';
731
+
732
+ input.onchange = e => {
733
+ const file = e.target.files[0];
734
+ const reader = new FileReader();
735
+
736
+ reader.onload = event => {
737
+ try {
738
+ const data = JSON.parse(event.target.result);
739
+
740
+ if (data.settings) {
741
+ companySettings = data.settings;
742
+ saveSettings();
743
+ updateSettingsForm();
744
+ alert('تم استيراد الإعدادات بنجاح');
745
+ }
746
+ } catch (error) {
747
+ alert('خطأ في قراءة الملف: ' + error.message);
748
+ }
749
+ };
750
+
751
+ reader.readAsText(file);
752
+ };
753
+
754
+ input.click();
755
+ }
756
+
757
+ // Event Listeners
758
+ document.addEventListener('DOMContentLoaded', function() {
759
+ // Load settings
760
+ loadSettings();
761
+
762
+ // Set today's date as default
763
+ const today = new Date().toISOString().split('T')[0];
764
+ document.getElementById('quoteDate').value = today;
765
+
766
+ // Generate a random quote number
767
+ document.getElementById('quoteNumber').value = 'Q-' + Math.floor(1000 + Math.random() * 9000);
768
+
769
+ // Add first empty item
770
+ addItem();
771
+
772
+ // Add item button
773
+ document.getElementById('addItemBtn').addEventListener('click', addItem);
774
+
775
+ // Generate quote button
776
+ document.getElementById('generateQuoteBtn').addEventListener('click', generateQuote);
777
+
778
+ // Preview button
779
+ document.getElementById('previewBtn').addEventListener('click', generateQuote);
780
+
781
+ // Back to input button
782
+ document.getElementById('backToInputBtn').addEventListener('click', function() {
783
+ document.getElementById('inputSection').classList.remove('hidden');
784
+ document.getElementById('previewSection').classList.add('hidden');
785
+ });
786
+
787
+ // Export buttons
788
+ document.getElementById('exportPdfBtn').addEventListener('click', exportToPdf);
789
+ document.getElementById('exportWordBtn').addEventListener('click', exportToWord);
790
+ document.getElementById('exportExcelBtn').addEventListener('click', exportToExcel);
791
+ document.getElementById('printBtn').addEventListener('click', printQuote);
792
+
793
+ // Settings buttons
794
+ document.getElementById('settingsBtn').addEventListener('click', function() {
795
+ document.getElementById('settingsModal').classList.remove('hidden');
796
+ });
797
+
798
+ document.getElementById('closeSettingsBtn').addEventListener('click', function() {
799
+ document.getElementById('settingsModal').classList.add('hidden');
800
+ });
801
+
802
+ document.getElementById('cancelSettingsBtn').addEventListener('click', function() {
803
+ document.getElementById('settingsModal').classList.add('hidden');
804
+ updateSettingsForm(); // Reset form to current settings
805
+ });
806
+
807
+ document.getElementById('saveSettingsBtn').addEventListener('click', function() {
808
+ // Update settings from form
809
+ companySettings.name = document.getElementById('companyName').value;
810
+ companySettings.address = document.getElementById('companyAddress').value;
811
+ companySettings.phone = document.getElementById('companyPhone').value;
812
+ companySettings.email = document.getElementById('companyEmail').value;
813
+ companySettings.commercialRegister = document.getElementById('companyCommercialRegister').value;
814
+ companySettings.taxId = document.getElementById('companyTaxId').value;
815
+ companySettings.primaryColor = document.getElementById('primaryColor').value;
816
+ companySettings.paymentTerms = document.getElementById('paymentTerms').value;
817
+ companySettings.deliveryTerms = document.getElementById('deliveryTerms').value;
818
+ companySettings.generalNotes = document.getElementById('generalNotes').value;
819
+
820
+ saveSettings();
821
+ document.getElementById('settingsModal').classList.add('hidden');
822
+
823
+ // Apply primary color
824
+ document.documentElement.style.setProperty('--tw-ring-color', companySettings.primaryColor);
825
+ });
826
+
827
+ // Logo upload
828
+ document.getElementById('uploadLogoBtn').addEventListener('click', function() {
829
+ document.getElementById('logoUpload').click();
830
+ });
831
+
832
+ document.getElementById('logoUpload').addEventListener('change', function(e) {
833
+ const file = e.target.files[0];
834
+ if (file) {
835
+ const reader = new FileReader();
836
+ reader.onload = function(event) {
837
+ companySettings.logo = event.target.result;
838
+ document.getElementById('logoPreview').src = companySettings.logo;
839
+ document.getElementById('logoPreview').classList.remove('hidden');
840
+ document.getElementById('removeLogoBtn').classList.remove('hidden');
841
+ };
842
+ reader.readAsDataURL(file);
843
+ }
844
+ });
845
+
846
+ document.getElementById('removeLogoBtn').addEventListener('click', function() {
847
+ companySettings.logo = '';
848
+ document.getElementById('logoPreview').src = '';
849
+ document.getElementById('logoPreview').classList.add('hidden');
850
+ this.classList.add('hidden');
851
+ });
852
+
853
+ // Export/import database
854
+ document.getElementById('exportBtn').addEventListener('click', exportDatabase);
855
+ document.getElementById('importBtn').addEventListener('click', importDatabase);
856
+
857
+ // New quote button
858
+ document.getElementById('newQuoteBtn').addEventListener('click', function() {
859
+ // Clear items
860
+ items = [];
861
+ document.getElementById('itemsTable').innerHTML = '';
862
+
863
+ // Reset form
864
+ document.getElementById('clientName').value = '';
865
+ document.getElementById('notes').value = '';
866
+
867
+ // Generate new quote number
868
+ document.getElementById('quoteNumber').value = 'Q-' + Math.floor(1000 + Math.random() * 9000);
869
+
870
+ // Add first empty item
871
+ addItem();
872
+
873
+ // Show input section if not already visible
874
+ document.getElementById('inputSection').classList.remove('hidden');
875
+ document.getElementById('previewSection').classList.add('hidden');
876
+ });
877
+ });
878
+ </script>
879
+ <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=YousefKhamis/quotes-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
880
+ </html>