فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<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;
    gap:8px;
    justify-content:center;
    margin-bottom:20px;
}


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


    <!-- بخش فیلترها -->
.filter-btn.active{
    <div class="filter-bar" style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px;">
    background:#16bd78;
        <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>
    color:#fff;
        <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>


    <!-- شبکه کارت‌ها (Grid) -->
/* گرید */
    <div id="categoryGrid" class="category-grid">
.category-grid{
       
    display:grid;
        <!-- کارت نمونه 1 -->
    grid-template-columns:repeat(3,1fr);
        <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;">
    gap:12px;
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">هوش مصنوعی</span>
}
            <span style="font-size: 11px; color: #777; background: #f0fdf4; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۱۲ مقاله</span>
        </div>


        <!-- کارت نمونه 2 -->
/* کارت‌ها */
        <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;">
.category-card{
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">نقاشی دیجیتال</span>
    background:#fff;
            <span style="font-size: 11px; color: #777; background: #fff7ed; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۸ مقاله</span>
    border-radius:12px;
        </div>
    padding:12px 4px;
    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;
}


        <!-- کارت نمونه 3 -->
.category-card:hover{
        <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;">
    transform:translateY(-3px);
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">فیزیک کوانتوم</span>
}
            <span style="font-size: 11px; color: #777; background: #eff6ff; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۵ مقاله</span>
        </div>


        <!-- کارت نمونه 4 -->
/* عنوان */
        <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;">
.category-card span:first-child{
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">برنامه‌نویسی</span>
    width:100%;
            <span style="font-size: 11px; color: #777; background: #f0fdf4; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۲۵ مقاله</span>
    font-weight:bold;
        </div>
    color:#333;
 
    font-size:clamp(10.5px,3.5vw,14.5px);
        <!-- اضافه کردن کارت‌های بیشتر برای تست نمایش ردیف‌ها -->
    white-space:nowrap;
        <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;">
    overflow:hidden;
            <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">طراحی گرافیک</span>
    text-overflow:ellipsis;
            <span style="font-size: 11px; color: #777; background: #fff7ed; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۱۰ مقاله</span>
    display:block;
        </div>
}
 
    </div>
</div>


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


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


/* حالت خیلی کوچک (موبایل‌های قدیمی) */
     .category-card{
@media (max-width: 480px) {
         padding:12px 4px;
     .category-grid {
         grid-template-columns: repeat(2, 1fr); /* طبق درخواست تو ۲ ستونه باقی بماند */
        gap: 10px;
     }
     }
}
}
</style>
<!-- بخش جستجو -->
<div class="search-box" style="margin-bottom:15px;text-align:center;">
    <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها...">
</div>


.filter-btn:hover { opacity: 0.8; }
<!-- بخش فیلتر -->
.category-card { transition: all 0.2s ease; cursor: pointer; }
<div class="filter-bar">
.category-card:hover { transform: translateY(-5px); }
    <button class="filter-btn active" onclick="filterSelection('all')">همه</button>
</style>
    <button class="filter-btn" onclick="filterSelection('tech')">تکنولوژی</button>
    <button class="filter-btn" onclick="filterSelection('art')">هنر</button>
    <button class="filter-btn" onclick="filterSelection('science')">علوم</button>
</div>


<script>
<!-- گرید -->
function filterSelection(category) {
<div id="categoryGrid" class="category-grid">
    const cards = document.getElementsByClassName("category-card");
    const buttons = document.getElementsByClassName("filter-btn");


     // تغییر استایل دکمه‌ها
     <div class="category-card tech" style="border-bottom:4px solid #16bd78;">
    for (let btn of buttons) {
        <span>هوش مصنوعی</span>
        btn.style.background = "#eee";
        <span style="background:#f0fdf4;">۱۲ مقاله</span>
        btn.style.color = "black";
     </div>
    }
    event.currentTarget.style.background = "#16bd78";
     event.currentTarget.style.color = "white";


     // فیلتر کارت‌ها
     <div class="category-card art" style="border-bottom:4px solid #ff9f43;">
    for (let card of cards) {
         <span>نقاشی دیجیتال</span>
        if (category === 'all') {
        <span style="background:#fff7ed;">۸ مقاله</span>
            card.style.display = "block";
     </div>
         } else {
            if (card.classList.contains(category)) {
                card.style.display = "block";
            } else {
                card.style.display = "none";
            }
        }
     }
}


document.getElementById('categorySearch').addEventListener('keyup', function() {
     <div class="category-card science" style="border-bottom:4px solid #54a0ff;">
     const searchValue = this.value.toLowerCase();
        <span>فیزیک کوانتوم</span>
    const cards = document.getElementsByClassName("category-card");
        <span style="background:#eff6ff;">۵ مقاله</span>
    </div>


     for (let card of cards) {
     <div class="category-card tech" style="border-bottom:4px solid #16bd78;">
        const title = card.querySelector('span').innerText.toLowerCase();
         <span>برنامه‌نویسی</span>
        if (title.includes(searchValue)) {
        <span style="background:#f0fdf4;">۲۵ مقاله</span>
            card.style.display = "block";
     </div>
         } else {
            card.style.display = "none";
        }
     }
});
</script>


    <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/الگو:صفحه_اصلی_مغازه_شما/دسته_بندی_موضوعی»