فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>


<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="faraghaib-custom-container">


     <!-- بخش جستجو -->
     <!-- بخش جستجو -->
     <div class="search-box" style="margin-bottom: 10px; text-align: center;">
     <div class="fz-search-wrapper">
         <input type="text" id="categorySearch" placeholder="جستجو..."
         <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها...">
              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: 5px; justify-content: center; margin-bottom: 15px;">
     <div class="fz-filter-bar">
         <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="fz-filter-btn active" onclick="filterSelection(event, 'all')">همه</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="fz-filter-btn" onclick="filterSelection(event, 'tech')">تکنولوژی</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="fz-filter-btn" onclick="filterSelection(event, 'art')">هنر</button>
        <button class="fz-filter-btn" onclick="filterSelection(event, 'science')">علوم</button>
     </div>
     </div>


     <!-- شبکه کارت‌ها - تمرکز روی حداقل ارتفاع -->
     <!-- شبکه کارت‌ها -->
     <div id="categoryGrid" class="category-grid">
     <div id="categoryGrid" class="fz-category-grid">
          
          
         <!-- کارت با ارتفاع بسیار کم -->
         <!-- کارت ۱ -->
         <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="fz-card tech">
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 15px; flex-grow: 1;">هوش مصنوعی</span>
             <span class="fz-title">هوش مصنوعی</span>
             <span style="font-size: 12px; color: #777; margin-right: 5px;">۱۲</span>
             <span class="fz-count">۱۲</span>
         </div>
         </div>


         <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;">
        <!-- کارت ۲ -->
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 15px; flex-grow: 1;">نقاشی</span>
         <div class="fz-card art">
             <span style="font-size: 12px; color: #777; margin-right: 5px;">۸</span>
             <span class="fz-title">نقاشی دیجیتال</span>
             <span class="fz-count">۸</span>
         </div>
         </div>


         <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: 15px; flex-grow: 1;">برنامه‌نویسی</span>
         <div class="fz-card science">
             <span style="font-size: 12px; color: #777; margin-right: 5px;">۲۵</span>
             <span class="fz-title">فیزیک کوانتوم</span>
             <span class="fz-count">۵</span>
         </div>
         </div>


         <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;">
        <!-- کارت ۴ -->
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 15px; flex-grow: 1;">فیزیک</span>
         <div class="fz-card tech">
             <span style="font-size: 12px; color: #777; margin-right: 5px;">۵</span>
            <span class="fz-title">برنامه‌نویسی</span>
             <span class="fz-count">۲۵</span>
        </div>
 
        <!-- کارت ۵ -->
        <div class="fz-card art">
            <span class="fz-title">طراحی گرافیک</span>
             <span class="fz-count">۱۰</span>
         </div>
         </div>


خط ۴۴: خط ۵۳:


<style>
<style>
.category-grid {
/* جلوگیری از تداخل با قالب مدیاویکی */
     display: grid;
.faraghaib-custom-container {
     grid-template-columns: repeat(4, 1fr);
    direction: rtl !important;
     gap: 8px;
    font-family: tahoma, arial, sans-serif !important;
    max-width: 1000px !important;
    margin: 20px auto !important;
    padding: 15px !important;
    background: #f9f9f9 !important;
    border-radius: 15px !important;
    border: 1px solid #c9e4d5 !important;
    display: block !important; /* جلوگیری از تغییر رفتار توسط قالب */
}
 
/* استایل جستجو */
.fz-search-wrapper { margin-bottom: 15px; text-align: center; }
.fz-search-wrapper input {
    width: 90%; padding: 8px 15px; border: 1px solid #c9e4d5; border-radius: 20px; outline: none; font-size: 14px;
}
 
/* استایل فیلترها */
.fz-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.fz-filter-btn { padding: 5px 15px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 13px; transition: 0.3s; }
.fz-filter-btn.active { background: #16bd78 !important; color: white !important; }
 
/* شبکه کارت‌ها - حل مشکل مربع شدن */
.fz-category-grid {
     display: grid !important;
     grid-template-columns: repeat(4, 1fr) !important; /* ۴ ستون */
     gap: 10px !important;
    width: 100% !important;
}
}


@media (max-width: 768px) {
/* استایل کارت - تبدیل به مستطیل باریک */
     .category-grid { grid-template-columns: repeat(2, 1fr); }
.fz-card {
    background: white !important;
    height: 40px !important; /* ارتفاع ثابت و کم برای جلوگیری از مربع شدن */
    display: flex !important;
    align-items: center !important; /* مرکز قرار دادن عمودی */
    justify-content: space-between !important; /* پخش کردن متن و عدد */
    padding: 0 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    border-right: 5px solid #16bd78 !important;
    box-sizing: border-box !important; /* بسیار مهم برای کنترل ارتفاع */
    cursor: pointer;
    transition: transform 0.2s ease;
     margin: 0 !important; /* حذف مارجین‌های اجباری مدیاویکی */
}
 
.fz-card:hover { transform: translateY(-2px); }
 
/* فونت بزرگ داخل کارت باریک */
.fz-title {
    font-weight: bold !important;
    color: #333 !important;
    font-size: 16px !important; /* فونت بزرگ طبق درخواست تو */
    white-space: nowrap; /* جلوگیری از شکستن خط که باعث مربع شدن می‌شود */
    overflow: hidden;
    text-overflow: ellipsis;
}
}


.category-card {  
.fz-count {
     transition: all 0.2s ease;  
     font-size: 13px !important;
     cursor: pointer;  
    color: #666 !important;
     box-sizing: border-box; /* برای اینکه پدینگ ارتفاع را زیاد نکند */
     background: #f0fdf4;
     padding: 2px 8px;
    border-radius: 10px;
}
}


.category-card:hover { transform: scale(1.02); }
/* رنگ‌های دسته‌بندی */
.fz-card.tech { border-right-color: #16bd78 !important; }
.fz-card.art { border-right-color: #ff9f43 !important; }
.fz-card.science { border-right-color: #54a0ff !important; }


/* واکنش‌گرایی */
@media (max-width: 768px) {
    .fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* کلاس مخفی سازی */
.is-hidden { display: none !important; }
.is-hidden { display: none !important; }
/* استایل دکمه‌ها */
.filter-btn.active { background: #16bd78 !important; color: white !important; }
</style>
</style>


<script>
<script>
function filterSelection(event, category) {
function filterSelection(event, category) {
     const cards = document.getElementsByClassName("category-card");
     const cards = document.getElementsByClassName("fz-card");
     const buttons = document.getElementsByClassName("filter-btn");
     const buttons = document.getElementsByClassName("fz-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.classList.remove("active"); }
     event.currentTarget.classList.add("active");


     for (let card of cards) {
     for (let card of cards) {
خط ۸۶: خط ۱۵۵:
document.getElementById('categorySearch').addEventListener('keyup', function() {
document.getElementById('categorySearch').addEventListener('keyup', function() {
     const val = this.value.toLowerCase().trim();
     const val = this.value.toLowerCase().trim();
     const cards = document.getElementsByClassName("category-card");
     const cards = document.getElementsByClassName("fz-card");
     for (let card of cards) {
     for (let card of cards) {
         const txt = card.querySelector('.card-title').innerText.toLowerCase();
         const title = card.querySelector('.fz-title').innerText.toLowerCase();
         card.classList.toggle("is-hidden", !txt.includes(val));
         card.classList.toggle("is-hidden", !title.includes(val));
     }
     }
});
});
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:صفحه_اصلی_مغازه_شما/دسته_بندی_موضوعی»