Spaces:

amrora0011
/

git-clone-https-huggingface-co-spaces-amrora0011-gark

Running

App Files Files Community

amrora0011 commited on May 24, 2025

Commit

e0b995f

verified ·

1 Parent(s): cc215a2

Add 2 files

Browse files

Files changed (2) hide show

index.html +175 -166
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-سأقوم بإصلاح مشكلة اختيار البلد عند الضغط عليها. المشكلة تكمن في أن الدالة `selectCountry` غير معرّفة بشكل صحيح أو غير مرتبطة بشكل صحيح بالأزرار. إليك الكود المعدل:
 ```html
 <!DOCTYPE html>
@@ -57,11 +57,11 @@
         <div class="bg-white rounded-lg p-8 w-full max-w-md mx-4">
             <h2 class="text-2xl font-bold text-center mb-6">اختر بلدك</h2>
             <div class="flex flex-col space-y-4">
-                <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">
                     <img src="https://flagcdn.com/w20/sa.png" class="country-flag" alt="Saudi Arabia">
                     <span class="font-medium">السعودية (ريال سعودي)</span>
                 </button>
-                <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">
                     <img src="https://flagcdn.com/w20/eg.png" class="country-flag" alt="Egypt">
                     <span class="font-medium">مصر (جنيه مصري)</span>
                 </button>
@@ -74,25 +74,25 @@
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
-                    <a href="#" class="flex-shrink-0 flex items-center">
                         <span class="text-blue-600 font-bold text-xl">جاري</span>
                     </a>
                 </div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4 space-x-reverse">
-                    <button id="homeTab" class="px-3 py-2 text-sm font-medium tab-active">الرئيسية</button>
-                    <button id="addItemTab" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600">إضافة غرض</button>
-                    <button id="loginTab" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600">تسجيل الدخول</button>
-                    <button id="profileTab" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 hidden">حسابي</button>
-                    <button id="logoutBtn" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 hidden">تسجيل خروج</button>
                     <div id="countrySelector" class="flex items-center">
                         <span id="currentCountry" class="text-sm text-gray-600"></span>
-                        <button class="ml-2 text-blue-600 hover:text-blue-800 text-sm change-country-btn">
                             <i class="fas fa-exchange-alt"></i>
                         </button>
                     </div>
                 </div>
                 <div class="-mr-2 flex items-center md:hidden">
-                    <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">
                         <i class="fas fa-bars text-xl"></i>
                     </button>
                 </div>
@@ -102,14 +102,14 @@
         <!-- Mobile menu -->
         <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
             <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-                <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>
-                <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>
-                <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>
-                <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>
-                <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>
                 <div class="flex items-center justify-between px-3 py-2">
                     <span id="mobileCurrentCountry" class="text-sm text-gray-600"></span>
-                    <button class="text-blue-600 hover:text-blue-800 text-sm change-country-btn">
                         <i class="fas fa-exchange-alt"></i> تغيير البلد
                     </button>
                 </div>
@@ -285,7 +285,7 @@
                             <h1 class="text-2xl font-bold">حسابي</h1>
                             <p id="profileEmail" class="text-blue-100 mt-1"></p>
                         </div>
-                        <button class="bg-white text-blue-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-50 edit-profile-btn">
                             تعديل الملف الشخصي
                         </button>
                     </div>
@@ -340,7 +340,7 @@
         <!-- Edit Profile Page -->
         <div id="editProfilePage" class="hidden max-w-2xl mx-auto">
             <div class="flex items-center mb-6">
-                <button class="text-blue-600 hover:text-blue-800 mr-2 back-to-profile-btn">
                     <i class="fas fa-arrow-right"></i>
                 </button>
                 <h1 class="text-2xl font-bold text-gray-900">تعديل الملف الشخصي</h1>
@@ -385,7 +385,7 @@
             <div class="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
                 <div class="flex justify-between items-start mb-4">
                     <h2 id="itemDetailsTitle" class="text-xl font-bold"></h2>
-                    <button class="text-gray-500 hover:text-gray-700 close-item-details-btn">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
@@ -432,7 +432,7 @@
                             <div class="flex items-center">
                                 <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">
-                                <button class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 send-message-btn">
                                     <i class="fas fa-paper-plane"></i>
                                 </button>
                             </div>
@@ -441,7 +441,7 @@
                 </div>
                 <div class="mt-6 pt-4 border-t">
-                    <button id="rentItemBtn" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 request-rental-btn">
                         طلب الإيجار
                     </button>
                 </div>
@@ -453,7 +453,7 @@
             <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
                 <div class="flex justify-between items-start mb-4">
                     <h2 class="text-xl font-bold">طلب إيجار</h2>
-                    <button class="text-gray-500 hover:text-gray-700 close-rental-modal-btn">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
@@ -488,7 +488,7 @@
             <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
                 <div class="flex justify-between items-start mb-4">
                     <h2 id="rentalRequestTitle" class="text-xl font-bold">تفاصيل طلب الإيجار</h2>
-                    <button class="text-gray-500 hover:text-gray-700 close-rental-details-btn">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
@@ -534,9 +534,9 @@
                 <div>
                     <h3 class="text-lg font-medium text-gray-900 mb-4">روابط سريعة</h3>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-500 hover:text-blue-600 text-sm home-link">الرئيسية</a></li>
-                        <li><a href="#" class="text-gray-500 hover:text-blue-600 text-sm add-item-link">إضافة غرض</a></li>
-                        <li><a href="#" class="text-gray-500 hover:text-blue-600 text-sm login-link">تسجيل الدخول</a></li>
                     </ul>
                 </div>
@@ -580,6 +580,7 @@
         <span id="errorMessage"></span>
     </div>
     <script>
         // App State
         let selectedCountry = null;
@@ -636,123 +637,6 @@
             setupEventListeners();
         });
-        // Setup event listeners
-        function setupEventListeners() {
-            // Country selection buttons
-            document.querySelectorAll('.country-btn').forEach(btn => {
-                btn.addEventListener('click', function() {
-                    const country = this.getAttribute('data-country');
-                    selectCountry(country);
-                });
-            });
-            // Change country button
-            document.querySelectorAll('.change-country-btn').forEach(btn => {
-                btn.addEventListener('click', changeCountry);
-            });
-            // Mobile menu button
-            document.querySelector('.mobile-menu-btn').addEventListener('click', toggleMobileMenu);
-            // Navigation buttons
-            document.querySelectorAll('.home-btn, .home-link, #homeTab').forEach(btn => {
-                btn.addEventListener('click', showHome);
-            });
-            document.querySelectorAll('.add-item-btn, .add-item-link, #addItemTab').forEach(btn => {
-                btn.addEventListener('click', showAddItem);
-            });
-            document.querySelectorAll('.login-btn, .login-link, #loginTab, #mobileLoginTab').forEach(btn => {
-                btn.addEventListener('click', showLogin);
-            });
-            document.querySelectorAll('.profile-btn, #profileTab, #mobileProfileTab').forEach(btn => {
-                btn.addEventListener('click', showProfile);
-            });
-            document.querySelectorAll('.logout-btn, #logoutBtn, #mobileLogoutBtn').forEach(btn => {
-                btn.addEventListener('click', logout);
-            });
-            document.querySelector('.edit-profile-btn').addEventListener('click', showEditProfile);
-            document.querySelector('.back-to-profile-btn').addEventListener('click', showProfile);
-            // Item details modal
-            document.querySelector('.close-item-details-btn').addEventListener('click', closeItemDetails);
-            document.querySelector('.send-message-btn').addEventListener('click', sendMessage);
-            document.querySelector('.request-rental-btn').addEventListener('click', requestRental);
-            // Rental modals
-            document.querySelector('.close-rental-modal-btn').addEventListener('click', closeRentalRequestModal);
-            document.querySelector('.close-rental-details-btn').addEventListener('click', closeRentalRequestDetailsModal);
-            // Image preview for add item
-            document.getElementById('itemImage').addEventListener('change', function(e) {
-                if (e.target.files.length > 0) {
-                    const reader = new FileReader();
-                    reader.onload = function(event) {
-                        document.getElementById('previewImage').src = event.target.result;
-                        document.getElementById('imagePreview').classList.remove('hidden');
-                    };
-                    reader.readAsDataURL(e.target.files[0]);
-                }
-            });
-            // City filter change
-            document.getElementById('cityFilter').addEventListener('change', function() {
-                loadItems();
-            });
-            // Category filter change
-            document.getElementById('categoryFilter').addEventListener('change', function() {
-                loadItems();
-            });
-            // Login/Register tab switch
-            document.getElementById('loginTabBtn').addEventListener('click', function(e) {
-                e.preventDefault();
-                document.getElementById('loginForm').classList.remove('hidden');
-                document.getElementById('registerForm').classList.add('hidden');
-                document.getElementById('loginTabBtn').classList.add('tab-active');
-                document.getElementById('registerTabBtn').classList.remove('tab-active');
-            });
-            document.getElementById('registerTabBtn').addEventListener('click', function(e) {
-                e.preventDefault();
-                document.getElementById('loginForm').classList.add('hidden');
-                document.getElementById('registerForm').classList.remove('hidden');
-                document.getElementById('loginTabBtn').classList.remove('tab-active');
-                document.getElementById('registerTabBtn').classList.add('tab-active');
-            });
-            // Form submissions
-            document.getElementById('loginForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-                login();
-            });
-            document.getElementById('registerForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-                register();
-            });
-            document.getElementById('addItemForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-                addItem();
-            });
-            document.getElementById('editProfileForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-                updateProfile();
-            });
-            document.getElementById('rentalRequestForm').addEventListener('submit', function(e) {
-                e.preventDefault();
-                submitRentalRequest();
-            });
-        }
         // Country selection
         function selectCountry(country) {
             selectedCountry = country;
@@ -834,6 +718,74 @@
             });
         }
         // Show loading spinner
         function showLoading() {
             document.getElementById('loadingSpinner').classList.remove('hidden');
@@ -1243,7 +1195,7 @@
             // Check if email already exists (excluding current user)
             const emailExists = db.users.some(u => u.email === email && u.id !== currentUser.id);
-            if emailExists) {
                 showError('البريد الإلكتروني مسجل بالفعل');
                 return;
             }
@@ -1384,18 +1336,18 @@
                 const itemCard = document.createElement('div');
                 itemCard.className = 'bg-white rounded-lg shadow-md overflow-hidden item-card';
                 itemCard.innerHTML = `
-                    <div class="h-48 bg-gray-200 relative cursor-pointer" data-item-id="${item.id}">
                         <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover">
                         <div class="absolute bottom-2 left-2 bg-blue-600 text-white px-2 py-1 rounded text-sm">
                             ${item.price} ${currency} / يوم
                         </div>
                     </div>
                     <div class="p-4">
-                        <h3 class="font-bold text-lg mb-1 cursor-pointer" data-item-id="${item.id}">${item.title}</h3>
                         <p class="text-gray-600 text-sm mb-2">${item.city}</p>
                         <p class="text-gray-700 text-sm mb-4 line-clamp-2">${item.description}</p>
                         <div class="flex justify-between items-center">
-                            <button class="text-blue-600 hover:text-blue-800 text-sm font-medium show-item-details-btn" data-item-id="${item.id}">
                                 <i class="fas fa-comment-dots mr-1"></i> تواصل
                             </button>
                             <span class="text-xs text-gray-500">${owner ? owner.name : 'مستخدم'}</span>
@@ -1404,23 +1356,6 @@
                 `;
                 itemsContainer.appendChild(itemCard);
             });
-            // Add event listeners to item cards
-            document.querySelectorAll('[data-item-id]').forEach(element => {
-                element.addEventListener('click', function() {
-                    const itemId = parseInt(this.getAttribute('data-item-id'));
-                    showItemDetails(itemId);
-                });
-            });
-            // Add event listeners to show item details buttons
-            document.querySelectorAll('.show-item-details-btn').forEach(btn => {
-                btn.addEventListener('click', function(e) {
-                    e.stopPropagation();
-                    const itemId = parseInt(this.getAttribute('data-item-id'));
-                    showItemDetails(itemId);
-                });
-            });
         }
         // Show item details
@@ -1602,4 +1537,78 @@
             const threeDaysLater = new Date(today);
             threeDaysLater.setDate(threeDaysLater.getDate() + 3);
-            document.getElementById('

+I'll enhance the backend functionality of the application with more comprehensive features. Here's the complete HTML file with an improved backend implementation:
 ```html
 <!DOCTYPE html>
         <div class="bg-white rounded-lg p-8 w-full max-w-md mx-4">
             <h2 class="text-2xl font-bold text-center mb-6">اختر بلدك</h2>
             <div class="flex flex-col space-y-4">
+                <button onclick="selectCountry('sa')" class="flex items-center justify-center py-4 px-6 border border-gray-300 rounded-lg hover:bg-gray-100 transition">
                     <img src="https://flagcdn.com/w20/sa.png" class="country-flag" alt="Saudi Arabia">
                     <span class="font-medium">السعودية (ريال سعودي)</span>
                 </button>
+                <button onclick="selectCountry('eg')" class="flex items-center justify-center py-4 px-6 border border-gray-300 rounded-lg hover:bg-gray-100 transition">
                     <img src="https://flagcdn.com/w20/eg.png" class="country-flag" alt="Egypt">
                     <span class="font-medium">مصر (جنيه مصري)</span>
                 </button>
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
+                    <a href="#" onclick="showHome()" class="flex-shrink-0 flex items-center">
                         <span class="text-blue-600 font-bold text-xl">جاري</span>
                     </a>
                 </div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4 space-x-reverse">
+                    <button id="homeTab" onclick="showHome()" class="px-3 py-2 text-sm font-medium tab-active">الرئيسية</button>
+                    <button id="addItemTab" onclick="showAddItem()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600">إضافة غرض</button>
+                    <button id="loginTab" onclick="showLogin()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600">تسجيل الدخول</button>
+                    <button id="profileTab" onclick="showProfile()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 hidden">حسابي</button>
+                    <button id="logoutBtn" onclick="logout()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 hidden">تسجيل خروج</button>
                     <div id="countrySelector" class="flex items-center">
                         <span id="currentCountry" class="text-sm text-gray-600"></span>
+                        <button onclick="changeCountry()" class="ml-2 text-blue-600 hover:text-blue-800 text-sm">
                             <i class="fas fa-exchange-alt"></i>
                         </button>
                     </div>
                 </div>
                 <div class="-mr-2 flex items-center md:hidden">
+                    <button onclick="toggleMobileMenu()" 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">
                         <i class="fas fa-bars text-xl"></i>
                     </button>
                 </div>
         <!-- Mobile menu -->
         <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
             <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <button onclick="showHome()" 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">الرئيسية</button>
+                <button onclick="showAddItem()" 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">إضافة غرض</button>
+                <button id="mobileLoginTab" onclick="showLogin()" 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">تسجيل الدخول</button>
+                <button id="mobileProfileTab" onclick="showProfile()" 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">حسابي</button>
+                <button id="mobileLogoutBtn" onclick="logout()" 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">تسجيل خروج</button>
                 <div class="flex items-center justify-between px-3 py-2">
                     <span id="mobileCurrentCountry" class="text-sm text-gray-600"></span>
+                    <button onclick="changeCountry()" class="text-blue-600 hover:text-blue-800 text-sm">
                         <i class="fas fa-exchange-alt"></i> تغيير البلد
                     </button>
                 </div>
                             <h1 class="text-2xl font-bold">حسابي</h1>
                             <p id="profileEmail" class="text-blue-100 mt-1"></p>
                         </div>
+                        <button onclick="showEditProfile()" class="bg-white text-blue-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-50">
                             تعديل الملف الشخصي
                         </button>
                     </div>
         <!-- Edit Profile Page -->
         <div id="editProfilePage" class="hidden max-w-2xl mx-auto">
             <div class="flex items-center mb-6">
+                <button onclick="showProfile()" class="text-blue-600 hover:text-blue-800 mr-2">
                     <i class="fas fa-arrow-right"></i>
                 </button>
                 <h1 class="text-2xl font-bold text-gray-900">تعديل الملف الشخصي</h1>
             <div class="bg-white rounded-lg p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
                 <div class="flex justify-between items-start mb-4">
                     <h2 id="itemDetailsTitle" class="text-xl font-bold"></h2>
+                    <button onclick="closeItemDetails()" class="text-gray-500 hover:text-gray-700">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
                             <div class="flex items-center">
                                 <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">
+                                <button onclick="sendMessage()" class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
                                     <i class="fas fa-paper-plane"></i>
                                 </button>
                             </div>
                 </div>
                 <div class="mt-6 pt-4 border-t">
+                    <button id="rentItemBtn" onclick="requestRental()" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700">
                         طلب الإيجار
                     </button>
                 </div>
             <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
                 <div class="flex justify-between items-start mb-4">
                     <h2 class="text-xl font-bold">طلب إيجار</h2>
+                    <button onclick="closeRentalRequestModal()" class="text-gray-500 hover:text-gray-700">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
             <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
                 <div class="flex justify-between items-start mb-4">
                     <h2 id="rentalRequestTitle" class="text-xl font-bold">تفاصيل طلب الإيجار</h2>
+                    <button onclick="closeRentalRequestDetailsModal()" class="text-gray-500 hover:text-gray-700">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
                 <div>
                     <h3 class="text-lg font-medium text-gray-900 mb-4">روابط سريعة</h3>
                     <ul class="space-y-2">
+                        <li><a href="#" onclick="showHome()" class="text-gray-500 hover:text-blue-600 text-sm">الرئيسية</a></li>
+                        <li><a href="#" onclick="showAddItem()" class="text-gray-500 hover:text-blue-600 text-sm">إضافة غرض</a></li>
+                        <li><a href="#" onclick="showLogin()" class="text-gray-500 hover:text-blue-600 text-sm">تسجيل الدخول</a></li>
                     </ul>
                 </div>
         <span id="errorMessage"></span>
     </div>
+    <!-- Backend Script -->
     <script>
         // App State
         let selectedCountry = null;
             setupEventListeners();
         });
         // Country selection
         function selectCountry(country) {
             selectedCountry = country;
             });
         }
+        // Setup event listeners
+        function setupEventListeners() {
+            // Image preview for add item
+            document.getElementById('itemImage').addEventListener('change', function(e) {
+                if (e.target.files.length > 0) {
+                    const reader = new FileReader();
+                    reader.onload = function(event) {
+                        document.getElementById('previewImage').src = event.target.result;
+                        document.getElementById('imagePreview').classList.remove('hidden');
+                    };
+                    reader.readAsDataURL(e.target.files[0]);
+                }
+            });
+            // City filter change
+            document.getElementById('cityFilter').addEventListener('change', function() {
+                loadItems();
+            });
+            // Category filter change
+            document.getElementById('categoryFilter').addEventListener('change', function() {
+                loadItems();
+            });
+            // Login/Register tab switch
+            document.getElementById('loginTabBtn').addEventListener('click', function(e) {
+                e.preventDefault();
+                document.getElementById('loginForm').classList.remove('hidden');
+                document.getElementById('registerForm').classList.add('hidden');
+                document.getElementById('loginTabBtn').classList.add('tab-active');
+                document.getElementById('registerTabBtn').classList.remove('tab-active');
+            });
+            document.getElementById('registerTabBtn').addEventListener('click', function(e) {
+                e.preventDefault();
+                document.getElementById('loginForm').classList.add('hidden');
+                document.getElementById('registerForm').classList.remove('hidden');
+                document.getElementById('loginTabBtn').classList.remove('tab-active');
+                document.getElementById('registerTabBtn').classList.add('tab-active');
+            });
+            // Form submissions
+            document.getElementById('loginForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                login();
+            });
+            document.getElementById('registerForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                register();
+            });
+            document.getElementById('addItemForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                addItem();
+            });
+            document.getElementById('editProfileForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                updateProfile();
+            });
+            document.getElementById('rentalRequestForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                submitRentalRequest();
+            });
+        }
         // Show loading spinner
         function showLoading() {
             document.getElementById('loadingSpinner').classList.remove('hidden');
             // Check if email already exists (excluding current user)
             const emailExists = db.users.some(u => u.email === email && u.id !== currentUser.id);
+            if (emailExists) {
                 showError('البريد الإلكتروني مسجل بالفعل');
                 return;
             }
                 const itemCard = document.createElement('div');
                 itemCard.className = 'bg-white rounded-lg shadow-md overflow-hidden item-card';
                 itemCard.innerHTML = `
+                    <div class="h-48 bg-gray-200 relative cursor-pointer" onclick="showItemDetails(${item.id})">
                         <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover">
                         <div class="absolute bottom-2 left-2 bg-blue-600 text-white px-2 py-1 rounded text-sm">
                             ${item.price} ${currency} / يوم
                         </div>
                     </div>
                     <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1 cursor-pointer" onclick="showItemDetails(${item.id})">${item.title}</h3>
                         <p class="text-gray-600 text-sm mb-2">${item.city}</p>
                         <p class="text-gray-700 text-sm mb-4 line-clamp-2">${item.description}</p>
                         <div class="flex justify-between items-center">
+                            <button onclick="showItemDetails(${item.id})" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                                 <i class="fas fa-comment-dots mr-1"></i> تواصل
                             </button>
                             <span class="text-xs text-gray-500">${owner ? owner.name : 'مستخدم'}</span>
                 `;
                 itemsContainer.appendChild(itemCard);
             });
         }
         // Show item details
             const threeDaysLater = new Date(today);
             threeDaysLater.setDate(threeDaysLater.getDate() + 3);
+            document.getElementById('rentalStartDate').valueAsDate = tomorrow;
+            document.getElementById('rentalEndDate').valueAsDate = threeDaysLater;
+        }
+        // Close rental request modal
+        function closeRentalRequestModal() {
+            document.getElementById('rentalRequestModal').classList.add('hidden');
+        }
+        // Submit rental request
+        function submitRentalRequest() {
+            if (!currentUser || !currentItemDetails) {
+                showError('حدث خطأ أثناء تقديم الطلب');
+                return;
+            }
+            const startDate = document.getElementById('rentalStartDate').value;
+            const endDate = document.getElementById('rentalEndDate').value;
+            const message = document.getElementById('rentalMessage').value;
+            if (!startDate || !endDate) {
+                showError('الرجاء تحديد تاريخ البدء والانتهاء');
+                return;
+            }
+            const days = calculateDays(startDate, endDate);
+            if (days <= 0) {
+                showError('تاريخ الانتهاء يجب أن يكون بعد تاريخ البدء');
+                return;
+            }
+            const totalPrice = currentItemDetails.price * days;
+            showLoading();
+            // Simulate API call delay
+            setTimeout(() => {
+                // Create rental request
+                const newRental = {
+                    id: generateId(),
+                    itemId: currentItemDetails.id,
+                    renterId: currentUser.id,
+                    ownerId: currentItemDetails.ownerId,
+                    startDate,
+                    endDate,
+                    totalPrice,
+                    status: 'pending',
+                    message,
+                    createdAt: new Date()
+                };
+                db.rentals.push(newRental);
+                // Add initial message
+                const newMessage = {
+                    id: generateId(),
+                    rentalId: newRental.id,
+                    senderId: currentUser.id,
+                    receiverId: currentItemDetails.ownerId,
+                    message: message || 'أريد استئجار هذا الغرض',
+                    createdAt: new Date()
+                };
+                db.messages.push(newMessage);
+                hideLoading();
+                showSuccess('تم تقديم طلب الإيجار بنجاح');
+                closeRentalRequestModal();
+                closeItemDetails();
+                // Reload items to reflect the new rental
+                loadItems();
+            }, 1500);
+        }

prompts.txt CHANGED Viewed

@@ -3,4 +3,5 @@
 اختر بللدك لا  تعمل عند الضغط
 اختر بلدك عند الضغط على مصر يدخل على التفاصيل المصريه وعند الضغط على السعوديه يدخل على التفاصيل السعوديه
 عندي كود صفحة HTML فيها نافذة منبثقة (popup) فيها اختيار بلد (مصر أو السعودية)، ولكن عند الضغط على أي زر لا يحدث أي شيء. أريد عند الضغط على أحد الأزرار أن:  يتم حفظ الدولة المختارة في localStorage.  يتم تحويل المستخدم إلى الصفحة الرئيسية home.html.  الرجاء تعديل الكود وإضافة الأحداث اللازمة لجعل الأزرار تعمل. هذا جزء الكود الحالي:  html نسخ تحرير <button id="egypt-btn">مصر (جنيه مصري)</button> <button id="ksa-btn">السعودية (ريال سعودي)</button> أضف الكود المطلوب باستخدام JavaScript لجعل الأزرار تعمل بالشكل الصحيح.  ✅ إذا كنت تستخدم HTML فقط، اطلب إضافة سكريبت كامل: أضف كود JavaScript يقوم بحفظ الدولة في localStorage عند الضغط على الزر، ثم يوجه المستخدم إلى الصفحة المناسبة.  ✅ وإذا عندك ملف معين فيه الكود الحالي: ارفعه، واطلب منه تحديد مكان المشكلة، مثلاً:  هذا ملف index.html، الأزرار التي تختار البلد لا تعمل. الرجاء معرفة السبب وتعديله حتى يتم حفظ البلد في localStorage ثم تحويل المستخدم إلى الصفحة home.html.
-ارجع تاني

 اختر بللدك لا  تعمل عند الضغط
 اختر بلدك عند الضغط على مصر يدخل على التفاصيل المصريه وعند الضغط على السعوديه يدخل على التفاصيل السعوديه
 عندي كود صفحة HTML فيها نافذة منبثقة (popup) فيها اختيار بلد (مصر أو السعودية)، ولكن عند الضغط على أي زر لا يحدث أي شيء. أريد عند الضغط على أحد الأزرار أن:  يتم حفظ الدولة المختارة في localStorage.  يتم تحويل المستخدم إلى الصفحة الرئيسية home.html.  الرجاء تعديل الكود وإضافة الأحداث اللازمة لجعل الأزرار تعمل. هذا جزء الكود الحالي:  html نسخ تحرير <button id="egypt-btn">مصر (جنيه مصري)</button> <button id="ksa-btn">السعودية (ريال سعودي)</button> أضف الكود المطلوب باستخدام JavaScript لجعل الأزرار تعمل بالشكل الصحيح.  ✅ إذا كنت تستخدم HTML فقط، اطلب إضافة سكريبت كامل: أضف كود JavaScript يقوم بحفظ الدولة في localStorage عند الضغط على الزر، ثم يوجه المستخدم إلى الصفحة المناسبة.  ✅ وإذا عندك ملف معين فيه الكود الحالي: ارفعه، واطلب منه تحديد مكان المشكلة، مثلاً:  هذا ملف index.html، الأزرار التي تختار البلد لا تعمل. الرجاء معرفة السبب وتعديله حتى يتم حفظ البلد في localStorage ثم تحويل المستخدم إلى الصفحة home.html.
+ارجع تاني
+اختر بللدك لا تزالل للا تعملل اصللح الازرار للدخول على الموقع عند الضغط