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

<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;">

     <!-- بخش جستجو -->

     <div class="search-box" style="margin-bottom: 15px; text-align: center;">

         <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها..."  

              style="width: 90%; padding: 10px 18px; border: 1px solid #c9e4d5; border-radius: 25px; outline: none; font-size: 15px; transition: all 0.3s ease;">

     <!-- بخش فیلترها -->

     <div class="filter-bar" style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px;">

         <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>

         <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>

         <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>

         <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>

     <!-- شبکه کارت‌های مستطیلی باریک -->

     <div id="categoryGrid" class="category-grid">

        <!-- کارت نمونه 1 -->

         <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;">

            <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>

        <!-- کارت نمونه 2 -->

        <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 -->

        <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;">

            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">فیزیک کوانتوم</span>

            <span style="font-size: 13px; color: #555; background: #eff6ff; padding: 2px 10px; border-radius: 10px;">۵ مقاله</span>

         </div>

        <!-- کارت نمونه 4 -->

        <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;">

            <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>

        <!-- کارت نمونه 5 -->

        <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>

<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>

<script>

// تابع فیلتر

    const cards = document.getElementsByClassName("category-card");

    const buttons = document.getElementsByClassName("filter-btn");

     // ریست کردن دکمه‌ها

         btn.style.background = "#eee";

         btn.style.color = "black";

    // فعال کردن دکمه کلیک شده

    event.currentTarget.style.background = "#16bd78";

    event.currentTarget.style.color = "white";

     for (let card of cards) {

        if (category === 'all') {

            card.classList.remove("is-hidden");

         } else {

                card.classList.remove("is-hidden");

                card.classList.add("is-hidden");

         }

// تابع جستجو

    const searchValue = this.value.toLowerCase().trim();

    const cards = document.getElementsByClassName("category-card");

     for (let card of cards) {

         const titleElement = card.querySelector('.card-title');

         const titleText = titleElement.innerText.toLowerCase();

         if (titleText.includes(searchValue)) {

            card.classList.remove("is-hidden");

         } else {

            card.classList.add("is-hidden");

         }

     }

</script>