صفحه اصلی/دسته بندی موضوعی - فراغیب

→ تفاوت با ویرایش قدیمی‌تر

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

نسخهٔ کنونی تا ‏۷ اوت ۲۰۲۶، ساعت ۱۶:۱۷

هوش مصنوعی ۱۲ مقاله

نقاشی دیجیتال ۸ مقاله

فیزیک کوانتوم ۵ مقاله

برنامه‌نویسی ۲۵ مقاله

طراحی گرافیک ۱۰ مقاله

@@ خط ۱: / خط ۱: @@
 <html>
-<!-- بخش استایل‌های اختصاصی و واکنش‌گرا -->
+<div class="mediawiki-category-container" style="direction: rtl; font-family: tahoma, arial; max-width: 1000px; margin: 20px auto; padding: 15px; background: #f9f9f9; border-radius: 18px; box-shadow: 0 8px 24px rgba(42, 128, 85, .14); border: 1px solid #c9e4d5;">
-<style>
-  .wiki-category-container {
-    direction: rtl;
-    margin: 40px auto;
-    max-width: 1400px;
-    padding: 10px;
-    font-family: tahoma, arial, sans-serif;
-  }
-  .wiki-category-grid {
-    display: grid !important;
-    grid-template-columns: repeat(5, 1fr) !important; /* ۵ ستونه در دسکتاپ */
-    gap: 20px !important;
-  }
-  .category-group {
-    display: flex;
-    flex-direction: column;
-    text-decoration: none !important;
-    transition: all 0.3s ease;
-  }
-  .main-card {
+    <!-- بخش جستجو -->
-     background: #ffffff;
+     <div class="search-box" style="margin-bottom: 15px; text-align: center;">
-    border: 1.5px solid #8ee0d8;
+        <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها..."
-    border-radius: 8px 8px 0 0; /* فقط گوشه‌های بالا گرد */
+               style="width: 90%; padding: 10px 18px; border: 1px solid #c9e4d5; border-radius: 25px; outline: none; font-size: 15px; transition: all 0.3s ease;">
-    padding: 15px 10px;
+    </div>
-    text-align: center;
-    color: #2d3748;
-    font-weight: bold;
-    font-size: clamp(14px, 1.2vw, 17px) !important;
-    border-bottom: none;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
-  }
-  .sub-categories-list {
+    <!-- بخش فیلترها -->
-     background: #f9fdfd;
+     <div class="filter-bar" style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px;">
-    border: 1.5px solid #8ee0d8;
+        <button class="filter-btn active" onclick="filterSelection(event, 'all')" style="padding: 6px 16px; border-radius: 15px; border: none; background: #16bd78; color: white; cursor: pointer; font-size: 14px; font-weight: bold;">همه</button>
-    border-top: none;
+        <button class="filter-btn" onclick="filterSelection(event, 'tech')" style="padding: 6px 16px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 14px;">تکنولوژی</button>
-    border-radius: 0 0 8px 8px;
+        <button class="filter-btn" onclick="filterSelection(event, 'art')" style="padding: 6px 16px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 14px;">هنر</button>
-    padding: 10px;
+        <button class="filter-btn" onclick="filterSelection(event, 'science')" style="padding: 6px 16px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 14px;">علوم</button>
-    margin: 0;
+    </div>
-    list-style: none;
-    text-align: right;
-    flex-grow: 1;
-  }
-  .sub-category-item {
+    <!-- شبکه کارت‌های مستطیلی باریک -->
-    color: #4a5568;
+    <div id="categoryGrid" class="category-grid">
-    font-size: clamp(10px, 0.9vw, 12px) !important;
-    margin-bottom: 6px;
+        <!-- کارت نمونه 1 -->
-    line-height: 1.5;
+        <div class="category-card tech" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #16bd78;">
-    display: block;
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">هوش مصنوعی</span>
-    white-space: normal !important; /* اجازه شکستن خط برای زیردسته‌ها */
+            <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۱۲ مقاله</span>
-    text-align: justify;
+        </div>
-  }
-  .sub-category-item:last-child {
+        <!-- کارت نمونه 2 -->
-    margin-bottom: 0;
+        <div class="category-card art" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #ff9f43;">
-  }
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">نقاشی دیجیتال</span>
+            <span style="font-size: 13px; color: #555; background: #fff7ed; padding: 2px 10px; border-radius: 10px;">۸ مقاله</span>
+        </div>
-  /* حالت هاور برای کل گروه */
+        <!-- کارت نمونه 3 -->
-  .category-group:hover .main-card {
+        <div class="category-card science" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #54a0ff;">
-    background-color: #65c3ba;
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">فیزیک کوانتوم</span>
-    color: #ffffff;
+            <span style="font-size: 13px; color: #555; background: #eff6ff; padding: 2px 10px; border-radius: 10px;">۵ مقاله</span>
-    border-color: #65c3ba;
+        </div>
-  }
-  .category-group:hover .sub-categories-list {
+        <!-- کارت نمونه 4 -->
-    background-color: #ffffff;
+        <div class="category-card tech" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #16bd78;">
-    border-color: #65c3ba;
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">برنامه‌نویسی</span>
-  }
+            <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۲۵ مقاله</span>
+        </div>
-  .category-group:hover .sub-category-item {
+        <!-- کارت نمونه 5 -->
-    color: #2d3748;
+        <div class="category-card art" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #ff9f43;">
-  }
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">طراحی گرافیک</span>
+            <span style="font-size: 13px; color: #555; background: #fff7ed; padding: 2px 10px; border-radius: 10px;">۱۰ مقاله</span>
+        </div>
-  /* تنظیمات نمایشگر موبایل و تبلت */
+    </div>
-  @media (max-width: 1024px) {
+</div>
-     .wiki-category-grid {
-      grid-template-columns: repeat(3, 1fr) !important;
+<style>
+/* تنظیمات گرید اصلی */
+.category-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); /* ۴ ستون در دسکتاپ */
+    gap: 12px;
+}
+/* حالت موبایل: ۲ ستون */
+@media (max-width: 768px) {
+     .category-grid {
+        grid-template-columns: repeat(2, 1fr);
      }
-  }
+}
+/* استایل‌ها */
+.category-card { transition: all 0.2s ease; cursor: pointer; }
+.category-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+.filter-btn:hover { opacity: 0.8; }
+/* کلاس مخفی سازی برای حل مشکل جستجو */
+.is-hidden {
+    display: none !important;
+}
+</style>
-  @media (max-width: 768px) {
+<script>
-     .wiki-category-grid {
+// تابع فیلتر
-      grid-template-columns: repeat(2, 1fr) !important;
+function filterSelection(event, category) {
-      gap: 15px !important;
+     const cards = document.getElementsByClassName("category-card");
+    const buttons = document.getElementsByClassName("filter-btn");
+    // ریست کردن دکمه‌ها
+    for (let btn of buttons) {
+        btn.style.background = "#eee";
+        btn.style.color = "black";
      }
+     // فعال کردن دکمه کلیک شده
-     .main-card {
+     event.currentTarget.style.background = "#16bd78";
-      padding: 12px 5px;
+    event.currentTarget.style.color = "white";
+    for (let card of cards) {
+        if (category === 'all') {
+            card.classList.remove("is-hidden");
+        } else {
+            if (card.classList.contains(category)) {
+                card.classList.remove("is-hidden");
+            } else {
+                card.classList.add("is-hidden");
+            }
+        }
      }
-  }
+}
-</style>
+// تابع جستجو
+document.getElementById('categorySearch').addEventListener('keyup', function() {
+    const searchValue = this.value.toLowerCase().trim();
+    const cards = document.getElementsByClassName("category-card");
-<div class="wiki-category-container">
+     for (let card of cards) {
+         const titleElement = card.querySelector('.card-title');
-     <div style="text-align: center; margin-bottom: 30px;">
+         const titleText = titleElement.innerText.toLowerCase();
-         <h2 style="color: #2c3e50; border-bottom: 2px solid #65c3ba; display: inline-block; padding-bottom: 10px; font-weight: bold; font-size: 26px;">دسته‌بندی موضوعی مشاغل</h2>
-         <p style="color: #7f8c8d; font-size: 15px; margin-top: 10px;">برای مشاهده کسب‌وکارها، حوزه فعالیت مورد نظر خود را انتخاب کنید.</p>
-    </div>
-    <div class="wiki-category-grid">
+        if (titleText.includes(searchValue)) {
+            card.classList.remove("is-hidden");
-        <!-- آموزش و پرورش -->
+         } else {
-         <a href="/wiki/Category:آموزش_و_پرورش" class="category-group">
+            card.classList.add("is-hidden");
-            <div class="main-card">آموزش و پرورش</div>
+         }
-            <ul class="sub-categories-list">
+    }
-                <li class="sub-category-item">مهد
+});
+</script>
 </html>