Hugging Face's logo

Spaces:
amrora0011
/
git-clone-https-huggingface-co-spaces-amrora0011-gark
Running

App Files Community
amrora0011 commited on
Commit
845ba55
·
verified ·
1 Parent(s): b21fbed

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1562 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Git Clone Https Huggingface Co Spaces Amrora0011 Gark
3
- emoji: 🐠
4
- colorFrom: indigo
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: git-clone-https-huggingface-co-spaces-amrora0011-gark
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
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,1562 @@
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;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ }
15
+
16
+ .country-flag {
17
+ width: 30px;
18
+ height: 20px;
19
+ object-fit: cover;
20
+ border-radius: 2px;
21
+ margin-left: 8px;
22
+ }
23
+
24
+ .item-card {
25
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
26
+ }
27
+
28
+ .item-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
31
+ }
32
+
33
+ .tab-active {
34
+ color: #3b82f6;
35
+ border-bottom: 2px solid #3b82f6;
36
+ }
37
+
38
+ .line-clamp-2 {
39
+ display: -webkit-box;
40
+ -webkit-line-clamp: 2;
41
+ -webkit-box-orient: vertical;
42
+ overflow: hidden;
43
+ }
44
+
45
+ .chat-message {
46
+ max-width: 70%;
47
+ word-wrap: break-word;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-50">
52
+ <!-- Country Selection Modal -->
53
+ <div id="countryModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
54
+ <div class="bg-white rounded-lg p-8 w-full max-w-md mx-4">
55
+ <h2 class="text-2xl font-bold text-center mb-6">اختر بلدك</h2>
56
+ <div class="flex flex-col space-y-4">
57
+ <button class="flex items-center justify-center py-4 px-6 border border-gray-300 rounded-lg hover:bg-gray-100 transition country-btn" data-country="sa">
58
+ <img src="https://flagcdn.com/w20/sa.png" class="country-flag" alt="Saudi Arabia">
59
+ <span class="font-medium">السعودية (ريال سعودي)</span>
60
+ </button>
61
+ <button class="flex items-center justify-center py-4 px-6 border border-gray-300 rounded-lg hover:bg-gray-100 transition country-btn" data-country="eg">
62
+ <img src="https://flagcdn.com/w20/eg.png" class="country-flag" alt="Egypt">
63
+ <span class="font-medium">مصر (جنيه مصري)</span>
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Navigation -->
70
+ <nav class="bg-white shadow-sm sticky top-0 z-40">
71
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
72
+ <div class="flex justify-between h-16">
73
+ <div class="flex items-center">
74
+ <a href="#" class="flex-shrink-0 flex items-center">
75
+ <span class="text-blue-600 font-bold text-xl">جاري</span>
76
+ </a>
77
+ </div>
78
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4 space-x-reverse">
79
+ <button id="homeTab" class="px-3 py-2 text-sm font-medium tab-active">الرئيسية</button>
80
+ <button id="addItemTab" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600">إضافة غرض</button>
81
+ <button id="loginTab" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600">تسجيل الدخول</button>
82
+ <button id="profileTab" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 hidden">حسابي</button>
83
+ <button id="logoutBtn" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 hidden">تسجيل خروج</button>
84
+ <div id="countrySelector" class="flex items-center">
85
+ <span id="currentCountry" class="text-sm text-gray-600"></span>
86
+ <button class="ml-2 text-blue-600 hover:text-blue-800 text-sm change-country-btn">
87
+ <i class="fas fa-exchange-alt"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+ <div class="-mr-2 flex items-center md:hidden">
92
+ <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-gray-100 focus:outline-none mobile-menu-btn">
93
+ <i class="fas fa-bars text-xl"></i>
94
+ </button>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Mobile menu -->
100
+ <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
101
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
102
+ <button class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 home-btn">الرئيسية</button>
103
+ <button class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 add-item-btn">إضافة غرض</button>
104
+ <button id="mobileLoginTab" class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 login-btn">تسجيل الدخول</button>
105
+ <button id="mobileProfileTab" class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 hidden profile-btn">حسابي</button>
106
+ <button id="mobileLogoutBtn" class="block w-full text-right px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 hidden logout-btn">تسجيل خروج</button>
107
+ <div class="flex items-center justify-between px-3 py-2">
108
+ <span id="mobileCurrentCountry" class="text-sm text-gray-600"></span>
109
+ <button class="text-blue-600 hover:text-blue-800 text-sm change-country-btn">
110
+ <i class="fas fa-exchange-alt"></i> تغيير البلد
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </nav>
116
+
117
+ <!-- Main Content -->
118
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
119
+ <!-- Home Page -->
120
+ <div id="homePage">
121
+ <div class="flex justify-between items-center mb-6">
122
+ <h1 class="text-2xl font-bold text-gray-900">الأغراض المتاحة للإيجار</h1>
123
+ <div class="flex items-center space-x-2 space-x-reverse">
124
+ <select id="categoryFilter" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
125
+ <option value="">كل التصنيفات</option>
126
+ </select>
127
+ <select id="cityFilter" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
128
+ <option value="">كل المدن</option>
129
+ </select>
130
+ </div>
131
+ </div>
132
+
133
+ <div id="itemsContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
134
+ <!-- Items will be loaded here -->
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Add Item Page -->
139
+ <div id="addItemPage" class="hidden max-w-2xl mx-auto">
140
+ <h1 class="text-2xl font-bold text-gray-900 mb-6">إضافة غرض جديد للإيجار</h1>
141
+
142
+ <form id="addItemForm" class="space-y-4">
143
+ <div>
144
+ <label for="itemTitle" class="block text-sm font-medium text-gray-700">عنوان الغرض</label>
145
+ <input type="text" id="itemTitle" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
146
+ </div>
147
+
148
+ <div>
149
+ <label for="itemDescription" class="block text-sm font-medium text-gray-700">وصف الغرض</label>
150
+ <textarea id="itemDescription" rows="4" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
151
+ </div>
152
+
153
+ <div>
154
+ <label for="itemImage" class="block text-sm font-medium text-gray-700">صورة الغرض</label>
155
+ <input type="file" id="itemImage" accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
156
+ <div id="imagePreview" class="mt-2 hidden">
157
+ <img id="previewImage" src="#" alt="Preview" class="h-32 object-cover rounded-md">
158
+ </div>
159
+ </div>
160
+
161
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
162
+ <div>
163
+ <label for="itemPrice" class="block text-sm font-medium text-gray-700">السعر اليومي</label>
164
+ <div class="mt-1 relative rounded-md shadow-sm">
165
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
166
+ <span id="priceCurrency" class="text-gray-500 sm:text-sm">ريال</span>
167
+ </div>
168
+ <input type="number" id="itemPrice" min="1" required class="focus:ring-blue-500 focus:border-blue-500 block w-full pr-12 pl-16 py-2 sm:text-sm border-gray-300 rounded-md">
169
+ </div>
170
+ </div>
171
+
172
+ <div>
173
+ <label for="itemCity" class="block text-sm font-medium text-gray-700">المدينة</label>
174
+ <select id="itemCity" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
175
+ <option value="">اختر المدينة</option>
176
+ </select>
177
+ </div>
178
+ </div>
179
+
180
+ <div>
181
+ <label for="itemCategory" class="block text-sm font-medium text-gray-700">التصنيف</label>
182
+ <select id="itemCategory" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
183
+ <option value="">اختر التصنيف</option>
184
+ <option value="electronics">إلكترونيات</option>
185
+ <option value="tools">أدوات</option>
186
+ <option value="sports">رياضة</option>
187
+ <option value="fashion">أزياء</option>
188
+ <option value="home">أدوات منزلية</option>
189
+ <option value="other">أخرى</option>
190
+ </select>
191
+ </div>
192
+
193
+ <div class="pt-4">
194
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
195
+ إضافة الغرض
196
+ </button>
197
+ </div>
198
+ </form>
199
+ </div>
200
+
201
+ <!-- Login/Register Page -->
202
+ <div id="loginPage" class="hidden max-w-md mx-auto">
203
+ <div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
204
+ <div class="text-center mb-8">
205
+ <h1 class="text-2xl font-bold text-gray-900">مرحباً بك في جاري</h1>
206
+ <p class="mt-2 text-sm text-gray-600">سجل الدخول أو أنشئ حساباً جديداً</p>
207
+ </div>
208
+
209
+ <div class="flex border-b mb-6">
210
+ <button id="loginTabBtn" class="flex-1 py-2 px-4 text-center font-medium tab-active">تسجيل الدخول</button>
211
+ <button id="registerTabBtn" class="flex-1 py-2 px-4 text-center font-medium text-gray-500 hover:text-blue-600">إنشاء حساب</button>
212
+ </div>
213
+
214
+ <form id="loginForm" class="space-y-4">
215
+ <div>
216
+ <label for="loginEmail" class="block text-sm font-medium text-gray-700">البريد الإلكتروني</label>
217
+ <input type="email" id="loginEmail" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
218
+ </div>
219
+
220
+ <div>
221
+ <label for="loginPassword" class="block text-sm font-medium text-gray-700">كلمة المرور</label>
222
+ <input type="password" id="loginPassword" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
223
+ </div>
224
+
225
+ <div>
226
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
227
+ تسجيل الدخول
228
+ </button>
229
+ </div>
230
+ </form>
231
+
232
+ <form id="registerForm" class="hidden space-y-4">
233
+ <div>
234
+ <label for="registerName" class="block text-sm font-medium text-gray-700">الاسم الكامل</label>
235
+ <input type="text" id="registerName" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
236
+ </div>
237
+
238
+ <div>
239
+ <label for="registerEmail" class="block text-sm font-medium text-gray-700">البريد الإلكتروني</label>
240
+ <input type="email" id="registerEmail" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
241
+ </div>
242
+
243
+ <div>
244
+ <label for="registerPhone" class="block text-sm font-medium text-gray-700">رقم الهاتف</label>
245
+ <input type="tel" id="registerPhone" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
246
+ </div>
247
+
248
+ <div>
249
+ <label for="registerPassword" class="block text-sm font-medium text-gray-700">كلمة المرور</label>
250
+ <input type="password" id="registerPassword" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
251
+ </div>
252
+
253
+ <div>
254
+ <label for="registerConfirmPassword" class="block text-sm font-medium text-gray-700">تأكيد كلمة المرور</label>
255
+ <input type="password" id="registerConfirmPassword" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
256
+ </div>
257
+
258
+ <div>
259
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
260
+ إنشاء حساب
261
+ </button>
262
+ </div>
263
+ </form>
264
+
265
+ <div class="mt-4 text-center">
266
+ <p class="text-sm text-gray-600">
267
+ بمتابعتك أنت توافق على
268
+ <a href="#" class="font-medium text-blue-600 hover:text-blue-500">شروط الاستخدام</a>
269
+ و
270
+ <a href="#" class="font-medium text-blue-600 hover:text-blue-500">سياسة الخصوصية</a>
271
+ </p>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Profile Page -->
277
+ <div id="profilePage" class="hidden max-w-4xl mx-auto">
278
+ <div class="bg-white shadow rounded-lg overflow-hidden">
279
+ <div class="bg-blue-600 py-6 px-6 text-white">
280
+ <div class="flex items-center justify-between">
281
+ <div>
282
+ <h1 class="text-2xl font-bold">حسابي</h1>
283
+ <p id="profileEmail" class="text-blue-100 mt-1"></p>
284
+ </div>
285
+ <button class="bg-white text-blue-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-50 edit-profile-btn">
286
+ تعديل الملف الشخصي
287
+ </button>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="p-6">
292
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
293
+ <div class="md:col-span-2">
294
+ <h2 class="text-lg font-medium text-gray-900 mb-4">الأغراض التي أضفتها</h2>
295
+ <div id="userItemsContainer" class="space-y-4">
296
+ <!-- User's items will be loaded here -->
297
+ </div>
298
+
299
+ <h2 class="text-lg font-medium text-gray-900 mt-8 mb-4">طلبات الإيجار</h2>
300
+ <div id="rentalRequestsContainer" class="space-y-4">
301
+ <!-- Rental requests will be loaded here -->
302
+ </div>
303
+ </div>
304
+
305
+ <div>
306
+ <div class="bg-gray-50 p-4 rounded-lg">
307
+ <div class="flex items-center mb-4">
308
+ <div class="bg-blue-100 text-blue-800 rounded-full p-3 mr-3">
309
+ <i class="fas fa-user text-xl"></i>
310
+ </div>
311
+ <div>
312
+ <h3 id="profileName" class="font-medium"></h3>
313
+ <p id="profilePhone" class="text-sm text-gray-500"></p>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="border-t pt-4">
318
+ <h3 class="font-medium text-gray-900 mb-2">إحصائيات</h3>
319
+ <div class="grid grid-cols-2 gap-4">
320
+ <div class="bg-white p-3 rounded-md shadow-sm text-center">
321
+ <p class="text-sm text-gray-500">الأغراض</p>
322
+ <p id="itemsCount" class="font-bold text-lg">0</p>
323
+ </div>
324
+ <div class="bg-white p-3 rounded-md shadow-sm text-center">
325
+ <p class="text-sm text-gray-500">الإيجارات</p>
326
+ <p id="rentalsCount" class="font-bold text-lg">0</p>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Edit Profile Page -->
338
+ <div id="editProfilePage" class="hidden max-w-2xl mx-auto">
339
+ <div class="flex items-center mb-6">
340
+ <button class="text-blue-600 hover:text-blue-800 mr-2 back-to-profile-btn">
341
+ <i class="fas fa-arrow-right"></i>
342
+ </button>
343
+ <h1 class="text-2xl font-bold text-gray-900">تعديل الملف الشخصي</h1>
344
+ </div>
345
+
346
+ <form id="editProfileForm" class="space-y-4">
347
+ <div>
348
+ <label for="editProfileName" class="block text-sm font-medium text-gray-700">الاسم الكامل</label>
349
+ <input type="text" id="editProfileName" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
350
+ </div>
351
+
352
+ <div>
353
+ <label for="editProfileEmail" class="block text-sm font-medium text-gray-700">البريد الإلكتروني</label>
354
+ <input type="email" id="editProfileEmail" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
355
+ </div>
356
+
357
+ <div>
358
+ <label for="editProfilePhone" class="block text-sm font-medium text-gray-700">رقم الهاتف</label>
359
+ <input type="tel" id="editProfilePhone" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
360
+ </div>
361
+
362
+ <div>
363
+ <label for="editProfilePassword" class="block text-sm font-medium text-gray-700">كلمة المرور الجديدة (اختياري)</label>
364
+ <input type="password" id="editProfilePassword" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
365
+ </div>
366
+
367
+ <div>
368
+ <label for="editProfileConfirmPassword" class="block text-sm font-medium text-gray-700">تأكيد كلمة المرور الجديدة</label>
369
+ <input type="password" id="editProfileConfirmPassword" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
370
+ </div>
371
+
372
+ <div class="pt-4">
373
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
374
+ حفظ التغييرات
375
+ </button>
376
+ </div>
377
+ </form>
378
+ </div>
379
+
380
+ <!-- Item Details Modal -->
381
+ <div id="itemDetailsModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
382
+ <div class="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
383
+ <div class="flex justify-between items-start mb-4">
384
+ <h2 id="itemDetailsTitle" class="text-xl font-bold"></h2>
385
+ <button class="text-gray-500 hover:text-gray-700 close-item-details-btn">
386
+ <i class="fas fa-times"></i>
387
+ </button>
388
+ </div>
389
+
390
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
391
+ <div>
392
+ <img id="itemDetailsImage" src="" alt="" class="w-full h-64 object-cover rounded-lg">
393
+ <div class="mt-4 flex items-center justify-between">
394
+ <div>
395
+ <span id="itemDetailsPrice" class="text-lg font-bold text-blue-600"></span>
396
+ <span class="text-gray-500">/ يوم</span>
397
+ </div>
398
+ <div class="flex items-center">
399
+ <i class="fas fa-map-marker-alt text-gray-500 mr-1"></i>
400
+ <span id="itemDetailsCity" class="text-gray-600"></span>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div>
406
+ <h3 class="font-medium mb-2">الوصف</h3>
407
+ <p id="itemDetailsDescription" class="text-gray-700 mb-4"></p>
408
+
409
+ <div class="border-t pt-4">
410
+ <h3 class="font-medium mb-2">المالك</h3>
411
+ <div class="flex items-center">
412
+ <div class="bg-blue-100 text-blue-800 rounded-full p-2 mr-3">
413
+ <i class="fas fa-user"></i>
414
+ </div>
415
+ <div>
416
+ <p id="itemDetailsOwner" class="font-medium"></p>
417
+ <p id="itemDetailsOwnerRating" class="text-sm text-gray-500">
418
+ <i class="fas fa-star text-yellow-400"></i> 4.8 (12 تقييم)
419
+ </p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="border-t pt-4 mt-4">
425
+ <h3 class="font-medium mb-2">تواصل مع المالك</h3>
426
+ <div id="itemDetailsChat" class="space-y-2 max-h-40 overflow-y-auto mb-4">
427
+ <!-- Chat messages will appear here -->
428
+ </div>
429
+
430
+ <div class="flex items-center">
431
+ <input type="text" id="itemDetailsMessage" placeholder="اكتب رسالتك..." class="flex-1 border border-gray-300 rounded-l-md py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
432
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 send-message-btn">
433
+ <i class="fas fa-paper-plane"></i>
434
+ </button>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <div class="mt-6 pt-4 border-t">
441
+ <button id="rentItemBtn" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 request-rental-btn">
442
+ طلب الإيجار
443
+ </button>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Rental Request Modal -->
449
+ <div id="rentalRequestModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
450
+ <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
451
+ <div class="flex justify-between items-start mb-4">
452
+ <h2 class="text-xl font-bold">طلب إيجار</h2>
453
+ <button class="text-gray-500 hover:text-gray-700 close-rental-modal-btn">
454
+ <i class="fas fa-times"></i>
455
+ </button>
456
+ </div>
457
+
458
+ <form id="rentalRequestForm" class="space-y-4">
459
+ <div>
460
+ <label for="rentalStartDate" class="block text-sm font-medium text-gray-700">تاريخ البدء</label>
461
+ <input type="date" id="rentalStartDate" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
462
+ </div>
463
+
464
+ <div>
465
+ <label for="rentalEndDate" class="block text-sm font-medium text-gray-700">تاريخ الانتهاء</label>
466
+ <input type="date" id="rentalEndDate" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
467
+ </div>
468
+
469
+ <div>
470
+ <label for="rentalMessage" class="block text-sm font-medium text-gray-700">ملاحظات (اختياري)</label>
471
+ <textarea id="rentalMessage" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
472
+ </div>
473
+
474
+ <div class="pt-4">
475
+ <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
476
+ تأكيد الطلب
477
+ </button>
478
+ </div>
479
+ </form>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Rental Request Details Modal -->
484
+ <div id="rentalRequestDetailsModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
485
+ <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
486
+ <div class="flex justify-between items-start mb-4">
487
+ <h2 id="rentalRequestTitle" class="text-xl font-bold">تفاصيل طلب الإيجار</h2>
488
+ <button class="text-gray-500 hover:text-gray-700 close-rental-details-btn">
489
+ <i class="fas fa-times"></i>
490
+ </button>
491
+ </div>
492
+
493
+ <div class="space-y-4">
494
+ <div>
495
+ <h3 class="font-medium text-gray-700">المستأجر</h3>
496
+ <p id="rentalRequestRenter" class="text-gray-900"></p>
497
+ </div>
498
+
499
+ <div>
500
+ <h3 class="font-medium text-gray-700">فترة الإيجار</h3>
501
+ <p id="rentalRequestPeriod" class="text-gray-900"></p>
502
+ </div>
503
+
504
+ <div>
505
+ <h3 class="font-medium text-gray-700">الحالة</h3>
506
+ <p id="rentalRequestStatus" class="text-gray-900"></p>
507
+ </div>
508
+
509
+ <div>
510
+ <h3 class="font-medium text-gray-700">الملاحظات</h3>
511
+ <p id="rentalRequestNotes" class="text-gray-900"></p>
512
+ </div>
513
+
514
+ <div id="rentalRequestActions" class="pt-4 flex space-x-2 space-x-reverse">
515
+ <!-- Action buttons will appear here -->
516
+ </div>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </main>
521
+
522
+ <!-- Footer -->
523
+ <footer class="bg-white border-t mt-12">
524
+ <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
525
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
526
+ <div>
527
+ <h3 class="text-lg font-medium text-gray-900 mb-4">جاري</h3>
528
+ <p id="footerDescription" class="text-gray-500 text-sm">منصة لتأجير الأغراض الشخصية بين الأفراد</p>
529
+ </div>
530
+
531
+ <div>
532
+ <h3 class="text-lg font-medium text-gray-900 mb-4">روابط سريعة</h3>
533
+ <ul class="space-y-2">
534
+ <li><a href="#" class="text-gray-500 hover:text-blue-600 text-sm home-link">الرئيسية</a></li>
535
+ <li><a href="#" class="text-gray-500 hover:text-blue-600 text-sm add-item-link">إضافة غرض</a></li>
536
+ <li><a href="#" class="text-gray-500 hover:text-blue-600 text-sm login-link">تسجيل الدخول</a></li>
537
+ </ul>
538
+ </div>
539
+
540
+ <div>
541
+ <h3 class="text-lg font-medium text-gray-900 mb-4">تواصل معنا</h3>
542
+ <div class="flex space-x-4 space-x-reverse">
543
+ <a href="#" class="text-gray-500 hover:text-blue-600">
544
+ <i class="fab fa-facebook-f"></i>
545
+ </a>
546
+ <a href="#" class="text-gray-500 hover:text-blue-600">
547
+ <i class="fab fa-twitter"></i>
548
+ </a>
549
+ <a href="#" class="text-gray-500 hover:text-blue-600">
550
+ <i class="fab fa-instagram"></i>
551
+ </a>
552
+ </div>
553
+ <p class="text-gray-500 text-sm mt-4">info@jari.com</p>
554
+ </div>
555
+ </div>
556
+
557
+ <div class="mt-8 pt-8 border-t border-gray-200 text-center">
558
+ <p class="text-gray-500 text-sm">&copy; 2023 جاري. جميع الحقوق محفوظة.</p>
559
+ </div>
560
+ </div>
561
+ </footer>
562
+
563
+ <!-- Loading Spinner -->
564
+ <div id="loadingSpinner" class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 hidden">
565
+ <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
566
+ </div>
567
+
568
+ <!-- Success Notification -->
569
+ <div id="successNotification" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center hidden z-50">
570
+ <i class="fas fa-check-circle mr-2"></i>
571
+ <span id="successMessage"></span>
572
+ </div>
573
+
574
+ <!-- Error Notification -->
575
+ <div id="errorNotification" class="fixed bottom-4 right-4 bg-red-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center hidden z-50">
576
+ <i class="fas fa-exclamation-circle mr-2"></i>
577
+ <span id="errorMessage"></span>
578
+ </div>
579
+
580
+ <script>
581
+ // App State
582
+ let selectedCountry = null;
583
+ let currentPage = null;
584
+ let currentUser = null;
585
+ let currentItemDetails = null;
586
+ let currentRentalRequest = null;
587
+
588
+ // Cities data
589
+ const cities = {
590
+ sa: ['الرياض', 'جدة', 'مكة المكرمة', 'المدينة المنورة', 'الدمام', 'الخبر', 'الطائف', 'بريدة', 'تبوك', 'نجران'],
591
+ eg: ['القاهرة', 'الجيزة', 'الإسكندرية', 'المنصورة', 'طنطا', 'المنيا', 'أسيوط', 'سوهاج', 'الأقصر', 'أسوان']
592
+ };
593
+
594
+ // Categories data
595
+ const categories = [
596
+ { value: 'electronics', label: 'إلكترونيات' },
597
+ { value: 'tools', label: 'أدوات' },
598
+ { value: 'sports', label: 'رياضة' },
599
+ { value: 'fashion', label: 'أزياء' },
600
+ { value: 'home', label: 'أدوات منزلية' },
601
+ { value: 'other', label: 'أخرى' }
602
+ ];
603
+
604
+ // Rental statuses
605
+ const rentalStatuses = {
606
+ pending: { text: 'بانتظار الموافقة', color: 'bg-yellow-100 text-yellow-800' },
607
+ approved: { text: 'تمت الموافقة', color: 'bg-green-100 text-green-800' },
608
+ rejected: { text: 'تم الرفض', color: 'bg-red-100 text-red-800' },
609
+ completed: { text: 'مكتمل', color: 'bg-blue-100 text-blue-800' },
610
+ cancelled: { text: 'ملغي', color: 'bg-gray-100 text-gray-800' }
611
+ };
612
+
613
+ // Initialize the app
614
+ document.addEventListener('DOMContentLoaded', function() {
615
+ // Check if country is already selected
616
+ const savedCountry = localStorage.getItem('country');
617
+ if (savedCountry) {
618
+ selectedCountry = savedCountry;
619
+ initApp();
620
+ } else {
621
+ // Show country selection modal
622
+ document.getElementById('countryModal').classList.remove('hidden');
623
+ }
624
+
625
+ // Check if user is logged in
626
+ const savedUser = localStorage.getItem('user');
627
+ if (savedUser) {
628
+ currentUser = JSON.parse(savedUser);
629
+ updateAuthUI();
630
+ }
631
+
632
+ // Setup event listeners
633
+ setupEventListeners();
634
+ });
635
+
636
+ // Setup event listeners
637
+ function setupEventListeners() {
638
+ // Country selection buttons
639
+ document.querySelectorAll('.country-btn').forEach(btn => {
640
+ btn.addEventListener('click', function() {
641
+ const country = this.getAttribute('data-country');
642
+ selectCountry(country);
643
+ });
644
+ });
645
+
646
+ // Change country button
647
+ document.querySelectorAll('.change-country-btn').forEach(btn => {
648
+ btn.addEventListener('click', changeCountry);
649
+ });
650
+
651
+ // Mobile menu button
652
+ document.querySelector('.mobile-menu-btn').addEventListener('click', toggleMobileMenu);
653
+
654
+ // Navigation buttons
655
+ document.querySelectorAll('.home-btn, .home-link, #homeTab').forEach(btn => {
656
+ btn.addEventListener('click', showHome);
657
+ });
658
+
659
+ document.querySelectorAll('.add-item-btn, .add-item-link, #addItemTab').forEach(btn => {
660
+ btn.addEventListener('click', showAddItem);
661
+ });
662
+
663
+ document.querySelectorAll('.login-btn, .login-link, #loginTab, #mobileLoginTab').forEach(btn => {
664
+ btn.addEventListener('click', showLogin);
665
+ });
666
+
667
+ document.querySelectorAll('.profile-btn, #profileTab, #mobileProfileTab').forEach(btn => {
668
+ btn.addEventListener('click', showProfile);
669
+ });
670
+
671
+ document.querySelectorAll('.logout-btn, #logoutBtn, #mobileLogoutBtn').forEach(btn => {
672
+ btn.addEventListener('click', logout);
673
+ });
674
+
675
+ document.querySelector('.edit-profile-btn').addEventListener('click', showEditProfile);
676
+ document.querySelector('.back-to-profile-btn').addEventListener('click', showProfile);
677
+
678
+ // Item details modal
679
+ document.querySelector('.close-item-details-btn').addEventListener('click', closeItemDetails);
680
+ document.querySelector('.send-message-btn').addEventListener('click', sendMessage);
681
+ document.querySelector('.request-rental-btn').addEventListener('click', requestRental);
682
+
683
+ // Rental modals
684
+ document.querySelector('.close-rental-modal-btn').addEventListener('click', closeRentalRequestModal);
685
+ document.querySelector('.close-rental-details-btn').addEventListener('click', closeRentalRequestDetailsModal);
686
+
687
+ // Image preview for add item
688
+ document.getElementById('itemImage').addEventListener('change', function(e) {
689
+ if (e.target.files.length > 0) {
690
+ const reader = new FileReader();
691
+ reader.onload = function(event) {
692
+ document.getElementById('previewImage').src = event.target.result;
693
+ document.getElementById('imagePreview').classList.remove('hidden');
694
+ };
695
+ reader.readAsDataURL(e.target.files[0]);
696
+ }
697
+ });
698
+
699
+ // City filter change
700
+ document.getElementById('cityFilter').addEventListener('change', function() {
701
+ loadItems();
702
+ });
703
+
704
+ // Category filter change
705
+ document.getElementById('categoryFilter').addEventListener('change', function() {
706
+ loadItems();
707
+ });
708
+
709
+ // Login/Register tab switch
710
+ document.getElementById('loginTabBtn').addEventListener('click', function(e) {
711
+ e.preventDefault();
712
+ document.getElementById('loginForm').classList.remove('hidden');
713
+ document.getElementById('registerForm').classList.add('hidden');
714
+ document.getElementById('loginTabBtn').classList.add('tab-active');
715
+ document.getElementById('registerTabBtn').classList.remove('tab-active');
716
+ });
717
+
718
+ document.getElementById('registerTabBtn').addEventListener('click', function(e) {
719
+ e.preventDefault();
720
+ document.getElementById('loginForm').classList.add('hidden');
721
+ document.getElementById('registerForm').classList.remove('hidden');
722
+ document.getElementById('loginTabBtn').classList.remove('tab-active');
723
+ document.getElementById('registerTabBtn').classList.add('tab-active');
724
+ });
725
+
726
+ // Form submissions
727
+ document.getElementById('loginForm').addEventListener('submit', function(e) {
728
+ e.preventDefault();
729
+ login();
730
+ });
731
+
732
+ document.getElementById('registerForm').addEventListener('submit', function(e) {
733
+ e.preventDefault();
734
+ register();
735
+ });
736
+
737
+ document.getElementById('addItemForm').addEventListener('submit', function(e) {
738
+ e.preventDefault();
739
+ addItem();
740
+ });
741
+
742
+ document.getElementById('editProfileForm').addEventListener('submit', function(e) {
743
+ e.preventDefault();
744
+ updateProfile();
745
+ });
746
+
747
+ document.getElementById('rentalRequestForm').addEventListener('submit', function(e) {
748
+ e.preventDefault();
749
+ submitRentalRequest();
750
+ });
751
+ }
752
+
753
+ // Country selection
754
+ function selectCountry(country) {
755
+ selectedCountry = country;
756
+ localStorage.setItem('country', country);
757
+ document.getElementById('countryModal').classList.add('hidden');
758
+ initApp();
759
+ }
760
+
761
+ // Change country
762
+ function changeCountry() {
763
+ localStorage.removeItem('country');
764
+ selectedCountry = null;
765
+ document.getElementById('countryModal').classList.remove('hidden');
766
+ }
767
+
768
+ // Initialize the app after country selection
769
+ function initApp() {
770
+ if (!selectedCountry) return;
771
+
772
+ // Set currency and cities based on country
773
+ const currency = selectedCountry === 'sa' ? 'ريال' : 'جنيه';
774
+ const countryName = selectedCountry === 'sa' ? 'السعودية' : 'مصر';
775
+
776
+ document.getElementById('priceCurrency').textContent = currency;
777
+ document.getElementById('currentCountry').textContent = countryName;
778
+ document.getElementById('mobileCurrentCountry').textContent = countryName;
779
+
780
+ // Update footer description
781
+ document.getElementById('footerDescription').textContent =
782
+ `منصة لتأجير الأغراض الشخصية بين الأفراد في ${countryName}`;
783
+
784
+ // Populate city filters
785
+ populateCitySelect('cityFilter', 'كل المدن');
786
+ populateCitySelect('itemCity', 'اختر المدينة');
787
+
788
+ // Populate category filter
789
+ populateCategoryFilter();
790
+
791
+ // Load items for selected country
792
+ loadItems();
793
+
794
+ // Load home page by default
795
+ showHome();
796
+ }
797
+
798
+ // Populate city select dropdown
799
+ function populateCitySelect(selectId, defaultText) {
800
+ const select = document.getElementById(selectId);
801
+ select.innerHTML = '';
802
+
803
+ const defaultOption = document.createElement('option');
804
+ defaultOption.value = '';
805
+ defaultOption.textContent = defaultText;
806
+ select.appendChild(defaultOption);
807
+
808
+ cities[selectedCountry].forEach(city => {
809
+ const option = document.createElement('option');
810
+ option.value = city;
811
+ option.textContent = city;
812
+ select.appendChild(option);
813
+ });
814
+ }
815
+
816
+ // Populate category filter
817
+ function populateCategoryFilter() {
818
+ const select = document.getElementById('categoryFilter');
819
+ select.innerHTML = '';
820
+
821
+ const defaultOption = document.createElement('option');
822
+ defaultOption.value = '';
823
+ defaultOption.textContent = 'كل التصنيفات';
824
+ select.appendChild(defaultOption);
825
+
826
+ categories.forEach(category => {
827
+ const option = document.createElement('option');
828
+ option.value = category.value;
829
+ option.textContent = category.label;
830
+ select.appendChild(option);
831
+ });
832
+ }
833
+
834
+ // Show loading spinner
835
+ function showLoading() {
836
+ document.getElementById('loadingSpinner').classList.remove('hidden');
837
+ }
838
+
839
+ // Hide loading spinner
840
+ function hideLoading() {
841
+ document.getElementById('loadingSpinner').classList.add('hidden');
842
+ }
843
+
844
+ // Show success notification
845
+ function showSuccess(message) {
846
+ const notification = document.getElementById('successNotification');
847
+ document.getElementById('successMessage').textContent = message;
848
+ notification.classList.remove('hidden');
849
+
850
+ setTimeout(() => {
851
+ notification.classList.add('hidden');
852
+ }, 3000);
853
+ }
854
+
855
+ // Show error notification
856
+ function showError(message) {
857
+ const notification = document.getElementById('errorNotification');
858
+ document.getElementById('errorMessage').textContent = message;
859
+ notification.classList.remove('hidden');
860
+
861
+ setTimeout(() => {
862
+ notification.classList.add('hidden');
863
+ }, 3000);
864
+ }
865
+
866
+ // Toggle mobile menu
867
+ function toggleMobileMenu() {
868
+ document.getElementById('mobileMenu').classList.toggle('hidden');
869
+ }
870
+
871
+ // Update UI based on authentication status
872
+ function updateAuthUI() {
873
+ if (currentUser) {
874
+ document.getElementById('loginTab').classList.add('hidden');
875
+ document.getElementById('profileTab').classList.remove('hidden');
876
+ document.getElementById('logoutBtn').classList.remove('hidden');
877
+ document.getElementById('addItemTab').classList.remove('hidden');
878
+
879
+ document.getElementById('mobileLoginTab').classList.add('hidden');
880
+ document.getElementById('mobileProfileTab').classList.remove('hidden');
881
+ document.getElementById('mobileLogoutBtn').classList.remove('hidden');
882
+ } else {
883
+ document.getElementById('loginTab').classList.remove('hidden');
884
+ document.getElementById('profileTab').classList.add('hidden');
885
+ document.getElementById('logoutBtn').classList.add('hidden');
886
+ document.getElementById('addItemTab').classList.add('hidden');
887
+
888
+ document.getElementById('mobileLoginTab').classList.remove('hidden');
889
+ document.getElementById('mobileProfileTab').classList.add('hidden');
890
+ document.getElementById('mobileLogoutBtn').classList.add('hidden');
891
+ }
892
+ }
893
+
894
+ // Page navigation functions
895
+ function showHome() {
896
+ if (!selectedCountry) {
897
+ document.getElementById('countryModal').classList.remove('hidden');
898
+ return;
899
+ }
900
+
901
+ hideAllPages();
902
+ document.getElementById('homePage').classList.remove('hidden');
903
+ document.getElementById('homeTab').classList.add('tab-active');
904
+ document.getElementById('addItemTab').classList.remove('tab-active');
905
+ document.getElementById('loginTab').classList.remove('tab-active');
906
+ document.getElementById('profileTab').classList.remove('tab-active');
907
+ currentPage = 'home';
908
+
909
+ loadItems();
910
+ }
911
+
912
+ function showAddItem() {
913
+ if (!selectedCountry) {
914
+ document.getElementById('countryModal').classList.remove('hidden');
915
+ return;
916
+ }
917
+
918
+ if (!currentUser) {
919
+ showLogin();
920
+ showError('يجب تسجيل الدخول لإضافة غرض');
921
+ return;
922
+ }
923
+
924
+ hideAllPages();
925
+ document.getElementById('addItemPage').classList.remove('hidden');
926
+ document.getElementById('homeTab').classList.remove('tab-active');
927
+ document.getElementById('addItemTab').classList.add('tab-active');
928
+ document.getElementById('loginTab').classList.remove('tab-active');
929
+ document.getElementById('profileTab').classList.remove('tab-active');
930
+ currentPage = 'addItem';
931
+ }
932
+
933
+ function showLogin() {
934
+ if (!selectedCountry) {
935
+ document.getElementById('countryModal').classList.remove('hidden');
936
+ return;
937
+ }
938
+
939
+ hideAllPages();
940
+ document.getElementById('loginPage').classList.remove('hidden');
941
+ document.getElementById('homeTab').classList.remove('tab-active');
942
+ document.getElementById('addItemTab').classList.remove('tab-active');
943
+ document.getElementById('loginTab').classList.add('tab-active');
944
+ document.getElementById('profileTab').classList.remove('tab-active');
945
+ currentPage = 'login';
946
+
947
+ // Reset forms
948
+ document.getElementById('loginForm').reset();
949
+ document.getElementById('registerForm').reset();
950
+ document.getElementById('loginTabBtn').click();
951
+ }
952
+
953
+ function showProfile() {
954
+ if (!selectedCountry) {
955
+ document.getElementById('countryModal').classList.remove('hidden');
956
+ return;
957
+ }
958
+
959
+ if (!currentUser) {
960
+ showLogin();
961
+ showError('يجب تسجيل الدخول لعرض الملف الشخصي');
962
+ return;
963
+ }
964
+
965
+ hideAllPages();
966
+ document.getElementById('profilePage').classList.remove('hidden');
967
+ document.getElementById('homeTab').classList.remove('tab-active');
968
+ document.getElementById('addItemTab').classList.remove('tab-active');
969
+ document.getElementById('loginTab').classList.remove('tab-active');
970
+ document.getElementById('profileTab').classList.add('tab-active');
971
+ currentPage = 'profile';
972
+
973
+ loadProfileData();
974
+ }
975
+
976
+ function showEditProfile() {
977
+ hideAllPages();
978
+ document.getElementById('editProfilePage').classList.remove('hidden');
979
+ currentPage = 'editProfile';
980
+
981
+ // Populate form with current user data
982
+ document.getElementById('editProfileName').value = currentUser.name;
983
+ document.getElementById('editProfileEmail').value = currentUser.email;
984
+ document.getElementById('editProfilePhone').value = currentUser.phone;
985
+ }
986
+
987
+ function hideAllPages() {
988
+ const pages = ['homePage', 'addItemPage', 'loginPage', 'profilePage', 'editProfilePage'];
989
+ pages.forEach(page => {
990
+ document.getElementById(page).classList.add('hidden');
991
+ });
992
+ }
993
+
994
+ // ======================
995
+ // BACKEND FUNCTIONALITY
996
+ // ======================
997
+
998
+ // Simulated database
999
+ const db = {
1000
+ users: [
1001
+ {
1002
+ id: 1,
1003
+ name: "محمد أحمد",
1004
+ email: "user@example.com",
1005
+ phone: "0501234567",
1006
+ password: "password123",
1007
+ country: "sa",
1008
+ createdAt: new Date()
1009
+ },
1010
+ {
1011
+ id: 2,
1012
+ name: "أحمد علي",
1013
+ email: "ahmed@example.com",
1014
+ phone: "0123456789",
1015
+ password: "password123",
1016
+ country: "eg",
1017
+ createdAt: new Date()
1018
+ }
1019
+ ],
1020
+ items: [
1021
+ {
1022
+ id: 1,
1023
+ title: "كاميرا احترافية",
1024
+ description: "كاميرا كانون EOS 5D مارك الرابع مع عدسة 24-70mm، حالة ممتازة",
1025
+ price: 150,
1026
+ city: "الرياض",
1027
+ category: "electronics",
1028
+ image: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
1029
+ ownerId: 1,
1030
+ country: "sa",
1031
+ createdAt: new Date()
1032
+ },
1033
+ {
1034
+ id: 2,
1035
+ title: "دراجة هوائية",
1036
+ description: "دراجة هوائية ماركة تريك بحالة جيدة، مناسبة للطرق الوعرة",
1037
+ price: 80,
1038
+ city: "جدة",
1039
+ category: "sports",
1040
+ image: "https://images.unsplash.com/photo-1485965120184-e220f721d03e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
1041
+ ownerId: 1,
1042
+ country: "sa",
1043
+ createdAt: new Date()
1044
+ },
1045
+ {
1046
+ id: 3,
1047
+ title: "ماكينة خياطة",
1048
+ description: "ماكينة خياطة سنجر بحالة ممتازة مع جميع الملحقات",
1049
+ price: 50,
1050
+ city: "القاهرة",
1051
+ category: "home",
1052
+ image: "https://images.unsplash.com/photo-1539109132442-1bafc7a8a010?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
1053
+ ownerId: 2,
1054
+ country: "eg",
1055
+ createdAt: new Date()
1056
+ },
1057
+ {
1058
+ id: 4,
1059
+ title: "دراجة نارية",
1060
+ description: "دراجة نارية هوندا CB500F موديل 2020 بحالة ممتازة",
1061
+ price: 200,
1062
+ city: "القاهرة",
1063
+ category: "sports",
1064
+ image: "https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
1065
+ ownerId: 2,
1066
+ country: "eg",
1067
+ createdAt: new Date()
1068
+ },
1069
+ {
1070
+ id: 5,
1071
+ title: "أدوات كهربائية",
1072
+ description: "مجموعة كاملة من الأدوات الكهربائية للمحترفين",
1073
+ price: 100,
1074
+ city: "الرياض",
1075
+ category: "tools",
1076
+ image: "https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
1077
+ ownerId: 1,
1078
+ country: "sa",
1079
+ createdAt: new Date()
1080
+ },
1081
+ {
1082
+ id: 6,
1083
+ title: "حقيبة سفر",
1084
+ description: "حقيبة سفر كبيرة ماركة سامسونيت بحالة جيدة",
1085
+ price: 40,
1086
+ city: "الجيزة",
1087
+ category: "fashion",
1088
+ image: "https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80",
1089
+ ownerId: 2,
1090
+ country: "eg",
1091
+ createdAt: new Date()
1092
+ }
1093
+ ],
1094
+ rentals: [
1095
+ {
1096
+ id: 1,
1097
+ itemId: 1,
1098
+ renterId: 2,
1099
+ ownerId: 1,
1100
+ startDate: "2023-06-15",
1101
+ endDate: "2023-06-20",
1102
+ totalPrice: 750,
1103
+ status: "completed",
1104
+ message: "أحتاج الكاميرا لتصوير حفل زفاف",
1105
+ createdAt: new Date("2023-06-10")
1106
+ },
1107
+ {
1108
+ id: 2,
1109
+ itemId: 2,
1110
+ renterId: 2,
1111
+ ownerId: 1,
1112
+ startDate: "2023-07-01",
1113
+ endDate: "2023-07-05",
1114
+ totalPrice: 320,
1115
+ status: "approved",
1116
+ message: "لرحلة عائلية",
1117
+ createdAt: new Date("2023-06-25")
1118
+ }
1119
+ ],
1120
+ messages: [
1121
+ {
1122
+ id: 1,
1123
+ rentalId: 1,
1124
+ senderId: 2,
1125
+ receiverId: 1,
1126
+ message: "مرحباً، هل الكاميرا متاحة للإيجار في تاريخ 15 يونيو؟",
1127
+ createdAt: new Date("2023-06-08T10:00:00")
1128
+ },
1129
+ {
1130
+ id: 2,
1131
+ rentalId: 1,
1132
+ senderId: 1,
1133
+ receiverId: 2,
1134
+ message: "نعم متاحة، يمكنك حجزها الآن",
1135
+ createdAt: new Date("2023-06-08T10:15:00")
1136
+ },
1137
+ {
1138
+ id: 3,
1139
+ rentalId: 1,
1140
+ senderId: 2,
1141
+ receiverId: 1,
1142
+ message: "شكراً، سأقوم بحجزها الآن",
1143
+ createdAt: new Date("2023-06-08T10:30:00")
1144
+ }
1145
+ ]
1146
+ };
1147
+
1148
+ // Generate unique ID
1149
+ function generateId() {
1150
+ return Math.floor(Math.random() * 1000000) + 1;
1151
+ }
1152
+
1153
+ // Format date
1154
+ function formatDate(dateString) {
1155
+ const options = { year: 'numeric', month: 'long', day: 'numeric' };
1156
+ return new Date(dateString).toLocaleDateString('ar-EG', options);
1157
+ }
1158
+
1159
+ // Calculate days between dates
1160
+ function calculateDays(startDate, endDate) {
1161
+ const start = new Date(startDate);
1162
+ const end = new Date(endDate);
1163
+ const diffTime = Math.abs(end - start);
1164
+ return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
1165
+ }
1166
+
1167
+ // Login function
1168
+ function login() {
1169
+ const email = document.getElementById('loginEmail').value;
1170
+ const password = document.getElementById('loginPassword').value;
1171
+
1172
+ if (!email || !password) {
1173
+ showError('الرجاء إدخال البريد الإلكتروني وكلمة المرور');
1174
+ return;
1175
+ }
1176
+
1177
+ showLoading();
1178
+
1179
+ // Simulate API call delay
1180
+ setTimeout(() => {
1181
+ const user = db.users.find(u => u.email === email && u.password === password);
1182
+
1183
+ if (user) {
1184
+ currentUser = user;
1185
+ localStorage.setItem('user', JSON.stringify(user));
1186
+ updateAuthUI();
1187
+ showSuccess('تم تسجيل الدخول بنجاح');
1188
+ showHome();
1189
+ } else {
1190
+ showError('البريد الإلكتروني أو كلمة المرور غير صحيحة');
1191
+ }
1192
+
1193
+ hideLoading();
1194
+ }, 1000);
1195
+ }
1196
+
1197
+ // Register function
1198
+ function register() {
1199
+ const name = document.getElementById('registerName').value;
1200
+ const email = document.getElementById('registerEmail').value;
1201
+ const phone = document.getElementById('registerPhone').value;
1202
+ const password = document.getElementById('registerPassword').value;
1203
+ const confirmPassword = document.getElementById('registerConfirmPassword').value;
1204
+
1205
+ if (!name || !email || !phone || !password || !confirmPassword) {
1206
+ showError('الرجاء ملء جميع الحقول');
1207
+ return;
1208
+ }
1209
+
1210
+ if (password !== confirmPassword) {
1211
+ showError('كلمة المرور غير متطابقة');
1212
+ return;
1213
+ }
1214
+
1215
+ if (password.length < 6) {
1216
+ showError('كلمة المرور يجب أن تكون 6 أحرف على الأقل');
1217
+ return;
1218
+ }
1219
+
1220
+ // Check if email already exists
1221
+ const emailExists = db.users.some(u => u.email === email);
1222
+ if (emailExists) {
1223
+ showError('البريد الإلكتروني مسجل بالفعل');
1224
+ return;
1225
+ }
1226
+
1227
+ showLoading();
1228
+
1229
+ // Simulate API call delay
1230
+ setTimeout(() => {
1231
+ const newUser = {
1232
+ id: generateId(),
1233
+ name,
1234
+ email,
1235
+ phone,
1236
+ password,
1237
+ country: selectedCountry,
1238
+ createdAt: new Date()
1239
+ };
1240
+
1241
+ db.users.push(newUser);
1242
+ currentUser = newUser;
1243
+ localStorage.setItem('user', JSON.stringify(newUser));
1244
+ updateAuthUI();
1245
+
1246
+ hideLoading();
1247
+ showSuccess('تم إنشاء الحساب بنجاح');
1248
+ document.getElementById('loginTabBtn').click();
1249
+ document.getElementById('loginEmail').value = email;
1250
+ document.getElementById('loginPassword').value = '';
1251
+ }, 1500);
1252
+ }
1253
+
1254
+ // Update profile function
1255
+ function updateProfile() {
1256
+ const name = document.getElementById('editProfileName').value;
1257
+ const email = document.getElementById('editProfileEmail').value;
1258
+ const phone = document.getElementById('editProfilePhone').value;
1259
+ const password = document.getElementById('editProfilePassword').value;
1260
+ const confirmPassword = document.getElementById('editProfileConfirmPassword').value;
1261
+
1262
+ if (!name || !email || !phone) {
1263
+ showError('الرجاء ملء جميع الحقول المطلوبة');
1264
+ return;
1265
+ }
1266
+
1267
+ if (password && password.length < 6) {
1268
+ showError('كلمة المرور يجب أن تكون 6 أحرف على الأقل');
1269
+ return;
1270
+ }
1271
+
1272
+ if (password && password !== confirmPassword) {
1273
+ showError('كلمة المرور غير متطابقة');
1274
+ return;
1275
+ }
1276
+
1277
+ // Check if email already exists (excluding current user)
1278
+ const emailExists = db.users.some(u => u.email === email && u.id !== currentUser.id);
1279
+ if (emailExists) {
1280
+ showError('البريد الإلكتروني مسجل بالفعل');
1281
+ return;
1282
+ }
1283
+
1284
+ showLoading();
1285
+
1286
+ // Simulate API call delay
1287
+ setTimeout(() => {
1288
+ // Update user in database
1289
+ const userIndex = db.users.findIndex(u => u.id === currentUser.id);
1290
+ if (userIndex !== -1) {
1291
+ db.users[userIndex].name = name;
1292
+ db.users[userIndex].email = email;
1293
+ db.users[userIndex].phone = phone;
1294
+
1295
+ if (password) {
1296
+ db.users[userIndex].password = password;
1297
+ }
1298
+
1299
+ // Update current user
1300
+ currentUser = db.users[userIndex];
1301
+ localStorage.setItem('user', JSON.stringify(currentUser));
1302
+
1303
+ hideLoading();
1304
+ showSuccess('تم تحديث الملف الشخصي بنجاح');
1305
+ showProfile();
1306
+ } else {
1307
+ hideLoading();
1308
+ showError('حدث خطأ أثناء تحديث الملف الشخصي');
1309
+ }
1310
+ }, 1500);
1311
+ }
1312
+
1313
+ // Logout function
1314
+ function logout() {
1315
+ currentUser = null;
1316
+ localStorage.removeItem('user');
1317
+ updateAuthUI();
1318
+ showSuccess('تم تسجيل الخروج بنجاح');
1319
+ showHome();
1320
+ }
1321
+
1322
+ // Add item function
1323
+ function addItem() {
1324
+ if (!currentUser) {
1325
+ showError('يجب تسجيل الدخول لإضافة غرض');
1326
+ showLogin();
1327
+ return;
1328
+ }
1329
+
1330
+ const title = document.getElementById('itemTitle').value;
1331
+ const description = document.getElementById('itemDescription').value;
1332
+ const price = parseFloat(document.getElementById('itemPrice').value);
1333
+ const city = document.getElementById('itemCity').value;
1334
+ const category = document.getElementById('itemCategory').value;
1335
+ const imageFile = document.getElementById('itemImage').files[0];
1336
+
1337
+ if (!title || !description || !price || !city || !category) {
1338
+ showError('الرجاء ملء جميع الحقول المطلوبة');
1339
+ return;
1340
+ }
1341
+
1342
+ if (price <= 0) {
1343
+ showError('السعر يجب أن يكون أكبر من الصفر');
1344
+ return;
1345
+ }
1346
+
1347
+ showLoading();
1348
+
1349
+ // Simulate image upload and API call delay
1350
+ setTimeout(() => {
1351
+ // In a real app, we would upload the image to a storage service
1352
+ // and get back a URL. For this demo, we'll use a placeholder.
1353
+ const imageUrl = imageFile ?
1354
+ URL.createObjectURL(imageFile) :
1355
+ 'https://via.placeholder.com/400x300?text=No+Image';
1356
+
1357
+ const newItem = {
1358
+ id: generateId(),
1359
+ title,
1360
+ description,
1361
+ price,
1362
+ city,
1363
+ category,
1364
+ image: imageUrl,
1365
+ ownerId: currentUser.id,
1366
+ country: selectedCountry,
1367
+ createdAt: new Date()
1368
+ };
1369
+
1370
+ db.items.push(newItem);
1371
+
1372
+ // Reset form
1373
+ document.getElementById('addItemForm').reset();
1374
+ document.getElementById('imagePreview').classList.add('hidden');
1375
+
1376
+ hideLoading();
1377
+ showSuccess('تم إضافة الغرض بنجاح');
1378
+ showHome();
1379
+ }, 1500);
1380
+ }
1381
+
1382
+ // Load items for home page
1383
+ function loadItems() {
1384
+ if (!selectedCountry) return;
1385
+
1386
+ const cityFilter = document.getElementById('cityFilter').value;
1387
+ const categoryFilter = document.getElementById('categoryFilter').value;
1388
+ let items = db.items.filter(item => item.country === selectedCountry);
1389
+
1390
+ // Filter by city if selected
1391
+ if (cityFilter) {
1392
+ items = items.filter(item => item.city === cityFilter);
1393
+ }
1394
+
1395
+ // Filter by category if selected
1396
+ if (categoryFilter) {
1397
+ items = items.filter(item => item.category === categoryFilter);
1398
+ }
1399
+
1400
+ const itemsContainer = document.getElementById('itemsContainer');
1401
+ itemsContainer.innerHTML = '';
1402
+
1403
+ if (items.length === 0) {
1404
+ itemsContainer.innerHTML = `
1405
+ <div class="col-span-full text-center py-12">
1406
+ <i class="fas fa-box-open text-4xl text-gray-300 mb-4"></i>
1407
+ <p class="text-gray-500">لا توجد أغراض متاحة للإيجار حالياً</p>
1408
+ </div>
1409
+ `;
1410
+ return;
1411
+ }
1412
+
1413
+ const currency = selectedCountry === 'sa' ? 'ريال' : 'جنيه';
1414
+
1415
+ items.forEach(item => {
1416
+ const owner = db.users.find(u => u.id === item.ownerId);
1417
+ const itemCard = document.createElement('div');
1418
+ itemCard.className = 'bg-white rounded-lg shadow-md overflow-hidden item-card';
1419
+ itemCard.innerHTML = `
1420
+ <div class="h-48 bg-gray-200 relative cursor-pointer" data-item-id="${item.id}">
1421
+ <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover">
1422
+ <div class="absolute bottom-2 left-2 bg-blue-600 text-white px-2 py-1 rounded text-sm">
1423
+ ${item.price} ${currency} / يوم
1424
+ </div>
1425
+ </div>
1426
+ <div class="p-4">
1427
+ <h3 class="font-bold text-lg mb-1 cursor-pointer" data-item-id="${item.id}">${item.title}</h3>
1428
+ <p class="text-gray-600 text-sm mb-2">${item.city}</p>
1429
+ <p class="text-gray-700 text-sm mb-4 line-clamp-2">${item.description}</p>
1430
+ <div class="flex justify-between items-center">
1431
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium show-item-details-btn" data-item-id="${item.id}">
1432
+ <i class="fas fa-comment-dots mr-1"></i> تواصل
1433
+ </button>
1434
+ <span class="text-xs text-gray-500">${owner ? owner.name : 'مستخدم'}</span>
1435
+ </div>
1436
+ </div>
1437
+ `;
1438
+ itemsContainer.appendChild(itemCard);
1439
+ });
1440
+
1441
+ // Add event listeners to item cards
1442
+ document.querySelectorAll('[data-item-id]').forEach(element => {
1443
+ element.addEventListener('click', function() {
1444
+ const itemId = parseInt(this.getAttribute('data-item-id'));
1445
+ showItemDetails(itemId);
1446
+ });
1447
+ });
1448
+
1449
+ // Add event listeners to show item details buttons
1450
+ document.querySelectorAll('.show-item-details-btn').forEach(btn => {
1451
+ btn.addEventListener('click', function(e) {
1452
+ e.stopPropagation();
1453
+ const itemId = parseInt(this.getAttribute('data-item-id'));
1454
+ showItemDetails(itemId);
1455
+ });
1456
+ });
1457
+ }
1458
+
1459
+ // Show item details
1460
+ function showItemDetails(itemId) {
1461
+ const item = db.items.find(i => i.id === itemId);
1462
+ if (!item) {
1463
+ showError('الغرض غير موجود');
1464
+ return;
1465
+ }
1466
+
1467
+ currentItemDetails = item;
1468
+
1469
+ const owner = db.users.find(u => u.id === item.ownerId);
1470
+ const currency = selectedCountry === 'sa' ? 'ريال' : 'جنيه';
1471
+
1472
+ // Set item details
1473
+ document.getElementById('itemDetailsTitle').textContent = item.title;
1474
+ document.getElementById('itemDetailsImage').src = item.image;
1475
+ document.getElementById('itemDetailsImage').alt = item.title;
1476
+ document.getElementById('itemDetailsPrice').textContent = item.price + ' ' + currency;
1477
+ document.getElementById('itemDetailsCity').textContent = item.city;
1478
+ document.getElementById('itemDetailsDescription').textContent = item.description;
1479
+ document.getElementById('itemDetailsOwner').textContent = owner ? owner.name : 'مستخدم';
1480
+
1481
+ // Clear chat messages
1482
+ document.getElementById('itemDetailsChat').innerHTML = '';
1483
+
1484
+ // Show rental button or chat based on user
1485
+ const rentButton = document.getElementById('rentItemBtn');
1486
+ if (currentUser && currentUser.id === item.ownerId) {
1487
+ rentButton.classList.add('hidden');
1488
+ } else {
1489
+ rentButton.classList.remove('hidden');
1490
+ }
1491
+
1492
+ // Load chat messages if rental exists
1493
+ const rental = db.rentals.find(r => r.itemId === item.id &&
1494
+ (r.renterId === currentUser?.id || r.ownerId === currentUser?.id));
1495
+
1496
+ if (rental) {
1497
+ loadChatMessages(rental.id);
1498
+ }
1499
+
1500
+ // Show modal
1501
+ document.getElementById('itemDetailsModal').classList.remove('hidden');
1502
+ }
1503
+
1504
+ // Close item details
1505
+ function closeItemDetails() {
1506
+ document.getElementById('itemDetailsModal').classList.add('hidden');
1507
+ currentItemDetails = null;
1508
+ }
1509
+
1510
+ // Load chat messages
1511
+ function loadChatMessages(rentalId) {
1512
+ const chatContainer = document.getElementById('itemDetailsChat');
1513
+ chatContainer.innerHTML = '';
1514
+
1515
+ const messages = db.messages
1516
+ .filter(m => m.rentalId === rentalId)
1517
+ .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
1518
+
1519
+ messages.forEach(message => {
1520
+ const isCurrentUser = message.senderId === currentUser?.id;
1521
+ const messageDiv = document.createElement('div');
1522
+ messageDiv.className = `flex ${isCurrentUser ? 'justify-end' : 'justify-start'}`;
1523
+
1524
+ messageDiv.innerHTML = `
1525
+ <div class="chat-message bg-${isCurrentUser ? 'blue' : 'gray'}-100 rounded-lg px-4 py-2">
1526
+ <p class="text-sm">${message.message}</p>
1527
+ <p class="text-xs text-gray-500 mt-1 text-right">${formatDate(message.createdAt)}</p>
1528
+ </div>
1529
+ `;
1530
+
1531
+ chatContainer.appendChild(messageDiv);
1532
+ });
1533
+
1534
+ // Scroll to bottom
1535
+ chatContainer.scrollTop = chatContainer.scrollHeight;
1536
+ }
1537
+
1538
+ // Send message
1539
+ function sendMessage() {
1540
+ if (!currentUser) {
1541
+ showError('يجب تسجيل الدخول لإرسال رسالة');
1542
+ showLogin();
1543
+ return;
1544
+ }
1545
+
1546
+ if (!currentItemDetails) {
1547
+ showError('لا يوجد غرض محدد');
1548
+ return;
1549
+ }
1550
+
1551
+ const messageInput = document.getElementById('itemDetailsMessage');
1552
+ const messageText = messageInput.value.trim();
1553
+
1554
+ if (!messageText) {
1555
+ showError('الرجاء إدخال رسالة');
1556
+ return;
1557
+ }
1558
+
1559
+ // Find or create rental
1560
+ let rental = db.rentals.find(r => r.itemId === currentItemDetails.id &&
1561
+ (r.renterId ===
1562
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ اكمل بناء الباك اند كله
2
+ اكمل الباك اند
3
+ اختر بللدك لا تعمل عند الضغط
4
+ اختر بلدك عند الضغط على مصر يدخل على التفاصيل المصريه وعند الضغط على السعوديه يدخل على التفاصيل السعوديه