پرش به محتوا

صفحه اصلی مغازه شما/دسته بندی موضوعی - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<div class="faraghaib-custom-container">
    <!-- بخش جستجو -->
    <div class="fz-search-wrapper">
        <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها...">
    </div>
    <!-- بخش فیلترها -->
    <div class="fz-filter-bar">
        <button class="fz-filter-btn active" onclick="filterSelection(event, 'all')">همه</button>
        <button class="fz-filter-btn" onclick="filterSelection(event, 'tech')">تکنولوژی</button>
        <button class="fz-filter-btn" onclick="filterSelection(event, 'art')">هنر</button>
        <button class="fz-filter-btn" onclick="filterSelection(event, 'science')">علوم</button>
    </div>
    <!-- شبکه کارت‌ها -->
    <div id="categoryGrid" class="fz-category-grid">
        <!-- نمونه کارت‌ها (کلاس‌ها را مطابق دسته‌بندی تغییر بده) -->
        <div class="fz-card tech">
            <span class="fz-title">هوش مصنوعی</span>
        </div>
        <div class="fz-card art">
            <span class="fz-title">نقاشی دیجیتال</span>
        </div>
        <div class="fz-card science">
            <span class="fz-title">فیزیک کوانتوم</span>
        </div>
        <div class="fz-card tech">
            <span class="fz-title">برنامه‌نویسی</span>
        </div>
        <div class="fz-card art">
            <span class="fz-title">طراحی گرافیک</span>
        </div>
        <div class="fz-card tech">
            <span class="fz-title">امنیت شبکه</span>
        </div>
    </div>
</div>
<style>
<style>
/* جستجو */
/* کانتینر اصلی */
#categorySearch{
.faraghaib-custom-container {
     width:90%;
     direction: rtl !important;
     padding:10px 18px;
    font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
     border:1px solid #c9e4d5;
    max-width: 1000px !important;
     border-radius:25px;
    margin: 20px auto !important;
     outline:none;
     padding: 15px !important;
     font-size:14px;
     background: #f9f9f9 !important;
     transition:all .3s ease;
     border-radius: 15px !important;
     border: 1px solid #c9e4d5 !important;
     display: block !important;
     box-sizing: border-box !important;
}
}


/* فیلترها */
/* استایل ورودی جستجو */
.filter-bar{
.fz-search-wrapper { margin-bottom: 15px; text-align: center; }
     display:flex;
.fz-search-wrapper input {
     flex-wrap:wrap;
     width: 90%;
     gap:8px;
    padding: 10px 18px;
     justify-content:center;
    border: 1px solid #c9e4d5;
     margin-bottom:20px;
     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); }


.filter-btn{
/* استایل دکمه‌های فیلتر */
     padding:5px 15px;
.fz-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
     border-radius:15px;
.fz-filter-btn {
     border:none;
     padding: 6px 18px;
     background:#eee;
     border-radius: 20px;
     cursor:pointer;
     border: none;
     font-size:13px;
     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; }


.filter-btn.active{
/* چیدمان شبکه کارت‌ها */
     background:#16bd78;
.fz-category-grid {
     color:#fff;
     display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
     width: 100% !important;
}
}


/* گرید */
/* استایل کارت نهایی */
.category-grid{
.fz-card {
     display:grid;
    background: white !important;
     grid-template-columns:repeat(3,1fr);
    height: 42px !important;
     gap:12px;
     display: flex !important;
     align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    border-bottom: 4px solid #ddd !important; /* خط رنگی پایین */
    box-sizing: border-box !important;
    cursor: pointer;
    transition: all 0.2s ease;
     margin: 0 !important;
}
}


/* کارت‌ها */
.fz-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }
.category-card{
 
    background:#fff;
/* استایل فونت داخل کارت (بزرگ شده) */
    border-radius:12px;
.fz-title {
    padding:12px 4px;
     font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
    min-height:48px;
     font-weight: 500 !important;
     display:flex;
     color: #333 !important;
     flex-direction:column;
     font-size: 16px !important; /* اندازه فونت بزرگ شده */
     justify-content:center;
     text-align: center;
     align-items:center;
     white-space: nowrap;
     text-align:center;
     overflow: hidden;
     box-shadow:0 2px 8px rgba(0,0,0,.05);
     text-overflow: ellipsis;
     box-sizing:border-box;
     transition:.25s;
}
}


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


/* عنوان */
/* واکنش‌گرایی موبایل */
.category-card span:first-child{
@media (max-width: 768px) {
     width:100%;
     .fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; }
    font-weight:bold;
    color:#333;
    font-size:clamp(10.5px,3.5vw,14.5px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
}
}


/* تعداد مقالات */
/* کلاس مخفی‌سازی برای فیلتر و جستجو */
.category-card span:last-child{
.is-hidden { display: none !important; }
    margin-top:5px;
</style>
    font-size:11px;
    color:#777;
    padding:2px 8px;
    border-radius:10px;
    display:inline-block;
}


/* موبایل */
<script>
@media (max-width:768px){
// تابع فیلتر دسته‌بندی
     .category-grid{
function filterSelection(event, category) {
        grid-template-columns:repeat(2,1fr);
     const cards = document.getElementsByClassName("fz-card");
        gap:10px;
    const buttons = document.getElementsByClassName("fz-filter-btn");
     }
   
    // حذف حالت فعال از همه دکمه‌ها
    for (let btn of buttons) btn.classList.remove("active");
    // اضافه کردن حالت فعال به دکمه کلیک شده
     event.currentTarget.classList.add("active");


     .category-card{
     // نمایش یا عدم نمایش کارت‌ها
         padding:12px 4px;
    for (let card of cards) {
        if (category === 'all' || card.classList.contains(category)) {
            card.classList.remove("is-hidden");
        } else {
            card.classList.add("is-hidden");
         }
     }
     }
}
}
</style>


<!-- بخش جستجو -->
// تابع جستجوی زنده
<div class="search-box" style="margin-bottom:15px;text-align:center;">
document.getElementById('categorySearch').addEventListener('keyup', function() {
     <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها...">
    const val = this.value.toLowerCase().trim();
</div>
     const cards = document.getElementsByClassName("fz-card");


<!-- بخش فیلتر -->
    for (let card of cards) {
<div class="filter-bar">
        const title = card.querySelector('.fz-title').innerText.toLowerCase();
    <button class="filter-btn active" onclick="filterSelection('all')">همه</button>
        if (title.includes(val)) {
    <button class="filter-btn" onclick="filterSelection('tech')">تکنولوژی</button>
            card.classList.remove("is-hidden");
    <button class="filter-btn" onclick="filterSelection('art')">هنر</button>
        } else {
     <button class="filter-btn" onclick="filterSelection('science')">علوم</button>
            card.classList.add("is-hidden");
</div>
        }
     }
});
</script>


<!-- گرید -->
<div id="categoryGrid" class="category-grid">


    <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 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/w/index.php?title=الگو:صفحه_اصلی_مغازه_شما/دسته_بندی_موضوعی&oldid=5582»