فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>
<style>
/* جستجو */
#categorySearch{
    width:90%;
    padding:10px 18px;
    border:1px solid #c9e4d5;
    border-radius:25px;
    outline:none;
    font-size:14px;
    transition:all .3s ease;
}


/* فیلترها */
<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;">
.filter-bar{
 
    display:flex;
    <!-- بخش جستجو -->
    flex-wrap:wrap;
    <div class="search-box" style="margin-bottom: 15px; text-align: center;">
    gap:8px;
        <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها..."
    justify-content:center;
              style="width: 90%; padding: 10px 18px; border: 1px solid #c9e4d5; border-radius: 25px; outline: none; font-size: 14px; transition: all 0.3s ease;">
    margin-bottom:20px;
    </div>
}
 
    <!-- بخش فیلترها -->
    <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('all')" style="padding: 5px 15px; border-radius: 15px; border: none; background: #16bd78; color: white; cursor: pointer; font-size: 13px;">همه</button>
        <button class="filter-btn" onclick="filterSelection('tech')" style="padding: 5px 15px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 13px;">تکنولوژی</button>
        <button class="filter-btn" onclick="filterSelection('art')" style="padding: 5px 15px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 13px;">هنر</button>
        <button class="filter-btn" onclick="filterSelection('science')" style="padding: 5px 15px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 13px;">علوم</button>
    </div>


.filter-btn{
    <!-- شبکه کارت‌ها (Grid) -->
     padding:5px 15px;
     <div id="categoryGrid" class="category-grid">
    border-radius:15px;
       
    border:none;
        <!-- کارت نمونه 1 -->
    background:#eee;
        <div class="category-card tech" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #16bd78;">
    cursor:pointer;
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">هوش مصنوعی</span>
    font-size:13px;
            <span style="font-size: 11px; color: #777; background: #f0fdf4; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۱۲ مقاله</span>
}
        </div>


.filter-btn.active{
        <!-- کارت نمونه 2 -->
    background:#16bd78;
        <div class="category-card art" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #ff9f43;">
    color:#fff;
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">نقاشی دیجیتال</span>
}
            <span style="font-size: 11px; color: #777; background: #fff7ed; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۸ مقاله</span>
        </div>


/* گرید */
        <!-- کارت نمونه 3 -->
.category-grid{
        <div class="category-card science" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #54a0ff;">
    display:grid;
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">فیزیک کوانتوم</span>
    grid-template-columns:repeat(3,1fr);
            <span style="font-size: 11px; color: #777; background: #eff6ff; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۵ مقاله</span>
    gap:12px;
        </div>
}


/* کارت‌ها */
        <!-- کارت نمونه 4 -->
.category-card{
        <div class="category-card tech" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #16bd78;">
    background:#fff;
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">برنامه‌نویسی</span>
    border-radius:12px;
            <span style="font-size: 11px; color: #777; background: #f0fdf4; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۲۵ مقاله</span>
    padding:12px 4px;
        </div>
    min-height:48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    box-sizing:border-box;
    transition:.25s;
}


.category-card:hover{
        <!-- اضافه کردن کارت‌های بیشتر برای تست نمایش ردیف‌ها -->
    transform:translateY(-3px);
        <div class="category-card art" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #ff9f43;">
}
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">طراحی گرافیک</span>
            <span style="font-size: 11px; color: #777; background: #fff7ed; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۱۰ مقاله</span>
        </div>


/* عنوان */
    </div>
.category-card span:first-child{
</div>
    width:100%;
    font-weight:bold;
    color:#333;
    font-size:clamp(10.5px,3.5vw,14.5px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
}


/* تعداد مقالات */
<style>
.category-card span:last-child{
/* تنظیمات اصلی گرید */
     margin-top:5px;
.category-grid {
     font-size:11px;
     display: grid;
     color:#777;
     /* حالت دسکتاپ: ۴ ستون مساوی */
    padding:2px 8px;
     grid-template-columns: repeat(4, 1fr);
    border-radius:10px;
     gap: 15px;
     display:inline-block;
}
}


/* موبایل */
/* حالت تبلت یا موبایل‌های بزرگ (اختیاری اما برای زیبایی) */
@media (max-width:768px){
@media (max-width: 768px) {
     .category-grid{
     .category-grid {
         grid-template-columns:repeat(2,1fr);
        /* حالت موبایل: ۲ ستون مساوی */
        gap:10px;
         grid-template-columns: repeat(2, 1fr);
     }
     }
}


     .category-card{
/* حالت خیلی کوچک (موبایل‌های قدیمی) */
         padding:12px 4px;
@media (max-width: 480px) {
     .category-grid {
         grid-template-columns: repeat(2, 1fr); /* طبق درخواست تو ۲ ستونه باقی بماند */
        gap: 10px;
     }
     }
}
}
.filter-btn:hover { opacity: 0.8; }
.category-card { transition: all 0.2s ease; cursor: pointer; }
.category-card:hover { transform: translateY(-5px); }
</style>
</style>


<!-- بخش جستجو -->
<script>
<div class="search-box" style="margin-bottom:15px;text-align:center;">
function filterSelection(category) {
     <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها...">
    const cards = document.getElementsByClassName("category-card");
</div>
     const buttons = document.getElementsByClassName("filter-btn");


<!-- بخش فیلتر -->
    // تغییر استایل دکمه‌ها
<div class="filter-bar">
     for (let btn of buttons) {
     <button class="filter-btn active" onclick="filterSelection('all')">همه</button>
        btn.style.background = "#eee";
    <button class="filter-btn" onclick="filterSelection('tech')">تکنولوژی</button>
        btn.style.color = "black";
    <button class="filter-btn" onclick="filterSelection('art')">هنر</button>
    }
     <button class="filter-btn" onclick="filterSelection('science')">علوم</button>
     event.currentTarget.style.background = "#16bd78";
</div>
    event.currentTarget.style.color = "white";


<!-- گرید -->
    // فیلتر کارت‌ها
<div id="categoryGrid" class="category-grid">
    for (let card of cards) {
        if (category === 'all') {
            card.style.display = "block";
        } else {
            if (card.classList.contains(category)) {
                card.style.display = "block";
            } else {
                card.style.display = "none";
            }
        }
    }
}


     <div class="category-card tech" style="border-bottom:4px solid #16bd78;">
document.getElementById('categorySearch').addEventListener('keyup', function() {
        <span>هوش مصنوعی</span>
     const searchValue = this.value.toLowerCase();
        <span style="background:#f0fdf4;">۱۲ مقاله</span>
    const cards = document.getElementsByClassName("category-card");
    </div>


     <div class="category-card art" style="border-bottom:4px solid #ff9f43;">
     for (let card of cards) {
         <span>نقاشی دیجیتال</span>
        const title = card.querySelector('span').innerText.toLowerCase();
        <span style="background:#fff7ed;">۸ مقاله</span>
        if (title.includes(searchValue)) {
     </div>
            card.style.display = "block";
         } else {
            card.style.display = "none";
        }
     }
});
</script>


    <div class="category-card science" style="border-bottom:4px solid #54a0ff;">
        <span>فیزیک کوانتوم</span>
        <span style="background:#eff6ff;">۵ مقاله</span>
    </div>


    <div class="category-card tech" style="border-bottom:4px solid #16bd78;">
        <span>برنامه‌نویسی</span>
        <span style="background:#f0fdf4;">۲۵ مقاله</span>
    </div>


    <div class="category-card art" style="border-bottom:4px solid #ff9f43;">
        <span>طراحی گرافیک</span>
        <span style="background:#fff7ed;">۱۰ مقاله</span>
    </div>
</div>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:صفحه_اصلی_مغازه_شما/دسته_بندی_موضوعی»