فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱۸: خط ۱۸:
     <!-- شبکه کارت‌ها -->
     <!-- شبکه کارت‌ها -->
     <div id="categoryGrid" class="fz-category-grid">
     <div id="categoryGrid" class="fz-category-grid">
       
 
         <!-- کارت ۱ -->
         <!-- نمونه کارت‌ها (کلاس‌ها را مطابق دسته‌بندی تغییر بده) -->
         <div class="fz-card tech">
         <div class="fz-card tech">
             <span class="fz-title">هوش مصنوعی</span>
             <span class="fz-title">هوش مصنوعی</span>
            <span class="fz-count">۱۲</span>
         </div>
         </div>


        <!-- کارت ۲ -->
         <div class="fz-card art">
         <div class="fz-card art">
             <span class="fz-title">نقاشی دیجیتال</span>
             <span class="fz-title">نقاشی دیجیتال</span>
            <span class="fz-count">۸</span>
         </div>
         </div>


        <!-- کارت ۳ -->
         <div class="fz-card science">
         <div class="fz-card science">
             <span class="fz-title">فیزیک کوانتوم</span>
             <span class="fz-title">فیزیک کوانتوم</span>
            <span class="fz-count">۵</span>
         </div>
         </div>


        <!-- کارت ۴ -->
         <div class="fz-card tech">
         <div class="fz-card tech">
             <span class="fz-title">برنامه‌نویسی</span>
             <span class="fz-title">برنامه‌نویسی</span>
            <span class="fz-count">۲۵</span>
         </div>
         </div>


        <!-- کارت ۵ -->
         <div class="fz-card art">
         <div class="fz-card art">
             <span class="fz-title">طراحی گرافیک</span>
             <span class="fz-title">طراحی گرافیک</span>
             <span class="fz-count">۱۰</span>
        </div>
 
        <div class="fz-card tech">
             <span class="fz-title">امنیت شبکه</span>
         </div>
         </div>


خط ۵۳: خط ۴۸:


<style>
<style>
/* جلوگیری از تداخل با قالب مدیاویکی */
/* کانتینر اصلی */
.faraghaib-custom-container {
.faraghaib-custom-container {
     direction: rtl !important;
     direction: rtl !important;
     font-family: tahoma, arial, sans-serif !important;
     font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
     max-width: 1000px !important;
     max-width: 1000px !important;
     margin: 20px auto !important;
     margin: 20px auto !important;
خط ۶۳: خط ۵۸:
     border-radius: 15px !important;
     border-radius: 15px !important;
     border: 1px solid #c9e4d5 !important;
     border: 1px solid #c9e4d5 !important;
     display: block !important; /* جلوگیری از تغییر رفتار توسط قالب */
     display: block !important;
    box-sizing: border-box !important;
}
}


/* استایل جستجو */
/* استایل ورودی جستجو */
.fz-search-wrapper { margin-bottom: 15px; text-align: center; }
.fz-search-wrapper { margin-bottom: 15px; text-align: center; }
.fz-search-wrapper input {
.fz-search-wrapper input {
     width: 90%; padding: 8px 15px; border: 1px solid #c9e4d5; border-radius: 20px; outline: none; font-size: 14px;
     width: 90%;
    padding: 10px 18px;
    border: 1px solid #c9e4d5;
    border-radius: 25px;
    outline: none;
    font-size: 15px;
    font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
    transition: 0.3s;
}
}
.fz-search-wrapper input:focus { border-color: #16bd78; box-shadow: 0 0 5px rgba(22, 189, 120, 0.2); }


/* استایل فیلترها */
/* استایل دکمه‌های فیلتر */
.fz-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.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 {
.fz-filter-btn.active { background: #16bd78 !important; color: white !important; }
    padding: 6px 18px;
    border-radius: 20px;
    border: none;
    background: #eee;
    cursor: pointer;
    font-size: 14px;
    font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
    transition: 0.3s;
}
.fz-filter-btn.active { background: #16bd78 !important; color: white !important; font-weight: bold; }


/* شبکه کارت‌ها - حل مشکل مربع شدن */
/* چیدمان شبکه کارت‌ها */
.fz-category-grid {
.fz-category-grid {
     display: grid !important;
     display: grid !important;
     grid-template-columns: repeat(4, 1fr) !important; /* ۴ ستون */
     grid-template-columns: repeat(4, 1fr) !important;
     gap: 10px !important;
     gap: 12px !important;
     width: 100% !important;
     width: 100% !important;
}
}


/* استایل کارت - تبدیل به مستطیل باریک */
/* استایل کارت نهایی */
.fz-card {
.fz-card {
     background: white !important;
     background: white !important;
     height: 40px !important; /* ارتفاع ثابت و کم برای جلوگیری از مربع شدن */
     height: 42px !important;
     display: flex !important;
     display: flex !important;
     align-items: center !important; /* مرکز قرار دادن عمودی */
     align-items: center !important;
     justify-content: space-between !important; /* پخش کردن متن و عدد */
     justify-content: center !important;
     padding: 0 12px !important;
     padding: 0 10px !important;
     border-radius: 8px !important;
     border-radius: 8px !important;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
     border-right: 5px solid #16bd78 !important;
     border-bottom: 4px solid #ddd !important; /* خط رنگی پایین */
     box-sizing: border-box !important; /* بسیار مهم برای کنترل ارتفاع */
     box-sizing: border-box !important;
     cursor: pointer;
     cursor: pointer;
     transition: transform 0.2s ease;
     transition: all 0.2s ease;
     margin: 0 !important; /* حذف مارجین‌های اجباری مدیاویکی */
     margin: 0 !important;
}
}


.fz-card:hover { transform: translateY(-2px); }
.fz-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }


/* فونت بزرگ داخل کارت باریک */
/* استایل فونت داخل کارت (بزرگ شده) */
.fz-title {
.fz-title {
     font-weight: bold !important;
    font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
     font-weight: 500 !important;
     color: #333 !important;
     color: #333 !important;
     font-size: 16px !important; /* فونت بزرگ طبق درخواست تو */
     font-size: 16px !important; /* اندازه فونت بزرگ شده */
     white-space: nowrap; /* جلوگیری از شکستن خط که باعث مربع شدن می‌شود */
    text-align: center;
     white-space: nowrap;
     overflow: hidden;
     overflow: hidden;
     text-overflow: ellipsis;
     text-overflow: ellipsis;
}
}


.fz-count {
/* رنگ‌بندی دسته‌بندی‌ها */
    font-size: 13px !important;
.fz-card.tech { border-bottom-color: #16bd78 !important; }
    color: #666 !important;
.fz-card.art { border-bottom-color: #ff9f43 !important; }
    background: #f0fdf4;
.fz-card.science { border-bottom-color: #54a0ff !important; }
    padding: 2px 8px;
    border-radius: 10px;
}
 
/* رنگ‌های دسته‌بندی */
.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) {
@media (max-width: 768px) {
     .fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; }
     .fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
}


/* کلاس مخفی سازی */
/* کلاس مخفی‌سازی برای فیلتر و جستجو */
.is-hidden { display: none !important; }
.is-hidden { display: none !important; }
</style>
</style>


<script>
<script>
// تابع فیلتر دسته‌بندی
function filterSelection(event, category) {
function filterSelection(event, category) {
     const cards = document.getElementsByClassName("fz-card");
     const cards = document.getElementsByClassName("fz-card");
     const buttons = document.getElementsByClassName("fz-filter-btn");
     const buttons = document.getElementsByClassName("fz-filter-btn");
      
      
     for (let btn of buttons) { btn.classList.remove("active"); }
    // حذف حالت فعال از همه دکمه‌ها
     for (let btn of buttons) btn.classList.remove("active");
    // اضافه کردن حالت فعال به دکمه کلیک شده
     event.currentTarget.classList.add("active");
     event.currentTarget.classList.add("active");


    // نمایش یا عدم نمایش کارت‌ها
     for (let card of cards) {
     for (let card of cards) {
         if (category === 'all' || card.classList.contains(category)) {
         if (category === 'all' || card.classList.contains(category)) {
خط ۱۵۳: خط ۱۶۴:
}
}


// تابع جستجوی زنده
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("fz-card");
     const cards = document.getElementsByClassName("fz-card");
     for (let card of cards) {
     for (let card of cards) {
         const title = card.querySelector('.fz-title').innerText.toLowerCase();
         const title = card.querySelector('.fz-title').innerText.toLowerCase();
         card.classList.toggle("is-hidden", !title.includes(val));
         if (title.includes(val)) {
            card.classList.remove("is-hidden");
        } else {
            card.classList.add("is-hidden");
        }
     }
     }
});
});
</script>
</script>






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