الگو:صفحه اصلی مشاغل/دسته بندی موضوعی: تفاوت میان نسخه‌ها

دیداریویکی‌متن

@@ خط ۱۶: / خط ۱۶: @@
      <div id="categoryGrid" class="fz-category-grid">
-         <!-- کارت‌های دسته‌بندی -->
+         <!-- کارت‌های دسته‌بندی با لینک‌های دقیق درخواستی شما -->
          <a href="کافه های نسیم شهر" class="fz-card all">
              <span class="fz-title">کافه</span>
@@ خط ۳۷۰: / خط ۳۷۰: @@
          <a href="جواهر فروشی های نسیم شهر" class="fz-card all">
-             <span class="fz-title">جواهر فروشی (جواهرات)</span>
+             <span class="fz-title">جواهرات</span>
          </a>
@@ خط ۵۹۳: / خط ۵۹۳: @@
          </a>
-         <a href="سینما های نسیم شهر" class="fz-card all">
+         <a href="سينما های نسیم شهر" class="fz-card all">
              <span class="fz-title">سینما</span>
          </a>
@@ خط ۶۴۱: / خط ۶۴۱: @@
      padding: 15px !important;
      background: #f9f9f9 !important;
-     border-radius: 15px !important;
+     border-radius: 12px !important;
      border: 1px solid #c9e4d5 !important;
      display: block !important;
@@ خط ۶۵۱: / خط ۶۵۱: @@
 .fz-search-wrapper input {
      width: 90%;
-     padding: 10px 18px;
+     padding: 10px 15px;
      border: 1px solid #c9e4d5;
-     border-radius: 25px;
+     border-radius: 20px;
      outline: none;
      font-size: 15px;
@@ خط ۶۵۹: / خط ۶۵۹: @@
      transition: 0.3s;
 }
-.fz-search-wrapper input:focus { border-color: #16bd78; box-shadow: 0 0 5px rgba(22, 189, 120, 0.2); }
+.fz-search-wrapper input:focus { border-color: #16bd78; }
 /* استایل دکمه‌های فیلتر */
-.fz-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
+.fz-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 15px; }
 .fz-filter-btn {
      padding: 6px 18px;
@@ خط ۶۶۹: / خط ۶۶۹: @@
      background: #eee;
      cursor: pointer;
-     font-size: 14px;
+     font-size: 15px;
      font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
      transition: 0.3s;
 }
-.fz-filter-btn.active { background: #16bd78 !important; color: white !important; font-weight: bold; }
+.fz-filter-btn.active { background: #16bd78 !important; color: white !important; }
-/* چیدمان شبکه کارت‌ها */
+/* چیدمان شبکه کارت‌ها - دسکتاپ ۳ ستونه */
 .fz-category-grid {
      display: grid !important;
-     grid-template-columns: repeat(4, 1fr) !important;
+     grid-template-columns: repeat(3, 1fr) !important;
      gap: 12px !important;
      width: 100% !important;
 }
-/* استایل کارت نهایی (تبدیل به تگ a شده است) */
+/* استایل کارت */
 .fz-card {
      background: white !important;
-     height: 42px !important;
+     height: 48px !important;
      display: flex !important;
      align-items: center !important;
@@ خط ۶۹۲: / خط ۶۹۲: @@
      padding: 0 10px !important;
      border-radius: 8px !important;
-     box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
+     box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
-     border-bottom: 4px solid #16bd78 !important; /* خط سبز رنگ پایین کارت‌ها */
+     border-bottom: 3px solid #16bd78 !important;
      box-sizing: border-box !important;
      cursor: pointer;
      transition: all 0.2s ease;
-    margin: 0 !important;
+     text-decoration: none !important;
-     text-decoration: none !important; /* حذف خط زیر لینک */
 }
-.fz-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }
+.fz-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; }
 /* استایل فونت داخل کارت */
 .fz-title {
      font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
-     font-weight: 500 !important;
+     font-weight: bold !important;
-     color: #333 !important;
+     color: #444 !important;
-     font-size: 14px !important; /* اندازه برای خوانایی بهتر در کلمات طولانی */
+     font-size: 15.4px !important;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
+    width: 100%;
 }
-/* واکنش‌گرایی موبایل */
+/* واکنش‌گرایی بر اساس تعداد ستون‌ها */
-@media (max-width: 992px) {
+@media (max-width: 850px) {
-     .fz-category-grid { grid-template-columns: repeat(3, 1fr) !important; }
+     .fz-category-grid {
+        grid-template-columns: repeat(2, 1fr) !important; /* تبلت ۲ ستونه */
+    }
 }
-@media (max-width: 768px) {
+@media (max-width: 500px) {
-     .fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; }
+     .fz-category-grid {
-}
+        grid-template-columns: repeat(1, 1fr) !important; /* موبایل تک ستونه */
-@media (max-width: 480px) {
+     }
-     .fz-category-grid { grid-template-columns: repeat(1, 1fr) !important; }
 }
-/* کلاس مخفی‌سازی برای فیلتر و جستجو */
 .is-hidden { display: none !important; }
 </style>
 <script>
-// تابع فیلتر دسته‌بندی
 function filterSelection(event, category) {
      const cards = document.getElementsByClassName("fz-card");
      const buttons = document.getElementsByClassName("fz-filter-btn");
-    // حذف حالت فعال از همه دکمه‌ها
      for (let btn of buttons) btn.classList.remove("active");
-    // اضافه کردن حالت فعال به دکمه کلیک شده
      event.currentTarget.classList.add("active");
-    // نمایش یا عدم نمایش کارت‌ها
      for (let card of cards) {
          if (category === 'all' || card.classList.contains(category)) {
@@ خط ۷۵۱: / خط ۷۴۵: @@
 }
-// تابع جستجوی زنده
 document.getElementById('categorySearch').addEventListener('keyup', function() {
      const val = this.value.toLowerCase().trim();
      const cards = document.getElementsByClassName("fz-card");
      for (let card of cards) {
          const title = card.querySelector('.fz-title').innerText.toLowerCase();