فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<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;">
 
<div class="mediawiki-category-container" style="direction: rtl; font-family: tahoma, arial; max-width: 1000px; margin: 20px auto; padding: 10px; background: #f9f9f9; border-radius: 15px; border: 1px solid #c9e4d5;">


     <!-- بخش جستجو -->
     <!-- بخش جستجو -->
     <div class="search-box" style="margin-bottom: 15px; text-align: center;">
     <div class="search-box" style="margin-bottom: 10px; text-align: center;">
         <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها..."  
         <input type="text" id="categorySearch" placeholder="جستجو..."  
               style="width: 90%; padding: 8px 15px; border: 1px solid #c9e4d5; border-radius: 20px; outline: none; font-size: 13px; transition: all 0.3s ease;">
               style="width: 95%; padding: 6px 15px; border: 1px solid #c9e4d5; border-radius: 20px; outline: none; font-size: 14px;">
     </div>
     </div>


     <!-- بخش فیلترها -->
     <!-- بخش فیلترها -->
     <div class="filter-bar" style="display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 15px;">
     <div class="filter-bar" style="display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 15px;">
         <button class="filter-btn active" onclick="filterSelection(event, 'all')" style="padding: 4px 12px; border-radius: 12px; border: none; background: #16bd78; color: white; cursor: pointer; font-size: 12px;">همه</button>
         <button class="filter-btn active" onclick="filterSelection(event, 'all')" style="padding: 3px 10px; border-radius: 10px; border: none; background: #16bd78; color: white; cursor: pointer; font-size: 12px;">همه</button>
         <button class="filter-btn" onclick="filterSelection(event, 'tech')" style="padding: 4px 12px; border-radius: 12px; border: none; background: #eee; cursor: pointer; font-size: 12px;">تکنولوژی</button>
         <button class="filter-btn" onclick="filterSelection(event, 'tech')" style="padding: 3px 10px; border-radius: 10px; border: none; background: #eee; cursor: pointer; font-size: 12px;">تکنولوژی</button>
         <button class="filter-btn" onclick="filterSelection(event, 'art')" style="padding: 4px 12px; border-radius: 12px; border: none; background: #eee; cursor: pointer; font-size: 12px;">هنر</button>
         <button class="filter-btn" onclick="filterSelection(event, 'art')" style="padding: 3px 10px; border-radius: 10px; border: none; background: #eee; cursor: pointer; font-size: 12px;">هنر</button>
        <button class="filter-btn" onclick="filterSelection(event, 'science')" style="padding: 4px 12px; border-radius: 12px; border: none; background: #eee; cursor: pointer; font-size: 12px;">علوم</button>
     </div>
     </div>


     <!-- شبکه کارت‌ها -->
     <!-- شبکه کارت‌ها - تمرکز روی حداقل ارتفاع -->
     <div id="categoryGrid" class="category-grid">
     <div id="categoryGrid" class="category-grid">
          
          
         <!-- کارت نمونه 1 -->
         <!-- کارت با ارتفاع بسیار کم -->
         <div class="category-card tech" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #16bd78;">
         <div class="category-card tech" style="background: white; height: 35px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-right: 4px solid #16bd78; overflow: hidden;">
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">هوش مصنوعی</span>
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 15px; flex-grow: 1;">هوش مصنوعی</span>
             <span style="font-size: 10px; color: #777; background: #f0fdf4; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۱۲ مقاله</span>
             <span style="font-size: 12px; color: #777; margin-right: 5px;">۱۲</span>
         </div>
         </div>


        <!-- کارت نمونه 2 -->
         <div class="category-card art" style="background: white; height: 35px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-right: 4px solid #ff9f43; overflow: hidden;">
         <div class="category-card art" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #ff9f43;">
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 15px; flex-grow: 1;">نقاشی</span>
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">نقاشی دیجیتال</span>
             <span style="font-size: 12px; color: #777; margin-right: 5px;">۸</span>
             <span style="font-size: 10px; color: #777; background: #fff7ed; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۸ مقاله</span>
         </div>
         </div>


        <!-- کارت نمونه 3 -->
         <div class="category-card tech" style="background: white; height: 35px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-right: 4px solid #16bd78; overflow: hidden;">
         <div class="category-card science" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #54a0ff;">
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 15px; flex-grow: 1;">برنامه‌نویسی</span>
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">فیزیک کوانتوم</span>
             <span style="font-size: 12px; color: #777; margin-right: 5px;">۲۵</span>
             <span style="font-size: 10px; color: #777; background: #eff6ff; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۵ مقاله</span>
         </div>
         </div>


        <!-- کارت نمونه 4 -->
         <div class="category-card science" style="background: white; height: 35px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-right: 4px solid #54a0ff; overflow: hidden;">
         <div class="category-card tech" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #16bd78;">
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 15px; flex-grow: 1;">فیزیک</span>
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">برنامه‌نویسی</span>
             <span style="font-size: 12px; color: #777; margin-right: 5px;">۵</span>
             <span style="font-size: 10px; color: #777; background: #f0fdf4; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۲۵ مقاله</span>
         </div>
         </div>


        <div class="category-card art" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #ff9f43;">
            <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">طراحی گرافیک</span>
            <span style="font-size: 10px; color: #777; background: #fff7ed; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۱۰ مقاله</span>
        </div>
     </div>
     </div>
</div>
</div>


<style>
<style>
/* تنظیمات گرید */
.category-grid {
.category-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(4, 1fr); /* ۴ ستون در دسکتاپ */
     grid-template-columns: repeat(4, 1fr);
     gap: 10px;
     gap: 8px;
}
}


/* واکنش‌گرایی برای موبایل */
@media (max-width: 768px) {
@media (max-width: 768px) {
     .category-grid {
     .category-grid { grid-template-columns: repeat(2, 1fr); }
        grid-template-columns: repeat(2, 1fr); /* ۲ ستون در موبایل */
}
    }
 
.category-card {
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box; /* برای اینکه پدینگ ارتفاع را زیاد نکند */
}
}


/* استایل‌های کمکی */
.category-card:hover { transform: scale(1.02); }
.category-card { transition: transform 0.2s ease; cursor: pointer; }
 
.category-card:hover { transform: translateY(-3px); }
.is-hidden { display: none !important; }
.filter-btn:hover { opacity: 0.7; }


/* کلاس برای مخفی کردن کارت‌ها بدون خراب کردن گرید */
/* استایل دکمه‌ها */
.is-hidden {
.filter-btn.active { background: #16bd78 !important; color: white !important; }
    display: none !important;
}
</style>
</style>


<script>
<script>
// تابع فیلتر دسته‌بندی
function filterSelection(event, category) {
function filterSelection(event, category) {
     const cards = document.getElementsByClassName("category-card");
     const cards = document.getElementsByClassName("category-card");
     const buttons = document.getElementsByClassName("filter-btn");
     const buttons = document.getElementsByClassName("filter-btn");
    for (let btn of buttons) { btn.classList.remove("active"); btn.style.background = "#eee"; btn.style.color = "black"; }
    if(event) { event.currentTarget.classList.add("active"); event.currentTarget.style.background = "#16bd78"; event.currentTarget.style.color = "white"; }


    // تغییر استایل دکمه‌ها
    for (let btn of buttons) {
        btn.style.background = "#eee";
        btn.style.color = "black";
    }
    if(event) {
        event.currentTarget.style.background = "#16bd78";
        event.currentTarget.style.color = "white";
    }
    // فیلتر کردن کارت‌ها با استفاده از کلاس مخفی‌ساز
     for (let card of cards) {
     for (let card of cards) {
         if (category === 'all') {
         if (category === 'all' || card.classList.contains(category)) {
             card.classList.remove("is-hidden");
             card.classList.remove("is-hidden");
         } else {
         } else {
             if (card.classList.contains(category)) {
             card.classList.add("is-hidden");
                card.classList.remove("is-hidden");
            } else {
                card.classList.add("is-hidden");
            }
         }
         }
     }
     }
}
}


// تابع جستجو
document.getElementById('categorySearch').addEventListener('keyup', function() {
document.getElementById('categorySearch').addEventListener('keyup', function() {
     const searchValue = this.value.toLowerCase().trim();
     const val = this.value.toLowerCase().trim();
     const cards = document.getElementsByClassName("category-card");
     const cards = document.getElementsByClassName("category-card");
     for (let card of cards) {
     for (let card of cards) {
         const titleElement = card.querySelector('.card-title');
         const txt = card.querySelector('.card-title').innerText.toLowerCase();
        const titleText = titleElement.innerText.toLowerCase();
         card.classList.toggle("is-hidden", !txt.includes(val));
 
         if (titleText.includes(searchValue)) {
            card.classList.remove("is-hidden");
        } else {
            card.classList.add("is-hidden");
        }
     }
     }
});
});
</script>
</script>


</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:صفحه_اصلی_مغازه_شما/دسته_بندی_موضوعی»