Upload folder using huggingface_hub

index.html

@@ -16,6 +16,7 @@
             margin: 0;
             padding: 0;
             box-sizing: border-box;
+            outline: none;
         }
 
         :root {
@@ -36,11 +37,16 @@
             --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
         }
 
+        html {
+            scroll-behavior: smooth;
+        }
+
         body {
             font-family: 'Tajawal', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--light);
             min-height: 100vh;
             overflow-x: hidden;
+            color: var(--dark);
         }
 
         /* Loading Screen */
@@ -160,6 +166,21 @@
             width: 100%;
         }
 
+        .anycoder-link {
+            font-size: 0.8rem;
+            color: #9ca3af;
+            text-decoration: none;
+            border: 1px solid #e5e7eb;
+            padding: 4px 10px;
+            border-radius: 20px;
+            transition: all 0.3s;
+        }
+        
+        .anycoder-link:hover {
+            color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+
         .lang-toggle {
             background: var(--gradient-1);
             color: white;
@@ -178,11 +199,14 @@
 
         /* Hero Section */
         .hero {
-            padding: 4rem 2rem;
+            padding: 6rem 2rem 4rem;
             text-align: center;
             color: white;
             position: relative;
             overflow: hidden;
+            background: var(--gradient-1);
+            border-bottom-right-radius: 50px;
+            border-bottom-left-radius: 50px;
         }
 
         .hero::before {
@@ -224,6 +248,7 @@
             margin-bottom: 2rem;
             position: relative;
             z-index: 1;
+            opacity: 0.9;
             animation: fadeInUp 0.8s ease-out 0.2s both;
         }
 
@@ -305,7 +330,6 @@
 
         .form-group input:focus,
         .form-group select:focus {
-            outline: none;
             border-color: var(--primary-color);
             box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
         }
@@ -376,6 +400,7 @@
             transition: all 0.3s;
             position: relative;
             overflow: hidden;
+            border: 1px solid var(--light);
         }
 
         .feature-card::before {
@@ -426,7 +451,7 @@
         /* Properties Section */
         .properties {
             padding: 4rem 2rem;
-            background: var(--light);
+            background: #f9fafb;
         }
 
         .filter-bar {
@@ -435,10 +460,11 @@
             margin-bottom: 2rem;
             flex-wrap: wrap;
             align-items: center;
+            justify-content: center;
         }
 
         .filter-btn {
-            padding: 0.5rem 1rem;
+            padding: 0.5rem 1.5rem;
             background: white;
             border: 2px solid var(--light);
             border-radius: 25px;
@@ -451,11 +477,12 @@
             background: var(--gradient-1);
             color: white;
             border-color: transparent;
+            box-shadow: var(--shadow-md);
         }
 
         .properties-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
             gap: 2rem;
         }
 
@@ -466,6 +493,17 @@
             box-shadow: var(--shadow-md);
             transition: all 0.3s;
             position: relative;
+            display: none; /* Hidden by default for filtering */
+            animation: fadeIn 0.5s ease-out;
+        }
+
+        .property-card.show {
+            display: block;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
         .property-card:hover {
@@ -483,7 +521,7 @@
             width: 100%;
             height: 100%;
             object-fit: cover;
-            transition: transform 0.3s;
+            transition: transform 0.5s;
         }
 
         .property-card:hover .property-image img {
@@ -500,6 +538,7 @@
             border-radius: 20px;
             font-size: 0.875rem;
             font-weight: 600;
+            box-shadow: var(--shadow-sm);
         }
 
         .property-favorite {
@@ -515,6 +554,7 @@
             justify-content: center;
             cursor: pointer;
             transition: all 0.3s;
+            box-shadow: var(--shadow-sm);
         }
 
         .property-favorite:hover {
@@ -543,6 +583,7 @@
             gap: 0.5rem;
             color: #6b7280;
             margin-bottom: 1rem;
+            font-size: 0.9rem;
         }
 
         .property-features {
@@ -550,6 +591,7 @@
             gap: 1rem;
             padding-top: 1rem;
             border-top: 1px solid var(--light);
+            flex-wrap: wrap;
         }
 
         .property-feature {
@@ -578,7 +620,7 @@
         .map-placeholder {
             width: 100%;
             height: 100%;
-            background: url('https://picsum.photos/seed/saudimap/1200/500.jpg') center/cover;
+            background: url('https://picsum.photos/seed/riyadhmap/1600/600.jpg') center/cover;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -595,31 +637,29 @@
             border-radius: 15px;
             box-shadow: var(--shadow-xl);
             text-align: center;
+            max-width: 90%;
+            width: 400px;
         }
 
-        .map-controls {
-            position: absolute;
-            bottom: 2rem;
-            right: 2rem;
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
+        .map-overlay h3 {
+            margin-bottom: 1rem;
+            color: var(--primary-color);
         }
 
-        .map-control-btn {
-            width: 40px;
-            height: 40px;
-            background: white;
+        .map-overlay button {
+            background: var(--gradient-1);
+            color: white;
             border: none;
+            padding: 0.75rem 1.5rem;
             border-radius: 10px;
-            box-shadow: var(--shadow-md);
             cursor: pointer;
+            margin-top: 1rem;
             transition: all 0.3s;
         }
 
-        .map-control-btn:hover {
-            transform: scale(1.1);
-            box-shadow: var(--shadow-lg);
+        .map-overlay button:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
         }
 
         /* Calculator Section */
@@ -650,7 +690,7 @@
         }
 
         .calculator-input {
-            margin-bottom: 1rem;
+            margin-bottom: 1.5rem;
         }
 
         .calculator-input label {
@@ -660,18 +700,24 @@
             font-weight: 500;
         }
 
-        .calculator-input input {
-            width: 100%;
-            padding: 0.75rem;
-            border: 2px solid var(--light);
-            border-radius: 10px;
-            font-size: 1rem;
-            transition: all 0.3s;
+        .range-wrap {
+            position: relative;
         }
 
-        .calculator-input input:focus {
-            outline: none;
-            border-color: var(--primary-color);
+        .range-value {
+            position: absolute;
+            top: -35px;
+            left: 0;
+            background: var(--primary-color);
+            color: white;
+            padding: 2px 8px;
+            border-radius: 5px;
+            font-size: 0.85rem;
+        }
+
+        input[type=range] {
+            width: 100%;
+            cursor: pointer;
         }
 
         .calculate-btn {
@@ -684,6 +730,7 @@
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s;
+            font-size: 1.1rem;
         }
 
         .calculate-btn:hover {
@@ -694,9 +741,10 @@
         .result-box {
             margin-top: 1.5rem;
             padding: 1.5rem;
-            background: var(--light);
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
             border-radius: 10px;
             display: none;
+            border: 1px solid #bae6fd;
         }
 
         .result-box.show {
@@ -704,24 +752,28 @@
             animation: fadeIn 0.5s;
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-
         .result-item {
             display: flex;
             justify-content: space-between;
             margin-bottom: 0.5rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px dashed #cbd5e1;
+        }
+
+        .result-item:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
         }
 
         .result-label {
-            color: #6b7280;
+            color: #64748b;
         }
 
         .result-value {
-            font-weight: 600;
+            font-weight: 700;
             color: var(--primary-color);
+            font-size: 1.2rem;
         }
 
         /* Footer */
@@ -729,6 +781,7 @@
             background: var(--dark);
             color: white;
             padding: 3rem 2rem 1rem;
+            margin-top: 4rem;
         }
 
         .footer-content {
@@ -741,8 +794,10 @@
         }
 
         .footer-section h4 {
-            margin-bottom: 1rem;
+            margin-bottom: 1.5rem;
             color: var(--secondary-color);
+            position: relative;
+            display: inline-block;
         }
 
         .footer-section ul {
@@ -750,23 +805,27 @@
         }
 
         .footer-section li {
-            margin-bottom: 0.5rem;
+            margin-bottom: 0.8rem;
         }
 
         .footer-section a {
             color: #9ca3af;
             text-decoration: none;
             transition: color 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
 
         .footer-section a:hover {
             color: white;
+            padding-right: 5px;
         }
 
         .social-links {
             display: flex;
             gap: 1rem;
-            margin-top: 1rem;
+            margin-top: 1.5rem;
         }
 
         .social-link {
@@ -790,6 +849,7 @@
             padding-top: 2rem;
             border-top: 1px solid rgba(255, 255, 255, 0.1);
             color: #9ca3af;
+            font-size: 0.9rem;
         }
 
         .footer-bottom a {
@@ -820,6 +880,7 @@
                 padding: 2rem;
                 transition: right 0.3s;
                 box-shadow: var(--shadow-xl);
+                z-index: 999;
             }
 
             .nav-links.active {
@@ -847,27 +908,7 @@
             }
         }
 
-        /* Animations */
-        .fade-in {
-            animation: fadeIn 0.5s ease-out;
-        }
-
-        .slide-in-left {
-            animation: slideInLeft 0.5s ease-out;
-        }
-
-        @keyframes slideInLeft {
-            from {
-                opacity: 0;
-                transform: translateX(-30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-
-        /* Notification */
+        /* Notification Toast */
         .notification {
             position: fixed;
             bottom: 2rem;
@@ -879,9 +920,10 @@
             display: flex;
             align-items: center;
             gap: 1rem;
-            transform: translateX(-400px);
-            transition: transform 0.3s;
+            transform: translateX(-150%);
+            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
             z-index: 1000;
+            border-right: 4px solid var(--accent-color);
         }
 
         .notification.show {
@@ -891,22 +933,24 @@
         .notification-icon {
             width: 40px;
             height: 40px;
-            background: var(--gradient-1);
+            background: #ecfdf5;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            color: white;
+            color: var(--accent-color);
+            font-size: 1.2rem;
         }
 
         .notification-content h4 {
             color: var(--dark);
             margin-bottom: 0.25rem;
+            font-size: 1rem;
         }
 
         .notification-content p {
             color: #6b7280;
-            font-size: 0.875rem;
+            font-size: 0.85rem;
         }
     </style>
 </head>
@@ -916,6 +960,17 @@
         <div class="loader"></div>
     </div>
 
+    <!-- Notification Toast -->
+    <div class="notification" id="notification">
+        <div class="notification-icon">
+            <i class="fas fa-check-circle"></i>
+        </div>
+        <div class="notification-content">
+            <h4 id="notifTitle">تم بنجاح</h4>
+            <p id="notifMessage">تمت العملية بنجاح</p>
+        </div>
+    </div>
+
     <!-- Header -->
     <header>
         <nav>
@@ -932,7 +987,8 @@
                 <li><a href="#map">الخريطة</a></li>
                 <li><a href="#calculator">الحاسبة</a></li>
                 <li><a href="#contact">اتصل بنا</a></li>
-                <li><button class="lang-toggle" onclick="toggleLanguage()">EN</button></li>
+                <li><button class="lang-toggle" onclick="toggleLanguage()">English</button></li>
+                <li><a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a></li>
             </ul>
         </nav>
     </header>
@@ -1025,7 +1081,7 @@
                         <i class="fas fa-users"></i>
                     </div>
                     <h3>مجتمع المستثمرين</h3>
-                    <p>انضم إلى أكبر مجعي للمستثمرين العقاريين في المملكة</p>
+                    <p>انضم إلى أكبر مجتمع للمستثمرين العقاريين في المملكة</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
@@ -1051,7 +1107,7 @@
             </div>
             <div class="properties-grid" id="propertiesGrid">
                 <!-- Property Cards -->
-                <div class="property-card" data-type="villa">
+                <div class="property-card show" data-type="villa">
                     <div class="property-image">
                         <img src="https://picsum.photos/seed/villa1/400/250.jpg" alt="فيلا فاخرة">
                         <span class="property-badge">جديد</span>
@@ -1082,7 +1138,7 @@
                     </div>
                 </div>
 
-                <div class="property-card" data-type="apartment">
+                <div class="property-card show" data-type="apartment">
                     <div class="property-image">
                         <img src="https://picsum.photos/seed/apartment1/400/250.jpg" alt="شقة عصرية">
                         <span class="property-badge">مميز</span>
@@ -1113,7 +1169,7 @@
                     </div>
                 </div>
 
-                <div class="property-card" data-type="land">
+                <div class="property-card show" data-type="land">
                     <div class="property-image">
                         <img src="https://picsum.photos/seed/land1/400/250.jpg" alt="أرض استثمارية">
                         <span class="property-badge">فرصة ذهبية</span>
@@ -1144,7 +1200,7 @@
                     </div>
                 </div>
 
-                <div class="property-card" data-type="commercial">
+                <div class="property-card show" data-type="commercial">
                     <div class="property-image">
                         <img src="https://picsum.photos/seed/commercial1/400/250.jpg" alt="محل تجاري">
                         <span class="property-badge">موقع مميز</span>
@@ -1175,7 +1231,7 @@
                     </div>
                 </div>
 
-                <div class="property-card" data-type="villa">
+                <div class="property-card show" data-type="villa">
                     <div class="property-image">
                         <img src="https://picsum.photos/seed/villa2/400/250.jpg" alt="فيلا حديثة">
                         <span class="property-badge">فاخر</span>
@@ -1184,4 +1240,4 @@
                         </div>
                     </div>
                     <div class="property-details">
-                        <div class="property-price">4,500
+                        <div